window.addEvent(
    'domready',
	function()
	{
		new Request(
		{
			'url' : '/txt/viewlet_carrusel.txt?q=' + Math.random(),
			'onSuccess' : function( txt, hmtl )
			{
				var responseJSON = PHP_Unserialize( txt );
				if ( typeof(responseJSON.data.Carrusel) != 'undefined' )
				{
					objCarrusel = responseJSON.data.Carrusel;
					window.fireEvent('carruselready');
				}

			}
		} ).send();
	}
);


window.addEvent('carruselready', function() {

			
			var current = 0;
			var last = 0;
			var active = false;
			var timerCarrusel;
			var timerCarruselDelay;
			var totalElementos=0;
			var camposElementos = new Array ();
			var efectoDescripciones = new Array ();
			
			var followLinks = function ( link, urchin )
			{
				if( typeof(flagUrchin) != 'undefined' && flagUrchin == true  )
				{
					pageTracker._trackEvent('home2','Click','Carrusel_' + urchin );
				}
				if ( link != '' )
				{
					window.location = link;
				}
			}
			
			var empiezaAnimacionCarrusel = function ( indexF )
			{
				$$('.elementoCarrusel').each(function(div, index){
					$$('.elementoCarrusel')[index].setStyle("z-index", 0);
				});
				$$('.elementoCarrusel')[indexF].setStyle("z-index", 2);
			};
			var carrusel = function ( elementos ) {
				this.start ( elementos );
			};
			slideRight = function ()
			{
				if ( current < 4 ) //totalElementos-1 )
				{
					empiezaAnimacionCarrusel ( current+1 );
					$$('.elementoCarrusel')[current].setStyle("z-index", 1);
					var cadena = "{'"+(current)+"':{'margin-left':[0,-639]},'"+(current+1)+"':{'width':639}}";
					last = current;
					++current;
				}
				else
				{
					empiezaAnimacionCarrusel ( 0 );
					$$('.elementoCarrusel')[0].setStyle("z-index", 1);
					$$('.elementoCarrusel')[0].setStyle("width", 639);
					$$('.elementoCarrusel')[0].setStyle("left", -639);
					$$('.elementoCarrusel')[0].setStyle("position", 'absolute');
					var cadena = "{'0':{'left':[-639,0]}}";
					last = current;
					current = 0;
				};
				carrusel.bind(elementosCarrusel)(JSON.decode(cadena));
			};
			
			//Crea los elementos del carrusel
			$('contenidoCarrusel').setStyle("width", 0);
			for ( var campo in objCarrusel )
			{
				camposElementos[camposElementos.length] = campo;
				var divElemento = document.createElement ("div");
				divElemento.id="elementCarrusel"+totalElementos;
				divElemento.className="elementoCarrusel";
				$(divElemento).setStyle("z-index", 0);
				//Genera la imagen
				var divImagen = new Element ( 'div', {
					'class':'contenedorImagen',
					'styles':{
						'z-index':0
					}
				});
				var imagen = new Element ( 'img', {
					'src':"/media/canales/"+objCarrusel[campo].foto,
					'events':{
						'click':followLinks.pass(objCarrusel[campo].url, 'imagen_big_' + ( campo + 1 ) )
					}
				}).inject(divImagen);
				divImagen.inject(divElemento);
				//Genera el texto
				var divTexto = document.createElement ("div");
				divTexto.className = "contenedorTextoElemento";
				$(divTexto).setStyle("z-index", 1);
				var textoTit1 = new Element ('div', {
					'class':'titular1',
					'html':objCarrusel[campo].titulo1,
					'events':{
						'click':followLinks.pass(objCarrusel[campo].url, 'titulo_' + ( campo + 1 ) )
					}
				}).inject($(divTexto));
				var textoTit2 = new Element ('div', {
					'class':'titular2',
					'html':objCarrusel[campo].titulo2,
					'events':{
						'click':followLinks.pass(objCarrusel[campo].url, 'sub_titulo_' + ( campo + 1 ) )
					}
				}).inject($(divTexto));
				
				var textoDesc = document.createElement ("div");
				textoDesc.className = "descripcionElemento";
				textoDesc.innerHTML = objCarrusel[campo].entradilla;
				divTexto.appendChild ( textoDesc );
				//Transparencia
				/*var divTransparencia = document.createElement ("div");
				divTransparencia.className = "negro60T";
				$(divTexto).appendChild ( divTransparencia );*/
				
				$(divElemento).appendChild ( divTexto );
				
				
				efectoDescripciones[totalElementos] = new Fx.Tween ( $(divTexto), {
					link: 'ignore',
					duration: 500
				});

				$('contenidoCarrusel').appendChild(divElemento);
				
				$('contenidoCarrusel').setStyle("width", 639*2 );
				if ( totalElementos != current )
				{
					$(divTexto).setStyle("margin-bottom", -90);
					$(divElemento).setStyle("width", 0);
				};
				++totalElementos;
			};
			
			var elementosCarrusel = new Fx.Elements($$('.elementoCarrusel'), {
				link: 'chain',
				duration: 700,
				onStart: function ()
				{
					active = true;
				},
				onComplete: function(){
					$$('.elementoCarrusel')[current].setStyle("position", 'relative');
					$$('.contenedorTextoElemento')[last].setStyle("margin-bottom", -90);
					efectoDescripciones[current].start ( 'margin-bottom', '-90', '0' );
					$$('.imagenBoton')[last].setStyle("padding", '2px');
					$$('.imagenBoton')[last].setStyle("border", 0);
					$$('.imagenBoton')[last].getElement('[class=plastaImagenControl]').setStyle("display", "block");
					$$('.imagenBoton')[current].setStyle("padding", 0);
					$$('.imagenBoton')[current].setStyle("border", '2px solid #A50010');
					$$('.imagenBoton')[current].getElement('[class=plastaImagenControl]').setStyle("display", "none");
					$$('.elementoCarrusel')[last].setStyle("width", 0);
					$$('.elementoCarrusel')[last].setStyle("margin-left", 0);
					var posicionFlecha = $$('.imagenBoton')[current].offsetTop+(($$('.imagenBoton')[current].offsetHeight)/2)-(($('flechaControlesIndicador').offsetHeight)/2);
					$('flechaControlesIndicador').setStyle('top', posicionFlecha);
					active = false;
				}
			});
			
			camposElementos.each(function(campo,index){
				var divImagen = document.createElement ( "div" );
				var divContenedorImagen = document.createElement("div");
				divContenedorImagen.className = 'divContenedorImagen';
				var imagenThumb = document.createElement ( "img" );
				divImagen.className = 'imagenBoton';
				imagenThumb.src = "/media/canales/" + objCarrusel[camposElementos[index]].thumb;
				divContenedorImagen.appendChild(imagenThumb);
				divImagen.appendChild ( divContenedorImagen );
				var divPlasta = document.createElement ( "div" );
				divPlasta.className = "plastaImagenControl";
				divImagen.appendChild ( divPlasta );
				if ( index == current )
				{
					$(divImagen).setStyle("padding", 0);
					$(divImagen).setStyle("border", '2px solid #A50010');
					$(divImagen).getElement('[class=plastaImagenControl]').setStyle("display", "none");
				}
				$(divImagen).addEvent('click', function () {
					if( typeof(flagUrchin) != 'undefined' && flagUrchin == true  )
					{
						pageTracker._trackEvent('home2','Click','Carrusel_thumb_' + ( index + 1 ) );
					}
					if ( current != index && active == false )
					{
						empiezaAnimacionCarrusel ( index );
						if ( index > current && Math.abs(index-current) == 1 )
						{	
							$$('.elementoCarrusel')[index-1].setStyle("z-index", 1);
							var cadena = "{'"+(index-1)+"':{'margin-left':[0,-639]},'"+index+"':{'width':639}}";								
						}
						else if ( index > current && Math.abs(index-current) != 1 )
						{
							$$('.elementoCarrusel')[current].setStyle("z-index", 1);
							$$('.elementoCarrusel')[index].setStyle("width", 639);
							$$('.elementoCarrusel')[index].setStyle("left", 639);
							$$('.elementoCarrusel')[index].setStyle("position", 'absolute');
							var cadena = "{'"+(index)+"':{'left':[639,0]}}";
						}
						else if ( index < current && Math.abs(index-current) == 1 )
						{
							$$('.elementoCarrusel')[index+1].setStyle("z-index", 1);
							$$('.elementoCarrusel')[index].setStyle("width", 639);
							$$('.elementoCarrusel')[index].setStyle("margin-left", -639);
							var cadena = "{'"+index+"':{'margin-left':[-639,0]}}";
						}
						else if ( index < current && Math.abs(index-current) != 1 )
						{
							$$('.elementoCarrusel')[current].setStyle("z-index", 1);
							$$('.elementoCarrusel')[index].setStyle("width", 639);
							$$('.elementoCarrusel')[index].setStyle("left", -639);
							$$('.elementoCarrusel')[index].setStyle("position", 'absolute');
							var cadena = "{'"+(index)+"':{'left':[-639,0]}}";
						};
						carrusel.bind(elementosCarrusel)(JSON.decode(cadena));
						last = current;
						current = index;
						$clear ( timerCarrusel );
						$clear ( timerCarruselDelay );
						timerCarruselDelay = handlerTimer.delay ( 5000 );
					};
				});
				$('controladorCarrusel').appendChild(divImagen);
				if ( index == current )
				{
					var posicionFlecha = $(divImagen).offsetTop+(($(divImagen).offsetHeight)/2)-(($('flechaControlesIndicador').offsetHeight)/2);
					$('flechaControlesIndicador').setStyle('top', posicionFlecha);
				}
			});
			
			$$('.elementoCarrusel')[current].setStyle("z-index", 2);
			var handlerTimer = function ()
			{
				timerCarrusel = slideRight.periodical(15000);
			};
			handlerTimer();
			var controlsOpen = true;
			var efectoControles = new Fx.Tween ( $('controlesCarrusel'), {
				link: 'ignore',
				duration: 300,
				onComplete: function(){
					controlsOpen = ( controlsOpen==true?false:true );
				}
			});
			
			$('toogleControlCarrusel').addEvent ( 'click', function () {
				if ( controlsOpen == true )
				{
					efectoControles.start ( 'left', '505', '627' );
					$('flechaControlesIndicador').src='/images/qv3_viewlet_carrusel_flechaIzquierda.png';
				}
				else
				{
					efectoControles.start ( 'left', '627', '505' );
					$('flechaControlesIndicador').src='/images/qv3_viewlet_carrusel_flechaDerecha.png';
				}
			});
			
			/*var periodicalScroll;
			var scroll = function ( elemento, velocidad ) {
				$(elemento).scrollTop = $(elemento).scrollTop+parseInt(velocidad);
			};
			$('contenedorControlador').addEvent ( 'mouseover', function ( event ) {
				var centro = $('contenedorControlador').offsetTop + ($('contenedorControlador').offsetHeight/2);
				if ( event.page.y > (centro+118) )
				{
					$clear(periodicalScroll);
					periodicalScroll = scroll.periodical(50, this, [$('contenedorControlador'), 7]);
				}
				else if ( event.page.y > (centro+43) )
				{
					$clear(periodicalScroll);
					periodicalScroll = scroll.periodical(70, this, [$('contenedorControlador'), 3]);
				}
				else if ( event.page.y < (centro-118) )
				{
					$clear(periodicalScroll);
					periodicalScroll = scroll.periodical(50, this, [$('contenedorControlador'), -7]);
				}
				else if ( event.page.y < (centro-43) )
				{
					$clear(periodicalScroll);
					periodicalScroll = scroll.periodical(70, this, [$('contenedorControlador'), -3]);
				}
				else
				{
					$clear(periodicalScroll);
				};
			});
			$('contenedorControlador').addEvent ( 'mouseout', function () {
				$clear(periodicalScroll);
			});*/
		
});