// JavaScript Document

var SkinnedSelect = new Class({
	options: {
		className: 'skinSelect',
		showDelay: 100,
		hideDelay: 100,
		parentDiv:'',
		onShow: function(el){
			el.setStyle('visibility', 'visible');
		},
		onHide: function(el){
			el.setStyle('visibility', 'hidden');
		},
		onOver: function(el){
			el.addClass(this.options.className + "-option_over");
		},
		onOut: function(el){
			el.removeClass (this.options.className + "-option_over");
		},
		onSelectItem:function(el){
			
		}
	},
	
	initialize: function(elements, options){
		this.setOptions(options);
		$$(elements).each(this.buildSelect, this);
		if (this.options.initialize) this.options.initialize.call(this);
	},
	
	buildSelect: function(el){
		this.selectContainer = new Element('div', {
			'class': this.options.className + '-container',
			'styles': {
				'display':'inline',
				'position': 'absolute',
				'cursor': 'pointer',
				'overflow':'hidden',
				'z-index': el.getStyle('z-index')
			}
		}).injectBefore(el);
		this.selectContainer.refSelect=el
		this.selectContainer.refClass=this
		this.position(el)
		
		//window.addListener('resize',this.handleResizeEvent.bind(this.selectContainer));
		
		this.selectedTitleHolder = new Element('div', {'class': this.options.className + '-selected'}).inject(this.selectContainer)
		
		this.selectedTitleHolderLeft	= new Element('div', {'class': this.options.className + '-selected-left'}).inject(this.selectedTitleHolder).setHTML(" ")
		this.selectedTitleHolderRight 	= new Element('div', {'class': this.options.className + '-selected-right'}).inject(this.selectedTitleHolder).setHTML(" ")
		this.selectedTitleHolderCenter 	= new Element('div', {'class': this.options.className + '-selected-center'}).inject(this.selectedTitleHolder)
	
		this.wrapper = new Element('div', {'class': this.options.className + '-panel'}).inject(this.selectContainer);

		for(var j=0; j < el.options.length; j++) {
			var title = new Element('div', {'class': this.options.className + '-option'}).inject(this.wrapper);
			title.refSelect = el;
			title.refOption = el.options[j];
			title.setHTML(el.options[j].text);
			if(el.options[j].selected == true){
				this.selectedTitleHolderCenter.setHTML(el.options[j].text);
			}
			title.addEvent('mouseenter', 	function(event){this.fireEvent('onOver', 		[event.target])}.bind(this));
			title.addEvent('mouseleave', 	function(event){this.fireEvent('onOut', 		[event.target])}.bind(this));
			title.addEvent('click',			function(event){var ev = event.target?event.target:event.srcElement; this.fireEvent('onSelectItem', [ev]);this.SelectItem(ev)}.bind(this));
			//title.addEvent('click',			function(event){this.printEvent(event)}.bind(this));
		}
		
		this.panelHeight = this.wrapper.scrollHeight;
		
		this.wrapper.setStyles({'height':0})
		el.setStyles({
			'visibility': 'hidden'
		});
		
		this.selectedTitleHolder.addEvent('mouseenter', function(event){
			this.start(this.wrapper);
		}.bind(this));
		
		this.selectContainer.addEvent('mouseleave', function(event){
			this.end(this.wrapper);
		}.bind(this));
		
	},
	
	handleResizeEvent:function(e){
		this.refClass.position(this.refSelect)
	},
	
	position: function(element){
		var pos = element.getPosition();
		/*this.selectContainer.setStyles({
			'left': pos.x,
			'top': pos.y
		});*/
	},
	
	update: function(el){
		//this.selectContainer.empty();
		this.wrapper.empty();
		this.selectedTitleHolderCenter.setHTML("");
		//this.wrapper = new Element('div', {'class': this.options.className + '-panel'}).inject(this.selectContainer);
		for(var j=0; j < el.options.length; j++) {
			var title = new Element('div', {'class': this.options.className + '-option'}).inject(this.wrapper);
			title.refSelect = el;
			title.refOption = el.options[j];
			title.setHTML(el.options[j].text);
			if(el.options[j].selected == true){
				this.selectedTitleHolderCenter.setHTML(el.options[j].text);
			}
			title.addEvent('mouseenter', 	function(event){this.fireEvent('onOver', 		[event.target])}.bind(this));
			title.addEvent('mouseleave', 	function(event){this.fireEvent('onOut', 		[event.target])}.bind(this));
			title.addEvent('click',			function(event){var ev = event.target?event.target:event.srcElement; this.fireEvent('onSelectItem', [ev]);this.SelectItem(ev)}.bind(this));
			//title.addEvent('click',			function(event){this.printEvent(event)}.bind(this));
		}
		this.panelHeight = this.wrapper.getSize().scrollSize.y;
		this.wrapper.setStyles({'height':0})
		//alert("heelahola");	
	},
	
	start: function(el){
		$clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this,[el]);
	},

	end: function(el){
		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this,[el]);
	},
	
	show: function(el){
		if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
		this.fireEvent('onShow', [el]);
	},

	hide: function(el){
		this.fireEvent('onHide', [el]);
	},
	
	SelectItem: function(el){
		for(var j = 0; j < el.refSelect.options.length; j++) {
			if(el.refSelect.options[j]==el.refOption) {
				el.refSelect.options[j].selected = "selected";
				this.selectedTitleHolderCenter.setHTML(el.refOption.text);
			}
			else {
				el.refSelect.options[j].selected = "";
			}
		}
		this.end(this.wrapper);
	}
});

SkinnedSelect.implement(new Events, new Options);