$(document).ready(function () {
        var pro_auto_slide = 1;
	var hover_pause = 1;
	var key_slide = 1;

        var pro_auto_slide_seconds = 5000;

	$('#product_carousel_ul li:first').before($('#product_carousel_ul li:last'));

        if (pro_auto_slide == 1) {
                var pro_timer = setInterval('product_slide("right")', pro_auto_slide_seconds);
		$('#product_hidden_auto_slide_seconds').val(pro_auto_slide_seconds);
	}

	//check if hover pause is enabled
	if (hover_pause == 1) {
		//when hovered over the list
		$('#product_carousel_ul').hover(function () {
			//stop the interval
                        clearInterval(pro_timer);
		},
		function () {
			//and when mouseout start it again
                        pro_timer = setInterval('product_slide("right")', pro_auto_slide_seconds);
		});
	}

	//check if key sliding is enabled
	if (key_slide == 1) {

		//binding keypress function
		$(document).bind('keypress', function (e) {
			//keyCode for left arrow is 37 and for right it's 39 '
			if (e.keyCode == 37) {
				//initialize the slide to left function
				slide('left');
                                product_slide('left');
			} else if (e.keyCode == 39) {
				//initialize the slide to right function
				slide('right');
                                product_slide('right');
			}
		});
	}
});

function product_slide(where) {

	//get the item width
	var item_width = $('#product_carousel_ul li').outerWidth() + 10;

	/* using a if statement and the where variable check
            we will check where the user wants to slide (left or right)*/
	if (where == 'left') {
		//...calculating the new left indent of the unordered list (ul) for left sliding
		var left_indent = parseInt($('#product_carousel_ul').css('left')) + item_width;
	} else {
		//...calculating the new left indent of the unordered list (ul) for right sliding
		var left_indent = parseInt($('#product_carousel_ul').css('left')) - item_width;

	}

	//make the sliding effect using jQuery's animate function... '
	$('#product_carousel_ul:not(:animated)').animate({
		'left': left_indent
	},
	500, function () {

		/* when the animation finishes use the if statement again, and make an ilussion
                of infinity by changing place of last or first item*/
		if (where == 'left') {
			//...and if it slided to left we put the last item before the first item
			$('#product_carousel_ul li:first').before($('#product_carousel_ul li:last'));
		} else {
			//...and if it slided to right we put the first item after the last item
			$('#product_carousel_ul li:last').after($('#product_carousel_ul li:first'));
		}

		//...and then just get back the default left indent
		$('#product_carousel_ul').css({
			'left': '-146px'
		});
	});
}