$(document).ready(function(){

    var sliderWidth = $('.slide').outerWidth(true);
    var sliderAmount = $('.slide').length;
    var completeWidth = sliderWidth*sliderAmount;
    var finalSlide = sliderAmount-1;
    
    //set these in milliseconds
    var timerAmount = 15000;
    //selected extra time
    var extendedTime = 15000;
    
    //couple of default values
    var timerInitiated = true;
    var currentPosition = 0;
    var acceptingClicks = true;
    
    /**
    * No Further editing necessary
    */
    
    //reset scroller
    $('#sliderContainer').scrollLeft();
    
    //set the width of holding parent - the container (the scroller) then runs above it
    $('#sliderInner').width(completeWidth);
    
    //create link list assign an id to each link and each cell
    $('#sliderLinks').html('<ul></ul>');
    $('.slide').each(function(i){
        $(this).attr('id','slide'+i);
        $('#sliderLinks ul').append('<li class = "sliderNavigationButton" id = "link'+i+'"></li>'); 
        $('#sliderLinks ul li#link'+i).bind('click',function(){
            if (acceptingClicks) {
                timerInitiated = false;            
                acceptingClicks = false;
                $('#sliderContainer').animate({
                    'scrollLeft':(i*sliderWidth)
                }, function(){
                    currentPosition = i;
                    alterLink(currentPosition);
                    setTimeout(restartTimer,extendedTime);
                });
            }
        })
    })
    
    //add first selected link class
    $('#sliderLinks ul li:first').addClass('selectedLink');
    
    //this animates the sliders and only runs when it is not paused    
    function animateSlider() {
        if (timerInitiated) {
            if (currentPosition == finalSlide) {
                $('#sliderContainer').animate({
                    'scrollLeft': 0
                }, function(){
                    currentPosition = 0;
                    alterLink(currentPosition);
                }) 
            } else {
                $('#sliderContainer').animate({
                    'scrollLeft': (currentPosition+1)*sliderWidth
                }, function(){
                    currentPosition++;
                    alterLink(currentPosition);
                })    
            } 
            setTimeout(animateSlider,timerAmount); 
        }
    }
    
    function alterLink(linkID) {
        $('#sliderLinks ul li').each(function(){
            $(this).removeClass('selectedLink');
        })
        $('#sliderLinks ul li#link'+linkID).addClass('selectedLink');
    }
    
    function restartTimer() {
        timerInitiated = true;
        acceptingClicks = true;
        setTimeout(animateSlider,timerAmount); 
    }
    
    setTimeout(animateSlider,timerAmount);    

})