var interval;
var current = 0;
var total = 0;
var w = 0;
var w2 = 0;
var visible = 5;
var speed = 15000;

var $slider;
var $slides;
var $thumbs;
var $ul;
var $prev;
var $next;

$(function() {
    $slider = $('#home-slider-container');
    $slides = $slider.find('#slides');
    $thumbs = $('#slider-nav .thumbs');
    $ul = $thumbs.find('ul');
    
    $prev = $('#circle-button-left');
    $next = $('#circle-button-right');
    
    $prev.click(ss_prev);
    $next.click(ss_next);
    
    total = $slider.find('.slide').size();
    w = $slides.find('.slide').first().width();
    w2 = $ul.find('li').width() + 36;
    
    ss_start(speed);
    
    $slides.find('.slide').hover(function() { ss_stop(); }, function() { ss_start(speed); });
    $('#slider-nav').hover(function() { ss_stop(); }, function() { ss_start(speed); });
    
    $thumbs.find('div').click(function() {
        $this = $(this);
        before = current;
        current = $this.parent().index();
        ss_goto(before);
    });
    
        // .slide
        // #home-slider-container
        // #slider-nav .thumbs
        

});

function ss_start(delay) {
    interval = setInterval(ss_play, delay);
}

function ss_stop() {
    clearInterval(interval);
    interval = null;
}

function ss_play() {
    ss_next();
}

function ss_next() {
    before = current;
    current = current + 1 == total ? 0 : current + 1;
    ss_goto(before);
}

function ss_prev() {
    before = current;
    current = current - 1 < 0 ? total-1 : current - 1;
    ss_goto(before);
}

function ss_goto(before) {
   $thumbs.find('li div').eq(before).removeClass('selected').addClass('slider-nav-bg-tile');

   $slides.animate({'left': '-' + (current * w) + 'px'});

   if (current > visible-2) {
       $ul.animate({'left': '-' + ((current - visible + 1)* w2) + 'px'});
   } else if (current == 0) {
       $ul.animate({'left': '0px'});
   }

   $thumbs.find('li div').eq(current).addClass('selected').removeClass('slider-nav-bg-tile');
}