$(document).ready(init);
       
       var stateValueType = "";
       
       function init() {
           $(".IPGLocationDropDownListLabel").hide();
           $(".IPGLocationDropDownList").hide();
            $(".IPGLocationDropDownList").each(
                  function ()  {
                      $(this).after(getDDLReplacementHtml(this.id + "_ddlIPGCountry", this.id + "_ddlIPGState"));
                      var hiddenList = $(this)[0];
                      var valLen = hiddenList.options[1].value.length;
                      if(valLen < 5) {
                           stateValueType = "abbrev";
                      }
                  }
             );
           
           $.ajax({ url: "/WebComponents/getStateList.ashx",
                          success:  populateCountryList
                     });
                     
           $(".IPGCountry").change(onCountryChange);
           $(".IPGCountryState").change(onLocationChange);

            $(".IPGLocationDropDownList").each(
                  function ()  {
                      if (this.selectedIndex >= 0) {
                          var selValue = "";
                          selValue = this.options[this.selectedIndex].value;
                          preSelectState(this, selValue);
                      }
                  }
             );

       }

      function preSelectState(ddlHiddenState, selValue) {
           var ddlStateListName = ddlHiddenState.id + "_ddlIPGState";
           var ddlCountryListName = ddlHiddenState.id + "_ddlIPGCountry";
           var ddlStateList = $("#" + ddlStateListName)[0];
           var ddlCountryList = $("#" + ddlCountryListName)[0];
           
           $.ajax({ url: "/WebComponents/getStateList.ashx",
                          data: {selStateValue: selValue } ,
                          success:  function(xmlData) {  
                                   prePopulateLists(ddlCountryList, ddlStateList, xmlData, selValue);
                          }
                     });
      }

      function  prePopulateLists(ddlCountryList, ddlStateList, xmlData, selectStateValue) {

          populateStateList(ddlStateList, xmlData);

         for(i=0;i<ddlStateList.length;i++) {
               if(ddlStateList.options[i].value== selectStateValue )  {
                    ddlStateList.selectedIndex=i
                }
           }

          var selGroupValue = "";

          $(xmlData).find('state').each (
                       function() {
                              selGroupValue = $(this).find('country_abbrev').text();
                       }
           );

          for(i=0;i<ddlCountryList.length;i++) {
               if(ddlCountryList.options[i].value== selGroupValue )  {
                    ddlCountryList.selectedIndex=i
                }
           }

      }

      function getDDLReplacementHtml(countryDDLID, stateDDLID) {
          var somehtml = "";
          somehtml += '<span class="IPGCountryLabel">Country/Region</span><br />';
          somehtml += ' <select id="' + countryDDLID + '" class="IPGCountry" ></select>';
          somehtml += '<br />';
          somehtml += '<em>A selection from the list below is necessary, if Country/Region is selected</em><br />';
          somehtml += '<br />';
          somehtml += '<span class="IPGCountryLabel">Country/State/Province</span><br />';
          somehtml += '<select id="' + stateDDLID + '" class="IPGCountryState" ></select><br/>';
          return somehtml;
      }

      function populateCountryList(xmldata, textStatus) {
          $(".IPGCountry").each(
              function() {
                  var ddl = this;
                  ddl.options.length=0;
                  ddl.options[ddl.options.length] = new Option("-- select an option --", "", true, false);
                  $(xmldata).find('country').each (
                       function() {
                              ddl.options[ddl.options.length] = new Option($(this).find('name').text(), $(this).find('code').text(), false, false);
                        }
                 );
             }  
         );
      }
      
      function onCountryChange() {
          var selectCountryAbbrev = this.options[this.selectedIndex].value ;
          var ddlStateListName = this.id.replace("_ddlIPGCountry", "_ddlIPGState");
          var ddlStateList = $("#" + ddlStateListName)[0];
          if (selectCountryAbbrev == "") {
              setHiddenValue(this.id.replace("_ddlIPGCountry", ""), "");
              ddlStateList.options.length = 1;
          } else {
              $.ajax({ url: "/WebComponents/getStateList.ashx",
                          data: {countryAbbrev: selectCountryAbbrev } ,
                          success:  function(xmlData) {  
                                   populateStateList(ddlStateList, xmlData);
                          }
                     });
          }
      }

      function populateStateList(ddlSt, xmldata) {
          ddlSt.options.length=0;
          ddlSt.options[ddlSt.options.length] = new Option("-- select an option --", "", true, false);

          $(xmldata).find('state').each (
                   function() {
                       if (stateValueType == "abbrev") {
                             ddlSt.options[ddlSt.options.length] = new Option($(this).find('name').text(), $(this).find('abbrev').text(), false, false);
                       } else {
                             ddlSt.options[ddlSt.options.length] = new Option($(this).find('name').text(), $(this).find('state_id').text(), false, false);
                      }
                   }
           );
      }
      
      
     function onLocationChange() {
          var selectStateValue = this.options[this.selectedIndex].value ;
          var idName = this.id.replace("_ddlIPGState", "");
          
          setHiddenValue(idName, selectStateValue);
      }
      
      function setHiddenValue(hiddenListName, selectedValue) {
          var ddlState = $("#" + hiddenListName)[0];
          if (selectedValue == "") {
              ddlState.selectedIndex = -1;
          } else {
              for(i=0;i<ddlState.length;i++) {
                   if(ddlState.options[i].value== selectedValue )  {
                       ddlState.selectedIndex=i
                    }
               }
          }
      
      }