/*********** Accessible DHTML Dropdown with Scrolling *******
--------------------------------------------------------------------
-- Copyright (c) 2004 Julian Guy
--------------------------------------------------------------------
Date: 200500810
Author:  JDG

Desc:  Script to find all occurences of the <select> tag in the document and write out an HTML version that can be styled using CSS. 

Browsers: 	
PC: FF, IE6, IE5.5, NS8,  Mozilla
MAC: Safari, FF

************************************************************/


//- Globals
var iMaxDropDownHeight = 200; // height before dropdown scrolls
var iDropDownWidth = 135; // default width (used if select box has no inline width)
var iLineHeightOfListItems = 20; //
var iNestedOffset = iepc ? 21:20;
//var iNestedOffset = 21; // Difference in width between dropdown and options
var iScrollButtonHeight = 17;
var trackHeight = iMaxDropDownHeight-(iScrollButtonHeight*2);
var listOfDropdownNames = new Array(); // Array holding all id's of created dropdowns

/*************************** SCROLLING FUNCTIONS ****************************/

function fnUp(tn,sl,c1,c2) {						
	t = document.getElementById(tn);	
	s = document.getElementById(sl);							
	nextY = parseFloat(t.style.top.split("px")[0])-5;
	if (mouseIsDown) {
		t.style.top = nextY>0? nextY+"px" : "0px";
		percentToMove = t.style.top.split("px")[0]/c1 * 100;							
		s.style.marginTop = - (percentToMove/100)*c2 +"px";														
		setTimeout("fnUp('"+tn+"','"+sl+"',"+c1+","+c2+")",10);		
	}	
}	
function fnDown(tn,sl,c1,c2) {						
	t = document.getElementById(tn);	
	s = document.getElementById(sl);							
	nextY = parseFloat(t.style.top.split("px")[0])+5;					
	if (mouseIsDown) {
		t.style.top = nextY<=(c1) ? nextY+"px" : c1+"px";	
		percentToMove = t.style.top.split("px")[0]/c1 * 100;							
		s.style.marginTop = - (percentToMove/100)*c2 +"px";														
		setTimeout("fnDown('"+tn+"','"+sl+"',"+c1+","+c2+")",10);		
	}	
}		
document.onmousemove = function(e) { mouseIsDown = false; }
// Function for scrolling layers
function drag(o,trackHeight,barHeight,arrowUp,arrowDown,layerID,layerHeight,viewportHeight)  {				
	// Config
	var targ =  document.getElementById(o)
	targ.style.top = "0px";		
	var scrollingLayer = document.getElementById(layerID);
	var scollingDistance = layerHeight - viewportHeight;				
	targ.onmousedown = function(e) {				
		targ.drag = true;				
		runBodyClick = false;		
		startYMouse = document.all ? event.clientY + document.body.scrollTop: e.pageY;					
		startYBar = parseFloat(targ.style.top.split("px")[0]);						
		document.onmousemove = function(e) {													
			nextYmouse = document.all ? event.clientY + document.body.scrollTop: e.pageY;					
			if (targ.drag) {									
				newY = startYBar+nextYmouse-startYMouse;					
				if (newY < 0) {
				 targ.style.top = "0px";
				 scrollingLayer.style.marginTop = "0px";
				} else if (newY > trackHeight-barHeight) {
					targ.style.top = trackHeight-barHeight+"px";
					scrollingLayer.style.marginTop = - scollingDistance+"px";
				} else {
					targ.style.top = newY+"px";
					scrollingLayer.style.marginTop = - (targ.style.top.split("px")[0]/(trackHeight-barHeight))*scollingDistance +"px";
				}				
			} 					
		}	
		document.onmouseup = function() { targ.drag = false; mouseIsDown = false; }						
	}					
	// arrow buttons
	if (arrowUp && arrowDown) {			
		document.getElementById(arrowUp).onmousedown = function() {			
			runBodyClick = false;		
			mouseIsDown = true;				
			fnUp(targ.id,scrollingLayer.id,trackHeight-barHeight,scollingDistance);
		}
		document.getElementById(arrowDown).onmousedown = function() {		
			runBodyClick = false;
			mouseIsDown = true;				
			fnDown(targ.id,scrollingLayer.id,trackHeight-barHeight,scollingDistance);						
		}			
		document.getElementById(arrowUp).onmouseup = function() {mouseIsDown = false;}	
		document.getElementById(arrowDown).onmouseup = function() {mouseIsDown = false;}	
	} 
			
}

/* ****************************** DROPDOWN BUILD ****************************** */
//-- Loop through select form element using its ID, extract values and text and format as an unordered list	
function fnDoDropdowns() {	
	if (fnBrowser()) {		
			
		//find all <select> tags and build a UL menu for each
		var selectBoxes = document.getElementsByTagName("select");	
			
		iZIndex = 100;	
		for (j=selectBoxes.length-1; j>=0; j--) {							
			var sList = "";
			var targetSelectBox = selectBoxes[j].getAttribute("id");	
			
			// jump menu?
			if (selectBoxes[j].onchange) {						
				onChange = true;										
			} else {
				onChange = false;
			}
					
			/* if select has a width value use it and make an integer */		
			if (selectBoxes[j].style.width) {			
				iWidth = selectBoxes[j].style.width;
				iWidth = iWidth.split("px");
				iWidth = parseFloat(iWidth[0]);				
			} else {
				iWidth = iDropDownWidth; 
			}					
			/* give parent element this width as well or it might just collapse */
			selectBoxes[j].parentNode.style.width = iWidth+"px"; 			
			
			var standardDropdown = document.getElementById(targetSelectBox);
			
			//look for optgroups
			optGroups = standardDropdown.getElementsByTagName("optgroup");	
			if (optGroups.length >0) {
				bOptGroups = true;				
				iCurrentOptGroup = 0;
			} else {
				bOptGroups = false;				
			}
						
			var lis = standardDropdown.getElementsByTagName("option");
		
			//loop through select form and get values and text	
			sList =		"<div id=\"" + targetSelectBox + "Custom\" class=\"dropDown ddhide\" style=\"width:"+iWidth+"px\">"		
			sList += 	"<h1><a href=\"#\" onclick=\"fnDDMenu('" + targetSelectBox + "');return false\">"+ lis[0].firstChild.nodeValue + "</a></h1>";
			sList += 	"<img src=\"images/dropdowns/button.gif\" class=\"openButton\" onclick=\"fnDDMenu('" + targetSelectBox + "');return false\" />";	
			sList += 	"<div class=\"options\" id=\""+targetSelectBox+"OP\">";
			sList += 	"<div class=\"options2\" >"; // just for css	
			sList += 	" <div class=\"viewport\" id=\""+targetSelectBox+"VP\" style=\"width:"+(iWidth-iNestedOffset)+"px\">";
			sList += 	"  <div id=\""+targetSelectBox+"Layer\" class=\"scroll\">";

			var stickyForm = "none";	/*reset */
			for (i=0; i<lis.length; i++) {		
			
				// write optgroups if needed
				if (bOptGroups && (iCurrentOptGroup < optGroups.length)) {
					thisLinkOptGroup = lis[i].parentNode.label;
					currentOptGroupLabel = optGroups[iCurrentOptGroup].label;						
					if(thisLinkOptGroup == currentOptGroupLabel) {
						sList += "<h2 class=\"optGroup\">"+thisLinkOptGroup+"</h2>"						
						iCurrentOptGroup += 1;																
					} 			
				}			
				
				// selected?
				if (lis[i].selected) {
						stickyForm = lis[i].firstChild.nodeValue;	
						sList += "<a class=\"selected\"";					
				} else {
					sList += "<a";
				}						
				if(i==0 && !safari) { sList += "style=\"display:none;\"" }	
				sList += " href=\"#\" onclick=\"fnUpdateSelect('" + targetSelectBox + "','"; 
				sList += lis[i].getAttribute("value");
				sList += "',"+onChange+");return false\">";
				sList += lis[i].firstChild.nodeValue;			
				sList += "</a>\n";								 
			}			
			sList += "</div></div></div>";						
			sList += "</div></div>";					
				
			//create unordered list and insert content of sList
			var el = document.createElement("div");			
			el.className = "por";
			el.innerHTML = sList;				
			standardDropdown.parentNode.insertBefore(el,standardDropdown);				
			document.getElementById(targetSelectBox + "Custom").parentNode.style.zIndex = iZIndex				
			iZIndex++;				
			
			/**************** set up scrolling layers **********************************************/
			var LayerHeight = document.getElementById(targetSelectBox+"Layer").offsetHeight
			if (LayerHeight > iMaxDropDownHeight) {
		
				document.getElementById(targetSelectBox+"VP").style.height = iMaxDropDownHeight+"px";			
				
				sList = "	<div class=\"upButton\" id=\""+targetSelectBox+"arr1\"></div>";
				sList += "	<div class=\"track\" style=\"height:"+trackHeight+"px\">";
				sList += "		<button type=\"button\" class=\"bar\" id=\""+targetSelectBox+"Bar\" ></button>";
				sList += "	</div>";
				sList += "	<div class=\"downButton\" id=\""+targetSelectBox+"arr2\"></div>";
				
				var scrollbar = document.createElement("div");		
				scrollbar.className = "scrollbar";
				scrollbar.style.left = (iWidth-iNestedOffset-20)+"px";		
				scrollbar.innerHTML = sList;
				document.getElementById(targetSelectBox+"OP").appendChild(scrollbar);						
				drag(targetSelectBox+'Bar',trackHeight,17,targetSelectBox+'arr1',targetSelectBox+'arr2',targetSelectBox+'Layer',LayerHeight,iMaxDropDownHeight);	
			}						
			
			/* update array of dropdown ID's for later use */
			listOfDropdownNames.push(el.firstChild.id)
						
			//update to reflect sticky elements
			if (stickyForm != "none") {				
				el.firstChild.firstChild.firstChild.innerHTML = stickyForm;						
				}					
				
		// hide select tag (not display:none as we need the physical presence)
		standardDropdown.style.visibility = "hidden";
		}														
	}		
}	



function fnBu(t,s) {
	t.src = "images/dropdowns/button"+s;
}
runBodyClick = false;
//-- Menu expand/collapse
function fnDDMenu(targetMenuID) {
	
	// Function that closes all but selected menu
	function fnCloseAll() {
		for (i=0; i<listOfDropdownNames.length; i++) {		
			
			if (listOfDropdownNames[i] != targetMenuID+"Custom") {			
				document.getElementById(listOfDropdownNames[i]).className = "dropDown ddhide";	
				fnBu(document.getElementById(listOfDropdownNames[i]).childNodes[1], ".gif");								
			}		
		}			
	}	
	/* Close or open targeted dropdown */
	if (targetMenuID != "closeall") {				
		var targetMenu = document.getElementById(targetMenuID+"Custom");	
		
		if (targetMenu.className == "dropDown ddshow") {
			targetMenu.className = "dropDown ddhide"		
			fnBu(targetMenu.childNodes[1], ".gif");
		} else {			
			targetMenu.className = "dropDown ddshow"		
			fnBu(targetMenu.childNodes[1], "_o.gif");			
		}				
		/* Collapse all other dropdowns */	
		fnCloseAll()						
		runBodyClick = false;
	} else {			
		if (runBodyClick) {			
			fnCloseAll()			
		}
		runBodyClick = true;		
	}	
	
}				
//-- Update proper form element with selected option and highlight choice in list
function fnUpdateSelect(elementID, optionSelected,onChange) {
	var viewer = document.getElementById(elementID+"Custom");	
	var viewerListItems = viewer.getElementsByTagName("a");
	var targetSelectBox = document.getElementById(elementID);	
	var optionTags = targetSelectBox.getElementsByTagName("option");
		for (i=0; i<optionTags.length; i++) {				
			viewerListItems[i+1].className = "none"; /* remove classes from Li tags */	
			optionTags[i].removeAttribute("selected");	
			if (optionTags[i].getAttribute("value") == optionSelected) {					
				optionTags[i].selected = "selected";
				viewerListItems[i+1].className = "selected";			
				viewer.firstChild.firstChild.innerHTML = optionTags[i].firstChild.nodeValue;							
			} 		
		}			
	fnDDMenu(elementID);	
	if(onChange) {		
		targ = "slide"+eval(parseFloat(elementID.split("dd")[1])+3)+"Target";		
		content = "slide"+eval(parseFloat(elementID.split("dd")[1])+3)+"Gallery"+document.getElementById(elementID).value;			
		fnSlide(targ,content);		
	}	
}