function hide_containers (except) {
  var containers = document.getElementsByTagName("div");
  for (var i = 0 ; i < containers.length; i++) {
    if (containers[i].className == "container") {
      if (containers[i].id != except) containers[i].style.display = "none";
    }
  }
}

function show_naturals(displayName) {
  hide_containers('naturals');
  var block = document.getElementById("naturals");
  block.getElementsByTagName('h1')[0].innerHTML = displayName;
  block.style.display = "block";
}

function show_plastic (displayName) {
  hide_containers('plastic');
  var block = document.getElementById("plastic");
  block.getElementsByTagName('h1')[0].innerHTML = displayName;
  block.style.display = "block";
}

function show_glitter (displayName) {
  hide_containers('glitter');
  var block = document.getElementById("glitter");
  block.getElementsByTagName('h1')[0].innerHTML = displayName;
  block.style.display = "block";
}

function getCSSRule(ruleName, deleteFlag) {               // Return requested style obejct
   ruleName=ruleName.toLowerCase();                       // Convert test string to lower case.
   if (document.styleSheets) {                            // If browser can play with stylesheets
      for (var i=0; i<document.styleSheets.length; i++) { // For each stylesheet
         var styleSheet=document.styleSheets[i];          // Get the current Stylesheet
         var ii=0;                                        // Initialize subCounter.
         var cssRule=false;                               // Initialize cssRule. 
         do {                                             // For each rule in stylesheet
            if (styleSheet.cssRules) {                    // Browser uses cssRules?
               cssRule = styleSheet.cssRules[ii];         // Yes --Mozilla Style
            } else {                                      // Browser usses rules?
               cssRule = styleSheet.rules[ii];            // Yes IE style. 
            }                                             // End IE check.
            if (cssRule)  {                               // If we found a rule...
               if (cssRule.selectorText.toLowerCase()==ruleName) { //  match ruleName?
                  if (deleteFlag=='delete') {             // Yes.  Are we deleteing?
                     if (styleSheet.cssRules) {           // Yes, deleting...
                        styleSheet.deleteRule(ii);        // Delete rule, Moz Style
                     } else {                             // Still deleting.
                        styleSheet.removeRule(ii);        // Delete rule IE style.
                     }                                    // End IE check.
                     return true;                         // return true, class deleted.
                  } else {                                // found and not deleting.
                     return cssRule;                      // return the style object.
                  }                                       // End delete Check
               }                                          // End found rule name
            }                                             // end found cssRule
            ii++;                                         // Increment sub-counter
         } while (cssRule)                                // end While loop
      }                                                   // end For loop
   }                                                      // end styleSheet ability check
   return false;                                          // we found NOTHING!
}                                                         // end getCSSRule 

function killCSSRule(ruleName) {                          // Delete a CSS rule   
   return getCSSRule(ruleName,'delete');                  // just call getCSSRule w/delete flag.
}                                                         // end killCSSRule

function addCSSRule(ruleName) {                           // Create a new css rule
   if (document.styleSheets) {                            // Can browser do styleSheets?
      if (!getCSSRule(ruleName)) {                        // if rule doesn't exist...
         if (document.styleSheets[0].addRule) {           // Browser is IE?
            document.styleSheets[0].addRule(ruleName, null,0);      // Yes, add IE style
         } else {                                         // Browser is IE?
            document.styleSheets[0].insertRule(ruleName+' { }', 0); // Yes, add Moz style.
         }                                                // End browser check
      }                                                   // End already exist check.
   }                                                      // End browser ability check.
   return getCSSRule(ruleName);                           // return rule we just created.
} 

function checkColorString (colorString) {
  if (colorString[0] != "#") return colorString;
  else return colorString.substr(1);


}

function Controller () {
  this.colors = {};
  this.currentRole = "hair";
  this.currentSelector = "#hair";
  this.currentDisplayName = "Hair Color";
  this.updatePermaLink = function () {
    document.getElementById("permalink").href = document.URL + "?action=reset";
    for (key in this.colors) {
      document.getElementById("permalink").href += "&" + key + "=" + checkColorString(this.colors[key]);
    }
  }
  this.setColorR = function (role,color) {
    this.colors[role] = color;
    this.updatePermaLink();
    var selector;
    switch (role) {
      case "hair":
      case "lips":
      selector = "#" + role;
      break;
      case "skin":
      selector = "#skin_lows";
      break;
    }
    var rule = getCSSRule(selector);
    rule.style.setProperty('fill',color,"important");
  }
  this.setRole = function (role, selector, displayName) {
    this.currentRole = role;
    this.currentSelector = selector;
    this.currentDisplayName = displayName;
    switch (role) {
      case "background":
      case "cami":
        show_plastic(displayName);
        break;
      case "skin":
      case "hair":
        show_naturals(displayName);
        break;
      default:
        show_glitter(displayName);
    }
}
  this.setColor = function (color) {
    this.colors[this.currentRole] = color;
    var rule = getCSSRule(this.currentSelector);
    rule.style.setProperty('fill',color,"important");
    this.updatePermaLink();
  }
}

var myController = new Controller();