Commits

Peter Hansen  committed bc856ab

Improved UI with implementation of tabs and modals

  • Participants
  • Parent commits 93897f9

Comments (0)

Files changed (638)

File fileupload.php

 	if(get_cookie('rcircostoken') != '') {
 		forgetCookie();
 	}
-	$('#start').css('display', 'none');";
+	$('#start').css('display', 'none');
+	$('#deleteFiles').css('display', 'none');";
 	exit;
 }
 $outDir="temp/" . $username ."/";
 			$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 PDF</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 "<td></td><td><a id='$images[$c]' class='$imgClass' onclick=\"Javascript: $('#historySelect').val('$images[$c]'); histUpdate();\" target='_blank'>Download PDF</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></td>
+				echo "<td></td><td><a id='$images[$c]' class='$imgClass' onclick=\"Javascript: $('#historySelect').val('$images[$c]'); histUpdate();\" 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>";
 			}
 		}
 			$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 PDF</a></td><td class='". $imgClass ."'><input id='$c' type='checkbox' value=$images[$c] name='delimgList[]' checked onchange='Javascript:toggleRelationCheckboxes($c)'></input></td></tr>";
+				echo "<tr height='70'><td></td><td></td><td></td><td></td><td></td><td><a id='$images[$c]' class='$imgClass' onclick=\"Javascript: $('#historySelect').val('$images[$c]'); histUpdate();\" target='_blank'>Download PDF</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><td class='". $imgClass ."'><input id='$c' type='checkbox' value=$images[$c] name='delimgList[]' checked onchange='Javascript:toggleRelationCheckboxes($c)'></input></td></tr>";
+				echo "<tr height='70'><td></td><td></td><td></td><td></td><td></td><td>" . "<a id='$images[$c]' class='$imgClass' onclick=\"Javascript: $('#historySelect').val('$images[$c]'); histUpdate();\" 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++;

File images/ui-icons_222222_256x240.png

Added
New image

File images/ui-icons_228ef1_256x240.png

Added
New image

File images/ui-icons_ef8c08_256x240.png

Added
New image

File images/ui-icons_ffd27a_256x240.png

Added
New image

File images/ui-icons_ffffff_256x240.png

Added
New image
 <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>
+<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.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">
+</script>
 <script type="text/javascript">
 function cookieAjax() {
 	return 		$.ajax({
 	});
 }
 $(document).ready(function() {
+	$('#tabs').tabs();
 	var optionsinit = {
 		    target:        '#seed_div',   // target element to be updated with server response 
 		    url: 'fileupload.php',
 		var promise = cookieAjax();
 		promise.success(function (data) {
 			$('#seed_div').html(data);
-			$('#start').css('display', 'inline');
-		    $('#idForm').ajaxSubmit(optionsinit);
+			if(data.substring(0, 9) == "<script>v") {
+				$('#start').css('display', 'inline');
+				$('#deleteFiles').css('display', 'inline');
+		    	$('#idForm').ajaxSubmit(optionsinit);
+			}
 		});
 	}
 	var deloptions = {
 		and displays the plot making form */
 	$('#start').click(function() {
 		$('#idForm').ajaxSubmit(optionsinit);
-		$('#idForm').css('display','none');
-		$('#circosForm').css('display', 'block');
+		$('#tabs').tabs('option', 'active', 1);
+//		$('#idForm').css('display','none');
+//		$('#circosForm').css('display', 'block');
+	});
+	$('#tab2').click(function() {
+		$('#idForm').ajaxSubmit(optionsinit);
 	});
     /* 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');
+		$('#deleteFiles').css('display', 'inline');
+		$('#circosForm').css('display', 'block');
 	    $(this).ajaxSubmit(optionsinit); 
 		var control = $("#file1");
 		control.val("");
     $('#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); 
+        $('#modal').dialog({ dialogClass: "no-close", modal: true});
+        $('#modal').dialog( "open" );
+        window.setTimeout(function() {
+        	$('#modal').dialog('close');
+        	$('#modal2').dialog( {modal:true});
+        	$('#modal2').dialog('open');
+        }, 5000);
         return false; 
     });
 }); 
 	var token = "";
 	var c = 0;
 	while(c <= 30) {
-		token = token.concat(chars.charAt(Math.random()*47));
+		token = token.concat(chars.charAt(Math.random()*40));
 		c++;
 	}
 	$.ajax({
 <![endif]-->
 <div id='delete_div'></div>
 <div align="center">
-<h1> Circos Plot Generator</h1> A web interface for <a href="http://cran.r-project.org/web/packages/RCircos/index.html" target="_blank">the RCircos r package</a><br><strong>
-<a onclick="Javascript: 	var optionsinit = {target: '#seed_div', url: 'fileupload.php',};  $('#idForm').ajaxSubmit(optionsinit);  $('#idForm').css('display', 'inline'); $('#circosForm').css('display', 'none');">File Manager</a> | <a href="rcircos_workflow.html" target="_blank"> Help</a> | <a href="rcircos_help.html" target="_blank">File Format</a> </strong></div>
+<h1> Circos Plot Generator</h1> A web interface for <a href="http://cran.r-project.org/web/packages/RCircos/index.html" target="_blank">the RCircos r package</a><br><strong></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 align='center'><tr><td>
+<div id='tabs'>
+  <ul>
+    <li><a href="#idForm_div"><span>File Manager</span></a></li>
+    <li><a id='tab2' href="#generator"><span>RCircos</span></a></li>
+    <li><a href="#workflow"><span>Workflow</span></a></li>
+    <li><a href="#help"><span>File Formatting</span></a></li>
+  </ul>
+<div id='workflow'><br>
+<table align="center"><tr align="left"><td>
+<h2>Step by step instructions</h2>
+<p><br>
+<p><strong>Step 1: Create Your Data</strong><br>Refer to the <a href="rcircos_help.html" target="_blank">formatting</a> page to see references to base your files off of and ensure that files match exactly the format presented <br> in the examples or the program might be unable to recognize how to use it. </p>
+<p><strong>Step 2: Upload Your Data</strong><br>Once you are confident that the data is formatted correctly load the <a href="rcircos.php" target="_blank">main page</a> and click the start new session button. If will <br> generate a filemanager that will handle all the files you upload and create and display the ID you will use to acces this account. <br>
+You now have the choice of either saving the ID as an encrypted cookie in your browser or keeping it stored somewhere else. <br> When you return to the site the ID will automatically be loaded for you, if there is no cookie it will require you to enter the one <br> you recieved when creating the session. Now select the files you want to upload and simply click the upload data button.
+<br></p><h5>WARNING: Several non numeric or alphabetic characters interfear with scripts running on this page. To make the process as smooth as <br>
+possible these characters will be removed from the file name and replaced with a capital R. If the replacement filename already exists the<br> old file will be overwritten</h5>
+<p><strong>Step 3: Select the Data You Want to Use</strong><br>If your data was formatted correctly it will automattically sort the files out and only give them as options for track types that <br> match their formatting. Under each track type there are links to formatting advice and to download <strong>(All downloads require a  <br>right click and selecting 'save link as')</strong> sample data. Once you have selected the data you want and made the specifications <br> necessary simply press start and it will begin making the plot.</p>
+</td></tr></table>
+</div>
+<div id='help'>
+<br>
+<table align="center"><tr align="left"><td>
+<h2>Data Format Examples for RCircos Web Application</h2>
+<p><br>
+  <h3>!!! Important !!! All data uploaded should be in tab delimited or comma separated format.<br> If the plot is not displaying correctly please make sure that the data <br> is formatted similar to the examples below</h3>
+  <br>
+  The first three columns of the data table, except for input to the link <br>
+  plot, must be genomic position information in the order of chromosome names, <br>
+  chromosome start, and chromosome end positions. <br> 
+  <br>
+  For gene labels and heatmap plots, the gene/probe names must be provided <br>
+  in the fourth column. For other plots, this column could be optional. <br>
+<p>Test Data: <a href="rcircos_test_data.zip">Download</a></p>
+<a name="geneLabels" id="geneLabels"></a>
+<p><strong>Gene Label Data</strong><br>
+</p>
+<table cellspacing="3" cellpadding="3">
+  
+  <tr>
+    <td>Chromosome </td>
+    <td>chromStart</td>
+    <td>chromEnd</td>
+    <td>Gene</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >8921418</td>
+    <td >8934967</td>
+    <td>ENO1</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >17345375</td>
+    <td >17380514</td>
+    <td>SDHB</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >27022894</td>
+    <td >27107247</td>
+    <td>ARID1A</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >41976121</td>
+    <td >42501596</td>
+    <td>HIVEP3</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >43803519</td>
+    <td >43818443</td>
+    <td>MPL</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >45794977</td>
+    <td >45805926</td>
+    <td>MUTYH</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >65300244</td>
+    <td >65351947</td>
+    <td>JAK1</td>
+  </tr>
+</table>
+<br>
+<a name="Heatmap" id="Heatmap"></a>
+<strong>Heatmap Data</strong> <br>
+<table cellspacing="3" cellpadding="3">
+  <col >
+  <col>
+  <col>
+  <col >
+  <col>
+  <col>
+  <col width="64">
+  <col width="56" span="3">
+  <tr>
+    <td >Chromosome</td>
+    <td>chromStart</td>
+    <td>chromEnd</td>
+    <td >GeneName</td>
+    <td>X786.O</td>
+    <td>A498</td>
+    <td width="64">A549.ATCC</td>
+    <td width="56">ACHN</td>
+    <td width="56">BT.549</td>
+    <td width="56">CAKI.1</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >934341</td>
+    <td >935552</td>
+    <td>HES4</td>
+    <td >6.75781</td>
+    <td >7.38773</td>
+    <td >6.4789</td>
+    <td >6.05517</td>
+    <td >8.85062</td>
+    <td >7.00307</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >948846</td>
+    <td >949919</td>
+    <td>ISG15</td>
+    <td >7.56297</td>
+    <td >10.4959</td>
+    <td >5.89893</td>
+    <td >7.58095</td>
+    <td >12.0847</td>
+    <td >7.81459</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >1138887</td>
+    <td >1142089</td>
+    <td>TNFRSF18</td>
+    <td >4.69775</td>
+    <td >4.55593</td>
+    <td >4.3897</td>
+    <td >4.50064</td>
+    <td >4.47525</td>
+    <td >4.47721</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >1270657</td>
+    <td >1284492</td>
+    <td>DVL1</td>
+    <td >7.76886</td>
+    <td >7.52194</td>
+    <td >6.87125</td>
+    <td >7.03517</td>
+    <td >7.65386</td>
+    <td >7.69733</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >1288070</td>
+    <td >1293915</td>
+    <td>MXRA8</td>
+    <td >4.49805</td>
+    <td >4.72032</td>
+    <td >4.62207</td>
+    <td >4.58575</td>
+    <td >5.66389</td>
+    <td >4.93499</td>
+  </tr>
+</table>
+<br>
+<a name="Histogram" id="Histogram"></a>
+<strong>Histogram Data</strong> <br>
+<table cellspacing="3" cellpadding="3">
+  <tr>
+    <td >Chromosome</td>
+    <td>chromStart</td>
+    <td colspan="2" width="167">chromEndData</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >45000000</td>
+    <td >49999999</td>
+    <td >0.070859</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >55000000</td>
+    <td >59999999</td>
+    <td >0.30046</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >60000000</td>
+    <td >64999999</td>
+    <td >0.125421</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >70000000</td>
+    <td >74999999</td>
+    <td >0.158156</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >75000000</td>
+    <td >79999999</td>
+    <td >0.16354</td>
+  </tr>
+</table>
+<br>
+<br>
+<a name="Line" id="Line"></a>
+<strong>Line Plot Data</strong> <br>
+<table cellspacing="3" cellpadding="3">
+  <tr>
+    <td >chromosome</td>
+    <td>start</td>
+    <td>stop</td>
+    <td >num.mark</td>
+    <td>seg.mean</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >61735</td>
+    <td >16895627</td>
+    <td >8732</td>
+    <td >0.1797</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >16896821</td>
+    <td >17212714</td>
+    <td >105</td>
+    <td >-0.2117</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >17214822</td>
+    <td >25574471</td>
+    <td >5321</td>
+    <td >0.1751</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >25574707</td>
+    <td >25662212</td>
+    <td >37</td>
+    <td >0.5064</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >25663310</td>
+    <td >30741496</td>
+    <td >2400</td>
+    <td >0.1384</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >30741656</td>
+    <td >30745210</td>
+    <td >3</td>
+    <td >-1.4742</td>
+  </tr>
+</table>
+<br>
+<br>
+<a name="Scatter" id="Scatter"></a>
+<strong>Scatter Plot Data</strong> <br>
+<table cellspacing="3" cellpadding="3">
+
+  <tr>
+    <td >chromosome</td>
+    <td>start</td>
+    <td>stop</td>
+    <td >num.mark</td>
+    <td>seg.mean</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >61735</td>
+    <td >228706</td>
+    <td >18</td>
+    <td >-0.4459</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >228729</td>
+    <td >356443</td>
+    <td >10</td>
+    <td >0.5624</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >356542</td>
+    <td >564621</td>
+    <td >4</td>
+    <td >-0.9035</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >603590</td>
+    <td >1704138</td>
+    <td >227</td>
+    <td >0.3545</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >1709023</td>
+    <td >1711414</td>
+    <td >6</td>
+    <td >1.2565</td>
+  </tr>
+  <tr>
+    <td >1</td>
+    <td >1714558</td>
+    <td >12862252</td>
+    <td >6276</td>
+    <td >0.4027</td>
+  </tr>
+</table>
+<br>
+<br>
+<a name="Tile" id="Tile"></a>
+<strong>Tile Plot Data</strong> <br>
+<table cellspacing="3" cellpadding="3">
+
+  <tr>
+    <td >Chromosome</td>
+    <td>chromStart</td>
+    <td>chromEnd</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >0</td>
+    <td >23900000</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >12700000</td>
+    <td >44100000</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >28000000</td>
+    <td >68900000</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >59000000</td>
+    <td >94700000</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >99700000</td>
+    <td >120600000</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >147000000</td>
+    <td >234700000</td>
+  </tr>
+</table>
+<br>
+<br>
+<a name="linkLines" id="linkLines"></a>
+<strong>Link Line Data</strong> <br>
+<table cellspacing="3" cellpadding="3">
+  <col >
+  <col>
+  <col>
+  <col >
+  <col>
+  <col>
+  <tr>
+    <td >Chromosome</td>
+    <td>chromStart</td>
+    <td>chromEnd</td>
+    <td >Chromosome.1</td>
+    <td>chromStart.1</td>
+    <td>chromEnd.1</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >8284703</td>
+    <td >8285399</td>
+    <td>chr1</td>
+    <td >8285752</td>
+    <td >8286389</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >85980143</td>
+    <td >85980624</td>
+    <td>chr7</td>
+    <td >123161313</td>
+    <td >123161687</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >118069850</td>
+    <td >118070319</td>
+    <td>chr1</td>
+    <td >118070329</td>
+    <td >118070689</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >167077258</td>
+    <td >167077658</td>
+    <td>chr1</td>
+    <td >169764630</td>
+    <td >169764965</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >171671272</td>
+    <td >171671550</td>
+    <td>chr1</td>
+    <td >179790879</td>
+    <td >179791292</td>
+  </tr>
+  <tr>
+    <td>chr1</td>
+    <td >174333479</td>
+    <td >174333875</td>
+    <td>chr6</td>
+    <td >101861516</td>
+    <td >101861840</td>
+  </tr>
+</table></td></tr></table>
+<br>
+<br></div>
+<div id='idForm_div'><form id ="idForm" name="idForm" method="post" style="display: block" enctype="multipart/form-data">
 <table width="700" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
   	  	<tr>
     	<td width="1">&nbsp;</td>
 		<tr id='step3' style='display:none;'>
 		  <td><strong>Selected Files:</strong></td><td colspan=8>&nbsp;</td></tr>
 		<tr> <td colspan=8 align=center>
-		<button type='button' id='start' style="display: none">Go RCircos</button><button id="deleteFiles" type="button" onclick="Javascript: var answer = confirm('Are you sure you want to delete the selected files?'); if(answer){ $('#idForm').ajaxSubmit({url:'delFiles.php', type:'post', target: '#delete_div'});} return false;">Delete</button>
+		<button type='button' id='start' style="display: none">Go RCircos</button><button id="deleteFiles" type="button" style="display:none" onclick="Javascript: var answer = confirm('Are you sure you want to delete the selected files?'); if(answer){ $('#idForm').ajaxSubmit({url:'delFiles.php', type:'post', target: '#delete_div'});} return false;">Delete</button>
   	</td>
 	</tr>
 </table>
-</form>
-
+</form></div>
+<div id='generator'>
 <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>
 						<option value="Mouse">Mouse (mm9)</option>
 						<option value="Rat">Rat (rn4)</option>
 				</select></td>
-				<td></td>
-				<td></td>
+				<td><a title='Providing your email address allows us to send a download link of your plot directly to you once it is done'><strong>Email Address:</strong></a></td>
+				<td><input id='email' name='email' type='text'></input></td>
 				<td>&nbsp;</td>
 				<td>&nbsp;</td>
 				</tr>
 							name="trackHeight" type="text" id="trackHeight" value=1 onchange="Javascript: fixHeight()"><br>
 					</div>
 				</td>
-				<td id="history"></td>
-
+				<td id='history'></td>
 			</tr>
 			<!-- 
 	Link lines data upload
 				<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">
           <a onclick="Javascript: 	var optionsinit = {target: '#seed_div', url: 'fileupload.php',};  $('#idForm').ajaxSubmit(optionsinit);  $('#idForm').css('display', 'inline'); $('#circosForm').css('display', 'none');">Upload Files</a> 
           
               </td>
-    </tr>
-		</table>
+</tr>
+</table>
 
 </form>
+</div>
 <div id='circos_div' align='center'></div>
+</div>
+</td></tr></table>
 <div id='stop_div'><a style="display:none">huehuehue</a></div>
-
+<div id='modal' style="display:none">We have begun generating your plot. If you proved an email we will send you a notification when it is complete. Please wait until this has finished before starting another one.</div>
+<div id='modal2' style="display:none">We have begun generating your plot. If you proved an email we will send you a notification when it is complete. Please wait until this has finished before starting another one.</div>
 <div align="center">
 Questions? Comments? Contact peter.hansen.nih@gmail.com
 </div>

File jquery-ui-1.10.3.custom/css/ui-lightness/images/animated-overlay.gif

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png

Added
New image

File jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css

+/*! jQuery UI - v1.10.3 - 2013-08-06
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-resizable {
+	position: relative;
+}
+.ui-resizable-handle {
+	position: absolute;
+	font-size: 0.1px;
+	display: block;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+	display: none;
+}
+.ui-resizable-n {
+	cursor: n-resize;
+	height: 7px;
+	width: 100%;
+	top: -5px;
+	left: 0;
+}
+.ui-resizable-s {
+	cursor: s-resize;
+	height: 7px;
+	width: 100%;
+	bottom: -5px;
+	left: 0;
+}
+.ui-resizable-e {
+	cursor: e-resize;
+	width: 7px;
+	right: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-w {
+	cursor: w-resize;
+	width: 7px;
+	left: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-se {
+	cursor: se-resize;
+	width: 12px;
+	height: 12px;
+	right: 1px;
+	bottom: 1px;
+}
+.ui-resizable-sw {
+	cursor: sw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	bottom: -5px;
+}
+.ui-resizable-nw {
+	cursor: nw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	top: -5px;
+}
+.ui-resizable-ne {
+	cursor: ne-resize;
+	width: 9px;
+	height: 9px;
+	right: -5px;
+	top: -5px;
+}
+.ui-selectable-helper {
+	position: absolute;
+	z-index: 100;
+	border: 1px dotted black;
+}
+.ui-accordion .ui-accordion-header {
+	display: block;
+	cursor: pointer;
+	position: relative;
+	margin-top: 2px;
+	padding: .5em .5em .5em .7em;
+	min-height: 0; /* support: IE7 */
+}
+.ui-accordion .ui-accordion-icons {
+	padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-noicons {
+	padding-left: .7em;
+}
+.ui-accordion .ui-accordion-icons .ui-accordion-icons {
+	padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
+	position: absolute;
+	left: .5em;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-accordion .ui-accordion-content {
+	padding: 1em 2.2em;
+	border-top: 0;
+	overflow: auto;
+}
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+.ui-button {
+	display: inline-block;
+	position: relative;
+	padding: 0;
+	line-height: normal;
+	margin-right: .1em;
+	cursor: pointer;
+	vertical-align: middle;
+	text-align: center;
+	overflow: visible; /* removes extra width in IE */
+}
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+	text-decoration: none;
+}
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+	width: 2.2em;
+}
+/* button elements seem to need a little more width */
+button.ui-button-icon-only {
+	width: 2.4em;
+}
+.ui-button-icons-only {
+	width: 3.4em;
+}
+button.ui-button-icons-only {
+	width: 3.7em;
+}
+
+/* button text element */
+.ui-button .ui-button-text {
+	display: block;
+	line-height: normal;
+}
+.ui-button-text-only .ui-button-text {
+	padding: .4em 1em;
+}
+.ui-button-icon-only .ui-button-text,
+.ui-button-icons-only .ui-button-text {
+	padding: .4em;
+	text-indent: -9999999px;
+}
+.ui-button-text-icon-primary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+	padding: .4em 1em .4em 2.1em;
+}
+.ui-button-text-icon-secondary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+	padding: .4em 2.1em .4em 1em;
+}
+.ui-button-text-icons .ui-button-text {
+	padding-left: 2.1em;
+	padding-right: 2.1em;
+}
+/* no icon support for input elements, provide padding by default */
+input.ui-button {
+	padding: .4em 1em;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+	position: absolute;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-button-icon-only .ui-icon {
+	left: 50%;
+	margin-left: -8px;
+}
+.ui-button-text-icon-primary .ui-button-icon-primary,
+.ui-button-text-icons .ui-button-icon-primary,
+.ui-button-icons-only .ui-button-icon-primary {
+	left: .5em;
+}
+.ui-button-text-icon-secondary .ui-button-icon-secondary,
+.ui-button-text-icons .ui-button-icon-secondary,
+.ui-button-icons-only .ui-button-icon-secondary {
+	right: .5em;
+}
+
+/* button sets */
+.ui-buttonset {
+	margin-right: 7px;
+}
+.ui-buttonset .ui-button {
+	margin-left: 0;
+	margin-right: -.3em;
+}
+
+/* workarounds */
+/* reset extra padding in Firefox, see h5bp.com/l */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;</