function createSlider($pane) {
    
    
    // create a new scroller div
    var $scroller_div = $("<div class='scroller'>&nbsp;</div>");
    
    //store the org height
    var org_height = $pane.height()
    
    $pane.css("position", "absolute");
    
    $hider = $pane.parent();
    $hider.parent().append($scroller_div)
    
    var scroller_height = 570 - $scroller_div.offset().top;
    $scroller_div.css("height", scroller_height + "px");
    $hider.css({"height": scroller_height + "px", overflow:"hidden"});
    
    var diff = scroller_height - org_height + 20;
    
    
    //console.log($pane.height(), diff, scroller_height, org_height);
    
    
    $scroller_div.slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 100,
        slide: function( event, ui ) {
            
            var perc = (100 - ui.value) / 100;
            
            $pane.css("top", (perc * diff) + "px");
        }
    });
    
    
    
    
    
};