var expander; 				// object reference for the plus/minus div
var lContainer; 			// object reference for the UL

var currentTop=0;			// the current Y position of the UL
var zInterval = null;		// animation thread interval
var direction;				// direction we're scrolling the UL. 0==up, 1==down
var startTop=0;				// the starting top of the UL

var scrollRate=6;			// initial rate of scrolling
var scrollTick=0;			// keeps track of long we've scrolled so we can slow it down accordingly

var listExpand=true;		// boolean to tell us if we're expanding or contracting the list
var listHeight=72;			// the current height of the UL
var isExpanded=false;		// boolean to denote if the list is expanded or not. initiliazed to true as it will be set to false as soon as the expand control is clicked.

var MAX_SCROLL_TICK=4;		// the maximum value of scrollTick before it's reset
var MAX_LIST_HEIGHT=144;	// maximum height of the list when fully expanded - (8 X 18px)
var MIN_LIST_HEIGHT=72;	// contracted height of the list - 4 X 18px
var REBOUND = -3;			// the value of scrollRate when we stop scrolling
var FAST_EXPAND=5;			// the initial rate of list expansion
var SLOW_EXPAND=1;			// the end rate of expansion
var SPEED_TRANSITION=20;	// when this value + the MAX or MIN list height is reached, we set scrollRate to its slower rate

function scrollingExpandingList() {
	
	/*
		Make visible all elements which use javascript
	*/
	document.getElementById("upArrow").style.background = '#0000AA url("./stmarysgraphics/up.gif") no-repeat center center';
	document.getElementById("downArrow").style.background = '#0000AA url("./stmarysgraphics/down.gif") no-repeat center center';
	document.getElementById("changeSize").style.background = '#0000AA url("./stmarysgraphics/plus.gif") no-repeat center center';
	document.getElementById("description").style.visibility = 'visible';
	document.getElementById("description").style.margin = '0px auto 15px auto';
	document.getElementById("description").style.height = '60px';
		
	up=document.getElementById("upArrow");
	down=document.getElementById("downArrow");

	// apply onclick behaviors to the up arrow, down arrow and expansion control elements
	down.onclick=function(){scrollObjects(0);}
	up.onclick=function(){scrollObjects(1);}
		
	// direction is true if scrolling up - false if scrolling down
	expander=document.getElementById("changeSize");
	expander.onclick=function(){if(!isExpanded)isExpanded=true;changeListSize(); }

	lContainer = document.getElementById("listContainer");

	document.getElementById("nContainer").style.height=MIN_LIST_HEIGHT+"px";
}

function scrollObjects(dir) {
	if(zInterval)return; // already scrolling.
	if(isExpanded)return; // list is expanded. no need to scroll.
	if((!dir && currentTop<=-72) || (dir && currentTop==0))return;  // was 180 as there were more options on menu
																	// 72 represents 4 single line options.
																	// at the moment we only need to scroll once so
																	// only do it if currentTop <=-72
	direction=dir;
	zInterval=setInterval("animate()",20);	// Call animate() every 20 milliseconds
}

// Called until MAX_SCROLL_TICK constant value is reached
function animate() {
	// increment or decrement currentTop based on direction
	if(!direction) {
		currentTop-=scrollRate;
	} else {
		currentTop+=scrollRate;
	}
	
	scrollTick++;
		
	if(scrollTick>=MAX_SCROLL_TICK) {
		scrollRate--; // slow the scroll rate down for a little style
		scrollTick=0;
	}

	lContainer.style.top=currentTop+"px";
	if(scrollRate<=REBOUND) {
		// scroll is finished. clear the interval and reset vars for the next scroll
		clearInterval(zInterval);
		zInterval=null;
		startTop=currentTop;
		scrollTick=0;
		scrollRate=6;
	}
}

function changeListSize() {
	listExpand=listExpand?false:true;
	clearInterval(zInterval);
	zInterval=setInterval("expandList()",20);
}

function expandList() {
	//if(zInterval)return; // already expanding or contracting.
	if(!listExpand) {
		if(listHeight<MAX_LIST_HEIGHT-SPEED_TRANSITION) {
			listHeight+=FAST_EXPAND;
		} else {
			listHeight+=SLOW_EXPAND;
		}
		if(currentTop<0) {
			currentTop+=3; // Expand lContainer element in increments of 3px
			lContainer.style.top=currentTop+"px";
		}
		if(listHeight<MAX_LIST_HEIGHT)document.getElementById("nContainer").style.height=listHeight+"px";

		if(listHeight>=MAX_LIST_HEIGHT && currentTop>=0) {
			clearInterval(zInterval);
			zInterval=null;
			expander.style.backgroundImage="url(./stmarysgraphics/minus.gif)";
			currentTop=0;
			isExpanded=true;
		}
	} else {
		if(listHeight>MIN_LIST_HEIGHT+SPEED_TRANSITION) {
			listHeight-=FAST_EXPAND;
		} else {
			listHeight-=SLOW_EXPAND;
		}
		document.getElementById("nContainer").style.height=listHeight+"px";
		if(listHeight<=MIN_LIST_HEIGHT) {
			clearInterval(zInterval);
			zInterval=null;
			expander.style.backgroundImage="url(./stmarysgraphics/plus.gif)";
			isExpanded=false;
		}
	}
}