$(function() {
	hideCities();
	changeState();
	
	$("#cityForm").change(function() {
		changeState();
	})
})

function hideCities() {
	$("#cityCloak").show();
	$("#cityselpar").hide();
}

function showCities() {
	$("#cityCloak").hide();
	$("#cityselpar").show();
}  

function changeState() {
  showCities();
  selectedState = document.forms['cityform'].state.value;
  stateClass = 'selcity_'+selectedState;

  citySel = document.forms['cityform'].city;
  cities = document.forms['cityform'].cities.options;
  numCities = (cities.length - 1);

  citySel.innerHTML = null;
  chooseOpt = document.createElement("option");
  chooseOpt.value = '';
  chooseOpt.text = 'Choose One';
  document.forms['cityform'].city.appendChild(chooseOpt)
  for(i=0;i<numCities;i=i+1) {
    if(cities[i].className == stateClass) {
      newOpt = document.createElement("option");
      newOpt.value = cities[i].value;
      newOptText = document.createTextNode(cities[i].text)
      newOpt.appendChild(newOptText);
      document.forms['cityform'].city.appendChild(newOpt)
    } 
  }
}

function statechange() {
  changeState();
}

function checkCity() {
  if(!document.getElementById) {return}
  cityselect = document.getElementById('select2');
  stateselect = document.getElementById('select1');
  if(cityselect.value == '' || stateselect.value == '') {
    alert('Please Choose Both City and State');
    return false;
  }
  return true
}