﻿<extension>
  <title>Domain GUI</title>
  <namespace>domain</namespace>

  <function>
    <name>viewer</name>
    <param name="domainvals" type="list">domain list</param>
    <param name="pdbdomainvals" type="list">pdb domain list</param>
    <param name="seqLength" type="int">sequence length</param>
    <param name="targetname" type="str">target page name</param>
    <param name="targetpath" type="str">target path</param>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <head>
          <script type='text/javascript' src='http://files.topsan.org/domainwidget/tablefxn.js'></script>
          <!--[if IE]><script src="excanvas.js"></script><![endif]-->
          <script type='text/javascript' src='http://files.topsan.org/domainwidget/canvasfxn.js'></script>
          <script type='text/javascript'>
            $(document).ready(function() {
              draw(<eval:js>args.seqLength</eval:js>);
            });
          </script>
        </head>
        <body>
          <canvas id="canvas" width="620" height="220" style="position:relative; left: 110px;"></canvas>
          <p style="font-style: italic; font-weight: bold;">Add a new domain:</p>
          <form action="#" id="domainform" method="get">
            <p>
              Domain Name:<input type="inputbox" id="name" style="width: 80px"/>
              Start:<input type="inputbox" id="start" style="width: 40px"/>
              End:<input type="inputbox" id="end" style="width: 40px" />
              <br/>
              Description:
              <br/>
              <textarea id="description" rows="3" cols="25" wrap="on"> </textarea>
              <p>
                <input type="button" value="Add" eval:onclick="'addRowToTable('..args.seqLength..', \''..args.targetname..'\', \''..args.targetpath..'\');'" />
              </p>
            </p>
            <p style="font-style: italic; font-weight: bold;">
              Annotated domains on <eval:expr>args.targetname</eval:expr>:
            </p>
            <table border="1" cellpadding="5px;" id="domainTbl">
              <tr>
                <td>Name</td>
                <td>Description</td>
                <td>Start</td>
                <td>End</td>
                <td>Source</td>
                <td></td>
              </tr>
              <eval:foreach var="x" in="args.domainvals">
                <tr id="rect">
                  <td id="domainname">
                    <eval:expr>x['domainName']</eval:expr>
                  </td>
                  <td id="descrp">
                    <eval:expr>x['descrp']</eval:expr>
                  </td>
                  <td id="start">
                    <eval:expr>x['start']</eval:expr>
                  </td>
                  <td id="end">
                    <eval:expr>x['end']</eval:expr>
                  </td>
                  <td id="source">
                    <eval:expr>x['source']</eval:expr>
                  </td>
                  <td>
                    <input type="button"  id="Row1" value="delete" eval:onclick="'removeRowFromTable(this,'..args.seqLength..',\''..args.targetname..'\');'" />
                  </td>
                </tr>
              </eval:foreach>
              <eval:foreach var="x" in="args.pdbdomainvals">
                <tr id="line">
                  <td id="domainname">
                    <eval:expr>x['pdbId']</eval:expr>
                  </td>
                  <td id="descrp"></td>
                  <td id="start">
                    <eval:expr>x['start']</eval:expr>
                  </td>
                  <td id="end">
                    <eval:expr>x['end']</eval:expr>
                  </td>
                  <td id="source">
                    PDB
                  </td>
                  <td>
                  </td>
                </tr>
              </eval:foreach>
            </table>
          </form>
        </body>
      </html>
    </return>
  </function>
</extension>



