<?xml version="1.0"?>
<?xml-stylesheet href="mozdrawbindings.css" type="text/css"?>
<!DOCTYPE html [
  <!ATTLIST mozdraw:canvas id ID #IMPLIED>
]>
<!-- Copyright, etc 2005 doronr@us.ibm.com -->
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:mozdraw="http://www.nexgenmedia.net/mozdraw/1.0"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <title>Moz Draw</title>

  <style>
    @namespace mozdraw url("http://www.nexgenmedia.net/mozdraw/1.0");

    body {
      margin:0px;
    }

    input {
      border: 1px solid black;
      padding:3px;
    }

    .unselected {
      background-color:lightgrey;
      padding:3px;
      margin: 3px;
    }

    .selected {
      background-color:lightgrey;
      padding:3px;
      margin: 3px;
      border: 1px solid black;
    }

    .table-display {
      font-size: 0.8em;
    }

    mozdraw|elementContainerItem[selected="true"] {
      background-color:lightgrey;
    }
  </style>
  <script src="mozdraw.js"></script>
</head>

<body onload="mdInit()">

  <div style="background-color: lightblue; padding:2px; margin-bottom:10px;">
    Mozilla Draw (SVG/XBL Demo)
  </div>

  <div style="border: 1px solid black; padding:5px; margin:5px;">
    <span id="box-button" onclick="setNewElm('box', this);" class="unselected">Box</span>
    <span id="triangle-button" onclick="setNewElm('triangle', this);" class="unselected">Triangle</span>
  </div>

  <div style="float:right; width:300px; margin-right:10px; margin-left:10px;">
    <div style="margin-bottom: 30px; border: 1px solid black; padding:5px;  overflow:auto; min-height: 200px;">
      <div style="border-bottom:1px solid black;">Selection</div>
      <table width="100%" class="table-display">
        <tr id="sel-type-tr">
          <td>Type:</td>
          <td id="sel-type"></td>
        </tr>
        <tr id="sel-x-tr">
          <td>X:</td>
          <td id="sel-x"></td>
        </tr>
        <tr id="sel-y-tr">
          <td>Y:</td>
          <td id="sel-y"></td>
        </tr>
        <tr id="sel-width-tr">
          <td>width:</td>
          <td id="sel-width"></td>
        </tr>
        <tr id="sel-height-tr">
          <td>height:</td>
          <td id="sel-height"></td>
        </tr>
        <tr id="sel-color-tr">
          <td>Color:</td>
          <td><input onchange="gMozDraw.ui.changeColor(this.value)" id="sel-color"/></td>
        </tr>
        <tr id="sel-border-width-tr">
          <td>Border Width:</td>
          <td><input onchange="gMozDraw.ui.changeAttribute('border-width', this.value)" id="sel-border-width"/></td>
        </tr>
        <tr id="sel-border-color-tr">
          <td>Border Color:</td>
          <td><input onchange="gMozDraw.ui.changeAttribute('border-color', this.value)" id="sel-border-color"/></td>
        </tr>
      </table>
    </div>

    <div id="elementUI" style="overflow:auto; min-height: 200px; right:0px; bottom:0px; margin-bottom: 30px; border: 1px solid black; padding:5px;">
      <div style="border-bottom:1px solid black;">Elements</div>
    </div>
  </div>

  <div style="margin-left:10px;">
    <mozdraw:canvas id="root">
      <mozdraw:box x='5' y='5' width='100' height='100' style='fill:green'/>
      <mozdraw:box x='105' y='105' width='100' height='100' stroke="navy" stroke-width="10" style='fill:green;'/>
      <mozdraw:circle cx='300' cy='100' r="50" style='fill:blue'/>
      <mozdraw:triangle points="50,50 50,300 300,300" style='fill:blue'/>
    </mozdraw:canvas>
  </div>

  <div style="position:fixed;bottom:0px; width:80%;">
    <div show="false" onclick="expandDebug(this); return false;">
      <span style="margin-right:5px;" id="debugExpander">+</span>Debug Console
    </div>
    <div id="debug" style="-moz-opacity: 0.5; background-color:white; display:none; border: 1px solid black; overflow:-moz-scrollbars-vertical; width:100%; height:4em;"></div>
  </div>
</body>
</html>

