( function() {
  
    // Cross-browser event listener
    var addListener = function() {
      if ( window.addEventListener ) {
          return function(el, type, fn) {
              el.addEventListener(type, fn, false);
          };
      } else if ( window.attachEvent ) {
          return function(el, type, fn) {
              var f = function() {
                  fn.call(el, window.event);
              };
              el.attachEvent('on'+type, f);
          };
      } else {
          return function(el, type, fn) {
              element['on'+type] = fn;
          }
      }
    }();
    
    // Check if Dom supported and grab relevant 
    //   dom elements
    if(!document.getElementById) return false;
    var base = document.getElementById("amazon");
    var chartLayers = document.getElementById("amazon-charts");
    var controlsContainer = document.getElementById("amazon-controls");
    
    // Add class to toggle interactivity-specific styles
    base.className += "layers-active"; 
    
    // Detect form controls
    var formControls = [];
    
    // Create HTML form controls and append to interface
    var children = chartLayers.childNodes;
    var len = children.length;
    var i = 0;
    for(; i < len; i++) {
      if(children[i].tagName == "LI") {
        
        var layer = children[i];
        var formLabel = layer.getElementsByTagName("span")[0].innerHTML;
        
        formControls.push({
          layer: children[i],
          formLabel: formLabel
        });
      }
    }
    
    controlsContainer.appendChild( createFormControls(formControls) );
    
    // Attach event to chart controls (also works with keyboard)
    addListener(controlsContainer, 'click', changeLayer);
        
    // Make the first layer active
    formControls[0].layer.className = "active"
    
    ///////
    
    // Takes an array of {formLabel, layer} pairs and
    // creates a radio button with value="formLael"
    // all wrapped in a div.
    // The first radio is checked.
    function createFormControls( formControlList ) {
      var selected = "checked = 'checked'";
      
      var wrapper = document.createElement("form");
      
      var explanation = document.createElement("legend");
          explanation.innerHTML = "Click to see rainforest compared to area of the following...";
          
      wrapper.appendChild(explanation);
      
      var i = 0;
      var len = formControlList.length;
      for(; i < len; i++) {
        var controlLabelText = formControlList[i].formLabel;
        var controlLabelElement = document.createElement("label");
        var controlHTML = "<input type='radio' name='amazon_controls' value='" + controlLabelText + "' " + selected + "/> " + controlLabelText;       
        controlLabelElement.innerHTML = controlHTML;
        wrapper.appendChild( controlLabelElement );   
        
        if(selected) selected = "";
      }
      
      return wrapper;
    }
    
    // This appends a class name of 'active' to the
    // list element that has the same value as the 
    // selected element.
    function changeLayer(e) {
      var element = e.target || e.srcElement;
      if(element.tagName == "INPUT") {
        
        var value = findCurrentRadioButton(controlsContainer).value;
        
        var i = 0;
        var len = formControls.length;
        for(; i < len; i++) {
          if(formControls[i].formLabel == value) {
            formControls[i].layer.className = "active";
          } else {
            formControls[i].layer.className = "";
          }
        }
      }
      
      // stop propagation to other event handlers
      //return true;
    }
    
    function findCurrentRadioButton(container) {
      var controls = container.getElementsByTagName("input");
      var i = 0;
      var len = controls.length;
      for(; i < len; i++) {
        var control = controls[i];
        if(control.checked) return control
      }
      return controls[0];
    }
    
  })();