


function makeScrollable(params) {
  var wheelTimer=null;
  
  var timeout=params.scrollSpeed;
  var defaultStep=params.scrollStep;
  var scrollableId=params.scrollableId;
  var scrollerId=params.scrollerId;
  var scrollbarId=params.scrollbarId;
  var wrapperId=params.wrapperId;
  
  var scrollable = $(scrollableId);
  var scroller= new Object();
  scroller.obj=$(scrollerId);
  scroller.min=$styleInt(scrollerId,'margin-top');
  
  scroller.height=$styleInt(scrollbarId,'height')-
          $styleInt(scrollerId,'height')-
          $styleInt(scrollerId,'border-top-width')-
          $styleInt(scrollerId,'border-bottom-width');
  scroller.max = scroller.min+scroller.height;
  
  scroller.konst = (scroller.height/(scrollable.scrollHeight-$styleInt(scrollable,'height')));
  
  var step=defaultStep;
  
  $(wrapperId).observe("mousedown", function(e) {
     Event.observe(wrapperId, "mousemove", mouseMove, false); 
     return false;
   }
  ,false); 
  
  $(wrapperId).observe("mouseup", function(e) {
     Event.stopObserving(wrapperId, "mousemove", mouseMove, false);
     return false;
   }
  ,false); 

  
  function mouseMove(e) {
   var element = Event.element(e);
   var mouseY = Event.pointerY(e);
   
   var compensation = 0;
   //alert(BrowserDetect.browser);
   if (BrowserDetect.browser=="Safari") {
     compensation=-155;
   }
   
   if (BrowserDetect.browser=="Firefox" ) {
     compensation=-125;
   }
   
    if ( BrowserDetect.browser=="Explorer") {
      compensation=-135;
    }
   
   var newMarginTop = mouseY-$styleInt(scrollbarId,'top')-$styleInt(scrollerId,'height')/2+compensation;
   
   if (newMarginTop>scroller.max) {
     newMarginTop=scroller.max;
   }
   
   if (newMarginTop<scroller.min) {
     newMarginTop=scroller.min;
   }
   
   $(scrollerId).setStyle({
     marginTop: newMarginTop+"px"
   });
   
   scrollable.scrollTop=($styleInt(scrollerId,'margin-top')-scroller.min)/
              (scroller.height/(scrollable.scrollHeight-$styleInt(scrollable,'height')));
   
   Event.stop(e);
   return false;
  }
  
  function updateScroll() {
    scrollable.scrollTop-=step;
    var newMarginTop = scroller.min+scrollable.scrollTop*
                (scroller.height/(scrollable.scrollHeight-$styleInt(scrollable,'height')))+'px';
    scroller.obj.setStyle({
      marginTop: newMarginTop
    });
  }
  
  this.scrollOut=function(scrollableId, direction){
      updateScroll();
    	if (Math.abs(step)>0.2) {
    	  	step-=step/20;
    	  	wheelTimer=window.setTimeout("this.scrollOut('"+scrollableId+"',"+direction+")",timeout);
    	} else {
    	  clearTimeout(wheelTimer);
    	  step = defaultStep;
    	}
  }

  // Handle wheel events
  function wheel(event){
  	var delta = 0;
  	if (!event) event = window.event;
  	if (event.wheelDelta) {
  		delta = event.wheelDelta/120; 
  		if (window.opera) delta = -delta;
  	} else if (event.detail) {
  		delta = -event.detail/3;
  	}
  	if (delta)
  		handleWheel(delta);
          if (event.preventDefault)
                  event.preventDefault();
          event.returnValue = false;
  }

  // Handle delegated wheel event
  function handleWheel(delta) {
     var compensation=1;
     if (BrowserDetect.browser=="Safari" || BrowserDetect.browser=="Explorer") {
        compensation=0.3;
     }
      
  	 step=(delta)*defaultStep*compensation;

     clearTimeout(wheelTimer);
  	 if (delta>=0) {
  	   scrollOut(scrollableId, 1 );
  	 } else {
  	   scrollOut(scrollableId, 0 );
  	 }
  }

  if (window.addEventListener)
  	window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;
  
}



