var scroller_collection = new Array ();
var scroller_selObject = void 0;
var scroller_browser = new checkBrowser ();

var Scroller_Style_Vert = 0;
var Scroller_Style_Horz = 1;

function scroller ()
{
	this.instance = scroller_collection.length;
	scroller_collection[this.instance] = this;
	
	this.name = "Scroller_" + this.instance;
	
	this.x = 300;
	this.y = 50;
	this.width = 230;
	this.height =  230;
	this.margin = 0;
	
	this.click_engaged = false;
	this.step = .3;
	
	this.scrollHeight = 0;
	this.scrollWidth = 0;
	this.scrollXOffset = 0;
	this.scrollYOffset = 0;
	
	this.style 	= Scroller_Style_Vert;
	
	this.scrollTrackObj = void 0;
	this.scrollButtonObj = void 0;
	this.ContentWindow = void 0;
	
	// The classes methods
	this.draw = Scroller_Draw;
	this.setPosition = Scroller_Move;
	this.clickMove = Scroller_Click_Move	
	
	// These are the event handlers
	this.click = Scroller_Click;
	this.unclick = Scroller_UnClick;
	this.engage = Drag_Engage;
}

function Scroller_Draw ()
{
	var html = "";

  // Create the HTML to generate the look of the scroll track and buttons (Up,Down/Right,Left)	
	html += "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
	if (this.style == Scroller_Style_Vert)
	{
		this.width = 15;
		this.scrollWidth = 0;
		this.scrollHeight = this.height - 30;
		this.scrollXOffset = this.margin;
		this.scrollYOffset = 14;
		
		html += "<tr><td rowspan=\"3\">"
		html += "<img border=\"0\" src=\"images/pixel.gif\" alt=\"\" width=\"" + this.margin + "\" height=\"1\">";
		html += "</td><td>";
		html += "<a href=\"javascript://\" onmousedown=\"scroller_collection[" + this.instance + "].click(0,-1);\" onmouseup=\"scroller_collection[" + this.instance + "].unclick ();\" onmouseout=\"scroller_collection[" + this.instance + "].unclick ();\" onfocus=\"blur();\"><img src=\"images/scroll_tbut.gif\" width=\"" + this.width + "\" height=\"15\" border=\"0\" alt=\"Up\"></a>";
		html += "</td></tr>";
		html += "<tr><td>";
		html += "<img src=\"images/scroll_vtrack.gif\" width=\"" + this.width + "\" height=\"" + this.scrollHeight + "\" border=\"0\" alt=\"\">";
		html += "</td></tr>";
		html += "<tr><td>";
		html += "<a href=\"javascript://\" onmousedown=\"scroller_collection[" + this.instance + "].click(0,1);\" onmouseup=\"scroller_collection[" + this.instance + "].unclick ();\" onmouseout=\"scroller_collection[" + this.instance + "].unclick ();\" onfocus=\"blur();\"><img src=\"images/scroll_bbut.gif\" width=\"" + this.width + "\" height=\"15\" border=\"0\" alt=\"Down\"></a>";
		html += "</td></tr>";
	}
	else if (this.style == Scroller_Style_Horz)
	{
		this.height = 15;
		this.scrollHeight = 0;
		this.scrollWidth = this.width - 30;
		this.scrollXOffset = 14;
		this.scrollYOffset = this.margin;
		
		html += "<tr><td colspan=\"3\"><img border=\"0\" src=\"images/pixel.gif\" alt=\"\" width=\"1\" height=\"" + this.margin + "\"></td></tr>"
		html += "<tr><td>";
		html += "<a href=\"javascript://\" onmousedown=\"scroller_collection[" + this.instance + "].click(-1,0);\" onmouseup=\"scroller_collection[" + this.instance + "].unclick ();\" onmouseout=\"scroller_collection[" + this.instance + "].unclick ();\" onfocus=\"blur();\"><img src=\"images/scroll_lbut.gif\" width=\"15\" height=\"" + this.height + "\" border=\"0\" alt=\"Left\"></a>";
		html += "</td>";
		html += "<td><img src=\"images/scroll_htrack.gif\" width=\"" + this.scrollWidth + "\" height=\"" + this.height + "\" border=\"0\" alt=\"\"></td>";
		html += "<td>";
		html += "<a href=\"javascript://\" onmousedown=\"scroller_collection[" + this.instance + "].click(1,0);\" onmouseup=\"scroller_collection[" + this.instance + "].unclick ();\" onMouseOut=\"scroller_collection[" + this.instance + "].unclick ();\" onfocus=\"blur();\">";
		html += "<img src=\"images/scroll_rbut.gif\" width=\"15\" height=\"" + this.height + "\" border=\"0\" alt=\"Right\">";
		html += "</td></tr>";
	}
	else
	{
		return (void 0);
	}
	html += "</table>";
	
	// Create the DynLayer to hold the Scroller Track object
	this.scrollTrackObj = new dynLayer ();
	this.scrollTrackObj.content = html;
	this.scrollTrackObj.setPosition (this.x, this.y);
	
	// Create the HTML to generate the look for the Scroller Drag Button
	html = "";
	if (this.style == Scroller_Style_Vert)
	{
		html += "<a href=\"javascript://\" href=\"javascript://\" onMousedown=\"scroller_collection[" + this.instance + "].engage (event)\" onfocus=\"blur();\"><img src=\"images/scroll_dbut.gif\" width=\"15\" height=\"15\" border=\"0\" alt=\"\"></a>";
	}
	else if (this.style == Scroller_Style_Horz)
	{
		html += "<a href=\"javascript://\" href=\"javascript://\" onMousedown=\"scroller_collection[" + this.instance + "].engage (event)\" onfocus=\"blur();\"><img src=\"images/scroll_dbut.gif\" width=\"15\" height=\"15\" border=\"0\" alt=\"\"></a>";
	}
	else
	{
		return (void 0);
	}
	
	// Create the DynLayer to hold the Scroller Drag Button
	this.scrollButtonObj = new dynLayer ();
	this.scrollButtonObj.content = html;
	this.scrollButtonObj.setPosition (this.x + this.scrollXOffset, this.y + this.scrollYOffset);
	
	// Cause the DynLayers to be written to the browser and displayed
	this.scrollTrackObj.draw ();
	this.scrollButtonObj.draw ();
	this.scrollTrackObj.show ();
	this.scrollButtonObj.show ();
}

function Scroller_Click (x, y)
{
	this.click_engaged = true;
	
	this.clickMove (x, y);
}

function Scroller_UnClick ()
{
	this.click_engaged = false;
}

function Scroller_Click_Move (x, y)
{
	var nx = 0;
	var ny = 0;

	if (this.click_engaged == true) 
	{
		nx = x * this.step;
		ny = y * this.step;
		nx += this.scrollButtonObj.x;
		ny += this.scrollButtonObj.y;
		
		this.setPosition (nx, ny);
		
		setTimeout ("scroller_collection[" + this.instance + "].clickMove (" + x +", " + y + ")", 1);
	}
}

function Scroller_Move (clientX, clientY)
{
	if (this.style == Scroller_Style_Vert)
	{
		if ((this.y + 14 <= clientY) && (this.y + this.scrollHeight + 1 >= clientY))
		{
			this.scrollButtonObj.setPosition (this.x + this.scrollXOffset, clientY);
			if (this.contentWindow) this.contentWindow.cssContentArea.top = (clientY-(this.y + 14))/(this.scrollHeight-13) * (this.contentWindow.height - this.contentWindow.contentHeight)
		}
		else if (this.y + 14 > clientY)
		{
			this.scrollButtonObj.setPosition (this.x + this.scrollXOffset, this.y + 14);
			if (this.contentWindow) this.contentWindow.cssContentArea.top = 0;
		}
		else if (this.y + this.scrollHeight + 1 < clientY)
		{
			this.scrollButtonObj.setPosition (this.x + this.scrollXOffset, this.y + this.scrollHeight + 1);
			if (this.contentWindow) this.contentWindow.cssContentArea.top = this.contentWindow.height - this.contentWindow.contentHeight;
		}
	}
	else if (this.style == Scroller_Style_Horz)
	{
		if ((this.x + 14 <= clientX) && (this.x + this.scrollWidth + 1 >= clientX))
		{
			this.scrollButtonObj.setPosition (clientX, this.y + this.scrollYOffset);
			if (this.contentWindow) this.contentWindow.cssContentArea.left = (clientX-(this.x + 14))/(this.scrollWidth-13) * (this.contentWindow.width - this.contentWindow.contentWidth)
		}
		else if (this.x + 14 > clientX)
		{
			this.scrollButtonObj.setPosition (this.x + 14, this.y + this.scrollYOffset);
			if (this.contentWindow) this.contentWindow.cssContentArea.left = 0;
		}
		else if (this.x + this.scrollWidth + 1 < clientX)
		{
			this.scrollButtonObj.setPosition (this.x + this.scrollWidth+ 1, this.y + this.scrollYOffset);
			if (this.contentWindow) this.contentWindow.cssContentArea.left = this.contentWindow.width - this.contentWindow.contentWidth;
		}
	}
}