"

From 2011.igem.org

/* Globals */ var sequenceFrame = 1;

window.onload = function() { hideTabs(); document.getElementById("dnaFunctions").style.display = "block";

// Canvas initCanvas();

// Frame check document.getElementById("firstFrameCheck").checked = "true"; document.getElementById("secondFrameCheck").checked = false; document.getElementById("thirdFrameCheck").checked = false; sequenceFrame = 1; };

/* Frame Check */ function setFrame(num) { sequenceFrame = num;

if(num == 1) { document.getElementById("secondFrameCheck").checked = false; document.getElementById("thirdFrameCheck").checked = false; } else if(num == 2) { document.getElementById("firstFrameCheck").checked = false; document.getElementById("thirdFrameCheck").checked = false; } else if(num == 3) { document.getElementById("firstFrameCheck").checked = false; document.getElementById("secondFrameCheck").checked = false; } }

// Tabs function showTab(e, tabName) { hideTabs(); document.getElementById(tabName).style.display = "block"; document.getElementById("frameOptions").style.display = "none";

// Update current tab button document.getElementsByClassName("currentTab")[0].className = ""; e.className = "currentTab";

if(tabName == "aminoToCodon") { document.getElementById("aminoAcidInput").focus(); } else if(tabName == "dnaToProtein") { document.getElementById("sequence").focus(); document.getElementById("frameOptions").style.display = "block"; } else if(tabName == "backTranslate") { document.getElementById("proteinChain").focus(); } }

function hideTabs() { var tabs = document.getElementsByClassName("tabDiv"); for(var i = 0; i < tabs.length; i++) { tabs[i].style.display = "none"; } }

/* DNA Codon table */ var dnaCodonTable = { // TT TTT: "(Phe/F) Phenylalinine", TTC: "(Phe/F) Phenylalinine", TTA: "(Leu/L) Leucine", TTG: "(Leu/L) Leucine", // TC CTT: "(Leu/L) Leucine", CTC: "(Leu/L) Leucine", CTA: "(Leu/L) Leucine", CTG: "(Leu/L) Leucine", // TA ATT: "(IIe/I) Isoleucine", ATC: "(IIe/I) Isoleucine", ATA: "(IIe/I) Isoleucine", ATG: "(Met/M) Methionine/Start", // TG GTT: "(Val/V) Valine", GTC: "(Val/V) Valine", GTA: "(Val/V) Valine", GTG: "(Val/V) Valine", // CT TCT: "(Ser/S) Serine", TCC: "(Ser/S) Serine", TCA: "(Ser/S) Serine", TCG: "(Ser/S) Serine", // CC CCT: "(Pro/P) Proline", CCC: "(Pro/P) Proline", CCA: "(Pro/P) Proline", CCG: "(Pro/P) Proline", // CA ACT: "(Thr/T) Threonine", ACC: "(Thr/T) Threonine", ACA: "(Thr/T) Threonine", ACG: "(Thr/T) Threonine", // CG GCT: "(Ala/A) Alanine", GCC: "(Ala/A) Alanine", GCA: "(Ala/A) Alanine", GCG: "(Ala/A) Alanine", // AT TAT: "(Thr/Y) Tyrosine", TAC: "(Thr/Y) Tyrosine", TAA: "Stop (Ochre)", TAG: "Stop (Amber)", // AC CAT: "(His/H) Histidine", CAC: "(His/H) Histidine", CAA: "(Gln/Q) Glutamine", CAG: "(Gln/Q) Glutamine", // AA AAT: "(Asn/N) Asparagine", AAC: "(Asn/N) Asparagine", AAA: "(Lys/K) Lysine", AAG: "(Lys/K) Lysine", // AG GAT: "(Asp/D) Aspartic acid", GAC: "(Asp/D) Aspartic acid", GAA: "(Glu/E) Glutamic acid", GAG: "(Glu/E) Glutamic acid", // GT TGT: "(Cys/C) Cysteine", TGC: "(Cys/C) Cysteine", TGA: "Stop (Opal)", TGG: "(Trp/W) Tryptophan", // GC CGT: "(Arg/R) Arginine", CGC: "(Arg/R) Arginine", CGA: "(Arg/R) Arginine", CGG: "(Arg/R) Arginine", // GA AGT: "(Ser/S) Serine", AGC: "(Ser/S) Serine", AGA: "(Arg/R) Arginine", AGG: "(Arg/R) Arginine", // GG GGT: "(Gly/G) Glycine", GGC: "(Gly/G) Glycine", GGA: "(Gly/G) Glycine", GGG: "(Gly/G) Glycine" }

var inputs = [document.getElementById("firstInput"), document.getElementById("secondInput"), document.getElementById("thirdInput")];

function moveInput(field, nextField) { var v = field.value; if(!validateInput(v)) { field.value = ""; return; } if(v.length >= field.maxLength) { document.getElementById(nextField).focus(); } }

function validateInput(i) { i = i.toUpperCase(); if(i != "G" && i != "A" && i != "T" && i != "C") { return false; } return true; }

function updateInputCodons() { var v = document.getElementById("thirdInput").value.toUpperCase(); if(!validateInput(v)) { document.getElementById("thirdInput").value = ""; return; } var button = document.createElement("button"); button.className = "codon"; var codon = document.getElementById("firstInput").value + document.getElementById("secondInput").value + document.getElementById("thirdInput").value;

if(codon.length == 3) { button.innerHTML = codon.toUpperCase(); //document.getElementById("inputCodons").appendChild(button); document.getElementById("firstInput").value = ""; document.getElementById("secondInput").value = ""; document.getElementById("thirdInput").value = ""; document.getElementById("firstInput").focus(); updateResults(codon.toUpperCase()); } }

function updateResults(codon) { var paras = document.getElementById("functions").getElementsByTagName("p"); var normal = paras[0].innerHTML || "";

       normal += codon;

var reverse = paras[1].innerHTML || ""; var comp = paras[2].innerHTML || ""; var reverseComp = ""; reverse = normal.split("").reverse().join(""); comp = normal.split("").map(complementDNA).join(""); reverseComp = comp.split("").reverse("").join("");

paras[0].innerHTML = normal; paras[1].innerHTML = reverse; paras[2].innerHTML = comp; paras[3].innerHTML = reverseComp;

// Amino Acids if(activeFunction == "normal") { addToTable({number:1, codon:codon.toUpperCase(), aminoAcid:dnaCodonTable[codon.toUpperCase()]}); } else { mapToAminoAcids("normal"); }

// Canvas //updateCanvas(codon.toUpperCase()); }

function complementDNA(base) { if(base == "G") return "C"; if(base == "A") return "T"; if(base == "T") return "A"; if(base == "C") return "G"; }

var activeFunction = "normal"; function mapToAminoAcids(fName) { document.getElementById(activeFunction).getElementsByTagName("h1")[0].className = ""; document.getElementById(fName).getElementsByTagName("h1")[0].className = "activeFunction"; activeFunction = fName; var sequence = document.getElementById(fName + "-p").innerHTML; var codons = sequence.match(/.{1,3}/g); document.getElementById("tBody").innerHTML = ""; numAminos = 0; var aminos = codons.map(function(codon) { addToTable({number:1, codon:codon.toUpperCase(), aminoAcid:dnaCodonTable[codon.toUpperCase()]}); }); }

var numAminos = 0; function addToTable(o) { var num = ++numAminos; var codon = o.codon; var aminoAcid = o.aminoAcid;

// Check if current row is full var rows = document.getElementById("tBody").getElementsByTagName("tr"); if(rows.length > 0) { // If not first row var currentRow = rows[rows.length - 1]; var numInRow = currentRow.getElementsByTagName("td").length; if(numInRow < 9) { var numberTd = document.createElement("td"); var codonTd = document.createElement("td"); var aminoAcidTd = document.createElement("td");

// Set text numberTd.innerHTML = num; codonTd.innerHTML = codon; aminoAcidTd.innerHTML = aminoAcid;

// Append to current row currentRow.appendChild(numberTd); currentRow.appendChild(codonTd); currentRow.appendChild(aminoAcidTd); } else { // Add new row document.getElementById("tBody").appendChild(createNewRow()); } } else { // Append row to tbody document.getElementById("tBody").appendChild(createNewRow()); }

function createNewRow() { var newRow = document.createElement("tr"); var numberTd = document.createElement("td"); var codonTd = document.createElement("td"); var aminoAcidTd = document.createElement("td");

// Set text numberTd.innerHTML = num; codonTd.innerHTML = codon; aminoAcidTd.innerHTML = aminoAcid;

// Append td elements to row newRow.appendChild(numberTd); newRow.appendChild(codonTd); newRow.appendChild(aminoAcidTd); return newRow; } }

function clearDNA() { //document.getElementById("inputCodons").innerHTML = ""; document.getElementById("normal-p").innerHTML = ""; document.getElementById("comp-p").innerHTML = ""; document.getElementById("reverse-p").innerHTML = ""; document.getElementById("reverseComp-p").innerHTML = ""; document.getElementById("tBody").innerHTML = ""; //mapToAminoAcids("normal"); numAminos = 0;

// Canvas clearCanvas(); }

function showPasteArea() { document.getElementById("pasteArea").style.display = "block"; document.getElementById("pasteArea").focus(); document.getElementById("pasteArea").value = ""; }

function hidePasteArea() { document.getElementById("pasteArea").style.display = "none"; }

var pasted = ""; function pasteDNA() { var sequence = document.getElementById("pasteArea").value;

       sequence = sequence.replace(/\./g, "");
       sequence = sequence.replace("/\s+/g", "");
       if(sequence == pasted) return;

clearDNA(); var dnaWorker = new Worker("dnaCodonWorker.js?action=raw&ctype=text/js"); dnaWorker.addEventListener("message", function(e) { updateResults(e.data); }, false);

dnaWorker.postMessage(sequence);

       pasted = sequence;

}

// DNA Codon Table function showAminoAcid(t) { // Clear currently highlighted cells var currentCells = document.getElementsByClassName("highlightedCell"); var tempCells = []; for(var i = 0; i < currentCells.length; i++) { tempCells.push(currentCells[i]); } for(var i = 0; i < tempCells.length; i++) { tempCells[i].className = tempCells[i].className.replace("highlightedCell", "").replace(/\s+/g, ""); } var inputText = t.toLowerCase();

var highlightCells = document.getElementsByClassName("ac-" + inputText.substr(0, 2)); for(var i = 0; i < highlightCells.length; i++) { highlightCells[i].className += " highlightedCell"; } }