<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">

<html>
<head>
<title>Chromosome Explorer v3.5</title>
<link rel="icon" type="image/ico" href="../../favicon.ico">
<link media="screen" type="text/css" rel="StyleSheet" href="../../includes/css/R.css">
<link media="screen" type="text/css" rel="StyleSheet" href="../../includes/css/rsp.css">
<link media="screen" type="text/css" rel="StyleSheet" href="../../includes/css/figures.css"> 
<link media="screen" type="text/css" rel="StyleSheet" href="../../includes/css/ChromosomeExplorer.css"> 
<script type="text/javascript" src="../../includes/js/require.js"></script>
</head>

<body onload="onPageLoad();">
<table width="100%" border="0" cellpadding="2" cellspacing="0" style="margin: 0px; border: none; border-bottom: 2px solid black;">
<tr valign="bottom">
<td align="left">
<big>Chromosome Explorer v3.5</big>
<small><small>(&copy; 2006-2013 Henrik Bengtsson)</small></small>
</td>
<td align="right">
 <span style="float:right; font-size:smaller;">
 <a href="http://www.aroma-project.org/">About</a>
 </span> 
<td align="right">
<div id="statusImage" style="float: right;">
 <img src="../../includes/images/indicator.gif" alt="Wait..." title="indicator">
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr valign="top">
<td align="left">
<span id="sampleLabel">?</span>
<small><span id="sampleTags"></span></small>
</td>
<td align="right">
<small>
<span id="zoomLabel">zooms?</span><br>
<span id="setLabel">sets?</span><br>
</small>
</td>
</tr>
<tr valign="bottom">
<td align="left" colspan="2">
<small>
<span id="chipTypeLabel"></span>
<span id="samplesLabel">?</span> 
&nbsp;
&nbsp;
Step:&nbsp;[<a href="javascript:explorer.gotoNextSample(-1);">prev</a>][<a href="javascript:explorer.gotoNextSample(+1);">next</a>]
&nbsp;
Play:&nbsp;[<a href="javascript:explorer.playAlongSamples('start');">start</a>][<a href="javascript:explorer.playAlongSamples('stop');">stop</a>]&nbsp;(<a href="javascript:explorer.playSlower();">slower</a>,<a href="javascript:explorer.playFaster();">faster</a>)
<br>
Chromosomes: <span id="chromosomes">?</span>
<br>
</small>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="border: solid 1px #000000;">
<tr>
 <td align="center" style="border: solid 1px #000000;">
 <small>Chr:</small><br>
 <div id="chromosomeLabel">?</div>
 </td>
 <td style="border: solid 1px #000000;">
  <div id="navigator">
   <img id="navigatorImage" src="../../includes/images/indicator.gif" alt="Navigator" title="Click">
   <div id="navigatorArea" title="Drag"></div>
  </div>
 </td>
</tr>
</table>

<div id="panelPanel">
 <span id="panelAxisY">
  <img id="yaxis" src="../images/yaxis.png" alt="">
 </span>
 <span id="panel">
  <div id="panelLocator"><div id="panelLocatorTag"></div></div>
  <img id="panelImage" src="../../includes/images/indicator.gif" alt="Panel" title="Drag">
 </span>
</div>

<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr valign="top">
<td align="left">
<small><small>
Identified regions: <a id="cnrUrl" href=""></a>
<!--
Shortcut to this location: <a id="bookmarkUrl" href=""></a>
-->
</small></small>
 </td>
<td align="right">
<small><small>
Image URL: <a id="imageUrl" href="" target="otherWindow"></a>
</small></small>
 </td>
</tr>
</table>
<div id="webcutsLabel" style="position:absolute; width:auto; height:auto; right:0px; top:0px; border: solid; border-width: 1px; border-color: black; background-color:lightgreen; font-size: x-small; visibility: hidden;"><small></small></div>
</body>
<script type="text/javascript">
var explorer = null;
function onPageLoad() {
  require.config({
    paths: {
      "Webcuts": "../../includes/js/Webcuts",
      "domUtils": "../../includes/js/domUtils",
      "ChromosomeExplorer": "../../includes/js/ChromosomeExplorer/ChromosomeExplorer",
      "setupExplorer": "setupExplorer"
    }
  });

  require(["Webcuts", "domUtils", "ChromosomeExplorer", "setupExplorer"],
  function(wc, du, ce, se) {
    // This function will be called when all the dependencies
    // listed above are loaded. Note that this function could
    // be called before the page is loaded.
    explorer = new ChromosomeExplorer();
    setupExplorer(explorer);
    explorer.start();

    explorer.setSample(0);
    explorer.setChromosome(0);
    explorer.setScale(0);
    explorer.setSet(0);

    window.onresize = function() {
      explorer.update();
    }
  });
}
</script>
</html>
