$(function() {

    window.scrollPercent=0;
    window.scrollableTextHeight = document.getElementById("scrollable").scrollHeight;
    window.scrollableHeight = document.getElementById("scrollable").clientHeight;
    if(scrollableTextHeight<=scrollableHeight){
        $("#scrollBar").hide();
    }

    $("#scrollBarHandler").draggable({
        containment: "parent"
    });
    $("#scrollBarHandler").bind( "drag", function(event, ui) {
        var scroller = $("#scrollBarHandler");
        var scrollContaner = $("#scrollBarBack");
        var scrollRange = scrollContaner.height();
        var scrollContanerOffset = scrollContaner.offset();
        var scrollHandlerOffset = scroller.offset();
        var scrollTo = (scrollHandlerOffset.top - scrollContanerOffset.top)*100/(scrollRange-scroller.height());
        scrollPercent=scrollTo;
        $("#scrollable").scrollTo(scrollTo+'%');
        
    });


    $('#scrollable').mousewheel(function(event, delta) {

        scrollPercent-=delta;
        if(scrollPercent<0)
            scrollPercent=0;
        if(scrollPercent>100)
            scrollPercent=100;

        var scroller = $("#scrollBarHandler");
        var scrollContaner = $("#scrollBarBack");
        var scrollRange = scrollContaner.height();
        var scrollContanerOffset = scrollContaner.offset();
        var scrollHandlerOffset = scroller.offset();
        var scrollPX=Math.round(scrollPercent*scrollRange/100)+scrollContanerOffset.top;
        var scrollMax=scrollContanerOffset.top+scrollRange-scroller.height();
        if (scrollPX>(scrollMax))
            scrollPX=scrollMax;
        $("#scrollable").scrollTo(scrollPercent+'%');
        $("#scrollBarHandler").offset({top:scrollPX});
    });
});