var city = '\
AP:HB:Hyderabad|\
AP:VIZAG:Vishakhapatnam|\
AS:GHY:Guwahati|\
BH:PAT:Patna|\
CTH:RAI:Raipur|\
DEL:ND:New Delhi|\
DEL:NCR:Delhi/NCR|\
GO:PAN:Panaji|\
GUJ:AHM:Ahmedabad|\
GUJ:BHAV:Bhavnagar|\
GUJ:VAD:Vadodara|\
GUJ:SUR:Surat|\
JK:JAM:Jammu|\
JK:SRI:Srinagar|\
JRD:RAN:Ranchi|\
KAR:BLURU:Bengaluru|\
KAR:MANG:Mangalore|\
KAR:BEL:Belgaum|\
KER:MAV:Mavelikkara|\
KER:KOCH:Kochi|\
KER:KOLL:Kollam|\
KER:KARU:Karunagapally|\
KER:TRI:Thiruvananthapuram|\
KER:CALI:Calicut|\
KER:KANN:Kannur|\
KER:THAL:Thalassery|\
KER:THALI:Thaliparamba|\
KER:THRI:Thrissur|\
KER:KOTT:Kottayam|\
KER:KOZ:Kozhencherry|\
KER:THIRU:Thiruvalla|\
MAR:DOMB:Dombivli|\
MAR:MUM:Mumbai|\
MAR:NAG:Nagpur|\
MAR:PUN:Pune|\
MAR:AKO:Akola|\
MAR:AHM:Ahmednagar|\
MAR:MIR:Miraj|\
MAR:JAL:Jalgaon|\
MAR:AUR:Aurangabad|\
MAR:KOLA:Kolhapur|\
MAR:NAS:Nasik|\
MIZ:AZ:Aizwal|\
MP:IND:Indore|\
NEP:KTM:Kathmandu|\
ORS:BUNW:Bhubaneswar|\
ORS:CUT:Cuttack|\
PUN:CH:Chandigarh|\
PUN:AMRIT:Amritsar|\
RAJ:JAI:Jaipur|\
RAJ:RKT:Rajkot|\
TN:CH:Chennai|\
TRI:AG:Agartala|\
UP:AG:Agra|\
UP:BAR:Bareilly|\
UP:LUC:Lucknow|\
UP:AL:Allahabad|\
UP:MEER:Meerut|\
UP:KAN:Kanpur|\
UP:GOR:Gorakhpur|\
UTT:DEH:Dehradun|\
WB:KOL:Kolkata|\
WB:DUR:Durgapur|\
';

// city data table
//
// 
// To edit the list, just delete a line or add a line.  Order is important.  The order 
// displayed is the order it appears on the drop down.
//
var state = '\
AN:Andaman & Nicobar|\
AP:Andhra Pradesh|\
ARP:Arunachal Pradesh|\
AS:Assam|\
BH:Bihar|\
CTH:Chhattisgarh|\
DNH:Dadra and Nagar Haveli|\
DD:Daman and Diu|\
DEL:Delhi|\
GO:Goa|\
GUJ:Gujarat|\
HAR:Haryana|\
HP:Himachal Pradesh|\
JK:Jammu and Kashmir|\
JRD:Jharkhand|\
KAR:Karnataka|\
KER:Kerala|\
LAK:Lakshadweep|\
MP:Madhya Pradesh|\
MAR:Maharashtra|\
MAN:Manipur|\
MEG:Meghalaya|\
MIZ:Mizoram|\
NAG:Nagaland|\
NEP:Nepal|\
ORS:Orissa|\
POND:Pondicherry|\
PUN:Punjab|\
RAJ:Rajasthan|\
SIK:Sikkim|\
TN:Tamil Nadu|\
TRI:Tripura|\
UT:Uttaranchal|\
UP:Uttar Pradesh|\
UTT:Uttarakhand|\
WB:West Bengal|\
';

// Save the state & city field names
var stateFieldCfgArray = document.getElementById('cs_config_state_field').value.split(' ');
var cityFieldCfgArray   = document.getElementById('cs_config_city_field').value.split(' ');

// Save the names of the fields that hold the state & city default values
var stateDefaultCfgArray = document.getElementById('cs_config_state_default').value.split(' ');
var cityDefaultCfgArray   = document.getElementById('cs_config_city_default').value.split(' ');

var defaultcity = false;
var defaultstate = false;

function TrimString(sInString) {
   
   if ( sInString ) {

      sInString = sInString.replace( /^\s+/g, "" );// strip leading
      return sInString.replace( /\s+$/g, "" );// strip trailing
   }
}
// Populates the state select with the counties from the state list
//
function populatestate(idName) {

   var stateLineArray = state.split('|');      // Split into lines

   var selObj = document.getElementById( idName );

   selObj.options[0] = new Option('Select city','');
   selObj.selectedIndex = 0;

   for (var loop = 0; loop < stateLineArray.length; loop++) {

      lineArray = stateLineArray[loop].split(':');

      stateCode  = TrimString(lineArray[0]);
      stateName  = TrimString(lineArray[1]);
   
      if ( stateCode != '' ) {

         selObj.options[loop + 1] = new Option(stateName, stateCode);
      }

      if ( defaultstate == stateCode ) {

         selObj.selectedIndex = loop + 1;
      }
   }
}
function populatecity( citycityIdName, stateIdName ) {

   var selObj = document.getElementById( cityIdName );
   var foundcity = false;

   // Empty options just in case new drop down is shorter
   //
   if ( selObj.type == 'select-one' ) {

      selObj.options.length = 0;

      selObj.options[0] = new Option('Select City','');
      selObj.selectedIndex = 0;
   }
   // Populate the drop down with citys from the selected state
   //
   var cityLineArray   = city.split("|");        // Split into lines

   var optionCntr = 1;

   for (var loop = 0; loop < cityLineArray.length; loop++) {

      lineArray = cityLineArray[loop].split(":");

      stateCode  = TrimString(lineArray[0]);
      cityCode    = TrimString(lineArray[1]);
      cityName    = TrimString(lineArray[2]);

      if ( document.getElementById( stateIdName ).value == stateCode && stateCode != '' ) {

         // If it's a input element, change it to a select
         //
         if ( selObj.type == 'text' ) {

            parentObj = document.getElementById( cityIdName ).parentNode;
            parentObj.removeChild(selObj);

            var inputSel = document.createElement("SELECT");
            inputSel.setAttribute("name","city"); 
            inputSel.setAttribute("id", cityIdName ); 

            parentObj.appendChild(inputSel) ;

            selObj = document.getElementById( cityIdName );
            selObj.options[0] = new Option('Select City','');
            selObj.selectedIndex = 0;
         }
   
         if ( cityCode != '' ) {

            selObj.options[optionCntr] = new Option(cityName, cityCode);
         }
         // See if it's selected from a previous post
         //
         if ( cityCode == defaultcity && stateCode == defaultstate ) {

            selObj.selectedIndex = optionCntr;
         }
         foundcity = true;
         optionCntr++
      }
   }
   // If the state has no citys, change the select to a text box
   //
   if ( ! foundcity ) {

      parentObj = document.getElementById( cityIdName ).parentNode;
      parentObj.removeChild(selObj);
 
      // Create the Input Field
      var inputEl = document.createElement("INPUT");

      inputEl.setAttribute("id",  cityIdName ); 
      inputEl.setAttribute("type", "text"); 
      inputEl.setAttribute("name", "city"); 
      inputEl.setAttribute("size", 20); 
      inputEl.setAttribute("value", defaultcity); 
      parentObj.appendChild(inputEl) ;
   }
   
}
// Called when city drop down is changed
// 
function updatecity( stateIdNameIn ) {

   for (var loop = 0; loop < stateFieldCfgArray.length; loop++) {
   
      stateIdName  = stateFieldCfgArray[loop];
      cityIdName    = cityFieldCfgArray[loop];

      // Read the default value hidden fields
      defaultstate = document.getElementById( stateDefaultCfgArray[loop] ).value;
      defaultcity   = document.getElementById( cityDefaultCfgArray[loop] ).value;

      if ( stateIdNameIn == stateIdName ) {

         populatecity( cityIdName, stateIdName );
      }
   }
}
// Initialize the drop downs
// 
function initstate() {

   for (var loop = 0; loop < stateFieldCfgArray.length; loop++) {
   
      stateIdName  = stateFieldCfgArray[loop];
      cityIdName    = cityFieldCfgArray[loop];

      // Read the default value hidden fields
      defaultstate = document.getElementById( stateDefaultCfgArray[loop] ).value;
      defaultcity   = document.getElementById( cityDefaultCfgArray[loop] ).value;

      populatestate( stateIdName);
      populatecity( cityIdName, stateIdName );
   }
}