//if ( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ) { addEvent(window, "load", ag_scrollIt); }
//if ( navigator.userAgent.toLowerCase().indexOf("opera") != -1 ) { addEvent(window, "load", ag_scrollIt); }
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++){
		oldHeight = sliderBoxes[i].clientHeight;
		sliderBoxes[i].style.height = "auto";
		if (oldHeight < sliderBoxes[i].clientHeight) {
			sliderBoxes[i].style.height = oldHeight+"px";
			//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;
			handlei=document.createElement("DIV");
			handlei.className="ag-handlei";
			handlei.id="ag-handlei"+i;
			handle.appendChild(handlei);
			track.appendChild(handle);
			sliderBoxes[i].appendChild(track);
			sliderBoxes[i].appendChild(innerBox);
			
			//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.childNodes[1];
					
					//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");
  }
}