window._currentMouseTarget=document;
document.observe("mouseover",function(evt){
	window._currentMouseTarget=evt.element();
});

var MySelectBox = Class.create(
{
	
	initialize: function() {
		
		$$('select').each(function(selectbox) { 
									  
			var options = selectbox.select('option');
			var dds = [];
			
			var value = [];
			var label = [];
			value['title'] = '';
			label['title'] = selectbox.readAttribute('title') ? selectbox.readAttribute('title') : '';
			var selected = label['title']!='' ? 'title' : 0;
			
			var id = selectbox.readAttribute('id') ? selectbox.readAttribute('id') : '';
			var name = selectbox.readAttribute('name') ? selectbox.readAttribute('name') : '';
			var className = selectbox.readAttribute('class') ? selectbox.readAttribute('class') : '';
			var onChange = selectbox.readAttribute('onChange') ? selectbox.readAttribute('onChange') : '';
			var width = selectbox.getDimensions().width;
			
			if (label['title']!='' && selectbox.style.width=='' ) {
				var tmp =  Builder.node('span', label['title']);
				new Insertion.After(selectbox, tmp);
				width = selectbox.next().getDimensions().width+50;
				selectbox.next().remove();
			}
			
			var j = 0;
			var tmp_value = '';
			var tmp_label = '';
			var tmp_selected = '';
			for (var i=0; i<options.length; i++) {
				tmp_label = options[i].innerHTML.strip().replace('&amp;', '&');
				tmp_value = options[i].readAttribute('value').strip();
				tmp_selected = options[i].readAttribute('selected');
				if (tmp_label || tmp_value) {
					label[j] = tmp_label;
					value[j] = tmp_value;
					//value[j] = tmp_value ? tmp_value : label[j];
					dds[j] = Builder.node('dd', { value:value[j] }, label[j]);
					if (tmp_selected!=null && tmp_selected!=false) selected=j;
					j++;
				}
			}
			
			var ele = Builder.node('div', { className:'myselectbox', style:'width:'+width+'px', listing:'false' }, [
						  Builder.node('div', { "class":'myselectbox-list', style:'display:none; margin-top:16px; _margin-top:18px; width:'+(width-4)+'px' }, [
							  Builder.node('dl', { className:className }, dds)
						  ]),
						  Builder.node('input', { type:'text', value:label[selected], autocomplete:'off', readonly:'readonly', className:'input_btn_out', style:'width:'+(width-48)+'px' }),
						  Builder.node('input', { type:'hidden', value:value[selected], id:id, name:name, onChange:onChange })
					  ]);
			
			selectbox.hide();
			selectbox.id = '';
			selectbox.name = '';
			new Insertion.After(selectbox, ele);
			
			var ele = selectbox.next();
			var input = ele.down('input');
			input.observe('focus', this.addKeyEvent.bind(this, ele));
			input.observe('blur', this.stopKeyEvent.bind(this, ele));
			this.addClickEvent(ele);
			new PeriodicalExecuter(function(ele){
				if(!Element.descendantOf(window._currentMouseTarget,ele)) this.endListing(ele);
			}.bind(this,ele), 1.5);	
			input.observe('click', function(ele){this.startListing(ele)}.bind(this,ele));
			input.observe('mouseover', function(){input.addClassName('input_btn_on')}.bind(this, ele));
			input.observe('mouseout', function(){input.removeClassName('input_btn_on')}.bind(this, ele));
			
		}.bind(this));
		
	},
	
	addClickEvent: function(ele) {

		ele.observe('click', this.selectValue.bind(this, ele));
		ele.select('dd').each(function(e) { 
			e.observe('mouseover',  this.onMouseOver.bind(this, e));
		}.bind(this));
						  
	},
	
	stopClickEvent: function(ele) {
		
		/*ele.stopObserving('click');
		ele.select('dd').each(function(e) { 
			e.stopObserving('mouseover');
		}.bind(this));*/
						  
	},
	
	addKeyEvent: function(ele) {
		
		ele.observe('keydown',function(k){ 
			if (k.keyCode==9 || k.keyCode==13 || k.keyCode==38 || k.keyCode==40) {
				var es = ele.select('dd');
				var selected = ele.down('dd.onMouseOver');
				var new_select = '';
				if (k.keyCode==9 || k.keyCode==13) {
					this.selectValue( ele );
				} else {
					if (ele.readAttribute('listing')!='true') this.startListing(ele);
					if (selected) {
						new_select = k.keyCode==40 ? selected.next() : selected.previous();
						if (!new_select) new_select = selected;
					} else {
						new_select = k.keyCode==40 ? es.first() : es.last();
					}
					this.onMouseOver( new_select );
				}
			}
		}.bind(this));
		
	},
	
	stopKeyEvent: function(ele) {
		
		ele.stopObserving('keydown');
						  
	},
	
	addBlurEvent: function(ele) {
		
		document.observe('click',function(event){ 
			if (ele.readAttribute('listing')=='true' && !event.findElement().descendantOf(ele)) this.endListing(ele);
		}.bind(this));
		
	},
	
	stopBlurEvent: function(ele) {
		
		document.stopObserving('click');
		
	},
	
	onMouseOver: function(e) {
		
		e.siblings().each(function(e) { this.onMouseOut(e) }.bind(this));
		e.addClassName('onMouseOver');
						  
	},
	
	onMouseOut: function(e) {
		
		e.removeClassName('onMouseOver');
		
	},
	
	startListing: function(ele) {
		
			
			
		this.stopBlurEvent(ele);
		this.addBlurEvent(ele);
		
		$$(".myselectbox-list").each(function(e){
			e.writeAttribute('listing', 'false' );
			e.hide();
		});
		ele.show();
		ele.writeAttribute('listing', 'true' );

		Effect.SlideDown(ele.down('div'), { duration: .3});
		
		
		
	},
	
	endListing: function(ele) {
		
		
		if (ele.readAttribute('listing')=='false') return;
		this.stopBlurEvent(ele);
		ele.select('dd').each(function(e) { this.onMouseOut(e) }.bind(this));
		ele.writeAttribute('listing', 'false' );

		ele.down('div').hide();

		
	},
	
	searchLocation2: function(elm, val){
		var thisobj = this;
		url ="_location_detail.php";

		new Ajax.Request(url,
			{	method: "post", 
				
				parameters:{id : val, sub_type : elm},
				onSuccess: function(transport) {
					
					try{
						str = transport.responseText;
					
						//$(elm).update(str);
						//console.log(transport)
						
						if(elm == "selectbox_contry"){
							//thisobj.searchLocation2('selectbox_city', target_value);
							//$('selectbox_city').update("<dd>Loading...</dd>");
							//console.log(2);
							elm = $('selectbox_city').previous('div').down('dl')

							$(elm).update(str)
							
							default_val = $(elm).down('dd')
							thisobj.addClickEvent(elm);
							$('selectbox_city').value = "";
							elm = $('selectbox_city').previous('input')
							
							$(elm).value = $(default_val).innerHTML;
				
						} else {
							//console.log(1);
						}	
					} catch(err){
						//alert(err)
					}
					
				}
			}
		)
	
	},
	
	selectValue: function(ele) {
		var thisobj = this;
		var e = ele.down('dd.onMouseOver');
		if (e) {
			//==========polo modify======//
			tager = ele.down('input',1).readAttribute('id');			
			val = e.readAttribute('value')
	
			thisobj.searchLocation2(tager, val)
			
			if(ele.down('input', 0)) ele.down('input', 0).value = e.innerHTML.strip();
			if(ele.down('input', 1)) ele.down('input', 1).value = e.readAttribute('value');

			this.endListing(ele);
			var onChange = String(ele.down('input', 1).readAttribute('onChange')).replace("function anonymous()\n{\nfunction anonymous()\n{", "").replace("function onchange()\n{\nfunction onchange()\n{", "").replace("\n}\n}", "");
			eval(onChange);		
		
			//==========================//
		}
		
	}
	
}
);

function initMySelectBox() { 
	if(navigator.userAgent.toLowerCase().indexOf('seamonkey') > -1){
		return false;
	}
	mylightbox = new MySelectBox(); 

}
document.observe('dom:loaded', initMySelectBox, false);
//Event.observe(window, 'load', initMySelectBox, false);
//Component.init('.mylightbox','MySelectBox');