/*Adds scroll bars*/

/*
This is the html for the scroll bars. uid is the aperture_div_uid passed in to instantiate the scroll bars
<div id="uid_scroll_bar">
	<div id="uid_js_scroll_up">
	</div>
	<div id="uid_js_scroll_track">
		<div id="uid_js_scroll_track_top"></div>
		<div id="uid_js_scroll_handle">
			<div id="uid_js_scroll_handle_top"></div>
			<div id="uid_js_scroll_handle_middle"></div>
			<div id="uid_js_scroll_handle_bottom"></div>
		</div>
		<div id="uid_js_scroll_track_bottom"></div>
	</div>
	<div id="uid_js_scroll_down">
	</div>
</div>
*/

scroll_bars = function (aperture_div_uid) {
	var uid_div = aperture_div_uid + "_div";
	var uid_content_div = aperture_div_uid + "_content_div";
	var uid_scroll_bar = aperture_div_uid + "_scroll_bar";
	var uid_js_scroll_up = aperture_div_uid + "_js_scroll_up";
	var uid_js_scroll_track = aperture_div_uid + "_js_scroll_track";
	var uid_js_scroll_track_top = aperture_div_uid + "_js_scroll_track_top";
	var uid_js_scroll_handle = aperture_div_uid + "_js_scroll_handle";
	var uid_js_scroll_handle_top = aperture_div_uid + "_js_scroll_handle_top";
	var uid_js_scroll_handle_middle = aperture_div_uid + "_js_scroll_handle_middle";
	var uid_js_scroll_handle_bottom = aperture_div_uid + "_js_scroll_handle_bottom";	
	var uid_js_scroll_track_bottom = aperture_div_uid + "_js_scroll_track_bottom";
	var uid_js_scroll_down = aperture_div_uid + "_js_scroll_down";
	
	var me = new Object();
	me.a = $(uid_div);
	me.aw = Element.getWidth(me.a);
	me.ah = Element.getHeight(me.a);
	//alert(me.aw);alert(me.ah);
	me.c = $(uid_content_div);
	me.cw = Element.getWidth(me.c);
	me.ch = Element.getHeight(me.c);
	me.c.style.top = 0;
	//alert(me.cw);alert(me.ch);
		
	if(me.a && me.c) {
		/*If the html for the scroll bars already exists, then don't bother adding it
		agian.*/
		me.sb = $(uid_scroll_bar);
		if(me.sb) {
			Element.remove(uid_scroll_bar);
		}

		var html = "";
		html += '<div id="' + uid_scroll_bar + '">';
			html += '<div id="' + uid_js_scroll_up + '"></div>';
			html += '<div id="' + uid_js_scroll_track + '">';
				html += '<div id="' + uid_js_scroll_track_top + '"></div>';
					html += '<div id="' + uid_js_scroll_handle + '">';
						html += '<div id="' + uid_js_scroll_handle_top + '"></div>';
							html += '<div id="' + uid_js_scroll_handle_middle + '"></div>';
						html += '<div id="' + uid_js_scroll_handle_bottom + '"></div>';
					html += '</div>';
				html += '<div id="' + uid_js_scroll_track_bottom + '"></div>';
			html += '</div>';
			html += '<div id="' + uid_js_scroll_down + '"></div>';
		html += '</div>';
		new Insertion.After(uid_content_div, html);

		
		me.sb = $(uid_scroll_bar);
		me.sb.style.fontSize = '0px';
		me.sbw = 0;
		me.sbh = 0;
		me.su = $(uid_js_scroll_up);
		me.su.style.fontSize = '0px';
		me.suh = 0;
		me.sd = $(uid_js_scroll_down);
		me.sd.style.fontSize = '0px';
		me.sdh = 0;
		me.st = $(uid_js_scroll_track);
		me.st.style.fontSize = '0px';
		me.stt = $(uid_js_scroll_track_top);
		me.stt.style.fontSize = '0px';
		me.stth = 0;
		me.stb = $(uid_js_scroll_track_bottom);
		me.stb.style.fontSize = '0px';
		me.stbh = 0;
		//Scroll track handle (height is calculated)
		me.sh = $(uid_js_scroll_handle);
		me.sh.style.fontSize = '0px';
		me.sht = $(uid_js_scroll_handle_top);
		me.sht.style.fontSize = '0px';
		me.shth = 0;
		//Scroll handle middle height is calculated
		me.shm = $(uid_js_scroll_handle_middle);
		me.shm.style.fontSize = '0px';
		me.shb = $(uid_js_scroll_handle_bottom);
		me.shb.style.fontSize = '0px';
		me.shbh = 0;
	
		if(me.sb && me.su && me.sd && me.st && me.stt && me.stb && me.sh && me.shm && me.shb)
		{
			//Scrollbar width
			me.sbw = Element.getWidth(me.sb);
			//alert(me.sbw);
			//Scroll Up height
			me.suh = Element.getHeight(me.su);
			//ScrollDown height
			me.sdh = Element.getHeight(me.sd);
			//Scroll Track Top height
			me.stth = Element.getHeight(me.stt);
			//Scroll Track bottom height
			me.stbh = Element.getHeight(me.stb);
			//Scroll Handle Top height
			me.shth = Element.getHeight(me.sht);
			//Scroll Handle Bottom height
			me.shbh = Element.getHeight(me.shb);
				
			//Scrollbar height is the same as content
			me.sbh = me.ch;
			//Scroll track Height
			me.sth = me.ah - me.suh - me.sdh;
			
			//First determine if we need to add the scroll bars
			var add_scroll_y = true;
			var scroll_y = me.a.style.overflowY == 'scroll';
			var auto_y = me.a.style.overflowY == 'auto';
			//alert(me.a.style.overflowY);
			
			//We now have all of the info that we need to create the scroll bars.
			if(scroll_y || auto_y) {
				//alert(me.ah);alert(me.ch);
				if(me.ah < me.ch) {
					//The content is height is higher than the aperature so we need
					//scroll bar whenever the overflow-y of the aperature is auto or scroll.
					add_scroll_y = true;
				}
				else {
					//The content is height is less than the aperature so we need scroll bar
					//whenever the overflow-y of the aperature is scroll.
					if(scroll_y)
						add_scroll_y = true;
				}
			}
			
			//Add the scroll bar
			//alert(add_scroll_y);
			if(add_scroll_y) {
				//Decrease the width of the content so that we can add the scroll bars!
				var top, left, height, middle_height, width, style;
				me.cw = me.aw - me.sbw;
				me.c.style.width = me.cw;
				
				//Position the scroll bar at the RHS of the content div.
				left = me.aw - me.sbw;
				//alert(left);
				height = me.ah;
				me.sb.style.position = 'absolute';
				me.sb.style.top = 0;
				me.sb.style.left = left;
				me.sb.style.height = height;
				me.sb.style.fontSize = '0px';//IE
				me.sb.style.zIndex = 100;
				
				
				//Position the up and down buttons
				//up
				width = me.sbw;
				me.su.style.position = 'absolute';
				me.su.style.top = 0;
				me.su.style.left = 0;
				me.su.style.width = width;
				me.su.style.fontSize = '0px';//IE
				//down
				top = me.ah - me.sdh;
				me.sd.style.position = 'absolute';
				me.sd.style.top = top;
				me.sd.style.left = 0;
				me.sd.style.width = width;
				me.sd.style.fontSize = '0px';//IE
				
				//Position the track
				top = me.suh;
				height = me.sth;
				me.st.style.position = 'absolute';
				me.st.style.top = top;
				me.st.style.left = 0;
				me.st.style.width = width;
				me.st.style.height = height;
				me.st.style.zIndex = 0;
				me.st.style.fontSize = '0px';//IE
				
				//Position the track top
				me.stt.style.position = 'absolute';
				me.stt.style.top = 0;
				me.stt.style.left = 0;
				me.stt.style.width = width;
				me.stt.style.zIndex = 0;
				me.stt.style.fontSize = '0px';//IE
				
				//Position the track bottom
				top = me.sth - me.stbh;
				me.stb.style.position = 'absolute';
				me.stb.style.top = top;
				me.stb.style.left = 0;
				me.stb.style.width = width;
				me.stb.style.zIndex = 0;
				me.stb.style.fontSize = '0px';//IE
				
				//Position the handle
				me.acr = me.ah/me.ch;
				//alert(me.acr);
				if(1.0 <= me.acr) {
					//we don't need a handle
					me.sh.style.display = 'none';
					me.sht.style.display = 'none';
					me.shm.style.display = 'none';
					me.shb.style.display = 'none';
				}
				else {
					height = Math.round(me.sth*me.acr);
					middle_height = height - me.shth - me.shbh;
					if(height < me.stth + me.stbh) {
						height = me.stth + me.stbh;
						
					}
					me.sh.style.position = 'absolute';
					me.sh.style.top = 0;
					me.sh.style.left = 0;
					me.sh.style.width = width;
					me.sh.style.height = height;
					me.sh.style.zIndex = 1;
					me.sh.style.fontSize = '0px';//IE
					
					//Position the handle top and handle bottom
					//handle top
					me.sht.style.position = 'absolute';
					me.sht.style.top = 0;
					me.sht.style.left = 0;
					me.sht.style.width = width;
					me.sht.style.fontSize = '0px';//IE
					
					//handle middle
					top = me.shth;
					me.shm.style.position = 'absolute';
					me.shm.style.top = top;
					me.shm.style.left = 0;
					me.shm.style.width = width;
					me.shm.style.height = middle_height;
					me.shm.style.fontSize = '0px';//IE
					
					
					//handle bottom
					me.shb.style.position = 'absolute';
					me.shb.style.top = me.shth + middle_height;
					me.shb.style.left = 0;
					me.shb.style.width = width;
					me.shb.style.fontSize = '0px';//IE
					
					me.slider_handle = new Control.Slider(uid_js_scroll_handle,uid_js_scroll_track,{axis:'vertical',
						onSlide:function(v) {
							me.c.style.top = -(me.ch - me.ah)*v + 'px';
							//L8R
							//me.c.scrollTop = (me.ch - me.ah)*v;
						},
						onChange:function(v) {
							me.c.style.top = -(me.ch - me.ah)*v + 'px';
							//L8R
							//me.c.scrollTop = (me.ch - me.ah)*v;
						}
					});
					
					me.su.onmousedown = function() {
						me.slider_handle.setValueBy(-me.acr);
					}
					me.sd.onmousedown = function() {
						me.slider_handle.setValueBy(me.acr);
					}
				}
				me.a.style.overflowY = 'hidden';
				me.a.style.overflowX = 'hidden';
				return me;
			}
		}
	}
	return null;
}