var interval;
$(window).load(function() {

    $(".scrollable").parent().css('float', 'left');

    $(".scrollable").children().css('position', 'absolute').hide();
    $(".scrollable").find(":first").addClass("active").fadeIn("slow");

    $(".navigator").find("a:first").addClass("act");

    if ($(".scrollable").children().length > 1) {
        interval = setTimeout(function() { nextImg($(".navigator").find("a.act")); }, 10000);

        $(".navigator a").click(function() { changeImg(this) });
        $(".scrollable img").click(function() { nextImg($(".navigator").find("a.act")); });
    }
});

function nextImg(obj) {
    var a = $(obj);
    var n = a.next("a");
    //alert(a.length + ' - ' + n.length);
    if ($(n).length != 1) n = $(".navigator").find("a:first");
    changePallino(n);
    changeImg(n);
}
function changeImg(obj) {
    var a = $(obj);
    changePallino(a);
    $(".scrollable .active").removeClass("active").fadeOut("slow", function() {
        $(".scrollable").find("[rel = " + a.attr("rel") + "]").fadeIn().addClass("active");
    });
    clearTimeout(interval);
    interval = setTimeout(function() { nextImg($(".navigator").find("a.act")); }, 10000);
}

function changePallino(obj) {
    var objPallino = $(obj);
    $("[rel=pallino]").removeClass("pallino_on").addClass("pallino_off");
    $(".navigator").find(".act").removeClass("act");
    objPallino.addClass("act").find("div").removeClass("pallino_off").addClass("pallino_on");
}