/** 
 *  @class ComboBox Widget, replaces select in html.
 *  @author Paul DeCoursey paul@decoursey.net
 *  @version 0.8
 */

// enabling debug requires the window and debug libraries
var DEBUG = false;
var cssDir = "assets/default/";

var ComboBox = Class.create();

ComboBox.prototype = {
    initialize: function(id, options) {
        this.id = id;
        this.subShowing = false;
        this.options = Object.extend({
            comboClassName:     "comboBox",
            optionsClassName:   "optionBox",
            spacerRef:          "/3MContentRetrievalAPI/BlobServlet?locale=en_US&univid=1180612826335&fallback=true&assetType=MMM_Image&blobAttribute=ImageFile&version=current",
            parent:             document.getElementsByTagName("body").item(0),
            options:            {},
            defaultValue:       "",
            onChange:   	function(selectedKey){}
            }, options || {});
        if(DEBUG) showExtendedDebug();
        this.__create();
    },
    __create: function() {
        this.shell = new Element("div", {"class": "comboBoxShell"});
        this.formvalue = new Element("input", {name: this.id, type: "hidden"});
        this.widget = new Element("div", {"class": this.options.comboClassName});
        this.selectedText = new Element("span").update(this.options.defaultValue);
        this.widget.appendChild(this.selectedText);
        this.widget.parent = this;
        this.widget.onclick = this.handleMainClick;
        this.list = new Element("div", {"class": this.options.optionsClassName});
        this.list.hide();
        this.updateOptions();
        this.selectOption(this.options.defaultValue);
    },
    setOptions: function(options) {
        this.options.options = options;
        this.updateOptions();
    },
    updateOptions: function() {
        while(this.list.firstChild) {
            this.list.removeChild(this.list.firstChild);
        }
        this.optionList = new Array();
        var keys;
        if(this.options.options instanceof Hash) {
        	this.opts = this.options.options;
        } else {
	        this.opts = $H(this.options.options);
    	}
    	keys = this.opts.keys().toArray();
        for(var i=0;i<keys.length;i++) {
            this.optionList[i] = new Element("div");
            this.optionList[i].innerHTML = keys[i] +  "<img class='spacer' src='" + this.options.spacerRef + "' />";
            this.list.appendChild(this.optionList[i]);
            this.optionList[i].key = keys[i];
            this.optionList[i].parent = this;
            this.optionList[i].onclick = this.handleSubClick;
            this.optionList[i].onmouseover=function () {
                    this.style.background = '#ccc';
                };
            this.optionList[i].onmouseout=function () {
                    this.style.background = '';
                };
        }
    },
    display: function() {
        if(this.options.parent != null) {
            this.options.parent.appendChild(this.shell);
            this.shell.appendChild(this.widget);
            this.shell.appendChild(this.formvalue);
            this.shell.appendChild(this.list);
        } else {
            if(DEBUG) debug("widget parent invalid or null");
        }
    },
    setClassOfElement: function(el, cname) {
        el.setAttribute("class", cname);
        el.className = cname;
    },
    handleMainClick: function() {
        if(DEBUG) debug("mclick: " + this.parent.id);
        this.parent.toggleSubDisplay();
    },
    toggleSubDisplay: function() {
        if(this.subShowing) {
            this.subShowing = false;
	        $(this.list).hide();
        } else {
            this.subShowing = true;
          	$(this.list).show();
        }
    },
    selectOption: function(key) {
        if(this.opts.get(key)) {
            this.selectedText.innerHTML = key;
            this.formvalue.value = this.opts.get(key);
        } else {
            if(DEBUG) {
            	debug("[" + this.id + "] invalid option: " + key);
	    	    keys = this.opts.keys().toArray();
	    	    for(var i=0;i<keys.length;i++) {
	            	debug("VALID KEY: " + keys[i]);
	            }
	    	}
        }
    },
    handleSubClick: function() {
        if(DEBUG) debug("sclick: " + this.key);
        var changed = false;
        if(this.parent.formvalue.value != this.parent.options.options[this.key]){
	    changed = true;
        }
        this.parent.selectOption(this.key);
        this.parent.toggleSubDisplay();
        if(changed){
           this.parent.options.onChange(this.key);
        }
    }
};




function createBoxFromHeavy(sel) {
	var box = new ComboBox();
	var options = new Object();
	options.parent = sel.parentNode;
	sel.parentNode.removeChild(sel);
	options.options = new Hash();
	for(var i=0;i<sel.options.length;i++) {
		var opt = sel.options[i];
		if(opt.nodeName=="OPTION") {
			options.options.set(opt.text, opt.value);
			if(opt.selected) {
				options.defaultValue = opt.text;
			}
		}
	}
	box.initialize(sel.name, options);
	box.display();
}

function replaceAllSelects() {
	var selects = $$("#jumpWrapper select");
	selects.each(createBoxFromHeavy);
}