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

	/*
	* Charge la banniere
	*/
	calinerie.ui.banner.loadBanner = function (xmlUrl, settings) {
		var options = {
			selectorClass: 'div.calinerie-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
			thumbsWidth: 80, //largeur des thumbnails
			thumbsHeight: 43, //hauteur des thumbnails
		};

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

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

				calinerie.ui.banner.applyCyclePlugin(parms.container, parms.autoSwap, options);
			}
		});
	};


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

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

			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 imgUrl = $(this).attr('ImageURL'); 	//l'adresse de l'image
						var imgThumbUrl = $(this).attr('ImageThumbURL'); 	//l'adresse 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 + '">' + 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 += 124;
						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);
				//$divThumb.css("padding-top","4px");
				$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;
	};

	/*
	* Applique le plugin de jquery.cycle sur la galerie
	*/
	calinerie.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
				calinerie.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é
	*/
	calinerie.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 = calinerie.ui.banner.getSize;
			var getPos = calinerie.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
	*/
	calinerie.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
	*/
	calinerie.ui.banner.getPosition = function ($obj, orientation) {
		if ($obj.length <= 0) { return 0; }

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