/*
var sHTML=new String('<DIV ID="scrDivs">');
    sHTML+='<IMG SRC="/gfx/arrow_up.gif" ID="scrUp" WIDTH="20" HEIGHT="20" onmousedown="bMouseIsUp=false;scrollUp()">';
    sHTML+='<IMG SRC="/gfx/arrow_down.gif" ID="scrDn" WIDTH="20" HEIGHT="20" onmousedown="bMouseIsUp=false;scrollDown()">';
    sHTML+='<DIV ID="scrollBar" onmousedown="grab()"><IMG HEIGHT="1"></DIV>';
    sHTML+='<DIV ID="scrollBack" onclick="largeScroll()"></DIV></DIV>';
   
document.writeln(sHTML);
*/
/** colors **/
var sBarColor="orange";
var sDivBorder="blue";
var sBarHotBorder="pink";
var sBarColdBorder="red";
var sBack="yellow";
var sBackBorder="black";
var arwColor="";

/** elements **/
var sDiv = document.getElementById('content');
var e = sDiv;
var scrUpEl = document.getElementById('scrUp');
var scrDnEl = document.getElementById('scrDn');
var scrollBackEl = document.getElementById('scrollBack');
var scrollBarEl = document.getElementById('scrollBar');

var iArwHeight=scrUpEl.offsetHeight;
var iArwWidth=scrUpEl.offsetWidth;
var iScrHeight=sDiv.offsetHeight;

var iSBarDist;
var iSDivDist;
var fSBarRatio;
var fScrRatio;

var iCurY=0; 
var iNewY;
var iDistY;
var iHighY=null
var iLowY=null
var oSBar=null;
var bMouseIsUp=true;

var x = 0;
var y = 0;

while (e.tagName != "BODY") {
	
	x = x + e.offsetLeft;
	if (e.clientLeft)
		x -= e.clientLeft;
		
    y = y + e.offsetTop;
    if (e.clientTop)
    	y -= e.clientTop;
    	
    e = e.offsetParent;
}
    
var iPosX=x+sDiv.offsetWidth-1; 
var iPosY=y+1;

scrUpEl.style.top=iPosY;
scrUpEl.style.left=iPosX;

scrDnEl.style.top = iPosY + 20; // iPosY+iScrHeight-iArwHeight;
scrDnEl.style.left = iPosX;

scrollBackEl.style.pixelLeft=iPosX;
scrollBackEl.style.pixelTop=iPosY+iArwHeight;
scrollBackEl.style.pixelHeight=iScrHeight-(iArwHeight*2); 
scrollBackEl.style.pixelWidth=iArwWidth;

scrollBarEl.style.backgroundColor=sBarColor;
scrUpEl.style.backgroundColor=arwColor;
scrDnEl.style.backgroundColor=arwColor;
sDiv.style.borderColor=sDivBorder;
scrollBarEl.style.borderColor=sBarColdBorder;
scrollBackEl.style.backgroundColor=sBack;
scrollBackEl.style.borderColor=sBackBorder;

scrollBarEl.style.visibility = 'hidden';
scrollBackEl.style.visibility = 'hidden';

var ss=scrollBarEl.style;

function refreshScr() 
{
    fSBarRatio=(sDiv.offsetHeight/sDiv.scrollHeight);
   
    if (fSBarRatio>=1) 
    {
     	scrDnEl.style.visibility = 'hidden';
    	scrUpEl.style.visibility = 'hidden';
    }	
    else 
    {
        document.getElementById('scrDivs').style.display = "block";
        
        scrDnEl.style.visibility = 'visible';
    	scrUpEl.style.visibility = 'visible';
    	
        iScrHeight=sDiv.offsetHeight;
        scrollBarEl.style.pixelLeft 	= iPosX;
        scrollBarEl.style.pixelTop 		= iPosY + iArwHeight;
        scrollBarEl.style.pixelHeight 	= scrollBackEl.offsetHeight * fSBarRatio;
        scrollBarEl.style.pixelWidth 	= iArwWidth;
        iSBarDist = scrollBackEl.offsetHeight-scrollBarEl.offsetHeight;
        iSDivDist = sDiv.scrollHeight - sDiv.offsetHeight;
        fScrRatio = iSBarDist / iSDivDist;
    }
}

function largeScroll() {
    if (event.clientY>scrollBarEl.style.pixelTop)
        sDiv.scrollTop+=(iScrHeight-14);
    else sDiv.scrollTop+=0-(iScrHeight-14); 
}

function scrollDown(){
    if (bMouseIsUp) return;
    sDiv.scrollTop+=10;
    setTimeout("scrollDown()",50);
    }

function scrollUp(){
    if (bMouseIsUp) return;
    sDiv.scrollTop+=-10;
    setTimeout("scrollUp()",50);
    }

function grab(){ 
    oSBar=event.srcElement;
    iCurY=event.clientY; 
    oSBar.style.borderColor=sBarHotBorder; 
    bMouseIsUp=false;
}

function move(){
    if (!oSBar) return; 
    if (((!iHighY)
            ||(iHighY<=event.clientY))
        &&((!iLowY)
            ||(iLowY>=event.clientY))){
        iHighY=null;
        iLowY=null;
        oSBar.style.borderColor=sBarHotBorder;
        iNewY=event.clientY;
        iDistY=iNewY-iCurY;
        iCurY=iNewY;
        if ((oSBar.offsetTop+iDistY)<iPosY+iArwHeight){
            oSBar.style.pixelTop=iPosY+iArwHeight; 
            sDiv.scrollTop=0;
            iHighY=iNewY;
            }
        else if ((oSBar.style.pixelTop+oSBar.offsetHeight+iDistY)>scrDnEl.offsetTop){ 
            oSBar.style.pixelTop=(scrDnEl.offsetTop-oSBar.offsetHeight); 
            sDiv.scrollTop=((scrollBarEl.style.pixelTop-(iArwHeight+iPosY))/fScrRatio);
            iLowY=iNewY;
            }
        else {
            oSBar.style.pixelTop+=iDistY;
            sDiv.scrollTop=((oSBar.offsetTop-(iArwHeight+iPosY))/fScrRatio);
            }
        }
    }

function drop(){
    scrollBarEl.style.borderColor=sBarColdBorder;
    oSBar=null;
    iHighY=null;
    iLowY=null;
    bMouseIsUp=true;
    }

function killEvent(){ 
    return false;
    }

function synch()
{
    if (!oSBar) scrollBarEl.style.pixelTop=(sDiv.scrollTop*fScrRatio)+iArwHeight+iPosY;
}

document.onmousemove=move;
document.onmouseup=drop;
sDiv.onscroll=synch;
scrollBarEl.onselectstart=killEvent;
refreshScr();