<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <title>SVG Bubble Menus</title>
    <style>
        h1,h2 { text-align:center; font-family: verdana, tahoma, sans serif; color:white; }
        li { font-family: verdana, tahoma, sans serif; color:white; }
        g text { font-family:Verdana,Tahoma; font-weight:bold; font-size:small; fill:white; stroke:none; text-anchor:middle; dominant-baseline:middle }
        g circle { stroke:white; stroke-width:8; fill:green }
    </style>
    <script type="text/javascript" src="bubblemenu.js"></script>
    <script>
    <![CDATA[
        // define our bubbles
        var bubbles = [
            {label:"Firefox", img:"http://www.mozilla.org/images/product-firefox.png", href:"http://www.mozilla.com/firefox/"},
            {label:"Thunderbird", img:"http://www.mozilla.org/images/product-thunderbird.png", href:"http://www.mozilla.com/thunderbird/"},
            {label:"Seamonkey", img:"http://www.mozilla.org/projects/seamonkey/images/project-seamonkey.png", href:"http://www.mozilla.com/seamonkey/"},
            {label:"Camino", img:"http://www.mozilla.org/images/product-camino.png", href:"http://www.mozilla.com/camino/"}
          ];

        function init() {
            setupBubbles([1.5, 1, 0.75]);
        }
    ]]>
    </script>
  </head>
  <body onload="init();" style="background-color:silver; margin:0;">
    <div style="padding-left:150px; padding-right:150px;">
        <div style="height:100px; background-color:grey;">
            <h1 id="title">SVG Bubble Menu Demo</h1>
        </div>
        <svg:svg id="svg" version="1.1" baseProfile="full" width="100%" height="250">
          <svg:rect x="0" y="0" width="100%" height="250" style="fill:lightblue"/>
        </svg:svg>
        <div style="height:500px; background-color:grey;">
            <h2>What's it do?</h2>
            <ul>
                <li>Grouped SVG elements</li>
                <li>Simple, animated SVG translation and scaling</li>
                <li>Interactive SVG elements</li>
            </ul>
        </div>
    </div>
</body>
</html>

