var GE_DropDown = Class.create( {
	containerEl:null,
	titleEl:null,
	ulEl:null,
	items:null,
	mouseOn:false,
	isOpen:false,
	selectedItem:null,
	selectedIndex:null,

	initialize:function(el) {
		this.ulEl = $(el);
		this.items = this.ulEl.immediateDescendants();
		this.containerEl = new Element('div').addClassName('dropdown');
		this.titleEl = new Element('h4').addClassName('dropdown_title');
		
		this.ulEl.wrap( this.containerEl.insert(this.titleEl) );

	   //dropdown event listeners
		var self = this;
	   this.containerEl
		.observe("click", function() { self.toggleSelect(); })
		.observe("mouseover", function() { self.mouseOn = true; })
		.observe("mouseout", function() { self.mouseOn = false; });
	   document.observe("click", function() {
	      if(!self.mouseOn && self.isOpen){
	         self.close();
	      }
	   });

		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];
	}
});