var LeadingHitsSlider = Class.create();

	LeadingHitsSlider.prototype = {
		initialize: function(divLHImages,divLHDescripcion,divLHShadow, divLHStaticText,divShowCaption,divHideCaption, divLHTitleShadow) {
		    this.divLHImages      = $(divLHImages);
		    this.divLHDescription = $(divLHDescripcion);
		    this.divLHShadow      = $(divLHShadow);
		    this.divLHStaticText  = $(divLHStaticText);
		    this.divShowCaption   = $(divShowCaption);
		    this.divHideCaption   = $(divHideCaption);
		    this.divLHTitleShadow = $(divLHTitleShadow);
		    this.timeInterval     = 0;	// variable that holds the value returned by the timeout function. It is used to cancel the timeout
			this.current          = 0;  // initialize the current slide
		    this.slides           = [];
		    this.timeInterval     = 0;
		    this.initSlider();
		},
		initSlider:function()
		{
			var arrayDiv = this.divLHImages.getElementsBySelector('div');
			// Insert the divs created
			for (var i = 0; i < arrayDiv.length; i++) {
				if (arrayDiv[i].hasClassName('slide')) {
					this.slides.push(arrayDiv[i]);
				}
			}
			// change the z index to show the first image
			for (var i = 0; i < this.slides.length; i++) {
				this.slides[i].style.zIndex = this.slides.length - i;
			}

			this.divLHImages.show();
			var text = this.slides[this.current].immediateDescendants()[0].readAttribute('ImageText');
			this.divLHDescription.getElementsBySelector('span')[0].textContent =  text;
			this.divLHDescription.getElementsBySelector('span')[0].innerHTML   = text;
			
			var title = this.slides[this.current].immediateDescendants()[0].down().readAttribute('alt');
			this.divLHTitleShadow.getElementsBySelector('span')[0].update(title);

			// Change the time interval for the current image
			var time = this.slides[this.current].immediateDescendants()[0].readAttribute('ImageTime');
			this.timeout = parseInt(time);
  
			// Change Link
			var link = this.slides[this.current].immediateDescendants()[0].readAttribute('ImageLink');
			this.divLHDescription.getElementsBySelector('a')[0].href        = link;
 
			this.timeInterval = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
			this.manualOpenDescription();
	    },  	
		next: function() 
		 {
			// change the z index to show the selected image
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides[(this.current + i) % this.slides.length];
				slide.style.zIndex = this.slides.length - i;
			}
    	    Effect.Fade(this.slides[this.current], {afterFinish: function(effect) {effect.element.style.zIndex = 0;
																				   Element.show(effect.element);
																				   Element.setOpacity(effect.element, 1);
																				  }});
  
			this.current = (this.current + 1) % this.slides.length;
			var text = this.slides[this.current].getElementsBySelector('img')[0].readAttribute('ImageText');
			this.divLHDescription.getElementsBySelector('span')[0].textContent =  text;
			this.divLHDescription.getElementsBySelector('span')[0].innerHTML   = text;
			
			var title = this.slides[this.current].immediateDescendants()[0].down().readAttribute('alt');
			this.divLHTitleShadow.getElementsBySelector('span')[0].update(title);

	
			// Change the time interval for the image
		    var time = this.slides[this.current].getElementsBySelector('img')[0].readAttribute('ImageTime');
			this.timeout = parseInt(time);
    
			// Change Link
			var link = this.slides[this.current].getElementsBySelector('img')[0].readAttribute('ImageLink');

			this.divLHDescription.getElementsBySelector('a')[0].href = link;
	
			this.timeInterval = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
		 },
		OpenDescription:function(){
				this.ChangeDescription();		
			this.divLHDescription.style.zIndex = this.slides.length + 2;
				this.divLHShadow.style.zIndex      = this.slides.length + 2;
				this.divLHTitleShadow.style.zIndex      = this.slides.length + 2;
				this.divLHStaticText.style.zIndex  = this.slides.length + 2;
				this.divShowCaption.setStyle({'display':'none'}); 
				this.divHideCaption.setStyle({'display':'block'});           

		},
		 CloseDescription:function() {       
                this.divLHDescription.style.zIndex = 0;
				this.divLHShadow.style.zIndex = 0;
				this.divLHStaticText.style.zIndex  = 0;
				this.divHideCaption.setStyle({'display':'none'});   
				this.divShowCaption.setStyle({'display':'block'});    
		},
		manualPreviousSlide:function() {
			// Change the current slide
			this.current = (this.current + this.slides.length - 1) % this.slides.length;
			// Make the z index of the current slide the biggest to show it
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides[(this.current + i) % this.slides.length];
				slide.style.zIndex = this.slides.length - i;
			}
			// Clear the last timeout
			clearTimeout(this.timeInterval);
			// Set the new description and time
			this.ChangeDescription();
			this.ChangeTime();
			this.ChangeLink();
			// Set the new timeout if the slide is not pause
			if (this.timeInterval != 0)
				this.timeInterval = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
		},
		manualNextSlide: function()
		{
			// Change the current slide
			this.current = (this.current + 1) % this.slides.length;
		
			// Make the z index of the current slide the biggest to show it
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides[(this.current + i) % this.slides.length];
				slide.style.zIndex = this.slides.length - i;
			}
			// Clear the last timeout
			clearTimeout(this.timeInterval);
			// Set the new description and time
			this.ChangeDescription();
			this.ChangeTime();
			this.ChangeLink();
			// Set the new timeout if the slide is not pause
			if (this.timeInterval != 0)
				this.timeInterval = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
		},
		manualPauseSlide:function(){
			// Restart the last timeout
			if (this.timeInterval == 0)
				this.timeInterval = setTimeout((function(){this.next();}).bind(this), this.timeout + 850);
			else
			{
				clearTimeout(this.timeInterval);
				this.timeInterval = 0;
			}
		},
		manualOpenDescription:function() {
   		    this.autoOpen = setTimeout(function(){this.OpenDescription();}, 2000);
            this.autoClose = setTimeout(function(){this.OpenDescription();}, 9000);
			clearTimeout(this.autoOpen);
			clearTimeout(this.autoClose);
			this.OpenDescription();
		},
		
		
	    ChangeDescription:function(){	// Get the text description for the current image and set the label
			var text = this.slides[this.current].getElementsBySelector('img')[0].readAttribute('ImageText');
			this.divLHDescription.getElementsBySelector('span')[0].textContent = text;
			this.divLHDescription.getElementsBySelector('span')[0].innerHTML   = text;
			
			var title = this.slides[this.current].immediateDescendants()[0].down().readAttribute('alt');
			this.divLHTitleShadow.getElementsBySelector('span')[0].update(title);
		},
		ChangeTime:function(){	// Change time for the current image
			var time = this.slides[this.current].getElementsBySelector('img')[0].readAttribute('ImageTime');
			this.timeout = parseInt(time);
		},
		ChangeLink:function() {	// Change Link of the image
			var link     = this.slides[this.current].getElementsBySelector('img')[0].getAttribute('ImageLink');
			this.divLHDescription.getElementsBySelector('a')[0].href        = link;
		}
	}