/*
Script: 		comboBoo.js
License:		MIT-style license.
Credits:		Bruno Torrinha - www.torrinha.com
				Mootools framework - mootools.net.
				Made to be compatible with Mootools 1.2.x by Huy Dinh www.qhuy.net
*/

var comboBoo = new Class({
	Implements: Options,	
	
	options: {
		className: 'comboBoo',
		backgroundColor: '#000',
		textColor: '#fff',
	},

	initialize: function(el, options){
		
		this.setOptions(options);
		this.oldCombo = $(el);
		this.bOpen = false;
		
		//Create dropdown selector
		this.comboLink = new Element('a', {
			'class': this.options.className + '-label', 
			'id': el.name,
			'html':el.options[el.options.selectedIndex].text,
		});
		this.comboLink.inject(this.oldCombo.getParent());
		var pos = this.comboLink.getCoordinates(this.comboLink.getParent());

		//Create dropdown list container with relative position
		this.comboListContainer = new Element('div', {
			'id': el.name + 'container',
			'styles' : {
				'position': 'relative',
				'padding': '2px'
			}
		});
		this.comboListContainer.inject(this.comboLink,'after');
		
		//Create dropdown list
		this.comboList = new Element('ul', {
			'class': this.options.className + '-list', 
			'id': 'choices-' + el.name,
			'styles': {
				'top': '0px', 
				'left': pos.left + 'px',
				'width': (pos.width) + 'px'
			}
		});
		if(this.comboLink.getStyle('margin-bottom'))
			this.comboList.setStyle('margin-top', '-' + this.comboLink.getStyle('margin-bottom'));
		this.comboList.inject(this.comboListContainer);
		
		this.fx = {
			cmbList: new Fx.Tween(this.comboList, {duration:'short',property:'opacity'}).start(0)
		};
		this.addComboLinkEvents(this.comboLink);

		//Make list of choices
		this.build(el);
		el.setStyle('display', 'none');
		//this.comboList.setStyle('display', 'none');
	},

	build: function(el){
		for(i = 0; i < el.length; i++) {
			var el2 = new Element('li', {'id': i}).set('html',el.options[i].text);
			this.addChoiceEvents(el2).inject(this.comboList);
		};
	},

	click: function(el) {
		if (this.bOpen) {
			this.bOpen = false;
			this.fx.cmbList.start(0);
		}else{
			this.bOpen = true;
			this.fx.cmbList.start(1);
		}
	},

	comboOver: function() {
		if (!this.bOpen) 
			this.comboLink.addClass(this.options.className + '-label' + '-active');		
	},

	comboOut: function(el) {
		if (!this.bOpen)
			this.comboLink.removeClass(this.options.className + '-label' + '-active');
		else
			this.comboLink.addClass(this.options.className + '-label' + '-active');
	},

	choiceOver: function(el) {
		if (this.selected) 
			this.selected.removeClass('choice-selected');
		this.selected = el.addClass('choice-selected');
	},

	choiceSelect: function(el) {
		this.bOpen = false;
		this.comboLink.removeClass(this.options.className + '-label' + '-active');
		this.fx.cmbList.start(0);
		this.comboLink.set('html',el.get('text'));
		this.oldCombo.selectedIndex = el.id;
	},

	addComboLinkEvents: function(el) {
		return el.addEvents({
			click: this.click.bind(this, [el]), 
			mouseover: this.comboOver.bind(this, [el]), 
			mouseleave: this.comboOut.bind(this, [el])
		});
	},

	addChoiceEvents: function(el) {
		return el.addEvents({
			mouseover: this.choiceOver.bind(this, [el]),
			mousedown: this.choiceSelect.bind(this, [el])
		});
	}
});

comboBoo.implement(new Events, new Options);