/*
 * 	text Slider - jQuery plugin
 *	written by MTStudio
 *	http://www.marytrinistudio.com
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
/*
 *	markup example for $("#images").textSlider();
 *	
 * 	<div id="images">
 *	</div>
 *
 */

(function($) {

	var $obj;
	var margenesOK = true;
	var anchoMaxImagen;
	var options_textoId;
		  
	$.resize_margins =  function () {
		var $li;
		var anchoImg, margenImgIzdo, margenImgDcho;
		var firstImage = true;
		var $texto;
		
			$('li', $obj).each(function (){
							$li = $(this);
							anchoImg = $li.find('img').width(); 
							
							margenImgIzdo =  Math.floor((anchoMaxImagen - anchoImg)/2);
							margenImgDcho =  Math.round((anchoMaxImagen - anchoImg)/2);
							
							$li.css ('margin-left', margenImgIzdo);
							$li.css ('margin-right', margenImgDcho);
							$li.css ('float', 'left');
							if (firstImage)
							{
								$obj.css('background-image', 'none');
								$('ul', $obj).css({'visibility' : 'visible'});
								firstImage = false;
							}
							$texto = $("." + options_textoId, $li);
							if ($texto.length != 0) {
								$texto.css('width', anchoImg);
							}
					});

		return;
	}
		  
	$.fn.textSlider = function(options){
	  
		// default configuration properties
		var defaults = {
			prevId: 		'prevBtn',
			nextId: 		'nextBtn',	
			speed: 			1400,
			textoId:		'textoLayer',
			imagenId:		'imagenId',
			anchoVisualizacion: 1024,
			imagenes: [],
			titulos: [],
			textos: []
		}; 
		
		var options = $.extend(defaults, options);  
		var allImages = [];
		var allImagesLoaded = [];
	
		$obj = $(this);
		anchoMaxImagen = $obj.width();
		margenesOK = false;
		options_textoId = options.textoId;
		
		return this.each(function() {  
			errors();			
			preload();
			$obj.append(makeStructure($obj));
			
			var $ul = $("ul", $obj);
			var numImage = $("li", $obj).length;
			var ancho = $obj.width(); 
			var alto = $obj.height(); 
			var totImage = numImage-1;
			var currentImage = 0;
			var pointer = 0;
			var next_over_image = 'url(/images-cole2/next-over.png)';
			var prev_over_image = 'url(/images-cole2/prev-over.png)';
			
			// ANCHO DE IMAGENES TOTAL
			var anchoTotal = anchoMaxImagen * numImage;
			$ul.css('width', anchoTotal);
			
			//margenes izdo y derecho para slide
			setMarginSlide();
			
			
			// botones de navegación
			$obj.append(
						 '<div id="' + options.prevId +'"> </div>'+
						 '<div id="' + options.nextId +'"> </div>');
			
			var $divPrev = $("div#"+options.prevId);
		 	var $divNext = $("div#"+options.nextId);
			var prev_image = $divPrev.css('background-image');
			var next_image = $divNext.css('background-image');

			
			$divPrev.hover(
			function() {
				$divPrev.addClass("link-hover");
				$divPrev.css('background-image', prev_over_image);
			}, function(){
				$divPrev.removeClass("link-hover");
				$divPrev.css('background-image', prev_image);
			});
			
			$divNext.hover(
			function() {
				$divNext.addClass("link-hover");
				$divNext.css('background-image', next_over_image);

			}, function(){
				$divNext.removeClass("link-hover");
				$divNext.css('background-image', next_image);

			});
			
			$divPrev.hide();
			$divNext.hide();
			
			$divNext.click(function(){	
				$obj.css('background-image', 'none');
				animate("next");
				if (currentImage>=totImage) $(this).fadeOut();
				$divPrev.fadeIn();
			});
			
			$divPrev.click(function(){		
				animate("prev");
				if (currentImage<=0) $(this).fadeOut();
				$divNext.fadeIn();
			});				
			
			function makeStructure(){
				
				var s= options.imagenes.length;
				var html = '<ul>';
				var mostrarTexto = (options.titulos != null);
				var mostrarTitulo = (options.texto != null);
				
				for (var i=0; i<s; i++){
					html += '<li id="' + options.imagenId + i +'"><div>';
					html += '<img src="' + options.imagenes[i] + '" />';
					if (mostrarTexto || mostarTitulo) {
						var sTexto = (options.textos[i]!=null) ? options.textos[i] : '';
						var sTitulo = (options.titulos[i]!=null) ? options.titulos[i] : '';
						if ((sTexto != '') || (sTitulo != '')) {
							html += '<div class="' +  options.textoId + '">';
							html += '<p>' + sTitulo + ": " + sTexto + '</p>';
							html += '</div>';
						}
					}
					html += '</div></li>';
				}
				
				html += '</ul>';
				return (html);
			};
			
			
			function setMarginSlide(){
				var anchoImg;
				var firstImage = true;
				var $texto;
				var margenImgIzdo, margenImgDcho;
				var i=0;
				
				if (!margenesOK) {
					$("li", $obj).each(function (){
								$li = $(this);
								anchoImg = $li.find('img').width();
								// img not loaded, for Chrome and Safari
								if (anchoImg == 0) {
									anchoImg = anchoMaxImagen;
									margenesOK = false;
								}
								/*else{
									if (firstImage){
										firstImage = false;
										$("ul", $obj).css({'visibility' : 'visible'});
										$obj.css('background-image', 'none');
									}
									margenesOK = true;
								}*/
								margenImgIzdo =  Math.floor((anchoMaxImagen - anchoImg)/2);
								margenImgDcho =  Math.round((anchoMaxImagen - anchoImg)/2);
								$li.css ('margin-left', margenImgIzdo);
								$li.css ('margin-right', margenImgDcho);
								$li.css ('float', 'left');
								
								// COLACAR TEXTOS
								$texto = $("." + options.textoId, $li);
								if ($texto.length != 0) {
									$texto.css('width', anchoImg);
								}
							});
				}
			}
			
			function preload(){
				var s= options.imagenes.length;

				for (var i=0; i<s; i++){
					allImages[i] = new Image();
					allImages[i].src = options.imagenes[i];
					$(allImages[i]).load(function(){
											allImagesLoaded[i] = true;  
					});
				}
				return;
			}
		
			function errors() {
				if (options.imagenes.length == 0){
					alert("No se han definido imágenes en el slider");
					exit;
				}	
				return;
			};
			
			function animate(dir){
				// si es para atras hay que restar la ultima imagen que se trasladó
				if (dir != "next")
					currentImage = (currentImage <= 0) ? 0 : currentImage-1;
				else
					currentImage = (currentImage >= totImage) ? totImage : currentImage+1;
							
				pointer += (anchoMaxImagen * ((dir=="next") ? -1 : 1));
				$ul.animate({ marginLeft: pointer }, { duration: options.speed, easing: 'easeOutExpoB18'});
			};
			
			if(numImage>1) $divNext.fadeIn();
			
			// Chrome y Safari cargan las imagenes en este evento
			$(window).bind("load", function (){ setMarginSlide(); });
		});
		
		
	} // fin plugin

})(jQuery);