/**
*
* ul-select.js 
* (turns unordered list into fake select-boxes)
*
* built by Simon Jockers for Syzygy Frankfurt, 2009/03/04
*
* based upon elSelect.js by Sergey Korzhov (http://www.cult-f.net)
* 
* requires mootools framework v1.1 (http://docs111.mootools.net/):
*	+ core ( core )
*   + class ( all )
*   + native ( all )
*   + element ( event, filters, selectors )
*   + window ( domready )
*    
*/	


var ulSelect = new Class({
	options: {
		container: false,
		display: false, 
		baseClass : 'ulSelect'
	},
	source : false,
	selectedOption : false,
	dropDown : false,
	optionsContainer : false,
	/*
	pass the options,
	create html and inject into container
	*/
	initialize: function(options){
		this.setOptions(options)		
		if ( !this.options.container ) return;		
		this.optionsContainer = $(this.options.container);
		this.buildFrameWork();
		this.bindEvents(); 		
	},
	
	buildFrameWork : function() {
		var outerContainer = new Element('div').addClass('ul-select').injectBefore(this.optionsContainer);
		this.selectedOption = new Element('div').addClass('selected-option').injectInside( outerContainer );
		this.selectedOption.innerHTML = this.options.display;
		this.dropDown = new Element('div').addClass('dropDown').injectInside( outerContainer );
		this.optionsContainer.injectInside( outerContainer );
		this.optionsContainer.setStyle('display','none');			
		var containerID = this.optionsContainer.getProperty("id");
		this.optionsContainer.setProperty("id", containerID + "-options");
		outerContainer.setProperty("id", containerID);				
	},
	
	bindEvents : function() {
		
		document.addEvent('click', function() { 
			 	if ( this.optionsContainer.getStyle('display') == 'block') {
					this.onDropDown();
				} 
			}.bind(this));	
		
		this.selectedOption.addEvent('click', this.onDropDown.bind(this) );		
	},
	
	onDropDown : function( event ) {
		
		if ( this.optionsContainer.getStyle('display') == 'block') {
			this.optionsContainer.setStyle('display','none');				
			
		} else {
			this.optionsContainer.setStyle('display','block')
			event = new Event( event );
			event.stop();
		}				
	}
	
});
ulSelect.implement(new Events);
ulSelect.implement(new Options);