window.onload=document.onload = initBars;

var bars=new Array();
var scrollInterval;


function getElementPosition(elem)
{
	
    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
	
    var l = 0;
    var t = 0;
	
    while (elem)
    {
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return {"left":l, "top":t, "width": w, "height":h};
}


function explode( delimiter, string ) {   
    var emptyArray = { 0: '' };   
    if ( arguments.length != 2   
        || typeof arguments[0] == 'undefined'   
        || typeof arguments[1] == 'undefined' )   
    {
        return null;   
    } 
    if ( delimiter === ''   
        || delimiter === false   
        || delimiter === null )   
    {
        return false;   
    }
    if ( typeof delimiter == 'function'   
        || typeof delimiter == 'object'   
        || typeof string == 'function'   
        || typeof string == 'object' )   
    {
        return emptyArray;   
    }
    if ( delimiter === true ) {   
        delimiter = '1';   
    }
    return string.toString().split ( delimiter.toString() );   
}  




function setBar(element_id,classTop,classBottom,classCenter,classBeg,paddings)
{
  var bar=new Array();
  bar['container']=document.getElementById(element_id);
  bar['top']=classTop;
  bar['bottom']=classBottom;
  bar['center']=classCenter;
  bar['beg']=classBeg;
  var tmp=explode(" ",paddings);
  bar['padding']={'top': tmp[0],  'right': tmp[1], 'bottom': tmp[2], 'left': tmp[3]}; 
  bar['beg_step']=0;
  bar['beg_init']=0;
  bar['beg_stop']=0;
  bar['beg_element']=false;
  bar['drag']=false;
  bar['drag_start']=0;
  bar['st']=false;
  bars.push(bar);
  bar['container'].style.overflow='hidden';
}

function initBars(event)
{
   var i;
   for(i in bars)
   {
     var g=getElementPosition(bars[i]['container']);
     if(bars[i]['container'].scrollHeight<=g.height) break;
     if(!bars[i]['st'])
     {
      bars[i]['st']=true;
      bars[i]['container'].scrollTop=0;
      
      if (bars[i]['container'].addEventListener)
      {
         bars[i]['container'].addEventListener('DOMMouseScroll', function (event) { wheel(i,event); }, false);
      }
      
      
      bars[i]['container'].onmousewheel=function (event) { wheel(i,event); };
      bars[i]['container_pos']=g;
      var top=document.createElement('div');
      top.className=bars[i]['top'];
      top.style.position='absolute';
      top.style.zIndex=7000;
      document.body.appendChild(top);
      
      var widthBar=getElementPosition(top).width;
      var heightBar=getElementPosition(top).height;
      
      
      document.body.removeChild(top);
      var ll=g.left*1+g.width*1-widthBar*1-bars[i]['padding'].right*1;
      ll=ll+'px';
      top.style.left=ll;
      //alert();
      var tt=g.top*1+bars[i]['padding'].top*1;
      tt=tt+'px';
      top.style.top=tt;
      top.style.cursor='pointer';
      
      top.onmousedown=function () { startScroll(i, 'top'); };
      top.onmouseup=function () { stopScroll(); };
     // bars[i]['container'].style.paddingRight=widthBar*1+bars[i]['padding'].right*1+bars[i]['padding'].left*1;
      
      
      //alert(bars[i]['padding'].top);
      
      
      var bottom=document.createElement('div');
      bottom.className=bars[i]['bottom'];
      bottom.style.position='absolute';
      bottom.style.zIndex=700;
      bottom.style.cursor='pointer';
      bottom.onmousedown=function () { startScroll(i, 'bottom'); };
      bottom.onmouseup=function () { stopScroll(); };
      document.body.appendChild(bottom);
      
      var heightBottom=getElementPosition(bottom).height;
      
      document.body.removeChild(bottom);
      ll=g.left+g.width-widthBar-bars[i]['padding'].right*1;
      ll=ll+'px';
      bottom.style.left=ll;
      tt=g.top+g.height-heightBottom-bars[i]['padding'].bottom*1;
      tt=tt+'px';
      bottom.style.top=tt;
      
      var center=document.createElement('div');
      center.className=bars[i]['center'];
      center.style.position='absolute';
      center.style.zIndex=690;
      ll=g.left+g.width-widthBar-bars[i]['padding'].right*1;
      ll=ll+'px';
      center.style.left=ll;
      tt=g.top+bars[i]['padding'].top*1;
      tt=tt+'px';
      center.style.top=tt;
      var hh=g.height-bars[i]['padding'].top*1-bars[i]['padding'].bottom*1;
      hh=hh+'px';
      center.style.height=hh;
      
      
      var beg=document.createElement('div');
      beg.className=bars[i]['beg'];
      beg.style.position='absolute';
      beg.style.zIndex=700;
      ll=g.left+g.width-widthBar-bars[i]['padding'].right*1;
      ll=ll+'px';
      beg.style.left=ll;
      tt=g.top*1+bars[i]['padding'].top*1+heightBar*1;
      tt=tt+'px';
      beg.style.top=tt;
      beg.onmousedown = function (event) { drag(i,event); };
      // Перетащить
      document.onmousemove = move;

      // Бросить
      document.onmouseup = drag_stop;
      //alert(beg.style.top);
      beg.style.cursor='pointer';
      document.body.appendChild(beg);
      
      var widthBeg=getElementPosition(beg).width;
      var heightBeg=getElementPosition(beg).height;
      
      

      var all_step=g.height-bars[i]['padding'].top*1-bars[i]['padding'].bottom*1-heightBottom-heightBar-heightBeg;
      //alert(all_step);
      bars[i]['beg_step']=all_step/(bars[i]['container'].scrollHeight-g.height);
      bars[i]['beg_init']=g.top*1+bars[i]['padding'].top*1+heightBar;
      bars[i]['beg_stop']=g.top+g.height-heightBottom-bars[i]['padding'].bottom*1-heightBeg;
      bars[i]['beg_element']=beg;
      document.body.appendChild(top);
      document.body.appendChild(bottom);
      document.body.appendChild(center);
      //document.body.appendChild(beg);
      //alert(widthBar);
    }
   }
}



function drag(i,event)
{
    if (!event)
    {
        event = window.event;
    }
  if(bars[i])
  {
    //alert('YAG');
    bars[i]['drag']=true;
    bars[i]['drag_start']=event.clientY;
    blockEvent(event);
  }
}


function drag_stop()
{
   for(i in bars)
   {
     bars[i]['drag']=false;
   }
}


function blockEvent(event)
{
    if (!event)
    {
        event = window.event;
    }
    if(event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
    if(event.preventDefault) event.preventDefault();
    else event.returnValue = false;
}





function wheel(i,event)
{
if(bars[i])
{
    // Переменная, в которой будем хранить сдвиг
    var wheelDelta = 0;
    
    // Шаг меню при прокрутке
    var step = bars[i]['beg_step']*100;
    if (!event) 
    {
        event = window.event;
    }
    if (event.wheelDelta) 
    {
        // В IE и Opera при сдвиге колеса на один шаг event.wheelDelta принимает значение 120
        // Значения сдвига в этих двух браузерах совпадают по знаку.
        wheelDelta = event.wheelDelta/120;
    } 
    else if (event.detail) 
    {
        // В Mozilla, значение wheelDelta отличается по знаку от значения в IE.
        // Сдвиг колеса на один шаг соответствует значению 3 параметра event.detail          
        wheelDelta = -event.detail/3;
    }
    // При скроллинге вверх wheelDelta > 0
    // При скролинге вниз - wheelDelta < 0
    if (wheelDelta)
    {
         
        //var currentPosition = bars[i]['beg_element'].style.top.replace("px","")*1;               
        var newPosition = wheelDelta*step;
        //setPosition(newPosition); 
        if(newPosition>0)
        {
           scrollTop(i,newPosition);
        }
        else
        {
          if(newPosition<0)
          {
            //alert(newPosition*(-1));
            scrollBottom(i,newPosition*(-1));
          }
        }
    }
    
    // Убиваем событие (чтобы страница не скроллилась)
    if (event.preventDefault)
    {
        event.preventDefault();
    }
    event.returnValue = false;
    blockEvent(event);
 }
}




function move(event)
{
    //alert('a');
    if (!event)
    {
        event = window.event;
    }
    // Здесь мы как раз и проверяем:
    // Сдвигать ли нам ползунок вслед за мышью, или оставить его неподвижным
   for(i in bars)
   {
     if(bars[i]['drag'])
     {

       if(bars[i]['drag_start']>event.clientY)
       {
         var x=(bars[i]['drag_start']-event.clientY)/bars[i]['beg_step'];
         scrollTop(i,x);
       }
       else
       {
         if(bars[i]['drag_start']<event.clientY)
         {
            var x=(event.clientY-bars[i]['drag_start'])/bars[i]['beg_step'];
            scrollBottom(i,x);
         }
         
         
         
         
         
     if(bars[i]['beg_stop']<bars[i]['drag_start'])
     {
        bars[i]['container'].scrollTop=bars[i]['container'].scrollHeight;
    //alert(bars[i]['beg_stop']);
       var tt=bars[i]['beg_stop'];
       tt=tt+'px';
       bars[i]['beg_element'].style.top=tt;
      // bars[i]['drag']=false;
     }
         
         
         
         
         
         
       }
       
       bars[i]['drag_start']=event.clientY;
       
       

       
       
       
     }
   }

    return false;
}





function startScroll(i,type)
{
  clearInterval(scrollInterval);
  if(type=='top') scrollInterval=setInterval(function () { scrollTop(i,10)}, 100);
  if(type=='bottom') scrollInterval=setInterval(function () { scrollBottom(i,10)}, 100);
}

function stopScroll()
{
  clearInterval(scrollInterval);
}



function scrollTop(i,y)
{
  //alert(bars[i]['container'].scrollWidth);
  var cur=bars[i]['container'].scrollTop;
  var np=cur-y;
  if(np>=0)
  {
    bars[i]['container'].scrollTop=np;
    var tt=bars[i]['beg_element'].style.top.replace("px","")*1-bars[i]['beg_step']*y;
    tt=tt+'px';
    bars[i]['beg_element'].style.top=tt;
  }else {
       clearInterval(scrollInterval);
       bars[i]['container'].scrollTop=0;
      var tt=bars[i]['beg_init'];
      tt=tt+'px';
       bars[i]['beg_element'].style.top=tt;
      // bars[i]['drag']=false;
  }
}

function scrollBottom(i,y)
{
  var cur=bars[i]['container'].scrollTop;
  var np=cur+y;
  //document.getElementById('tmp').innerHTML=bars[i]['container'].scrollHeight+"<br>"+np;
  if(np<=(bars[i]['container'].scrollHeight-bars[i]['container_pos'].height))
  {
    bars[i]['container'].scrollTop=cur+y;
    var tt=bars[i]['beg_element'].style.top.replace("px","")*1+bars[i]['beg_step']*y;
    tt=tt+'px';
    bars[i]['beg_element'].style.top=tt;
  }
  else 
  {
    clearInterval(scrollInterval);
    bars[i]['container'].scrollTop=bars[i]['container'].scrollHeight;
    //alert(bars[i]['beg_stop']);
    var tt=bars[i]['beg_stop'];
    tt=tt+'px';
    bars[i]['beg_element'].style.top=tt;
   // bars[i]['drag']=false;
  }
}