$(document).ready(setupShopNav);
$(document).ready(setupCoursePicker);
$(document).ready(toggleBillingFields);

// bind onchange for zipcode based address completion
$(document).ready(function() {

   $("input[name=shop_naw_zipcode]").change(function() {
      // notify user of action
      $("input[name=shop_naw_street]").val("Opzoeken..");
      $("input[name=shop_naw_city]").val("Opzoeken..");
      $("input[name=shop_naw_street]").attr("readonly", true);
      $("input[name=shop_naw_city]").attr("readonly", true);

      // get data from L2O
      $.get("/templates/snippets/ajax_zipcode.asp?field=street&zipcode="+$(this).val(), 
         function(data) { $("input[name=shop_naw_street]").val(data); }
      );
      $.get("/templates/snippets/ajax_zipcode.asp?field=city&zipcode="+$(this).val(), 
         function(data) { $("input[name=shop_naw_city]").val(data); }
      );

      // re-enable input
      $("input[name=shop_naw_street]").removeAttr("readonly");
      $("input[name=shop_naw_city]").removeAttr("readonly");
   
   });

   $("input[name=shop_bill_zipcode]").change(function() {
      // notify user of action
      $("input[name=shop_bill_street]").val("Opzoeken..");
      $("input[name=shop_bill_city]").val("Opzoeken..");
      $("input[name=shop_bill_street]").attr("readonly", true);
      $("input[name=shop_bill_city]").attr("readonly", true);

      // get data from L2O
      $.get("/templates/snippets/ajax_zipcode.asp?field=street&zipcode="+$(this).val(), 
         function(data) { $("input[name=shop_bill_street]").val(data); }
      );
      $.get("/templates/snippets/ajax_zipcode.asp?field=city&zipcode="+$(this).val(), 
         function(data) { $("input[name=shop_bill_city]").val(data); }
      );

      // re-enable input
      $("input[name=shop_bill_street]").removeAttr("readonly");
      $("input[name=shop_bill_city]").removeAttr("readonly");
   })
});


function setupShopNav() {
   $('.shop_prev').click(function () {
      location.href = '/webshop/' + $('#shop_nav_prevstep').val();
   });
   $('.shop_next').click(function () {
      $('#shop_nav_action').val('advance');
      $('#shop_stepform').get(0).submit();
   });
}

/* proc setupCoursePicker
   does: adds events and their actions to the add/remove buttons on the Opleiding tab.
*/
function setupCoursePicker() {
   var oplAdders = $('.submit_add');
   var oplRemovers = $('.submit_remove');
   var arrLocDates = [];

   oplAdders.click(function () {
      var productId = this.getAttribute('rel');
$('#shop_nav_action').val('advance');
      //set value to add and submit, letting ASP take care of the adding.
      $('#shop_opleiding_order_add').val(productId).get(0).form.submit();
      
      //goto next step
      
      //$('#shop_stepform').get(0).submit();
   });
   oplRemovers.click(function () {
      var productId = this.getAttribute('rel');

      //set value to add and submit, letting ASP take care of the removing.
      $('#shop_opleiding_order_remove').val(productId);
      $('#shop_opleiding_order_remove').parent().submit();

//      $('#shop_opleiding_order_remove').val(productId).get(0).form.submit();
   });
}

function toggleBillingFields() {
   $('#shop_nawoptions_bill_diffaddress').click(function () {
      $('.bill_diffaddress').css('display', (this.checked? 'block':'none'));
   });
}

function zipChanged(sForm, sField){
   var oForm = document.forms[sForm];
   oForm.zipchanged.value = sField;
   oForm.submit();
}

function payMethodChanged(sPaymethod){
   var oDivAccountNumber   = window.document.getElementById("shop_payment_accountnumber_container");
   var oDivAccountName     = window.document.getElementById("shop_payment_accountname_container");

   // account details required for EM
   if (sPaymethod == "EM"){
      oDivAccountNumber.style.display = "inline";
      oDivAccountName.style.display = "inline";
   }
   else{
      oDivAccountNumber.style.display = "none";
      oDivAccountName.style.display = "none";
   }
}