//dropdown.js
//creates a new class, MN.PlayerUI.Dropdown, that mimics a select element but can have a customized look
//to initialize, it takes a id of the div to place everything in.
MN.Dropdown = MN.Class(MN.EventSource);
var _dp = MN.Dropdown.prototype;

_dp.initialize = function(id){
	MN.EventSource.prototype.initialize.apply(this);
	
	this._div = $(id);
	this._list = null;
	this.options = [];
	this.selectedIndex = 0;

	//initialize the options list
	var ul = MN.Widget.FindNonTextChild(this._div);
	if(ul && ul.tagName == 'ul'){
		this._list = ul;
		var curChild;
		for(var i = 0; i < ul.childNodes.length; i++){
			curChild = ul.childNodes[i];
			if(curChild.tagName == 'li')
				this.options.push(curChild);
		}
	}
	else{
		this._list = document.createElement('ul');
		this._div.appendChild(this._list);
	}
	
	this._list.style.display = 'none';
	MN.Event.Observe(this._div, 'click', this._OnClick);
}

_dp.add = function(option, before){
	option = this._ConvertToLI(option);
	
	MN.Event.Observe(option, 'mouseover', function(){
		option.className += ' highlight';
	});
	MN.Event.Observe(option, 'mouseout', function(){
		option.className = option.className.replace('highlight', '');
	});
	MN.Event.Observe(option, 'click', this._OnOptionClick);
	
	log('converted and observing')
	if((typeof before == 'number' && before < this.options.length) || typeof before == 'object'){
		if(typeof before == 'object'){
			log('object');
			for(var i = 0; i < this.options.length; i++){
				if(this.options[i] === before){
					before = i;
					break;
				}
			}
			if(typeof before == 'object') //didn't find it
				before = this.options.length;
		}

		if(this.options[before] || MN.nonIE)  //IE has issues with calling insertBefore(..., null)
			this._list.insertBefore(option, this.options[before]);
		else{
			this._list.insertBefore(option); //oh how i hate IE!!
		}
		var a1 = this.options.slice(0, before);
		var a2 = this.options.slice(before);
		a1.push(option);
		this.options = a1.concat(a2);
	}
	else{
		this._list.appendChild(option);
		if(!MN.nonIE)
			alert(this._list.outerHTML);
		this.options.push(option);
	}	
}

_dp.remove = function(option){
	for(var i = 0; i < this.options.length; i++){
		if(this.options[i] === option){
			this.options.splice(i, 1);
			log('newArray: ', this.options);
		}
	}
	this._list.removeChild(option);
}

_dp._ConvertToLI = function(option){
	if(option.nodeType != 'li'){
		var li = document.createElement('li');
		li.setAttribute('url', option.value);
		li.innerHTML = option.innerHTML;
		return li;
	}
	else
		return option;
}

_dp._OnOptionClick = function(evt){
	evt = evt || window.evt;
	var target = evt.srcElement || evt.target;
	for(var i = 0; i < this.options.length; i++){
		if(this.options[i] === target && i != this.selectedIndex){
			this.options[this.selectedIndex].className = this.options[this.selectedIndex].className.replace('highlight', '');
			target.className += ' highlight';
			this.selectedIndex = i;
			this.FireEvent('change');
		}
	}
}

_dp._OnClick = function(evt){
	evt = evt || window.event;
	if(this._list.style.display == 'none'){
		evt.cancelBubble = true; //we have to cancel the bubble or else the _OnBodyClick will fire and close the dropdown immediately
		this._list.style.display = 'block';
		MN.Event.Observe(document, 'click', this._OnBodyClick);
	}
}

_dp._OnBodyClick = function(evt){
	evt = evt || window.event;
	this._list.style.display = 'none';
	MN.Event.StopObserving(document, 'click', this._OnBodyClick);
}