
<!-- saved from url=(0041)https://bioinfogp.cnb.csic.es/tools/venny/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Venny 2.1.0</title>
		
		<meta name="Author" content="Juan Carlos Oliveros Collazos">
		<meta name="keywords" content="Venn,venny,html5">
		<meta name="Description" content="Venn's diagrams drawing tool for comparing up to four lists of elements.">
		<script>
 
		var ti=0;
		
		var CSIZE=1024;
		var COLORS="yes";
		var LSIZE=3;
		var TRANSP="no";
		var GRAY="no";
		var PERC="yes";

		var exampleName=new Array();
		exampleName[0]="Actors";
		exampleName[1]="Singers";
		exampleName[2]="List 3";
		exampleName[3]="List 4";

		var exampleList=new Array();
		exampleList[0]=new Array();
		exampleList[0][0]="Marilyn Monroe";
		exampleList[0][1]="Arnold Schwarzenegger";
		exampleList[0][2]="Jack Nicholson";
		exampleList[0][3]="Barbra Streisand";
		exampleList[0][4]="Robert de Niro";
		exampleList[0][5]="Dean Martin";
		exampleList[0][6]="Harrison Ford";
		exampleList[1]=new Array();
		exampleList[1][0]="Freddy Mercury";
		exampleList[1][1]="Barbra Streisand";
		exampleList[1][2]="Dean Martin";
		exampleList[1][3]="Ricky Martin";
		exampleList[1][4]="Celine Dion";
		exampleList[1][5]="Marilyn Monroe";
		exampleList[2]=new Array();
		exampleList[2][0]="";
		exampleList[3]=new Array();
		exampleList[3][0]="";

		var currentName=new Array();
		currentName[0]="";
		currentName[1]="";
		currentName[2]="";
		currentName[3]="";
		var elements=new Array();
		elements[0]=0;
		elements[1]=0;
		elements[2]=0;
		elements[3]=0;
		var actualList=new Array();
		actualList[0]=new Array();
		actualList[1]=new Array();
		actualList[2]=new Array();
		actualList[3]=new Array();

		var focused;

		var classified=new Array();

		var clabel=new Array();
		clabel[0]="rgb(0,0,255)";
		clabel[1]="rgb(120,122,0)";
		clabel[2]="rgb(0,128,0)";
		clabel[3]="rgb(255,0,0)";

		var xlabel=new Array();
		xlabel[0]=new Array();
		xlabel[1]=new Array();
		xlabel[2]=new Array();
		xlabel[3]=new Array();

		var ylabel=new Array();
		ylabel[0]=new Array();
		ylabel[1]=new Array();
		ylabel[2]=new Array();
		ylabel[3]=new Array();

		var xpos=new Array();
		xpos[0]=new Array();
		xpos[1]=new Array();
		xpos[2]=new Array();
		xpos[3]=new Array();

		var ypos=new Array();
		ypos[0]=new Array();
		ypos[1]=new Array();
		ypos[2]=new Array();
		ypos[3]=new Array();

		xlabel[3][0]=200-130;       ylabel[3][0]=200+120;
		xlabel[3][1]=200-80;        ylabel[3][1]=200-160;
		xlabel[3][2]=200+80;        ylabel[3][2]=200-160;
		xlabel[3][3]=200+130;       ylabel[3][3]=200+120;

		xpos[3]["C1000"]=200-130;   ypos[3]["C1000"]=200-20;
		xpos[3]["C0100"]=200-60;    ypos[3]["C0100"]=200-105;
		xpos[3]["C0010"]=200+60;    ypos[3]["C0010"]=200-105;
		xpos[3]["C0001"]=200+130;   ypos[3]["C0001"]=200-20;
		xpos[3]["C1100"]=200-90;    ypos[3]["C1100"]=200-60;
		xpos[3]["C1010"]=200-75;    ypos[3]["C1010"]=200+45;
		xpos[3]["C1001"]=200;       ypos[3]["C1001"]=200+100;
		xpos[3]["C0110"]=200;       ypos[3]["C0110"]=137;
		xpos[3]["C0101"]=200+75;    ypos[3]["C0101"]=200+45;
		xpos[3]["C0011"]=200+90;    ypos[3]["C0011"]=200-60;
		xpos[3]["C0111"]=200+49;    ypos[3]["C0111"]=200-10;
		xpos[3]["C1011"]=200-30;    ypos[3]["C1011"]=200+71;
		xpos[3]["C1101"]=200+30;    ypos[3]["C1101"]=200+71;
		xpos[3]["C1110"]=200-49;    ypos[3]["C1110"]=200-10;
		xpos[3]["C1111"]=200;       ypos[3]["C1111"]=235;

		xlabel[2][0]=200-60-20;     ylabel[2][0]=200-163-10;
		xlabel[2][1]=200+60+20;     ylabel[2][1]=200-163-10;
		xlabel[2][2]=200;           ylabel[2][2]=200+163+10;
		xlabel[2][3]=315;           ylabel[2][3]=-1850;

		xpos[2]["C1000"]=200-60-20; ypos[2]["C1000"]=200-52-20;
		xpos[2]["C0100"]=200+60+20; ypos[2]["C0100"]=200-52-20;
		xpos[2]["C1100"]=200;       ypos[2]["C1100"]=200-52-20;
		xpos[2]["C0010"]=200;       ypos[2]["C0010"]=200+52+20;
		xpos[2]["C1010"]=200-50;    ypos[2]["C1010"]=200+10;
		xpos[2]["C0110"]=200+50;    ypos[2]["C0110"]=200+10;
		xpos[2]["C1110"]=200;       ypos[2]["C1110"]=200-18;
		xpos[2]["C0001"]=310;       ypos[2]["C0001"]=-1900;
		xpos[2]["C1001"]=180;       ypos[2]["C1001"]=-2950;
		xpos[2]["C0101"]=250;       ypos[2]["C0101"]=-2450;
		xpos[2]["C0011"]=260;       ypos[2]["C0011"]=-1370;
		xpos[2]["C0111"]=220;       ypos[2]["C0111"]=-1830;
		xpos[2]["C1011"]=212;       ypos[2]["C1011"]=-2670;
		xpos[2]["C1101"]=161;       ypos[2]["C1101"]=-2670;
		xpos[2]["C1111"]=180;       ypos[2]["C1111"]=-2450;

		xlabel[1][0]=200-60-20;     ylabel[1][0]=200-117;
		xlabel[1][1]=200+60+20;     ylabel[1][1]=200-117;
		xlabel[1][2]=160;           ylabel[1][2]=-3500;
		xlabel[1][3]=315;           ylabel[1][3]=-1850;

		xpos[1]["C1000"]=200-60-20; ypos[1]["C1000"]=200;
		xpos[1]["C0100"]=200+60+20; ypos[1]["C0100"]=200;
		xpos[1]["C1100"]=200;       ypos[1]["C1100"]=200;
		xpos[1]["C0010"]=185;       ypos[1]["C0010"]=-2700;
		xpos[1]["C1010"]=140;       ypos[1]["C1010"]=-2000;
		xpos[1]["C0110"]=230;       ypos[1]["C0110"]=-2000;
		xpos[1]["C1110"]=185;       ypos[1]["C1110"]=-1750;
		xpos[1]["C0001"]=310;       ypos[1]["C0001"]=-1190;
		xpos[1]["C1001"]=180;       ypos[1]["C1001"]=-2950;
		xpos[1]["C0101"]=250;       ypos[1]["C0101"]=-2450;
		xpos[1]["C0011"]=260;       ypos[1]["C0011"]=-1370;
		xpos[1]["C0111"]=220;       ypos[1]["C0111"]=-1830;
		xpos[1]["C1011"]=212;       ypos[1]["C1011"]=-2670;
		xpos[1]["C1101"]=161;       ypos[1]["C1101"]=-2670;
		xpos[1]["C1111"]=180;       ypos[1]["C1111"]=-2450;

		xlabel[0][0]=200;           ylabel[0][0]=200-117;
		xlabel[0][1]=215;           ylabel[0][1]=-1880;
		xlabel[0][2]=160;           ylabel[0][2]=-3500;
		xlabel[0][3]=315;           ylabel[0][3]=-1850;

		xpos[0]["C1000"]=200;      ypos[0]["C1000"]=200;
		xpos[0]["C0100"]=260;      ypos[0]["C0100"]=-1850;
		xpos[0]["C1100"]=185;      ypos[0]["C1100"]=-1850;
		xpos[0]["C0010"]=185;      ypos[0]["C0010"]=-2700;
		xpos[0]["C1010"]=140;      ypos[0]["C1010"]=-2000;
		xpos[0]["C0110"]=230;      ypos[0]["C0110"]=-2000;
		xpos[0]["C1110"]=185;      ypos[0]["C1110"]=-1750;
		xpos[0]["C0001"]=310;      ypos[0]["C0001"]=-1900;
		xpos[0]["C1001"]=180;      ypos[0]["C1001"]=-2950;
		xpos[0]["C0101"]=250;      ypos[0]["C0101"]=-2450;
		xpos[0]["C0011"]=260;      ypos[0]["C0011"]=-1370;
		xpos[0]["C0111"]=220;      ypos[0]["C0111"]=-1830;
		xpos[0]["C1011"]=212;      ypos[0]["C1011"]=-2670;
		xpos[0]["C1101"]=161;      ypos[0]["C1101"]=-2670;
		xpos[0]["C1111"]=180;      ypos[0]["C1111"]=-2450;

		var groups=1;

		function $(o) { return (document.getElementById(o)); }

		function checkBrowser() {
			// Thanks to my collegue David San León to helping me checking browser compatibility:
			try {
				$("mainCanvas").getContext("2d");
				$("mainCanvas").toDataURL();
			}
			catch(err) {
				if (confirm ("This Browser is not compatible with this version of Venny. Open Venny 1.0 instead? (recommended)")) {
					window.document.location="https://bioinfogp.cnb.csic.es/tools/venny_old/index.html";
				}
			}
		}

		function setExample() {
			$("name1").value=exampleName[0];
			$("name2").value=exampleName[1];
			$("name3").value=exampleName[2];
			$("name4").value=exampleName[3];
			$('names').value="";
			$('area1').value="";
			for (t=0;t<exampleList[0].length;t++) {
				$('area1').value=$('area1').value+exampleList[0][t]+"\n";
			}
			$('area2').value="";
			for (t=0;t<exampleList[1].length;t++) {
				$('area2').value=$('area2').value+exampleList[1][t]+"\n";
			}
			$('area3').value="";
			for (t=0;t<exampleList[2].length;t++) {
				$('area3').value=$('area3').value+exampleList[2][t]+"\n";
			}
			$('area4').value="";
			for (t=0;t<exampleList[3].length;t++) {
				$('area4').value=$('area4').value+exampleList[3][t]+"\n";
			}
			compareLists();
			myBlur();
		}

		function myBlur() {
			var change=0;
			if (currentName[0]!=$("name1").value) { currentName[0]=$("name1").value; change=1; }
			if (currentName[1]!=$("name2").value) { currentName[1]=$("name2").value; change=1; }
			if (currentName[2]!=$("name3").value) { currentName[2]=$("name3").value; change=1; }
			if (currentName[3]!=$("name4").value) { currentName[3]=$("name4").value; change=1; }
			if (change==1) { compareLists(); }
			if (focused.id=="area1") { $("area1").blur(); focused.focus(); }
			if (focused.id=="area2") { $("area2").blur(); focused.focus(); }
			if (focused.id=="area3") { $("area3").blur(); focused.focus(); }
			if (focused.id=="area4") { $("area4").blur(); focused.focus(); }
		}

		function placeObjects(w,h) {
			var factor=640/400;   // NEW
			for (var k in xpos[groups-1]) {
				$("result"+k).style.left=factor*xpos[groups-1][k]-parseInt($("result"+k).offsetWidth)/2;
				$("result"+k).style.top =factor*ypos[groups-1][k]-parseInt($("result"+k).offsetHeight)/2;
			}
		}

		function getGroups() {
			var factor=640/400;   // NEW
			if      (elements[3]>0) { return (4); }
			else if (elements[2]>0) { return (3); }
			else if (elements[1]>0) { return (2); }
			else                    { return (1); }
		}


		function updateElements(l) {
			actualList[l-1]=new Array();
			elements[l-1]=0;
			var list=$("area"+l).value.split("\n");
			for (t=0;t<list.length;t++) {
				list[t]=list[t].replace(/^\s+/,"");
				list[t]=list[t].replace(/\s+$/,"");
				if (list[t].length>0) {
					if (actualList[l-1][list[t]]) { actualList[l-1][list[t]]++; }
					else                          { actualList[l-1][list[t]]=1; elements[l-1]++; }
					classified[list[t]]="C";
				}
			}
			if (elements[l-1]==1) { var textoFinal=" element"; }
			else                  { var textoFinal=" elements"; }
			textoFinal="";
			$("elements"+l).firstChild.nodeValue=elements[l-1]+textoFinal;
//			placeObjects(CSIZE,CSIZE);
		}

		function setSize(n) {
			n=n/Math.floor(CSIZE/640);
			for (var k in xpos[0]) { $("result"+k).style.fontSize=n+"pt"; }
		}

		function setWidth(n) {
			LSIZE=n;
		}

		function setFamily(f) {
			for (var k in xpos[0]) { $("result"+k).style.fontFamily=f; }
		}

		var TOTAL_UNIQUES=0;

		function main() {
			$("names").value="";
			for (var k in xpos[0]) { $("result"+k).firstChild.nodeValue=0; TOTAL_UNIQUES=0; }
			setStyle($("selectStyle").value);
			setFamily($("selectFamily").value);
			drawAll("mainCanvas");
 		}

		function compareLists() {
			main();
			classified=new Array();
			for (m=0;m<4;m++) { updateElements(m+1); }
			for (t=0;t<4;t++) {
				for (tt in actualList[t]) {
					if (classified[tt]) { classified[tt]=classified[tt]+"1"; }
				}
				for (cl in classified) {
					if (classified[cl].length<t+2) { classified[cl]=classified[cl]+"0"; }
				}
			}
			for (cl in classified) { $("result"+classified[cl]).firstChild.nodeValue++; TOTAL_UNIQUES++; }
			groups=getGroups();
			drawAll("mainCanvas");
		}

		function elementsToUpperCase() {
			$("area1").value=$("area1").value.toUpperCase();
			$("area2").value=$("area2").value.toUpperCase();
			$("area3").value=$("area3").value.toUpperCase();
			$("area4").value=$("area4").value.toUpperCase();
			updateElements(1);
			updateElements(2);
			updateElements(3);
			updateElements(4);
			compareLists();
		}
		function elementsToLowerCase() {
			$("area1").value=$("area1").value.toLowerCase();
			$("area2").value=$("area2").value.toLowerCase();
			$("area3").value=$("area3").value.toLowerCase();
			$("area4").value=$("area4").value.toLowerCase();
			updateElements(1);
			updateElements(2);
			updateElements(3);
			updateElements(4);
			compareLists();
		}

		function setLabels(obj,w,h) {
			for (var i=0;i<4;i++) { writeLabel(obj,i,w,h); }
			for (var k in xpos[0]) { if (xpos[groups-1][k]>0 && ypos[groups-1][k]>0) { writeValue(obj,k,w,h); } }
		}

		function writeValue(obj,vv,w,h) {
			var factor=w/400;
			v="result"+vv;
			var canvas=$(obj);
			var ctx=canvas.getContext("2d");
			$(v).style.color="rgba(255,0,0,0)";
			var x=Math.round(xpos[groups-1][vv]*factor);
			var y=Math.round(ypos[groups-1][vv]*factor);
			var count=parseInt($(v).firstChild.nodeValue);
			var actualSize=Math.floor(parseInt($("resultC1100").style.fontSize)*CSIZE/640);
			ctx.font="bold "+actualSize+"pt "+$("resultC1100").style.fontFamily;
			ctx.textBaseline="middle";
			ctx.textAlign="center";

			for (var t=1;t<vv.length;t++) {
				percentage=Math.round(count/TOTAL_UNIQUES*1000)/10;
			}

			if (GRAY=="yes") {
				var gray=componentToHex(255-Math.round(percentage/100*255));
				var color="#"+gray+gray+gray;
				floodFill(x,y,ctx,color,0);
				if (gray<128) {
					ctx.fillStyle="#FFFFFF";
				}
				else {
					ctx.fillStyle="#000000";
				}
			}
			else {
					ctx.fillStyle="#000000";
			}

			if (PERC=="yes") {
				var ysep=Math.round(actualSize/2);
				ctx.fillText(count,x,y-ysep-1);
				perSize=actualSize-8;
				ctx.font="bold "+perSize+"pt "+$("resultC1100").style.fontFamily;
				ctx.fillText("("+percentage+"%)",x,y+ysep+1);
				$(v).innerHTML=count+"<br><small><small>"+"("+percentage+"%)</small></small>";
			}
			else {
				var ysep=0;
				ctx.fillText(count,x,y-ysep-1);
				$(v).innerHTML=count;
			}
		}

		function showNames(k) {
			var resultText="";
			var resultText1="";
			var results=0;
			var s="";
			for (cl in classified) {
				if (classified[cl]==k) {  resultText=resultText+cl+"|\n";results++;}
			}
			if (results==1) { s=""; }
			if (k=="C1000") { resultText1=results+" 元素"+s+" 包含在\""+currentName[0]+"\":\n"; }
			else if (k=="C0100") { resultText1=results+" 元素"+s+" 包含在 \""+currentName[1]+"\":\n"; }
			else if (k=="C0010") { resultText1=results+" 元素"+s+" 包含在 \""+currentName[2]+"\":\n"; }
			else if (k=="C0001") { resultText1=results+" 元素"+s+" 包含在 \""+currentName[3]+"\":\n"; }

			else if (k=="C1100") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\" 和 \""+currentName[1]+"\":\n"; }
			else if (k=="C0110") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[1]+"\" 和 \""+currentName[2]+"\":\n"; }
			else if (k=="C0011") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[2]+"\" 和 \""+currentName[3]+"\":\n"; }
			else if (k=="C1010") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\" 和 \""+currentName[2]+"\":\n"; }
			else if (k=="C0101") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[1]+"\" 和 \""+currentName[3]+"\":\n"; }
			else if (k=="C1001") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\" 和 \""+currentName[3]+"\":\n"; }

			else if (k=="C0111") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[1]+"\", \""+currentName[2]+"\" 和 \""+currentName[3]+"\":\n"; }
			else if (k=="C1011") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\", \""+currentName[2]+"\" 和 \""+currentName[3]+"\":\n"; }
			else if (k=="C1101") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\", \""+currentName[1]+"\" 和 \""+currentName[3]+"\":\n"; }
			else if (k=="C1110") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\", \""+currentName[1]+"\" 和 \""+currentName[2]+"\":\n"; }

			else if (k=="C1111") { resultText1=results+" 共同元素"+s+" 在 \""+currentName[0]+"\", \""+currentName[1]+"\", \""+currentName[2]+"\" 和 \""+currentName[3]+"\":\n"; }

			$("names").value=resultText;
			$("names1").value=resultText1;
			$("names").scrollTop=0;
		}

		function clear(l) {
			$("area"+l).value="";
			$("name"+l).value="List "+l;
			drawAll("mainCanvas");
		}

		function writeLabel(obj,l,w,h) {
			var factor=w/400;
			var canvas=$(obj);
			var ctx=canvas.getContext("2d");
			var labelCaption=currentName[l];
			var x=xlabel[groups-1][l]*factor;
			var y=ylabel[groups-1][l]*factor;
			if (COLORS=="yes") {
				ctx.fillStyle=clabel[l];
			}
			else { ctx.fillStyle="rgb(0,0,0)"; }
			var actualSize=parseInt($("resultC1100").style.fontSize)+"pt";
			var actualSize=Math.floor(parseInt($("resultC1100").style.fontSize)*CSIZE/640)+"pt";
			ctx.font="bold "+actualSize+" "+$("resultC1100").style.fontFamily;
			ctx.textBaseline="middle";
			ctx.textAlign="center";
			ctx.fillText(labelCaption,x,y);
		}

		function setStyle(style)
		{
			if (style=="colored")
			{
				COLORS="yes";
				TRANSP="yes";
				GRAY="no";
				$("frame").style.background="ffffff";
			}
			else if (style=="BW")
			{
				COLORS="no";
				TRANSP="no";
				GRAY="no";
				$("frame").style.background="#FFFFFF";
			}
			else if (style=="gray")
			{
				COLORS="no";
				TRANSP="no";
				GRAY="yes";
				$("frame").style.background="#FFffff";
			}
			else if (style=="transparent")
			{
				COLORS="no";
				TRANSP="yes";
				GRAY="no";
				$("frame").style.background="#D400d4";
			}
		}

		function setPercentage(bool)
		{
			if (bool==true) { PERC="yes" } else { PERC="no"; }
		}

		function drawAll(obj) {
			switch (groups) {
				case 1: drawVenn1(obj,CSIZE,CSIZE); break;
				case 2: drawVenn2(obj,CSIZE,CSIZE); break;
				case 3: drawVenn3(obj,CSIZE,CSIZE); break;
				case 4: drawVenn4(obj,CSIZE,CSIZE); break;
			}
			setLabels(obj,CSIZE,CSIZE);
			placeObjects(CSIZE,CSIZE);
			$("image").src=$("mainCanvas").toDataURL();
		}

		function drawVenn1(obj,w,h) {
			var factor=w/400; // 400 was the original size.
			var canvas=$(obj);
			var ctx=canvas.getContext("2d");
			canvas.style.width=w;
			canvas.style.height=h;
			canvas.setAttribute("width",w);
			canvas.setAttribute("height",h);
			if (TRANSP=="no") {
				ctx.fillStyle="rgb(255,255,255)";
				ctx.fillRect(0,0,w,h);
			}
    			var rad=92*factor;
    			var start=0;
    			var end=2*Math.PI;
    			var clock=1;
    			var lcolor="rgb(0,255,0)";
    			var lsize=LSIZE;
    			var x=new Array();
    			var y=new Array();
    			var bcolor=new Array();
    			x[0]=canvas.width/2;
    			y[0]=canvas.height/2;
    			bcolor[0]="rgba(0,0,255,0.5)";
    			ctx.beginPath();
    			ctx.arc(x[0],y[0],rad,start,end,clock);
  	  		if (COLORS=="yes") {
 				ctx.fillStyle = bcolor[0];
 				ctx.fill();
 			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
  		}

		function drawVenn2(obj,w,h) {
			var factor=w/400; // 400 was the original size.
			var canvas=$(obj);
			var ctx=canvas.getContext("2d");
			canvas.style.width=w;
			canvas.style.height=h;
			canvas.setAttribute("width",w);
			canvas.setAttribute("height",h);
			if (TRANSP=="no") {
				ctx.fillStyle="rgb(255,255,255)";
				ctx.fillRect(0,0,w,h);
			}
    			var rad=92*factor;
    			var start=0;
    			var end=2*Math.PI;
    			var clock=1;
    			var lcolor="rgb(0,0,255)";
    			var lsize=LSIZE;
    			var x=new Array();
    			var y=new Array();
    			var bcolor=new Array();
    			x[0]=canvas.width/2-60*factor;
    			y[0]=canvas.height/2;
    			bcolor[0]="rgba(0,0,255,0.5)";
    			x[1]=canvas.width/2+60*factor;
    			y[1]=canvas.height/2;
    			bcolor[1]="rgba(255,0,0,0.5)";
   			ctx.beginPath();
    			ctx.arc(x[0],y[0],rad,start,end,clock);
    			if (COLORS=="yes") {
 				ctx.fillStyle = bcolor[0];
 				ctx.fill();
 			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    		ctx.beginPath();
    		ctx.arc(x[1],y[1],rad,start,end,clock);
    		if (COLORS=="yes") {
 				ctx.fillStyle = bcolor[1];
 				ctx.fill();
 			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    		ctx.beginPath();
    		ctx.arc(x[0],y[0],rad,start,end,clock);
 			ctx.fillStyle = "rgba(0,0,0,0)";
 			ctx.fill();
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    		ctx.beginPath();
 	   	ctx.arc(x[1],y[1],rad,start,end,clock);
 			ctx.fillStyle = "rgba(0,0,0,0)";
 			ctx.fill();
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
		}

		function drawVenn3(obj,w,h) {
			var factor=w/400; // 400 was the original size.
			var canvas=$(obj);
			var ctx=canvas.getContext("2d");
			canvas.style.width=w;
			canvas.style.height=h;
			canvas.setAttribute("width",w);
			canvas.setAttribute("height",h);
			if (TRANSP=="no") {
				ctx.fillStyle="rgb(255,255,255)";
				ctx.fillRect(0,0,w,h);
			}
    			var rad=92*factor;
    			var start=0;
    			var end=2*Math.PI;
    			var clock=1;
    			var lcolor="rgb(0,0,0)";
    			var lsize=LSIZE;
    			var x=new Array();
    			var y=new Array();
    			var bcolor=new Array();
    			x[0]=canvas.width/2-60*factor;
    			y[0]=canvas.height/2-52*factor;
    			bcolor[0]="rgba(0,0,255,0.5)";
    			x[1]=canvas.width/2+60*factor;
    			y[1]=canvas.height/2-52*factor;
    			bcolor[1]="rgba(255,0,0,0.5)";
    			x[2]=canvas.width/2;
    			y[2]=canvas.height/2+52*factor;
   	 		bcolor[2]="rgba(0,255,0,0.5)";
    			ctx.beginPath();
    			ctx.arc(x[0],y[0],rad,start,end,clock);
    			if (COLORS=="yes") {
 				ctx.fillStyle = bcolor[0];
 				ctx.fill();
 			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    			ctx.beginPath();
    			ctx.arc(x[1],y[1],rad,start,end,clock);
    			if (COLORS=="yes") {
 					ctx.fillStyle = bcolor[1];
 					ctx.fill();
    			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    			ctx.beginPath();
    			ctx.arc(x[2],y[2],rad,start,end,clock);
    			if (COLORS=="yes") {
				ctx.fillStyle = bcolor[2];
				ctx.fill();
			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    		ctx.beginPath();
   	 	ctx.arc(x[0],y[0],rad,start,end,clock);
 			ctx.fillStyle = "rgba(0,0,0,0)";
 			ctx.fill();
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    		ctx.beginPath();
 	   	ctx.arc(x[1],y[1],rad,start,end,clock);
 			ctx.fillStyle = "rgba(0,0,0,0)";
 			ctx.fill();
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
    		ctx.beginPath();
 	   	ctx.arc(x[2],y[2],rad,start,end,clock);
 			ctx.fillStyle = "rgba(0,0,0,0)";
 			ctx.fill();
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
		}

		function drawVenn4(obj,w,h) {
			var factor=w/400; // 400 was the original size.
			var canvas=$(obj);
			var ctx=canvas.getContext("2d");
			canvas.style.width=w;
			canvas.style.height=h;
			canvas.setAttribute("width",w);
			canvas.setAttribute("height",h);
			if (TRANSP=="no") {
				ctx.fillStyle="rgb(255,255,255)";
				ctx.fillRect(0,0,w,h);
			}
			//rectangle
			var W=180*factor;
			var H=282*factor;
			var Xmid=new Array();
			var Ymid=new Array();
			var angle=new Array();
			var bcolor=new Array();
			Xmid[0]=canvas.width/2-67*factor;
			Ymid[0]=canvas.height/2+15*factor;
			angle[0]=-45;
			bcolor[0]="rgba(0,0,255,0.33)";
			Xmid[1]=canvas.width/2-7*factor;
			Ymid[1]=canvas.height/2-20*factor;
			angle[1]=-45;
			bcolor[1]="rgba(255,255,0,0.33)";
			Xmid[2]=canvas.width/2+7*factor;
			Ymid[2]=canvas.height/2-20*factor;
			angle[2]=45;
			bcolor[2]="rgba(0,255,0,0.33)";
			Xmid[3]=canvas.width/2+67*factor;
			Ymid[3]=canvas.height/2+15*factor;
			angle[3]=45;
			bcolor[3]="rgba(255,0,0,0.33)";
			drawOval(ctx,Xmid[0],Ymid[0],W,H,angle[0],bcolor[0],"rgb(0,0,0)",0);
			drawOval(ctx,Xmid[1],Ymid[1],W,H,angle[1],bcolor[1],"rgb(0,0,0)",0);
			drawOval(ctx,Xmid[2],Ymid[2],W,H,angle[2],bcolor[2],"rgb(0,0,0)",0);
			drawOval(ctx,Xmid[3],Ymid[3],W,H,angle[3],bcolor[3],"rgb(0,0,0)",0);
			// draw again the lines
			var lsize=LSIZE;
			drawOval(ctx,Xmid[0],Ymid[0],W,H,angle[0],"rgba(0,0,0,0)","rgb(0,0,0)",lsize);
			drawOval(ctx,Xmid[1],Ymid[1],W,H,angle[1],"rgba(0,0,0,0)","rgb(0,0,0)",lsize);
			drawOval(ctx,Xmid[2],Ymid[2],W,H,angle[2],"rgba(0,0,0,0)","rgb(0,0,0)",lsize);
			drawOval(ctx,Xmid[3],Ymid[3],W,H,angle[3],"rgba(0,0,0,0)","rgb(0,0,0)",lsize);
		}

		function drawOval(ctx,Xmid,Ymid,W,H,angle,bcolor,lcolor,lsize) {
    		var pxc1=W/2;
    		var pyc1=-H/2;
    		var pxc2=W/2;
    		var pyc2=H/2;
    		var pxc3=-W/2;
    		var pyc3=H/2;
    		var pxc4=-W/2;
    		var pyc4=-H/2;
    		var pxa1=0;
    		var pya1=-H/2;
    		var pxa2=0;
    		var pya2=H/2;
			angle=angle*2*Math.PI/360;
    		var xc1=pxc1*Math.cos(angle)-pyc1*Math.sin(angle);
    		var yc1=pxc1*Math.sin(angle)+pyc1*Math.cos(angle);
    		var xc2=pxc2*Math.cos(angle)-pyc2*Math.sin(angle);
    		var yc2=pxc2*Math.sin(angle)+pyc2*Math.cos(angle);
    		var xc3=pxc3*Math.cos(angle)-pyc3*Math.sin(angle);
    		var yc3=pxc3*Math.sin(angle)+pyc3*Math.cos(angle);
    		var xc4=pxc4*Math.cos(angle)-pyc4*Math.sin(angle);
    		var yc4=pxc4*Math.sin(angle)+pyc4*Math.cos(angle);
    		var xa1=pxa1*Math.cos(angle)-pya1*Math.sin(angle);
    		var ya1=pxa1*Math.sin(angle)+pya1*Math.cos(angle);
    		var xa2=pxa2*Math.cos(angle)-pya2*Math.sin(angle);
    		var ya2=pxa2*Math.sin(angle)+pya2*Math.cos(angle);
    		xc1=xc1+Xmid;
    		xc2=xc2+Xmid;
    		xc3=xc3+Xmid;
    		xc4=xc4+Xmid;
    		xa1=xa1+Xmid;
    		xa2=xa2+Xmid;
    		yc1=yc1+Ymid;
    		yc2=yc2+Ymid;
    		yc3=yc3+Ymid;
    		yc4=yc4+Ymid;
    		ya1=ya1+Ymid;
    		ya2=ya2+Ymid;
    		ctx.beginPath();
    		ctx.moveTo(xa1, ya1);
    		ctx.bezierCurveTo(xc1, yc1,xc2, yc2,xa2, ya2);
			ctx.bezierCurveTo(xc3, yc3,xc4, yc4,xa1, ya1);
			if (COLORS=="yes") {
 				ctx.fillStyle = bcolor;
 				ctx.fill();
 			}
 			ctx.strokeStyle = lcolor;
 			ctx.lineWidth=lsize;
 			ctx.stroke();
 			ctx.closePath();
		}

		function showInfo() {
			$("info").style.display="block";
		}

		function resize() {
			$("mainTable").style.left=parseInt($("mainDiv").offsetWidth)/2-parseInt($("mainTable").offsetWidth)/2;
		}

		function componentToHex(c)
		{
    		var hex = c.toString(16);
    		return hex.length == 1 ? "0" + hex : hex;
		}




/**
 * Floodfill - Linear Floodfill with tolerance in plain Javascript.
 *
 * Autor: Markus Ritberger
 * Version: 1.0.1 (2012-04-16)
 *
 * Examples at: http://demos.ritberger.at/floodfill
 *
 * licensed under MIT license:
 *
 * Copyright (c) 2012 Markus Ritberger
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 **/

function floodfill_hexToR(h) {
    return parseInt((floodfill_cutHex(h)).substring(0,2),16)
}
function floodfill_hexToG(h) {
    return parseInt((floodfill_cutHex(h)).substring(2,4),16)
}
function floodfill_hexToB(h) {
    return parseInt((floodfill_cutHex(h)).substring(4,6),16)
}
function floodfill_cutHex(h) {
    return (h.charAt(0)=="#") ? h.substring(1,7):h
}

function floodfill_matchTolerance(pixelPos,color,tolerance){
    var rMax = startR + (startR * (tolerance / 100));
    var gMax = startG + (startG * (tolerance / 100));
    var bMax = startB + (startB * (tolerance / 100));

    var rMin = startR - (startR * (tolerance / 100));
    var gMin = startG - (startG * (tolerance / 100));
    var bMin = startB - (startB * (tolerance / 100));

    var r = imageData.data[pixelPos];
    var g = imageData.data[pixelPos+1];
    var b = imageData.data[pixelPos+2];

    return ((
        (r >= rMin && r <= rMax)
        && (g >= gMin && g <= gMax)
        && (b >= bMin && b <= bMax)
        )
        && !(r == floodfill_hexToR(color)
        && g == floodfill_hexToG(color)
        && b == floodfill_hexToB(color))
        );
}

function floodfill_colorPixel(pixelPos,color){
  imageData.data[pixelPos] = floodfill_hexToR(color);
  imageData.data[pixelPos+1] = floodfill_hexToG(color);
  imageData.data[pixelPos+2] = floodfill_hexToB(color);
  imageData.data[pixelPos+3] = 255;
}

function floodFill(x,y,context,color,tolerance){
   pixelStack = [[x,y]];
   width = context.canvas.width;
   height = context.canvas.height;
   pixelPos = (y*width + x) * 4;
   imageData =  context.getImageData(0, 0, width, height);
   startR = imageData.data[pixelPos];
   startG = imageData.data[pixelPos+1];
   startB = imageData.data[pixelPos+2];
   while(pixelStack.length){
      newPos = pixelStack.pop();
      x = newPos[0];
      y = newPos[1];
      pixelPos = (y*width + x) * 4;
      while(y-- >= 0 && floodfill_matchTolerance(pixelPos,color,tolerance)){
        pixelPos -= width * 4;
      }
      pixelPos += width * 4;
      ++y;
      reachLeft = false;
      reachRight = false;
      while(y++ < height-1 && floodfill_matchTolerance(pixelPos,color,tolerance)){
        floodfill_colorPixel(pixelPos,color);
        if(x > 0){
          if(floodfill_matchTolerance(pixelPos - 4,color,tolerance)) {
            if(!reachLeft){
              pixelStack.push([x - 1, y]);
              reachLeft = true;
            }
          }
          else if(reachLeft){
            reachLeft = false;
          }
        }
        if(x < width-1){
          if(floodfill_matchTolerance(pixelPos + 4,color,tolerance)){
            if(!reachRight){
              pixelStack.push([x + 1, y]);
              reachRight = true;
            }
          }
          else if(floodfill_matchTolerance(pixelPos + 4 -(width *4),color,tolerance)) {
            if(!reachLeft){
              pixelStack.push([x + 1, y - 1]);
              reachLeft = true;
            }
          }
          else if(reachRight){
            reachRight = false;
          }
        }
        pixelPos += width * 4;
      }
    }
    context.putImageData(imageData, 0, 0);
}

		</script>

		<style>
		.number {
			color:#FF0000;
			font-weight:bold;
			cursor:pointer;
			text-decoration:none;
		}
		.numberW {
			color:#FF0000;
			font-weight:bold;
			cursor:pointer;
			text-decoration:none;
		}
		.number2 {
			font-weight:bold;
			cursor:pointer;
			border:2px solid #000000;
			border-right:2px solid #000000;
			margin-top:-2px;
			margin-left:-2px;
		}

		.buttonA1 {
			white-space:nowrap;
			background-color:#D4D0C8;
			text-align:center;
			font-size:14px;
			border-top: 1px #D4D0C8 solid;
			border-left: 1px #D4D0C8 solid;
			border-right: 1px #D4D0C8 solid;
			border-bottom: 1px #D4D0C8 solid;
			cursor:default;
			padding-left:4px;
			padding-right:4px;
			padding-top:1px;
			padding-bottom:1px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.buttonA1C {
			white-space:nowrap;
			background-color:#D4D0C8;
			text-align:center;
			font-size:14px;
			border-top: 1px #000000 solid;
			border-left: 1px #000000 solid;
			border-right: 1px #FFFFFF solid;
			border-bottom: 1px #FFFFFF solid;
			cursor:default;
			padding-left:5px;
			padding-right:3px;
			padding-top:2px;
			padding-bottom:0px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.buttonA1B {
			white-space:nowrap;
			background-color:#D4D0C8;
			text-align:center;
			font-size:14px;
			border-top: 1px #FFFFFF solid;
			border-left: 1px #FFFFFF solid;
			border-right: 1px #000000 solid;
			border-bottom: 1px #000000 solid;
			cursor:default;
			padding-left:4px;
			padding-right:4px;
			padding-top:1px;
			padding-bottom:1px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		td,p,input[type="text"] {
			font-size:14px;
			font-family: sans-serif;
		}

		#name1,#name2, #name3, #name4 {
			font-size:14px;
			font-family: sans-serif;
		}

		</style>

	</head>

	<body onload="checkBrowser();main();focused=$('name1');setSize($('sizeBox').value);resize();" onresize="resize();" style="margin:0px;background:#b0be00;">

	<div id="mainDiv" style="padding-top:0px;padding-bottom:0px;padding-left:8px;padding-right:8px;background:#b0bec5;">
		<table id="mainTable" border="0" cellpadding="0" cellspacing="0" style="position: relative; box-shadow: rgb(136, 136, 136) 2px 5px 10px; border: 1px solid rgb(212, 208, 200); vertical-align: middle; height: 100%; left: 130px; background: rgb(255, 255,0);">
			<tr>
				<td bgcolor="#FF8080" style="vertical-align:top;">
					<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
						<tr>
							<td colspan="2" style="width:100%;">
								<table border="0" cellpadding="4" cellspacing="0" style="background:#0C090A;width:100%;">
									<tr>
										<td style="font-variant:small-caps;color:#E5E4E2;font-size:32px;padding-left:16px;font-weight:bold;vertical-align:middle;">
											Venny
										</td>
										<td style="font-weight:bold;font-size:14px;text-align:left;color:#E5E4E2;vertical-align:middle;padding-right:8px;white-space:nowrap;">
											2.1
										</td>
										<td style="font-size:11px;width:100%;text-align:right;color:#E5E4E2;vertical-align:middle;padding-right:8px;white-space:nowrap;">
											By Juan Carlos Oliveros<br>
											<a style="color:#E5E4E2;" href="https://bioinfogp.cnb.csic.es/" target="_new">BioinfoGP</a>,
											<a style="color:#E5E4E2;" href="http://www.cnb.csic.es/" target="_new">CNB-CSIC</a>
										</td>
									</tr>
<!--									<tr>
										<td colspan=3 style="font-size:11px;color:#EFEFEF;">
										</td>
									</tr>
-->
								</table>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="padding:8px;padding-top:12px;">
							    <a href="http://jvenn.toulouse.inra.fr/app/example.html">0.访问杰文韦恩图</a><br>
								1. 最多粘贴4个列表。每行一个元素 (<a href="javascript:setExample();">示例</a>),<br>
								2. 单击数字显示结果<br>
								3. 右击图像查看并保存<br>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="width:100%;padding-top:4px;">
								<table cellpadding="0" cellspacing="1" style="width:100%;">
									<tr>
										<td class="buttonA1" onmouseover="this.className='buttonA1B';" onmousedown="this.className='buttonA1C';" onmouseout="this.className='buttonA1';" onmouseup="this.className='buttonA1B';elementsToUpperCase();" style="font-family:sans-serif;">大写</td>
										<td class="buttonA1" onmouseover="this.className='buttonA1B';" onmousedown="this.className='buttonA1C';" onmouseout="this.className='buttonA1';" onmouseup="this.className='buttonA1B';elementsToLowerCase();" style="font-family:sans-serif;">小写</td>
										<td class="buttonA1" style="width:100%;text-align:left;color:#336699;">←<small>cannot be undone!</small></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td style="padding:4px;padding-top:8px;">
								<input size="10" id="name1" maxlength="16" value="列表 1" style="color:rgb(0,0,200);font-weight:bold;" onfocus="focused=$('names');ti=setInterval(myBlur,500);" onblur="clearInterval(ti);" type="textbox">
								<div style="display:inline;font-size:12px;" id="elements1">0</div>
								<br>
								<textarea id="area1" cols="24" rows="12" onchange="compareLists();" wrap="off" onfocus="focused=this;ti=setInterval(myBlur,500);" onblur="clearInterval(ti);"></textarea>
								<dt style="width: 100%; text-align: right;"><a style="color:#0000FF;" href="javascript:clear(1);myBlur();compareLists();">清空</a>&nbsp;&nbsp;</dt><dt>
							</dt></td>
							<td style="padding:4px;padding-top:8px;">
								<input size="10" id="name2" maxlength="16" value="列表 2" style="color:rgb(128,128,0);font-weight:bold;" onfocus="focused=$('names');ti=setInterval(myBlur,500);" onblur="clearInterval(ti);" type="textbox">
								<div style="display:inline;font-size:12px;" id="elements2">0</div>
								<br>
								<textarea id="area2" cols="24" rows="12" onchange="compareLists();" wrap="off" onfocus="focused=this;ti=setInterval(myBlur,500);" onblur="clearInterval(ti);"></textarea>
								<dt style="width: 100%; text-align: right;"><a style="color:#888800;" href="javascript:clear(2);myBlur();compareLists();">清空</a>&nbsp;&nbsp;</dt><dt>
							</dt></td>
						</tr>
						<tr>
							<td style="padding:4px;">
								<input size="10" id="name3" maxlength="16" value="列表 3" style="color:rgb(0,128,0);font-weight:bold;" onfocus="focused=$('names');ti=setInterval(myBlur,500);" onblur="clearInterval(ti);" type="textbox">
								<div style="display:inline;font-size:12px;" id="elements3">0</div>
								<br>
								<textarea id="area3" cols="24" rows="12" onchange="compareLists();" wrap="off" onfocus="focused=this;ti=setInterval(myBlur,500);" onblur="clearInterval(ti);"></textarea>
								<dt style="width: 100%; text-align: right;"><a style="color:#00BB00;" href="javascript:clear(3);myBlur();compareLists();">清空</a>&nbsp;&nbsp;</dt><dt>
							</dt></td>
							<td style="padding:4px;">
								<input size="10" id="name4" maxlength="16" value="列表 4" style="color:rgb(200,0,0);font-weight:bold;" onfocus="focused=$('names');ti=setInterval(myBlur,500);" onblur="clearInterval(ti);" type="textbox">
								<div style="display:inline;font-size:12px;" id="elements4">0</div>
								<br>
								<textarea id="area4" cols="24" rows="12" onchange="compareLists();" wrap="off" onfocus="focused=this;ti=setInterval(myBlur,500);" onblur="clearInterval(ti);"></textarea>
								<dt style="width: 100%; text-align: right;"><a style="color:#FF0000;" href="javascript:clear(4);myBlur();compareLists();">清空</a>&nbsp;&nbsp;</dt>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="padding:4px;vertical-align:top;padding-top:0px;">
								结果:
								<br>
								<textarea rows="2" id="names1" style="width:100%;font-size:20px;bgcolor:blue;" wrap="off" onfocus="focused=this;"></textarea>
								<textarea rows="15" id="names" style="width:100%;" wrap="off" onfocus="focused=this;"></textarea>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align:center;padding-bottom:12px;font-size:16px;">
								谢谢使用 Venny!&nbsp;&nbsp;(please <a href="javascript:showInfo();">cite</a>)
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align:center;padding-left:8px;padding-right:8px;padding-bottom:4px;font-size:12px;vertical-align:bottom;">
								<i>Venny was first inspired by <a target="seidel" href="http://www.pangloss.com/seidel/Protocols/venn.cgi">this visionary tool</a> by Chris Seidel
							</i></td>
						</tr>
					</table>
				</td>
				<td style="background:#D4D0C8;padding:4px;vertical-align:top;height:100%;">
					<table cellpadding="0" cellspacing="0" border="0" style="background:#D4D0C8;width:100%;height:100%;">
						<tr>
							<td style="width:100px;padding-bottom:0px;vertical-align:top;background:#FFFFff;">
								<table cellpadding="2" cellspacing="1" border="0" style="width:100%;background:#FFFFFF;" "="">
									<tr>
										<td style="white-space:nowrap;background:#D4D0C8;padding-left:4px;padding-right:4px;">
											样式:
											<select id="selectStyle" onchange="setStyle(this.value);drawAll('mainCanvas');">
												<option value="colored">彩色</option>
												<option value="BW" selected>Solid White</option>
												<option value="gray">By % (slow)</option>
												<option value="transparent">Transparent</option>
											</select>
										</td>
										<td style="white-space:nowrap;background:#D4D0C8;padding-left:4px;padding-right:4px;">
										<input type="checkbox" onchange="setPercentage(this.checked);drawAll('mainCanvas');" checked>显示 %
										</td>


										<td style="text-align:left;background:#D4D0C8;vertical-align:top;">
											<table cellpadding="0" cellspacing="0" border="0" style="background:#D4D0C8;">
												<tr>
													<td class="buttonA1" style="text-align:right;color:#336699;padding-left:16px;">线粗:</td>
													<td class="buttonA1" onmouseover="this.className='buttonA1B';" onmousedown="this.className='buttonA1C';" onmouseout="this.className='buttonA1';" onmouseup="$('widthBox').value=Math.max(1,parseInt($('widthBox').value)-1);this.className='buttonA1B';setWidth($('widthBox').value);drawAll('mainCanvas');">-</td>
													<td><input style="font-size:10px;text-align:center;" type="textbox" id="widthBox" size="3" maxlength="3" value="3" onchange="setWidth($('widthBox').value);drawAll('mainCanvas');"></td>
													<td class="buttonA1" onmouseover="this.className='buttonA1B';" onmousedown="this.className='buttonA1C';" onmouseout="this.className='buttonA1';" onmouseup="$('widthBox').value++;this.className='buttonA1B';setWidth($('widthBox').value);drawAll('mainCanvas');">+</td>
												</tr>
											</table>
										</td>
										<td style="text-align:left;background:#D4D0C8;">
											<table cellpadding="0" cellspacing="0" border="0" style="background:#D4D0C8;">
												<tr>
													<td class="buttonA1" style="text-align:right;color:#336699;padding-left:16px;">字号:</td>
													<td class="buttonA1" onmouseover="this.className='buttonA1B';" onmousedown="this.className='buttonA1C';" onmouseout="this.className='buttonA1';" onmouseup="$('sizeBox').value=Math.max(2,parseInt($('sizeBox').value)-2);this.className='buttonA1B';setSize($('sizeBox').value);drawAll('mainCanvas');">-</td>
													<td><input style="font-size:10px;text-align:center;" type="textbox" id="sizeBox" size="3" maxlength="3" value="28" onchange="setSize($('sizeBox').value);drawAll('mainCanvas');"></td>
													<td class="buttonA1" onmouseover="this.className='buttonA1B';" onmousedown="this.className='buttonA1C';" onmouseout="this.className='buttonA1';" onmouseup="$('sizeBox').value=parseInt($('sizeBox').value)+2;this.className='buttonA1B';setSize($('sizeBox').value);drawAll('mainCanvas');">+</td>
												</tr>
											</table>
										</td>
										<td style="white-space:nowrap;background:#D4D0C8;padding-left:4px;padding-right:4px;">
											字体:
											<select id="selectFamily" onchange="setFamily(this.value);drawAll('mainCanvas');">
												<option style="font-family:serif" value="Serif" selected>Serif</option>
												<option style="font-family:sans-serif" value="Sans-Serif">Sans Serif</option>
												<option style="font-family:隶书" value="隶书">隶书</option>
											</select>
										</td>
									</tr>
								</tbody></table>
							</td>
						</tr>
						<tr>
							<td style="background:#FFFFff;vertical-align:top;text-align:center;height:100%;">
								<div style="background:#FFFFff;overflow:hidden;position:relative;left:0px;top:0px;height:100%;vertical-align:top;" id="frame">
									<img id="image" width="640px" height="640px">
									<div class="number" style="padding: 4px; position: absolute; left: 311px; top: 305px; font-size: 14pt; font-family: sans-serif;" id="resultC1000" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1000');">0</div>
									<div class="numberW" style="padding: 4px; position: absolute; left: 407px; top: -2975px; font-size: 14pt; font-family: sans-serif;" id="resultC0100" onmouseover="this.className='number2';" onmouseout="this.className='numberW';" onclick="showNames('C0100');">0</div>
									<div class="numberW" style="padding: 4px; position: absolute; left: 287px; top: -4335px; font-size: 14pt; font-family: sans-serif;" id="resultC0010" onmouseover="this.className='number2';" onmouseout="this.className='numberW';" onclick="showNames('C0010');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 487px; top: -3055px; font-size: 14pt; font-family: sans-serif;" id="resultC0001" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C0001');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 287px; top: -2975px; font-size: 14pt; font-family: sans-serif;" id="resultC1100" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1100');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 215px; top: -3215px; font-size: 14pt; font-family: sans-serif;" id="resultC1010" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1010');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 279px; top: -4735px; font-size: 14pt; font-family: sans-serif;" id="resultC1001" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1001');">0</div>
									<div class="numberW" style="padding: 4px; position: absolute; left: 359px; top: -3215px; font-size: 14pt; font-family: sans-serif;" id="resultC0110" onmouseover="this.className='number2';" onmouseout="this.className='numberW';" onclick="showNames('C0110');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 391px; top: -3935px; font-size: 14pt; font-family: sans-serif;" id="resultC0101" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C0101');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 407px; top: -2207px; font-size: 14pt; font-family: sans-serif;" id="resultC0011" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C0011');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 287px; top: -2815px; font-size: 14pt; font-family: sans-serif;" id="resultC1110" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1110');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 248.6px; top: -4287px; font-size: 14pt; font-family: sans-serif;" id="resultC1101" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1101');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 330.2px; top: -4287px; font-size: 14pt; font-family: sans-serif;" id="resultC1011" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1011');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 343px; top: -2943px; font-size: 14pt; font-family: sans-serif;" id="resultC0111" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C0111');">0</div>
									<div class="number" style="padding: 4px; position: absolute; left: 279px; top: -3935px; font-size: 14pt; font-family: sans-serif;" id="resultC1111" onmouseover="this.className='number2';" onmouseout="this.className='number';" onclick="showNames('C1111');">0</div>
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</tbody></table>
	</div>
	<div id="info" style="position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;background:rgba(255,255,255,0.75);">
		<center>
		<table cellpadding="0" cellspacing="4" style="margin-top:16px;background:#E5E4E2;text-align:justify;box-shadow: 2px 5px 10px #888888;border:1px solid #D4D0C8;border-radius:10px;border:2px solid #000000;width:640px;">
			<tr>
				<td style="text-align:right;">
					<input type="button" value="Close" onclick="$('info').style.display='none';" style="border-radius:8px;">
				</td>
			</tr>
			<tr>
				<td style="padding:24px;padding-top:0px;color:#0C090A">
					<p><big><b>Venny's on-line reference</b></big></p>
					<p>
					<i>Oliveros, J.C. (2007-2015) Venny. An interactive tool for comparing lists with Venn's diagrams.</i>
					https://bioinfogp.cnb.csic.es/tools/venny/index.html
					</p>
					<p>
					(If you prefer it, you can still access <a target="old_venny" href="https://bioinfogp.cnb.csic.es/tools/venny_old/index.html">Venny 1.0</a>).
					<br>&nbsp;
					</p>
					<p><big><b>How to use Venny off-line</b></big></p>
					<p>
					Venny consists on a single standard html file.
					Feel free to save it to your hard disk,
					open it with your favorite browser, and start drawing nice Venn's diagrams in seconds, even without internet connection.
					</p>
					<p>
					If you want to set up a public Venny's mirror site, please do not modify this message.
					<br>&nbsp;
					</p>
					<p><big><b>About Venn's diagrams</b></big></p>
					<p>
					There is a great <a target="wiki_venn" href="http://en.wikipedia.org/wiki/Venn_diagram">Wikipedia page</a>
					about the history of Venn's diagrams, their variations and their applications.
					<br>&nbsp;
					</p><p><big><b>Contact</b></big></p>
					<p>
					Juan Carlos Oliveros (oliveros@cnb.csic.es)
					<br>BioinfoGP Service<br>Centro Nacional de Biotecnología, (CNB-CSIC)
					</p>
				</td>
			</tr>
		</table>
	</center></div>
	<canvas id="mainCanvas" style="display: none; position: absolute; top: 0px; width:1280px; height: 1280px;" width="1280" height="1280"></canvas>
	
<p><center><a href="https://beian.miit.gov.cn" target="new">豫ICP备17047607号-1</a></center></p>

</body>
</html>