// JavaScript Document
(function( $ ){

//Define a method called wsnSlider and accept a user defined 
//map of settings into a variable called 'options'.
$.fn.wsnSlider = function(options) {    

//Supply a set of default values to use if not supplied.  
    var defaults = {   
            interval: 5000,
            speed: 800,
            slwidth: $(this).width(), 
            push : false
      };

    //Merge the supplied options with the plug-in defaults.  
    var settings = $.extend({}, defaults, options); 
    
    //Check user supplied wait interval and scroll speed settings.
    //If the speed is slower than the interval, change the speed to 
    //match the interval minus 100ms.
    if (settings.interval <= settings.speed) {
        settings.speed = settings.interval - 100;	
    }

	//If the push setting is true then set pushsize and slmove
    //values to zero. The images will scale rather than scroll.
    settings.pushsize = (settings.push) ? 0 : 100;
    settings.slmove = (settings.push) ? 0 : settings.slwidth;
	
//Allow the plug-in to be part of a jQuery chain	
this.each(function() {

    //Store the current object reference so that we can pass it 
    //to other functions in tact.        
	var $this = $(this); 
    	
    //Change the visibility of the buttons to visible.    
    $('.buttons').css({visibility:"visible"});
    
    //Add a class called 'current' to the first button
    //item to keep track of the current and next slides.   
    $('.buttons li:first').addClass("current");
    
    //Store the current buttons link href attribute so 
    //that we can pass it to other functions.
    var imgSrc = $('.buttons li.current a').attr("href");
    
    //The next 3 lines of code loop through the button links
    //and create an image tag for each behind the first image.
    //This is done purely to buffer the images on the page to 
    //prevent them from not appearing on slower connections.
    $('.buttons li a').each(function (){
    	$this.append("<img src='" + $(this).attr("href") + "' class='buffer' />");
    });
       
    //Create a duplicate of the first image to use when
    //sliding the images.                                  
    $this.prepend("<img src='" + imgSrc + "'/>");

    //Position the duplicate image behind the first image.
    $($this).find('img').not('.buffer').css({ position:"absolute", top:0, left:0 });
    
    //Use the JavaScript setInterval() function to call the 
    //nextSlide() function using the current reference and settings.
    //Let setInterval() call nextSlide repeatedly and use the 
    //settings.interval value as the delay.
    rotator = setInterval(function() {nextSlide($this, settings)}, settings.interval);

	//Next we need to capture the mouse clicks on the buttons.
    $('.buttons li a').click(function(evt) {
    	
        //Capture and prevent the default link behaviour.	
        evt.preventDefault();
        
		//Stop calling the rotator() function on an interval.
        clearInterval(rotator);
        
        //Grab the href attribute of the clicked on button.
        //We need this to change to the slide the user clicked on.
        var imgSrc = $(this).attr("href");
        
        //Find the back image and replace it's src attribute
        //with the clicked button's url 
        $($this).find('img').eq(1).attr("src", imgSrc).show(0);
        
        //Then fade out the front image to make the new image
        //visible. Once it is visible, replace the front image
        //src attribute as well and turn it back on using show().
        $($this).find('img').eq(0).fadeOut(100, function() {
            $($this).find('img').eq(0).attr("src", imgSrc).show(0);
        });
        
        //Remove the 'current' class from all buttons.
        $('.buttons li.current').removeClass("current");
        
        //Add the 'current' class to the button the user clicked.
        $(this).parent().addClass("current");
        
        //Restart the timer on the rotator with default interval.
        //This means that once a user clicks on a button they will
        //wait the default interval time rather than moving on.
        rotator = setInterval(function() {nextSlide($this, settings)}, settings.interval);
    });			

});
					 
//Return the chained object reference to jQuery 
return this;	
};


//The nextSlide function will animate the sliding images 
//using the current object referenece in $this and the
//settings supplied by the user or the default values.
nextSlide = function ($this, settings) {

	//Within the referenced object, find the front image & set it's
    //default starting position off the edge of the viewport.
    //If the push setting is enabled, reduce the objects width to 0%
    //to prepare to scale the size.
    $($this).find('img').eq(1).css({left: settings.slwidth+"px", 
    					width:settings.pushsize+"%", height: "100%"});
                        
    //Store the next item after the 'current' item.                    
    var nextImage = $('.buttons li.current').next();
    
    //If there is no next item, set the new current item as the
    //first item by adding the 'current' class to the first sibling.
    //If there is a next item, remove the 'current' class
    //and add it to the returned item.
    if (nextImage.length == 0) {
        $('.buttons li.current').removeClass("current").siblings(":first").addClass("current");
    } else {	
        $('.buttons li.current').removeClass("current").next().addClass("current");
    }

	//Store the href attribute of the new current link
    var imgSrc = $('.buttons li.current a').attr("href");

	//Find the front image and change it's src attribute to
    //the stored URL. Then animate the front image from right
    //to left into view. Make sure it's final width is 100%
    //using the speed from settings.
    $($this).find('img').eq(1).attr("src", imgSrc)
    			.animate({left:0, width:"100%"},(settings.speed));
                
    //Find the back image and animate it from right to left out
    //of view. If the push setting is enabled, scale the image
    //rather than moving it. 
    //Once the back image has finished animating, reset it back
    //into position behind the front image with the same src
    //attribute as the front image.           
    $($this).find('img').eq(0)
    			.animate({left:'-='+settings.slmove+'px', 
                		  width:settings.pushsize+"%", 
                          height: "100%"}, settings.speed, 
                          function() {
                              $(this).attr("src", imgSrc).css({left: 0, width: "100%"});
                         });	
};

//End the plug-in code
})( jQuery );



//Call the jQuery plug-in on any item with an
//'id' attribute of 'wsnSlider';
//Some settings have been supplied as a map object. 
$('document').ready(function () {
	$('#wsnSlider').wsnSlider({interval:10000, speed:800, push:false});
});