<input type="hidden" name="<?php echo $addressPrefix; ?>[type]" value="<?php echo $addressPrefix; ?>" data-reset_value="<?php echo $addressPrefix; ?>"/>
<div class="form-group">
  <div class="col-sm-12">
    <label class="control-label"><?php echo get_phrase('line_1'); ?></label>
    <input class="form-control" type="text" name="<?php echo $addressPrefix; ?>[line_1]" value=""/>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <label class="control-label"><?php echo get_phrase('line_2'); ?></label>
    <input class="form-control" type="text" name="<?php echo $addressPrefix; ?>[line_2]" value=""/>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-6">
    <div>
      <label class="control-label"><?php echo get_phrase('country'); ?></label>
    </div>
    <div>
      <select class="form-control" name="<?php echo $addressPrefix; ?>[country_id]"><option value=""><?php echo get_phrase('choose_one'); ?></option></select>
    </div>
  </div>
  <div class="col-sm-6">
    <div>
      <label class="control-label"><?php echo get_phrase('state'); ?></label>
    </div>
    <div>
      <select class="form-control" name="<?php echo $addressPrefix; ?>[state_id]"><option value=""><?php echo get_phrase('choose_one'); ?></option></select>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-6">
    <div>
      <label class="control-label"><?php echo get_phrase('postcode'); ?></label>
    </div>
    <div>
      <input type="text" class="form-control" name="<?php echo $addressPrefix; ?>[postcode]" value="" >
    </div>
  </div>
  <div class="col-sm-6">
    <div>
      <label class="control-label"><?php echo get_phrase('location'); ?></label>
    </div>
    <div>
      <select class="form-control" name="<?php echo $addressPrefix; ?>[location_id]"><option value=""><?php echo get_phrase('choose_one'); ?></option></select>
    </div>
  </div>

</div>
<script type="text/javascript">
var addresses={
  'load':function(form,field,addressData){
    var form=form,field=field,addressData=addressData,fields=['line_1','line_2','country_id','state_id','location_id','postcode'];
    fields.forEach(function(f){
      var el=document.querySelector(form+' *[name="'+field+'['+f+']"]');
      el.dataset['form']=form;
      el.dataset['field']=f;
      if (el.tagName=='SELECT'){
        _NS.DOM.cleanSelect(el);
        if (f!='location_id'){
          el.dataset['list']=field;
          el.onchange=function(event){addresses.updateLocationPart(event.target);};
        }
      }
    });

    if (typeof(addressData)=='undefined'){
      addresses.updateLocationPart(form+' select[name="'+field+'[country_id]"]');
    }
    else {
      document.querySelector(form+' *[name="'+field+'[line_1]"]').value=addressData['line_1'];
      document.querySelector(form+' *[name="'+field+'[line_2]"]').value=addressData['line_2'];
      document.querySelector(form+' *[name="'+field+'[postcode]"]').value=addressData['postcode'];
      addresses.updateSelector(document.querySelector(form+' select[name="'+field+'[country_id]"]'),addressData['countries'],'country_id',addressData['country_id']);
      addresses.updateSelector(document.querySelector(form+' select[name="'+field+'[state_id]"]'),addressData['states'],'state_id',addressData['state_id']);
      addresses.updateSelector(document.querySelector(form+' select[name="'+field+'[location_id]"]'),addressData['locations'],'location_id',addressData['location_id']);
    }
  }
  ,'updateLocationPart':function(sourceList,data,chosenID){
    var sourceList=sourceList,sourceValue='',target='',targetList={},URL='',params={},form='',field='',chosenID=chosenID;

    if (typeof(sourceList)=='string'){
      sourceList=document.querySelector(sourceList);
      target='country_id';
      URL='countries';
    }
    else {
      switch(sourceList.dataset['field']){
        case 'country_id':
          target='state_id';
          URL='states';
          _NS.DOM.cleanSelect(sourceList.dataset['form']+' select[name^="'+sourceList.dataset['list']+'[location_id]"]');
        break;
        case 'state_id':
          target='location_id';
          URL='select';
        break;
      }
      params[sourceList.dataset['field']]=sourceList.value;
    }
    targetList=document.querySelector(sourceList.dataset['form']+' select[name="'+sourceList.dataset['list']+'['+target+']"]');
    _NS.DOM.cleanSelect(sourceList.dataset['form']+' select[name^="'+sourceList.dataset['list']+'['+target+']"]');
    if (typeof(data)=='undefined'){
      _NS.post('<?php echo base_url(); ?>location/'+URL,params,{
        'success':function(reply){
          addresses.updateSelector(targetList,reply.data,target);
        }
      },1);
    }
    else {
      addresses.updateSelector(targetList,data,target,chosenID);
    }
  }
  ,'updateSelector':function(list,data,fieldID,chosenID){
    var options=[];
    data.forEach(function(o){
      options.push('<option class="v'+o[fieldID]+'" value="'+o[fieldID]+'"'
        +((o[fieldID]==chosenID)?' selected="selected"':'')+'>'+o['name']+'</option>');
    });
    _NS.DOM.cleanSelect(list);
    list.insertAdjacentHTML('beforeend',options.join(''));
  }
};
</script>