//script para cargar con ajax las imagenes e insertarlas en el div imagen_cabecera

//elemento que alberga el slider completo
var contenedorSlider = "";

//elemento que contiene solo los banners
var contenedorImg = "";

//elemento que contiene solo los botones
var contenedorBot = "";

//variable global que almacenará la lista de id's de las imagenes
var listaBanners = [];

//variable global que indica si la imagen grande ha terminado de cargar y desplazarse
//para cargar la siguiente en el modo automático
var activo = true;



//variable global que almacena la posicion del boton que se encuentra acitvo
var posActual = '';
//variable global que almacena el numero de botones del slider
var numEl = '';


//comenzamos la fieshta
jQuery(document).ready(function()
{
	//en primer lugar cargamos los elementos que forman el slider

	//elemento que alberga el slider completo
	contenedorSlider = jQuery('#slider_banners_central');
	
	//elemento que contiene solo los banners
	contenedorImg = jQuery('#sp_cont_banner');
	

	
	//elemento que contiene solo los botones
	contenedorBot = jQuery('#sp_cont_botones');
	contenedorBot.css('display','none');

	cargaAjax();
	sliderBotones();

});


var cache = [];


function preCargaImagenes() {
    var args_len = arguments.length;
    for (var i = args_len; i--;)
	{
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }




//funcion para hacer click en el slider de forma automática
//el temporizador hacer que el slider vaya hacia delante solamente
//por eso asignamos al propio boton de avanzar el temporizador
//la función ejecuta un click sobre el botón pasados 5s desde la llamada
function autoslide(modo)
{
		switch(modo)
		{
			case 'play':
			//si activamos el autoslide, ponemos en marcha un temporizador que llamará a la función
			//para cambiar de imagen cada segundo
			contenedorBot.everyTime("5s","disparadorslider",function()
			{
				//si la imagen se ha cargado y ha terminado de moverse, cargamos la siguiente
				if (activo == false)
				{
						cambiaImagen();
				}
			});
			break;
			case 'stop':
			//paramos el temporizador que lanza el vento
			contenedorBot.stopTime("disparadorslider");
			break;
		}
		
		
		function cambiaImagen()
		{
			contenedorBot.oneTime("1s", "autoslide", function() 
			{
				var posElSiguiente;
				//disparamos el evento en el boton siguiente al actual
				if(posElActual == numEl - 1) {
					posElSiguiente = 0;
				} else {
					posElSiguiente = posElActual +1;
				}
				elSiguiente = jQuery('.sp_boton').eq(posElSiguiente);
				jQuery(elSiguiente).trigger("click.miseventos");			
			});	
		}
		
		
}//autoslide
	
	

function creaSlider()
{
	var srcImgFondo = '/lang/imagenes/portada/fondo_slider_portada.png';
	
	//la imagen de fondo del slider es la última en cargarse
	//crearemos una imagen virtual donde cargaremos la imagen de fondo del slider
	//y mediante el evento 'load' determinaremos el momento en que ya está cargada
	//y activaremos el slider
	//creamos un elemento imagen que nos servira de cargador para conocer el evento de carga de la imagen
	var imgFondo = new Image();
	  
	//cuando el elemento imagen se haya cargado detectamos el evento
	jQuery(imgFondo).one('load',function () 
	{
		//asignamos la misma imagen como fondo del slider
		contenedorSlider.css('background','transparent url('+srcImgFondo+') no-repeat 0 0');
		
												
			contenedorSlider.css('visibility','visible');
			

				//no se puede cufonear texto que se encuentre dentro de un elemento invisible con IE8
			    //hay que esperar a hacerlo visible; con la opacidad no pasa
			    Cufon.replace('.sp_boton', { fontFamily: 'Helvetica-lt-condensed-light' });
				//contenedorBot.fadeIn(2000);
	  			contenedorBot.show();
				
				//elemento que contiene el banner central
				var contenedorBannerCentral = jQuery('#banner_central');
				//elemento que contiene los extras
				var contenedorExtras = jQuery('#ptd_contenidos_wrapper');
		
				contenedorBannerCentral.show();
				contenedorExtras.show();

			
			//inicializamos el modo autoslide
			jQuery(autoslide('play'));
			
	
		
	  }).error(function ()
	  {
	  })
	  //damos al elemento imagen provisional el origen de la imagen de fondo para que la cargue
	  .attr('src', srcImgFondo);
	  
}//creaslider

function cargaAjax()
{

		//xml del album que vamos a cargar
		urlAjax = '/cgi-bin/noticias/modboletin_xml.php?refbol=banners&refsec=slider-portada&idiprin=1&autolang=1&forcelang=1&xslt_plantilla=slider_img_portada.xslt';
		
		
		//cargamos la lista de id de elementos mediante ajax
		jQuery.get(urlAjax, 
					function(data) 
					{
						contenedorImg.html(data);
						
						contenedorImg.one('primera_imagen_cargada',function()
						{
							//ponemos en marcha el slider
							creaSlider();
						});
						
						contenedorImg.find('img').each(function()
						{
							preCargaImagenes(jQuery(this).attr('src'));
						});
																	
							contenedorImg.find('.sp_cont_banner').each(function()
							{
							//variable temporal para almacenar el valor de cada id
							var tmpBanner = jQuery(this).html();
							
							//introducimos el id en el array para almacenarlos
							listaBanners.push(tmpBanner);
								jQuery(this).remove();
							});
							
							//cargamos la primera imagen
							cargaBanner(listaBanners[0]);
							
							//ponemos en marcha el slider
							//creaSlider();
							
					});
};

//funcion para cargar las imagenes, pasando como argumentos el id del contenedor y el de la foto
var cargaBanner = function(htmlBanner) 
{	
	//variable global que debe estar en false mientras la imagen se carga y se desplaza para el modo automático
	activo = true;
				   
	//lo metemos en el contenedor	
	if (jQuery('#sp_cont_banner_hidden').length == 0)
	{
		jQuery('#slider_banners_central').append('<div id="sp_cont_banner_hidden" style="display:none"></div>');
	};
	jQuery('#sp_cont_banner_hidden').html(htmlBanner);
	
	//recargarmaos las fuentes
	Cufon.refresh();
	
	//la primera imagen tarda más en cargarse que el texto
	//crearemos una imagen virtual donde cargaremos la imagen
	//y mediante el evento 'load' determinaremos el momento en que ya está cargada
	//y mostraremos entonces el banner
	//creamos un elemento imagen que nos servira de cargador para conocer el evento de carga de la imagen
	var imagenBanner = new Image();
  
	//cuando el elemento imagen se haya cargado detectamos el evento
	jQuery(imagenBanner).load(function () 
	{
		//la mostramos
		//contenedorImg.fadeIn(1000,function()
		contenedorImg.html(jQuery('#sp_cont_banner_hidden').html());
		contenedorImg.show(1,function()
		{
			//cambiamos la variable para permitir que se cargue la siguiente imagen
			activo = false;
			
			jQuery(this).trigger('primera_imagen_cargada');
		});
	
   	}).error(function (){})
	  //damos al elemento imagen provisional el origen de la imagen de fondo para que la cargue
	  .attr('src', jQuery('#sp_cont_banner_hidden').find('img').attr('src'));
	
	
}

//funcion para desplazar el slider
function sliderBotones()
{
	//elementos originales del slider
	var elementos = jQuery('.sp_boton');
	
	//numero de elementos en el slider
	numEl = elementos.length;
	
	
	//posicion del primer elemento del slider
	//tiene que ser una variable global
	posElActual = 0;
	
	//primer elemento del listado
	var elActual = jQuery('.sp_boton:first');
	
	//id del primer elemento del listado
	var idElActual = jQuery('.sp_boton:first').attr('id');

	function activarBotones(idElActual)
	{
		//variable que recoge el elemento activo, que la primera vez es igual al primer elemento del listado
		var idBotonElActivo = jQuery('#sp_botones .activo').attr('id');	
		var botonElActivo = jQuery('#'+idBotonElActivo);	
	    
		//si existe elemento activo (al cargar el slider todavía no hay elemento activo)
		if (botonElActivo.length == 1)
		{
            botonElActivo.children('h2').css('color','white');
			Cufon.refresh();
		    botonElActivo.removeClass('activo'); 
			
			//llamamos a la funcion que activa el nuevo elemento
		    activarElActual(idElActual);

		   
	
		}
		else 
		{
			//si no hay elemento activo, simplemente activamos el primero
			activarElActual(idElActual);
		}
			
	    //funcion que activa el elemento correspondiente
		function activarElActual(idElActual)
		{
			jQuery('#'+idElActual).children('h2').css('color','#FFCF0F');
			Cufon.refresh();
			jQuery('#'+idElActual).addClass('activo');
				
		}
		
	}//activarbotones
	
	//inicializamos los botones
	activarBotones(idElActual);
	
	
	
	
	//funcion que se ejecuta como callback al hacer click en los botones para mover el slider
	//esta función lleva por defecto el parametro event que recoge el evento y sus propiedades
	//dentro de la función, el objeto $(this) recoge el propio botón sobre el que se ha hecho click
	function presionarBoton(event)
	{
		event.preventDefault();
		
		var idBoton = jQuery(this).attr('id');
			//esta función devuelve el id del elemento activo
			idElActual = jQuery(this);
			
			//comprobamos si es el primer elemento o el último para activar o desactivar los botones
			activarBotones(idBoton);
			
			//cargamos la imagen correspondiente al elemento que acaba de activarse
			//para ello extraemos el número de orden del boton que hemos pulsado
			posElActual = jQuery('.sp_boton').index(jQuery(this));
			
					
			cargaBanner(listaBanners[posElActual])
				
	}//presionarboton
	
				
	//función para avanzar el slider
	jQuery('.sp_boton').bind('click.miseventos',presionarBoton);
	
	
	//si hacemos click en los botones paramos el autoslide	
	elementos.bind("mouseup", function(){
		contenedorBot.stopTime("disparadorslider");
	});
		
	

}//sliderInterior