window.addEvent('domready', function()
{
    //time to implement basic show / hide
	Element.implement({
		//implement show
		show: function() {
			this.setStyle('display','');
		},
		//implement hide
		hide: function() {
			this.setStyle('display','none');
		}
	});
    
    Element.implement(
    {
	    fadeAndHide: function(duration)
	    {
	        this.setStyle('display', 'block');
	        this.setStyle('opacity', '1');
		    duration = duration || defaultDuration;		    
		    this.set('tween',
		    {
			    duration: duration
			    , 'property': 'opacity'
			    , 'link' : 'cancel'
		    });		    
		    this.get('tween').start(0).chain(function(){ this.element.setStyle('display', 'none')});  
	    },
	    showAndReveal: function(duration)
	    {	        
	        this.setStyle('opacity', '0');
	        this.setStyle('display', 'block');	        
		    duration = duration || defaultDuration;
		    this.set('tween',
		    {
			    duration: duration		    
			    , 'property': 'opacity'
			    , 'link' : 'cancel'
		    });
		    this.get('tween').start(1);
		    //var highlightDelay = parseInt(duration / 3, 10);
		    var highlightDelay = Math.round(duration / 2.5);
		    (function()
	        {   
    	        highLightBtn(currentID);       
	        }).delay(highlightDelay);
	    }
    });
        
    //var homeSlide = $('homeSlide');
    var slides = $$('.slide');
    var defaultDuration = 1000;
    
    var slideElems = Array();
    for (var i = 0; i < slides.length; i++)
	{
	    slideElems.push($(slides[i]));
	}
    
    var currentID = 0;
    var currentSlide = null;
    var nextSlide = null;
    var prevSlide = null;
    setSlides();
    highLightBtn(currentID);
    
    var nextSlideBtn = $('nextSlide');
    if (nextSlideBtn != null)
    {
        nextSlideBtn.addEvent('click', function(e)
	    {
	        setSlides('next');
		    // You often will need to stop propagation of the event
		    e.stop();
            currentSlide.fadeAndHide();
            nextSlide.showAndReveal();
	    });
	}
	var prevSlideBtn = $('prevSlide');
    if (prevSlideBtn != null)
    {
        prevSlideBtn.addEvent('click', function(e)
	    {
	        setSlides('prev');
		    // You often will need to stop propagation of the event
		    e.stop();
		    currentSlide.fadeAndHide();
		    prevSlide.showAndReveal();  
	    });
	}
	function setSlides(mode)
	{	    
	    if (currentID > slideElems.length - 1)
	    {
	        currentID = 0;
	    }
	    else if (currentID < 0)
	    {
	        currentID = slideElems.length - 1;
	    }
	    	    
	    if (slideElems.length == 1)
	    {
	        currentID = 0;
	        currentSlide = slideElems[0];
            nextSlide = slideElems[0];
            prevSlide = slideElems[0];
	    }
	    	    
	    currentSlide = slideElems[currentID];
	    
	    if (slideElems.length === 1)
	    {
	        nextSlide = slideElems[0];
            prevSlide = slideElems[0];
	    }
	    else if (currentID == 0)
	    {
            nextSlide = slideElems[currentID + 1];
            prevSlide = slideElems[slideElems.length - 1];
	    }
	    else if (currentID == slideElems.length - 1)
	    {
            nextSlide = slideElems[0];
            prevSlide = slideElems[currentID - 1];
	    }
	    else
	    {
            nextSlide = slideElems[currentID + 1];
            prevSlide = slideElems[currentID - 1];
	    }
	    
	    if (typeof(mode) != 'undefined')
	    {
	        if (mode == 'next')
	        {
	            currentID++;
	        }
	        else if (mode == 'prev')
	        {
	            currentID--;
	        }
	    }
	    if (currentID > slideElems.length - 1)
	    {
	        currentID = 0;
	    }
	    else if (currentID < 0)
	    {
	        currentID = slideElems.length - 1;
	    }
	}
	function preloadImages()
	{   
	    var images = $$('.slide.image');
	    images.each(function(el){
	        var img = new Image();
	        //img.src = el.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
	        img.src = el.getStyle('background-image').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
	    });
	    var images = $$('.themeSlide');
	    images.each(function(el){
	        var img = new Image();
	        /*
	        var backgroundImage = el.getStyle('background-image');
	        var imageSrc = backgroundImage.replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
	        var imageSrc2 = backgroundImage.replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
	        img.src = imageSrc2;*/
	        img.src = el.getStyle('background-image').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
	        //img.src = el.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
	    });
    /*
        var img = new Array(3);
        img[0] = new Image();
        img[1] = new Image();
        img[2] = new Image();
        img[0].src = this.Box.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
        img[1].src = this.InBox.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
        img[2].src = this.Contenedor.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
    */
    };
	function highLightBtn(btnID)
	{
	    for (var i = 0; i < slideElems.length; i++)
	    {
	        var goToId = 'goTo' + i;
	        var btn = $(goToId);
	        if (currentID == i)
	        {
		        //btn.setStyle('color', '#3F76AD');
		        //btn.setStyle('background-color', '#FFFFFF');
		        btn.addClass('selected');                
	        }
	        else
	        {
	            //btn.setStyle('color', '');
	            //btn.setStyle('background-color', '');
	            btn.removeClass('selected');
	        }
	    }	    
	}
	
    var fx = function()
    {
        setSlides('next');
        currentSlide.fadeAndHide();
        nextSlide.showAndReveal();            
    }
    
    if (slideElems.length > 1)
    {
        var slideControl = $('slideControl');
        $('slideShow').addEvents({
            mouseenter: function()
            {
                slideControl.setStyle('display', 'block');
                slideControl.setStyle('opacity', '0');
                slideControl.set('tween', {
			        duration: 600		    
			        , 'property': 'opacity'
			        , 'link' : 'cancel'
		        });
		        slideControl.get('tween').start(1);
		    },
		    mouseleave: function(){		    
			    slideControl.set('tween', {
			        duration: 600		    
			        , 'property': 'opacity'
			        , 'link' : 'cancel'
		        });
		        //slideControl.get('tween').start(0);
		        slideControl.get('tween').start(0).chain(function(){ slideControl.setStyle('display', 'none')});
		    }
        });
    }
    var periodical;
    /*
    $('start').addEvent('click', function(e)
    {
        e.stop();
	    fx();
	    periodical = fx.periodical(4000);	    
    });
     
    $('stop').addEvent('click', function(e)
    {
        e.stop();
        stopTransition();
	    $clear(periodical);
    });
    */
        
    function startSlideShow()
    {        
        //fx();
	    periodical = fx.periodical(5000);
	    $('playBtn').hide();
	    $('pauseBtn').show();
    }
    
    $('playBtn').addEvent('click', function(e)
    {
        e.stop();
	    fx();
	    periodical = fx.periodical(5000);
	    this.hide();
	    $('pauseBtn').show();
    });
    
    $('pauseBtn').addEvent('click', function(e)
    {
        e.stop();
        stopTransition();
	    $clear(periodical);
	    this.hide();
	    $('playBtn').show();
    });
    
    var goToBtns = $$('.goToSlideBtn');
    
    for (var i = 0; i < goToBtns.length; i++)
	{	      
	    goToBtns[i].addEvent('click', function(i)
        {
            return function(e)
            {
                e.stop();
                goToSlide(i);
            }
        }(i));
	}
    function goToSlide(id)
    {
        $clear(periodical);
	    stopTransition();
	    hideSlides();
	    slideElems[id].setStyle('opacity', '1');
	    slideElems[id].setStyle('display', 'block');
	    currentID = id;
	    highLightBtn(currentID);
	    $('playBtn').show();
	    $('pauseBtn').hide();
    }   
    	
	function hideSlides()
	{
	    for (var i = 0; i < slideElems.length; i++)
	    {
	        slideElems[i].setStyle('display', 'none');
	        slideElems[i].setStyle('opacity', '0');
	    }
	}
	
	function stopTransition()
	{   
	    currentSlide.get('tween').cancel();
	    nextSlide.get('tween').cancel();
	    prevSlide.get('tween').cancel();
	    // t.pause();
	    // t.resume();
	    hideSlides();
	    slideElems[currentID].setStyle('opacity', '1');
	    slideElems[currentID].setStyle('display', 'block');
	}
	if (slideElems.length > 1)
    {
	    startSlideShow();
	}
	
	preloadImages();
});