"

From 2011.igem.org

var sequenceFrame=1;window.onload=function(){hideTabs();document.getElementById("dnaFunctions").style.display="block";initCanvas();document.getElementById("firstFrameCheck").checked="true";document.getElementById("secondFrameCheck").checked=false;document.getElementById("thirdFrameCheck").checked=false;sequenceFrame=1;};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;}} function showTab(e,tabName){hideTabs();document.getElementById(tabName).style.display="block";document.getElementById("frameOptions").style.display="none";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";}} var dnaCodonTable={TTT:"(Phe/F) Phenylalinine",TTC:"(Phe/F) Phenylalinine",TTA:"(Leu/L) Leucine",TTG:"(Leu/L) Leucine",CTT:"(Leu/L) Leucine",CTC:"(Leu/L) Leucine",CTA:"(Leu/L) Leucine",CTG:"(Leu/L) Leucine",ATT:"(IIe/I) Isoleucine",ATC:"(IIe/I) Isoleucine",ATA:"(IIe/I) Isoleucine",ATG:"(Met/M) Methionine/Start",GTT:"(Val/V) Valine",GTC:"(Val/V) Valine",GTA:"(Val/V) Valine",GTG:"(Val/V) Valine",TCT:"(Ser/S) Serine",TCC:"(Ser/S) Serine",TCA:"(Ser/S) Serine",TCG:"(Ser/S) Serine",CCT:"(Pro/P) Proline",CCC:"(Pro/P) Proline",CCA:"(Pro/P) Proline",CCG:"(Pro/P) Proline",ACT:"(Thr/T) Threonine",ACC:"(Thr/T) Threonine",ACA:"(Thr/T) Threonine",ACG:"(Thr/T) Threonine",GCT:"(Ala/A) Alanine",GCC:"(Ala/A) Alanine",GCA:"(Ala/A) Alanine",GCG:"(Ala/A) Alanine",TAT:"(Thr/Y) Tyrosine",TAC:"(Thr/Y) Tyrosine",TAA:"Stop (Ochre)",TAG:"Stop (Amber)",CAT:"(His/H) Histidine",CAC:"(His/H) Histidine",CAA:"(Gln/Q) Glutamine",CAG:"(Gln/Q) Glutamine",AAT:"(Asn/N) Asparagine",AAC:"(Asn/N) Asparagine",AAA:"(Lys/K) Lysine",AAG:"(Lys/K) Lysine",GAT:"(Asp/D) Aspartic acid",GAC:"(Asp/D) Aspartic acid",GAA:"(Glu/E) Glutamic acid",GAG:"(Glu/E) Glutamic acid",TGT:"(Cys/C) Cysteine",TGC:"(Cys/C) Cysteine",TGA:"Stop (Opal)",TGG:"(Trp/W) Tryptophan",CGT:"(Arg/R) Arginine",CGC:"(Arg/R) Arginine",CGA:"(Arg/R) Arginine",CGG:"(Arg/R) Arginine",AGT:"(Ser/S) Serine",AGC:"(Ser/S) Serine",AGA:"(Arg/R) Arginine",AGG:"(Arg/R) Arginine",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("firstInput").value="";document.getElementById("secondInput").value="";document.getElementById("thirdInput").value="";document.getElementById("firstInput").focus();updateResults(codon.toUpperCase());}} function updateResults(codon){if(codon.length != 3) return;var paras=document.getElementById("functions").getElementsByTagName("p");var normal=(paras[0].innerHTML||"")+codon;var reverse=paras[1].innerHTML||"";var comp=paras[2].innerHTML||"";var reverseComp="";reverse=codon.split("").reverse().join("")+reverse;comp=normal.split("").map(complementDNA).join("");reverseComp=reverse.split("").map(complementDNA).join("");paras[0].innerHTML=normal;paras[1].innerHTML=reverse;paras[2].innerHTML=comp;paras[3].innerHTML=reverseComp;if(activeFunction=="normal"){addToTable({number:1,codon:codon.toUpperCase(),aminoAcid:dnaCodonTable[codon.toUpperCase()]});} else{mapToAminoAcids("normal");} 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;var rows=document.getElementById("tBody").getElementsByTagName("tr");if(rows.length>0){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");numberTd.innerHTML=num;codonTd.innerHTML=codon;aminoAcidTd.innerHTML=aminoAcid;currentRow.appendChild(numberTd);currentRow.appendChild(codonTd);currentRow.appendChild(aminoAcidTd);} else{document.getElementById("tBody").appendChild(createNewRow());}} else{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");numberTd.innerHTML=num;codonTd.innerHTML=codon;aminoAcidTd.innerHTML=aminoAcid;newRow.appendChild(numberTd);newRow.appendChild(codonTd);newRow.appendChild(aminoAcidTd);return newRow;}} function clearDNA(){document.getElementById("normal-p").innerHTML="";document.getElementById("comp-p").innerHTML="";document.getElementById("reverse-p").innerHTML="";document.getElementById("reverseComp-p").innerHTML="";document.getElementById("tBody").innerHTML="";numAminos=0;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";} function pasteDNA(){var sequence=document.getElementById("pasteArea").value;clearDNA();var dnaWorker=new Worker("dnaCodonWorker.js?action=raw&ctype=text/js");dnaWorker.addEventListener("message",function(e){updateResults(e.data);},false);dnaWorker.postMessage(sequence);} function showAminoAcid(t){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";}} var backTranslateTable={A:"GCG",C:"UGC",D:"GAU",E:"GAA",F:"UUU",G:"GGC",H:"CAU",I:"AUU",K:"AAA",L:"CUG",M:"AUG",N:"AAC",P:"CCG",Q:"CAG",R:"CGC",S:"AGC",T:"ACC",V:"GUG",W:"UGG",Y:"UAU"};function backTranslate(chain){var aminoAcids=chain.split("");var sequence="";for(var i=0;i<aminoAcids.length;i++){sequence+=backTranslateTable[aminoAcids[i].toUpperCase()]||"(invalid)";} document.getElementById("backTranslateResults").innerHTML=sequence;} function initCanvas(){var canvas=document.getElementById("dnaVis");var context=canvas.getContext("2d");for(var x=15.5;x<canvas.width;x+=5){context.moveTo(x,0);context.lineTo(x,150);} for(var y=0.5;y<150;y+=37){context.moveTo(15.5,y);context.lineTo(canvas.width,y);} context.strokeStyle="#eee";context.stroke();context.font="12px 'Droid Sans Mono'";context.fillText("A",1,23);context.fillText("C",1,60);context.fillText("G",1,100);context.fillText("T",1,135);} var numBases=0;function updateCanvas(codon){var canvas=document.getElementById("dnaVis");var context=canvas.getContext("2d");for(var i=0;i<codon.length;i++){var x=numBases*5+15.5;var y=0;if(codon[i]=="C")y+=37;else if(codon[i]=="G")y+=74;else if(codon[i]=="T")y+=111;if(x+5>canvas.width){canvas.width+=800;initCanvas();} context.fillRect(x,y,5,37);numBases++;}} function clearCanvas(){var canvas=document.getElementById("dnaVis");var context=canvas.getContext("2d");context.clearRect(0,0,canvas.width,canvas.height);var w=canvas.width;canvas.width=1;canvas.width=w;} var dnaCodonTable2={TTT:"F",TTC:"F",TTA:"L",TTG:"L",CTT:"L",CTC:"L",CTA:"L",CTG:"L",ATT:"I",ATC:"I",ATA:"I",ATG:"M",GTT:"V",GTC:"V",GTA:"V",GTG:"V",TCT:"S",TCC:"S",TCA:"S",TCG:"S",CCT:"P",CCC:"P",CCA:"P",CCG:"P",ACT:"T",ACC:"T",ACA:"T",ACG:"T",GCT:"A",GCC:"A",GCA:"A",GCG:"A",TAT:"Y",TAC:"Y",TAA:"Stop (Ochre)",TAG:"Stop (Amber)",CAT:"H",CAC:"H",CAA:"Q",CAG:"Q",AAT:"N",AAC:"N",AAA:"K",AAG:"K",GAT:"D",GAC:"D",GAA:"E",GAG:"E",TGT:"C",TGC:"C",TGA:"Stop (Opal)",TGG:"W",CGT:"R",CGC:"R",CGA:"R",CGG:"R",AGT:"S",AGC:"S",AGA:"R",AGG:"R",GGT:"G",GGC:"G",GGA:"G",GGG:"G"};function getAminoChain(sequence){var codons=sequence.match(/.{1,3}/g);var aminoChain=codons.reduce(function(chain,codon){return chain+dnaCodonTable2[codon];},"");return aminoChain;} function lookup(){var sequence=document.getElementById("sequence").value.toUpperCase().substr(sequenceFrame-1);var codons=sequence.match(/.{1,3}/g);var geneStarted=false;sequence=codons.reduce(function(previousValue,currentValue){if(currentValue=="ATG"&&!geneStarted){currentValue="(start)";geneStarted=true;} else if(currentValue=="TAA"||currentValue=="TAG"||currentValue=="TGA"){currentValue="(end)";geneStarted=false;} return previousValue+=currentValue;},"");var genes=sequence.match(/\(start\)[ACTG]+\(end\)/g);genes=genes.map(function(gene){return gene.replace(/\(start\)([GATC]+)\(end\)/,"ATG$1");});var chains=[];for(var i=0;i<genes.length;i++){chains.push(getAminoChain(genes[i]));} document.getElementById("dnaToProteinResults").innerHTML="";for(var i=0;i<chains.length;i++){var p=document.createElement("p");p.innerHTML=i+1+": "+chains[i];document.getElementById("dnaToProteinResults").appendChild(p);}}