var ozScrollCursorDragging = false;

var ozScrollArea ;
var ozScrollBar ;
var ozScrollCursor ;
var ozScrollContent  ;
var ozScrollUp  ;
var ozScrollDown  ;

function ozCreateScroll(contentElement) {

    ozScrollArea = document.getElementById("ozScrollArea");
    ozScrollBar = document.getElementById("ozScrollBar");
    ozScrollCursor = document.getElementById("ozScrollCursor");
    ozScrollUp  = document.getElementById("ozScrollUp");
    ozScrollDown  = document.getElementById("ozScrollDown");
    ozScrollContent = contentElement;


    if (ozScrollContent.scrollHeight - ozScrollContent.clientHeight > 0) {
        $(ozScrollArea).click(function (event) { ozScrollClick(event) });
        $(ozScrollCursor).mousemove(function (event) { ozScrollMove(event) });
        $(ozScrollCursor).mousedown(function (event) { ozScrollMouseDown(event) });
        $(ozScrollCursor).mouseup(function (event) { ozScrollMouseUp(event) });
        $(ozScrollCursor).mouseout(function (event) { ozScrollMouseUp(event) });
        $(ozScrollUp).click(function (event) { ozScrollUpClick(); });
        $(ozScrollDown).click(function (event) { ozScrollDownClick(); });
        
    }
    else {
        $(ozScrollBar).hide();
    }
}

function ozScrollMouseDown(event) {
    ozScrollCursorDragging = true;
}

function ozScrollMouseUp(event) {
    ozScrollCursorDragging = false;
}

function ozScrollMove(event) {
    /*
    var ozScrollArea = document.getElementById("ozScrollArea");
    var ozScrollBar = document.getElementById("ozScrollBar");
    var ozScrollCur = document.getElementById("ozScrollCursor");
    var ozScrollContent = document.getElementById('contenuti');
    */

    if (ozScrollCursorDragging) {

        //pos_x = event.pageX - elScroll.offsetLeft;
        pos_y = event.pageY - ozScrollArea.offsetTop - ozScrollBar.offsetTop;
        if (pos_y < 10) pos_y = 10;
        if (pos_y > $(ozScrollArea).height() - 10) pos_y = $(ozScrollArea).height() - 10;


        perc = ((pos_y - 10) / ($(ozScrollArea).height() - 20));


        //if (perc < 0.01) { perc = 0 };
        //if (perc > 0.99) { perc = 1 };

        $(ozScrollCursor).css('top', pos_y - 10);

        $(ozScrollContent).scrollTop(((ozScrollContent.scrollHeight - ozScrollContent.clientHeight) * perc));
    }
}

function ozScrollClick(event) {
    /*
    var ozScrollArea = document.getElementById("ozScrollArea");
    var ozScrollBar = document.getElementById("ozScrollBar");
    var ozScrollCur = document.getElementById("ozScrollCursor");
    var ozScrollContent = document.getElementById('contenuti');
    */

    if (ozScrollContent.clientHeight < ozScrollContent.scrollHeight) {

        //pos_x = event.offsetX ? (event.offsetX) : event.pageX - elScroll.offsetLeft;
        //pos_y = event.offsetY ? (event.offsetY) : event.pageY - elScroll.offsetTop;

        //pos_x = event.pageX - elScroll.offsetLeft;
        pos_y = event.pageY - ozScrollArea.offsetTop - ozScrollBar.offsetTop;
        if (pos_y < 10) pos_y = 10;
        if (pos_y > $(ozScrollArea).height() - 10) pos_y = $(ozScrollArea).height() - 10;


        perc = ((pos_y - 10) / ($(ozScrollArea).height() - 20));

        //if (perc < 0.01) { perc = 0 };
        //if (perc > 0.99) { perc = 1 };
        $(ozScrollCursor).css('top', pos_y - 10);

        $(ozScrollContent).animate({ scrollTop: ((ozScrollContent.scrollHeight - ozScrollContent.clientHeight) * perc) }, 'slow');

    }

}

function ozScrollUpClick() {
    ozScrollBy(-450);
}

function ozScrollDownClick() {
    ozScrollBy(450);
}

function ozScrollBy(pixels) {
    /*
    var ozScrollArea = document.getElementById("ozScrollArea");
    var ozScrollCur = document.getElementById("ozScrollCursor");
    var ozScrollContent = document.getElementById('contenuti');
    */

    var maxScroll = ozScrollContent.scrollHeight - ozScrollContent.clientHeight;
    var curScrollTop = $(ozScrollContent).scrollTop() + pixels;
    if (curScrollTop < 0) curScrollTop = 0;
    if (curScrollTop > maxScroll) curScrollTop = maxScroll;

    var posCursor = ($(ozScrollArea).height() - 20) * (curScrollTop / maxScroll);

    $(ozScrollCursor).css('top', posCursor);

    $(ozScrollContent).animate({ scrollTop: curScrollTop }, 'slow');
}