addEvent(window, "load", ag_scrollItArticles);
var mySlidersArticles = new Array();

function ag_scrollItArticles(){
	//get all the boxes we want to scroll
	sliderBoxes = document.getElementsByClassName("ag-makeScrollArticles");
	//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";

//get the UL inside the box, and move it inside the inner box
		if(document.all){
			theList = sliderBoxes[i].getElementsByTagName("UL")[0];
			innerBox.appendChild(theList);
		}else{
			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;
                track.style.width="9px";
		var trackHeight = Element.getStyle(sliderBoxes[i],"height").replace("px","");	//store for later use
		track.style.height=trackHeight+"px";
		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
		//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";
		//window.alert("box width: " + Element.getStyle(sliderBoxes[i],"width") + "\ntrack width: " + Element.getStyle(track,"width") + "\nIE decrease by: " + ieDecreaseBy)	//helpful debugging alert
		
		//turn off scrolling on the outer div
		sliderBoxes[i].style.overflow="hidden";
	
	
	
	
	
	
	
		//START specific to AG implementation.  Insert two more more divs so I can do something with the background
		//	<div class="ag-superDivOne">
		//		<div class="ag-superDivTwo">
		//			<div class="ag-makeScroll">
		//				<div class="ag-innerBox">
		superDivOne = document.createElement("DIV");
		superDivOne.className = "ag-superDivOne";
		superDivOne.style.width = Element.getStyle(sliderBoxes[i],"width");
if (!sliderBoxes[i].currentStyle){
                superDivOne.style.height = "201px";		//opera specific
		superDivOne.style.overflow = "hidden";	//opera specific
	}	
		superDivTwo = document.createElement("DIV");
		superDivTwo.className = "ag-superDivTwo";
		superDivTwo.style.width = Element.getStyle(sliderBoxes[i],"width");
if (!sliderBoxes[i].currentStyle){
		superDivTwo.style.height = "200px";		//opera specific
		superDivTwo.style.overflow = "hidden";	//opera specific
	}	
		//get parent of current scrolling element
		scrollParent = sliderBoxes[i].parentNode;
		scrollParent.insertBefore(superDivOne,sliderBoxes[i]);
		superDivOne.appendChild(superDivTwo);
		superDivTwo.appendChild(sliderBoxes[i]);
		//END specific to AG implementation.  Insert two more more divs so I can do something with the background
	
	
	
	
	
	
		//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.)
		mySlidersArticles[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=identifyCurrentSliderArticle(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 identifyCurrentSliderArticle(currValue){
	var currSlider=null;
	for(j=0; j<mySlidersArticles.length; j++){
		if(currValue==mySlidersArticles[j].value){
			currSlider=mySlidersArticles[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");
  }
}
































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

function ag_scrollIt(){
	//get all the boxes we want to scroll
	sliderBoxes = document.getElementsByClassName("ag-makeScrollDemo");
	//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-innerBoxDemo";
		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-trackDemo";
		track.id="ag-trackDemo"+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-handleDemo";
		handle.id="ag-handleDemo"+i;
		track.appendChild(handle);
		sliderBoxes[i].appendChild(track);
		
		//now adjust the size of the inner box to make room
		//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;
}