/*
* @author: jjagoda
* */

var UI;
if (typeof UI == "undefined") UI = {};
UI.SelectBox = Class.create({

	initialize: function(options){
		this.defaults = {
			//id: '.select',
			wrapper: 'span',
			selectedClass: 'ui-selectbox-selected',
			width: null,
			animDuration: 0.2,
			onChange: function(){}
		};
		this.opts = Object.extend(this.defaults, options);

		this.select = $(this.opts.id);
		if(!this.select) return;
		
		this.selectBox = null;
		this.lis = null;
		this.width = null;

		this.createLinkHtml();
		this.createSelectBox();
		this.initObservers();
	},

	createLinkHtml: function(){
		var t = this, o = this.opts;

		var linkHtml = '<a><span>' + t.getSelectedOption().innerHTML + '</span></a>'

		var linkWrapper = new Element(o.wrapper, {
			id: this.select.id + '-ui-selectbox'
		}).addClassName('ui-selectbox');

		linkWrapper.insert(linkHtml);
		this.select.insert({'after': linkWrapper});
		this.link = $(this.select.id + '-ui-selectbox');

		this.width = o.width || this.select.getWidth();
		this.link.setStyle({'width': this.width + 'px'});

	},

	createSelectBox: function(){
		var t = this, o = this.opts;

		var selectBoxHtml = '<div style="display:none;" class="ui-selectbox-menu ' + this.select.classNames() + '" id="' + this.select.id + '-ui-selectbox-menu"><ul>'

		this.select.select('option').each(function(opt, index){
			selectBoxHtml += '<li><a>' + opt.innerHTML +'</a></li>';
		});
		selectBoxHtml += '</ul></div>';
		$$('body').first().insert(selectBoxHtml);

		this.selectBox = $(this.select.id + '-ui-selectbox-menu');
		this.selectBox.setStyle({'width': this.width + 'px'});
		this.lis = this.selectBox.select('li');

		this.select.addClassName('selectbox-hidden');

	},

	getSelectedOption: function(){
		var s = this.select;
		return s.options[s.selectedIndex];
	},

	selectOption: function(idx){
		this.select.selectedIndex = idx;
		this.lis[idx].addClassName(this.opts.selectedClass).siblings().invoke('removeClassName','this.opts.selectedClass');

		this.select.fire('ui:selectbox:change', {selectedIndex: idx});

		//$('id-selecta').observe('ui:selectbox:change', function(e){
		// event.target.form.submit();
		// })

	},

	initObservers: function(){
		var t = this;
		this.link.observe('click', this.onLinkClick.bindAsEventListener(this));
		this.lis.each(function(li, index){
			li.select('a').first().observe('click', t.onOptionSelect.bindAsEventListener(t, index));
		});
		$(document).observe('click', t.hideSelectBox.bindAsEventListener(this, true));
	},

	onLinkClick: function(e){
		Event.stop(e);
		this.active? this.hideSelectBox(): this.showSelectBox();
		return false;
	},

	onOptionSelect: function(e, index){
		e.stop();
		this.selectOption(index);
		this.hideSelectBox();
		this.setText(index);
		return false;
	},

	showSelectBox: function(){

		this.selectBox.clonePosition(this.link, {setHeight: false});
		//this.selectBox.show();

		new Effect.BlindDown(this.selectBox.id, {
			duration: this.opts.animDuration
		});
	},

	hideSelectBox: function(e, isDocumentClick){
		//this.selectBox.hide();

		new Effect.BlindUp(this.selectBox.id, {
			duration: this.opts.animDuration
		});
	},

	setText: function(index){
		this.link.select('a').first().innerHTML = this.select.options[index].innerHTML;
	}

});