var GE_DropDown = Class.create({
	initialize: function(el){
		this.containerEl = null;
		this.titleEl = null;
		this.ulEl = null;
		this.items = null;
		this.mouseOn = false;
		this.isOpen = false;
		this.selectedItem = null;
		this.selectedIndex = null;
		this.active = null;
		this.ulEl = $(el);
		this.items = this.ulEl.immediateDescendants();
		this.items.count = this.items.length;
		this.containerEl = new Element("div").addClassName("dropdown");
		this.titleEl = new Element("div").addClassName("dropdown_title");
		this.focusInput = new Element("a", {href: "#ge_dropdown", title: "More options"}).update(" ").addClassName("focus_anchor");
		this.ulEl.wrap(this.containerEl.insert(this.titleEl).insert(this.focusInput));

		//dropdown event listeners
		this.containerEl.observe("click", function(){
			this.toggleSelect();
		}.bind(this)).observe("mouseover", function(e){
			if(this.ulEl.select("a")[this.active]) this.ulEl.select("a")[this.active].removeClassName("active");
			this.mouseOn = true;
		}.bind(this)).observe("mouseout", function(e){
			this.mouseOn = false;
		}.bind(this));
		this.focusInput.observe("focus", function(e){
			this.toggleSelect();
			this.focusInput.observe("keydown", function(e){
				if(e.keyCode == 38){
					e.stop();
					if(this.ulEl.select("a.active").length == 0){
						if(!this.active) this.active = (this.items.count - 1);
						this.ulEl.select("a")[this.active].addClassName("active");
					} else {
						this.ulEl.select("a")[this.active].removeClassName("active");
						(this.active > 0) ? this.active-- : this.active = (this.items.count - 1);
						this.ulEl.select("a")[this.active].addClassName("active");
					}
				} else if(e.keyCode == 40){
					e.stop();
					if(this.ulEl.select("a.active").length == 0){
						if(!this.active) this.active = 0;
						this.ulEl.select("a")[this.active].addClassName("active");
					} else {
						this.ulEl.select("a")[this.active].removeClassName("active");
						(this.active < (this.items.count - 1)) ? this.active++ : this.active = 0;
						this.ulEl.select("a")[this.active].addClassName("active");
					}
				} else if(e.keyCode == 13){
					window.location = this.ulEl.select("a.active")[0].readAttribute("href");
				} else if((e.keyCode == 9) || (e.keyCode == 27)){
					this.close();
					this.focusInput.stopObserving("keydown");
				}
			}.bind(this));
		}.bind(this));
		document.observe("click", function(){
			if(!this.mouseOn && this.isOpen) this.close();
		}.bind(this));
		this.close();
	},
	toggleSelect: function(){
		this.isOpen ? this.close() : this.open();
	},
	close: function(){
		for(var i=0; i<this.items.length; i++){
			this.ulEl.hide();
		}
		this.isOpen = false;
	},
	open: function(){
		for(var i=0; i<this.items.length; i++){
			this.ulEl.show();
		}
		this.isOpen = true;
	}
});



var GE_SelectableDropDown = Class.create(GE_DropDown, {
	initialize:function($super, el){
		$super(el);
		for(var i=0; i<this.items.length; i++){
			var el = this.items[i];
			el.down('a').observe("click", function(e){
				e.stop();
				this.dd.select(this.idx);
			}.bindAsEventListener({dd: this, idx: i}));
		}
	},
	select: function(idx){
		this.selectedIndex = idx;
		this.selectedItem = this.items[idx];
	}
});