/*
+---------------------------------------------------------------------------+
| Variables                                                                 |
+---------------------------------------------------------------------------+
*/

/**
 * The static with of the content.  This is important becuase without
 * it, layers could not be placed absolutely, they would have to be
 * placed relatively
 */

var WebContentWidth = 762

/**
 * The mouse event handlers do not copy the entire event to a variable 
 * becuase of threading concerns when reading that variable later
 * the atomic Y coordinate of the event is all that is usually needed
 */
var mouseX = 0;
var mouseY = 0;

/**
 * A list of all the scrollpanes is called becuase the global event 
 * handlers must be able to look up which scroll pane is being
 * acted on
 */
var scrollPanes = [];
var scrollers = [];

//-- EVENT CAPTUREING FOR SCROLLER DRAG & DROP---------------------------------
//-----------------------------------------------------------------------------

/**
 * This event handling code can be removed if you do not want to have drag
 * and drop capability for the scroller.  
 * 
 * Event handlers are not assigned for Netscape 4.x
 *
 * IMPORTANT - mouse event coordinates are relative to the browser window
 * but setting the DOM element positions is relative to it's containing
 * DIV.  
 */
if (NS&&!NS4)
{
	document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = doMouseMove;
	
	document.captureEvents(Event.MOUSEDOWN);
	document.onmousedown = doMouseDown;
	
	document.captureEvents(Event.MOUSEUP);
	document.onmouseup = doMouseUp;
}
else if (!NS4)
{
	document.onmousedown = doMouseDownIE;
	document.onmousemove = doMouseMoveIE;
	document.onmouseup   = doMouseUpIE;
}

function doMouseDownIE(){doMouseDown(event);}
function doMouseMoveIE(){doMouseMove(event);}
function doMouseUpIE(){doMouseUp(event);} 


/**
 * Scroll panes are all positioned with absolute coordinates, so when the 
 * window is resized, the scroll pane layers need to be moved so that they 
 * appear to have stayed in the same location
 */
window.onresize = moveScrollPanes;

function moveScrollPanes()
{
	for (var i=0; i<scrollPanes.length; i++)
	{
		//moves a scroll pane and it's associated scroll bar
		DOMElementSetLeftPos(scrollPanes[i].viewport, translateXCoord(scrollPanes[i].x));
		if (scrollPanes[i].scrollBar.scrollableViewportHeight > 0)
			DOMElementSetLeftPos(scrollPanes[i].scrollBar.positioningLayer, translateXCoord(scrollPanes[i].scrollBar.x));

		
		//NS6 apparently has a threading problem that cuses some of the
		//rollover images to display incorrectly after repositioning.
		//this refreshes the imates.
		if(NS6)
		{
			scrollPanes[i].scrollBar.upArrow.rollOff();
			scrollPanes[i].scrollBar.downArrow.rollOff();
		}
	}
	
}


/**
 * Placement calculations are done realtive to the bounded size of the browser
 * content.  This function finds the approperiate coordinate regardless
 * of the contents horozontal centered position
 */
function translateXCoord(x)
{
	var windowWidth = DOMWindowGetInnerWidth();
	
	//NS6 will show hte scrollbar if a layers content is longer than the 
	//viewable area even if that layer is clipped
	if (NS6)
	{
		for (var i=0; i<scrollPanes.length; i++)
		{
			if (scrollPanes[i].content)
				if ((scrollPanes[i].y + DOMElementGetHeight(scrollPanes[i].content)+DOMElementGetTopPos(scrollPanes[i].content) ) > DOMWindowGetInnerHeight())
				{
					windowWidth-=15;
					break;
				}
		}
	}

	if (NS4)
	{
		if (x<windowWidth/2)
			windowWidth +=15;
		else
			windowWidth	-=15;
	}


	//don't translate if the window is smaller than the content
	if (windowWidth < WebContentWidth)
		return x;
	else
		return x	+ (windowWidth/2)	-	(WebContentWidth/2);


	

}



/**
 * when the mouse is released, the user can no longer be dragging
 * the scroll indicator so dragScrolling is set to false for 
 * all scroll panes.
 * 
 * Additionally, netscape will not register events directly to 
 * the scrollLaneLayer so this method checks to see if
 * the user is trying to click/scroll.  IE handles this with 
 * an onMouseUp event handler on the scrollerLane image
 */
function doMouseUp(event)
{
	mouseX = event.clientX;
	mouseY = event.clientY;

	for (var i=0; i<scrollers.length; i++)
		scrollers[i].dragScrolling = false;
	
	if (NS)
	{
		for (var i=0; i<scrollers.length; i++)
		{
			if ((IE && event.srcElement.id == scrollers[i].scrollLaneLayer.id) || (NS && event.target.id == scrollers[i].scrollLaneLayer.id))
				scrollers[i].clickTo();
		}
	}



	//in NS6, the user may have scrolled the 
	//content of a pane to the point where it 
	//chaused the main scrollbar to appear or
	//disapear.  If that is the case then the 
	//scrollbars will be out of posotion and
	//need to be moved.
	if (NS6)
		moveScrollPanes();

}

/**
 * If the users clicked on a scrollIndicatorImage the
 * dragScrolling will be set to true for that
 * ScrollPane.  The scrollPane will then respond to
 * events captured by doMouseMove below
 */
function doMouseDown(event)
{
	mouseX = event.clientX;
	mouseY = event.clientY;
	
	for (var i=0; i<scrollers.length; i++)
	{
		if ((IE && event.srcElement.id == scrollers[i].scrollIndicatorImage.id) || (NS && event.target.id == scrollers[i].scrollIndicatorImage.id))
		{
			scrollers[i].dragScrolling = false;
			break;
		}
	}

}


/**
 * relays new coordinates a scroll pane by setting the
 * global variable mouseY and then calling the 
 * scroll panes clickTo function
 */
function doMouseMove(event)
{
	mouseX = event.clientX;
	mouseY = event.clientY;
	
	for (var i=0; i<scrollers.length; i++)
	{
		if (scrollers[i].dragScrolling)
			scrollers[i].clickTo();
	}


	event.returnValue = false;
	event.cancelBubble = true;    
}


/**
 * ScrollPane and ScrollBar both add themselves
 * to the approperiate list in their constructors
 * if they didn't, they couldn't be acted on by 
 * the global mouse event handlers above
 */
function addScrollBar(bar)
{
	scrollers[scrollers.length] = bar;
}

function addScrollPane(pane)
{
	scrollPanes[scrollPanes.length] = pane;
}

//-- END EVENT CAPTUREING FOR SCROLLER DRAG & DROP-----------------------------
//-----------------------------------------------------------------------------


/**
 * ScrollBar object.  Capable of drawing a scroll bar in a new
 * layer and scrolling the target viewPort.  Without the above
 * mouse event handlers, the ScrollBar will scroll when the user
 * mouse overs the up and down areas but will not allow you to 
 * drag the scroll indicator.
 *
 * @param name - the variable name of this instance of ScrollBar
 * @param viewPortName - the name/id of the layer to be scrolled
 * @param viewPortHeight - OPTIONAL, if this is not passed in
 *		  ScrollBar will try to comput it.
 * @param x - the x position for the scrollbar
 * @param y - the y position for the scrollbar
 * @param height - the height of the ScrollBar minus the up
 * 		  and down arrows
 */
function ScrollBar(name, scrollPane)
{
	this.name = name;

	//creates the rollovers for the up and down arrows

	this.upArrow = new RollOver(this.name+'_scroll_up','../images/html/b_scroll.gif','../images/html/b_scroll_dn.gif' );
	this.downArrow = new RollOver(this.name+'_scroll_down','../images/html/b_scroll2.gif','../images/html/b_scroll2_dn.gif' );

	addRollOver(this.upArrow);
	addRollOver(this.downArrow);

	//rollOverArray[roc++] = ['mainContentScroller_scroll_up',];
	//rollOverArray[roc++] = [];

	this.scrollPane = scrollPane;
	this.viewport   = scrollPane.viewport;
	
	//to make the scroller move faster or slower when the users
	//mouse overs the up and down buttons, increase ot decrease
	//the value of scrollSpeed.
	this.scrollSpeed = 8;
	
	this.x = this.scrollPane.x +  this.scrollPane.width-16;
	this.y = this.scrollPane.y;
	
	this.height = this.scrollPane.height;
	
	//booleans used to start and stop 
	//scrolling actions
	this.dragScrolling   = false;
	this.buttonScrolling = false;
	
	//the ratio of the scrollbar height to the
	//height of the content
	this.scrollRatio = 1;
	
	//the number of pixels that the viewport must be 
	//moved upward for the last line of content to be
	//visible
	this.scrollableViewportHeight = 0;
	this.scrollerIndicatorPosition = 0;
	
	//the DOM objects that make up the scrollBar
	this.positioningLayer     = null;
	this.scrollIndicatorImage = null;
	this.scrollIndicatorLayer = null;
	this.scrollLaneLayer      = null;
	
	//the init method will set this to an offset 
	//for NS4
	this.NS4Offset             = 0;


	//object functions
	this.init                  = ScrollBar_init;
	this.draw                  = ScrollBar_draw;

	this.positionScroller      = ScrollBar_positionScroller
	this.synchViewPort         = ScrollBar_synchViewPort
										  
	this.scroll                = ScrollBar_scroll;
	this.stopScroll            = ScrollBar_stopScroll; 

	this.scrollUp              = ScrollBar_scrollUp;
	this.scrollDown            = ScrollBar_scrollDown;

	this.clickUp               = ScrollBar_clickUp;
	this.clickDown             = ScrollBar_clickDown;
	this.clickTo               = ScrollBar_clickTo;

	
	addScrollBar(this);

}
/**
 * The init method is necessary becuase many values
 * can not be set in the constructor because DOM object
 * have not been written yet.  This should always be called
 * after the draw() method.
 */
function ScrollBar_init()
{
	//now that the document has been written element can be initialized;
	this.positioningLayer         = DOMGetElement(this.name + '_positioning_layer');
	
	if (NS4)
	{
		this.scrollLaneLayer       = this.positioningLayer.layers[this.name + '_scroll_lane_layer'];
		this.scrollIndicatorLayer  = this.scrollLaneLayer.layers[this.name + '_scroll_indicator_layer'];
		
		//NS4 returns event coordinates differently so this offet value is 
		//needed to correct the standard calculations
		this.NS4Offset             = DOMElementGetTopPos(this.scrollIndicatorLayer);
		
		this.scrollerIndicatorPosition = this.NS4Offset;
	}
	else
	{
		this.scrollIndicatorLayer  = DOMGetElement(this.name + '_scroll_indicator_layer');
		this.scrollLaneLayer       = DOMGetElement(this.name + '_scroll_lane_layer');
		this.scrollIndicatorImage  = DOMGetElement(this.name + '_scroll_indicator_image');
	}
	
	this.scrollableViewportHeight = Math.round(DOMElementGetHeight(this.scrollPane.content)) - this.height;
	
	//if the scroll bar is visible, give the bottom a buffer
	if(this.scrollableViewportHeight > 0)
		this.scrollableViewportHeight += 15;

	//this.scrollableViewportHeight = Math.round(DOMElementGetHeight(this.scrollPane.content)) - ( this.height - 200);
	
	//there is more content than can be seen so move the scrollbar layer into view
	if (this.scrollableViewportHeight > 0)
		DOMElementSetLeftPos(this.positioningLayer, translateXCoord(this.x) );

	//update the scrollRation now that the content has been written and the 
	//size of the scrollpane content is available
	this.scrollRatio = this.scrollableViewportHeight/(this.height-50);

}


function ScrollBar_scroll(){this.buttonScrolling = true;}

function ScrollBar_stopScroll(){this.buttonScrolling = false;}

function ScrollBar_clickUp(){ this.positionScroller(this.scrollerIndicatorPosition - (this.scrollSpeed/this.scrollRatio));}

function ScrollBar_clickDown(){ this.positionScroller(this.scrollerIndicatorPosition + (this.scrollSpeed/this.scrollRatio));}

/**
 * Jumps the scroll bar to the given
 * coordinate.
 * 
 * @param pos the Y coordinate to jump to
 * 		 if pos is null then mouseY is used
 */
function ScrollBar_clickTo(pos)
{
	if (!pos)
		pos = mouseY
				
	this.positionScroller(pos - this.scrollPane.y - 25 + DOMWindowGetYOffset());
}


/**
 * Moves the scrollbar up by this.scrollSpeed pixels
 * and sleeps for 50 milliseconds and does it again
 * as long as this.scrolling is true
 *
 * scrollUp is called by an onMouseOver event handler
 * on the up arror image of the scrollbar
 */
function ScrollBar_scrollUp()
{
	if (this.buttonScrolling || this.dragScrolling)
	{
		this.clickUp();
		setTimeout(this.scrollPane.name + '.scrollBar.scrollUp()',50);
	}
}
/**
 * @see ScrollBar_scrollUP
 */ 
function ScrollBar_scrollDown()
{
	if (this.buttonScrolling  || this.dragScrolling)
	{
		this.clickDown(); 
		setTimeout(this.scrollPane.name + '.scrollBar.scrollDown()',50);
	}
}

/** 
 * Checks the bounds of the scrollbar and moves the scroll indicator
 * to 'posotion' if it is in bounds.  It is important that the 
 * mouse is responding to clicks on the indicator image
 * but the indicator layer is what is actually being moved.
 */
function ScrollBar_positionScroller(position)
{
	if (position < 0 + this.NS4Offset)
		position = 0 + this.NS4Offset;
	else

		if (position > this.height-48 + this.NS4Offset)
		position = this.height-48 + this.NS4Offset;

	this.scrollerIndicatorPosition = position;
	DOMElementSetTopPos(this.scrollIndicatorLayer, this.scrollerIndicatorPosition );
	this.synchViewPort();

}


/**
 * Sets the position of the content under the viewport
 */
function ScrollBar_synchViewPort()
{
	var newTop = Math.round((this.scrollerIndicatorPosition-this.NS4Offset) * this.scrollRatio) * -1;
	this.scrollPane.positionViewPort( Math.round(newTop) );
}



function ScrollBar_draw()
{
	if (NS4)
	{
		document.write('<layer id="'+this.name+'_positioning_layer" left="-50" top="'+this.y+'" width="0" height="0">');
		
		document.write('	<a href="javascript:getRollOver(\''+this.name+'_scroll_up\').rollOff();void(0)"  onMouseOver="status=\'Scroll Up\';return true;" onMouseOut="status=\'\';return true" onMouseDown="status=\'Scroll Up\';getRollOver(\''+this.name+'_scroll_up\').rollOn();'+this.scrollPane.name+'.scrollBar.scroll();'+this.scrollPane.name+'.scrollBar.scrollUp();status=\'\';return true" onMouseUp="getRollOver(\''+this.name+'_scroll_up\').rollOff();'+this.scrollPane.name+'.scrollBar.stopScroll();status=\'\';return true">');
		document.write('		<img id="'+this.name+'_scroll_up"   	src="../images/html/b_scroll.gif" 		 width="16" height="16" 	border="0" alt="scroll up" ></a><br>');
		
		document.write('	<a href="javascript:void(0)" onMouseUp="'+this.scrollPane.name+'.scrollBar.clickTo();status=\'\';return true">');
		document.write('		<img id="'+this.name+'_scroll_lane"  	src="../images/html/b_scroll_bg.gif" 	 width="16" height="'+(this.height-32)+'" alt="" border="0"></a><br>');
		
		document.write('		<a href="javascript:getRollOver(\''+this.name+'_scroll_down\').rollOff();void(0);"  onMouseOver="status=\'Scroll Down\';return true;" onMouseOut="status=\'\';return true" onMouseDown="status=\'Scroll Down\';getRollOver(\''+this.name+'_scroll_down\').rollOn();'+this.scrollPane.name+'.scrollBar.scroll();'+this.scrollPane.name+'.scrollBar.scrollDown();status=\'\';return true" onMouseUp="getRollOver(\''+this.name+'_scroll_down\').rollOff();'+this.scrollPane.name+'.scrollBar.stopScroll();status=\'\';return true">');
		document.write('		<img id="'+this.name+'_scroll_down" 	src="../images/html/b_scroll2.gif" 	 width="16" height="16" 	border="0" alt="scroll down" ></a><br>');
		
		document.write('	<layer id="'+this.name+'_scroll_lane_layer" left="0" top="16" width="16" height='+(this.height-32)+'">');
		document.write('		<layer id="'+this.name+'_scroll_indicator_layer" top="0" left="0" width="16" height="16">');
		document.write('			<img id="'+this.name+'_scroll_indicator_image" src="../images/html/b_scroll_selector.gif"  width="16" height="15" alt="" border="0">');  
		document.write('		</layer>');
		document.write('	</layer>');

		document.write('</layer>');
		

	}
	else
	{

		document.write('<div id="'+this.name+'_positioning_layer" align="left" style="position:absolute; top:'+this.y+'px; left:-50px;">');
		
		document.write('	<div id="'+this.name+'_scroll_bar_layer" style="position:absolute; top:0px; left:0px;">');
		
		document.write('		<a href="javascript:getRollOver(\''+this.name+'_scroll_up\').rollOff();void(0)"  onMouseOver="status=\'Scroll Up\';return true;" onMouseOut="getRollOver(\''+this.name+'_scroll_up\').rollOff();status=\'\';return true" onMouseDown="status=\'Scroll Up\';getRollOver(\''+this.name+'_scroll_up\').rollOn();'+this.scrollPane.name+'.scrollBar.scroll();'+this.scrollPane.name+'.scrollBar.scrollUp();status=\'\';return true" onMouseUp="getRollOver(\''+this.name+'_scroll_up\').rollOff();'+this.scrollPane.name+'.scrollBar.stopScroll();status=\'\';return true">');
		document.write('			<img id="'+this.name+'_scroll_up" style="z-index:10;" src="../images/html/b_scroll.gif" width="16" height="16" border="0" alt="scroll up"></a><br>');
		
		document.write('		<a href="javascript:void(0)" onMouseUp="'+this.scrollPane.name+'.scrollBar.clickTo();status=\'\';return true">');
		document.write('			<img id="'+this.name+'_scroll_lane" style="z-index:5;" src="../images/html/b_scroll_bg.gif" width="16" height="'+(this.height-32)+'" alt="" border="0"></a><br>');
		
		document.write('		<a href="javascript:getRollOver(\''+this.name+'_scroll_down\').rollOff();void(0)"  onMouseOver="status=\'Scroll Down\';return true;" onMouseOut="getRollOver(\''+this.name+'_scroll_down\').rollOff();status=\'\';return true" onMouseDown="status=\'Scroll Down\';getRollOver(\''+this.name+'_scroll_down\').rollOn();'+this.scrollPane.name+'.scrollBar.scroll();'+this.scrollPane.name+'.scrollBar.scrollDown();status=\'\';return true" onMouseUp="getRollOver(\''+this.name+'_scroll_down\').rollOff();'+this.scrollPane.name+'.scrollBar.stopScroll();status=\'\';return true">');
		document.write('			<img id="'+this.name+'_scroll_down" style="z-index:10;" src="../images/html/b_scroll2.gif" width="16" height="16" border="0" alt="scroll down"></a><br>');
		
		//netscape was not registering events to the last image in this layer
		//putting in a dummy images solved the problem
		if (NS)
		{
			document.write('	<a href="javascript:void(0)">');
			document.write('		<img src="/../images/html/b_scroll.gif" width="0" height="0"	border="0" alt="scroll up" ></a><br>');
		}


		document.write('		<div id="'+this.name+'_scroll_lane_layer" 		 	  STYLE="position:absolute; top:16px; LEFT:0px; width:16px; height:'+(this.height-32)+'px; Z-INDEX:20; cursor:default\">');
		document.write('			<div id="'+this.name+'_scroll_indicator_layer"	  STYLE="position:absolute; top:0px;  LEFT:0px; width:16px; height:16px; 				 Z-INDEX:20; cursor:default\">');
		document.write('				<img id="'+this.name+'_scroll_indicator_image" STYLE="position:absolute TOP:0px;	 LEFT:0px;	Z-INDEX:50;" src="../images/html/b_scroll_selector.gif"  width="16" height="15" alt="" border="0">');
		document.write('			</div>');
		document.write('		</div>');

		document.write('	</div>');
		document.write('</div>');

	}
	
	

}



/**
 * @param name the variable name used when declairing
 *        the instance of this object.
 * @param x the absolute "position" of the scrollpane
 * 	    relative to the floating bounded content block
 * @param y the absolute y position of the scrollpane
 * @param the width of the viewport + scroll bar
 * @param the height of the viewport, not hte height
 * 		 of the content pane
 */
function ScrollPane(name, x, y, width, height)
{
	this.scrollBar = null;
	this.viewport = null;
	this.content = null;
	this.contentHeight = 0;
	this.name = name;
	this.x = x;
	
	this.y = y;
	this.width = width;
	this.height = height;

	this.positionViewPort = ScrollPane_positionViewPort;
	this.printHeader = ScrollPane_printHeader;
	this.printFooter = ScrollPane_printFooter;
	this.init         = ScrollPane_init;
	this.NS4Offset    = 0;

	addScrollPane(this);
	
}

function ScrollPane_init()
{
	this.viewport = DOMGetElement(this.name + '_viewport_masking_layer');
	
	if (NS4)
	{
		this.content = this.viewport.layers[this.name + '_viewport_content'];
		this.contentHeight = DOMElementGetHeight(this.content);
		this.NS4Offset = DOMElementGetTopPos(this.content);
	}
	else
		this.content  = DOMGetElement(this.name + '_viewport_content'); 

	this.scrollBar = new ScrollBar(this.name + '_sb', this);
	this.scrollBar.draw();
	this.scrollBar.init();
}

function ScrollPane_positionViewPort(position)
{
	DOMElementSetTopPos(this.content, position + this.NS4Offset);
}

function ScrollPane_printHeader()
{
	if (NS4)
	{
		document.write('<layer visibility="show" id="'+this.name+'_viewport_masking_layer" left="'+translateXCoord(this.x)+'" top="'+this.y+'" width="'+(this.width-25)+'" height="'+this.height+'" clip="0,0,'+(this.width-25)+','+this.height+'">');
		document.write('	<layer id="'+this.name+'_viewport_content"  left="0" top="0" class="copy">');
	}
	else
	{
		document.write('<div align="left" id="'+this.name+'_viewport_masking_layer" style="position:absolute; top:'+this.y+'px; left:'+translateXCoord(this.x)+'px; clip:rect(0,'+(this.width-25)+','+(this.height-2)+',0); width:'+(this.width-25)+'px; height:'+this.height+'px; overflow:hidden; ">');
		document.write('	<div id="'+this.name+'_viewport_content" class="copy" style="position:absolute; top:0px; left:10px;">');  
	}
	
}

function ScrollPane_printFooter()
{
	if (NS4)
	{
		//netscape 4 seemed to have a problem rendering layers that had their
		//closing tags printed out by a seperate javascrit call
		//the call to printfooter was modified so that instead of calling
		//printfooter for ns4 the following end layer tages are printed out
		//directly.
		
		//document.write('	</layer>');
		//document.write('</layer>');
		
	}
	else
	{
		
		document.write('	</div>');
		document.write('</div>');  
	}  
}