(function() {
  "use strict";
  var states = {
    MAIN = 0,
    VIEW = 1
  };
  
  var sequenceTypes = {
    ALPHABETICAL = 0,
    NUMERIC = 1
  };

  var casings = {
    LOWERCASE = 0,
    UPPERCASE = 1,
    MIXED = 2
  };
  
  var state = null;
  var baseUrl = null;
  var sequences = [];
  
  function byId(input) {
    return document.getElementById(input);
  }
  
  function byClass(input) {
    return document.getElementsByClassName(input);
  }
  
  function byTag(input) {
    return document.getElementsByTagName(input);
  }

  Element.prototype.byId = function(input) {
      return this.getElementById(input);
  };

  Element.prototype.byClass = function(input) {
      return this.getElementsByClassName(input);
  };

  Element.prototype.byTag = function(input) {
      return this.getElementsByTagName(input);
  };
  
  function addAlphabeticalSequence(casing, start) {
    addSequence(sequenceTypes.ALPHABETICAL, 0, casing, start);
  }
  
  function addNumericSequence(padding, start) {
    addSequence(sequenceTypes.NUMERIC, padding, casing.MIXED, start);
  }
  
  function addSequence(type, padding, casing, start) {
    var sequence = {
      type: type,
      padding: padding,
      casing: casing,
      start: start
    };
    sequences.push(sequence);
    var element = document.createElement("div");
    element.innerHTML = '<select class="type"><option value="0">Alphabetical</option><option value="1">Numeric</option></select></div>' +
      '&nbsp;<select class="casing"><option value="0">Lowercase</option><option value="1">Uppercase</option><option value="1">Mixed</option></select>' +
      'Start at: <input type="text" class="start">';
    element.className = "sequence";
    byId("sequences").addChild(element);
    element.byClass("type").addEventListener("change", onTypeChange);
  }

  function addNewSequence() {
    addAlphabeticalSequence(casing.LOWERCASE, "a");
  }

  function onTypeChange(e) {
      alert(this.selectedIndex);
  }
  
  function removeSequence(index) {
    if (index > -1 && index < sequences.length) {
        sequences.splice(index, 1);
    }
  }
  
  function setup() {
    document.removeEventListener("DOMContentLoaded", setup);
    state = states.MAIN;
    byId("add-sequence").addEventListener("click", addNewSequence);
  }
  
  document.addEventListener("DOMContentLoaded", setup);
}).call(this);

@@ -48,18 +48,17 @@
     MAIN
- =
+:
  0,%0A    
@@ -61,18 +61,17 @@
     VIEW
- =
+:
  1%0A  %7D;%0A
@@ -113,18 +113,17 @@
 ABETICAL
- =
+:
  0,%0A    
@@ -129,18 +129,17 @@
  NUMERIC
- =
+:
  1%0A  %7D;%0A
@@ -170,18 +170,17 @@
 OWERCASE
- =
+:
  0,%0A    
@@ -188,18 +188,17 @@
 PPERCASE
- =
+:
  1,%0A    
@@ -202,18 +202,17 @@
    MIXED
- =
+:
  2%0A  %7D;%0A

Update img.js