var CvvDescription = new Class({
  initialize: function(element) {
    this.element = element;
    this.link = element.getElement("a");
    this.description = element.getElement("div")

    this.link.addEvent("mouseover", this.show.bind(this));
    this.link.addEvent("mouseout", this.hide.bind(this));
  },

  show: function() {
    if(!this.element.hasClass("disabled")) {
      this.description.style.display = '';
    }
  },

  hide: function() {
    this.description.style.display = 'none';
  }
});

var RegionInput = new Class({
  initialize: function(form) {
    this.form = form;
    this.country_select = form.getElement("select.country");
    this.country_select.addEvent("change", this.changeRegions.bind(this));

    this.state = this.form.getElement(".state");
    this.province = this.form.getElement(".province");
    this.region = this.form.getElement(".region");

    this.param_name = this.form.getElement(".region input").getProperty("name");
    this.changeRegions();
  },

  changeRegions: function() {
    var country_code = this.country_select.getProperty("value");
    if(country_code == "US") {
      this.show(this.state);
      this.hide(this.province);
      this.hide(this.region);
    } else if(country_code == "CA") {
      this.show(this.province);
      this.hide(this.state);
      this.hide(this.region);
    } else {
      this.show(this.region);
      this.hide(this.state);
      this.hide(this.province);
    }
  },

  show: function(container) {
    container.style.display = '';
    this.inputFor(container).setProperty("name", this.param_name);
  },

  hide: function(container) {
    container.style.display = 'none';
    this.inputFor(container).removeProperty("name");
  },

  inputFor: function(container) {
    return container.getElement("input[type=text]") || container.getElement("select");
  }
});

var PaymentMethod = new Class({
  initialize: function(form) {
    this.form = form;
    this.express = this.form.getElement(".payment_method .express");
    this.standard = this.form.getElement(".payment_method .standard");
    this.credit_card_information = this.form.getElement(".credit_card_information");
    this.billing_address = this.form.getElement(".billing_address");

    this.express.addEvent("click", this.enterExpressMode.bind(this));
    this.standard.addEvent("click", this.enterStandardMode.bind(this));

    if(this.standard.checked) {
      this.enterStandardMode();
    } else {
      this.enterExpressMode();
    }
  },

  enterExpressMode: function() {
    this.disable();
    this.form.setProperty("action", this.express.getProperty("href"));
  },

  enterStandardMode: function() {
    this.enable();
    this.form.setProperty("action", this.standard.getProperty("href"));
  },

  disable: function() {
    this.credit_card_information.addClass("disabled");
    this.credit_card_information.getElement(".cvv .description").addClass("disabled");
    this.credit_card_information.getElements("input").each(function(input) {
      input.setProperty("disabled", "disabled");
    });
    this.credit_card_information.getElements("textarea").each(function(input) {
      input.setProperty("disabled", "disabled");
    });
    this.credit_card_information.getElements("select").each(function(input) {
      input.setProperty("disabled", "disabled");
    });
    this.billing_address.addClass("disabled");
    this.billing_address.getElements("input").each(function(input) {
      input.setProperty("disabled", "disabled");
    });
    this.billing_address.getElements("textarea").each(function(input) {
      input.setProperty("disabled", "disabled");
    });
    this.billing_address.getElements("select").each(function(input) {
      input.setProperty("disabled", "disabled");
    });
  },

  enable: function() {
    this.credit_card_information.removeClass("disabled");
    this.credit_card_information.getElement(".cvv .description").removeClass("disabled");
    this.credit_card_information.getElements("input").each(function(input) {
      input.removeProperty("disabled");
    });
    this.credit_card_information.getElements("textarea").each(function(input) {
      input.removeProperty("disabled");
    });
    this.credit_card_information.getElements("select").each(function(input) {
      input.removeProperty("disabled");
    });
    this.billing_address.removeClass("disabled");
    this.billing_address.getElements("input").each(function(input) {
      input.removeProperty("disabled");
    });
    this.billing_address.getElements("textarea").each(function(input) {
      input.removeProperty("disabled");
    });
    this.billing_address.getElements("select").each(function(input) {
      input.removeProperty("disabled");
    });
  }
});

var PlanSelector = new Class({
  initialize: function(plan_selector) {
    this.plan_selector = plan_selector;

    this.plans = this.plan_selector.getElements(".plan");
    this.plans.each(function(plan) {
      plan.addEvent("click", this.select.bind(this, plan));
    }.bind(this));

    if (this.plan_selector.getElement(".current_plan"))
      {
      this.plan_selector.getElement(".current_plan").style.opacity=.5;
      }

    this.subscription_recurring_checkbox = $("subscription_recurring");
    this.subscription_recurring_checkbox.addEvent("click", this.updateInvoice.bind(this));
    this.invoice = $$(".subscriptions .invoice")[0];
    this.recurring_label = this.plan_selector.getNext().getElement("label");
    this.recurring_label_template = this.recurring_label.getProperty("template");

    this.updateRecurringLabel();
    this.updateInvoice();
  },

  select: function(selected) {
    this.plans.each(function(plan) {
      plan.removeClass("selected");
    }.bind(this));

    selected.addClass("selected");
    selected.getElement("input").setProperty("checked", "checked");

    this.updateRecurringLabel();
    this.updateInvoice();
  },

  selectedPlan: function() {
    return this.plan_selector.getElement(".selected");
  },

  subscriptionRecurring: function() {return this.subscription_recurring_checkbox.checked;},

  setInvoiceValueFromPropery: function(element_class_or_name,property) {
    var element=this.invoice.getElement(element_class_or_name);
    if (element) element.innerHTML=this.selectedPlan().getProperty(property);
  },

  updateInvoice: function() {
    var selected = this.selectedPlan();
    this.setInvoiceValueFromPropery(".plan_title","plan_title");
    this.setInvoiceValueFromPropery(".days_credit","days");
    this.setInvoiceValueFromPropery(".plan_title","plan_title");
    this.setInvoiceValueFromPropery(".today_bill","today_bill");
    this.setInvoiceValueFromPropery(".next_bill","next_bill");
    this.setInvoiceValueFromPropery(".period","period");
    this.setInvoiceValueFromPropery(".billing_date","date");
    this.setInvoiceValueFromPropery(".expiration_date","date");
    this.invoice.getElement(".active_subscription").style.display=this.subscriptionRecurring() ? "" : "none";
    this.invoice.getElement(".inactive_subscription").style.display=this.subscriptionRecurring() ? "none" : "";
  },

  updateRecurringLabel: function() {
    var selected = this.selectedPlan();
    this.recurring_label.innerHTML = this.recurring_label_template.replace('<period>', selected.getProperty("period")).replace('<days>', selected.getProperty("days")).replace('<date>', selected.getProperty("date"));
  }
});

window.addEvent("domready", function() {
  $$(".cvv .description").each(function(element) {
    new CvvDescription(element);
  });
  $$("form.address").each(function(form) {
    new RegionInput(form);
  });
  $$("form.payment").each(function(form) {
    new PaymentMethod(form);
  });
  $$(".plans").each(function(plan_selector) {
    new PlanSelector(plan_selector);
  });
  $$(".fieldWithErrors input, .fieldWithErrors textarea, .fieldWithErrors select").each(function(field) {
    field.addEvent("focus", function() {
      field.addClass("fixed");
    });
  });
});