/**
 * USAGE: niceSelect(string SELECT_OBJECT_ID);
 */
function niceSelect(elem){
        if (!document.getElementById(elem)) {
            return false;
        }
	var p = document.createElement("div");
	p.className = "resultText";
	var sel = new selectChange(elem, {
			"OnBlur": function(value, text){
                                var el = sel.activeElement();
				p.innerHTML = el.innerHTML;
			}
		}, true, true);

	var el = sel.activeElement();
	p.innerHTML = el.innerHTML;
	sel.element().parentNode.parentNode.appendChild(p);
        document.getElementById(elem).style.display = "none";
}




function selectChange(id, events, copy, synchron){
	this.id = document.getElementById(id);
        if (!this.id)
            return null;

	this.events = events;
	this.elements = Array();
	this.activeIndex = 0;
	this.active = false;
	this.synchron = synchron;
	this.transform();
	this.focusElement(this.activeIndex);
	if(!copy){
		this.deleteBase();
	}
	return this;
}

selectChange.prototype.transform = function(){
	this.base = document.createElement("div");
	this.base.className = "selectChangeMain";

	this.addEvent(this.base, "mouseover", this.linkMethod(this, "baseChangeMainHover"));
  	this.addEvent(this.base, "mouseout", this.linkMethod(this, "baseChangeMain"));
	this.addEvent(this.base, "click", this.linkMethod(this, "baseChangeMain"));



	this.selectMain = document.createElement("ul");
	this.selectMain.className = "selectChange";
	var elementOption;
	var i = 0;
	for(var childItem in this.id.childNodes){

		if(this.id.childNodes[childItem].nodeType == 1){

			elementOption = document.createElement("li");
			elementOption.innerHTML = this.id.childNodes[childItem].text;
                        
                        var hint = this.id.childNodes[childItem].getAttribute('hint');
                        if (hint) {
                            elementOption.innerHTML += '<span>'+hint+'</span>';
                        }
			elementOption.value = this.id.childNodes[childItem].value;
			elementOption.number = i;
			elementOption.className = "pasive";
			this.addEvent(elementOption, "click", this.linkMethod(this, "clickElement"));
			this.addEvent(elementOption, "mouseover", this.linkMethod(this, "overElement"));

			this.elements[i] = elementOption;
			this.selectMain.appendChild(elementOption);
			i++;
		}
	}
	this.activeIndex = this.id.selectedIndex;
	this.addEvent(window.document, "keydown", this.linkMethod(this, "keyDownElement"));
	this.id.parentNode.insertBefore(this.base, this.id);
        

        this.selectPopup = $("<div class='selectPopup'>&nbsp;</div>")[0];
        
        this.selectPopup.appendChild($("<div class='topBorder'>&nbsp;</div>")[0]);
        this.selectPopup.appendChild(this.selectMain);
        this.selectPopup.appendChild($("<div class='bottomBorder'>&nbsp;</div>")[0]);
        
        this.base.appendChild(this.selectPopup);

}

selectChange.prototype.baseChangeMain = function(){
	 this.selectPopup.style.display = "none";
	 this.deactivate();
};

selectChange.prototype.baseChangeMainHover = function(){
	 this.selectPopup.style.display = "block";
	 this.activate();
};

selectChange.prototype.synchronously = function(){
	if(this.synchron){
		this.id.selectedIndex = this.activeIndex;
		if(this.id.onchange){
			this.id.onchange.call(this.id);
		}
	}
}

selectChange.prototype.deleteBase = function(){
	this.id.parentNode.removeChild(this.id);
}

selectChange.prototype.activeElement = function(){
	return this.elements[this.activeIndex];
}

selectChange.prototype.element = function(){
	return this.selectMain;
}

selectChange.prototype.activate = function(){
	this.active = true;
}

selectChange.prototype.deactivate = function(){
	this.active = false;
}

selectChange.prototype.clickElement = function(e){
	this.overElement(e);
	this.enterElement();
}

selectChange.prototype.overElement = function(e){
	this.activate();
	var me = window.event?window.event.srcElement: e.target;
        if(me.tagName == "LI"){
            this.focusElement(me.number);
        }else{
            this.focusElement(me.parentNode.number);
        }
}

selectChange.prototype.enterElement = function(){
	this.blur();
	this.synchronously();
	this.selectPopup.style.display = "none";
}

selectChange.prototype.focusElement = function(i){
	if(this.elements[this.activeIndex]){
            this.elements[this.activeIndex].className = "pasive";
	}
        if (this.elements && this.elements[i]) {
            this.elements[i].className = "active";
            this.activeIndex = i;
            this.selected();
        }
}

selectChange.prototype.keyDownElement = function(e){
	if(this.active){
		var keyCode = window.event?window.event.keyCode:e.keyCode;
		switch(keyCode){
			case 40:
				if(this.activeIndex < this.elements.length - 1){
					this.focusElement(this.activeIndex+1);
				}
				break;
			case 38:
				if(this.activeIndex > 0){
					this.focusElement(this.activeIndex-1);
				}
				break;
			case 13:
				this.enterElement();
				break;
		}
	}
}

selectChange.prototype.selected = function(){
	if(this.events.OnSelected){
		this.events.OnSelected.call(this, this.elements[this.activeIndex].value, this.elements[this.activeIndex].innerHTML);
	}
}

selectChange.prototype.blur = function(){
	if(this.events.OnBlur){
		this.events.OnBlur.call(this, this.elements[this.activeIndex].value, this.elements[this.activeIndex].innerHTML);
	}
}

selectChange.prototype.linkMethod = function(object, methodName){
	return function(){
        return object[methodName].apply(object, arguments);
    };
}

selectChange.prototype.addEvent = function(elem, e, func){
	if(document.addEventListener){
		elem.addEventListener(e, eval(func), false);
	}else{
		elem.attachEvent("on"+e, eval(func));
	}
}