skeuocard-rails 0.1.0 → 1.0.0beta

data/vendor/assets/javascripts/skeuocard.js

@@ -1,5 +1,3 @@
-// Generated by CoffeeScript 1.3.3
-
 /*
 "Skeuocard" -- A Skeuomorphic Credit-Card Input Enhancement
 @description Skeuocard is a skeuomorphic credit card input plugin, supporting 
@@ -13,13 +11,14 @@
 
 
 (function() {
-  var CCIssuers, CCProducts, Skeuocard,
-    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
+  var $, Skeuocard, visaProduct,
     __slice = [].slice,
-    __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+  $ = jQuery;
 
   Skeuocard = (function() {
+    Skeuocard.currentDate = new Date();
 
     function Skeuocard(el, opts) {
       var optDefaults;
@@ -31,54 +30,69 @@
         underlyingFields: {}
       };
       this._inputViews = {};
+      this._inputViewsByFace = {
+        front: [],
+        back: []
+      };
       this._tabViews = {};
-      this.product = void 0;
-      this.productShortname = void 0;
-      this.issuerShortname = void 0;
-      this._cardProductNeedsLayout = true;
-      this.acceptedCardProducts = {};
+      this._state = {};
+      this.product = null;
       this.visibleFace = 'front';
-      this._initialValidationState = {};
-      this._validationState = {
-        number: false,
-        exp: false,
-        name: false,
-        cvc: false
-      };
-      this._faceFillState = {
-        front: false,
-        back: false
-      };
       optDefaults = {
         debug: false,
-        acceptedCardProducts: [],
+        acceptedCardProducts: null,
         cardNumberPlaceholderChar: 'X',
         genericPlaceholder: "XXXX XXXX XXXX XXXX",
         typeInputSelector: '[name="cc_type"]',
         numberInputSelector: '[name="cc_number"]',
-        expInputSelector: '[name="cc_exp"]',
+        expMonthInputSelector: '[name="cc_exp_month"]',
+        expYearInputSelector: '[name="cc_exp_year"]',
         nameInputSelector: '[name="cc_name"]',
         cvcInputSelector: '[name="cc_cvc"]',
-        currentDate: new Date(),
         initialValues: {},
         validationState: {},
         strings: {
-          hiddenFaceFillPrompt: "Click here to<br /> fill in the other side.",
+          hiddenFaceFillPrompt: "<strong>Click here</strong> to <br>fill in the other side.",
           hiddenFaceErrorWarning: "There's a problem on the other side.",
-          hiddenFaceSwitchPrompt: "Back to the other side..."
+          hiddenFaceSwitchPrompt: "Forget something?<br> Flip the card over."
         }
       };
       this.options = $.extend(optDefaults, opts);
       this._conformDOM();
-      this._setAcceptedCardProducts();
-      this._createInputs();
-      this._updateProductIfNeeded();
-      this._flipToInvalidSide();
+      this._bindInputEvents();
+      this._importImplicitOptions();
+      this.render();
     }
 
+    Skeuocard.prototype._log = function() {
+      var msg;
+      msg = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      if ((typeof console !== "undefined" && console !== null ? console.log : void 0) && !!this.options.debug) {
+        if (this.options.debug != null) {
+          return console.log.apply(console, ["[skeuocard]"].concat(__slice.call(msg)));
+        }
+      }
+    };
+
+    Skeuocard.prototype.trigger = function() {
+      var args, _ref;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      return (_ref = this.el.container).trigger.apply(_ref, args);
+    };
+
+    Skeuocard.prototype.bind = function() {
+      var args, _ref;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      return (_ref = this.el.container).bind.apply(_ref, args);
+    };
+
+    /*
+    Transform the elements within the container, conforming the DOM so that it 
+    becomes styleable, and that the underlying inputs are hidden.
+    */
+
+
     Skeuocard.prototype._conformDOM = function() {
-      var el, fieldName, fieldValue, _ref, _ref1, _ref2,
-        _this = this;
       this.el.container.removeClass('no-js');
       this.el.container.addClass("skeuocard js");
       this.el.container.find("> :not(input,select,textarea)").remove();
@@ -86,419 +100,367 @@
       this.el.underlyingFields = {
         type: this.el.container.find(this.options.typeInputSelector),
         number: this.el.container.find(this.options.numberInputSelector),
-        exp: this.el.container.find(this.options.expInputSelector),
+        expMonth: this.el.container.find(this.options.expMonthInputSelector),
+        expYear: this.el.container.find(this.options.expYearInputSelector),
         name: this.el.container.find(this.options.nameInputSelector),
         cvc: this.el.container.find(this.options.cvcInputSelector)
       };
-      _ref = this.options.initialValues;
-      for (fieldName in _ref) {
-        fieldValue = _ref[fieldName];
-        this.el.underlyingFields[fieldName].val(fieldValue);
-      }
-      _ref1 = this.el.underlyingFields;
-      for (fieldName in _ref1) {
-        el = _ref1[fieldName];
-        this.options.initialValues[fieldName] = el.val();
-      }
-      _ref2 = this.el.underlyingFields;
-      for (fieldName in _ref2) {
-        el = _ref2[fieldName];
-        if (this.options.validationState[fieldName] === false || el.hasClass('invalid')) {
-          this._initialValidationState[fieldName] = false;
-          if (!el.hasClass('invalid')) {
-            el.addClass('invalid');
-          }
-        }
-      }
-      this.el.underlyingFields.number.bind("change", function(e) {
-        _this._inputViews.number.setValue(_this._getUnderlyingValue('number'));
-        return _this.render();
-      });
-      this.el.underlyingFields.exp.bind("change", function(e) {
-        _this._inputViews.exp.setValue(_this._getUnderlyingValue('exp'));
-        return _this.render();
-      });
-      this.el.underlyingFields.name.bind("change", function(e) {
-        _this._inputViews.exp.setValue(_this._getUnderlyingValue('name'));
-        return _this.render();
-      });
-      this.el.underlyingFields.cvc.bind("change", function(e) {
-        _this._inputViews.exp.setValue(_this._getUnderlyingValue('cvc'));
-        return _this.render();
-      });
-      this.el.surfaceFront = $("<div>").attr({
+      this.el.front = $("<div>").attr({
         "class": "face front"
       });
-      this.el.surfaceBack = $("<div>").attr({
+      this.el.back = $("<div>").attr({
         "class": "face back"
       });
       this.el.cardBody = $("<div>").attr({
         "class": "card-body"
       });
-      this.el.surfaceFront.appendTo(this.el.cardBody);
-      this.el.surfaceBack.appendTo(this.el.cardBody);
+      this.el.front.appendTo(this.el.cardBody);
+      this.el.back.appendTo(this.el.cardBody);
       this.el.cardBody.appendTo(this.el.container);
-      this._tabViews.front = new this.FlipTabView('front');
-      this._tabViews.back = new this.FlipTabView('back');
-      this.el.surfaceFront.prepend(this._tabViews.front.el);
-      this.el.surfaceBack.prepend(this._tabViews.back.el);
-      this._tabViews.front.hide();
-      this._tabViews.back.hide();
-      this._tabViews.front.el.click(function() {
-        return _this.flip();
+      this._tabViews.front = new Skeuocard.prototype.FlipTabView(this, 'front', {
+        strings: this.options.strings
       });
-      this._tabViews.back.el.click(function() {
-        return _this.flip();
+      this._tabViews.back = new Skeuocard.prototype.FlipTabView(this, 'back', {
+        strings: this.options.strings
       });
+      this.el.front.prepend(this._tabViews.front.el);
+      this.el.back.prepend(this._tabViews.back.el);
+      this._tabViews.front.hide();
+      this._tabViews.back.hide();
+      this._inputViews = {
+        number: new this.SegmentedCardNumberInputView(),
+        exp: new this.ExpirationInputView({
+          currentDate: this.options.currentDate
+        }),
+        name: new this.TextInputView({
+          "class": "cc-name",
+          placeholder: "YOUR NAME"
+        }),
+        cvc: new this.TextInputView({
+          "class": "cc-cvc",
+          placeholder: "XXX",
+          requireMaxLength: true
+        })
+      };
+      this._inputViews.number.el.addClass('cc-number');
+      this._inputViews.number.el.appendTo(this.el.front);
+      this._inputViews.name.el.appendTo(this.el.front);
+      this._inputViews.exp.el.addClass('cc-exp');
+      this._inputViews.exp.el.appendTo(this.el.front);
+      this._inputViews.cvc.el.appendTo(this.el.back);
       return this.el.container;
     };
 
-    Skeuocard.prototype._setAcceptedCardProducts = function() {
-      var matcher, product, _ref,
+    /*
+    Import implicit initialization options from the DOM. Brings in things like 
+    the accepted card type, initial validation state, existing values, etc.
+    */
+
+
+    Skeuocard.prototype._importImplicitOptions = function() {
+      var fieldEl, fieldName, _initialExp, _ref,
         _this = this;
-      if (this.options.acceptedCardProducts.length === 0) {
+      _ref = this.el.underlyingFields;
+      for (fieldName in _ref) {
+        fieldEl = _ref[fieldName];
+        if (this.options.initialValues[fieldName] == null) {
+          this.options.initialValues[fieldName] = fieldEl.val();
+        } else {
+          this.options.initialValues[fieldName] = this.options.initialValues[fieldName].toString();
+          this._setUnderlyingValue(fieldName, this.options.initialValues[fieldName]);
+        }
+        if (this.options.initialValues[fieldName].length > 0) {
+          this._state['initiallyFilled'] = true;
+        }
+        if (this.options.validationState[fieldName] == null) {
+          this.options.validationState[fieldName] = !fieldEl.hasClass('invalid');
+        }
+      }
+      if (this.options.acceptedCardProducts == null) {
+        this.options.acceptedCardProducts = [];
         this.el.underlyingFields.type.find('option').each(function(i, _el) {
-          var cardProductShortname, el;
+          var el, shortname;
           el = $(_el);
-          cardProductShortname = el.attr('data-card-product-shortname') || el.attr('value');
-          return _this.options.acceptedCardProducts.push(cardProductShortname);
+          shortname = el.attr('data-sc-type') || el.attr('value');
+          return _this.options.acceptedCardProducts.push(shortname);
         });
       }
-      for (matcher in CCProducts) {
-        product = CCProducts[matcher];
-        if (_ref = product.companyShortname, __indexOf.call(this.options.acceptedCardProducts, _ref) >= 0) {
-          this.acceptedCardProducts[matcher] = product;
-        }
+      if (this.options.initialValues.number.length > 0) {
+        this.set('number', this.options.initialValues.number);
       }
-      return this.acceptedCardProducts;
+      if (this.options.initialValues.name.length > 0) {
+        this.set('name', this.options.initialValues.name);
+      }
+      if (this.options.initialValues.cvc.length > 0) {
+        this.set('cvc', this.options.initialValues.cvc);
+      }
+      if (this.options.initialValues.expYear.length > 0 && this.options.initialValues.expMonth.length > 0) {
+        _initialExp = new Date(parseInt(this.options.initialValues.expYear), parseInt(this.options.initialValues.expMonth) - 1, 1);
+        this.set('exp', _initialExp);
+      }
+      this._updateValidationForFace('front');
+      return this._updateValidationForFace('back');
     };
 
-    Skeuocard.prototype._updateProductIfNeeded = function() {
-      var matchedIssuerIdentifier, matchedProduct, matchedProductIdentifier, number;
-      number = this._getUnderlyingValue('number');
-      matchedProduct = this.getProductForNumber(number);
-      matchedProductIdentifier = (matchedProduct != null ? matchedProduct.companyShortname : void 0) || '';
-      matchedIssuerIdentifier = (matchedProduct != null ? matchedProduct.issuerShortname : void 0) || '';
-      if ((this.productShortname !== matchedProductIdentifier) || (this.issuerShortname !== matchedIssuerIdentifier)) {
-        this.productShortname = matchedProductIdentifier;
-        this.issuerShortname = matchedIssuerIdentifier;
-        this.product = matchedProduct;
-        this._cardProductNeedsLayout = true;
-        this.trigger('productWillChange.skeuocard', [this, this.productShortname, matchedProductIdentifier]);
-        this._log("Triggering render because product changed.");
-        this.render();
-        return this.trigger('productDidChange.skeuocard', [this, this.productShortname, matchedProductIdentifier]);
-      }
+    Skeuocard.prototype.set = function(field, newValue) {
+      this._inputViews[field].setValue(newValue);
+      return this._inputViews[field].trigger('valueChanged', this._inputViews[field]);
     };
 
-    Skeuocard.prototype._createInputs = function() {
-      var _this = this;
-      this._inputViews.number = new this.SegmentedCardNumberInputView();
-      this._inputViews.exp = new this.ExpirationInputView({
-        currentDate: this.options.currentDate
+    /*
+    Bind interaction events to their appropriate handlers.
+    */
+
+
+    Skeuocard.prototype._bindInputEvents = function() {
+      var _expirationChange,
+        _this = this;
+      this.el.underlyingFields.number.bind("change", function(e) {
+        _this._inputViews.number.setValue(_this._getUnderlyingValue('number'));
+        return _this.render();
       });
-      this._inputViews.name = new this.TextInputView({
-        "class": "cc-name",
-        placeholder: "YOUR NAME"
+      _expirationChange = function(e) {
+        var month, year;
+        month = parseInt(_this._getUnderlyingValue('expMonth'));
+        year = parseInt(_this._getUnderlyingValue('expYear'));
+        _this._inputViews.exp.setValue(new Date(year, month - 1));
+        return _this.render();
+      };
+      this.el.underlyingFields.expMonth.bind("change", _expirationChange);
+      this.el.underlyingFields.expYear.bind("change", _expirationChange);
+      this.el.underlyingFields.name.bind("change", function(e) {
+        _this._inputViews.exp.setValue(_this._getUnderlyingValue('name'));
+        return _this.render();
       });
-      this._inputViews.cvc = new this.TextInputView({
-        "class": "cc-cvc",
-        placeholder: "XXX",
-        requireMaxLength: true
+      this.el.underlyingFields.cvc.bind("change", function(e) {
+        _this._inputViews.exp.setValue(_this._getUnderlyingValue('cvc'));
+        return _this.render();
       });
-      this._inputViews.number.el.addClass('cc-number');
-      this._inputViews.number.el.appendTo(this.el.surfaceFront);
-      this._inputViews.name.el.appendTo(this.el.surfaceFront);
-      this._inputViews.exp.el.addClass('cc-exp');
-      this._inputViews.exp.el.appendTo(this.el.surfaceFront);
-      this._inputViews.cvc.el.appendTo(this.el.surfaceBack);
-      this._inputViews.number.bind("change", function(e, input) {
-        _this._setUnderlyingValue('number', input.getValue());
-        _this._updateValidationStateForInputView('number');
-        return _this._updateProductIfNeeded();
+      this._inputViews.number.bind("change valueChanged", function(e, input) {
+        var cardNumber, matchedProduct, number, previousProduct, _ref, _ref1;
+        cardNumber = input.getValue();
+        _this._setUnderlyingValue('number', cardNumber);
+        _this._updateValidation('number', cardNumber);
+        number = _this._getUnderlyingValue('number');
+        matchedProduct = Skeuocard.prototype.CardProduct.firstMatchingNumber(number);
+        if (!((_ref = _this.product) != null ? _ref.eql(matchedProduct) : void 0)) {
+          _this._log("Product will change:", _this.product, "=>", matchedProduct);
+          if (_ref1 = matchedProduct != null ? matchedProduct.attrs.companyShortname : void 0, __indexOf.call(_this.options.acceptedCardProducts, _ref1) >= 0) {
+            _this.trigger('productWillChange.skeuocard', [_this, _this.product, matchedProduct]);
+            previousProduct = _this.product;
+            _this.el.container.removeClass('unaccepted');
+            _this._renderProduct(matchedProduct);
+            _this.product = matchedProduct;
+          } else if (matchedProduct != null) {
+            _this.trigger('productWillChange.skeuocard', [_this, _this.product, null]);
+            _this.el.container.addClass('unaccepted');
+            _this._renderProduct(null);
+            _this.product = null;
+          } else {
+            _this.trigger('productWillChange.skeuocard', [_this, _this.product, null]);
+            _this.el.container.removeClass('unaccepted');
+            _this._renderProduct(null);
+            _this.product = null;
+          }
+          return _this.trigger('productDidChange.skeuocard', [_this, previousProduct, _this.product]);
+        }
       });
-      this._inputViews.exp.bind("keyup", function(e, input) {
-        _this._setUnderlyingValue('exp', input.value);
-        return _this._updateValidationStateForInputView('exp');
+      this._inputViews.exp.bind("keyup valueChanged", function(e, input) {
+        var newDate;
+        newDate = input.getValue();
+        _this._updateValidation('exp', newDate);
+        if (newDate != null) {
+          _this._setUnderlyingValue('expMonth', newDate.getMonth() + 1);
+          return _this._setUnderlyingValue('expYear', newDate.getFullYear());
+        }
       });
-      this._inputViews.name.bind("keyup", function(e) {
-        _this._setUnderlyingValue('name', $(e.target).val());
-        return _this._updateValidationStateForInputView('name');
+      this._inputViews.name.bind("keyup valueChanged", function(e, input) {
+        var value;
+        value = input.getValue();
+        _this._setUnderlyingValue('name', value);
+        return _this._updateValidation('name', value);
       });
-      this._inputViews.cvc.bind("keyup", function(e) {
-        _this._setUnderlyingValue('cvc', $(e.target).val());
-        return _this._updateValidationStateForInputView('cvc');
+      this._inputViews.cvc.bind("keyup valueChanged", function(e, input) {
+        var value;
+        value = input.getValue();
+        _this._setUnderlyingValue('cvc', value);
+        return _this._updateValidation('cvc', value);
+      });
+      this.el.container.delegate("input", "keyup keydown", this._handleFieldTab.bind(this));
+      this._tabViews.front.el.click(function() {
+        return _this.flip();
+      });
+      return this._tabViews.back.el.click(function() {
+        return _this.flip();
       });
-      this._inputViews.number.setValue(this._getUnderlyingValue('number'));
-      this._inputViews.exp.setValue(this._getUnderlyingValue('exp'));
-      this._inputViews.name.el.val(this._getUnderlyingValue('name'));
-      return this._inputViews.cvc.el.val(this._getUnderlyingValue('cvc'));
-    };
-
-    Skeuocard.prototype._log = function() {
-      var msg;
-      msg = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      if ((typeof console !== "undefined" && console !== null ? console.log : void 0) && !!this.options.debug) {
-        if (this.options.debug != null) {
-          return console.log.apply(console, ["[skeuocard]"].concat(__slice.call(msg)));
-        }
-      }
     };
 
-    Skeuocard.prototype._flipToInvalidSide = function() {
-      var fieldName, state, _errorCounts, _oppositeFace, _ref, _ref1;
-      if (Object.keys(this._initialValidationState).length > 0) {
+    Skeuocard.prototype._handleFieldTab = function(e) {
+      var backFieldEls, currentFieldEl, frontFieldEls, _currentFace, _oppositeFace;
+      if (e.which === 9) {
+        currentFieldEl = $(e.currentTarget);
         _oppositeFace = this.visibleFace === 'front' ? 'back' : 'front';
-        _errorCounts = {
-          front: 0,
-          back: 0
-        };
-        _ref = this._initialValidationState;
-        for (fieldName in _ref) {
-          state = _ref[fieldName];
-          _errorCounts[(_ref1 = this.product) != null ? _ref1.layout[fieldName] : void 0]++;
+        _currentFace = this.visibleFace === 'front' ? 'front' : 'back';
+        backFieldEls = this.el[_oppositeFace].find('input');
+        frontFieldEls = this.el[_currentFace].find('input');
+        if (this.visibleFace === 'front' && this.el.front.hasClass('filled') && backFieldEls.length > 0 && frontFieldEls.index(currentFieldEl) === frontFieldEls.length - 1 && !e.shiftKey) {
+          this.flip();
+          backFieldEls.first().focus();
+          e.preventDefault();
         }
-        if (_errorCounts[this.visibleFace] === 0 && _errorCounts[_oppositeFace] > 0) {
-          return this.flip();
+        if (this.visibleFace === 'back' && e.shiftKey) {
+          this.flip();
+          backFieldEls.last().focus();
+          e.preventDefault();
         }
       }
+      return true;
     };
 
-    Skeuocard.prototype.render = function() {
-      var container, el, fieldName, inputEl, sel, surfaceName, _hiddenFaceFilled, _hiddenFaceValid, _oppositeFace, _ref, _visibleFaceFilled, _visibleFaceValid,
-        _this = this;
-      this._log("*** start rendering ***");
-      if (this._cardProductNeedsLayout === true) {
-        if (this.product !== void 0) {
-          this._log("[render]", "Activating product", this.product);
-          this.el.container.removeClass(function(index, css) {
-            return (css.match(/\b(product|issuer)-\S+/g) || []).join(' ');
-          });
-          this.el.container.addClass("product-" + this.product.companyShortname);
-          if (this.product.issuerShortname != null) {
-            this.el.container.addClass("issuer-" + this.product.issuerShortname);
-          }
-          this._setUnderlyingCardType(this.product.companyShortname);
-          this._inputViews.number.setGroupings(this.product.cardNumberGrouping);
-          this._inputViews.exp.show();
-          this._inputViews.name.show();
-          this._inputViews.exp.reconfigure({
-            pattern: this.product.expirationFormat
-          });
-          this._inputViews.cvc.show();
-          this._inputViews.cvc.attr({
-            maxlength: this.product.cvcLength,
-            placeholder: new Array(this.product.cvcLength + 1).join(this.options.cardNumberPlaceholderChar)
-          });
-          _ref = this.product.layout;
-          for (fieldName in _ref) {
-            surfaceName = _ref[fieldName];
-            sel = surfaceName === 'front' ? 'surfaceFront' : 'surfaceBack';
-            container = this.el[sel];
-            inputEl = this._inputViews[fieldName].el;
-            if (!(container.has(inputEl).length > 0)) {
-              this._log("Moving", inputEl, "=>", container);
-              el = this._inputViews[fieldName].el.detach();
-              $(el).appendTo(this.el[sel]);
-            }
-          }
-        } else {
-          this._log("[render]", "Becoming generic.");
-          this._inputViews.exp.clear();
-          this._inputViews.cvc.clear();
-          this._inputViews.exp.hide();
-          this._inputViews.name.hide();
-          this._inputViews.cvc.hide();
-          this._inputViews.number.setGroupings([this.options.genericPlaceholder.length]);
-          /*
-                  @_inputViews.number.reconfigure
-                    groupings: [@options.genericPlaceholder.length],
-                    placeholder: @options.genericPlaceholder
-          */
-
-          this.el.container.removeClass(function(index, css) {
-            return (css.match(/\bproduct-\S+/g) || []).join(' ');
-          });
-          this.el.container.removeClass(function(index, css) {
-            return (css.match(/\bissuer-\S+/g) || []).join(' ');
-          });
-        }
-        this._cardProductNeedsLayout = false;
-      }
-      this._log("Validation state:", this._validationState);
-      this.showInitialValidationErrors();
-      _oppositeFace = this.visibleFace === 'front' ? 'back' : 'front';
-      _visibleFaceFilled = this._faceFillState[this.visibleFace];
-      _visibleFaceValid = this.isFaceValid(this.visibleFace);
-      _hiddenFaceFilled = this._faceFillState[_oppositeFace];
-      _hiddenFaceValid = this.isFaceValid(_oppositeFace);
-      if (_visibleFaceFilled && !_visibleFaceValid) {
-        this._log("Visible face is filled, but invalid; showing validation errors.");
-        this.showValidationErrors();
-      } else if (!_visibleFaceFilled) {
-        this._log("Visible face hasn't been filled; hiding validation errors.");
-        this.hideValidationErrors();
-      } else {
-        this._log("Visible face has been filled, and is valid.");
-        this.hideValidationErrors();
-      }
-      if (this.visibleFace === 'front' && this.fieldsForFace('back').length > 0) {
-        if (_visibleFaceFilled && _visibleFaceValid && !_hiddenFaceFilled) {
-          this._tabViews.front.prompt(this.options.strings.hiddenFaceFillPrompt, true);
-        } else if (_hiddenFaceFilled && !_hiddenFaceValid) {
-          this._tabViews.front.warn(this.options.strings.hiddenFaceErrorWarning, true);
-        } else if (_hiddenFaceFilled && _hiddenFaceValid) {
-          this._tabViews.front.prompt(this.options.strings.hiddenFaceSwitchPrompt, true);
-        } else {
-          this._tabViews.front.hide();
+    Skeuocard.prototype._updateValidation = function(fieldName, newValue) {
+      var fillStateChanged, isFilled, isFixed, isValid, needsFix, validationStateChanged;
+      if (this.product == null) {
+        return false;
+      }
+      isFilled = this.product[fieldName].isFilled(newValue);
+      needsFix = (this.options.validationState[fieldName] != null) === false;
+      isFixed = (this.options.initialValues[fieldName] != null) && newValue !== this.options.initialValues[fieldName];
+      isValid = this.product[fieldName].isValid(newValue) && ((needsFix && isFixed) || true);
+      fillStateChanged = this._state["" + fieldName + "Filled"] !== isFilled;
+      validationStateChanged = this._state["" + fieldName + "Valid"] !== isValid;
+      if (fillStateChanged) {
+        this.trigger("fieldFillStateWillChange.skeuocard", [this, fieldName, isFilled]);
+        this._inputViews[fieldName].el.toggleClass('filled', isFilled);
+        this._state["" + fieldName + "Filled"] = isFilled;
+        this.trigger("fieldFillStateDidChange.skeuocard", [this, fieldName, isFilled]);
+      }
+      if (validationStateChanged) {
+        this.trigger("fieldValidationStateWillChange.skeuocard", [this, fieldName, isFilled]);
+        this._inputViews[fieldName].el.toggleClass('valid', isValid);
+        this._inputViews[fieldName].el.toggleClass('invalid', !isValid);
+        this._state["" + fieldName + "Valid"] = isValid;
+        this.trigger("fieldValidationStateDidChange.skeuocard", [this, fieldName, isFilled]);
+      }
+      return this._updateValidationForFace(this.visibleFace);
+    };
+
+    Skeuocard.prototype._updateValidationForFace = function(face) {
+      var fieldsFilled, fieldsValid, fillStateChanged, isFilled, isValid, iv, validationStateChanged;
+      fieldsFilled = ((function() {
+        var _i, _len, _ref, _results;
+        _ref = this._inputViewsByFace[face];
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          iv = _ref[_i];
+          _results.push(iv.el.hasClass('filled'));
         }
-      } else {
-        if (_hiddenFaceValid) {
-          this._tabViews.back.prompt(this.options.strings.hiddenFaceSwitchPrompt, true);
-        } else {
-          this._tabViews.back.warn(this.options.strings.hiddenFaceErrorWarning, true);
+        return _results;
+      }).call(this)).every(Boolean);
+      fieldsValid = ((function() {
+        var _i, _len, _ref, _results;
+        _ref = this._inputViewsByFace[face];
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          iv = _ref[_i];
+          _results.push(iv.el.hasClass('valid'));
         }
+        return _results;
+      }).call(this)).every(Boolean);
+      isFilled = (fieldsFilled && (this.product != null)) || (this._state['initiallyFilled'] || false);
+      isValid = fieldsValid && (this.product != null);
+      fillStateChanged = this._state["" + face + "Filled"] !== isFilled;
+      validationStateChanged = this._state["" + face + "Valid"] !== isValid;
+      if (fillStateChanged) {
+        this.trigger("faceFillStateWillChange.skeuocard", [this, face, isFilled]);
+        this.el[face].toggleClass('filled', isFilled);
+        this._state["" + face + "Filled"] = isFilled;
+        this.trigger("faceFillStateDidChange.skeuocard", [this, face, isFilled]);
+      }
+      if (validationStateChanged) {
+        this.trigger("faceValidationStateWillChange.skeuocard", [this, face, isValid]);
+        this.el[face].toggleClass('valid', isValid);
+        this.el[face].toggleClass('invalid', !isValid);
+        this._state["" + face + "Valid"] = isValid;
+        return this.trigger("faceValidationStateDidChange.skeuocard", [this, face, isValid]);
+      }
+    };
+
+    /*
+    Assert rendering changes necessary for the current product. Passing a null 
+    value instead of a product will revert the card to a generic state.
+    */
+
+
+    Skeuocard.prototype._renderProduct = function(product) {
+      var destFace, fieldName, focused, view, viewEl, _ref, _ref1,
+        _this = this;
+      this._log("[_renderProduct]", "Rendering product:", product);
+      this.el.container.removeClass(function(index, css) {
+        return (css.match(/\b(product|issuer)-\S+/g) || []).join(' ');
+      });
+      if ((product != null ? product.attrs.companyShortname : void 0) != null) {
+        this.el.container.addClass("product-" + product.attrs.companyShortname);
       }
-      if (!this.isValid()) {
-        this.el.container.removeClass('valid');
-        this.el.container.addClass('invalid');
-      } else {
-        this.el.container.addClass('valid');
-        this.el.container.removeClass('invalid');
+      if ((product != null ? product.attrs.issuerShortname : void 0) != null) {
+        this.el.container.addClass("issuer-" + product.attrs.issuerShortname);
       }
-      return this._log("*** rendering complete ***");
-    };
-
-    Skeuocard.prototype.showInitialValidationErrors = function() {
-      var fieldName, state, _ref, _results;
-      _ref = this._initialValidationState;
-      _results = [];
-      for (fieldName in _ref) {
-        state = _ref[fieldName];
-        if (state === false && this._validationState[fieldName] === false) {
-          _results.push(this._inputViews[fieldName].addClass('invalid'));
-        } else {
-          _results.push(this._inputViews[fieldName].removeClass('invalid'));
+      this._setUnderlyingValue('type', (product != null ? product.attrs.companyShortname : void 0) || null);
+      this._inputViews.number.setGroupings((product != null ? product.attrs.cardNumberGrouping : void 0) || [this.options.genericPlaceholder.length]);
+      if (product != null) {
+        this._inputViews.exp.reconfigure({
+          pattern: (product != null ? product.attrs.expirationFormat : void 0) || "MM/YY"
+        });
+        this._inputViews.cvc.attr({
+          maxlength: product.attrs.cvcLength,
+          placeholder: new Array(product.attrs.cvcLength + 1).join(this.options.cardNumberPlaceholderChar)
+        });
+        this._inputViewsByFace = {
+          front: [],
+          back: []
+        };
+        focused = $('*:focus');
+        _ref = product.attrs.layout;
+        for (fieldName in _ref) {
+          destFace = _ref[fieldName];
+          this._log("Moving", fieldName, "to", destFace);
+          viewEl = this._inputViews[fieldName].el.detach();
+          viewEl.appendTo(this.el[destFace]);
+          this._inputViewsByFace[destFace].push(this._inputViews[fieldName]);
+          this._inputViews[fieldName].show();
         }
-      }
-      return _results;
-    };
-
-    Skeuocard.prototype.showValidationErrors = function() {
-      var fieldName, state, _ref, _results;
-      _ref = this._validationState;
-      _results = [];
-      for (fieldName in _ref) {
-        state = _ref[fieldName];
-        if (state === true) {
-          _results.push(this._inputViews[fieldName].removeClass('invalid'));
-        } else {
-          _results.push(this._inputViews[fieldName].addClass('invalid'));
+        setTimeout(function() {
+          var fieldEl, fieldLength;
+          fieldEl = focused.first();
+          fieldLength = fieldEl[0].maxLength;
+          fieldEl.focus();
+          return fieldEl[0].setSelectionRange(fieldLength, fieldLength);
+        }, 10);
+      } else {
+        _ref1 = this._inputViews;
+        for (fieldName in _ref1) {
+          view = _ref1[fieldName];
+          if (fieldName !== 'number') {
+            view.hide();
+          }
         }
       }
-      return _results;
+      return product;
     };
 
-    Skeuocard.prototype.hideValidationErrors = function() {
-      var fieldName, state, _ref, _results;
-      _ref = this._validationState;
+    Skeuocard.prototype._renderValidation = function() {
+      var fieldName, fieldView, _ref, _results;
+      _ref = this._inputViews;
       _results = [];
       for (fieldName in _ref) {
-        state = _ref[fieldName];
-        if ((this._initialValidationState[fieldName] === false && state === true) || (!(this._initialValidationState[fieldName] != null))) {
-          _results.push(this._inputViews[fieldName].el.removeClass('invalid'));
-        } else {
-          _results.push(void 0);
-        }
+        fieldView = _ref[fieldName];
+        _results.push(this._updateValidation(fieldName, fieldView.getValue()));
       }
       return _results;
     };
 
-    Skeuocard.prototype.setFieldValidationState = function(fieldName, valid) {
-      if (valid) {
-        this.el.underlyingFields[fieldName].removeClass('invalid');
-      } else {
-        this.el.underlyingFields[fieldName].addClass('invalid');
-      }
-      return this._validationState[fieldName] = valid;
-    };
-
-    Skeuocard.prototype.isFaceFilled = function(faceName) {
-      var fields, filled, name;
-      fields = this.fieldsForFace(faceName);
-      filled = (function() {
-        var _i, _len, _results;
-        _results = [];
-        for (_i = 0, _len = fields.length; _i < _len; _i++) {
-          name = fields[_i];
-          if (this._inputViews[name].isFilled()) {
-            _results.push(name);
-          }
-        }
-        return _results;
-      }).call(this);
-      if (fields.length > 0) {
-        return filled.length === fields.length;
-      } else {
-        return false;
-      }
-    };
-
-    Skeuocard.prototype.fieldsForFace = function(faceName) {
-      var face, fn, _ref;
-      if ((_ref = this.product) != null ? _ref.layout : void 0) {
-        return (function() {
-          var _ref1, _results;
-          _ref1 = this.product.layout;
-          _results = [];
-          for (fn in _ref1) {
-            face = _ref1[fn];
-            if (face === faceName) {
-              _results.push(fn);
-            }
-          }
-          return _results;
-        }).call(this);
-      }
-      return [];
-    };
-
-    Skeuocard.prototype._updateValidationStateForInputView = function(fieldName) {
-      var field, fieldValid;
-      field = this._inputViews[fieldName];
-      fieldValid = field.isValid() && !(this._initialValidationState[fieldName] === false && field.getValue() === this.options.initialValues[fieldName]);
-      if (fieldValid !== this._validationState[fieldName]) {
-        this.setFieldValidationState(fieldName, fieldValid);
-        this._faceFillState.front = this.isFaceFilled('front');
-        this._faceFillState.back = this.isFaceFilled('back');
-        this.trigger('validationStateDidChange.skeuocard', [this, this._validationState]);
-        this._log("Change in validation for " + fieldName + " triggers re-render.");
-        return this.render();
-      }
-    };
-
-    Skeuocard.prototype.isFaceValid = function(faceName) {
-      var fieldName, valid, _i, _len, _ref;
-      valid = true;
-      _ref = this.fieldsForFace(faceName);
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        fieldName = _ref[_i];
-        valid &= this._validationState[fieldName];
-      }
-      return !!valid;
-    };
-
-    Skeuocard.prototype.isValid = function() {
-      return this._validationState.number && this._validationState.exp && this._validationState.name && this._validationState.cvc;
-    };
-
-    Skeuocard.prototype._getUnderlyingValue = function(field) {
-      return this.el.underlyingFields[field].val();
-    };
-
-    Skeuocard.prototype._setUnderlyingValue = function(field, newValue) {
-      this.trigger('change.skeuocard', [this]);
-      return this.el.underlyingFields[field].val(newValue);
+    Skeuocard.prototype.render = function() {
+      this._renderProduct(this.product);
+      return this._renderValidation();
     };
 
     Skeuocard.prototype.flip = function() {
@@ -506,122 +468,123 @@
       targetFace = this.visibleFace === 'front' ? 'back' : 'front';
       this.trigger('faceWillBecomeVisible.skeuocard', [this, targetFace]);
       this.visibleFace = targetFace;
-      this.render();
       this.el.cardBody.toggleClass('flip');
-      surfaceName = this.visibleFace === 'front' ? 'surfaceFront' : 'surfaceBack';
-      this.el[surfaceName].find('input').first().focus();
+      surfaceName = this.visibleFace === 'front' ? 'front' : 'back';
+      this.el[surfaceName].find('.cc-field').not('.filled').find('input').first().focus();
       return this.trigger('faceDidBecomeVisible.skeuocard', [this, targetFace]);
     };
 
-    Skeuocard.prototype.getProductForNumber = function(num) {
-      var d, issuer, m, matcher, parts, _ref;
-      _ref = this.acceptedCardProducts;
-      for (m in _ref) {
-        d = _ref[m];
-        parts = m.split('/');
-        matcher = new RegExp(parts[1], parts[2]);
-        if (matcher.test(num)) {
-          issuer = this.getIssuerForNumber(num) || {};
-          return $.extend({}, d, issuer);
-        }
+    Skeuocard.prototype._setUnderlyingValue = function(field, newValue) {
+      var fieldEl, remapAttrKey, _newValue,
+        _this = this;
+      fieldEl = this.el.underlyingFields[field];
+      _newValue = (newValue || "").toString();
+      if (fieldEl == null) {
+        throw "Set underlying value of unknown field: " + field + ".";
       }
-      return void 0;
-    };
-
-    Skeuocard.prototype.getIssuerForNumber = function(num) {
-      var d, m, matcher, parts;
-      for (m in CCIssuers) {
-        d = CCIssuers[m];
-        parts = m.split('/');
-        matcher = new RegExp(parts[1], parts[2]);
-        if (matcher.test(num)) {
-          return d;
-        }
+      this.trigger('change.skeuocard', [this]);
+      if (!fieldEl.is('select')) {
+        return this.el.underlyingFields[field].val(_newValue);
+      } else {
+        remapAttrKey = "data-sc-" + field.toLowerCase();
+        return fieldEl.find('option').each(function(i, _el) {
+          var optionEl;
+          optionEl = $(_el);
+          if (_newValue === (optionEl.attr(remapAttrKey) || optionEl.attr('value'))) {
+            return _this.el.underlyingFields[field].val(optionEl.attr('value'));
+          }
+        });
       }
-      return void 0;
     };
 
-    Skeuocard.prototype._setUnderlyingCardType = function(shortname) {
-      var _this = this;
-      return this.el.underlyingFields.type.find('option').each(function(i, _el) {
-        var el;
-        el = $(_el);
-        if (shortname === (el.attr('data-card-product-shortname') || el.attr('value'))) {
-          return el.val(el.attr('value'));
-        }
-      });
-    };
-
-    Skeuocard.prototype.trigger = function() {
-      var args, _ref;
-      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el.container).trigger.apply(_ref, args);
+    Skeuocard.prototype._getUnderlyingValue = function(field) {
+      var _ref;
+      return (_ref = this.el.underlyingFields[field]) != null ? _ref.val() : void 0;
     };
 
-    Skeuocard.prototype.bind = function() {
-      var args, _ref;
-      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el.container).trigger.apply(_ref, args);
+    Skeuocard.prototype.isValid = function() {
+      return !this.el.front.hasClass('invalid') && !this.el.back.hasClass('invalid');
     };
 
     return Skeuocard;
 
   })();
 
+  window.Skeuocard = Skeuocard;
+
   /*
   Skeuocard::FlipTabView
   Handles rendering of the "flip button" control and its various warning and 
   prompt states.
-  
-  TODO: Rebuild this so that it observes events and contains its own logic.
   */
 
 
   Skeuocard.prototype.FlipTabView = (function() {
-
-    function FlipTabView(face, opts) {
+    function FlipTabView(sc, face, opts) {
+      var _this = this;
       if (opts == null) {
         opts = {};
       }
+      this.card = sc;
+      this.face = face;
       this.el = $("<div class=\"flip-tab " + face + "\"><p></p></div>");
       this.options = opts;
+      this._state = {};
+      this.card.bind('faceFillStateWillChange.skeuocard', this._faceStateChanged.bind(this));
+      this.card.bind('faceValidationStateWillChange.skeuocard', this._faceValidationChanged.bind(this));
+      this.card.bind('productWillChange.skeuocard', function(e, card, prevProduct, newProduct) {
+        if (newProduct == null) {
+          return _this.hide();
+        }
+      });
     }
 
-    FlipTabView.prototype._setText = function(text) {
-      return this.el.find('p').html(text);
+    FlipTabView.prototype._faceStateChanged = function(e, card, face, isFilled) {
+      var oppositeFace;
+      oppositeFace = face === 'front' ? 'back' : 'front';
+      if (isFilled === true && this.card._inputViewsByFace[oppositeFace].length > 0) {
+        this.show();
+      }
+      if (face !== this.face) {
+        this._state.opposingFaceFilled = isFilled;
+      }
+      if (this._state.opposingFaceFilled !== true) {
+        return this.warn(this.options.strings.hiddenFaceFillPrompt, true);
+      }
     };
 
-    FlipTabView.prototype.warn = function(message, withAnimation) {
-      if (withAnimation == null) {
-        withAnimation = false;
+    FlipTabView.prototype._faceValidationChanged = function(e, card, face, isValid) {
+      if (face !== this.face) {
+        this._state.opposingFaceValid = isValid;
       }
+      if (this._state.opposingFaceValid) {
+        return this.prompt(this.options.strings.hiddenFaceSwitchPrompt);
+      } else {
+        if (this._state.opposingFaceFilled) {
+          return this.warn(this.options.strings.hiddenFaceErrorWarning);
+        } else {
+          return this.warn(this.options.strings.hiddenFaceFillPrompt);
+        }
+      }
+    };
+
+    FlipTabView.prototype._setText = function(text) {
+      return this.el.find('p').first().html(text);
+    };
+
+    FlipTabView.prototype.warn = function(message) {
       this._resetClasses();
-      this.el.addClass('warn');
       this._setText(message);
-      this.show();
-      if (withAnimation) {
-        this.el.removeClass('warn-anim');
-        return this.el.addClass('warn-anim');
-      }
+      return this.el.addClass('warn');
     };
 
-    FlipTabView.prototype.prompt = function(message, withAnimation) {
-      if (withAnimation == null) {
-        withAnimation = false;
-      }
+    FlipTabView.prototype.prompt = function(message) {
       this._resetClasses();
-      this.el.addClass('prompt');
       this._setText(message);
-      this.show();
-      if (withAnimation) {
-        this.el.removeClass('valid-anim');
-        return this.el.addClass('valid-anim');
-      }
+      return this.el.addClass('prompt');
     };
 
     FlipTabView.prototype._resetClasses = function() {
-      this.el.removeClass('valid-anim');
-      this.el.removeClass('warn-anim');
       this.el.removeClass('warn');
       return this.el.removeClass('prompt');
     };
@@ -639,95 +602,29 @@
   })();
 
   /*
-  Skeuocard::TextInputView
+  # Skeuocard::SegmentedCardNumberInputView
+  # Provides a reconfigurable segmented input view for credit card numbers.
   */
 
 
-  Skeuocard.prototype.TextInputView = (function() {
-
-    function TextInputView() {}
-
-    TextInputView.prototype.bind = function() {
-      var args, _ref;
-      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el).bind.apply(_ref, args);
-    };
-
-    TextInputView.prototype.trigger = function() {
-      var args, _ref;
-      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el).trigger.apply(_ref, args);
-    };
-
-    TextInputView.prototype._getFieldCaretPosition = function(el) {
-      var input, sel, selLength;
-      input = el.get(0);
-      if (input.selectionEnd != null) {
-        return input.selectionEnd;
-      } else if (document.selection) {
-        input.focus();
-        sel = document.selection.createRange();
-        selLength = document.selection.createRange().text.length;
-        sel.moveStart('character', -input.value.length);
-        return selLength;
-      }
-    };
-
-    TextInputView.prototype._setFieldCaretPosition = function(el, pos) {
-      var input, range;
-      input = el.get(0);
-      if (input.createTextRange != null) {
-        range = input.createTextRange();
-        range.move("character", pos);
-        return range.select();
-      } else if (input.selectionStart != null) {
-        input.focus();
-        return input.setSelectionRange(pos, pos);
-      }
-    };
-
-    TextInputView.prototype.show = function() {
-      return this.el.show();
-    };
-
-    TextInputView.prototype.hide = function() {
-      return this.el.hide();
-    };
-
-    TextInputView.prototype.addClass = function() {
-      var args, _ref;
-      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el).addClass.apply(_ref, args);
-    };
-
-    TextInputView.prototype.removeClass = function() {
-      var args, _ref;
-      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el).removeClass.apply(_ref, args);
-    };
-
-    TextInputView.prototype._zeroPadNumber = function(num, places) {
-      var zero;
-      zero = places - num.toString().length + 1;
-      return Array(zero).join("0") + num;
-    };
-
-    return TextInputView;
-
-  })();
-
   Skeuocard.prototype.SegmentedCardNumberInputView = (function() {
-
     SegmentedCardNumberInputView.prototype._digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 
-    SegmentedCardNumberInputView.prototype._arrowKeys = {
-      left: 37,
-      up: 38,
-      right: 39,
-      down: 40
+    SegmentedCardNumberInputView.prototype._keys = {
+      backspace: 8,
+      tab: 9,
+      enter: 13,
+      del: 46,
+      arrowLeft: 37,
+      arrowUp: 38,
+      arrowRight: 39,
+      arrowDown: 40,
+      arrows: [37, 38, 39, 40],
+      command: 16,
+      alt: 17
     };
 
-    SegmentedCardNumberInputView.prototype._specialKeys = [8, 9, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 93, 144, 145, 224];
+    SegmentedCardNumberInputView.prototype._specialKeys = [8, 9, 13, 46, 37, 38, 39, 40, 16, 17];
 
     function SegmentedCardNumberInputView(opts) {
       if (opts == null) {
@@ -747,93 +644,124 @@
     }
 
     SegmentedCardNumberInputView.prototype._buildDOM = function() {
+      var _this = this;
       this.el = $('<fieldset>');
+      this.el.addClass('cc-field');
       this.el.delegate("input", "keypress", this._handleGroupKeyPress.bind(this));
       this.el.delegate("input", "keydown", this._handleGroupKeyDown.bind(this));
       this.el.delegate("input", "keyup", this._handleGroupKeyUp.bind(this));
       this.el.delegate("input", "paste", this._handleGroupPaste.bind(this));
-      return this.el.delegate("input", "change", this._handleGroupChange.bind(this));
+      this.el.delegate("input", "change", this._handleGroupChange.bind(this));
+      this.el.delegate("input", "focus", function(e) {
+        return _this.el.addClass('focus');
+      });
+      return this.el.delegate("input", "blur", function(e) {
+        return _this.el.removeClass('focus');
+      });
     };
 
     SegmentedCardNumberInputView.prototype._handleGroupKeyDown = function(e) {
-      var currentTarget, inputGroupEl, inputMaxLength, nextInputEl, prevInputEl, selectionEnd;
+      var currentTarget, cursorEnd, cursorStart, inputGroupEl, inputMaxLength, nextInputEl, prevInputEl, _ref;
       if (e.ctrlKey || e.metaKey) {
         return this._handleModifiedKeyDown(e);
       }
       inputGroupEl = $(e.currentTarget);
       currentTarget = e.currentTarget;
-      selectionEnd = currentTarget.selectionEnd;
+      cursorStart = currentTarget.selectionStart;
+      cursorEnd = currentTarget.selectionEnd;
       inputMaxLength = currentTarget.maxLength;
       prevInputEl = inputGroupEl.prevAll('input');
       nextInputEl = inputGroupEl.nextAll('input');
-      if (e.which === 8 && prevInputEl.length > 0) {
-        if (selectionEnd === 0) {
-          this._focusField(prevInputEl.first(), 'end');
-        }
-      }
-      return true;
-    };
-
-    SegmentedCardNumberInputView.prototype._handleGroupKeyUp = function(e) {
-      var currentTarget, inputGroupEl, inputMaxLength, nextInputEl, selectionEnd, _ref;
-      inputGroupEl = $(e.currentTarget);
-      currentTarget = e.currentTarget;
-      selectionEnd = currentTarget.selectionEnd;
-      inputMaxLength = currentTarget.maxLength;
-      nextInputEl = inputGroupEl.nextAll('input');
-      if (e.ctrlKey || e.metaKey) {
-        return false;
-      }
-      if ((_ref = e.which) === 37 || _ref === 38 || _ref === 39 || _ref === 40) {
-        if (this._state.selectingAll) {
-          this._endSelectAll();
-        }
-      }
       switch (e.which) {
-        case this._arrowKeys.left:
-          if (selectionEnd === 0) {
+        case this._keys.backspace:
+          if (prevInputEl.length > 0 && cursorEnd === 0) {
+            this._focusField(prevInputEl.first(), 'end');
+          }
+          break;
+        case this._keys.arrowUp:
+          if (cursorEnd === inputMaxLength) {
+            this._focusField(inputGroupEl, 'start');
+          } else {
             this._focusField(inputGroupEl.prev(), 'end');
           }
+          e.preventDefault();
           break;
-        case this._arrowKeys.right:
-          if (selectionEnd === inputMaxLength) {
+        case this._keys.arrowDown:
+          if (cursorEnd === inputMaxLength) {
             this._focusField(inputGroupEl.next(), 'start');
+          } else {
+            this._focusField(inputGroupEl, 'end');
           }
-          break;
-        case this._arrowKeys.up:
-          this._focusField(inputGroupEl.next(), 'start');
           e.preventDefault();
           break;
-        case this._arrowKeys.down:
-          this._focusField(inputGroupEl.prev(), 'start');
-          e.preventDefault();
+        case this._keys.arrowLeft:
+          if (cursorEnd === 0) {
+            this._focusField(inputGroupEl.prev(), 'end');
+            e.preventDefault();
+          }
+          break;
+        case this._keys.arrowRight:
+          if (cursorEnd === inputMaxLength) {
+            this._focusField(inputGroupEl.next(), 'start');
+            e.preventDefault();
+          }
           break;
         default:
-          if (selectionEnd === inputMaxLength) {
-            if (nextInputEl.length !== 0) {
-              this._focusField(nextInputEl.first(), 'start');
-            } else {
-              e.preventDefault();
-            }
+          if (!(_ref = e.which, __indexOf.call(this._specialKeys, _ref) >= 0) && (cursorStart === inputMaxLength && cursorEnd === inputMaxLength) && nextInputEl.length !== 0) {
+            this._focusField(nextInputEl.first(), 'start');
           }
       }
-      this.trigger('change', [this]);
       return true;
     };
 
     SegmentedCardNumberInputView.prototype._handleGroupKeyPress = function(e) {
-      var currentTarget, inputGroupEl, inputMaxLength, isDigit, nextInputEl, selectionEnd, _ref, _ref1;
+      var inputGroupEl, isDigit, _ref, _ref1;
+      inputGroupEl = $(e.currentTarget);
+      isDigit = (_ref = String.fromCharCode(e.which), __indexOf.call(this._digits, _ref) >= 0);
+      if (e.ctrlKey || e.metaKey) {
+        return true;
+      }
+      if (e.which === 0) {
+        return true;
+      }
+      if ((!e.shiftKey && (_ref1 = e.which, __indexOf.call(this._specialKeys, _ref1) >= 0)) || isDigit) {
+        return true;
+      }
+      e.preventDefault();
+      return false;
+    };
+
+    SegmentedCardNumberInputView.prototype._handleGroupKeyUp = function(e) {
+      var currentTarget, cursorEnd, cursorStart, inputGroupEl, inputMaxLength, nextInputEl, _ref, _ref1, _ref2;
       inputGroupEl = $(e.currentTarget);
       currentTarget = e.currentTarget;
-      selectionEnd = currentTarget.selectionEnd;
       inputMaxLength = currentTarget.maxLength;
-      isDigit = (_ref = String.fromCharCode(e.which), __indexOf.call(this._digits, _ref) >= 0);
+      cursorStart = currentTarget.selectionStart;
+      cursorEnd = currentTarget.selectionEnd;
       nextInputEl = inputGroupEl.nextAll('input');
-      if (e.ctrlKey || e.metaKey || (_ref1 = e.which, __indexOf.call(this._specialKeys, _ref1) >= 0) || isDigit) {
+      if (e.ctrlKey || e.metaKey) {
         return true;
-      } else {
-        e.preventDefault();
-        return false;
+      }
+      if (this._state.selectingAll && (_ref = e.which, __indexOf.call(this._specialKeys, _ref) >= 0) && e.which !== this._keys.command && e.which !== this._keys.alt) {
+        this._endSelectAll();
+      }
+      if (!(_ref1 = e.which, __indexOf.call(this._specialKeys, _ref1) >= 0) && !(e.shiftKey && e.which === this._keys.tab) && (cursorStart === inputMaxLength && cursorEnd === inputMaxLength) && nextInputEl.length !== 0) {
+        this._focusField(nextInputEl.first(), 'start');
+      }
+      if (!(e.shiftKey && (_ref2 = e.which, __indexOf.call(this._specialKeys, _ref2) >= 0))) {
+        this.trigger('change', [this]);
+      }
+      return true;
+    };
+
+    SegmentedCardNumberInputView.prototype._handleModifiedKeyDown = function(e) {
+      var char;
+      char = String.fromCharCode(e.which);
+      switch (char) {
+        case 'a':
+        case 'A':
+          this._beginSelectAll();
+          return e.preventDefault();
       }
     };
 
@@ -850,16 +778,6 @@
       }, 50);
     };
 
-    SegmentedCardNumberInputView.prototype._handleModifiedKeyDown = function(e) {
-      var char;
-      char = String.fromCharCode(e.which);
-      switch (char) {
-        case 'A':
-          this._beginSelectAll();
-          return e.preventDefault();
-      }
-    };
-
     SegmentedCardNumberInputView.prototype._handleGroupChange = function(e) {
       return e.stopPropagation();
     };
@@ -870,14 +788,14 @@
 
     SegmentedCardNumberInputView.prototype._beginSelectAll = function() {
       var fieldEl;
-      if (this._state.selectingAll === false) {
-        this._state.selectingAll = true;
+      if (!this.el.hasClass('selecting-all')) {
         this._state.lastGrouping = this.options.groupings;
-        this._state.lastValue = this.getValue();
+        this._state.lastLength = this.getValue().length;
         this.setGroupings(this.optDefaults.groupings);
         this.el.addClass('selecting-all');
         fieldEl = this.el.find("input");
-        return fieldEl[0].setSelectionRange(0, fieldEl.val().length);
+        fieldEl[0].setSelectionRange(0, fieldEl.val().length);
+        return this._state.selectingAll = true;
       } else {
         fieldEl = this.el.find("input");
         return fieldEl[0].setSelectionRange(0, fieldEl.val().length);
@@ -885,14 +803,12 @@
     };
 
     SegmentedCardNumberInputView.prototype._endSelectAll = function() {
-      if (this._state.selectingAll) {
-        if (this._state.lastValue === this.getValue()) {
+      if (this.el.hasClass('selecting-all')) {
+        this._state.selectingAll = false;
+        if (this._state.lastLength === this.getValue().length) {
           this.setGroupings(this._state.lastGrouping);
-        } else {
-          this._focusField(this.el.find('input').last(), 'end');
         }
-        this.el.removeClass('selecting-all');
-        return this._state.selectingAll = false;
+        return this.el.removeClass('selecting-all');
       }
     };
 
@@ -949,8 +865,8 @@
         field = this.el.find('input').last();
         this._focusField(field, place);
       } else {
-        field = void 0;
-        fieldOffset = void 0;
+        field = null;
+        fieldOffset = null;
         _lastStartPos = 0;
         _ref = this.options.groupings;
         for (groupIndex = _i = 0, _len = _ref.length; _i < _len; groupIndex = ++_i) {
@@ -1019,35 +935,6 @@
       });
     };
 
-    SegmentedCardNumberInputView.prototype.isFilled = function() {
-      return this.getValue().length === this.maxLength();
-    };
-
-    SegmentedCardNumberInputView.prototype.isValid = function() {
-      return this.isFilled() && this.isValidLuhn(this.getValue());
-    };
-
-    SegmentedCardNumberInputView.prototype.isValidLuhn = function(identifier) {
-      var alt, i, num, sum, _i, _ref;
-      sum = 0;
-      alt = false;
-      for (i = _i = _ref = identifier.length - 1; _i >= 0; i = _i += -1) {
-        num = parseInt(identifier.charAt(i), 10);
-        if (isNaN(num)) {
-          return false;
-        }
-        if (alt) {
-          num *= 2;
-          if (num > 9) {
-            num = (num % 10) + 1;
-          }
-        }
-        alt = !alt;
-        sum += num;
-      }
-      return sum % 10 === 0;
-    };
-
     SegmentedCardNumberInputView.prototype.bind = function() {
       var args, _ref;
       args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
@@ -1089,37 +976,43 @@
   */
 
 
-  Skeuocard.prototype.ExpirationInputView = (function(_super) {
-
-    __extends(ExpirationInputView, _super);
-
+  Skeuocard.prototype.ExpirationInputView = (function() {
     function ExpirationInputView(opts) {
       var _this = this;
       if (opts == null) {
         opts = {};
       }
-      opts.dateFormatter || (opts.dateFormatter = function(date) {
-        return date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
-      });
-      opts.dateParser || (opts.dateParser = function(value) {
-        var dateParts;
-        dateParts = value.split('-');
-        return new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
-      });
-      opts.currentDate || (opts.currentDate = new Date());
       opts.pattern || (opts.pattern = "MM/YY");
       this.options = opts;
-      this.date = void 0;
-      this.value = void 0;
+      this.date = null;
       this.el = $("<fieldset>");
+      this.el.addClass('cc-field');
       this.el.delegate("input", "keydown", function(e) {
         return _this._onKeyDown(e);
       });
       this.el.delegate("input", "keyup", function(e) {
         return _this._onKeyUp(e);
       });
+      this.el.delegate("input", "focus", function(e) {
+        return _this.el.addClass('focus');
+      });
+      this.el.delegate("input", "blur", function(e) {
+        return _this.el.removeClass('focus');
+      });
     }
 
+    ExpirationInputView.prototype.bind = function() {
+      var args, _ref;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      return (_ref = this.el).bind.apply(_ref, args);
+    };
+
+    ExpirationInputView.prototype.trigger = function() {
+      var args, _ref;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      return (_ref = this.el).trigger.apply(_ref, args);
+    };
+
     ExpirationInputView.prototype._getFieldCaretPosition = function(el) {
       var input, sel, selLength;
       input = el.get(0);
@@ -1197,6 +1090,12 @@
       }
     };
 
+    ExpirationInputView.prototype._zeroPadNumber = function(num, places) {
+      var zero;
+      zero = places - num.toString().length + 1;
+      return Array(zero).join("0") + num;
+    };
+
     ExpirationInputView.prototype._updateFieldValues = function() {
       var currentDate,
         _this = this;
@@ -1228,24 +1127,13 @@
       });
     };
 
-    ExpirationInputView.prototype.setDate = function(newDate) {
+    ExpirationInputView.prototype.setValue = function(newDate) {
       this.date = newDate;
-      this.value = this.options.dateFormatter(newDate);
-      return this._updateFieldValues();
-    };
-
-    ExpirationInputView.prototype.setValue = function(newValue) {
-      this.value = newValue;
-      this.date = this.options.dateParser(newValue);
       return this._updateFieldValues();
     };
 
-    ExpirationInputView.prototype.getDate = function() {
-      return this.date;
-    };
-
     ExpirationInputView.prototype.getValue = function() {
-      return this.value;
+      return this.date;
     };
 
     ExpirationInputView.prototype.reconfigure = function(opts) {
@@ -1294,6 +1182,10 @@
       }
     };
 
+    ExpirationInputView.prototype.getRawValue = function(fieldType) {
+      return parseInt(this.el.find(".cc-exp-field-" + fieldType).val());
+    };
+
     ExpirationInputView.prototype._onKeyUp = function(e) {
       var arrowKeys, dateObj, day, groupCaretPos, groupEl, groupMaxLength, groupValLength, month, nextInputEl, pattern, specialKeys, year, _ref, _ref1;
       e.stopPropagation();
@@ -1316,18 +1208,16 @@
       if ((_ref1 = e.which, __indexOf.call(specialKeys, _ref1) < 0) && groupEl.val().length === groupMaxLength && !$.isEmptyObject(nextInputEl) && this._getFieldCaretPosition(groupEl) === groupMaxLength) {
         nextInputEl.focus();
       }
-      day = parseInt(this.el.find('.cc-exp-field-d').val()) || 1;
-      month = parseInt(this.el.find('.cc-exp-field-m').val());
-      year = parseInt(this.el.find('.cc-exp-field-y').val());
+      day = this.getRawValue('d') || 1;
+      month = this.getRawValue('m');
+      year = this.getRawValue('y');
       if (month === 0 || year === 0) {
-        this.value = "";
         this.date = null;
       } else {
         if (year < 2000) {
           year += 2000;
         }
         dateObj = new Date(year, month - 1, day);
-        this.value = this.options.dateFormatter(dateObj);
         this.date = dateObj;
       }
       this.trigger("keyup", [this]);
@@ -1338,126 +1228,352 @@
       return this.el.find("input");
     };
 
-    ExpirationInputView.prototype.isFilled = function() {
-      var el, inputEl, _i, _len, _ref;
-      _ref = this.groupEls;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        inputEl = _ref[_i];
-        el = $(inputEl);
-        if (el.val().length !== parseInt(el.attr('maxlength'))) {
-          return false;
-        }
-      }
-      return true;
+    ExpirationInputView.prototype.show = function() {
+      return this.el.show();
     };
 
-    ExpirationInputView.prototype.isValid = function() {
-      return this.isFilled() && ((this.date.getFullYear() === this.options.currentDate.getFullYear() && this.date.getMonth() >= this.options.currentDate.getMonth()) || this.date.getFullYear() > this.options.currentDate.getFullYear());
+    ExpirationInputView.prototype.hide = function() {
+      return this.el.hide();
     };
 
     return ExpirationInputView;
 
-  })(Skeuocard.prototype.TextInputView);
+  })();
 
-  Skeuocard.prototype.TextInputView = (function(_super) {
+  /*
+  Skeuocard::TextInputView
+  */
 
-    __extends(TextInputView, _super);
 
+  Skeuocard.prototype.TextInputView = (function() {
     function TextInputView(opts) {
-      this.el = $("<input>").attr({
+      var _this = this;
+      this.el = $('<div>');
+      this.inputEl = $("<input>").attr({
         type: 'text',
         placeholder: opts.placeholder,
         "class": opts["class"]
       });
+      this.el.append(this.inputEl);
+      this.el.addClass('cc-field');
       this.options = opts;
+      this.el.delegate("input", "focus", function(e) {
+        return _this.el.addClass('focus');
+      });
+      this.el.delegate("input", "blur", function(e) {
+        return _this.el.removeClass('focus');
+      });
+      this.el.delegate("input", "keyup", function(e) {
+        e.stopPropagation();
+        return _this.trigger('keyup', [_this]);
+      });
     }
 
     TextInputView.prototype.clear = function() {
-      return this.el.val("");
+      return this.inputEl.val("");
     };
 
     TextInputView.prototype.attr = function() {
       var args, _ref;
       args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
-      return (_ref = this.el).attr.apply(_ref, args);
+      return (_ref = this.inputEl).attr.apply(_ref, args);
     };
 
-    TextInputView.prototype.isFilled = function() {
-      return this.el.val().length > 0;
+    TextInputView.prototype.setValue = function(newValue) {
+      return this.inputEl.val(newValue);
     };
 
-    TextInputView.prototype.isValid = function() {
-      if (this.options.requireMaxLength) {
-        return this.el.val().length === parseInt(this.el.attr('maxlength'));
-      } else {
-        return this.isFilled();
-      }
+    TextInputView.prototype.getValue = function() {
+      return this.inputEl.val();
     };
 
-    TextInputView.prototype.getValue = function() {
-      return this.el.val();
+    TextInputView.prototype.bind = function() {
+      var args, _ref;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      return (_ref = this.el).bind.apply(_ref, args);
     };
 
-    return TextInputView;
+    TextInputView.prototype.trigger = function() {
+      var args, _ref;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      return (_ref = this.el).trigger.apply(_ref, args);
+    };
 
-  })(Skeuocard.prototype.TextInputView);
+    TextInputView.prototype.show = function() {
+      return this.el.show();
+    };
 
-  window.Skeuocard = Skeuocard;
+    TextInputView.prototype.hide = function() {
+      return this.el.hide();
+    };
+
+    return TextInputView;
+
+  })();
 
   /*
-  # Card Definitions
+  Skeuocard::CardProduct
   */
 
 
-  CCProducts = {};
+  Skeuocard.prototype.CardProduct = (function() {
+    CardProduct._registry = [];
+
+    CardProduct.create = function(opts) {
+      return this._registry.push(new Skeuocard.prototype.CardProduct(opts));
+    };
+
+    CardProduct.firstMatchingShortname = function(shortname) {
+      var card, _i, _len, _ref;
+      _ref = this._registry;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        card = _ref[_i];
+        if (card.attrs.companyShortname === shortname) {
+          return card;
+        }
+      }
+      return null;
+    };
+
+    CardProduct.firstMatchingNumber = function(number) {
+      var card, combinedOptions, variation, _i, _len, _ref;
+      _ref = this._registry;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        card = _ref[_i];
+        if (card.pattern.test(number)) {
+          if ((variation = card.firstVariationMatchingNumber(number))) {
+            combinedOptions = $.extend({}, card.attrs, variation);
+            return new Skeuocard.prototype.CardProduct(combinedOptions);
+          }
+          return new Skeuocard.prototype.CardProduct(card.attrs);
+        }
+      }
+      return null;
+    };
+
+    function CardProduct(attrs) {
+      this.attrs = $.extend({}, attrs);
+      this.pattern = this.attrs.pattern;
+      this._variances = [];
+      this.name = {
+        isFilled: this._isCardNameFilled.bind(this),
+        isValid: this._isCardNameValid.bind(this)
+      };
+      this.number = {
+        isFilled: this._isCardNumberFilled.bind(this),
+        isValid: this._isCardNumberValid.bind(this)
+      };
+      this.exp = {
+        isFilled: this._isCardExpirationFilled.bind(this),
+        isValid: this._isCardExpirationValid.bind(this)
+      };
+      this.cvc = {
+        isFilled: this._isCardCVCFilled.bind(this),
+        isValid: this._isCardCVCValid.bind(this)
+      };
+    }
+
+    CardProduct.prototype.createVariation = function(attrs) {
+      return this._variances.push(attrs);
+    };
+
+    CardProduct.prototype.firstVariationMatchingNumber = function(number) {
+      var variance, _i, _len, _ref;
+      _ref = this._variances;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        variance = _ref[_i];
+        if (variance.pattern.test(number)) {
+          return variance;
+        }
+      }
+      return null;
+    };
+
+    CardProduct.prototype.fieldsForLayoutFace = function(faceName) {
+      var face, fieldName, _ref, _results;
+      _ref = this.attrs.layout;
+      _results = [];
+      for (fieldName in _ref) {
+        face = _ref[fieldName];
+        if (face === faceName) {
+          _results.push(fieldName);
+        }
+      }
+      return _results;
+    };
+
+    CardProduct.prototype._id = function() {
+      var ident;
+      ident = this.attrs.companyShortname;
+      if (this.attrs.issuerShortname != null) {
+        ident += this.attrs.issuerShortname;
+      }
+      return ident;
+    };
+
+    CardProduct.prototype.eql = function(otherCardProduct) {
+      return (otherCardProduct != null ? otherCardProduct._id() : void 0) === this._id();
+    };
+
+    CardProduct.prototype._daysInMonth = function(m, y) {
+      switch (m) {
+        case 1:
+          if ((y % 4 === 0 && y % 100) || y % 400 === 0) {
+            return 29;
+          } else {
+            return 28;
+          }
+        case 3:
+        case 5:
+        case 8:
+        case 10:
+          return 30;
+        default:
+          return 31;
+      }
+    };
+
+    CardProduct.prototype._isCardNumberFilled = function(number) {
+      var _ref;
+      if (this.attrs.cardNumberLength != null) {
+        return (_ref = number.length, __indexOf.call(this.attrs.cardNumberLength, _ref) >= 0);
+      }
+    };
+
+    CardProduct.prototype._isCardExpirationFilled = function(exp) {
+      var currentDate, day, month, year;
+      currentDate = Skeuocard.currentDate;
+      if (!((exp != null) && (exp.getMonth != null) && (exp.getFullYear != null))) {
+        return false;
+      }
+      day = exp.getDate();
+      month = exp.getMonth();
+      year = exp.getFullYear();
+      return (day > 0 && day <= this._daysInMonth(month, year)) && (month >= 0 && month <= 11) && (year >= 1900 && year <= currentDate.getFullYear() + 10);
+    };
+
+    CardProduct.prototype._isCardCVCFilled = function(cvc) {
+      return cvc.length === this.attrs.cvcLength;
+    };
+
+    CardProduct.prototype._isCardNameFilled = function(name) {
+      return name.length > 0;
+    };
+
+    CardProduct.prototype._isCardNumberValid = function(number) {
+      return /^\d+$/.test(number) && (this.attrs.validateLuhn === false || this._isValidLuhn(number)) && this._isCardNumberFilled(number);
+    };
+
+    CardProduct.prototype._isCardExpirationValid = function(exp) {
+      var currentDate, day, isDateInFuture, month, year;
+      if (!((exp != null) && (exp.getMonth != null) && (exp.getFullYear != null))) {
+        return false;
+      }
+      currentDate = Skeuocard.currentDate;
+      day = exp.getDate();
+      month = exp.getMonth();
+      year = exp.getFullYear();
+      isDateInFuture = (year === currentDate.getFullYear() && month >= currentDate.getMonth()) || year > currentDate.getFullYear();
+      return isDateInFuture && this._isCardExpirationFilled(exp);
+    };
+
+    CardProduct.prototype._isCardCVCValid = function(cvc) {
+      return this._isCardCVCFilled(cvc);
+    };
+
+    CardProduct.prototype._isCardNameValid = function(name) {
+      return this._isCardNameFilled(name);
+    };
+
+    CardProduct.prototype._isValidLuhn = function(number) {
+      var alt, i, num, sum, _i, _ref;
+      sum = 0;
+      alt = false;
+      for (i = _i = _ref = number.length - 1; _i >= 0; i = _i += -1) {
+        num = parseInt(number.charAt(i), 10);
+        if (isNaN(num)) {
+          return false;
+        }
+        if (alt) {
+          num *= 2;
+          if (num > 9) {
+            num = (num % 10) + 1;
+          }
+        }
+        alt = !alt;
+        sum += num;
+      }
+      return sum % 10 === 0;
+    };
+
+    return CardProduct;
+
+  })();
+
+  /*
+  # Seed CardProducts.
+  */
 
-  CCProducts[/^30[0-5][0-9]/] = {
+
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^(36|38|30[0-5])/,
     companyName: "Diners Club",
     companyShortname: "dinersclubintl",
     cardNumberGrouping: [4, 6, 4],
+    cardNumberLength: [14],
     expirationFormat: "MM/YY",
     cvcLength: 3,
+    validateLuhn: true,
     layout: {
       number: 'front',
       exp: 'front',
       name: 'front',
       cvc: 'back'
     }
-  };
+  });
 
-  CCProducts[/^3095/] = {
-    companyName: "Diners Club International",
-    companyShortname: "dinersclubintl",
-    cardNumberGrouping: [4, 6, 4],
-    expirationFormat: "MM/YY",
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^35/,
+    companyName: "JCB",
+    companyShortname: "jcb",
+    cardNumberGrouping: [4, 4, 4, 4],
+    cardNumberLength: [16],
+    expirationFormat: "MM/'YY",
     cvcLength: 3,
+    validateLuhn: true,
     layout: {
       number: 'front',
       exp: 'front',
       name: 'front',
       cvc: 'back'
     }
-  };
+  });
 
-  CCProducts[/^36\d{2}/] = {
-    companyName: "Diners Club International",
-    companyShortname: "dinersclubintl",
-    cardNumberGrouping: [4, 6, 4],
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^3[47]/,
+    companyName: "American Express",
+    companyShortname: "amex",
+    cardNumberGrouping: [4, 6, 5],
+    cardNumberLength: [15],
     expirationFormat: "MM/YY",
-    cvcLength: 3,
+    cvcLength: 4,
+    validateLuhn: true,
     layout: {
       number: 'front',
       exp: 'front',
       name: 'front',
-      cvc: 'back'
+      cvc: 'front'
     }
-  };
+  });
 
-  CCProducts[/^35\d{2}/] = {
-    companyName: "JCB",
-    companyShortname: "jcb",
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^(6706|6771|6709)/,
+    companyName: "Laser Card Services Ltd.",
+    companyShortname: "laser",
     cardNumberGrouping: [4, 4, 4, 4],
+    cardNumberLength: [16, 17, 18, 19],
     expirationFormat: "MM/YY",
+    validateLuhn: true,
     cvcLength: 3,
     layout: {
       number: 'front',
@@ -1465,27 +1581,33 @@
       name: 'front',
       cvc: 'back'
     }
-  };
+  });
 
-  CCProducts[/^3[47]/] = {
-    companyName: "American Express",
-    companyShortname: "amex",
-    cardNumberGrouping: [4, 6, 5],
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^4/,
+    companyName: "Visa",
+    companyShortname: "visa",
+    cardNumberGrouping: [4, 4, 4, 4],
+    cardNumberLength: [13, 14, 15, 16],
     expirationFormat: "MM/YY",
-    cvcLength: 4,
+    validateLuhn: true,
+    cvcLength: 3,
     layout: {
       number: 'front',
       exp: 'front',
       name: 'front',
-      cvc: 'front'
+      cvc: 'back'
     }
-  };
-
-  CCProducts[/^38/] = {
-    companyName: "Hipercard",
-    companyShortname: "hipercard",
-    cardNumberGrouping: [4, 4, 4, 4],
+  });
+
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^(62|88)/,
+    companyName: "China UnionPay",
+    companyShortname: "unionpay",
+    cardNumberGrouping: [19],
+    cardNumberLength: [16, 17, 18, 19],
     expirationFormat: "MM/YY",
+    validateLuhn: false,
     cvcLength: 3,
     layout: {
       number: 'front',
@@ -1493,13 +1615,16 @@
       name: 'front',
       cvc: 'back'
     }
-  };
+  });
 
-  CCProducts[/^4[0-9]\d{2}/] = {
-    companyName: "Visa",
-    companyShortname: "visa",
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^5[1-5]/,
+    companyName: "Mastercard",
+    companyShortname: "mastercard",
     cardNumberGrouping: [4, 4, 4, 4],
+    cardNumberLength: [16],
     expirationFormat: "MM/YY",
+    validateLuhn: true,
     cvcLength: 3,
     layout: {
       number: 'front',
@@ -1507,13 +1632,16 @@
       name: 'front',
       cvc: 'back'
     }
-  };
+  });
 
-  CCProducts[/^5[0-8]\d{2}/] = {
-    companyName: "Mastercard",
-    companyShortname: "mastercard",
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^(5018|5020|5038|6304|6759|676[1-3])/,
+    companyName: "Maestro (MasterCard)",
+    companyShortname: "maestro",
     cardNumberGrouping: [4, 4, 4, 4],
+    cardNumberLength: [12, 13, 14, 15, 16, 17, 18, 19],
     expirationFormat: "MM/YY",
+    validateLuhn: true,
     cvcLength: 3,
     layout: {
       number: 'front',
@@ -1521,13 +1649,16 @@
       name: 'front',
       cvc: 'back'
     }
-  };
+  });
 
-  CCProducts[/^6011/] = {
+  Skeuocard.prototype.CardProduct.create({
+    pattern: /^(6011|65|64[4-9]|622)/,
     companyName: "Discover",
     companyShortname: "discover",
     cardNumberGrouping: [4, 4, 4, 4],
+    cardNumberLength: [16],
     expirationFormat: "MM/YY",
+    validateLuhn: true,
     cvcLength: 3,
     layout: {
       number: 'front',
@@ -1535,25 +1666,21 @@
       name: 'front',
       cvc: 'back'
     }
-  };
-
-  CCIssuers = {};
-
-  /*
-  Hack fixes the Chase Sapphire card's stupid (nice?) layout non-conformity.
-  */
+  });
 
+  visaProduct = Skeuocard.prototype.CardProduct.firstMatchingShortname('visa');
 
-  CCIssuers[/^414720/] = {
+  visaProduct.createVariation({
+    pattern: /^414720/,
     issuingAuthority: "Chase",
     issuerName: "Chase Sapphire Card",
     issuerShortname: "chase-sapphire",
     layout: {
+      name: 'front',
       number: 'front',
       exp: 'front',
-      name: 'front',
       cvc: 'front'
     }
-  };
+  });
 
 }).call(this);