$(window).load(
    function() {

        var interval;
        var objContainerScroll = $(".vscrollable");
        var objScroll = objContainerScroll.children(".item");

        objContainerScroll.css('width', objContainerScroll.parent().innerWidth() + 'px');
        objContainerScroll.css('clip', 'rect(0px, ' + objContainerScroll.parent().innerWidth() + 'px, ' + objContainerScroll.parent().innerHeight() + 'px, 0px)');
        objContainerScroll.css('position', 'absolute');
        objContainerScroll.css('left', objContainerScroll.parent().position().left);
        objScroll.css('position', 'relative');

        objScroll.show();
        
        if (objScroll.outerHeight(true) > objContainerScroll.parent().outerHeight()) {
            //$(".up").css({ 'text-align': 'center', 'background': '#fff', 'position': 'absolute', 'z-index': '10', 'height': '30px', 'width': $(".up").parent().innerWidth() + 'px', 'left': $(".up").parent().position().left }).fadeTo('0', 0.2);
            //$(".down").css({ 'text-align': 'center', 'background': '#fff', 'position': 'absolute', 'z-index': '10', 'height': '30px', 'width': $(".down").parent().innerWidth() + 'px', 'top': $(".down").parent().innerHeight() + $(".down").parent().position().top - 30 + 'px', 'left': $(".down").parent().position().left }).fadeTo('0', 0.2);
            //$(".up").find("img").css({ "padding-top": (30 - $(".up").find("img").outerHeight()) / 2 + "px" });
            //$(".down").find("img").css({ "padding-top": (30 - $(".down").find("img").outerHeight()) / 2 + "px" });

            $(".up").css({
                'text-align': 'center',
                'position': 'absolute',
                'z-index': '10',
                'height': '16px',
                'width': $(".up").parent().innerWidth() + 'px',
                'left': $(".up").parent().position().left
            });
            $(".down").css({
                'text-align': 'center',
                'position': 'absolute',
                'z-index': '10',
                'height': '16px',
                'width': $(".down").parent().innerWidth() + 'px',
                'top': $(".down").parent().innerHeight() + $(".down").parent().position().top - $(".down").height() + 'px',
                'left': $(".down").parent().position().left
            });
            $(".up").show();
            $(".down").show()
            $(".up").mouseover(function() { upImg(objScroll) });
            $(".up").mouseout(function() { stopScroll(objScroll) });
            $(".down").mouseover(function() { downImg(objScroll) });
            $(".down").mouseout(function() { stopScroll(objScroll) });
        } else {
            $(".up").hide();
            $(".down").hide();
        }
    }
)

function downImg(obj) {
    var objMove = $(obj);
    objMove.stop(true, true);
    //alert(objMove.position().top + '> -' + (objMove.outerHeight(true) - objMove.parent().parent().outerHeight()));
    if (objMove.position().top > -(objMove.outerHeight(true) - objMove.parent().parent().outerHeight())) {
        objMove.animate({ top: '-=8' }, 'slow');
    }
    interval = setTimeout(function() { downImg(objMove) }, 40);
}
function upImg(obj) {
    var objMove = $(obj);
    objMove.stop(true, true);
    //alert(objMove.position().top + '> 0');
    if (objMove.position().top < 0) {
        objMove.animate({ top: '+=8' }, 'slow');
    }
    interval = setTimeout(function() { upImg(objMove) }, 40);
}
function stopScroll() {
    clearTimeout(interval);
}


// per aumentare e diminuire la velocità di scroll a seconda della posizione del mouse [NON UTILIZZATO]
function downImgVelocity(obj, v) {
    var velocita = v;
    var objMove = $(obj);
    objMove.stop(true, true);
    //alert(objMove.position().top + '> -' + (objMove.outerHeight(true) - objMove.parent().parent().outerHeight()));
    if (objMove.position().top > -(objMove.outerHeight(true) - objMove.parent().parent().outerHeight())) {
        //alert(velocity(obj));
        $(".down").mousemove(function(e) {
            velocita = ($(".up").innerHeight() - (e.pageY - $(".down").offset().top)) * 2;
            objMove.animate({ top: '-=8' }, 'slow');
            interval = setTimeout(function() { downImg(objMove) }, velocita);
            //alert('down' + velocita);
        });
    }
}