(function(context,$) {

  "use strict";
  context.JK = context.JK || {};
  context.JK.OrderScreen = function(app) {

    var EVENTS = context.JK.EVENTS;
    var logger = context.JK.logger;

    var $screen = null;
    var $templateOrderContent = null;
    var $templatePurchasedJamTrack = null;
    var $navigation = null;
    var $billingInfo = null;
    var $shippingInfo = null;
    var $paymentMethod = null;
    var $shippingAddress = null;
    var $shippingAsBilling = null;
    var $paymentInfoPanel = null;
    var $orderPanel = null;
    var $thanksPanel = null;
    var $jamTrackInBrowser = null;
    var $purchasedJamTrack = null;
    var $purchasedJamTrackHeader = null;
    var $purchasedJamTracks = null;
    var $orderContent = null;
    var userDetail = null;
    var step = null;
    var billing_info = null;
    var shipping_info = null;
    var shipping_as_billing = null;
    var downloadJamTracks = [];
    var purchasedJamTracks = null;
    var purchasedJamTrackIterator = 0;

    function beforeShow() {
      beforeShowPaymentInfo();
      resetJamTrackDownloadInfo();
    }

    function beforeShowPaymentInfo() {
      step = 2;
      renderNavigation();
      renderAccountInfo();
      $("#order_error").addClass("hidden")
    }

    function resetJamTrackDownloadInfo() {
      $purchasedJamTrack.addClass('hidden');
      $purchasedJamTracks.children().remove()
      $jamTrackInBrowser.hide('hidden');
    }

    function renderAccountInfo() {
      rest.getUserDetail()
        .done(populateAccountInfo)
        .error(app.ajaxError);
    }

    function populateAccountInfo(user) {
      userDetail = user;

      if (userDetail.has_recurly_account) {
        rest.getBillingInfo()
          .done(function(response) {
            $billingInfo.find("#billing-first-name").val(response.first_name);
            $billingInfo.find("#billing-last-name").val(response.last_name);
            $billingInfo.find("#billing-address1").val(response.address1);
            $billingInfo.find("#billing-address2").val(response.address2);
            $billingInfo.find("#billing-city").val(response.city);
            $billingInfo.find("#billing-state").val(response.state);
            $billingInfo.find("#billing-zip").val(response.zip);
            $billingInfo.find("#billing-country").val(response.country);

            $shippingAddress.find("#shipping-first-name").val(response.first_name);
            $shippingAddress.find("#shipping-last-name").val(response.last_name);
            $shippingAddress.find("#shipping-address1").val(response.address1);
            $shippingAddress.find("#shipping-address2").val(response.address2);
            $shippingAddress.find("#shipping-city").val(response.city);
            $shippingAddress.find("#shipping-state").val(response.state);
            $shippingAddress.find("#shipping-zip").val(response.zip);
            $shippingAddress.find("#shipping-country").val(response.country);
          })
          .error(app.ajaxError);
      }
      else {
        $billingInfo.find("#billing-first-name").val(userDetail.first_name);
        $billingInfo.find("#billing-last-name").val(userDetail.last_name);
        $billingInfo.find("#billing-city").val(userDetail.city);
        $billingInfo.find("#billing-state").val(userDetail.state);
        $billingInfo.find("#billing-country").val(userDetail.country);

        $shippingAddress.find("#shipping-first-name").val(userDetail.first_name);
        $shippingAddress.find("#shipping-last-name").val(userDetail.last_name);
        $shippingAddress.find("#shipping-city").val(userDetail.city);
        $shippingAddress.find("#shipping-state").val(userDetail.state);
        $shippingAddress.find("#shipping-country").val(userDetail.country);
      }
    }

    function afterShow(data) {
      // XXX : style-test code
      // moveToThanks({jam_tracks: [{id: 14, jam_track_right_id: 11, name: 'Back in Black'}, {id: 15, jam_track_right_id: 11, name: 'In Bloom'}, {id: 16, jam_track_right_id: 11, name: 'Love Bird Supreme'}]});
    }

    function beforeHide() {
      if(downloadJamTracks) {
        context._.each(downloadJamTracks, function(downloadJamTrack) {
          downloadJamTrack.destroy();
          downloadJamTrack.root.remove();
        })

        downloadJamTracks = [];
      }
      purchasedJamTracks = null;
      purchasedJamTrackIterator = 0;
    }

    // TODO: Refactor: this function is long and fraught with many return points.  
    function next(e) {
      e.preventDefault();
      $("#order_error").addClass("hidden")

      // validation
      var billing_first_name = $billingInfo.find("#billing-first-name").val();
      var billing_last_name = $billingInfo.find("#billing-last-name").val();
      var billing_address1 = $billingInfo.find("#billing-address1").val();
      var billing_address2 = $billingInfo.find("#billing-address2").val();
      var billing_city = $billingInfo.find("#billing-city").val();
      var billing_state = $billingInfo.find("#billing-state").val();
      var billing_zip = $billingInfo.find("#billing-zip").val();
      var billing_country = $billingInfo.find("#billing-country").val();

      if (!billing_first_name) {
        $billingInfo.find('#divBillingFirstName .error-text').remove();
        $billingInfo.find('#divBillingFirstName').addClass("error");
        $billingInfo.find('#billing-first-name').after("<ul class='error-text'><li>First Name is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingFirstName').removeClass("error");
      }

      if (!billing_last_name) {
        $billingInfo.find('#divBillingLastName .error-text').remove();
        $billingInfo.find('#divBillingLastName').addClass("error");
        $billingInfo.find('#billing-last-name').after("<ul class='error-text'><li>Last Name is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingLastName').removeClass("error");
      }

      if (!billing_address1) {
        $billingInfo.find('#divBillingAddress1 .error-text').remove();
        $billingInfo.find('#divBillingAddress1').addClass("error");
        $billingInfo.find('#billing-address1').after("<ul class='error-text'><li>Address is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingAddress1').removeClass("error");
      }

      if (!billing_zip) {
        $billingInfo.find('#divBillingZip .error-text').remove();
        $billingInfo.find('#divBillingZip').addClass("error");
        $billingInfo.find('#billing-zip').after("<ul class='error-text'><li>Zip code is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingZip').removeClass("error");
      }

      if (!billing_state) {
        $billingInfo.find('#divBillingState .error-text').remove();
        $billingInfo.find('#divBillingState').addClass("error");
        $billingInfo.find('#billing-zip').after("<ul class='error-text'><li>State is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingState').removeClass("error");
      }

      if (!billing_city) {
        $billingInfo.find('#divBillingCity .error-text').remove();
        $billingInfo.find('#divBillingCity').addClass("error");
        $billingInfo.find('#billing-city').after("<ul class='error-text'><li>City is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingCity').removeClass("error");
      }

      if (!billing_country) {
        $billingInfo.find('#divBillingCountry .error-text').remove();
        $billingInfo.find('#divBillingCountry').addClass("error");
        $billingInfo.find('#billing-country').after("<ul class='error-text'><li>Country is required</li></ul>");

        return false;
      }
      else {
        $billingInfo.find('#divBillingCountry').removeClass("error");
      }

      shipping_as_billing = $shippingAsBilling.is(":checked");
      var shipping_first_name, shipping_last_name, shipping_address1, shipping_address2;
      var shipping_city, shipping_state, shipping_zip, shipping_country;

      if (!shipping_as_billing) {
        shipping_first_name = $shippingAddress.find("#shipping-first-name").val();
        shipping_last_name = $shippingAddress.find("#shipping-last-name").val();
        shipping_address1 = $shippingAddress.find("#shipping-address1").val();
        shipping_address2 = $shippingAddress.find("#shipping-address2").val();
        shipping_city = $shippingAddress.find("#shipping-city").val();
        shipping_state = $shippingAddress.find("#shipping-state").val();
        shipping_zip = $shippingAddress.find("#shipping-zip").val();
        shipping_country = $shippingAddress.find("#shipping-country").val();

        if (!shipping_first_name) {
          $shippingAddress.find('#divShippingFirstName .error-text').remove();
          $shippingAddress.find('#divShippingFirstName').addClass("error");
          $shippingAddress.find('#shipping-first-name').after("<ul class='error-text'><li>First Name is required</li></ul>");

          return false;
        }
        else {
          $shippingInfo.find('#divShippingFirstName').removeClass("error");
        }

        if (!shipping_last_name) {
          $shippingAddress.find('#divShippingLastName .error-text').remove();
          $shippingAddress.find('#divShippingLastName').addClass("error");
          $shippingAddress.find('#shipping-last-name').after("<ul class='error-text'><li>Last Name is required</li></ul>");

          return false;
        }
        else {
          $shippingInfo.find('#divShippingLastName').removeClass("error");
        }

        if (!shipping_address1) {
          $shippingAddress.find('#divShippingAddress1 .error-text').remove();
          $shippingAddress.find('#divShippingAddress1').addClass("error");
          $shippingAddress.find('#shipping-address1').after("<ul class='error-text'><li>Address is required</li></ul>");

          return false;
        }
        else {
          $shippingInfo.find('#divShippingAddress1').removeClass("error");
        }

        if (!shipping_zip) {
          $shippingAddress.find('#divShippingZip .error-text').remove();
          $shippingAddress.find('#divShippingZip').addClass("error");
          $shippingAddress.find('#shipping-zip').after("<ul class='error-text'><li>Zip code is required</li></ul>");

          return false;
        }
        else {
          $shippingInfo.find('#divShippingZip').removeClass("error");
        }

        if (!shipping_state) {
          $shippingAddress.find('#divShippingState .error-text').remove();
          $shippingAddress.find('#divShippingState').addClass("error");
          $shippingAddress.find('#shipping-zip').after("<ul class='error-text'><li>State is required</li></ul>");

          return false;
        }
        else {
          $shippingInfo.find('#divShippingState').removeClass("error");
        }

        if (!shipping_city) {
          $shippingAddress.find('#divShippingCity .error-text').remove();
          $shippingAddress.find('#divShippingCity').addClass("error");
          $shippingAddress.find('#shipping-city').after("<ul class='error-text'><li>City is required</li></ul>");

          return false;
        }
        else {
          $shippingInfo.find('#divShippingCity').removeClass("error");
        }

        if (!shipping_country) {
          $shippingAddress.find('#divShippingCountry .error-text').remove();
          $shippingAddress.find('#divShippingCountry').addClass("error");
          $shippingAddress.find('#shipping-country').after("<ul class='error-text'><li>Country is required</li></ul>");

          return false;
        }
        else {
          $shippingAddress.find('#divShippingCountry').removeClass("error");
        }
      }

      var card_name = $paymentMethod.find("#card-name").val();
      var card_number = $paymentMethod.find("#card-number").val();
      var card_year = $paymentMethod.find("#card_expire-date_1i").val();
      var card_month = $paymentMethod.find("#card_expire-date_2i").val();
      var card_verify = $paymentMethod.find("#card-verify").val();

      if (!card_name) {
        $paymentMethod.find('#divCardName .error-text').remove();
        $paymentMethod.find('#divCardName').addClass("error");
        $paymentMethod.find('#card-name').after("<ul class='error-text'><li>Card Name is required</li></ul>");
        return false;
      } else {
        $paymentMethod.find('#divCardName').removeClass("error");
      }

      if (!card_number) {
        $paymentMethod.find('#divCardNumber .error-text').remove();
        $paymentMethod.find('#divCardNumber').addClass("error");
        $paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is required</li></ul>");
        return false;
      } else if (!$.payment.validateCardNumber(card_number)) {     
        $paymentMethod.find('#divCardNumber .error-text').remove();
        $paymentMethod.find('#divCardNumber').addClass("error");
        $paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");      
        return false;
      } else {
        $paymentMethod.find('#divCardNumber').removeClass("error");
      }

      if (!$.payment.validateCardExpiry(card_month, card_year)) {     
        $paymentMethod.find('#divCardExpiry .error-text').remove();
        $paymentMethod.find('#divCardExpiry').addClass("error");
        $paymentMethod.find('#card-expiry').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");      
      } else {
        $paymentMethod.find('#divCardExpiry').removeClass("error");
      }

      if (!card_verify) {
        $paymentMethod.find('#divCardVerify .error-text').remove();
        $paymentMethod.find('#divCardVerify').addClass("error");
        $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is required</li></ul>");

        return false;
      } else if(!$.payment.validateCardCVC(card_verify)) {
        $paymentMethod.find('#divCardVerify .error-text').remove();
        $paymentMethod.find('#divCardVerify').addClass("error");
        $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is not valid.</li></ul>");

        return false;
      } else {
        $paymentMethod.find('#divCardVerify').removeClass("error");
      }

      billing_info = {};
      shipping_info = {};
      billing_info.first_name = billing_first_name;
      billing_info.last_name = billing_last_name;
      billing_info.address1 = billing_address1;
      billing_info.address2 = billing_address2;
      billing_info.city = billing_city;
      billing_info.state = billing_state;
      billing_info.country = billing_country;
      billing_info.zip = billing_zip;
      billing_info.number = card_number;
      billing_info.month = card_month;
      billing_info.year = card_year;
      billing_info.verification_value = card_verify;          
      
      if (shipping_as_billing) {
        shipping_info = $.extend({},billing_info);
        delete shipping_info.number;
        delete shipping_info.month;
        delete shipping_info.year;
        delete shipping_info.verification_value;
      } else {
        shipping_info.first_name = shipping_first_name;
        shipping_info.last_name = shipping_last_name;
        shipping_info.address1 = shipping_address1;
        shipping_info.address2 = shipping_address2;
        shipping_info.city = shipping_city;
        shipping_info.state = shipping_state;
        shipping_info.country = shipping_country;
        shipping_info.zip = shipping_zip;
      }

      $paymentInfoPanel.find("#payment-info-next").addClass("disabled");
      $paymentInfoPanel.find("#payment-info-next").off("click");

      rest.createRecurlyAccount({billing_info: billing_info})
        .done(function() {
          moveToOrder();
          $paymentInfoPanel.find("#payment-info-next").removeClass("disabled");          
          $paymentInfoPanel.find("#payment-info-next").on("click", next);
        })
        .fail(errorHandling);      
    }

    function errorHandling(xhr, ajaxOptions, thrownError) {
      $.each(xhr.responseJSON.errors, function(key, error) {
        if (key == 'number') {
          $paymentMethod.find('#divCardNumber .error-text').remove();
          $paymentMethod.find('#divCardNumber').addClass("error");
          $paymentMethod.find('#card-number').after("<ul class='error-text'><li>" + error + "</li></ul>");
        }
        else if (key == 'verification_value') {
          $paymentMethod.find('#divCardVerify .error-text').remove();
          $paymentMethod.find('#divCardVerify').addClass("error");
          $paymentMethod.find('#card-verify').after("<ul class='error-text'><li>" + error + "</li></ul>");
        }
      });

      $paymentInfoPanel.find("#payment-info-next").addClass("disabled");
      $paymentInfoPanel.find("#payment-info-next").on('click', next);
    }

    function orderErrorHandling(xhr, ajaxOptions, thrownError) {
      var message = "Error submitting payment: "
      $.each(xhr.responseJSON.errors, function(key, error) {
        message += key + ": " + error
      })
      $("#order_error").text(message)
      $("#order_error").removeClass("hidden")
      $orderContent.find(".place-order").on('click', placeOrder)
    }

    function beforeShowOrder() {
      step = 3;
      renderNavigation();
      populateOrderPage();
    }

    function clearOrderPage() {
      $orderContent.empty();
    }

    function populateOrderPage() {
      clearOrderPage();

      rest.getShoppingCarts()
        .done(renderOrderPage)
        .fail(app.ajaxError);
    }

    function renderOrderPage(carts) {
      var data = {}

      var sub_total = 0.0
      var taxes = 0.0
      $.each(carts, function(index, cart) {
        sub_total += parseFloat(cart.product_info.price) * parseFloat(cart.quantity)
      });
      data.grand_total = (sub_total + taxes).toFixed(2)
      data.sub_total = sub_total.toFixed(2)
      data.taxes = taxes.toFixed(2)      
      data.carts = carts
      data.billing_info = billing_info
      data.shipping_info = shipping_info
      data.shipping_as_billing = shipping_as_billing
      var orderContentHtml = $(
        context._.template(
          $templateOrderContent.html(),
          data,
          {variable: 'data'}
        )
      )

      $orderContent.append(orderContentHtml)

      $orderPanel.find(".change-payment-info").on('click', moveToPaymentInfo)
      $orderContent.find(".place-order").on('click', placeOrder)
    }

    function moveToOrder() {
      $paymentInfoPanel.addClass("hidden");
      $orderPanel.removeClass("hidden");
      beforeShowOrder();
    }

    function moveToThanks(purchaseResponse) {
      $("#order_error").addClass("hidden")
      $paymentInfoPanel.addClass("hidden")
      $orderPanel.addClass("hidden")
      $thanksPanel.removeClass("hidden")
      rest.clearShoppingCart()
      beforeShowOrder()
      handleJamTracksPurchased(purchaseResponse.jam_tracks)
    }

    function handleJamTracksPurchased(jamTracks) {
      // were any JamTracks purchased?
      var jamTracksPurchased = jamTracks && jamTracks.length > 0;
      if(jamTracksPurchased) {
        if(gon.isNativeClient) {
          startDownloadJamTracks(jamTracks)
        }
        else {
          $jamTrackInBrowser.removeClass('hidden');
        }
      }
    }

    function startDownloadJamTracks(jamTracks) {
      // there can be multiple purchased JamTracks, so we cycle through them

      purchasedJamTracks = jamTracks;

      // populate list of jamtracks purchased, that we will iterate through graphically
      context._.each(jamTracks, function(jamTrack) {
        var downloadJamTrack = new context.JK.DownloadJamTrack(app, jamTrack, 'small');
        var $purchasedJamTrack = $(context._.template(
          $templatePurchasedJamTrack.html(),
          jamTrack,
          {variable: 'data'}
        ));

        $purchasedJamTracks.append($purchasedJamTrack)

        // show it on the page
        $purchasedJamTrack.append(downloadJamTrack.root)

        downloadJamTracks.push(downloadJamTrack)
      })

      iteratePurchasedJamTracks();
    }

    function iteratePurchasedJamTracks() {
      if(purchasedJamTrackIterator < purchasedJamTracks.length ) {
        var downloadJamTrack = downloadJamTracks[purchasedJamTrackIterator++];

        // make sure the 'purchasing JamTrack' section can be seen
        $purchasedJamTrack.removeClass('hidden');

        // the widget indicates when it gets to any transition; we can hide it once it reaches completion
        $(downloadJamTrack).on(EVENTS.JAMTRACK_DOWNLOADER_STATE_CHANGED, function(e, data) {

          if(data.state == downloadJamTrack.states.synchronized) {
            logger.debug("jamtrack " + downloadJamTrack.jamTrack.name + " synchronized;")
            //downloadJamTrack.root.remove();
            downloadJamTrack.destroy();

            // go to the next JamTrack
            iteratePurchasedJamTracks()
          }
        })

        logger.debug("jamtrack " + downloadJamTrack.jamTrack.name + " downloader initializing")

        // kick off the download JamTrack process
        downloadJamTrack.init()

        // XXX style-test code
        // downloadJamTrack.transitionError("package-error", "The server failed to create your package.")

      }
      else {
        logger.debug("done iterating over purchased JamTracks")
        $purchasedJamTrackHeader.text('All purchased JamTracks have been downloaded successfully!  You can now play them in a session.')
      }
    }

    function moveToPaymentInfo(e) {
      e.preventDefault();
      $paymentInfoPanel.removeClass("hidden");
      $orderPanel.addClass("hidden");
      beforeShowPaymentInfo();
    }

    function toggleShippingAsBilling(e) {
      e.preventDefault();

      var shipping_as_billing = $(e.target).is(':checked');

      if (!shipping_as_billing) {
        $shippingAddress.removeClass("hidden");
      }
      else {
        $shippingAddress.addClass("hidden");
      }
    }

    function placeOrder(e) {
      e.preventDefault();
      $orderContent.find(".place-order").off('click')
      rest.getShoppingCarts()
        .done(function(carts) {
          var jam_track_ids = _.map(carts, function(cart){
            return cart.product_info.product_id
          })
          rest.placeOrder({jam_tracks: jam_track_ids})
            .done(moveToThanks)
            .fail(orderErrorHandling);
        }
      ).fail(app.ajaxError);      
    }

    function events() {
      $paymentInfoPanel.find("#payment-info-next").on('click', next);
      $shippingAsBilling.on('ifChanged', toggleShippingAsBilling);
    }

    function reset() {
    }

    function renderNavigation() {
      $navigation.html("");
      var navigationHtml = $(
        context._.template(
          $('#template-checkout-navigation').html(),
          {current: step},
          {variable: 'data'}
        )
      );

      $navigation.append(navigationHtml);
    }

    function initializeControls() {
      $("form.payment-info").iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
        inheritClass: true
      });

      // Use jquery.payment to limit characters and length:
      $paymentMethod.find("#card-number").payment('formatCardNumber');
      $paymentMethod.find("#card-verify").payment('formatCardCVC');
    }

    function initialize() {
      var screenBindings = {
        'beforeShow': beforeShow,
        'afterShow': afterShow,
        'beforeHide' : beforeHide
      };
      app.bindScreen('order', screenBindings);

      $screen             = $("#orderScreen");
      $templateOrderContent = $("#template-order-content");
      $templatePurchasedJamTrack = $('#template-purchased-jam-track');
      $paymentInfoPanel   = $screen.find(".checkout-payment-info");
      $orderPanel         = $screen.find(".order-panel");
      $thanksPanel        = $screen.find(".thanks-panel");
      $jamTrackInBrowser  = $screen.find(".thanks-detail.jam-tracks-in-browser");
      $purchasedJamTrack  = $thanksPanel.find(".thanks-detail.purchased-jam-track");
      $purchasedJamTrackHeader =  $purchasedJamTrack.find(".purchased-jam-track-header");
      $purchasedJamTracks = $purchasedJamTrack.find(".purchased-list")
      $navigation         = $screen.find(".checkout-navigation-bar");
      $billingInfo        = $paymentInfoPanel.find(".billing-address");
      $shippingInfo       = $paymentInfoPanel.find(".shipping-address");
      $paymentMethod      = $paymentInfoPanel.find(".payment-method");
      $shippingAddress    = $paymentInfoPanel.find(".shipping-address-detail");
      $shippingAsBilling  = $paymentInfoPanel.find("#shipping-as-billing");
      $orderContent       = $orderPanel.find(".order-content");

      if($screen.length == 0) throw "$screen must be specified";
      if($navigation.length == 0) throw "$navigation must be specified";

      initializeControls();

      events();
    }

    this.initialize = initialize;

    return this;
  }
})(window,jQuery);