﻿<extension>
  <title>Reconstruction viewer</title>
  <description></description>
  <namespace>recon</namespace>
  <function>
    <name>view</name>
    <param name="urllink" type="str">the uri to link to </param>
    <param name="urltext" type="str">text to display for link</param>
    <param name="name" type="str">reaction name </param>
    <param name="formula" type="str">reaction formula</param>
    <param name="kegg" type="str">kegg id</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <head>
          <style type="text/css">
            #tmtipper {
            padding: 5px;
            width: 400px;
            }
          </style>
          <script>
            //<![CDATA[
            var cX = 0; var cY = 0; var rX = 0; var rY = 0;
            function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
            function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
            if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
            else { document.onmousemove = UpdateCursorPosition; }
            function AssignPosition(d) {
            if(self.pageYOffset) {
	            rX = self.pageXOffset;
	            rY = self.pageYOffset;
	            }
            else if(document.documentElement && document.documentElement.scrollTop) {
	            rX = document.documentElement.scrollLeft;
	            rY = document.documentElement.scrollTop;
	            }
            else if(document.body) {
	            rX = document.body.scrollLeft;
	            rY = document.body.scrollTop;
	            }
            if(document.all) {
	            cX += rX; 
	            cY += rY;
	            }
            d.style.left = (cX+10) + "px";
            d.style.top = (cY+10) + "px";
            }
            
            function hide_tooltip(divid){            
            document.getElementById(divid).style.display = "none";
            }
            function show_tooltip(event, divid){     
            var dd = document.getElementById(divid);
            AssignPosition(dd);
            dd.style.display = "block";
            dd.width = "50px";
            dd.style.padding = "2px";

            }
          // ]]>
          </script>

        </head>
        <body>
          <a eval:href="args.urllink" eval:onmouseover="'show_tooltip(event,\'' .. args.urltext .. '\');'" eval:onmouseout="'hide_tooltip(\''..args.urltext..'\');'">
            <eval:expr>args.urltext</eval:expr>
          </a>
          <div eval:id="args.urltext" style='display:none;position:absolute;border:0px solid black;background-color:#D8D8D8 '>
             
                <strong>Name:</strong><eval:expr>args.name</eval:expr>
              <br />
                <strong>Formula:</strong><eval:expr>args.formula</eval:expr>
              <br />
                <strong>KEGG:</strong>
                <eval:expr>args.kegg</eval:expr>
            </div>
        </body>
      </html>
    </return>
  </function>
</extension>


