YAHOO.namespace('CustomControls');

YAHOO.CustomControls.CustomSelectBox = function(sBox) {
	var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, SelectBox;
	
	if (sBox) {
		SelectBox = Dom.get(sBox);
	} else {
		return;
	}
	
	this.onValueChange = new YAHOO.util.CustomEvent('onValueChange');

	var csbStatus = false;

	var csb = document.createElement('div');
	csb.className = 'custom-select-box';
	csb.id = SelectBox.id;
	//	Dom.setStyle(csb, 'width', Dom.getStyle(SelectBox, 'width'));

	var csbValue = document.createElement('span');
	csb.appendChild(csbValue);

	var csbButton = document.createElement('a');
	csbButton.href = 'javascript:;';
	csbButton.className = 'arrow';
	csb.appendChild(csbButton);

	var csbOptions = document.createElement('ul');
	for (var i = 0; i < SelectBox.length; i++) {
		var li = document.createElement('li');
		li.id = SelectBox.id + "_" + SelectBox.options[i].value;
		li.innerHTML = SelectBox.options[i].value;
		li.className = i == 0 ? 'selected' : 'notselected';
		csbOptions.appendChild(li);
	}

	csb.appendChild(csbOptions);
	Dom.setStyle(csbOptions, 'width', Dom.getStyle(SelectBox, 'width'));

	var left = Dom.getX(SelectBox) - Dom.getX(SelectBox.parentNode);
	var top = Dom.getY(SelectBox) - Dom.getY(SelectBox.parentNode);

	SelectBox.id = SelectBox.id + '_';
	Dom.setStyle(SelectBox, 'display', 'none');
	SelectBox.parentNode.insertBefore(csb, SelectBox);

	csbValue.innerHTML = SelectBox.options[SelectBox.selectedIndex].innerHTML;
	//	Dom.setStyle(csbValue, 'width', (Dom.getStyle(csb, 'width').replace("px", "") - Dom.getStyle(csbButton, 'width').replace("px", "") - 8) + 'px');

	setSelectedIndex = function(sb, value) {
		var selectedIndex = 0;
		if (sb.options.length > 0) {
			for (var i = 0; i < sb.options.length; i++) {
				if (sb.options[i].value == value) {
					selectedIndex = i;
				}
			}
			sb.selectedIndex = selectedIndex;
		}
	}
	
	handleDocumentClick = function(e) {
		var t = Event.getTarget(e);
		if (Dom.getAncestorByClassName(t, 'custom-select-box')) {
			return;
		}
		
		Dom.setStyle(csbOptions, 'display', 'none');
		Event.removeListener(document, 'click');
		csbStatus = false;
	}

	handleOptionClick = function(e, args) {
		var t = Event.getTarget(e);
		csbValue.innerHTML = t.innerHTML;
		Dom.replaceClass(options, 'selected', 'notselected');
		setSelectedIndex(SelectBox, t.id.split('_')[1]);
		Dom.replaceClass(t, 'notselected', 'selected');
		Dom.setStyle(csbOptions, 'display', 'none');
		csbStatus = false;
		Event.removeListener(document, 'mousedown');
		args.onValueChange.fire([SelectBox.value]);
	}
	
	handleOptionMouseOver = function(e) {
		Dom.addClass(Event.getTarget(e), 'hover');
	}
	
	handleOptionMouseOut = function(e) {
		Dom.removeClass(Event.getTarget(e), 'hover');
	}

	handleBoxClick = function(e) {
		if (csbStatus) {
			Dom.setStyle(csbOptions, 'display', 'none');
			Event.removeListener(document, 'mousedown');
			csbStatus = false;
		} else {
			Dom.setStyle(csbOptions, 'display', 'block');
			Event.addListener(document, 'mousedown', handleDocumentClick, this, true);
			csbStatus = true;
		}
	}
	
	var options = csb.getElementsByTagName('li');
	

	Event.addListener([csbButton, csbValue], 'click', handleBoxClick, this, true);
	Event.addListener(options, 'click', handleOptionClick, this, true);
	Event.addListener(options, 'mouseover', handleOptionMouseOver, this, true);
	Event.addListener(options, 'mouseout', handleOptionMouseOut, this, true);
	
	this.SelectBox = SelectBox;
};