var NoJsRemover = {
	initialize: function(){
		$$(".nojs").invoke('removeClassName', 'nojs');
	}
}

Element.addMethods({
	toDropDown: function(element, options) {
		var element = $(element);
		this.options = Object.extend({
			defaultItem: "Select...",
			btnClass: false,
			btnValue: false
		}, options || {});
		
		return new DropDownNav(
			element,
			this.options.defaultItem,
			this.options.btnClass,
			this.options.btnValue
		);
	}
});

var DropDownNav = Class.create({
	initialize: function(elementId, defaultItem, btnClass, btnValue) {
		// element check
		if(!$(elementId)){ return; }
		
		// set up defaults and variables
		this.unorderedList = $(elementId);
		this.defaultItem = defaultItem;
		this.btnClass = btnClass || false;
		this.btnValue = btnValue || false;

		// run listTransformer on all elements that match selector
		this.transformList();

		// insert dropdown
		this.insertDropDown();
		
		// attach event listener to list for navigation
		Event.observe(this.selectNode, "change", this.__change.bindAsEventListener(this));
	},
	setupDefaultOption: function(){
		
		// if the default is a number, set that item as selected
		if(typeof(this.defaultItem) == "number"){
			
			// if the number is greater than the total number of options...
			if(this.defaultItem >= this.optionItems.length){
				this.defaultItem = "Select...";
			} else {
				this.optionItems[this.defaultItem].selected = "true";
			}
		}
		// if the default is a string, insert a new item and set as selected
		if (typeof(this.defaultItem) == "string"){
			this.defaultOptionNode = new Element("option",{
				value: "test"
			}).update(this.defaultItem);
			this.defaultOptionNode.setAttribute("selected", "true");
			this.selectNode.insert({top: this.defaultOptionNode});			
		}
	},
	transformList: function() {

		// create new form and select list
		this.formNode = new Element("form");
		this.selectNode = new Element("select", {id: this.unorderedList.id});
		
		
		//get all <li>'s
		var listItems = this.unorderedList.childElements();
		this.optionItems = [];
		
		// for each <li>...
		listItems.each(function(currentItem){
			//get anchor 
			var itemAnchor = currentItem.down("a");
			
			//create option node
			var optionNode = new Element("option", {
				value: itemAnchor.getAttribute("href")
			}).update(itemAnchor.childNodes[0].nodeValue);

			// attach option node to select list	
			this.optionItems.push(optionNode);
			
		}.bind(this));

		// insert default option
		this.setupDefaultOption();	

		// insert each option		
		this.optionItems.each(function(currentOption){
			this.selectNode.insert({bottom: currentOption});
		}.bind(this));
		
		// if a button class and value are defined...
		if(this.btnClass && this.btnValue) {
			
			//create form button and append nodes to form
			this.buttonNode = new Element("a",{"class": this.btnClass});
			var buttonSpan = new Element("span").update(this.btnValue);
			this.buttonNode.insert({top: buttonSpan});			
			this.formNode.insert({bottom: this.buttonNode});
		}
	},
	insertDropDown: function(){

		// insert select list into form node
		this.formNode.insert({top: this.selectNode});	
		
		// insert form after <ul> and remove <ul>
		this.unorderedList.insert({after: this.formNode});
		this.unorderedList.remove();	
	},
	__change: function(e) {
		
		//get source of change which should be <option>
		var elSrc = Event.element(e); 
		
		//get <option> value
		var elSrcValue = elSrc.value;
		
		// INSERT COOKIE CODE HERE
		
		// if you have a button attach the value to the buttons href
		if(this.buttonNode) {
			this.buttonNode.setAttribute("href", elSrcValue)
		// else, open on change
		} else {
			window.open(elSrcValue,"_self");
		}
	}
});

document.observe("dom:loaded", function(){
	NoJsRemover.initialize();
});