//Utility functions for creating drop downs
//This really needs to be modularized much much better



function createHighlightGreen(element) {
	return function(e) {
		element.style.backgroundColor = "#33FF99";
	}
}

function createUnHighlight(element) {
	return function(e) {
		element.style.backgroundColor = "";
		
	}
}
  
function removeDropDown(dropdown) {
	if(dropdown.childNodes) {
		for(var i = 0; i < dropdown.childNodes.length; i++) {
			var optionSpan = dropdown.childNodes[i];
			optionSpan.style.backgroundColor = ""; //unhighlt all the option spans		
		}
	}
	document.getElementsByTagName("body")[0].removeChild(dropdown);
}

//make the span look like a dropdown node
function makeSpanDropDown(spanNode, dropDownFn) {
	var dropdown = document.createElement("img");
	dropdown.src = "generic/sls/resources/dropdown.gif";
	dropdown.style.verticalAlign = "top";		
	dropdown.onmouseover = dropDownFn;
		
	//make the span look like a drop down
	spanNode.appendChild(dropdown);	
	spanNode.style.borderTop = "thin solid #CCCCCC";
	spanNode.style.borderLeft = "thin solid #CCCCCC";	
	spanNode.dropDownFn = dropDownFn;
}	  

//make the item feel like a dropdown option with mouse over and out highlighting
//and a click function
function setupDropDownOptionFeel(optionSpan, clickFn) {		
	optionSpan.onmouseover = createHighlightGreen(optionSpan);
	optionSpan.onmouseout = createUnHighlight(optionSpan);
	optionSpan.onclick = clickFn;
	optionSpan.style.cursor = "pointer";
	optionSpan.highlightFn = optionSpan.onmouseover;
	optionSpan.unhighlightFn = optionSpan.onmouseout;
	optionSpan.clickFn = optionSpan.onclick;
}

//positions the drop down div with the options in it
function createDropDownDiv(spanNode, optionSpans) {
	var dropdownDiv = document.createElement("div");
	dropdownDiv.className = "DropDown";
	
	var rect = getBoundingRect(spanNode);

	var padding = 2;
 	dropdownDiv.style.left = (rect.left - padding) + "px";
 	dropdownDiv.style.top = (rect.top + rect.height) + "px";
 	
 	
	for(var i = 0; i < optionSpans.length; i++) {
		if (_inCar) { // SEAN ADD
			if (i > 9) {
				break;
			}
		}
		var optionSpan = optionSpans[i];
		dropdownDiv.appendChild(optionSpan);
		dropdownDiv.appendChild(document.createElement("br"));
	} 
	
	document.getElementsByTagName("body")[0].appendChild(dropdownDiv);
	
		
	dropdownDiv.onmouseover = function () { metroAreaHelpOpen(false); }
	//dropdownDiv.onmouseout = closeHelpAssistant("metroHelp");
	
	return dropdownDiv;
}


//----------------------------------------------------------------//
//--BEGIN SIMPLE DROP DOWN CREATING UITLITIES --                  
//--the interface to this is just to call createSimpleDropDown()  //
//----------------------------------------------------------------//


//create a simple drop down menu, options and values should be lists
//of strings, and clickFn takes the value which has been clicked on
function createSimpleDropDown(options, values, selected, clickFn) {
	var spanNode = document.createElement("span");
	var selectedSpan = document.createElement("span");
	spanNode.appendChild(selectedSpan);
	selectedSpan.appendChild(document.createTextNode(selected));
	makeSpanDropDown(spanNode, makeDropDownFn(spanNode, selectedSpan, options, values, clickFn));	
	
	_simpleDropDowns.push(spanNode);
	
	return spanNode;
}

//sets the drop down value, but doesn't fire any events
function setDropDownOption(dropdown, option) {
	dropdown.childNodes[0].removeChild(dropdown.childNodes[0].childNodes[0]);
	dropdown.childNodes[0].appendChild(document.createTextNode(option));
}


function makeDropDownFn(spanNode, selectedSpan, options, values, clickFn) {
	return function() {
		if(spanNode.dropDownDiv) {
			return;
		}
	
		var optionSpans = new Array();
		for(var i = 0; i < options.length; i++) {
			var option = options[i];
			var value = values[i];
			
			var optionSpan = document.createElement("span");
			optionSpan.appendChild(document.createTextNode(option));
			setupDropDownOptionFeel(optionSpan, makeOptionClickFn(clickFn, spanNode, selectedSpan, option, value));
			optionSpans[i] = optionSpan;
		}
		var dropDownDiv = createDropDownDiv(spanNode, optionSpans);	
		spanNode.dropDownDiv = dropDownDiv;
		_simpleDropDowns.push(spanNode);
	}
}

function makeOptionClickFn(clickFn, spanNode, selectedSpan, option, value) {
	return function() {
		selectedSpan.removeChild(selectedSpan.childNodes[0]);
		selectedSpan.appendChild(document.createTextNode(option));
		var toRemove = spanNode.dropDownDiv;
		spanNode.dropDownDiv = null;
		removeDropDown(toRemove);
		clickFn(value);
	}
}


var _simpleDropDowns = new Array();

//this should be called whenever the mouse moves, see galaxy.js
function checkSimpleDropDowns(x,y) {
	for(var i = 0; i < _simpleDropDowns.length; i++) {
		var spanNode = _simpleDropDowns[i];
		if(spanNode.dropDownDiv) {
			var dropdownRect = getBoundingRect(spanNode.dropDownDiv);
			var spanRect = getBoundingRect(spanNode);
			
			if(!rectContains(dropdownRect,x,y) && !rectContains(spanRect,x,y)) {
				var toRemove = spanNode.dropDownDiv;
				spanNode.dropDownDiv = null;
				removeDropDown(toRemove);
			}
		}
	}
}