function dragHandle(dragDiv, barHeight, wrapperDiv, containerDiv, containerHeight, scrollDiv, hideContainer) {
    
    if(containerHeight < $(wrapperDiv).height()) {
        
        $(dragDiv).height((barHeight / $(wrapperDiv).height()) * containerHeight);   
          
        var scrollMax = $("#mainscrollbar").height() - $(dragDiv).height();
        var scrollPosition = 0;
        
        $(dragDiv).draggable({
            axis : "y",
            "containment" : "parent",
            drag : function(e, ui) {
                scrollPosition = ui.position.top;
                var rate = (scrollPosition / scrollMax);
                var divMax = $(wrapperDiv).height() - $(containerDiv).height();
                $(wrapperDiv).css("top", ((divMax * rate) * -1) + "px");
            }
        });
        
        $(scrollDiv).eq(0).click(function() {
            //top
            $(dragDiv).css("top", "0");        
            $(wrapperDiv).css("top", "0");
        });
        
        $(scrollDiv).eq(1).click(function() {
            //up
            if(scrollPosition - 20 > 0) {
                $(dragDiv).animate({
                    top : (scrollPosition - 20) + "px"       
                });
                scrollPosition -= 20;
                var divMax = $(wrapperDiv).height() - $(containerDiv).height();
                var rate = (scrollPosition / scrollMax);
                $(wrapperDiv).animate({
                    top : ((divMax * rate) * -1) + "px"       
                });
            } else {
                $(dragDiv).animate({
                    top : "0px"       
                });
                scrollPosition = 0;
                $(wrapperDiv).animate({
                    top : "0px"       
                });
            }
        });
        
        $(scrollDiv).eq(2).click(function() {
            //down
            if(scrollPosition + 20 > scrollMax) {
                $(dragDiv).animate({
                    top : scrollMax + "px"        
                });
                scrollPosition = scrollMax;
                var divMax = $(wrapperDiv).height() - $(containerDiv).height();
                $(wrapperDiv).animate({
                    top : (divMax * -1) + "px"       
                });
            } else {
                $(dragDiv).animate({
                    top : (parseInt($(dragDiv).css("top")) + 20) < 0 ? "0px" : (parseInt($(dragDiv).css("top")) + 20) + "px"        
                });
                scrollPosition += 20;
                var divMax = $(wrapperDiv).height() - $(containerDiv).height();
                var rate = (scrollPosition / scrollMax);
                $(wrapperDiv).animate({
                    top : ((divMax * rate) * -1) + "px"       
                });
            }
        });
        
        $(scrollDiv).eq(3).click(function() {
            //bottom
            scrollPosition = scrollMax;
            $(dragDiv).css("top", scrollMax + "px");
            var divMax = $(wrapperDiv).height() - $(containerDiv).height();
            var rate = (scrollPosition / scrollMax);        
            $(wrapperDiv).css("top", ((divMax * rate) * -1) + "px"); 
        }); 
    
    } else {
        //$(dragDiv).hide();
        if(hideContainer == null) {
            hideContainer = ".cscroll";
        }
        $(hideContainer).hide();
    }    
            
}