addEvent(window, "load", ag_scrollIt);
var mySliders = new Array();

function ag_scrollIt(){
	//get all the boxes we want to scroll
	sliderBoxes = document.getElementsByClassName("ag-makeScroll");
	//build scroll functionality for each scrollable box
	for(i=0; i<sliderBoxes.length; i++){
		//wrap the content in the scrolling box in an intermediate inner box
		innerBox = document.createElement("DIV");
		innerBox.className="ag-innerBox";
		innerBox.innerHTML = sliderBoxes[i].innerHTML;
		sliderBoxes[i].innerHTML="";
		sliderBoxes[i].appendChild(innerBox);
		
		//now build a slider, and put it next to the inner box
		track=document.createElement("DIV");
		track.className="ag-track";
		track.id="ag-track"+i;
		var trackHeight = Element.getStyle(sliderBoxes[i],"height").replace("px","");	//store for later use
		track.style.height=trackHeight+"px";
		track.style.width="10px";
		handle=document.createElement("DIV");
		handle.className="ag-handle";
		handle.id="ag-handle"+i;
		track.appendChild(handle);
		sliderBoxes[i].appendChild(track);
		
		//now adjust the size of the inner box to make room for the slider
		//if the outer box has a border on it (common for scroll boxes) we need to compensate for different box models
		//fortunately, mozilla will work by default - so only if IE  has a border do we care.  Which is good, we can only check borders in IE...
		ieDecreaseBy=0;
		if (sliderBoxes[i].currentStyle){
			var borderWidth = sliderBoxes[i].currentStyle["borderWidth"].replace("px","");	//no way to isolate left and right border (which is all we care about) so we'll just assume consistent border width
			if(!isNaN(borderWidth)){
				ieDecreaseBy=(borderWidth)*2;	//compensate for left and right border
			}
		}
		//NOTE:  IF YOU CARE ABOUT OPERA USERS:  the above border problem affects Opera too.  But Opera does not provide a way to check for borders (like IE does).  So it causes
		//  a problem without providing a solution.  So, IF you care about Opera, AND you have a border around your OUTER box - you need to hardcode the border's total
		//	width here.  For example, if you have a right and left border of 2px each, put the following in the NEXT line :  ieDecreaseBy=4;  Sloppy, but I just can't be bothered with more than one bad browser.
		innerBox.style.width=  ( Element.getStyle(sliderBoxes[i],"width").replace("px","") -  Element.getStyle(track,"width").replace("px","") - ieDecreaseBy) + "px";


		
		//turn off scrolling on the outer div
		sliderBoxes[i].style.overflow="hidden";
		
	
		//layout complete.  if you exit here, you get nice looking box with an inactive scroll bar.
		//create the slider functionality
		mySlider = new Control.Slider(handle.id, track.id, {axis:'vertical',
																minimum:0,
																maximum:trackHeight});
		
		//create an array of sliders for later identification (wouldn't have to do this if the slider object were passed to onChange and onSlide.  Am looking into this.)
		mySliders[i]=mySlider;
												
		//scroll set up is complete. Work through the actual scrolling fuctions
		//run the same function while scrollin, and at the end of scrolling (handles jumping up/down)
		mySlider.options.onSlide = mySlider.options.onChange = function(val){
		//mySlider.options.onChange = function(val){
			var currTrack=identifyCurrentSlider(val);
			if(currTrack){
				outerBox = currTrack.parentNode;
				innerBox = outerBox.firstChild;
				
				//need to get height of innerBox.  mozilla does fine, but IE returns null because it was never set.  Need to use an IE specific way.
				innerHeight=0;	
				if (innerBox.currentStyle){
					innerHeight=innerBox.offsetHeight;									//ie
				}else{
					innerHeight=(Element.getStyle(innerBox,"height").replace("px",""));	//moz
				}
				
				//assume 100 ticks in the scrollbar
				//for each tick need to move:  The amount the inner box overruns the outer box, divided by 100
				var moveRatio =   (    innerHeight   -     (Element.getStyle(outerBox,"height").replace("px",""))   )/100;
				//move the box up (negative) for every TickVal, move the box by moveRatio
				innerBox.style.top = (val*100*moveRatio*-1) + "px";
			}
	    };
	}
}



//---the following goes away if I can find a way to get a pointer to the slider (or any part of the slider)
//don't know what slider changed.  So go through them all and find one where the value = the value we just received.  that's our slider. Fortunately, the value is 16 digits so odds are we wont' get the wrong one.
function identifyCurrentSlider(currValue){
	var currSlider=null;
	for(j=0; j<mySliders.length; j++){
		if(currValue==mySliders[j].value){
			currSlider=mySliders[j];
			break;
		}
	}
	return currSlider.track;
}


// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
function addEvent(elm, evType, fn, useCapture){
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}