if (!document.trace) {
	this.trace = function(output) {
		//if (console.log && output) console.log(output);
	}
}

/**
 * Drop-Down Selector
 * @uses mootools-release-1.11.js
 */

var DropDownSelector = new Class({
	
	initialize : function(contentElement, styles) {
		trace('DropDownSelector.initialize()');
		
		if (!contentElement) return;
		
		this.view = contentElement;
		
		this.SELECTED_PREFIX = "<span style='font-size: 0.76em; color:#0cf'>Showing:</span> ";
		this.STATE_FOCUS = "onFocusState";
		this.STATE_BLUR = "onBlurState";
		
		this.PADDING_TOP = 3;
		this.PADDING_LEFT = 5;
		this.BLURRED_HEIGHT = 16;
		this.ITEM_HEIGHT = 15;
		this.ITEM_PAD_TOP = 10;
		this.ITEM_PAD_MIDDLE = 1;
		this.ITEM_PAD_BOTTOM = 0;
		
		
		this.modelKeys = [];
		this.modelValues = [];
		this.parseContent(contentElement);
		this.hash = this.modelValues.associate(this.modelKeys);
		this.currentKey = this.modelKeys[0];
		
		this.styles = (styles) ? styles : {x:0, y:0, width:320};

		this.blurredState = {};	
		this.focusedState = {};	
		this.rendered = false;
		this.hasFocus = false;
		this.isFocused = false;
		
		this.render(contentElement);
	},
	
	
	parseContent : function(contentElement) {
		trace('DropDownSelector.parseContent()');
		
		var children = contentElement.getChildren();
		
		for (var i = 0; i < children.length; ++i) {
			this.modelKeys.push(children[i].getText());
			this.modelValues.push(children[i].getProperty('class'));;
		}
	},
	
	
	render : function(contentElement) {
		trace('DropDownSelector.render()');
		
		var scope = this;
		
		// define common styles...
		
		var sharedStyles = 'overflow: hidden; position: absolute; z-index: 10; top: ' + this.styles.y + 'px; left: ' + this.styles.x + 'px; width: ' + (this.styles.width - this.PADDING_LEFT) + 'px; margin: 0; padding-left: ' + this.PADDING_LEFT + 'px; padding-top: ' + this.PADDING_TOP + 'px; line-height: 1em; font-size: 1.04em; text-transform: uppercase; background: url(' + sn_img_base_url + '/fill/000000_90.png); color: #fff;';
		
		// create blurred state element...
		
		var blurredState = new Element('div');
		blurredState.setStyles(sharedStyles);
		blurredState.setStyle('height', this.BLURRED_HEIGHT);
		blurredState.injectAfter(contentElement);
		
		// bind events to blurred state...
		
		blurredState.addEvent('mousedown', this.onBlurredMouseDown.bindWithEvent(this));
		
		// keep reference...
		
		this.blurredState = blurredState;
		
		// create focused state element...
		
		var focusedState = new Element('div');
		focusedState.setStyles(sharedStyles);
		focusedState.injectAfter(blurredState);
		
		// bind events to focused state...
		
		focusedState.addEvent('mouseover', this.onFocusedMouseOver.bindWithEvent(this));
		focusedState.addEvent('mouseout', this.onFocusedMouseOut.bindWithEvent(this));
		
		// keep reference... 
		
		this.focusedState = focusedState;
		
		// create child elements of focused state...
		
		var list = new Element('div');
		list.setStyles('padding: 0; margin: 0;');
		
		// child element - current selection label...
		
		var label = new Element('div');
		label.setStyle('height', this.ITEM_HEIGHT + this.ITEM_PAD_TOP + 'px');
		label.injectInside(list);
		label.addEvent('click', this.onLabelClick.bindWithEvent(this));
		
		// child elements - filter selection items...
		
		var length = this.modelKeys.length;
		
		for (var i = 0; i < length; ++i) {
		
			var item = new Element('div');
			
			item.setStyle('overflow', 'hidden');
			item.setStyle('width', this.styles.width + 'px');
			item.setStyle('line-height', '1em');
			
			if (i < length - 1) {
				item.setStyle('height', this.ITEM_HEIGHT + this.ITEM_PAD_MIDDLE + 'px');
			} else {
				item.setStyle('height', this.ITEM_HEIGHT + this.ITEM_PAD_BOTTOM + 'px');
			}
			
			item.setText(this.modelKeys[i]);
			item.injectInside(list);
			
			// bind events to each item...
			
			item.addEvent('mouseover', function(e) { 
				var fade = new Fx.Style(this, 'color', {duration: 100}).start(this.getStyle('color'), '#0cf');
				this.setStyle('cursor', 'pointer');
			});
			
			item.addEvent('mouseout', function(e) {
				var fade = new Fx.Style(this, 'color', {duration: 400}).start(this.getStyle('color'), '#fff');
				this.setStyle('cursor', 'default');
			});
			
			item.addEvent('mouseup', this.onItemSelect.bindWithEvent(this));
		}
		
		list.injectInside(focusedState);
		
		//
		
		this.blurredHeight = this.BLURRED_HEIGHT;
		this.focusedHeight = this.focusedState.getCoordinates().height;
		//this.blurredState.setStyle('height', this.focusedHeight + 'px');
		
		
		// initialize view state...
		
		this.setState();
	},
	
	
	onDocumentMouseDown : function(e) {
		if (this.isFocused && !this.hasFocus) this.setState(this.STATE_BLUR);
	},
	
	
	onBlurredMouseDown : function(e) {
		e.preventDefault();
		e.stopPropagation();
		this.setState(this.STATE_FOCUS);
	},
	
	
	onFocusedMouseOver : function(e) {
		this.hasFocus = true;
	},
	
	
	onFocusedMouseOut : function(e) {
		this.hasFocus = false;
	},
	
	
	onItemSelect : function(e) {
		e.preventDefault();
		e.stopPropagation();
		this.setSelection(e.target);
	},
	
	
	onLabelClick : function(e) {
		e.preventDefault();
		e.stopPropagation();
		this.setState(this.STATE_BLUR);
	},
	
	
	setState : function(state) {
		trace('DropDownSelector.setState(' + state + ')');
		
		var currentHeight;
		
		switch (state) {
		
			case this.STATE_FOCUS :
				
				currentHeight = this.blurredState.getCoordinates().height;
				
				this.focusedState.setStyle('display', 'block');
				this.focusedState.setStyle('height', currentHeight + 'px');
				
				var grow = new Fx.Style(this.focusedState, 'height', {duration: 300, transition: Fx.Transitions.Back.easeOut }).start(currentHeight, this.focusedHeight);
				
				this.blurredState.setStyle('display', 'none');
				
				this.hasFocus = true;
				this.isFocused = true;
				
				document.addEvent('mousedown', this.onDocumentMouseDown.bindWithEvent(this));
				
				break;
				
			case this.STATE_BLUR : 
			default :
				
				if (state) currentHeight = this.focusedState.getCoordinates().height;
				else currentHeight = this.blurredHeight;
				
				this.blurredState.setStyle('display', 'block');
				this.blurredState.setStyle('height', currentHeight + 'px');
				
				var shrink = new Fx.Style(this.blurredState, 'height', {duration: 60, transition: Fx.Transitions.Sine.easeOut }).start(currentHeight, this.blurredHeight);
				
				this.focusedState.setStyle('display', 'none');
				
				this.hasFocus = false;
				this.isFocused = false;
				
				document.removeEvent('mousedown', this.onDocumentMouseDown.bindWithEvent(this));
				
				break;
		}
		
		this.updateLabel();
	},
	
	
	setSelection : function(selectedItem) {
		trace('DropDownSelector.setSelection(' + selectedItem + ')');
		
		var itemIndex = this.focusedState.getFirst().getChildren().indexOf(selectedItem) - 1;
		
		this.currentKey = this.modelKeys[itemIndex];
		var value = this.hash[this.currentKey];
		
		this.view.fireEvent('onSetSelection', value);
		
		this.setState(this.STATE_BLUR);
	},
	
	
	getKeyByLabel : function(selectedKey) {
	
		for (var i = 0; i < this.modelKeys.length; ++i) {
			trace(this.modelKeys[i] + " : " + selectedKey);
			if (this.modelKeys[i] == selectedKey) return this.modelKeys[i];
		}
		return 0;
	},
	
	
	updateLabel : function() {
		var label = this.SELECTED_PREFIX + this.currentKey;
		this.blurredState.setHTML(label);
		this.focusedState.getFirst().getFirst().setHTML(label);
	},
	
	
	toString : function() {
		return "[DropDownSelector]";
	}
});