// -------------------------------
// Slider V.3. Autor Luis A. Paños
// -------------------------------
// Añadidos desde la v.2:
// Funcionalidades vía clase css: "no-navegacion" para hacer un slider simple. "slow" y "fast" para dar alternativas a la velocidad en lugar de dar un parámetro más "fino" en la llamada js

(function($){ 
jQuery.fn.slider = function(settings) {
    settings = jQuery.extend({
        frameInicio: 1,
        timeInterval:5000,
        timePause: 10000
    }, settings);

    this.each(function() {

        var container = jQuery(this);
		var no_thumbs = container.parent("div").hasClass('no-thumbs'); 
		var no_navegacion = container.parent("div").hasClass('no-navegacion');
		var posicion_numerada = container.parent("div").hasClass('posicion-numerada'); 
		var autostart = container.parent("div").hasClass('autostart');
		var fast = container.parent("div").hasClass('fast');
		var slow = container.parent("div").hasClass('slow');
		var fade = container.parent("div").hasClass('fade');
		var movement = container.parent("div").hasClass('movement'); 
		
		
        var ultimoIndice = container.find(".layerSlide:last").index(); 
		if (settings.frameInicio == 0 || settings.frameInicio < 0) { var startContent = 0 } else if ( ((settings.frameInicio)-1) > ultimoIndice) { var startContent = 0  } else { var startContent = (settings.frameInicio) - 1;}
        var anchoImagenLayerSlide = container.find('.layerSlide').width();
		

	    
        // creación diámica de capa que contiene los thumbnail
		container.find('.content-layerSlide').after('<div class="content-layerThumbs"></div>');
	        if (no_thumbs == true){ container.find('.content-layerThumbs').addClass('no-thumbImages'); } // caso de no llevar thumbnails
        
		// creación diámica de los nodos thumbnail
        for (nodo = 0; nodo <= ultimoIndice; nodo++ ){  
			container.find('.content-layerThumbs').append('<div class="layerThumb"><img src="Imagenes/Modulos/Presentacion/Iconos/thumbnail-loading.gif" border="0" /><h2 class="titulo"></h2></div>');  
			if (no_thumbs == true){ 
					container.find('.layerThumb').eq(nodo).find('img,h2').hide(); 
					if (posicion_numerada == true) {  container.find('.layerThumb').eq(nodo).prepend('<span class="nodo-txt-numero">'+(nodo+1)+'</span>'); }
			};
		};

		//caso de no llevar ni thumbnails ni cursores de posicion
	    if (no_navegacion == true){ container.find('.content-layerThumbs').hide(); } // caso de no llevar thumbnails de verdad
	    
		//caso de no llevar ni thumbnails ni cursores de posicion
	    if (fast == true){ 
	              settings.timeInterval = 2500;
	              //alert("fast "+container.attr('id')+" "+settings.timeInterval);
	    }  else if (slow == true) {
	            settings.timeInterval = 10000;
	            //alert("slow "+container.attr('id')+" "+settings.timeInterval);
	    } else {
	            settings.timeInterval;
                //alert("normal "+container.attr('id')+" "+settings.timeInterval);
	    }// caso de no llevar thumbnails de verdad
	    
		//caso de no llevar ni thumbnails ni cursores de posicion
	    //if (slow == true){ timeInterval: 10000; alert("slow")} // caso de no llevar thumbnails de verdad
	    
		// Declaro Array para guardar los codigos de cada video que luego necesitaré para hacer click en sus skin porque los borro dinámicamente para que no los cargue el navegador y no me estorben
		var codigo_object_video = new Array;  

		// Creación paso a paso del contenido de cada nodo thumbnail
        for (nodoSlide = 0; nodoSlide <= ultimoIndice; nodoSlide++ ){  
		
			// Almaceno string de titulo y lleno el thumbnail 
			var titulo_existente = container.find('.layerSlide').eq(nodoSlide).find('.titulo').text();
			container.find('.layerThumb .titulo').eq(nodoSlide).append($.trim(titulo_existente));

			// Variable para comprobar que hay video
			var existeEmbed = container.find('.layerSlide').eq(nodoSlide).find('embed').length; 

				// nodo normal SIN video				
				if (existeEmbed == 0) { 
					var ruta_img_existente = container.find('.layerSlide').eq(nodoSlide).find('img').attr('src');
					var ruta_img_thumb = ruta_img_existente.replace(/_[0-9]./, '_4.'); 
					container.find('.layerThumb').eq(nodoSlide).find('img').attr('src',ruta_img_thumb);
				}; // END if (codigo_object_video[nodoSlide] == null
										
				// nodo CON video

				if (existeEmbed > 0) { 
				
					///////////////////////////////////  flash: modo windows opaque  //////////////////////////////////
					var navegador = navigator.appName 
					if (navegador != "Microsoft Internet Explorer"){
						//$(".slider object").prepend('<param name="wmode" value="opaque"></param>');
						container.find('object').prepend('<param name="wmode" value="opaque"></param>');
						}
					// FireFox is easy to handle
					    //$(".slider embed").attr("wmode", "opaque");
					   container.find('embed').attr("wmode", "opaque");
					// IE requires more work
					var embedTag;
					//$(".slider embed").each(function(i) {
					container.find('embed').each(function(i) {
						embedTag = $(this).attr("outerHTML");
						if ((embedTag != null) && (embedTag.length > 0)) {
							embedTag = embedTag.replace(/embed /gi, "embed wmode=\"opaque\" ");
							$(this).attr("outerHTML", embedTag);
						};
					});
					///////////////////////////////////  fin modo windows opaque  //////////////////////////////////
							
					// patterns para montar el skin
					start_layer_skin = '<div class="group_ico-play-video_img-skinvideo"><span class="ico-play-video"></span>'
					close_layer_skin= '</div>'
					
					// variables para manejar de donde viene cada video
					srcEmbedObject = container.find('.layerSlide').eq(nodoSlide).find('embed').attr('src');
					mayusculizo = srcEmbedObject.toUpperCase()
					isUtube = mayusculizo.search(/YOUTUBE/i)
					isMetacafe = mayusculizo.search(/METACAFE/i)
					isVimeo = mayusculizo.search(/VIMEO/i)

						if ( isUtube != -1) { 
							//Lo que sigue es para modificar el codigo youtube para hacer autoplay del video y guardarlo después en el Array
							autoplay = "&autoplay=1"
							url_video_autoplay = srcEmbedObject.concat(autoplay);
							cambio_url_embed = container.find('.layerSlide').eq(nodoSlide).find('embed').attr('src', url_video_autoplay);
							cambio_url_param = container.find('.layerSlide').eq(nodoSlide).find('param[name="movie"]').attr('value', url_video_autoplay); 	
							//Lo que sigue es para obtener imagenes de youtube
							var startPos = srcEmbedObject.indexOf('v/') + 2;
							var endPos = srcEmbedObject.indexOf("?");
							var idYoutube = srcEmbedObject.slice(startPos, endPos); 
							ruta_img_thumb = 'http://img.youtube.com/vi/' + idYoutube + '/default.jpg'; 
							pattern_img_skin = start_layer_skin + '<img src="http://img.youtube.com/vi/' + idYoutube + '/0.jpg" class="img-skinvideo" />' + close_layer_skin;
							container.find('.layerThumb').eq(nodoSlide).find('img').attr('src',ruta_img_thumb);
								if (no_thumbs != true) {  container.find('.layerThumb').eq(nodoSlide).find('img').bind("load", function(){ $(this).before('<span class="ico-play-video-thumbnail"></span>');   })        }
							container.find('.layerSlide').eq(nodoSlide).find('.layerSlide-contenido').append(pattern_img_skin);
						}///////////// End IF isUtube
						
						if ( isMetacafe != -1) { 
							//Lo que sigue es para modificar el codigo metacafe para hacer autoplay del video y guardarlo después en el Array
							container.find('.layerSlide').eq(nodoSlide).find('.code-video div').remove(); // remove etiquetas de info de metacafe
							container.find('.layerSlide').eq(nodoSlide).find('embed').attr('flashVars', 'playerVars=autoPlay=yes');		
							//Lo que sigue es para obtener imagenes de Metacafe
							var startPos = srcEmbedObject.indexOf('/fplayer/') + 9;
							var endPos = srcEmbedObject.lastIndexOf("/");
							var idMetacafe = srcEmbedObject.slice(startPos, endPos);
							ruta_img_thumb = 'http://www.metacafe.com/thumb/' + idMetacafe + '.jpg';
							pattern_img_skin = start_layer_skin + '<img src="http://www.metacafe.com/thumb/' + idMetacafe + '.jpg" class="img-skinvideo" />' + close_layer_skin;
							container.find('.layerThumb').eq(nodoSlide).find('img').attr('src',ruta_img_thumb);
								if (no_thumbs != true) {  container.find('.layerThumb').eq(nodoSlide).find('img').bind("load", function(){ $(this).before('<span class="ico-play-video-thumbnail"></span>');   })        }
							container.find('.layerSlide').eq(nodoSlide).find('.layerSlide-contenido').append(pattern_img_skin);
						}///////////// End IF isMetacafe
						
						if ( isVimeo != -1) {	
							//Lo que sigue es para modificar el codigo vimeo para hacer autoplay del video y guardarlo después en el Array
							container.find('.layerSlide').eq(nodoSlide).find('.code-video p').remove(); // remove etiquetas de info de vimeo
							url_video_autoplay = srcEmbedObject.toLowerCase().replace('autoplay=0', 'autoplay=1'); 
							cambio_url_embed = container.find('.layerSlide').eq(nodoSlide).find('embed').attr('src', url_video_autoplay);
							cambio_url_param = container.find('.layerSlide').eq(nodoSlide).find('param[name="movie"]').attr('value', url_video_autoplay);		
							//Lo que sigue es para obtener imagenes de Vimeo
							var startPos = srcEmbedObject.indexOf('?clip_id=') + 9;
							var endPos = srcEmbedObject.indexOf("&server");
							var idVimeo = srcEmbedObject.slice(startPos, endPos);	
	
								function callback (nodoSlide){ 
									$.getJSON('http://www.vimeo.com/api/v2/video/' + idVimeo + '.json?callback=?', {format: "json"}, function(data) {
										var ruta_img_thumb = data[0].thumbnail_small;
										var rutaId_large = data[0].thumbnail_large;
										pattern_img_skin = start_layer_skin + '<img src="'+ rutaId_large +'" class="img-skinvideo" />' + close_layer_skin;
										container.find('.layerThumb').eq(nodoSlide).find('img').attr('src',ruta_img_thumb);
											if (no_thumbs != true) {  container.find('.layerThumb').eq(nodoSlide).find('img').bind("load", function(){ $(this).before('<span class="ico-play-video-thumbnail"></span>');   })        }
										container.find('.layerSlide').eq(nodoSlide).find('.layerSlide-contenido').append(pattern_img_skin);									
									});
								};	
								
							callback(nodoSlide)
							
						}///////////// End IF isVimeo
							
				}; // END IF (existeEmbed > 0)
				
			// Lleno Array codigos video
			codigo_object_video[nodoSlide] = container.find('.layerSlide').eq(nodoSlide).find('.code-video').html();
				
			// Borro los codigos de video del DOM para que no estorben ;-)
			container.find('.layerSlide').eq(nodoSlide).find('.code-video').empty();
			
			}; // END FOR (nodoSlide = 0; nodoSlide <= ultimoIndice; nodoSlide++ )
		   
			// Eh Voilà! Levanto el telón
			container.find('.content-layerSlide').prepend('<span class="loadingTxt">loading...</span>');
			container.find('.layerSlide').css({ 'visibility': 'visible' });
			container.find('.layerSlide:not(":eq(startContent)")').hide();
			container.find('.layerSlide').eq(startContent).show();
			container.find('.layerThumb').eq(startContent).addClass('activado');
			container.find('.loadingTxt').remove();


			//////////////////////// Modo AUTOSTART
			if (autostart == true) {
				function rolling() {
					container.find('.content-layerSlide').everyTime(settings.timeInterval, "roller", function() {
						var dondeEstoy = container.find('.activado').index();
						switch (dondeEstoy) {
							case ultimoIndice:
								var dondeEstoy = container.find('.activado').index();
								container.find('.layerThumb:first').addClass('activado');
								container.find('.layerThumb').eq(dondeEstoy).removeClass('activado');
			
								if (movement == true) {
									container.find(('.layerSlide:not(":eq(dondeEstoy)")')).css({ 'left': anchoImagenLayerSlide }).hide();
									container.find('.layerSlide:first').animate({ 'left': '-=' & anchoImagenLayerSlide }, 300).show();
								};
			
								if ((fade == true) || (fade == false && movement == false)) {
									container.find(('.layerSlide:not(":eq(dondeEstoy)")')).hide();
									container.find('.layerSlide:first').fadeIn("slow").show();
								};
								break;
							default:
								var dondeEstoy = container.find('.activado').index();
								container.find('.layerThumb').eq(dondeEstoy).removeClass('activado');
								container.find('.layerThumb').eq(dondeEstoy).next().addClass('activado');
			
								if (movement == true) {
									container.find(('.layerSlide:not(":eq(dondeEstoy)")')).css({ 'left': anchoImagenLayerSlide }).hide();
									container.find('.layerSlide').eq(dondeEstoy).next().animate({ 'left': '-=' & anchoImagenLayerSlide }, 300).show();
								};
			
								if ((fade == true) || (fade == false && movement == false)) {
									container.find(('.layerSlide:not(":eq(dondeEstoy)")')).hide();
									container.find('.layerSlide').eq(dondeEstoy).next().fadeIn("slow").show();
								};
						};
						var dondeEstoy = container.find('.activado').index();
					}); // fin del metodo everytime				
				}; // fin funcion rolling
				rolling(); 
			}; 



			//////////////////////// EVENTOS
			
			// Evento Click en el desarrollo
			container.find('.layerSlide').click( function(){   
				puntero = $(this).index();
				if (autostart == true) {   
				    paradinha_layerslide = 'paradinha_layerslide_'+container.attr('id');
				    container.find('.content-layerSlide').stopTime();
				    container.find('.content-layerSlide').oneTime(settings.timePause, paradinha_layerslide, function() { rolling(); $(this).stopTime(paradinha_layerslide); }); 
				   };
				

				if ( codigo_object_video[puntero] != null ) { // o sea es si haces click en un sking de video
					$(this).find('.group_ico-play-video_img-skinvideo').animate({opacity: 0}, 'fast', function(){ $(this).hide(); });
					container.find('.layerSlide').eq(puntero).find('.code-video').html('<span class="loadingTxt">Esperando Video...</span>');
					container.find('.layerSlide').eq(puntero).find('.code-video').oneTime(2000, "introvideo", function() {   $(this).html(codigo_object_video[puntero]);  });                     
					container.find('.layerSlide').eq(puntero).find('.titulo.video').addClass('off') 
				};                 
			});
			
			// Evento Click en thumbnail
			container.find(".layerThumb").click(function() {
				var indiceDelClick = $(this).index();
				var estadoBotonThumb = $(this).hasClass('activado'); 
				
				function accionesClick() {
					if (no_thumbs == true) { container.find('.info-hover-visible').remove(); }
					
					if (autostart == true) { container.find('.content-layerSlide').stopTime(); }; // autostart: true
					container.find('.layerThumb').removeClass('activado');
					container.find('.layerThumb').eq(indiceDelClick).addClass('activado');
					paradinha = 'paradinha_'+container.attr('id');
					if (autostart == true) { container.find('.content-layerSlide').oneTime(settings.timePause, paradinha, function() { rolling(); $(this).stopTime(paradinha); }); }; // autostart: true
									   
					
					if (movement == true) {
						container.find('.layerSlide:not(":eq(indiceDelClick)")').css({ 'left': anchoImagenLayerSlide }).hide();
						container.find('.layerSlide').eq(indiceDelClick).animate({ 'left': '-=' & anchoImagenLayerSlide }, 300).show();
					};
			
					if ((fade == true) || (fade == false && movement == false)) {
						container.find('.layerSlide:not(":eq(indiceDelClick)")').hide();
						container.find('.layerSlide').eq(indiceDelClick).fadeIn("slow").show();
					};
					
				   if ( codigo_object_video[indiceDelClick] != null ) { 
						container.find('.layerSlide').find('.code-video').empty();
						container.find('.layerSlide').find('.group_ico-play-video_img-skinvideo').animate({opacity: 1}, 'fast', function(){  $(this).show();  });
						container.find('.layerSlide').find('.titulo.video.off').removeClass('off')
				   };                   
				};
				if (estadoBotonThumb != true) { accionesClick(); } else { if (autostart == true) { container.find('.content-layerSlide').stopTime(); }; };
			}); 
			
			// Hover en marcadores de posición en modo "no-thumbs"
			if (no_thumbs == true) { 
				container.find('.layerThumb').hover(
													function(){  
														titulo = $(this).find(".titulo").text();
														ruta_thumbnail_emergente = $(this).find("img").attr('src');
														if ($(this).hasClass('activado') == false) {  container.find('.content-layerSlide').after('<div class="info-hover-visible"><img src="'+ ruta_thumbnail_emergente +'" border="0"><span>'+ $.trim(titulo) +'</span></div>'); };
													},
													function(){  container.find('.info-hover-visible').remove(); }
													);
			}; // End IF (no_thumbs == true)
			





    }); // cierre de: this.each( function(){...
}; // cierre del inicio: jQuery.fn.slider

})(jQuery);