/* custom select box code

	var select = new selectBox(parent HTMLobject , width)

	properties:
		html  - is html allowed in this box true / false
		width  - width of box
		options	- array of options
		value - current value

	methods:
		setValue( value )
		getValue()
		getSelectedOption()  - returns referance to currently selected option object
		clear() - removes all options

*/

String.prototype.stripHTML = function(){
	var strip = new RegExp();
	strip = /[<][>]*[>]/gi;
	return this.replace(strip, "").replace(/&nbsp;/g, "")
}

function selectBox(parent, width){
	function option(text,value){
		this.text = text
		this.value = value || text
	}
	this.width = width || 50
	this.options = []
	this.value = ''
	this.selectedIndex = 0
	this.repopulate = true
	this.css = false
	this.html = true

	this.setValue = function(value){
		for(var i=0;i<this.options.length;i++)
			if(this.options[i].value+'' == value+''){
				
				if(!this.html)
					this._value.innerHTML = this.options[i].text.replace('<','').replace('>','').toUpperCase()
				else this._value.innerHTML = this.options[i].text

				this.value = value
				this.selectedIndex = i
				return true
			}
		this._value.innerHTML = this.value =''
		this.selectedIndex = -1
	}
	this.getValue = function(){
		return this.value
	}
	this.getSelectedOption = function(){
		return this.options[this.selectedIndex]
	}
	this.clear = function(){
		this.options = []
		this.value = ''
		this.selectedIndex = 0
		this.repopulate = true
		this._value.innerHTML = ''
	}

	this.add = function(text,value){
		this.options[this.options.length] = new option(text,value)
		this.repopulate = true
	}

	this.border = document.createElement('DIV')
	this.border.className = 'select_box'
	this.border.style.position = 'relative'
	this.border.style.overflow = 'hidden'
	this.border.style.width = this.width
	
	this.container = document.createElement('DIV')
	this.container.style.position = 'relative'
	this.container.style.width = '100%'
	this.border.appendChild(this.container)

	this._value = document.createElement('DIV')
	this.container.appendChild(this._value)
	this._value.style.position = 'absolute'
	this._value.style.top = 2
	//this._value.innerHTML = 'value here'
	this._value.style.left = 0
	this._value.style.border = 'none'
	this._value.style.width = '100%'
	this._value.style.textAlign  = 'left'
	this._value.parent = this
	this._value.onmousedown = function(){
		this.parent.showPopUp()
	}

	this.drop_arrow = document.createElement('DIV')
	this.container.appendChild(this.drop_arrow)
	this.drop_arrow.className = 'drop_arrow'
	this.drop_arrow.style.position = 'absolute'
	this.drop_arrow.style.top = 0
	this.drop_arrow.style.width = 12
	this.drop_arrow.style.textAlign = 'center'
	if(this.drop_arrow.style.cursor)
	this.drop_arrow.style.cursor = 'normal'

	this.drop_arrow.innerHTML = '6'
	this.drop_arrow.style.fontFamily = 'webdings'
	this.drop_arrow.style.fontSize = '8px'
	this.drop_arrow.style.right = 0

	this.drop_arrow.parent = this
	this.drop_arrow.onmousedown = function(){
		this.parent.showPopUp()
	}
	

	this.popup = window.createPopup();
	this.document = this.popup.document

	var style = this.document.createStyleSheet()
	style.cssText = document.styleSheets[0].cssText + ' body{ background-color: white}'


	this.document.body.style.margin = '0'
	this.select_container = this.document.createElement('DIV')
	this.select_container.style.height='100%'
	this.select_container.style.width='100%'
	this.select_container.className = 'select_dropdown' 
	this.select_container.style.overflow = 'auto'
	this.select_container.style.overflowX = 'hidden'
	this.document.body.appendChild(this.select_container)
	this.document.onselectstart =
	this.document.onselect = 
	this.document.oncontextmenu =
	function(){ return false }

	//this.document.body.innerHTML='testing 123'
	//this.document.body.style.backgroundColor = 'white'
	if(this.document.body.style.cursor)
	this.document.body.style.cursor = 'normal'

	parent.appendChild(this.border)
	
	this.showPopUp = function(){
		if(this.repopulate = true){
			this.repopulateSelect()
		}
		this.popup.show(0 ,17,(this.border.scrollWidth < 100 )?100 :this.border.scrollWidth, 100, this.border);
	}
	this.onclick = function(){}
	this.onchange = function(){}

	this.repopulateSelect = function(){

		if(this.css){
			this.document.createStyleSheet(this.css)
			this.css = false
		}


		this.select_container.innerHTML = ''
		for(var i = 0; i< this.options.length ; i++){
			var el = this.document.createElement('DIV')
			el.innerHTML = this.options[i].text
			el.value = this.options[i].value
			el.index = i
			el.className = 'select_value'
			el.style.width = '100%'
			try{ el.style.cursor = 'normal' } catch(e){}
			el.parent = this
			el.popup = this.popup
			el.onmouseup = function(){
				if(!this.parent.html)
					this.parent._value.innerHTML = this.innerText
				else this.parent._value.innerHTML = this.innerHTML
				var value = this.parent.value
				this.parent.value = this.value
				this.parent.selectedIndex = this.index
				this.popup.hide()
				if(value != this.value)
					this.parent.onchange()
				this.parent.onclick()

			}
			el.onmouseover = function(){
				this.className = 'select_value_onmouseover'
			}
			el.onmouseout = function(){
				this.className = 'select_value'
			}
			this.select_container.appendChild(el)
		}
		this.repopulate = false
	}
}