Form

var string = '<form id="release" action="">' +
'<input type="radio" class="type" name="type" value="release" id="rel" checked="checked">Release <input type="radio" class="type" name="type" value="series" id="ser">Series<br/>' +
'<span id="link">Link: <input id="linkText" type="text" name="type" value=""></span> Title: <input id="titleText" type="text" name="type" value=""><br/>' +
'ID: <input id="id" type="text" name="type" value="" style="width:62px;font-family:\'Lucida Console\', monospace" maxlength="8"><br/>' +
'<br/>' +
'<strong>Colors</strong><br/>' +
'Bg1: #<input id="bg1" type="text" name="type" value="" style="width:50px;font-family:\'Lucida Console\', monospace" maxlength="6"> Text1: <select id="text1"><option>black</option><option>white</option></select> <span id="colors1"></span><br/>' +
'Bg2: #<input id="bg2" type="text" name="type" value="" style="width:50px;font-family:\'Lucida Console\', monospace" maxlength="6"> Text2: <select id="text2"><option>black</option><option>white</option></select> <span id="colors2"></span><br/>' +
'<br/>' +
'<strong>Icon text:</strong><br/>' +
'<div id="lines" style="float:left"><input type="checkbox" id="line1Check" name="line1" checked="checked">line1: <input id="line1Text" type="text" name="type" value=""><select id="line1Size"><option>std</option><option>small</option></select><br/>' +
'<div id="line2"><input type="checkbox" id="line2Check" name="line2">line2: <input id="line2Text" type="text" name="type" value=""><select id="line2Size"><option>std</option><option>small</option></select></div></div><div id="iconSide" style="float:left"></div><div style="clear:both"><br/><br/><div id="partOfSeries">';
for(var x in ser)
{
  if(x!="series")string += '<div style="width:50%;float:left"><input type="checkbox" class="seriesMember" name="series" value="' + x  + '"> ' + ser[x].full + '</div>';
}

string += '<div style="clear:both"></div><br/><br/></div><div id="subOfGame"><input type="checkbox" id="scope" name="scope" checked="checked"> Scope list <div style="clear:both"></div><strong>Parent game</strong><select id="parent"><option></option>';
for(var x in rel)
{
  if(rel[x].sub==undefined) string += '<option value="' + x + '">' + rel[x].full + '</option>';
}

string += '</select></div><br/><br/><input id="submitButton" type="button" value="Get code"/></form>';

var form = document.getElementById("formThing");
form.innerHTML = string;
form = document.getElementById("release");
var type = form.getElementsByClassName("type");
for(var i = 0; i < type.length; i++)
{
  type[i].addEventListener("click", function(){
    var form = document.getElementById("formThing").getElementsByTagName("form")[0];
    if(this.checked) form.id = this.getAttribute("value");
  }, false);
}

var classChanges = new Array(
document.getElementById("bg1"),
document.getElementById("bg2"),
document.getElementById("text1"),
document.getElementById("text2"),
document.getElementById("id"))
for (var i = 0; i < classChanges.length; i++)
{
  classChanges[i].addEventListener("change", function()
  {
    var colors = new Array(document.getElementById("colors1"), document.getElementById("colors2"));
    colors[0].innerHTML = document.getElementById("id").value + "a";
    colors[0].style.backgroundColor = "#" + document.getElementById("bg1").value;
    colors[0].style.color = document.getElementById("text1").value;
    colors[1].innerHTML = document.getElementById("id").value + "b";
    colors[1].style.backgroundColor = "#" + document.getElementById("bg2").value;
    colors[1].style.color = document.getElementById("text2").value;
  }, false);
}

var iconElements = new Array(
document.getElementById("id"),
document.getElementById("line1Size"),
document.getElementById("line1Text"),
document.getElementById("line2Check"),
document.getElementById("line2Size"),
document.getElementById("line2Text"),
document.getElementById("linkText"),
document.getElementById("titleText"),
document.getElementById("bg1")
);

for(var i =0; i < iconElements.length; i++)
{
  iconElements[i].addEventListener("change", function(){
    var id = document.getElementById("id");
    var l1S = document.getElementById("line1Size");
    var l1T = document.getElementById("line1Text");
    var l1C = document.getElementById("line2Check");
    var l2S = document.getElementById("line2Size");
    var l2T = document.getElementById("line2Text");
    var tT = document.getElementById("titleText");
    var lT;
    if(document.getElementById("rel").checked){ lT = tT; }
    else{ lT = document.getElementById("linkText"); }

    createCssRules("." + id.value + "a{background:#" + document.getElementById("bg1").value +"}");
    var text ="";
    if(l1S.value=="small") text+= "(small)";
    text += l1T.value;
    if(l1C.checked&&document.getElementById("rel").checked){
      text += "|";
      if(l2S.value=="small") text+= "(small)";
      text += l2T.value;
    }else{
      if(document.getElementById("ser").checked) text += "|(small)¯¯¯";
    }
    document.getElementById("iconSide").innerHTML = newCoverageIcon("formThing", id.value, lT.value, tT.value, text);
  }, false);
}

document.getElementById("submitButton").addEventListener("click", function()
{
  var string ="";
  var ind = "  ";
  var ind2 = "\n      ";
  var bg1 = document.getElementById("bg1").value;
  var bg2 = document.getElementById("bg2").value;
  var text1 = document.getElementById("text1").value;
  var text2 = document.getElementById("text2").value;
  var id = document.getElementById("id").value;
  var link = document.getElementById("linkText").value;
  var full = document.getElementById("titleText").value;

    var l1S = document.getElementById("line1Size");
    var l1T = document.getElementById("line1Text");
    var l1C = document.getElementById("line2Check");
    var l2S = document.getElementById("line2Size");
    var l2T = document.getElementById("line2Text");

  var icon ="";
    if(l1S.value=="small") icon+= "(small)";
    icon += l1T.value;
    if(l1C.checked&&document.getElementById("rel").checked){
      icon += "|";
      if(l2S.value=="small") icon+= "(small)";
      icon += l2T.value;
    }
  

  if(document.getElementById("rel").checked){
    var series ="";
    var seriesList = document.getElementById("formThing").getElementsByClassName("seriesMember");
    for(var i = 0; i < seriesList.length; i++)
    {
      if(seriesList[i].checked){
        if(series!=""){ series += ", "; }
        series += seriesList[i].value;
      }
    }
    string += ind + "rel." + id + ' = new Release("' + full + '",' +
    ind2 + '"#' + bg1  + '", "' + text1 + '", "#' + bg2 + '", "' + text2 + '",' +
    ind2 + '"' + series  + '",' +
    ind2 + '"' + icon  + '"';
    var parent =document.getElementById("parent").value;
    if(!document.getElementById("scope").checked){ string += ', false';}
    else{
      if(parent!="") string += ', "' + parent + '"';
    }
    string +=");";
  } else {
    var title = link + "|" + full;
    if(full==link){ title = link; }
    string += ind + "rel." + id + ' = new Series("' + title + '",' +
    ind2 + '"#' + bg1  + '", "' + text1 + '", "#' + bg2 + '", "' + text2 + '",' +
    ind2 + '"' + icon  + '"';
    string +=");";
  }
  alert(string);
}, false);

 

/*:(*/
/**/#formThing #series #line1Check,
/**/#formThing #series #line2,
/**/#formThing #series #partOfSeries,
/**/#formThing #series #subOfGame {display:none}
/**/#formThing #release #link{display:none}
/**/#formThing #colors1, #formThing #colors2{border:2px outset #999999; padding:2px 5px;margin-left:4px}