var active = 1;
var itemcount = 3;
var TIMER_DELAY = 8000;
var ANIM_TIME = 1000;
var ITEMS = 3;
var timer;

function carousel_move(pos) {
	var pos = parseInt(pos);
	
	var dot = pos <= ITEMS ? pos : 1;
	
	$("#dot-" + active).stop(false, true).switchClass("active", "inactive", ANIM_TIME);
	active = pos;
	$("#dot-" + dot).stop(false, true).switchClass("inactive", "active", ANIM_TIME);
	
	$("#carousel .items").animate({ left: (-600 * (pos-1))+"px"}, function () {
		if(active==1)
		{
			$(this).css("left", "0px");
		}
	});
	
	if(active > ITEMS) active = 1;
	
	resetTimeout(TIMER_DELAY);
}

function onTimeout() {
    carousel_move(active + 1);
}

function resetTimeout(time) {
    if (timer)
        clearTimeout(timer);

    if(!time)
		time = TIMER_DELAY;
	
	timer = setTimeout("onTimeout()", time);
}

$(function () {

    $("div.dots").show();

    $("div.dot").css("cursor", "pointer");

    $("#item-1").clone().attr("id", "item-4").appendTo($("div#carousel .viewport .items"));

    $("div#dot-1").click(function () {
        carousel_move(1);
    });

    $("div#dot-2").click(function () {
        carousel_move(2);
    });

    $("div#dot-3").click(function () {
        carousel_move(3);
    });


    resetTimeout(TIMER_DELAY - ANIM_TIME);

    $("div.dot.disabled").removeClass("disabled");
});