<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Interdocument Communication Template - iframe</title>

   <style type="text/css">

      form, legend, button
      {
         font-family: Verdana, sans serif;
         font-weight: bold;
         color: #fff;
      }

      fieldset
      {
         color: #fff;
         border: solid #fff;
         width: 300px;
         padding: 10px;
      }
   </style>


   <script type='text/javascript'>
      var svgInstance = null;

      function Init()
      {
         var svgContent = document.getElementById( 'svgContent' );
         svgInstance = svgContent.contentWindow;
         if ( !svgInstance )
         {
            svgInstance = svgContent.window;
         }
      }

      function ToggleLayers( checkbox )
      {
         var value = checkbox.value;
         var checked = checkbox.checked;

         svgInstance.ToggleLayer( value, checked );
      }

      function Report( id, msg )
      {
         var inputEl = document.getElementById( id + '-output' );
         inputEl.value = msg;
      }



   </script>

</head>

<body bgcolor='#1b99c2' onload='Init()'>

   <form id='myForm' action='/' method='post' onsubmit='return false;'>
      <fieldset>
         <legend>Layers</legend>
         <input type='checkbox' id='layer1' value='layer1' onclick='ToggleLayers( this );' checked='true'/>
         <label for='layer1'>layer 1</label>
         <input type='text' id='layer1-output' />
         <br />
         
         <input type='checkbox' id='layer2' value='layer2' onclick='ToggleLayers( this );' checked='true'/>
         <label for='layer2'>layer 2</label>
         <input type='text' id='layer2-output' />
         <br />
         
         <input type='checkbox' id='layer3' value='layer3' onclick='ToggleLayers( this );' checked='true'/>
         <label for='layer3'>layer 3</label>
         <input type='text' id='layer3-output' />
         <br />
         
      </fieldset>
   </form>


   <iframe id='svgContent' name='svgContent' src='layers.svg' width='450' height='410' frameborder='0'>Please use FF1.5+, Opera 9+, or IE with an SVG plugin!</iframe>

</body>
</html>