var slideshowDelay = 2000;
var currentPosition = 0;
var slideWidth = 400;

$(document).ready(function(){
    
    
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');
    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
        'float' : 'left',
        'width' : slideWidth
    });
    
    
    
    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);
    
    
    
    
    // Insert controls in the DOM
    $('#slideshow')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>');
    // Hide left arrow control on first load
    manageControls(currentPosition);
    
    
    // Create event listeners for .controls clicks
    $('.control').bind('click', function(){
        
        //alert('currentPosition BEFORE: '+currentPosition);
        
        // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl') ? (currentPosition-0)+1 : currentPosition-1;
        
        //alert('currentPosition AFTER: '+currentPosition);
        
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
        });
        
        
        //alert('currentposition: '+currentPosition);
        
    });
    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position){
        // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
        
        $(".thumbnails .item").removeClass('active');
        $("#item_"+position).addClass('active');
        
    }
    
    
    function rollToPosition(newPos) {

        currentPosition = newPos;
        
        
        
        
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft' : slideWidth*(-newPos)
        }, 1000);
        manageControls(currentPosition);
        return 0;
    }


    
    $(".thumbnails .item").click(function(){
        
        var newPos = $(this).attr('value');
        
        //$(".thumbnails .item").removeClass('active');
        //$(this).addClass('active');
        
        rollToPosition(newPos);
        
    });
    
    $(".thumbnails .item:first").addClass('active');
        
    
    //setTimeout('runSlideshow()', slideshowDelay);
    
    
    
}); 

function restartSlideshow() {
    
    setTimeout('runSlideshow()', slideshowDelay);
    
}


function runSlideshow() {
    
    
    
    
    
    setTimeout('runSlideshow()', slideshowDelay);
    
    
}