var LocationElement = jscore.def ('LocationElement', {

	LocationElement: function () {
		this.elementName = null;
		this.country = null;
		this.region = null;
		this.locality = null;
	},
	init: function (htmlName) {
		var thisObj = this;
		this.elementName = htmlName;

		this.country = $("#"+this.elementName+"_country").val();
		this.region =  $("#"+this.elementName+"_region").val();
		this.locality =  $("#"+this.elementName+"_locality").val();

		if (!this.country)	$("select#"+thisObj.elementName+"_region").attr("disabled", "disabled");
		if (!this.region)	$("select#"+thisObj.elementName+"_locality").attr("disabled", "disabled");
		
		// add the magic calls...
		$("#"+this.elementName+"_country").change(function () { thisObj.countryChange(); });
		$("#"+this.elementName+"_region").change(function () { thisObj.regionChange(); });

		// function () { $("#"+htmlName+"[regionLoading]").show() }
		
	},
	countryChange: function () {
		var thisObj = this;
		this.country = $("#"+this.elementName+"_country").val();
		
		// setup the following selects
		this.clearSelect($("#"+this.elementName+"_region"));
		this.clearSelect($("#"+this.elementName+"_locality"));
		$("select#"+thisObj.elementName+"_locality").attr("disabled", "disabled");
		$("select#"+thisObj.elementName+"_region").attr("disabled", "disabled");
		
		// if they selected blank then return
		if (!this.country) return;
		
		$("#"+this.elementName+"_regionLoading").show();
		$("select#"+thisObj.elementName+"_region").attr("disabled", "disabled");
		
		// query the regions...
		$.getJSON("/ajax/region_lookup__"+this.country+"/",
		        function(data){
		        /*
			        $("select#"+thisObj.elementName+"_region").append(new Option("Please Select", ""));	
			        $.each(data.items, function(i,item){
			        	$("select#"+thisObj.elementName+"_region").append(new Option(item.text, item.value));		   
			        });  
			        */
			        
					var options = '<option value="">Please Select</option>';	
			        $.each(data.items, function(i,item){
						options += '<option value="' + item.value + '">' + item.text + '</option>';	   
			        });  
					$("select#"+thisObj.elementName+"_region").html(options);
					
					
			        // hide loading message
					$("#"+thisObj.elementName+"_regionLoading").hide();
					$("select#"+thisObj.elementName+"_region").removeAttr("disabled");
		        });
	},
	regionChange: function () {
		var thisObj = this;
		this.region = $("#"+this.elementName+"_region").val();
		this.clearSelect($("#"+this.elementName+"_locality"));
		$("select#"+thisObj.elementName+"_locality").attr("disabled", "disabled");
		
		if (!this.region) return;
		$("#"+this.elementName+"_localityLoading").show();
		
		// query the regions...
		$.getJSON("/ajax/locality_lookup__"+this.country+"_"+this.region+"/",
		        function(data){
		/*	        $("select#"+thisObj.elementName+"_locality").append(new Option("Please Select", ""));	
			        $.each(data.items, function(i,item){
			        	$("select#"+thisObj.elementName+"_locality").append(new Option(item.text, item.value));		   
			        });  
		*/
					var options = '<option value="">Please Select</option>';	
			        $.each(data.items, function(i,item){
						options += '<option value="' + item.value + '">' + item.text + '</option>';	   
			        });  
					$("select#"+thisObj.elementName+"_locality").html(options);
					
			        // hide loading message
					$("#"+thisObj.elementName+"_localityLoading").hide();
					$("select#"+thisObj.elementName+"_locality").removeAttr("disabled");
		        });
	},
	clearSelect: function (domObj) {
		domObj.get(0).options.length = 0;
		
	}
});