// Format: COUNTRY_ID: [stateIdFrom, stateIdTo], ...
window.xFormStates={
  124: [60, 71], // Canada
	840: [ 0, 51]  // United States
};

/**
 * Put something like this in your XFrom's layout:
 *
 * <script src="/modules/xforms/xformstates.js" type="text/javascript"/>  
 * <script type="text/javascript">initXFormStates("1136914547", "1136914562", "hideIt");</script>
 *
 * @access private
 * @param string countryId The numeric number of the field in XForm
 * @param string stateId  The numeric number of the field in XForm
 * @param stateBlockId the ID attribute of the HTML to hide if no states available.
 * @return void
 */
function initXFormStates(countryId, stateId, stateBlockId) {
	// Find country
	var country=document.getElementById(countryNodeId='xFormField'+countryId);
	var state=document.getElementById(stateNodeId='xFormField'+stateId);

	// Check
	if (!country) alert('Country field with id "'+countryNodeId+'" not found!');
	if (!state) alert('State field with id "'+stateNodeId+'" not found!');

	// Install listener
	country.onchange=function() {updateXFormStates(countryId, stateId, stateBlockId);};
	country.form.onsubmit=function() {return validateXFormStates(countryId, stateId, stateBlockId);};

	// MORON IE CANNOT HIDE ITEMs IN SELECT - MUST REMOVE THEM FROM THE DOM
	// Remove all from the list
	state.stateList=[];
  for(var i=state.childNodes.length - 1; i >= 0; i--) {
		if (state.childNodes[i].nodeType==1) {
			state.stateList.push(state.childNodes[i]);
		}
  }
	updateXFormStates(countryId, stateId, stateBlockId);
}

function updateXFormStates(countryId, stateId, stateBlockId) {
	// Find the elements
	var country=document.getElementById(countryNodeId='xFormField'+countryId);
	var state=document.getElementById(stateNodeId='xFormField'+stateId);
	var stateBlock=document.getElementById(stateBlockId);

	// No states
	if (window.xFormStates[country.value] == undefined) { 
		state.selectedIndex=1;
	  state.disabled=true; // Otherwise it won't be submitted (if display: none)
		state.style.visibility='hidden';
		stateBlock && (stateBlock.style.visibility='hidden');
	  return;
  } 

	// Show relevant
	state.style.visibility='visible';
	stateBlock && (stateBlock.style.visibility='visible');
  state.disabled=false;
	var from=window.xFormStates[country.value][0];
	var to=window.xFormStates[country.value][1];
	var itemValue;

	removeAllChildren(state);
	for(var i=state.stateList.length - 1; i >= 0; i--) {
		itemValue=parseInt(state.stateList[i].getAttribute('value'))
		if (!itemValue || (from <= itemValue && itemValue <= to)) { // show
			state.appendChild(state.stateList[i]);
    }
  }

	// Reset seletion
	if (state.value > to || state.value < from) state.value="";
}

function removeAllChildren(node) {
  for(var i=node.childNodes.length - 1; i >= 0; i--) {
		node.removeChild(node.childNodes[i]);
	}
}

function validateXFormStates(countryId, stateId, stateBlockId) {
	// Find the elements
	var country=document.getElementById(countryNodeId='xFormField'+countryId);
	var state=document.getElementById(stateNodeId='xFormField'+stateId);
	var stateBlock=document.getElementById(stateBlockId);

	if (state.childNodes.length && !state.value) {
			alert('Select the state, please.');
			return false;
	}

	return true;
}