function arf_scrollbar(e_id, s_id, height)
{
	var element = document.getElementById(e_id);
	var container = document.getElementById(s_id);
	var sb = { container : container, 
				element : element,
				dragging : false,
				widget : null,
				height: height,
				thumb_height: 0,
				prepDrag : function()
				{
					var p = this;
				
					document.onmousemove = function(e) { p.mousemove(e); };
					document.onmouseup = function() { p.stopDrag(); };
				},
				startDrag : function(event)
				{
					this.dragging = true;
					this.start_drag_point = getMouseXY(event);
				},
				stopDrag : function()
				{
					this.dragging = false;
					this.widget.onmousemove = null;
					document.onmouseup = function(){};
					document.onmousedown = function(){};
					document.onmousemove = function() {};
				},
				mousemove : function(e)
				{
					if (!this.dragging)
					{
						return;
					}
					var p = getMouseXY(e);
					var dy =  p[1] - this.start_drag_point[1];
					var d = YAHOO.util.Dom.getY(this.widget) + dy;
					var r = YAHOO.util.Dom.getRegion(this.widget);

					if (d < r.top)
					{
						d = r.top;
					}

					if (d + this.thumb_height > r.bottom)
					{
						d = r.bottom -this.thumb_height;
					}

					YAHOO.util.Dom.setY(this.widget_thumb, d);
					
					// diff 
					d -= YAHOO.util.Dom.getY(this.widget);
					d = Math.round(d / this.scale);
					YAHOO.util.Dom.setY(this.element, YAHOO.util.Dom.getY(this.container) - d);
				}
				
			};
	container.innerHTML = '<div id="'+e_id+'-sb" class="sb-c">'
							+ '<div id="'+e_id+'-sb-t" class="sb-t">' 
							+ '<div id="'+e_id+'-sb-tt" class="sb-tt"></div>'
							+ '<div id="'+e_id+'-sb-tc" class="sb-tc"></div>'
							+ '<div id="'+e_id+'-sb-tb" class="sb-tb"></div>'
							+ '</div>'
							+'</div>';

	var sbe = document.getElementById(e_id+'-sb');
	sb.widget = sbe;

	sb.widget_thumb = document.getElementById(e_id+'-sb-t');
	sb.widget_center = document.getElementById(e_id+'-sb-tc');
	sb.widget_top = document.getElementById(e_id+'-sb-tt');
	sb.widget_bot = document.getElementById(e_id+'-sb-tb');

	YAHOO.util.Dom.setStyle(sbe, 'height', height + 'px');
	//YAHOO.util.Dom.setY(sb.widget_thumb, 0);

	var p = YAHOO.util.Dom.getXY(element);
	// set the style to pos absolute
	var r = YAHOO.util.Dom.getRegion(element.parentNode);
		
	YAHOO.util.Dom.setStyle(element, 'clip', 'rect(0px,'+(r.right-r.left)+'px,'+(r.bottom - r.top)+'px,0px)');
	YAHOO.util.Dom.setStyle(element, 'overflow', 'visible');
	
	arf_sb_synch(sb)

	sbe.onmouseover = function()
	{
		sb.prepDrag();
		document.onmousedown = function (e) { sb.startDrag(e); };
	}
	sbe.onmouseout = function()
	{
		if (sb.dragging)
		{
			return;
		}

		sb.stopDrag();
	}
}

function arf_sb_synch(sb)
{
	var r = YAHOO.util.Dom.getRegion(sb.element);
	var ch2 = YAHOO.util.Dom.getRegion(sb.container);
	ch = ch2.bottom - ch2.top;
	var s = sb.height / (r.bottom-r.top);
	var h = Math.round(s * ch);
	YAHOO.util.Dom.setStyle(sb.widget_thumb, 'height', ""+h+"px");

	YAHOO.util.Dom.setY(sb.widget_top, ch2.top);
	var r = YAHOO.util.Dom.getRegion(sb.widget_bot);
	var th = r.bottom - r.top;
	
	YAHOO.util.Dom.setY(sb.widget_bot, ch2.top + (h-4) );
	r = YAHOO.util.Dom.getRegion(sb.widget_top);
	th2 = (r.bottom - r.top) - th;
	YAHOO.util.Dom.setY(sb.widget_center, ch2.top +  2);
	YAHOO.util.Dom.setStyle(sb.widget_center, 'height', (h-4)+"px");//(h-(th*2))+"px");
	sb.thumb_height = h;
	sb.scale = s;

}

function getMouseXY(e)
{
	if (e == undefined)
	{
		e = window.event;
	}

	if (e.pageX || e.pageY)
	{
		return [ e.pageX, e.pageY ];
	}
	
	var doc = null;
	if (document.body && document.body.scrollTop != undefined && document.documentElement == undefined)
	{

		doc = document.body;
	}
	else if (document.documentElement != undefined)
	{
		doc = document.documentElement;
	}

	return [e.clientX + doc.scrollLeft - doc.clientLeft,
			e.clientY + doc.scrollTop - doc.clientTop];
}

function getMousePageXY(e)
{
	if (e == undefined)
	{
		e = window.event;
	}

	if (e.pageX || e.pageY)
	{
		return [ e.pageX, e.pageY ];
	}
	
	return [e.clientX + document.documentElement.scrollLeft + document.documentElement.clientLeft,
			e.clientY + document.documentElement.scrollTop + document.documentElement.clientTop];
}

function change_img(elem_or_id, suffix)
{
	elem = elem_or_id;
	if (typeof(elem_or_id == 'string'))
	{
		elem = document.getElementById(elem_or_id);
	}

	var os = elem.src.lastIndexOf('-');
	var ext = elem.src.substr(elem.src.lastIndexOf('.'));
	
	if (os < 0)
	{
		os = elem.src.lastIndexOf('.');
	}

	var base = elem.src.substr(0, os);

	elem.src = base + (suffix.length == 0 ? '' : '-'+suffix) + ext;
	
}