$(document).ready(function(){
    initCarousel();
});

function initCarousel() {
    //hide default scrollbar
	$('.specials').css('overflow-x', 'hidden');

    //only init controls & slider if needed
	if($('.images td').size() > 4){
        initControls();
        initSlider();
	}
}

function initSlider() {
    //insert slider div
	$('.specials').after('<div class="slider_wrapper"><div id="slider"></div></div>');

	//content - viewport = slider range calculation
	var sliderrange = $('.specials table').width() - $('.specials').width();

	//create slider
	$("#slider").slider({
		max: sliderrange,
		min: 0,
		animate: 500
	});

	//bind slider actions
	$("#slider").slider({
		slide: function(event, ui) {
			$('.specials').scrollLeft($(this).slider('option', 'value'));
		},
		stop: function(event, ui) {
			$('.specials').scrollLeft($(this).slider('option', 'value'));
		}
    });
}

function initControls() {
    //enable controls
    $('.specials-control').addClass('visible');

    //bind control click handlers
    $('.specials-control.control-left').click(slideToNextLeftItem);
    $('.specials-control.control-right').click(slideToNextRightItem);
}

//scrolls carousel & slider to given position in given direction
function scrollCarousel(amount, direction) {
    var currentSliderPosition =  $("#slider").slider('option', 'value');

    if (direction == 'left') {
        var slideTo = currentSliderPosition - amount;
    } else if (direction == 'right') {
        var slideTo = currentSliderPosition + amount;
    }

    $("#slider").slider('value', slideTo);
    $('.specials').animate({scrollLeft: slideTo});
}

function slideToNextLeftItem() {
    scrollCarousel(116, 'left');
}

function slideToNextRightItem() {
    scrollCarousel(116, 'right');
}