(function($){
  $.fn.scrollpanel = function(config) {
    
    var op = {
      scrollbarheight: 0,
      block_height: 0,
      scroll_block_height: 0,
      target_step: 0,
      movelengs: 0,
      
      scroll_panel_id: '#slider-vertical',
      scroll_block_main: '',
      scroll_block_inner: '',
      scroll_block_scroll: '',
      wraper: '',

      init: function(){
        $(op.scroll_block_main).append("<div id='"+op.scroll_panel_id.replace("#", "")+"'></div> ");
        $(op.scroll_panel_id).css({"height": op.scrollbarheight+"px"});
        
        op.block_height = $(op.scroll_block_main).height()-10;
        op.scroll_block_height = $(op.scroll_block_scroll).height();
        op.target_step = Math.ceil((op.scroll_block_height-op.scrollbarheight)/op.scrollbarheight);
      },
      
      insertscrollpanel: function(){
        if(op.block_height < op.scroll_block_height){
    
          $(op.scroll_block_inner).addClass("scrollbarinclude");
          
          $(op.scroll_panel_id).slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: op.scrollbarheight,
            value: op.scrollbarheight,
            slide: function(event, ui) {
              op.movelengs = Math.ceil((op.scrollbarheight-ui.value)*op.target_step);
              $(op.scroll_block_scroll).css({"margin-top": "-"+op.movelengs+"px"});
            }
          });
        }
      
      }

    };
    
    op = $.extend(op, config);
    op.wraper = this.selector;

    return this.each(function() {
      op.init();
      op.insertscrollpanel();
    
    });
  };

})(jQuery);