$(document).ready(initlb);
       
       function initlb() {
           $(".IPGLocationListBoxListLabel").hide();
           $(".IPGLocationListBoxList").hide();
            $(".IPGLocationListBoxList").each(
                  function ()  {
                      $(this).after(getDDLReplacementHtmllb(this.id + "_lbIPGCountry", this.id + "_lbIPGState", this.id + "_cbIPGState"));
                      $("#" + this.id + "_cbIPGState").click(onLocationClearlb);
                  }
             );
           
           $.ajax({ url: "/WebComponents/getStateList.ashx",
                          success:  populateCountryListlb
                     });
                     
                     
           $(".lbIPGCountry").change(onCountryChangelb);
           $(".lbIPGCountryState").change(onLocationChangelb);

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

       }

      function preSelectStatelb(ddlHiddenState, selValue) {
           var lbStateListName = ddlHiddenState.id + "_lbIPGState";
           var ddlCountryListName = ddlHiddenState.id + "_lbIPGCountry";
           var lbStateList = $("#" + lbStateListName)[0];
           var ddlCountryList = $("#" + ddlCountryListName)[0];
           
           $.ajax({ url: "/WebComponents/getStateList.ashx",
                          data: {selStateValue: selValue } ,
                          success:  function(xmlData) {  
                                   prePopulateListslb(ddlCountryList, lbStateList, xmlData, selValue);
                          }
                     });
      }

      function  prePopulateListslb(ddlCountryList, lbStateList, xmlData, selectStateValue) {

          populateStateListlb(lbStateList, 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 getDDLReplacementHtmllb(countryDDLID, statelbID, cbstatelbID) {
          var somehtml = "";
          somehtml += '<span class="IPGCountryLabel">Country/Region</span><br />';
          somehtml += ' <select id="' + countryDDLID + '" class="lbIPGCountry" ></select>';
          somehtml += '<br />';
          somehtml += '<br />';
          somehtml += '<span class="IPGCountryLabel">Country/State/Province</span><br />';
          somehtml += '<select size="4" multiple="multiple" id="' + statelbID + '" class="lbIPGCountryState" ></select>';
          somehtml += '<br />';
          somehtml += '<a id="' + cbstatelbID + '" href="#"  >Click here to clear all selections</a>';
          return somehtml;
      }

      function populateCountryListlb(xmldata, textStatus) {
          $(".lbIPGCountry").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 onCountryChangelb() {
          var selectCountryAbbrev = this.options[this.selectedIndex].value ;
          var ddlStateListName = this.id.replace("_lbIPGCountry", "_lbIPGState");
          var ddlStateList = $("#" + ddlStateListName)[0];
          $.ajax({ url: "/WebComponents/getStateList.ashx",
                          data: {countryAbbrev: selectCountryAbbrev } ,
                          success:  function(xmlData) {  
                                   populateStateListlb(ddlStateList, xmlData);
                          }
                     });
      }

      function populateStateListlb(ddlSt, xmldata) {
          ddlSt.options.length=0;

          $(xmldata).find('state').each (
                   function() {
                         ddlSt.options[ddlSt.options.length] = new Option($(this).find('name').text(), $(this).find('state_id').text(), false, false);
                   }
           );
           preSelectItemsFromHiddenValue(ddlSt.id);
      }

     function onLocationClearlb(e) {
         e.preventDefault();
         var idName = this.id.replace("_cbIPGState", "");
         var lbHiddenState = $("#" + idName)[0];
         lbHiddenState.selectedIndex = -1;
         var lbStateListName = idName + "_lbIPGState";
         var ddlCountryListName = idName + "_lbIPGCountry";
         var lbStateList = $("#" + lbStateListName)[0];
         var ddlCountryList = $("#" + ddlCountryListName)[0];
         lbStateList.selectedIndex = -1;
     }
      
      
     function onLocationChangelb() {
          var idName = this.id.replace("_lbIPGState", "");
          var lbHiddenState = $("#" + idName)[0];

          for(x=0;x<this.length;x++) {
               for(i=0;i<lbHiddenState.length;i++) {
                   if(lbHiddenState.options[i].value== this.options[x].value )  {
                       lbHiddenState.options[i].selected = this.options[x].selected;
                   }
               }
           }          
          
      }
 
     function preSelectItemsFromHiddenValue(lbVisibleStateName) {
          var visibleIDName = lbVisibleStateName;
          var hiddenIDName = lbVisibleStateName.replace("_lbIPGState", "");
          var lbVisibileState = $("#" + visibleIDName)[0];
          var lbHiddenState = $("#" + hiddenIDName)[0];
         lbVisibileState.selectedIndex = -1;
         
          for(i=0;i<lbHiddenState.length;i++) {
                if(lbHiddenState.options[i].selected) {
                    for(x=0;x<lbVisibileState.length;x++) {
                        if(lbHiddenState.options[i].value== lbVisibileState.options[x].value )  {
                            lbVisibileState.options[x].selected = true;
                        }
                    }
                }
           }          
     }