/**
 * homepage.js
 *
 * Copyright (c) 2010 Jaguar.com
 *
 * Requires: global.js
 *
 *
 */

/*
 * loadHPImages
 *
 *
 */
function loadHPImages(xmlUrl) {
	/**
	 * Private members
	 */
	var _WIDTH = 838;
	var _HEIGHT = 435;
	var transition;
	
	/*
	 * Initialize
	 *
	 */
	function initialize(xml)
	{
		var slides = [];
		var slideHtml = '<div class="titleOverlay">' +
							'<h2>{title}</h2>' +
							'<span>{bodytext}</span>' +
							'<a href="{linkToUrl}" class="lnk-more">{linkToLabel}'+
							'<img class="arrow-more" alt="{linkToLabel}" src="/lofi/images/interface/newci/btn-more-arrow.gif" />'+
							'</a>' +
						'</div>' +
						'{playButton}' + // Optional
						'<img src="{assetUrl}" alt="{title}" width="' + _WIDTH + '" height="' + _HEIGHT + '" class="pixbg" />';
		var list = $('ul.pix');
		var j = 0; // Video index
		
		/*  Remove all slides but the first one. Note that video removes
			itself since we can't hook into the flowplayer instance in the
			DOM. We therefore need slide[0] so we can rewrite the video
			using $f in cases where slide[0] is video. */
		$('li:not(:first)', list).remove();
		
		var xmlSlides = [];
		$(xml).find('slide').each(function(){
			var type = $(this).attr('type');
			if (type == 'nameplateImage' || type == 'image' || type == 'nameplateVideo' || type == 'video') {
				xmlSlides.push(this);
			}
		});
		
		$(xmlSlides).each(function(index){
			slides[index] = {type: $(this).attr('type'),
							title: $(this).find('title').text(),
							bodytext: $(this).find('bodytext').text(),
							assetUrl: $(this).find('assetUrl').text(),
							linkToUrl: $(this).find('linkToUrl').text(),
							linkToLabel: $(this).find('linkToLabel').text(),
							stillImageUrl: $(this).find('stillImageUrl').text()};
			var slide = slides[index];
				
			switch (true) {
				case (((slide.type == 'nameplateImage') || (slide.type == 'image')) && index > 0): // Skip 1st image
					var html;
					
					// Checks for empty linkLabel and either bodyText or title are empty
					if ((!slide.linkToLabel) && (!slide.bodytext || !slide.title)) {
						html = '<img src="' + slide.assetUrl + '" alt="" width="' + _WIDTH + '" height=' + _HEIGHT + ' />';
					} else {
						html = $.nano(slideHtml, {"title":slide.title,
													"bodytext":slide.bodytext,
													"linkToUrl":slide.linkToUrl,
													"linkToLabel":slide.linkToLabel,
													"assetUrl":slide.assetUrl
													});
					}
					
					list.append('<li class="next">' + html + '</li>');
					
					break;
				case ((slide.type == 'nameplateVideo') || (slide.type == 'video')):
					var html;
					
					html = $.nano(slideHtml, {"title":slide.title,
												"bodytext":slide.bodytext,
												"linkToUrl":slide.linkToUrl,
												"linkToLabel":slide.linkToLabel,
												"playButton":(supports_media(slides[index].assetUrl)) ?
																'<a class="lnk-watch-video" href="#">' +
																	sbWatchVideoLabel +
																'</a>' : '',
												"assetUrl":slide.stillImageUrl
												});

					var container = $('#player' + j);
					
					if (j == 0 && container.length > 0)
						container.append(html); // First slide already exists and is video
					else
						list.append('<li class="next" style="width:838px;height:435px;">' + // Next slide
									   '<div id="player' + j + '">' +
											html +
									   '</div>' +
								   '</li>');
					
					$('.lnk-watch-video', $('#player' + j)).bind('click', {'i':index, 'j': j++}, function(e) {
						var index = e.data.i;
						
						if (transition)
							transition.pause();
						
						loadVideo('player' + e.data.j, {"width":_WIDTH, // Create video in '#player[j++]' container
														"height":_HEIGHT,
														"source":slides[index].assetUrl,
														"title":slides[index].title,
														"imgsrc":slides[index].stillImageUrl,
														"onFinish":function() {
															if (transition)
																transition.start();
														}});

						e.preventDefault();
						
						return false;
					});
					
					break;
				default:
				
					break;
			}
		});
		
		$('body').addClass("with-revolver");
		
		if (slides.length > 1) {
			transition = $('li', list).imagetransition({'pauseLength':sbPauseLength}); // The normal transitions are used for all other browsers
		}
	}
	
	jaguarAJAXLoader.retrieve(this, initialize, xmlUrl); // Retrieve content via REST
}