jQuery(document).ready(function() {

//Setup all the slides.
jQuery('#wwe-slider .wwe-slider-content').hide();

var currentSlide = -1; //keeps track of current slide
var prevSlide = null; //keeps track of last selected slide.
var slides = jQuery('#wwe-slider .wwe-slider-content'); // all the slides
var interval = null; //For setInerval
var FADE_SPEED = 500;  //How long it takes to transition.
var DELAY_SPEED = 4000; //How long each slide stays up.

var html = '<div class="wwe-slider-browser">';  //Creates a ul list for tabs

//Create a tab for each slide.
for (var i = 0;i < slides.length ; i++){
    html += '<div id="slide'+ i+'" class="wwe-slider-browserEl">'+(i+1)+'</div>' ;
}
html += '</div>';

//Put tabs after slideshow warpper.
jQuery('#wwe-slider').append(html);


//Set the click event for each tab.
for (var i = slides.length - 1;i >= 0 ; i--){
   
    jQuery('#slide'+i).bind("click",{index:i},function(event){
       
        //Sets the current slide to the one clicked.
        currentSlide = event.data.index;
       
        //Go to the slide.
        gotoSlide(event.data.index);
    });
   
};


//If there is 1 or less slides then hide the tabs.
if (slides.length <= 1){
    jQuery('.slide').hide();
}


//get things started.
nextSlide();


//Goes to the next slide.
function nextSlide (){

    //if the current slide is at the end, loop to the first slide.
    if (currentSlide >= slides.length -1){
        currentSlide = 0;
    }else{
        currentSlide++
    }
   
    //Go to the slide.
    gotoSlide(currentSlide);

}


//Go to the slide specified in the argument.
function gotoSlide(slideNum){

    //If the slide they're trying to access isn't
    //the currently selected slide...
    if (slideNum != prevSlide){

        //The very first slide the prevSlide will be null.
        //No point in trying to hide the slide when it doesn't
        //exist yet.
        if (prevSlide != null){
           
            //Hide previoius slide and deselect old tab.
            jQuery(slides[prevSlide]).stop().fadeOut(FADE_SPEED);
            jQuery('#slide'+prevSlide).removeClass('selectedTab');
        }
       
       
        //Select new tab.
        jQuery('#slide'+slideNum).addClass('selectedTab');

        //Display new slide.
        jQuery(slides[slideNum]).stop().fadeIn(FADE_SPEED);
       
        //Make the currentSlide the old slide for next transition.
        prevSlide = currentSlide;

        //if the auto slide advance is set, stop it, then start again.
        if (interval != null){
           clearInterval(interval);
        }
        
        var autoscrolling = true;
	jQuery('#wwe-slider').mouseover(function () {
	  autoscrolling = false;
	}).mouseout(function () {
	  autoscrolling = true;
	});
	
	interval = setInterval(function () {
	  if (autoscrolling) {
	    nextSlide();
	  }
	}, DELAY_SPEED);
    }

}
});