$(window).load(function() {
    visibleHeight = $('#customScrollBox').height();
    if ($('#customScrollBox  .container').height() > visibleHeight) {
        totalContent = $('#customScrollBox  .content').height();
        minDraggerHeight = $('#dragger').height();
        draggerContainerHeight = $('#dragger_container').height();
        adjDraggerHeight = totalContent - ((totalContent - visibleHeight) * 1.3); //adjust dragger height analogous to content
        if (adjDraggerHeight > minDraggerHeight) { //minimum dragger height
            $('#dragger').css('height', adjDraggerHeight + 'px');
            $('#dragger').css('line-height', adjDraggerHeight + 'px');
        } else {
            $('#dragger').css('height', minDraggerHeight + 'px');
            $('#dragger').css('line-height', minDraggerHeight + 'px');
        }
        if (adjDraggerHeight < draggerContainerHeight) { //maximum dragger height
            $('#dragger').css('height', adjDraggerHeight + 'px');
            $('#dragger').css('line-height', adjDraggerHeight + 'px');
        } else {
            $('#dragger').css('height', draggerContainerHeight - 10 + 'px');
            $('#dragger').css('line-height', draggerContainerHeight - 10 + 'px');
        }
        animSpeed = 400; //animation speed
        easeType = 'easeOutCirc'; //easing type
        bottomSpace = 1.05; //bottom scrolling space
        targY = 0;
        draggerHeight = $('#dragger').height();
        $('#dragger').draggable({
            axis: 'y',
            containment: 'parent',
            drag: function(event, ui) {
                Scroll();
            },
            stop: function(event, ui) {
                DraggerOut();
            }
        });
        //scrollbar click
        $('#dragger_container').click(function(e) {
            // $(this).css('background-color', '#555');
            var mouseCoord = (e.pageY - $(this).offset().top);
            var targetPos = mouseCoord + $('#dragger').height();
            if (targetPos < $('#dragger_container').height()) {
                $('#dragger').css('top', mouseCoord);
                Scroll();
            } else {
                $('#dragger').css('top', $('#dragger_container').height() - $('#dragger').height());
                Scroll();
            }
        });
        //mousewheel
        $(function($) {
            $('#customScrollBox').bind('mousewheel', function(event, delta) {
                vel = Math.abs(delta * 10);
                $('#dragger').css('top', $('#dragger').position().top - (delta * vel));
                Scroll();
                if ($('#dragger').position().top < 0) {
                    $('#dragger').css('top', 0);
                    $('#customScrollBox .container').stop();
                    Scroll();
                }
                if ($('#dragger').position().top > $('#dragger_container').height() - $('#dragger').height()) {
                    $('#dragger').css('top', $('#dragger_container').height() - $('#dragger').height());
                    $('#customScrollBox .container').stop();
                    Scroll();
                }
                return false;
            });
        });
        function Scroll() {
            var scrollAmount = (totalContent - (visibleHeight / bottomSpace)) / (draggerContainerHeight - draggerHeight);
            var draggerY = $('#dragger').position().top;
            targY = -draggerY * scrollAmount;
            var thePos = $('#customScrollBox  .container').position().top - targY;
            $('#customScrollBox .container').stop().animate({ top: '-=' + thePos }, animSpeed, easeType); //with easing
            //$('#customScrollBox .container').css('top',$('#customScrollBox  .container').position().top-thePos+'px'); //no easing
        }
        $("#dragger").mouseup(function() {
            DraggerOut();
        }).mousedown(function() {
            DraggerOver();
        });
        function DraggerOver() {
            //$('#dragger').css('background-color', '#ccc');
            //$('#dragger').css('color', '#666');
            //$('#dragger').css('border-left-color', '#fff');
            //$('#dragger').css('border-right-color', '#555');
        }
        function DraggerOut() {
            //$('#dragger').css('background-color', '#999');
            //$('#dragger').css('color', '#666');
            //$('#dragger').css('border-left-color', '#ccc');
            //$('#dragger').css('border-right-color', '#555');
        }
    } else {
        $('#dragger').css('display', 'none');
        $('#dragger_container').css('display', 'none');
    }
});