// JavaScript Document

$(document).ready(function() {
    $('#slider').s3Slider({
        timeOut: 5000
    });
});
     
(function($){  

$.fn.s3Slider = function(vars) {       
        var timeOut     = (vars.timeOut != undefined && vars.timeOut >=3000) ? vars.timeOut : 4000;
        var sliderTimeout = null;
        var currNo = 0;
        var prevItem = null;
        var prevItemSpan = null;
        
        var items       = $("#" + SLIDERCONTENTID + " .sliderImage");
        var itemsSpan   = $("#" + SLIDERCONTENTID + " .sliderImage span");
        var selectors   = $("#imageSelection ul li");
           
        var selectImage = function() {
            currNo = (currNo >= items.length) ? 0 : currNo;
            
            if (prevItem != null && prevItemSpan != null){
                $(prevItemSpan).slideUp(500, function() {
                    $(prevItem).fadeOut(500, fadeInToCurrent);
                });
            }
            else {
                fadeInToCurrent();
            }
        }
        
        var fadeInToCurrent = function(){
            setHighlight(currNo);
            $(items[currNo]).fadeIn(500, function() {
                prevItem = items[currNo];                    
                $(itemsSpan[currNo]).slideDown(500, function() {
                    prevItemSpan = itemsSpan[currNo];
                    sliderTimeout = setTimeout(selectNext, timeOut - 1000);
                });
            });
        }
        
        var selectNext = function(){
            currNo++;
            selectImage();
        }
        
        var setHighlight = function(index) {
            $("#imageSelection a").removeClass("active");
                $("#imageSelection a[rel='item" + index + "']").addClass("active");
        }
        
        selectors.each(function(i) {
            $(selectors[i]).click(function() {
                if (sliderTimeout != null){
                    clearTimeout(sliderTimeout);
                    sliderTimeout = null;
                }
                
                currNo = i;
                selectImage();
            });         
        });
        
        selectImage();

    }; 
    
})(jQuery);