// JavaScript Document
// Copyright (c) 2009 Rasbora Media, LLC

var dropOpen = "";

// initialize select box replacement
function dropGo(id, auto) {
	
	// hide select element
	$(id).hide();
	
	// initialize variables
	var current = "";
	
	// insert dropdown elements
	$(id).insert({ "after":"<div id='" + id + "dropwrapper' class='dropwrapper'></div>" });
	$(id + "dropwrapper").insert({ "bottom":"<div id='" + id + "dropbutton' class='dropbutton' onclick='dropOptions(" + '"' + id + '"' + ");'></div>" });
	$(id + "dropwrapper").insert({ "bottom":"<div id='" + id + "droptext' class='droptext' onclick='dropOptions(" + '"' + id + '"' + ");'></div>" });
	$(id + "dropwrapper").insert({ "bottom":"<div class='clear'></div>" });
	//$(id + "dropwrapper").insert({ "bottom":"<div id='" + id + "dropoptions' class='dropoptions' style='display:none;'><ul id='" + id + "droplist' class='droplist'></ul></div>" });
	$("extra").insert({ "after":"<div id='" + id + "dropoptions' class='dropoptions' style='postion:absolute;display:none;'><ul id='" + id + "droplist' class='droplist'></ul></div>" });
	
	// position dropdown options
	var coordinates = $(id + "droptext").viewportOffset();
	$(id + "dropoptions").setStyle({ top:(coordinates[1]+47) + "px", left:coordinates[0] + "px" });
	
	// get select options
	var selectOptions = $(id).childElements();
	
	// create unordered list from select options
	selectOptions.each(function(item) {
		
		// determine if the option is selected
		if(item.selected == true) {
			
			// set the current class
			current = "class='current'";
			
			// display the current option in the text area
			$(id + "droptext").update(item.text);
		}
		
		else { current = ""; }
		
		// insert list item
		$(id + "droplist").insert({ "bottom":"<li><a href='#' " + current + " onclick='dropSelect(" + '"' + id + '","' + item.value + '"' + ",this);return false;'>" + item.text + "</a></li>" });
	});
	
	// automatically adjust the width based on the options list
	if(auto) {
		
		// determine relevant widths
		var optionsWidth = $(id + "dropoptions").getWidth();
		var buttonWidth  = $(id + "dropbutton").getWidth();
		
		// adjust width of dropdown wrapper and options list
		$(id + "dropwrapper").setStyle({ width:(optionsWidth + buttonWidth) + "px" });
	}
	
	// adjust width of options list
	$(id + "dropoptions").setStyle({ width:$(id + "droptext").getWidth() + "px" });
}

function dropOptions(id) {
	
	// close open dropdown if necessary
	if(dropOpen) dropClose(dropOpen);
	
	// set open dropdown value
	dropOpen = id;
	
	// display dropdown options
	$(id + "dropoptions").show();
	
	// add page overlay
	$("overlay").insert({ "after":"<div id='" + id + "dropoverlay' class='dropoverlay' onclick='dropClose(" + '"' + id + '"' + ");'></div>" });
}

function dropClose(id) {
	
	// clear open dropdown value if necessary
	if(dropOpen == id) dropOpen = "";
	
	// hide dropdown options
	$(id + "dropoptions").hide();
	
	// remove page overlay
	$(id + "dropoverlay").remove();
}

function dropSelect(id, option, clicked) {
	
	// update text area
	$(id + "droptext").update(clicked.innerHTML);
	
	// set value of hidden select element
	$(id).value = option;
	
	// get list items
	var elements = $(id + "droplist").childElements()
	
	// remove the current status from each of the elements
	elements.each(function(item) { item.firstDescendant().removeClassName("current"); });
	
	// add the current class to the list item that was clicked
	$(clicked).addClassName("current");
	
	// hide the select options
	dropClose(id);
}