/**
 * @author				Jochen Vandendriessche
 * 						jochen.vandendriessche@guideline.net
 * @version				0.1b
 * 
 * @classDescription	unobtrusive javascript replacing the selected <select> tags
 * 
 */

var zIndex = 50;

function fancySelect(selectId, classname){
	this.selectId		=		selectId;
	this.selectOb		=		document.getElementById(selectId);
	this.selectOptions	=		this.selectOb.options;
	this.selectedOpt	=		0;
	this.fancyDiv		=		document.createElement('div');
	this.fancyDiv.id	=		'fancy_' + this.selectId;
	this.fancyDiv.className	= (classname == null) ? 'fancySelect' : classname;
	this.changeEvent	=		this.selectOb.onchange;
	this.fancyDiv.onclick = bind(this, this.selectClick);
	this.state = 'closed';
	this.draw();
}

fancySelect.prototype = {
	
	draw		:		function(){
				// create the ul
				this.selectOb.style.visibility = 'hidden';
				this.selectedOpt = this.selectOb.selectedIndex
				if (this.selectOptions[this.selectedOpt].text){
					this.fancyDiv.innerHTML	=	this.selectOptions[this.selectedOpt].text;
				}else{
					this.fancyDiv.innerHTML	=	'&nbsp';
				}				
				this.fancyUL = document.createElement('ul');
				this.fancyUL.id = 'ul_' + this.selectId;
				this.fancyDiv.style.zIndex = zIndex;
				this.fancyUL.style.display = 'none';
				zIndex -= 5;
				for(var n = 0;n < this.selectOptions.length;n++){
					var fancyLI = document.createElement('li');
					var thisObj = this;
					fancyLI.id = 'li_' + this.selectId + '_' + this.selectOptions[n].index;
					fancyLI.innerHTML = this.selectOptions[n].text;
					fancyLI.onmouseover = liOver;
					fancyLI.onmouseout	= liOut;
					fancyLI.onclick = function (){ liClick(thisObj, this)};
					this.fancyUL.appendChild(fancyLI);
				}
				this.fancyDiv.appendChild(this.fancyUL);
				document.body.appendChild(this.fancyDiv);
				this.positionDiv();				
				
	}
	,
	positionDiv	:		function(){
				// get the top/left pos of the select box :)
				var pos = this.findPos(this.selectOb);
				this.fancyDiv.style.top = pos[1] + 'px';
				this.fancyDiv.style.left = pos[0] + 'px';
	}
	,
	findPos		:		function(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curleft,curtop];
	}		
	,
	
	selectClick		:		function(){
					if (this.state == 'open'){
						this.fancyUL.style.display = 'none';
						this.state = 'closed';	
					}else{
						this.fancyUL.style.display = '';
						this.state = 'open';
					}
	}	
	
	,
	
	liClick			:		function(){
		
	}
	,
	setWidth		:		function($_width){
				this.fancyDiv.style.width = $_width + 'px';
				this.draw();
					
	}
	
}

function liOver(){
	this.className = 'hover';
}

function liOut(){
	this.className = 'out';
}

function liClick(obj, li){
	//window.alert(obj + '---' + li.id);
	var indArr = li.id.split('_');
	obj.selectOb.selectedIndex = indArr[indArr.length - 1];
	if (obj.changeEvent){
		obj.changeEvent.call();
	}
	obj.draw();
	
}

function bind(el, func){
  	return function() { func.call(el); }
}