<html>
<!--
 Author: D. Menasce
 Mockup for the Pixel Tracker Map
-->

<meta http-equiv="pragma" 
      content   ="no-cache">

<head>
 <link   rel  = "stylesheet" 
         type = "text/css" 
	 href = "css_files/trace.css">
 <link   rel  = "stylesheet" 
         type = "text/css" 
	 href = "css_files/wz_dragdrop.css">
 <link   rel  = "stylesheet" 
         type = "text/css" 
	 href = "css_files/magnifier.css">
 <link   rel  = "stylesheet" 
         type = "text/css" 
	 href = "css_files/right.css">

 <script type = "text/javascript"
         src  = "WebLib.js">
 </script>
 <script type = "text/javascript"
         src  = "js_files/magnifier.js">
 </script>
 <script type = "text/javascript" 
         src  = "js_files/wz_dragdrop.js">
 </script>
 <script type = "text/javascript"
         src  = "js_files/DMLibrary.js">
 </script>
 <script type = "text/javascript"
         src  = "js_files/right.js">
 </script>

</head>
 
<body onload  = "RightFrame.initializeRightFrame()"
      bgcolor = "#414141">

 <center>
  <table id          = "pictTable"   
         border      = "1"
	 width       = "100%"	     
	 cellpadding = "1"	     
	 cellspacing = "1">	     
   <tr>
    <td align="center">
     <h3>Available MEs</h3>
    </td>
    <td align="center">
     <h3>TKMap color code generator</h3> 
    </td>
   </tr>
   
   <tr align="center">
    <td width="150">
     <iframe src	="rightEmbedded.html"	 
     	     id 	="superFrame"
     	     width	="290"
     	     height	="230"
     	     scrolling  ="auto" 
     	     frameborder="1"></iframe>
    </td>

    <td>
     <div   id          = "binding"
            name        = "binding0"> 			
      <img  id          = "baseImage0"			
            src         = "images/EmptyPlot.png" 
            name        = "baseImage0"			
	    alt         = "picture geometry:800x600"
	    onload      = "RightFrame.loading('binding0','baseImage0')"
	    onclick     = "RightFrame.transport(event)"			
	    onmouseover = "this.T_SHADOWWIDTH=4; 
	                   this.T_OPACITY    =70;
			   this.T_FONTCOLOR  ='#000000';
			   this.T_WIDTH      =320;
			   return escape('Click to send to pan/zoom area');"
 	    width       = "267"   			      
 	    height      = "200" />			      
     </div>
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <table border      = "0" 
            cellpadding = "2"	 
	    cellspacing = "1">	     
      <tr>
       <td>
     	<form name   = "MEListForm"
     	      action = "javascript:void()">
     	 <h3>MEs:
     	  <select id	   = "MEListCB"
     		  class    = "comboBox"
     		  name     = "MEListCB" 
     		  onchange = "RightFrame.movePlotTo()">
     	   <option   value = "-">-</option>
     	  </select>
     	 </h3>
     	</form>
       </td>
       <td>
     	<form	 action = "javascript:RightFrame.resizeToDefault()">
     	 <h3>
     	  <input  type   = "submit"
     	  	  class  = "button" 
     	  	  name   = "resizeToDefault"
	  	  value  = "Default size" />
     	 </h3>
     	</form>
       </td>
       <td>
        <form name   = "resizeByForm"
              action = "javascript:void()">
         <h3>Size:
          <select id	   = "resizeBy"
        	  class    = "comboBox"
        	  name     = "resizeBy" 
        	  onselect = "RightFrame.resizeByStep()"
        	  onchange = "RightFrame.resizeByStep()">
           <option          value = "0.5" >0.5  	</option>
           <option selected value = "1.0" >1.0  	</option>
           <option selected value = "1.5" >1.5  	</option>
           <option          value = "2.0" >2.0 (Optimal)</option>
           <option   	    value = "2.5" >2.5  	</option>
           <option   	    value = "3.0" >3.0  	</option>
           <option   	    value = "3.5" >3.5  	</option>
           <option   	    value = "4.0" >4.0  	</option>
          </select>
         </h3>
        </form>
       </td>
<!--
       <td>
     	<form	 action = "javascript:RightFrame.externalImage()">
     	 <input  type	= "submit"
     		 class  = "button" 
     		 name	= "externalImage"
		 value  = "External"></button>
     	</form>
       </td>
-->
      </tr>
     </table>
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <div   id     	= "zoomedImgDiv"				     
	    align       = "center"> 
      <img  id     	= "zoomedImg"					     
            name   	= "zoomedImg"	
	    alt         = "picture geometry:1600x1200"				     
	    src    	= "images/EmptyPlot.png"			     
 	    width    	= "400"   				       
 	    height   	= "300" />				       
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <img   id     	= "placeHolder"					     
            name   	= "placeHolder"					     
	    src    	= "images/EmptyPlot.png"			     
            onload      = "RightFrame.swapImage()"
 	    width    	= "0"   				       
 	    height   	= "0" />
    </td>				       
   </tr>
  </table>
 </center>

 <script type = "text/javascript" 
         src  = "js_files/wz_dragdrop.js">
 </script>
 <script type = "text/javascript">
  SET_DHTML(CURSOR_MOVE, RESIZABLE, TRANSPARENT, "zoomedImg");
 </script>

</body>

</html>
