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

	//Recorre todos los elementos li con clase pagerItem...

	//Para después asignarle sólo al primer elemento la clase selected...

	//Esto para marcar el primer elemento pre-seleccionado...

	var i=0;

	$$('li.pagerItem').each(function(btn){
		if(i == 0)

		btn.addClass('selected');

		i++;
	});

			

	//Genera efecto de scroll nativo de mootools...

	//duration = al tiempo en milisegundos que se desea dure el efecto...

	//Fx.Transitions.Quad.easeInOut es el tipo de efecto (vienen en el sitio de mootools)...

	var scroll = new Fx.Scroll

	(

		'hd_images', 

		{

			wait: false,

			duration: 1500,

			transition: Fx.Transitions.Quad.easeInOut

		}

	);



	//Recorre los elementos del "riel" y aplica un id al primero de ellos

	var countli = $$('.slide li').length;

	var i = 0;

	$$('.slide li').each

	(

		function(li)

		{

			if(i == 0)	

				li.set('id','currentli');

			i++;  

		}

	);

	//Ejecuta fx scroll para asegurarnos que al iniciar me 

	//encuentre en la primera posición del riel...

	scroll.toElement($('currentli'));

	

	//Esto permite dispara el fx scroll haciendo...

	//"click" en los elementos tipo bullet...

	$$('li.pagerItem').addEvent

	(

		'click',

		function(e)

		{

			e.stop();

			//Obtiene el id del elemento "clickeado"

			var toSrc = this.get('id');

			//Borra el id de todos los elementos del "riel"...

			$$('.slide li').each

			(

				function(li)

				{

						li.erase('id');

				}

			);	

			//Obtiene el elemento al que pretendemos deslizarnos...

			$$('li.slideImage img').each(function(img){

				if(toSrc == img.get('src'))

				{

					document.current = img.getParent('li');

				}

			});

			//Aplica el id "currentli" con el cual haremos siempre referencia al...

			//elemento al que deseamos deslizarnos...

			document.current.set('id','currentli');

			//Remueve la clase selected de los elementos tipo bullet...

			$$('li.pagerItem').each(function(btn){

				btn.removeClass('selected');

			});

			//Agrega la clase selected al elemento tipo bullet "clickeado"...

			this.addClass('selected');

			//Llama la función moveToBanner y le envío de parametro el elemento...

			//al que pretendo moverme..

			moveToBanner($('currentli'));

		}

	);

	

	<!--Function move to banner-->

	function moveToBanner(banner)

	{

		//Cuando no existe parámetro enviado a la función....

		if(!banner)

		{

			if($('currentli').getNext('li'))

				var banner = $('currentli').getNext('li');

			else

				var banner = $$('.slide').getFirst('li');

		}

		

		//Aquí se pretende eliminar el id "currentli"...

		$$('.slide li').each

		(

			function(li)

			{

					li.erase('id');

			}

		);	

		//Remueve la clase selected de los elementos tipo bullet...

		$$('li.pagerItem').each(function(btn){

			btn.removeClass('selected');

		});

		//Agrega la clase selected al elemento tipo bullet "clickeado"...

		$(''+banner.getElement('img').get('src')+'').addClass('selected');

		// Asignar id "currentli"...

		banner.set('id','currentli');

		//Me muevo hacia el elemento con id "currentli"...

		scroll.toElement($('currentli'));

	}

	

	//Repite la función de forma periodica cada 4000 milisegundos (4 segundos)...

	document.move = moveToBanner.periodical(4000);

	

	

	/* Detiene / Reanuda el movimiento de brandItems */

	$('headSlide').addEvents({

		'mouseenter':function(){

			$clear(document.move);

			

			this.removeEvents('mouseleave');

			

			this.addEvent('mouseleave',function(){

				document.move = moveToBanner.periodical(4000);

			});

		}

	});

});