Commits

Anonymous committed d460d1b

Checkboxes now do a lot more

  • Participants
  • Parent commits f9e0a67

Comments (0)

Files changed (4)

File delFiles.php

 error_reporting(0);
 //	echo "<pre>" . print_r($_POST, true) . "</pre>";
 	$delFiles = $_POST['delList'];
-//	echo "<pre>" . print_r($delFiles, true) . "</pre>";
+	$delImages = $_POST['delimgList'];
+//	echo "<pre>" . print_r($delImages, true) . "</pre>";
 	echo "<script>";
 	foreach($delFiles as $file) {
 		$classArray = explode("/", $file);
 		fwrite($f, $rel);
 		}
 	}
+	foreach($delImages as $image) {
+		$classArray = explode("/", $image);
+		$myClassArray = explode('.', $classArray[3]);
+		$myClass = $myClassArray[0];
+		echo "$(\".$myClass\").html('');";
+		unlink($image);
+		$relations = file_get_contents('temp/' . $classArray[1] . '/relations.txt');
+		$relationsArray = explode("~", $relations);
+		$f = fopen('temp/' . $classArray[1] . "/relations.txt", 'w' );
+		array_pop($relationsArray);
+		foreach($relationsArray as $rel) {
+			if(strpos($rel ,$myClass) === false) {
+				fwrite($f, $rel);
+				fwrite($f, "~");
+			}
+		}
+	}
 	if (is_file('temp/' . $classArray[1] . '/relations.txt') == true) {
 		$relations = file_get_contents('temp/' . $classArray[1] . '/relations.txt');
 		$relationsArray=explode("~", $relations);

File fileupload.php

 <?php
+error_reporting(0);
 $username = $_POST['userID'];
 if(is_dir("temp/" . $username) == false | $username == '') {
 	echo "<script> window.alert(\"ID does not match any sessions\");
 usort($images, function($a, $b) {
 	return filemtime($b) < filemtime($a);
 });
+$useFiles = $_POST['delList'];
 $c = 0;
 $geneFiles = array();
 $linkFiles = array();
 $rowNum = $canvasNum +1;
 $canvasNum *= 80;
 echo "<table id='fileManager' width=\"400\" align=\"center\" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
+		<tr><td><input type='checkbox' id='toggle' checked onchange='Javascript:toggleCheckboxes()'></input></td><td>Toggle Selection</td></tr>
 		<tr><td>&nbsp;</td><td>Filename</td><td>Date uploaded</td><td>Filesize (KB)</td><td rowspan=$rowNum><canvas width='300' height='$canvasNum' id='relationsCanvas'></canvas></td></tr>";
 foreach ($files as $allfile1) {
 	if(substr($allfile1, strlen($username) + 6) != 'hist' & substr($allfile1, strlen($username) + 6) != 'relations.txt' & substr($allfile1, strlen($username)+6, -6) != 'zzzzzzz' & substr($allfile1, strlen($username)+6, -6) != 'zzzzzz') {
 		$class = substr($allfile1, 6 + strlen($username));
 		$classExplode = explode(".", $class);
 		$class = $classExplode[0];
-		echo "<tr style='display: table-row'><td height='70' class='". $class ."'><input id='delList[]' type='checkbox' value=" .  $allfile1. "
-				name='delList[]'></input></td>";
+		echo "<tr style='display: table-row'><td height='70' class='". $class ."'><input id='$allfile1' type='checkbox' class='". $class ."' value=" .  $allfile1. "
+				name='delList[]' checked></input></td>";
 		echo "<td class='". $class ."'>" . substr($allfile1, strlen($username) + 6) . "</td>";
 		echo "<td class='". $class ."'>" .date(n, $time). "/". date(j, $time). "/". date(y,$time). "</td>";
 		echo "<td id='".$class."' class='". $class ."'>" . round(filesize($allfile1)/1024, 1) . "</td>";
 			$imgExplode = explode(".", $imgClass);
 			$imgClass = $imgExplode[0];
 			if(substr($images[$c], -3) == 'pdf') {
-				echo "<td></td><td><a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'>Download</a>";
+				echo "<td></td><td><a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'>Download</a></td><td height='70' class='". $imgClass ."'><input id='$c' type='checkbox' value=$images[$c] name='delimgList[]'checked onchange='Javascript:toggleRelationCheckboxes($c)></input></td>";
 			} else {
-				echo "<td></td><td><a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'><img align='center' src='". $images[$c] ."' height='40' width='40'></a>";
+				echo "<td></td><td><a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'><img align='center' src='". $images[$c] ."' height='40' width='40'></a></td>
+						<td height='70' class='". $imgClass ."'><input id='$c' type='checkbox' value=$images[$c] name='delimgList[]' checked onchange='Javascript:toggleRelationCheckboxes($c)'></input></td>";
 			}
 		}
 		echo "</tr>";
 			$imgExplode = explode(".", $imgClass);
 			$imgClass = $imgExplode[0];
 			if(substr($images[$c], -3) == 'pdf') {
-				echo "<tr height='70'><td></td><td></td><td></td><td></td><td></td><td><a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'>Download</a></td></tr>";
+				echo "<tr height='70'><td></td><td></td><td></td><td></td><td></td><td><a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'>Download</a></td><td class='". $imgClass ."'><input id='$c' type='checkbox' value=$images[$c] name='delimgList[]' checked onchange='Javascript:toggleRelationCheckboxes($c)></input></td></tr>";
 			} else {
-				echo "<tr height='70'><td></td><td></td><td></td><td></td><td></td><td>" . "<a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'><img align='center' src='". $images[$c] ."' height='40' width='40'></a></td></tr>";
+				echo "<tr height='70'><td></td><td></td><td></td><td></td><td></td><td>" . "<a id='$images[$c]' class='$imgClass' href='$images[$c]' target='_blank'><img align='center' src='". $images[$c] ."' height='40' width='40'></a></td><td class='". $imgClass ."'><input id='$c' type='checkbox' value=$images[$c] name='delimgList[]' checked onchange='Javascript:toggleRelationCheckboxes($c)></input></td></tr>";
 			}
 		}
 			$c++;
 } else {
 	$heatmapScript .= "<option value=''>No file</option>";
 	foreach ($heatmapFiles as $file) {
-		$filename = substr($file, strlen($username) + 6);
-		$heatmapScript .= "<option value='$file' selected='selected'>$filename</option>";
+		if(in_array($file, $useFiles)) {
+			$filename = substr($file, strlen($username) + 6);
+			$heatmapScript .= "<option value='$file' selected='selected'>$filename</option>";
+		}
 	}
 }
 if(empty($histogramFiles)) {
 } else {
 	$histogramScript .= "<option value=''>No file</option>";
 	foreach ($histogramFiles as $file) {
-		$filename = substr($file, strlen($username) + 6);
-		$histogramScript .= "<option value='$file' selected='selected'>$filename</option>";
+		if(in_array($file, $useFiles)) {
+			$filename = substr($file, strlen($username) + 6);
+			$histogramScript .= "<option value='$file' selected='selected'>$filename</option>";
+		}
 	}
 }
 if(empty($lineScatFiles)) {
 } else {
 	$lineScatScript .="<option value=''>No file</option>";
 	foreach ($lineScatFiles as $file) {
-		$filename = substr($file, strlen($username) + 6);
-		$lineScatScript .= "<option value='$file' selected='selected'>$filename</option>";
+		if(in_array($file, $useFiles)) {
+			$filename = substr($file, strlen($username) + 6);
+			$lineScatScript .= "<option value='$file' selected='selected'>$filename</option>";
+		}
 	}
 }
 if(empty($tileFiles)) {
 } else {
 	$tileScript .= "<option value=''>No file</option>";
 	foreach ($tileFiles as $file) {
-		$filename = substr($file, strlen($username) + 6);
-		$tileScript .= "<option value='$file' selected='selected'>$filename</option>";
+		if(in_array($file, $useFiles)) {
+			$filename = substr($file, strlen($username) + 6);
+			$tileScript .= "<option value='$file' selected='selected'>$filename</option>";
+		}
 	}
 }
 if(empty($geneFiles)) {
 } else {
 	$geneScript .= "<option value=''>No file</option>";
 	foreach ($geneFiles as $file) {
-		$filename = substr($file, strlen($username) + 6);
-		$geneScript .= "<option value='$file' selected='selected'>$filename</option>";
+		if(in_array($file, $useFiles)) {
+			$filename = substr($file, strlen($username) + 6);
+			$geneScript .= "<option value='$file' selected='selected'>$filename</option>";
+		}
 	}
 }
 if(empty($linkFiles)) {
 } else {
 	$linkScript .= "<option value=''>No file</option>";
 	foreach ($linkFiles as $file) {
-		$filename = substr($file, strlen($username) + 6);
-		$linkScript .= "<option value='$file' selected='selected'>$filename</option>";
+		if(in_array($file, $useFiles)) {
+			$filename = substr($file, strlen($username) + 6);
+			$linkScript .= "<option value='$file' selected='selected'>$filename</option>";
+		}
 	}
 }
 $script ="<script>var colorArray = new Array('rgba(20,83,154, .6)', 'rgba(154,110,9, .6)', 'rgba(29,110,17, .6)', 'rgba(100,20,162, .6)', 'rgba(0,0,0, .6)', 'rgba(100,0,0, .6)', 'rgba(168,168,8, .6)');
-		var c = -1;";
+		var c = -1;
+		$('#step2').css('display','table-row');
+		$('#step3').css('display','table-row');
+		var checkboxArray = new Array();";
 if (is_file('temp/' . $username . '/relations.txt') == true) {
 	$relations = file_get_contents('temp/' . $username . '/relations.txt');
 	$relationsArray=explode("~", $relations);
 		$script .= $relation;
 		$script .= "
 				c++;
+				checkboxArray[c] = relArray;
 				if(c == 7) {
 					c = 0;
 				}
 	}
 }
 $script .="	var scripts = new Array(\"$heatmapScript\", \"$histogramScript\", \"$lineScatScript\", \"$tileScript\");
-	function start() {
 		var username = document.getElementById('userID').value;
-		var dis = document.getElementById('circosForm');
-		dis.style.display = 'block';
-		dis = document.getElementById('idForm');
-		dis.style.display = 'none';
 		dis = document.getElementById('user_div');
 		dis.innerHTML =  username;
 		$('#username').val(username);
 		$(\"#history\").html(\"History:(month:day:hour:minute:second)<select name='historySelect' id='historySelect' onchange='Javascript: histUpdate();'><option value='none'>No option selected</option>" .$histScript . "<!-- hue -->\"); ";
 	}
 $script .= "		});
-	}
 	function connectPlotType(num) {
 	var trackType = 'trackType' + num;
 	var trackPh = \"track\" + num;
 	}
 	var newMenu = scripts[i];
 	document.getElementById(trackPh).innerHTML = newMenu;
+	}
+	function toggleRelationCheckboxes(num) {
+		var flag = document.getElementById('' + num).checked;
+		var arr = checkboxArray[num];
+		var form = document.getElementById('idForm');
+    	var inputs = form.elements;
+    	if(!inputs){
+    	    return;
+    	}
+    	if(!inputs.length){
+    	    inputs = new Array(inputs);        
+    	}
+    	for (var i = 0; i < inputs.length; i++) {
+    		if (inputs[i].type == 'checkbox' && arr.indexOf(inputs[i].className) > -1 ) {  
+				inputs[i].checked = flag;
+      		}
+    	}
 	}</script>";
 echo $script;
 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
-<script src="http://malsup.github.com/jquery.form.js"></script> 
-<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
-
+<script src="jquery-1.10.2.min.js"></script>
+<script src="jquery.form.js"></script>
+<script src="jquery-cookie-1.3.1/jquery.cookie.js"></script>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Circos Generator</title>
 <link href="rcircos.css" rel="stylesheet" type="text/css" />
-<script type="text/css">
-td {
-	border:1px solid #ddd;
-	white-space: nowrap;
+<script type="text/javascript">
+function cookieAjax() {
+	return 		$.ajax({
+		type: "POST",
+		url: "userSearch.php",
+		data: { key: get_cookie('rcircostoken')},
+	});
 }
-
-</script>
-</head>
-<body>
-<!--[IF IE]>
-    <script type="text/javascript">
-           <script>window.alert('WARNING Internet explorer does not support many of the features on this website, please consider upgrading your browser');</script>
-    </script>
-<![endif]-->
-<div id='delete_div'></div>
-<div align="center">
-<h1> Circos Plot Generator</h1> <a href="http://cran.r-project.org/web/packages/RCircos/index.html" target="_blank">A web interface for the RCircos r package</a><br>
-Questions? Comments? Contact peter.hansen.nih@gmail.com
-<br><a href="rcircos_workflow.html" target="_blank">Instructions</a>
-</div>
-<div id="user_div" name="user_div" align=center></div>
-<form id ="idForm" name="idForm" method="post" style="display: block" enctype="multipart/form-data">
-<table width="600" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
-  	<tr>
-    	<td width="1">&nbsp;</td>
-    	<td width="159">&nbsp;</td>
-    	<td width="184"><button type=button id="session" onclick="Javascript: startNewSession(); var dis = document.getElementById('session'); dis.style.display = 'none';">Start New Session</button></td>
-    	<td width="131">&nbsp;</td>
-    	<td width="7">&nbsp;</td>
-  	</tr>
-	<tr>
-		<td>&nbsp;</td>
-		<td><div align="right">
-				<strong>User ID:</strong>
-			</div>
-		</td>
-		<td><input name="userID" type="text" id="userID" onchange="Javascript: $('#username').val($('#userID').val());"><div id="ID"></div></td>
-		<td id="cookie"><button type='button' onclick='Javascript: saveCookie();'>Save as Cookie</button></td>
-	</tr>
- 			<tr><td>&nbsp;</td> <td colspan=8><div id="seed_div"></div> </td> </tr>
-			<tr>
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file1" id="file1" onchange="Javascript: dis=document.getElementById('track2row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
-			</tr>
-	 		<tr id="track2row" style="display: none">
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file2" id="file2" onchange="Javascript: dis=document.getElementById('track3row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
-			</tr>	
-	 	 	<tr id="track3row" style="display:none">
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file3" id="file3" onchange="Javascript: dis=document.getElementById('track4row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
-			</tr>	
-			
-			<!-- Track 4 data upload -->
-			<tr id="track4row" style="display: none">
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file4" id="file4" onchange="Javascript: dis=document.getElementById('track5row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
-			</tr>
-			<!-- Track 5 data upload -->
-			<tr id="track5row" style="display: none">
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file5" id="file5" onchange="Javascript: dis=document.getElementById('track6row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
-			</tr>
-			<tr id="track6row" style="display:none">
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file6" id="file6" onchange="Javascript: dis=document.getElementById('track7row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
-			</tr>
-			<tr  id="track7row" style="display:none">
-				<td>&nbsp;</td>
-				<td colspan=6 align="center"><input type="file" name="file7" id="file7">
-				<td>&nbsp;</td>
-			</tr>
-			<tr>
-		<td colspan=6 align=center><INPUT type="Submit" Name=Submit VALUE="Upload data" id="mySubmit"></td>
-		<tr> <td colspan=6 align=center>
-		<button type='button' id='start' style="display: none">Start</button>
-  </td>
-	</tr>
-</table>
-</form>
-
-<form id="circosForm" name="circosForm" method="post" action="rcircos_action.php" enctype="multipart/form-data" style="display: none">
-<table width="800" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
-  <tr>
-    <td width="1"><input name="username" type="hidden" id="username"></td>
-    <td width="159">&nbsp;</td>
-    <td width="184">&nbsp;</td>
-    <td width="80">&nbsp;</td>
-    <td width="7">&nbsp;</td>
-  </tr>
- <!-- 
- Species data input
-  -->
-			<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Species:</strong>
-					</div></td>
-				<td><select name='speciesName' id='speciesName' onchange="Javascript: changeSpecies()">
-						<option value="Human" selected='selected'>Human (hg19)</option>
-						<option value="Mouse">Mouse (mm9)</option>
-						<option value="Rat">Rat (rn4)</option>
-				</select></td>
-				<td><a href="rcircos_help.html" target="_blank">How to format your data</a> </td>
-				<td><button type="button" onclick="Javascript:document.getElementById('circos_div').innerHTML = '<img src=\'images/spinner2-greenie.gif\'   style=\'position:relative; left:0px;\' height=\'30\' width=\'30\' />'; window.setTimeout(function() { document.getElementById('circos_div').innerHTML = '<img src=\'images/example.png\' height=\'800\' width=\'800\' />'}, 15000);">Run Demo</button></td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-				</tr>
-	<!-- 
-	Gene label data upload
-	 -->
-				<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Gene Label Data:</strong><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#geneLabels')">?</a>
-					</div></td>
-				<td name="phGene">placeholder</td>
-				<td nowrap="nowrap"><div align="left">
-						<strong>Link Lines:</strong><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#tilePlots')">?</a>
-					</div>
-				</td>
-				<td name="phLink">placeholder</td>
-				</tr>
-<!-- 
-Track 1 data upload
- -->
- 				<tr>
- 				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Track 1:</strong>
-					</div></td>
-				<td nowrap="nowrap"><select name='trackType1' id='trackType1'  onchange="Javascript: trackDownload('1'); connectPlotType('1');">
-						<option value="NONE" >No track</option>
-						<option value="Heatmap" selected ='selected'>Heatmap</option>
-						<option value="Histogram">Histogram</option>
-						<option value="Line">Line Plot</option>
-						<option value="Scatter">Scatter Plot</option>
-						<option value="Tile">Tile Plot</option>
-				</select>
-				<div id="track1_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Heatmap')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleHeatmapData.txt">Download Data</a></div></td>
-				<td name="ph1">placeholder
-				</td>
-				<td align="center"></td>
-				</tr>
-	<!-- 
-	Track 2 data upload
-	 -->	
-	 			<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Track 2:</strong>
-					</div></td>
-				<td><select name='trackType2' id='trackType2' onchange="Javascript: trackDownload('2'); connectPlotType('2');">
-						<option value="NONE" >No track</option>
-						<option value="Heatmap">Heatmap</option>
-						<option value="Histogram" selected='selected'>Histogram</option>
-						<option value="Line">Line Plot</option>
-						<option value="Scatter">Scatter Plot</option>
-						<option value="Tile">Tile Plot</option>
-				</select>
-				&nbsp; <div id="track2_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Histogram')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleHistogramData.txt">Download Data</a></div>
-				</td>
-				
-				<td name="ph2">placeholder</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-			</tr>	
-	<!-- 
-	Track 3 data upload
-	 -->
-	 	 			<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Track 3:</strong>
-					</div></td>
-				<td><select name='trackType3' id='trackType3' onchange = "Javascript: trackDownload('3'); connectPlotType('3');">
-						<option value="NONE" >No track</option>
-						<option value="Heatmap">Heatmap</option>
-						<option value="Histogram">Histogram</option>
-						<option value="Line" selected='selected'>Line Plot</option>
-						<option value="Scatter">Scatter Plot</option>
-						<option value="Tile">Tile Plot</option>
-				</select>
-				<div id="track3_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Line')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleLineData.txt">Download Data</a></div>
-				</td>
-				<td name="ph3">placeholder</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-			</tr>	
-			
-			<!-- Track 4 data upload -->
-			<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Track 4:</strong>
-					</div></td>
-				<td><select name='trackType4' id='trackType4' onchange="Javascript: trackDownload('4'); connectPlotType('4');">
-						<option value="NONE" >No track</option>
-						<option value="Heatmap">Heatmap</option>
-						<option value="Histogram">Histogram</option>
-						<option value="Line">Line Plot</option>
-						<option value="Scatter" selected ='selected'>Scatter Plot</option>
-						<option value="Tile">Tile Plot</option>
-				</select>
-				<div id="track4_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Scatter')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleScatterData.txt">Download Data</a></div>
-				</td>
-				<td name="ph4">placeholder</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-			</tr>
-			<!-- Track 5 data upload -->
-			<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Track 5:</strong>
-					</div></td>
-				<td><select name='trackType5' id='trackType5' onchange="Javascript: trackDownload('5'); connectPlotType('5');">
-						<option value="NONE" >No track</option>
-						<option value="Heatmap" >Heatmap</option>
-						<option value="Histogram">Histogram</option>
-						<option value="Line">Line Plot</option>
-						<option value="Scatter">Scatter Plot</option>
-						<option value="Tile" selected ='selected'>Tile Plot</option>
-				</select>
-				<div id="track5_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Tile')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleTileData.txt">Download Data</a></div>
-				</td>
-				<td name="ph5">placeholder</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-			</tr>
-			<!-- 
-			Dimensions
-			 -->
-
-			<tr>
-				<td>&nbsp;</td>
-				<td><div align="right">
-						<strong>Width/Height(in):</strong>
-					</div>
-				</td>
-				<td><input name="width" type="text" id="width" value=6><br>
-				</td>
-				<td><div align="left">
-						<strong>Track Width:</strong> (*chr width) <input
-							name="trackHeight" type="text" id="trackHeight" value=1 onchange="Javascript: fixHeight()"><br>
-					</div>
-				</td>
-				<td id="history"></td>
-
-			</tr>
-			<!-- 
-	Link lines data upload
-	 -->
-			<tr>
-				<td>&nbsp;</td>
-				<td>&nbsp;</td>
-				<td><strong>File Type:</strong><select name='fileType' id='fileType'>
-						<option value="png" >png</option>
-						<option value="jpeg" >jpeg</option>
-						<option value="pdf">pdf</option>
-				</select>
-				 </td>
-				<td><a
-					onclick="Javascript:  var dis=document.getElementById('chrInclude'); im = document.getElementById('img_1'); if(dis.style.display == 'block'){ dis.style.display = 'none'; im.src='images/expand.gif'; } else { dis.style.display = 'block'; im.src='images/collapse.gif';};"
-					href="Javascript: void(0);"> Chr: Include <img id="img_1"
-						width="13" hspace="5" height="13" border="0" align="absmiddle"
-						name="img_1" src="images/expand.gif"></img>
-				</a>
-					<div id="chrInclude"
-						style="display: none; position: relative; left: 20px; border: thin none; background-color: rgb(238, 238, 238);">
-						<table>
-							<tbody>
-								<tr>
-									<td><input id="chrList[]" type="checkbox" value="chr1"
-										name="chrList[]" checked></input> Chr1</td>
-									<td><input id="chrList[]" type="checkbox" value="chr2"
-										name="chrList[]" checked></input> Chr2</td>
-									<td><input id="chrList[]" type="checkbox" value="chr3"
-										name="chrList[]" checked></input> Chr3</td>
-									<td><input id="chrList[]" type="checkbox" value="chr4"
-										name="chrList[]" checked></input> Chr4</td>
-									<td><input id="chrList[]" type="checkbox" value="chr5"
-										name="chrList[]" checked></input> Chr5</td>
-									<td><input id="chrList[]" type="checkbox" value="chr6"
-										name="chrList[]" checked></input> Chr6</td>
-									<td><input id="chrList[]" type="checkbox" value="chr7"
-										name="chrList[]" checked></input> Chr7</td>
-									<td><input id="chrList[]" type="checkbox" value="chr8"
-										name="chrList[]" checked></input> Chr8</td>
-								</tr>
-								<tr>
-									<td><input id="chrList[]" type="checkbox" value="chr9"
-										name="chrList[]" checked></input> Chr9</td>
-									<td><input id="chrList[]" type="checkbox" value="chr10"
-										name="chrList[]" checked></input> Chr10</td>
-									<td><input id="chrList[]" type="checkbox" value="chr11"
-										name="chrList[]" checked></input> Chr11</td>
-									<td><input id="chrList[]" type="checkbox" value="chr12"
-										name="chrList[]" checked></input> Chr12</td>
-									<td><input id="chrList[]" type="checkbox" value="chr13"
-										name="chrList[]" checked></input> Chr13</td>
-									<td><input id="chrList[]" type="checkbox" value="chr14"
-										name="chrList[]" checked></input> Chr14</td>
-									<td><input id="chrList[]" type="checkbox" value="chr15"
-										name="chrList[]" checked></input> Chr15</td>
-									<td><input id="chrList[]" type="checkbox" value="chr16"
-										name="chrList[]" checked></input> Chr16</td>
-								</tr>
-								<tr>
-									<td><input id="chrList[]" type="checkbox" value="chr17"
-										name="chrList[]" checked></input> Chr17</td>
-									<td><input id="chrList[]" type="checkbox" value="chr18"
-										name="chrList[]" checked></input> Chr18</td>
-									<td><input id="chrList[]" type="checkbox" value="chr19"
-										name="chrList[]" checked></input> Chr19</td>
-									<td id="Chr20"><input id="chrList[]" type="checkbox"
-										value="chr20" name="chrList[]" checked></input> Chr20</td>
-									<td id="Chr21"><input id="chrList[]" type="checkbox"
-										value="chr21" name="chrList[]" checked></input> Chr21</td>
-									<td id="Chr22"><input id="chrList[]" type="checkbox"
-										value="chr22" name="chrList[]" checked></input> Chr22</td>
-									<td><input id="chrList[]" type="checkbox" value="chrX"
-										name="chrList[]" checked></input> ChrX</td>
-									<td id="ChrY"><input id="chrList[]" type="checkbox"
-										value="chrY" name="chrList[]" checked></input> ChrY</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</td>
-
-				<td><div align="left">
-						<strong>Plot name:</strong>(without file extension)<input name="plotName" type="text" id="plotName" onchange="Javascript: fixName();"><br>
-					</div></td>
-				
-				<td>&nbsp;</td>
-			</tr>
-			<tr> <td colspan="6" align="center">
-			<INPUT type="Submit" Name=Submit VALUE="Start" id="mySubmit">
-          <input type="reset" value="Reset" onclick="Javascript: speciesReset()"/>        </td>
-    </tr>
-		</table>
-
-</form>
-<div id='circos_div' align='center'></div>
-<div id='stop_div'><a style="display:none">huehuehue</a></div>
-<script type="text/javascript">
-function cookieAjax() {
-	return 		$.ajax({
-		type: "POST",
-		url: "userSearch.php",
-		data: { key: get_cookie('rcircostoken')},
-	});
-}
-$(document).ready(function() {
-	// check if the user has a cookie and if they do use it as the ID
-	if(get_cookie('rcircostoken') != '') {
-		var promise = cookieAjax();
-		promise.success(function (data) {
-			$('#seed_div').html(data);
-		});
-	}
-	var deloptions = {
-			target:			'#delete_div',
-			url: 'delFiles.php',
-	};
-	/* when the user clicks the delete files button the form is submited to
-		a file which handles the server side deletions and hiding the
-		row elements that were deleted*/
-	$('#deleteFiles').click(function() {
-		$('#idForm').ajaxSubmit(deloptions);
-	});
-	/* when the user clicks the start button it hides the data upload form 
-		and displays the plot making form */
-	$('#start').click(function() {
-		start();
-		$('#idForm').css('display','none');
-		$('#circosForm').css('display', 'block');
-	});
-	var optionsinit = { 
-	        target:        '#seed_div',   // target element to be updated with server response 
-	        url: 'fileupload.php',
-	    }; 
-    /* when the user clicks the data upload button the form is submitted to
-    	a file which creates the appropriate files in the directory
-    	and creates the table showing the uploaded files */
-	$('#idForm').submit(function() { 
-		$('#start').css('display', 'inline');
-	    $(this).ajaxSubmit(optionsinit); 
-	    return false; 
-	});
-    var options = { 
-        target:        '#circos_div',   // target element to be updated with server response 
-    }; 
-    /* when the user clicks the start button on the second form the data is 
-    	submitted to a file which creates the plot and displays it underneath
-    	the form. While it is processing a spinner appears */
-    $('#circosForm').submit(function() {
-    	document.getElementById('circos_div').innerHTML = '<img src=\'images/spinner2-greenie.gif\'   style=\'position:relative; left:0px;\' height=\'30\' width=\'30\' />';
-        $(this).ajaxSubmit(options); 
-        return false; 
-    });
-}); 
+$(document).ready(function() {
+	// check if the user has a cookie and if they do use it as the ID
+	if(get_cookie('rcircostoken') != '') {
+		var promise = cookieAjax();
+		promise.success(function (data) {
+			$('#seed_div').html(data);
+		});
+	}
+	var deloptions = {
+			target:			'#delete_div',
+			url: 'delFiles.php',
+	};
+	/* when the user clicks the delete files button the form is submited to
+		a file which handles the server side deletions and hiding the
+		row elements that were deleted*/
+	$('#deleteFiles').click(function() {
+		$('#idForm').ajaxSubmit(deloptions);
+	});
+	/* when the user clicks the start button it hides the data upload form 
+		and displays the plot making form */
+	var optionsinit = { 
+	    target:        '#seed_div',   // target element to be updated with server response 
+	    url: 'fileupload.php',
+	}; 
+	$('#start').click(function() {
+		$('#idForm').ajaxSubmit(optionsinit);
+		$('#idForm').css('display','none');
+		$('#circosForm').css('display', 'block');
+	});
+    /* when the user clicks the data upload button the form is submitted to
+    	a file which creates the appropriate files in the directory
+    	and creates the table showing the uploaded files */
+	$('#idForm').submit(function() { 
+		$('#start').css('display', 'inline');
+	    $(this).ajaxSubmit(optionsinit); 
+		var control = $("#file1");
+		control.val("");
+	    control.replaceWith( control = control.clone( true ) );
+		var control2 = $("#file2");
+		control2.val("");
+	    control2.replaceWith( control2 = control2.clone( true ) );
+		var control3 = $("#file3");
+		control3.val("");
+	    control3.replaceWith( control3 = control3.clone( true ) );
+		var control4 = $("#file4");
+		control4.val("");
+	    control4.replaceWith( control4 = control4.clone( true ) );
+		var control5 = $("#file5");
+		control5.val("");
+	    control5.replaceWith( control5 = control5.clone( true ) );
+		var control6 = $("#file6");
+		control6.val("");
+	    control6.replaceWith( control6 = control6.clone( true ) );
+		var control7 = $("#file7");
+		control7.val("");
+	    control7.replaceWith( control7 = control7.clone( true ) );
+	    return false; 
+	});
+    var options = { 
+        target:        '#circos_div',   // target element to be updated with server response 
+    }; 
+    /* when the user clicks the start button on the second form the data is 
+    	submitted to a file which creates the plot and displays it underneath
+    	the form. While it is processing a spinner appears */
+    $('#circosForm').submit(function() {
+    	document.getElementById('circos_div').innerHTML = '<img src=\'images/spinner2-greenie.gif\'   style=\'position:relative; left:0px;\' height=\'30\' width=\'30\' />';
+        $(this).ajaxSubmit(options); 
+        return false; 
+    });
+}); 
 </script>
 <script type="text/javascript">
 /* a function to make handling cookies easier. It takes cookie info
  * and then creates a cookie based on that if it is valid as well as
  * converting the usual seconds into days
  */
-function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ) {
-	    // http://www.thesitewizard.com/javascripts/cookies.shtml
-	    var domain_string = valid_domain ?
-	                       ("; domain=" + valid_domain) : '' ;
-	    document.cookie = cookie_name +
-	                       "=" + encodeURIComponent( cookie_value ) +
-	                       "; max-age=" + 60 * 60 *
-	                       24 * lifespan_in_days +
-	                       "; path=/" + domain_string ;
-	}
+function set_cookie ( cookie_name, cookie_value, lifespan_in_days) {
+	$.cookie(cookie_name, cookie_value, {expires: lifespan_in_days});
+}
 /* a function to make handling cookies easier. It takes cookie info 
  * and returns any information stored as a cookie that matches that
  * info. If the cookies does not exits it returns an empty string 
  */
 function get_cookie ( cookie_name )
 {
-    // http://www.thesitewizard.com/javascripts/cookies.shtml
-    var cookie_string = document.cookie ;
-    if (cookie_string.length != 0) {
-        var cookie_value = cookie_string.match (
-                        '(^|;)[\s]*' +
-                        cookie_name +
-                        '=([^;]*)' );
-        return decodeURIComponent ( cookie_value[2] ) ;
-    }
-    return '' ;
+	return $.cookie(cookie_name);
 }
 /* a function to make handling cookies easier. It takes cookie info
- * and if that cookie exits it deletes it
+ * and if that cookie exists it deletes it
  */
-function delete_cookie ( cookie_name, valid_domain )
+function delete_cookie ( cookie_name )
 {
-    // http://www.thesitewizard.com/javascripts/cookies.shtml
-    var domain_string = valid_domain ?
-                       ("; domain=" + valid_domain) : '' ;
-    document.cookie = cookie_name +
-                       "=; max-age=0; path=/" + domain_string ;
+	$.removeCookie(cookie_name);
 }
 /* a function that takes the number of the track that needs to be changed
  * and then changes the download sample data link to the file that matches
 function startNewSession() { 
 	delete_cookie('rcircostoken');
 	$('#fileManager').css('display', 'none');
+	$('#step2').css('display', 'none');
+	$('#step3').css('display', 'none');
 	var chars = "1234567890abcdefghijklmnopqrstuvwxyz";
 	var token = "";
 	var c = 0;
  * the user returns to the site and takes away the textbox for id input.
  */
 function saveCookie() {
-	 var promise = saveCookieAjax();
+	var promise = saveCookieAjax();
 	promise.success(function (data) {
 		$('#circos_div').html(data);
 	});
 function jq( myid ) {
 	return myid.replace( /(:|\.|\[|\])/g, "\\$1" );
 }
+/*
+ * Check/uncheck all function
+ */
+function toggleCheckboxes() {
+	flag = $('#toggle:checked').val();
+    var form = document.getElementById('idForm');
+    var inputs = form.elements;
+    if(!inputs){
+        //console.log("no inputs found");
+        return;
+    }
+    if(!inputs.length){
+        //console.log("only one elements, forcing into an array");
+        inputs = new Array(inputs);        
+    }
+    for (var i = 0; i < inputs.length; i++) {
+      //console.log("checking input");
+      if (inputs[i].type == "checkbox" & inputs[i].id != 'toggle') {  
+        inputs[i].checked = flag;
+      }
+    }
+}
 </script>
+</head>
+<body>
+<!--[IF IE]>
+    <script type="text/javascript">
+           <script>window.alert('WARNING Internet explorer does not support many of the features on this website, please consider upgrading your browser');</script>
+    </script>
+<![endif]-->
+<div id='delete_div'></div>
+<div align="center">
+<h1> Circos Plot Generator</h1> <a href="http://cran.r-project.org/web/packages/RCircos/index.html" target="_blank">A web interface for the RCircos r package</a><br>
+Questions? Comments? Contact peter.hansen.nih@gmail.com
+<br><a href="rcircos_workflow.html" target="_blank">Instructions</a>
+</div>
+<div id="user_div" name="user_div" align=center></div>
+<form id ="idForm" name="idForm" method="post" style="display: block" enctype="multipart/form-data">
+<table width="600" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
+  	<tr> <td></td>
+  		<td colspan='6'><strong>Step 1: Select Session.</strong> If you already have a user ID enter it and select "Upload Data".</td>
+  	</tr>
+  	<tr>
+    	<td width="1">&nbsp;</td>
+    	<td width="159">&nbsp;</td>
+    	<td width="184"><button type=button id="session" onclick="Javascript: startNewSession(); var dis = document.getElementById('session'); dis.style.display = 'none';">Start New Session</button></td>
+    	<td width="131">&nbsp;</td>
+    	<td width="7">&nbsp;</td>
+  	</tr>
+	<tr>
+		<td>&nbsp;</td>
+		<td><div align="right">
+				<strong>User ID:</strong>
+			</div>
+		</td>
+		<td><input name="userID" type="text" id="userID" onchange="Javascript: $('#username').val($('#userID').val());"><div id="ID"></div></td>
+		<td id="cookie"><button type='button' onclick='Javascript: saveCookie();'>Save as Cookie</button></td>
+	</tr>
+ 			<tr><td>&nbsp;</td> <td></td> </tr>
+			<tr>
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" name="file1" id="file1" onchange="Javascript: dis=document.getElementById('track2row'); dis.style.display='table-row';">
+				<td>&nbsp;</td>
+			</tr>
+	 		<tr id="track2row" style="display: none">
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" value='' name="file2" id="file2" onchange="Javascript: dis=document.getElementById('track3row'); dis.style.display='table-row';">
+				<td>&nbsp;</td>
+			</tr>	
+	 	 	<tr id="track3row" style="display:none">
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" value='' name="file3" id="file3" onchange="Javascript: dis=document.getElementById('track4row'); dis.style.display='table-row';">
+				<td>&nbsp;</td>
+			</tr>	
+			
+			<!-- Track 4 data upload -->
+			<tr id="track4row" style="display: none">
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" name="file4" id="file4" onchange="Javascript: dis=document.getElementById('track5row'); dis.style.display='table-row';">
+				<td>&nbsp;</td>
+			</tr>
+			<!-- Track 5 data upload -->
+			<tr id="track5row" style="display: none">
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" name="file5" id="file5" onchange="Javascript: dis=document.getElementById('track6row'); dis.style.display='table-row';">
+				<td>&nbsp;</td>
+			</tr>
+			<tr id="track6row" style="display:none">
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" name="file6" id="file6" onchange="Javascript: dis=document.getElementById('track7row'); dis.style.display='table-row';">
+				<td>&nbsp;</td>
+			</tr>
+			<tr  id="track7row" style="display:none">
+				<td>&nbsp;</td>
+				<td colspan=6 align="center"><input type="file" name="file7" id="file7">
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+		<td colspan=6 align=center><INPUT type="Submit" Name=Submit VALUE="Upload data" id="mySubmit"></td></tr>
+		<tr id='step2' style='display:none;'><td></td><td colspan=8><strong>Step 2: Manage Files.</strong> Only checked files will be used by the program.</td></tr>
+		<tr><td></td><td colspan=8><div id="seed_div"></div></td></tr>
+		<tr id='step3' style='display:none;'><td></td><td colspan=8><strong>Step 3: Customize.</strong></td></tr>
+		<tr> <td colspan=6 align=center>
+		<button type='button' id='start' style="display: none">Start</button>
+  	</td>
+	</tr>
+</table>
+</form>
+
+<form id="circosForm" name="circosForm" method="post" action="rcircos_action.php" enctype="multipart/form-data" style="display: none">
+<table width="800" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
+  <tr>
+    <td width="1"><input name="username" type="hidden" id="username"></td>
+    <td width="159">&nbsp;</td>
+    <td width="184">&nbsp;</td>
+    <td width="80">&nbsp;</td>
+    <td width="7">&nbsp;</td>
+  </tr>
+  <tr><td colspan=8 align="center"><button type="button" onclick="Javascript: $('#idForm').css('display', 'inline'); $('#circosForm').css('display', 'none');">Upload More Files</button></td></tr>
+ <!-- 
+ Species data input
+  -->
+			<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Species:</strong>
+					</div></td>
+				<td><select name='speciesName' id='speciesName' onchange="Javascript: changeSpecies()">
+						<option value="Human" selected='selected'>Human (hg19)</option>
+						<option value="Mouse">Mouse (mm9)</option>
+						<option value="Rat">Rat (rn4)</option>
+				</select></td>
+				<td><a href="rcircos_help.html" target="_blank">How to format your data</a> </td>
+				<td><button type="button" onclick="Javascript:document.getElementById('circos_div').innerHTML = '<img src=\'images/spinner2-greenie.gif\'   style=\'position:relative; left:0px;\' height=\'30\' width=\'30\' />'; window.setTimeout(function() { document.getElementById('circos_div').innerHTML = '<img src=\'images/example.png\' height=\'800\' width=\'800\' />'}, 15000);">Run Demo</button></td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+				</tr>
+	<!-- 
+	Gene label data upload
+	 -->
+				<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Gene Label Data:</strong><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#geneLabels')">?</a>
+					</div></td>
+				<td name="phGene">placeholder</td>
+				<td nowrap="nowrap"><div align="left">
+						<strong>Link Lines:</strong><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#tilePlots')">?</a>
+					</div>
+				</td>
+				<td name="phLink">placeholder</td>
+				</tr>
+<!-- 
+Track 1 data upload
+ -->
+ 				<tr>
+ 				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Track 1:</strong>
+					</div></td>
+				<td nowrap="nowrap"><select name='trackType1' id='trackType1'  onchange="Javascript: trackDownload('1'); connectPlotType('1');">
+						<option value="NONE" >No track</option>
+						<option value="Heatmap" selected ='selected'>Heatmap</option>
+						<option value="Histogram">Histogram</option>
+						<option value="Line">Line Plot</option>
+						<option value="Scatter">Scatter Plot</option>
+						<option value="Tile">Tile Plot</option>
+				</select>
+				<div id="track1_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Heatmap')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleHeatmapData.txt">Download Data</a></div></td>
+				<td name="ph1">placeholder
+				</td>
+				<td align="center"></td>
+				</tr>
+	<!-- 
+	Track 2 data upload
+	 -->	
+	 			<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Track 2:</strong>
+					</div></td>
+				<td><select name='trackType2' id='trackType2' onchange="Javascript: trackDownload('2'); connectPlotType('2');">
+						<option value="NONE" >No track</option>
+						<option value="Heatmap">Heatmap</option>
+						<option value="Histogram" selected='selected'>Histogram</option>
+						<option value="Line">Line Plot</option>
+						<option value="Scatter">Scatter Plot</option>
+						<option value="Tile">Tile Plot</option>
+				</select>
+				&nbsp; <div id="track2_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Histogram')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleHistogramData.txt">Download Data</a></div>
+				</td>
+				
+				<td name="ph2">placeholder</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>	
+	<!-- 
+	Track 3 data upload
+	 -->
+	 	 			<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Track 3:</strong>
+					</div></td>
+				<td><select name='trackType3' id='trackType3' onchange = "Javascript: trackDownload('3'); connectPlotType('3');">
+						<option value="NONE" >No track</option>
+						<option value="Heatmap">Heatmap</option>
+						<option value="Histogram">Histogram</option>
+						<option value="Line" selected='selected'>Line Plot</option>
+						<option value="Scatter">Scatter Plot</option>
+						<option value="Tile">Tile Plot</option>
+				</select>
+				<div id="track3_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Line')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleLineData.txt">Download Data</a></div>
+				</td>
+				<td name="ph3">placeholder</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>	
+			
+			<!-- Track 4 data upload -->
+			<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Track 4:</strong>
+					</div></td>
+				<td><select name='trackType4' id='trackType4' onchange="Javascript: trackDownload('4'); connectPlotType('4');">
+						<option value="NONE" >No track</option>
+						<option value="Heatmap">Heatmap</option>
+						<option value="Histogram">Histogram</option>
+						<option value="Line">Line Plot</option>
+						<option value="Scatter" selected ='selected'>Scatter Plot</option>
+						<option value="Tile">Tile Plot</option>
+				</select>
+				<div id="track4_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Scatter')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleScatterData.txt">Download Data</a></div>
+				</td>
+				<td name="ph4">placeholder</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>
+			<!-- Track 5 data upload -->
+			<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Track 5:</strong>
+					</div></td>
+				<td><select name='trackType5' id='trackType5' onchange="Javascript: trackDownload('5'); connectPlotType('5');">
+						<option value="NONE" >No track</option>
+						<option value="Heatmap" >Heatmap</option>
+						<option value="Histogram">Histogram</option>
+						<option value="Line">Line Plot</option>
+						<option value="Scatter">Scatter Plot</option>
+						<option value="Tile" selected ='selected'>Tile Plot</option>
+				</select>
+				<div id="track5_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Tile')">?&nbsp;&nbsp;</a><a href="Sampledata/exampleTileData.txt">Download Data</a></div>
+				</td>
+				<td name="ph5">placeholder</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>
+			<!-- 
+			Dimensions
+			 -->
+
+			<tr>
+				<td>&nbsp;</td>
+				<td><div align="right">
+						<strong>Width/Height(in):</strong>
+					</div>
+				</td>
+				<td><input name="width" type="text" id="width" value=6><br>
+				</td>
+				<td><div align="left">
+						<strong>Track Width:</strong> (*chr width) <input
+							name="trackHeight" type="text" id="trackHeight" value=1 onchange="Javascript: fixHeight()"><br>
+					</div>
+				</td>
+				<td id="history"></td>
+
+			</tr>
+			<!-- 
+	Link lines data upload
+	 -->
+			<tr>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+				<td><strong>File Type:</strong><select name='fileType' id='fileType'>
+						<option value="png" >png</option>
+						<option value="jpeg" >jpeg</option>
+						<option value="pdf">pdf</option>
+				</select>
+				 </td>
+				<td><a
+					onclick="Javascript:  var dis=document.getElementById('chrInclude'); im = document.getElementById('img_1'); if(dis.style.display == 'block'){ dis.style.display = 'none'; im.src='images/expand.gif'; } else { dis.style.display = 'block'; im.src='images/collapse.gif';};"
+					href="Javascript: void(0);"> Chr: Include <img id="img_1"
+						width="13" hspace="5" height="13" border="0" align="absmiddle"
+						name="img_1" src="images/expand.gif"></img>
+				</a>
+					<div id="chrInclude"
+						style="display: none; position: relative; left: 20px; border: thin none; background-color: rgb(238, 238, 238);">
+						<table>
+							<tbody>
+								<tr>
+									<td><input id="chrList[]" type="checkbox" value="chr1"
+										name="chrList[]" checked></input> Chr1</td>
+									<td><input id="chrList[]" type="checkbox" value="chr2"
+										name="chrList[]" checked></input> Chr2</td>
+									<td><input id="chrList[]" type="checkbox" value="chr3"
+										name="chrList[]" checked></input> Chr3</td>
+									<td><input id="chrList[]" type="checkbox" value="chr4"
+										name="chrList[]" checked></input> Chr4</td>
+									<td><input id="chrList[]" type="checkbox" value="chr5"
+										name="chrList[]" checked></input> Chr5</td>
+									<td><input id="chrList[]" type="checkbox" value="chr6"
+										name="chrList[]" checked></input> Chr6</td>
+									<td><input id="chrList[]" type="checkbox" value="chr7"
+										name="chrList[]" checked></input> Chr7</td>
+									<td><input id="chrList[]" type="checkbox" value="chr8"
+										name="chrList[]" checked></input> Chr8</td>
+								</tr>
+								<tr>
+									<td><input id="chrList[]" type="checkbox" value="chr9"
+										name="chrList[]" checked></input> Chr9</td>
+									<td><input id="chrList[]" type="checkbox" value="chr10"
+										name="chrList[]" checked></input> Chr10</td>
+									<td><input id="chrList[]" type="checkbox" value="chr11"
+										name="chrList[]" checked></input> Chr11</td>
+									<td><input id="chrList[]" type="checkbox" value="chr12"
+										name="chrList[]" checked></input> Chr12</td>
+									<td><input id="chrList[]" type="checkbox" value="chr13"
+										name="chrList[]" checked></input> Chr13</td>
+									<td><input id="chrList[]" type="checkbox" value="chr14"
+										name="chrList[]" checked></input> Chr14</td>
+									<td><input id="chrList[]" type="checkbox" value="chr15"
+										name="chrList[]" checked></input> Chr15</td>
+									<td><input id="chrList[]" type="checkbox" value="chr16"
+										name="chrList[]" checked></input> Chr16</td>
+								</tr>
+								<tr>
+									<td><input id="chrList[]" type="checkbox" value="chr17"
+										name="chrList[]" checked></input> Chr17</td>
+									<td><input id="chrList[]" type="checkbox" value="chr18"
+										name="chrList[]" checked></input> Chr18</td>
+									<td><input id="chrList[]" type="checkbox" value="chr19"
+										name="chrList[]" checked></input> Chr19</td>
+									<td id="Chr20"><input id="chrList[]" type="checkbox"
+										value="chr20" name="chrList[]" checked></input> Chr20</td>
+									<td id="Chr21"><input id="chrList[]" type="checkbox"
+										value="chr21" name="chrList[]" checked></input> Chr21</td>
+									<td id="Chr22"><input id="chrList[]" type="checkbox"
+										value="chr22" name="chrList[]" checked></input> Chr22</td>
+									<td><input id="chrList[]" type="checkbox" value="chrX"
+										name="chrList[]" checked></input> ChrX</td>
+									<td id="ChrY"><input id="chrList[]" type="checkbox"
+										value="chrY" name="chrList[]" checked></input> ChrY</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</td>
+
+				<td><div align="left">
+						<strong>Plot name:</strong>(without file extension)<input name="plotName" type="text" id="plotName" onchange="Javascript: fixName();"><br>
+					</div></td>
+				
+				<td>&nbsp;</td>
+			</tr>
+			<tr> <td colspan="6" align="center">
+			<INPUT type="Submit" Name=Submit VALUE="Start" id="mySubmit">
+          <input type="reset" value="Reset" onclick="Javascript: speciesReset()"/>        </td>
+    </tr>
+		</table>
+
+</form>
+<div id='circos_div' align='center'></div>
+<div id='stop_div'><a style="display:none">huehuehue</a></div>
 </body>
 </html>

File rcircos_action.php

 $fileName = $_POST['plotName'];
 $date = getdate();
 if($fileName == '') {
-	$fileName = $date["mon"] . ":" . $date["mday"] . ":" . $date["hours"] .":".$date["minutes"].":" . $date["seconds"]; 
+	$fileName = $date["mon"] . "_" . $date["mday"] . "_" . $date["hours"] ."_".$date["minutes"]. "_" . $date["seconds"]; 
 }
 while(is_file("temp/$username/hist/$fileName.png") | is_file("temp/$username/hist/$fileName.pdf") | is_file("temp/$username/hist/$fileName.jpeg")) {
 	$fileName .= "1";