ikrpg.github.io/static/javascripts/heroic.js

function addListener(elem, event, f) {
  if (elem.addEventListener) elem.addEventListener(event, f, false);
  else elem.attachEvent("on"+event, f);
}

function Heroic(Hero) {
  var self = this;
  self.search = "";
  self.url = function() {
    document.location.search = self.search;
  };
  self.redirect = function(link) {
    link.href = self.url();
    link.click();
  };
  self.switchWeapons = function() {
    var r1m1 = Hero.r1m1;
    var r2m1 = Hero.r2m1;
    var r1m2 = Hero.r1m2;
    var r2 = Hero.r2;
    var m2 = Hero.m2;
    if (r1m1 == true) { Hero.r1m1 = false; Hero.r2m1 = true; }
    else if (r2m1 == true) { Hero.r2m1 = false; Hero.r1m2 = true; }
    else if (r1m2 == true) { Hero.r1m2 = false; Hero.r2 = true; }
    else if (r2 == true) { Hero.r2 = false; Hero.m2 = true; }
    else if (m2 == true) { Hero.m2 = false; Hero.r1m1 = true; }
    else { Hero.r1m1 = true; }
    document.location.search = encodeURIComponent(JSON.stringify(Hero));
  };
  self.bind = function() {
    var query = window.location.search;
    var Query = (query == "") ? {} : JSON.parse(unescape(query.substring(1)));

    for (attr in Query) Hero[attr] = Query[attr];

    var isArray = function(someVar) { return Object.prototype.toString.call(someVar) === "[object Array]"; };
    var isBoolean = function(someVar) { return Object.prototype.toString.call(someVar) === "[object Boolean]"; };
    var isDefined = function(someVar) { return typeof someVar !== "undefined" && someVar != null; };
    var isString = function(someVar) { return typeof someVar === "string"; };
    var isNumber = function(someVar) { return typeof someVar === "number"; };
    var isObject = function(someVar) { return typeof someVar === "object";  };

    var observe;
    if (window.attachEvent) observe = function (element, event, handler) { element.attachEvent('on'+event, handler); };
    else observe = function (element, event, handler) { element.addEventListener(event, handler, false); };

    var resizeTextarea = function(textarea) {
        return function() {
            textarea.style.height = "auto";
            textarea.style.height = (textarea.scrollHeight)+"px";
        };
    };
    var delayedTextareaResize = function(textarea) {
        return function() { window.setTimeout(resizeTextarea(textarea), 0); };
    };
    var autoresizableTextarea = function(textarea) {
        observe(textarea, "change", resizeTextarea(textarea));
        observe(textarea, "cut", delayedTextareaResize(textarea));
        observe(textarea, "paste", delayedTextareaResize(textarea));
        observe(textarea, "drop", delayedTextareaResize(textarea));
        observe(textarea, "keydown", delayedTextareaResize(textarea));
    };

    var redirect = function() {
      self.search = encodeURIComponent(JSON.stringify(Hero));
    };

    var initialize = function() {
        var textareas = document.querySelectorAll("textarea");
        var fillOut = function(attribute, value) {
            if (isString(value) || isNumber(value)) {
                var element = document.querySelector("input#"+attribute);
                if (element != null && isDefined(element.value)) {
                    element.value = value;
                    if (element.nodeName == "TEXTAREA") resizeTextarea(element)();
                }
            } else if (isObject(value)) {
                var parent = document.querySelector("#"+attribute);
                for (key in value) {
                    var child = parent.querySelector("input."+key+", textarea."+key);
                    if (child != null && isDefined(child.value)) {
                        child.value = value[key];
                        if (child.nodeName == "TEXTAREA") resizeTextarea(child)();
                    }
                }
            }
        };
        var saveOnChange = function(attribute, value) {
            var updateSearchString;
            if (isString(value) || isNumber(value)) {
                var input = document.querySelector("input#"+attribute);
                updateSearchString = function() {
                    Hero[attribute] = input.value;
                    Hero["focus"] = attribute;
                    redirect();
                };
                if (isDefined(input)) {
                //input.addEventListener("change", updateSearchString, false);
                  addListener(input, "change", updateSearchString);
                }
            } else if (isObject(value)) {
                var parent = document.querySelector("#"+attribute);
                updateSearchString = function(key, input) {
                    return function() {
                        Hero[attribute][key] = input.value;
                        Hero["focus"] = attribute;
                        redirect();
                    };
                };
                for (key in value) {
                    var child = parent.querySelector("input."+key+", textarea."+key);
                    if (isDefined(child)) { observe(child, "change", updateSearchString(key, child)); }
                }
            }
        };
        var showWeapons = function(hero) {
            var setDisplay = function(element, bool) { if (isDefined(element.style)) element.style.display = (bool) ? "block" : "none"; };
            var showElement = function(element) { setDisplay(element, true); };
            var hideElement = function(element) { setDisplay(element, false); };
            var showElements = function(array) { if (isDefined(array.forEach)) array.forEach(showElement); };
            var hideElements = function(array) { if (isDefined(array.forEach)) array.forEach(hideElement); };
            var r1m1 = document.querySelector("div#r1m1");
            var r2m1 = document.querySelector("div#r2m1");
            var r1m2 = document.querySelector("div#r1m2");
            var r2 = document.querySelector("div#r2");
            var m2 = document.querySelector("div#m2");
            var rat1 = document.querySelector("div#rat1");
            var rat2 = document.querySelector("div#rat2");
            var mat1 = document.querySelector("div#mat1");
            var mat2 = document.querySelector("div#mat2");
            var mat3 = document.querySelector("div#mat3");
            if (isBoolean(hero.r1m1) && hero.r1m1 == true) {
                showElements([ r1m1, rat1, mat2 ]);
                hideElements([ r2m1, r1m2, r2, m2, mat1, rat2, mat3 ]);
            } else if (isBoolean(hero.r2m1) && hero.r2m1 == true) {
                showElements([ r2m1, rat1, rat2, mat3 ]);
                hideElements([ r1m1, r1m2, r2, m2, mat1, mat2 ]);
            } else if (isBoolean(hero.r1m2) && hero.r1m2 == true) {
                showElements([ r1m2, rat1, mat2, mat3 ]);
                hideElements([ r1m1, r2m1, r2, m2, mat1, rat2 ]);
            } else if (isBoolean(hero.r2) && hero.r2 == true) {
                showElements([ r2, rat1, rat2 ]);
                hideElements([ r1m1, r2m1, r1m2, m2, mat1, mat2, mat3 ]);
            } else if (isBoolean(hero.m2) && hero.m2 == true) {
                showElements([ m2, mat1, mat2 ]);
                hideElements([ r1m1, r2m1, r1m2, r2, rat1, rat2, mat3 ]);
            }
        };
        var focusLastInput = function(hero) {
            if (isDefined(hero["focus"])) {
                var input = document.querySelector("input#"+hero["focus"]);
                if (input == null) input = document.querySelector("#"+hero["focus"]+" input");
                if (input != null) { input.focus(); input.scrollIntoView(); }
            }
        };
        var setPortrait = function(hero) {
          var portrait = hero["portrait"]
            , portraitDiv = document.querySelector("#portrait");
          if (portrait && portraitDiv) {
            var url = portrait["url"]
              , x = portrait["x"]
              , y = portrait["y"]
              , size = portrait["size"];
            if (url != null && x != null && y != null && size != null) {
              var sheet = document.querySelector("div.sheet");
              if (sheet) {
                sheet.style["backgroundImage"] = "url("+url+")";
                sheet.style["backgroundPosition"] = y+"px "+x+"px";
                sheet.style["backgroundSize"] = size == "auto" ? "auto" : size+"px";
              }
            }
          }
        };
        
        for (var i = 0; i < textareas.length; i++) { autoresizableTextarea(textareas[i]); }
        showWeapons(Hero);
        for (attribute in Hero) { fillOut(attribute, Hero[attribute]); }
        for (attribute in Hero) { saveOnChange(attribute, Hero[attribute]); }
        setPortrait(Hero);
        focusLastInput(Hero);
        
      //var names = document.querySelectorAll("section > input.name");
      //for (name in names) { names[name].value = Hero["name"]; }
      
        var displayPortrait = function(portrait, value, pointerEvent) {
          return function(event) {
            event.preventDefault();
            event.stopPropagation();
            var inputs = portrait.querySelectorAll("input");
            
            for (var index = 0; index < inputs.length; index++) {
              var input = inputs.item(index);
              input.style["display"] = value;              
              portrait.style["pointerEvents"] = pointerEvent;
            }
          };
        };
        var portrait = document.querySelector("#portrait")
          , button = portrait.querySelector("input[type='button']");
        
        addListener(portrait, "click", displayPortrait(portrait, "block", "none"));
        addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
      
        redirect();
    };

    document.addEventListener("DOMContentLoaded", initialize, false);
  };
}