/*
Script: 		comboBoo.js
License:		MIT-style license.
Credits:		Romain Preston - www.ouraddresshere.com
                Bruno Torrinha - www.torrinha.com
				Mootools framework - mootools.net.
*/

var comboBoo = new Class({
    Implements : [Events, Options],
	options: {
		className: 'comboBoo',
		htmlValuesHash : false,
		stylesLabel : false,
		stylesItem:false,
		stylesList:false
	},
	initialize: function(el, options){
		this.setOptions(options);
		this.oldCombo = $(el);
		this.values = new Hash();
		this.options.htmlValuesHash = $type(this.options.htmlValuesHash == "object") ? new Hash(this.options.htmlValuesHash) : new Hash();
		var pos = this.oldCombo.getCoordinates();
		this.comboLink = new Element('a', {'class': this.options.className + '-label',
		                                   'styles' : $extend({ height : pos.height, position : 'absolute',top: pos.top, left: pos.left, width: pos.width},$type(this.options.stylesLabel == "object") ? this.options.stylesLabel : {}),
		                                   'events' : {click: function(e){this.toggleCombo(true); e.stop();}.bind(this)}})
			.inject(document.body);

		this.comboList = new Element('ul', {'class': this.options.className + '-list',
		                                    'styles' : $extend({position : 'absolute',display: 'none', top: pos.top, left: pos.left, width: pos.width - 4},$type(this.options.stylesList == "object") ? this.options.stylesList : {}),
		                                    'events' : {mouseleave: function(e){this.toggleCombo(false); e.stop();}.bind(this)}})
			.inject(this.comboLink,"after");
		this.build(this.oldCombo);
		this.setValue(this.oldCombo.get("value"));
		this.oldCombo.setStyle("visibility","hidden");
	},
	build: function(el){
	    var imgPreload = [];
	    el.getElements("option").each(function(opt,i){
	            var optVal = opt.get("value")
	            var txtDisplay = $chk(this.options.htmlValuesHash.get(optVal)) ?
	                this.options.htmlValuesHash.get(optVal) : opt.get("text");
	                
	            var optLi = new Element('li',{'html' : txtDisplay,
	                                          'styles' : $type(this.options.stylesItem == "object") ? this.options.stylesItem : {},
	                                          'events' : {'click' : this.setValue.pass(optVal,this)}})
	                    .inject(this.comboList);
	            this.values.set(optVal,{"text" : txtDisplay,"num" : i,"elt" : optLi});
	            if(optLi.getElements("img").length > 0) optLi.getElements("img").each(function (imElt){imgPreload.include(imElt.get("src"))});
	        },this);
	        if(imgPreload.length > 0) new Asset.images(imgPreload);
	        
	},
	setValue : function(value) {
	    this.comboLink.set("html",this.values.get(value).text);
	    this.oldCombo.set("selectedIndex",this.values.get(value).num).set("value",value);
	    this.values.each(function (valElt){valElt.elt.removeClass("active");});
	    this.values.get(value).elt.addClass("active");
	    this.toggleCombo(false);
	    return value;
	},
	toggleCombo : function(bool){
	    if(!$defined(bool)) bool = this.comboList.getStyle("display") != "block"
	    this.comboList.setStyle("display",bool ? "block" : "none");
	}
});