<!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>SVG Instance Test</title>

      <script type='text/javascript'>

         function CallInstance(instanceId)
         {
            var instanceEl = document.getElementById(instanceId);
            var instance = instanceEl.contentWindow;
            if ( !instance )
            {
               instance = instanceEl.window;
            }

            if ( instance )
            {
               instance.ReceiveCall( 'lime' );
            }
         }

         function ReportInstance( caller, newString )
         {
            var outputBox = document.getElementById( caller.name + 'Output');
            outputBox.value = newString;
         }

      </script>


</head>

<body bgcolor="#ffffff">

<div style='position:absolute; top:120px; left:20px; border:1px solid blue;'>
   <button id='frame1Input' onclick='CallInstance("frame1")'>Frame 1 Input</button>
   <br />
   <iframe id='frame1' name='frame1' src='instances.svg' height='100' width='100' frameborder='1'>
      Please use FF1.5, Opera 9, or IE with an SVG plugin!
   </iframe>
   <br />
   <label for='frame1Output'>Frame 1 Output:</label>
   <br />
   <input type='text' id='frame1Output' value=''>
</div>

<div style='position:absolute; top:120px; left:220px; border:1px solid blue;'>
   <button id='frame1Input' onclick='CallInstance("frame2")'>Frame 2 Input</button>
   <br />
   <iframe id='frame2' name='frame2' src='instances.svg' height='100' width='100' frameborder='1'>
      Please use FF1.5, Opera 9, or IE with an SVG plugin!
   </iframe>
   <!-- <object id='frame2' name='frame2' data='instances.svg' type='image/svg+xml' width='100' height='100'> </object> -->
   <br />
   <label for='frame2Output'>Frame 2 Output:</label>
   <br />
   <input type='text' id='frame2Output' value=''>
</div>

<p>
   This demonstrates how to call methods in discrete instances of the same iframe-embedded SVG file, and how to differentiate between those instances when methods in the parent HTML file are called from inside the SVG script. Click on the button to send a message to that instantiation of the SVG file, and click on the circle to send a message back to the parent HTML file.
</p>
</body>
</html>