/*
* Module de bannière javascript
* Requires:	jQuery			v 1.4.4 or later
*				jQuery.UI		v 1.8.6 or later (for transitions easing)
*				jQuery Cycle 	v 2.94 (http://jquery.malsup.com/cycle/options.html)
*				jQuery ScrollTo	v 1.42 (http://flesler.blogspot.com/2007/10/jqueryscrollto.html)
* Author :	Mathieu Deslauriers	(2011)
* Modifications
*					2011-04-20	[MD]	Ajout du mode de navigation iTunes
*/

//Namespace handling
if (!umen) { var umen = {}; }
if (!umen.ui) { umen.ui = {}; }
if (!umen.ui.banner) {
	umen.ui.banner = {};

	/*
	* Charge la banniere
	*/
	umen.ui.banner.loadBanner = function (xmlUrl, settings) {
		var options = {
			selectorClass: 'div.umen-banner',
			msDelay: 8000, //délais entre les transitions
			orientation: "y", //["x", "y"]
			renderThumbsFirst: true, //détermine si les thumbnails sont ajouté avant la galerie ou l'inverse : flexibilité css
			moduleWidth: 630, //largeur totale du module
			moduleHeight: 300, //hauteur totale du module
			//nbThumbs: 7, //nombre de thumbnails
			thumbsWidth: 80, //largeur des thumbnails
			thumbsHeight: 43, //hauteur des thumbnails
			displayMode: "itunes", //mode d'affichage ["itunes", "normal"]
			itunesDirection: "down" //direction d'affichage ["up", "down"]
		};

		//merge des options
		$.extend(options, settings);

		//chargement du xml et output
		$.ajax({
			type: "GET",
			url: xmlUrl,
			dataType: "xml",
			success: function (xml) {
				var parms = umen.ui.banner.readAndOutputXml(xml, options);

				//Chargement en fonction du mode
				if (options.displayMode == "itunes") {
					umen.ui.banner.setiTunesNavigation(parms.container, parms.autoSwap, options);
				} else {
					umen.ui.banner.applyCyclePlugin(parms.container, parms.autoSwap, options);
				}
			}
		});
	};


	/*
	* Lit le fichier XML et outut le contenu
	*/
	umen.ui.banner.readAndOutputXml = function (xml, options) {
		//Conteneur principal
		var $divContainer = $(options.selectorClass);
		var autoSwap = true;

		$(xml).find('Module').each(function () {

			//var navType = $(this).attr('NavigationType');	//type de navigation
			//var navPosH = $(this).attr('PositionNavH');		//position horizontale de navigation
			//var navPosV = $(this).attr('PositionNavV');		//position verticale de navigation
			//var duration = $(this).attr('Duration');		//delais d'affichage
			//var transType = $(this).attr('TransitionType'); //type de transition
			//var caption = $(this).attr('Caption');			//détermine si on affiche l'info-bulle
			autoSwap = $(this).attr('AutoSwap'); 	//détermine si le changement est automatique
			var $divThumb; 	//conteneur des thumbnails
			var $divBanner; 	//conteneur de l'image principal
			var totalWidth = 0;
			var totalHeight = 0;

			//on détermine si on ajoute les thumbnails en premier (flexibilité css)
			if (options.renderThumbsFirst) {
				$divThumb = $('<div class="ban-thumbs"></div>').html('').appendTo($divContainer);
				$divBanner = $('<div class="ban-gallery"></div>').html('').appendTo($divContainer);
			} else {
				$divBanner = $('<div class="ban-gallery"></div>').html('').appendTo($divContainer);
				$divThumb = $('<div class="ban-thumbs"></div>').html('').appendTo($divContainer);
			}

			//on boucle dans les bannières
			$(this).find('Banners').each(function () {

				//si on a des items on construit dans une boucle
				if ($(this).find('Banner').length > 0) {

					var $ulThumb = $('<ul></ul>').appendTo($divThumb);
					var $ulBanner = $('<ul></ul>').appendTo($divBanner);

					$(this).find('Banner').each(function (i) {
						//initialisation des variables
						var id = $(this).attr('BannerID'); 		//id de la banniere
						var capTxt = $(this).attr('CaptionText'); //le alt de l'image
						var lnk = $(this).attr('Link'); 			//le lien de l'image
						var lnkTarget = $(this).attr('LinkTarget'); //le target du lien de l'image
						var imgUrl = $(this).attr('ImageURL'); 	//l'adresse de l'image
						var imgThumbUrl = imgUrl.replace(/\/public\/media\//gi, '/public/media/thumbnail/'); //l'adresse du thumbnail de l'image

						//construction des images
						var imgThumb = '<img src="' + imgThumbUrl + '" alt="' + capTxt + '" title="' + capTxt + '" width="' + options.thumbsWidth + '" height="' + options.thumbsHeight + '" />';
						var imgMain = '<img src="' + imgUrl + '" alt="' + capTxt + '" title="' + capTxt + '" />';

						//gestion du lien
						if (lnk != "") {
							imgMain = '<a href="' + lnk + '" target="' + lnkTarget + '">' + imgMain + '</a>';
							//Si on veut mettre un lien sur l'image du thumbnail on peut faire le même principe ici
						}

						//le thumbnail doit avoir un "a" autour pour le paging
						imgThumb = '<a href="javascript:void(0)">' + imgThumb + '</a>';

						//on ajoute les li avec les image
						var thumb = $('<li></li>').html(imgThumb).appendTo($ulThumb); //thumb
						$('<li></li>').html(imgMain).appendTo($ulBanner); //main image

						//on additionne les taille pour le conteneur de scroll
						totalWidth += thumb.width();
						totalHeight += thumb.height();
					});
				}
			});

			//On ajoute la classe d'orientation sur le conteneur et on set les tailles en fonction du contenu
			$divContainer.width(options.moduleWidth);
			$divContainer.height(options.moduleHeight);
			$divContainer.addClass(options.displayMode); // on ajoute une classe contenant le mode pourplus de souplesse

			if (options.orientation == "x") {
				$divContainer.addClass("ban-horizontal");
				$divThumb.height(options.thumbsHeight);
				$divBanner.height(options.moduleHeight - options.thumbsHeight);
				$("ul", $divThumb).width(totalWidth);
			} else {
				$divContainer.addClass("ban-vertical");
				$divThumb.width(options.thumbsWidth);
				$divThumb.height(options.moduleHeight);
				$divBanner.height(options.moduleHeight);
				$divBanner.width(options.moduleWidth - options.thumbsWidth);
				$("ul", $divThumb).height(totalHeight);
			}
		});

		//On retourne le conteneur
		var ret = { container: $divContainer, autoSwap: autoSwap };
		return ret; //$divContainer;
	};


	/*
	* Set la navigation iTunes
	*/
	umen.ui.banner.setiTunesNavigation = function ($divContainer, autoSwap, options) {

		var index = 0;
		var intervalId = 0;
		var isScrolling = false;
		var images = $("div.ban-gallery li");
		var thumbs = $("div.ban-thumbs li");
		var thumbsWidth = options.thumbsWidth;
		var thumbsHeight = options.thumbsHeight;
		var $thumbsContainer = $('div.ban-thumbs', $divContainer);

		for (i = 0; i < thumbs.length; i++) {
			$(images[i], $divContainer).addClass("image-" + i);
			$(thumbs[i], $divContainer).addClass("thumbs-" + i);			
		}

		//Si on est vertical et que les thumbnails defilent vers le bas on doit :
		//	- ajuster l'index
		//	- remonter le conteneur 
		//	- pre-scroller le contenu le contenu pour la premiere slide
		if (options.orientation == "y" && options.itunesDirection == "down") {
			index = thumbs.length - 1;
			var $ul = $('ul', $thumbsContainer);
			$ul.css('margin-top', '-' + ($ul.height() - options.moduleHeight) + 'px');
			shiftImages(options.orientation, options.itunesDirection, thumbsWidth, thumbsHeight);
		}

		//Intervale d'animation
		intervalId = setInterval(function () { shiftImages(options.orientation, options.itunesDirection, thumbsWidth, thumbsHeight); }, options.msDelay);


		//Ajout de la fleche de navigation
		if (options.orientation == "y" && options.renderThumbsFirst) {
			$('<a href="javascript:void(0);" class="nav"></a>').appendTo($divContainer);
		} else {
			$thumbsContainer.after('<a href="javascript:void(0);" class="nav"></a>');
		}
		
		

		var $nav = $("a.nav", $divContainer);
		//taille du bouton
		$nav.css('height', thumbsHeight + 'px');
		$nav.css('margin-top', '-' + thumbsHeight + 'px');
		if (options.orientation == "y") { $nav.css('width', thumbsWidth + 'px'); }
		//event du bouton de navigation
		$nav.click(function () {
		   
			if (!isScrolling) {
				//On reset l'intervale
				clearInterval(intervalId);
				//on switch l'image
				shiftImages(options.orientation, options.itunesDirection, thumbsWidth, thumbsHeight);
				//on set l'intervale à nouveau
				intervalId = setInterval(function () { shiftImages(options.orientation, options.itunesDirection, thumbsWidth, thumbsHeight); }, options.msDelay);
			}
		});
		
		$nav.stop().animate({"opacity": "0"}, "slow");
		/*
		$nav.mouseover(function() {
        $(this).fadeIn(500);
      });
      
      $nav.mouseout(function() {
        $(this).fadeOut(800);
      });
      */
      $nav.hover(
            function() {
             $(this).stop().animate({"opacity": "1"}, "slow");
            },
            function() {
               $(this).stop().animate({"opacity": "0"}, "slow");
      });

      
		//Fonction qui met a jour l'images principale
		function fadeImages(i, $divContainer) {
			images.fadeOut(800);
			$(".image-" + i, $divContainer).stop().fadeIn(800, 'swing');
		};
		
		
		for (i = 0; i < thumbs.length; i++) {
			
			$("div.ban-thumbs li:eq(" + i + ")", $divContainer).click(function()	{	
			   			 
			   var ff = $(this).attr("class");			   
			   ff = ff.replace('thumbs-', '');
			   var nn = ".image-" + ff;			   
			   images.fadeOut(800);
			   $(nn, $divContainer).stop().fadeIn(800, 'swing');

			});			
		}

		//Fonction de switch d'image en fonction des parametre de direction et d'orientation
		function shiftImages(orientation, direction, thumbsWidth, thumbsHeight) {

			var $container = $("div.ban-thumbs ul", $divContainer);
			var $items = $container.find("li");
			var $firstItem = $($items.get(0));
			var $itemToMove = null;
			var distanceToMove = -thumbsHeight; //En négatif

			//Si on est vertical et que les thumbnails defilent vers le bas
			if (orientation == "y" && direction == "down") {
				//Correction de l'index
				if (index < 0) { index = (thumbs.length - 1); }

				//Objet à deplacer pour scroll infini
				$itemToMove = $($items.get($items.length - 1));

				//Distance dans de déplacement du scroll doit être en positif (inversee)
				distanceToMove = thumbsHeight;

				//Update de l'image principale
				fadeImages(index, $divContainer);

				//Scroll et remove de l'element dupliqué pour le scroll infini
				isScrolling = true;
				$firstItem.animate({ marginTop: thumbsHeight + "px" }, 800, function () {
					$firstItem.css('margin-top', '0px');
					$itemToMove.clone(true).prependTo($container);
					//alert($itemToMove.attr("class"));
					$itemToMove.remove();
					isScrolling = false;
					index--;
				});
			}
			//Dans tous les autres cas
			else {
				//Correction de l'index
				if (index > (thumbs.length - 1)) { index = 0; }

				//Objet à deplacer pour scroll infini
				$itemToMove = $($items.get(0));
				$itemToMove.clone().appendTo($container);

				//Distance dans de déplacement du scroll dans le cas horizontal
				if (options.orientation == "x") { distanceToMove = -thumbsWidth; }

				//Update de l'image principale
				fadeImages(index, $divContainer);

				//Scroll et remove de l'element dupliqué pour le scroll infini
				isScrolling = true;
				var anim = (options.orientation == "y") ? { marginTop: distanceToMove + "px"} : { marginLeft: distanceToMove + "px" };
				$firstItem.animate(anim, 800, function () {
					$itemToMove.remove();
					isScrolling = false;
					index++;
				});
			}
		};
	};

	/*
	* Applique le plugin de jquery.cycle sur la galerie
	*/
	umen.ui.banner.applyCyclePlugin = function ($divContainer, autoSwap, options) {
		//On gère le délais entre les transitions
		var delay = options.msDelay;
		if (!autoSwap) { delay = 1000; }

		$('div.ban-gallery ul', $divContainer).cycle({
			timeout: delay,
			before: function (curr, next, opts) {
				//on doit scroller
				var currIndex = opts.currSlide;
				var nextIndex = opts.nextSlide;
				var $thumbsContainer = $('div.ban-thumbs', $divContainer);

				//Set la position du scroll
				umen.ui.banner.setScrollPosition($divContainer, $thumbsContainer, currIndex, nextIndex, options.orientation);
			},
			pager: '#' + $divContainer.attr('id') + ' div.ban-thumbs ul',
			pagerAnchorBuilder: function (index, slide) {
				//on retourne le anchor du pager
				return '#' + $divContainer.attr('id') + ' div.ban-thumbs li:eq(' + index + ') a';
			}
		});
	};

	/*
	* Set la position du scroll en fonction de l'item demandé
	*/
	umen.ui.banner.setScrollPosition = function ($divContainer, $thumbsContainer, currIndex, nextIndex, orientation) {
		if (nextIndex == 0) {
			//premier : on remonte en haut completement de la liste
			$thumbsContainer.scrollTo('0px', 800, { axis: orientation });
		} else {
			//pour les autres, on s'assure que le suivant/précédents sont visibles dans la liste
			var $nextItem = $('.ban-thumbs ul li:eq(' + (nextIndex + 1) + ')', $divContainer);
			var $prevItem = $('.ban-thumbs ul li:eq(' + (nextIndex - 1) + ')', $divContainer);

			//cache des fonctions
			var getSize = umen.ui.banner.getSize;
			var getPos = umen.ui.banner.getPosition;

			//calcul des tailles et positions
			var posThumbsContainer = getPos($thumbsContainer, orientation);
			var sizeThumbsContainer = getSize($thumbsContainer, orientation, true);
			var posNextItem = getPos($nextItem, orientation);
			var sizeNextItem = getSize($nextItem, orientation, true);
			var posPrevItem = getPos($prevItem, orientation);
			var sizePrevItem = getSize($prevItem, orientation, true);


			if ($nextItem.length > 0 && (posNextItem + sizeNextItem) >= (posThumbsContainer + sizeThumbsContainer)) {
				//l'élément suivant est caché
				var offset = (posNextItem + sizeNextItem) - (posThumbsContainer + sizeThumbsContainer);
				$thumbsContainer.scrollTo('+=' + offset + 'px', 800, { axis: orientation });
			}
			else if ($prevItem.length > 0 && posPrevItem < posThumbsContainer) {
				//l'élément précédent est caché
				var offset = posThumbsContainer - posPrevItem;
				$thumbsContainer.scrollTo('-=' + offset + 'px', 800, { axis: orientation });
			}
		}
	};


	/*
	* Get le size en fonction de l'orientation
	*/
	umen.ui.banner.getSize = function ($obj, orientation, includeOuter) {
		if ($obj.length <= 0) { return 0; }

		if (includeOuter) {
			if (orientation == 'x') { return $obj.outerWidth(true); }
			else { return $obj.outerHeight(true); }
		} else {
			if (orientation == 'x') { return $obj.width(); }
			else { return $obj.height(); }
		}
	};


	/*
	* Get le size en fonction de l'orientation
	*/
	umen.ui.banner.getPosition = function ($obj, orientation) {
		if ($obj.length <= 0) { return 0; }

		if (orientation == 'x') { return $obj.position().left; }
		else { return $obj.position().top; }
	};
}