var galleryPos = 0;
var dx = 254;
var blockCount = 1;
var totalBlocks = 7;
var periodicalID;
var shoes;
var start = true;
var delay = 3000;

window.addEvent("domready",function() {
    shoes = $("shoes");
    changeArrow();
    startPeriodical();
    handleNavClicks();
})


function changeArrow() {
    if ($$("img.hover-arrow")) {
        if ($("shoes")) {
            shoes.set('tween',  {duration: 'short', transition: 'cubic:in'});
            $$("img.hover-arrow").each(function(el) {
                el.addEvent("click", function() {
                    pausePeriodical();
                    if (el.src.indexOf("left") > -1) {
                        // lijevo:
                        lijevo();
                    } else {
                        // desno:
                        desno();
                    }
                })

            })
        }
    }
}


function handleNavClicks() {
    $$("p.nav-item").each(function(el) {
        el.addEvent("click", function() {
            removeSelected();
            $("s-"+el.id).setStyle("display", "block");
            el.set("class", "nav-item selected");
        })
    })
}

function removeSelected() {
    $$("p.nav-item").each(function(el) {
        $("s-"+el.id).setStyle("display", "none");
        el.set("class", "nav-item");
    })
}


function desno() {
    if (blockCount <= (totalBlocks-3)) {
        galleryPos += dx;
        blockCount += 1;
        shoes.tween('left',  "-" + galleryPos+"px");
    } else {
        if (start) {
            galleryPos = 0;
            blockCount = 1;
            shoes.tween('left',  "-" + galleryPos+"px");
        }
    }
}

function lijevo() {
    if ((galleryPos - dx) >= 0) {
        galleryPos -= dx;
        blockCount -= 1;
        shoes.tween('left',  "-" + galleryPos+"px");
    } else {
        galleryPos = 0;
    }
}


function startPeriodical() {
	periodicalID = desno.periodical(delay);
}

function pausePeriodical() {
    start = false;
	$clear(periodicalID);
}