elson/Glow issue #40: example html

## Glow issue #40: example html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">

<head>

<title>Glow Panel and Mask with Context</title>


     <script type="text/javascript" src="http://www.bbc.co.uk/glow/gloader.js"></script>


    <!-- ** Path to local glow source -->

    <script type="text/javascript" src="http://noldev25.newsonline.tc.nca.bbc.co.uk:11020/projects/glow/trunk/loader/svnloader.js"></script>


    <script type="text/javascript">


    (function(){


        var glow;


        // ** Path to local glow source

        loadUnbuiltGlow(createGlowMap("http://noldev25.newsonline.tc.nca.bbc.co.uk:11020/projects/glow/trunk/"), {

            modules: ["glow", "glow.dom", "glow.data", "glow.embed", "glow.events", "glow.tweens", "glow.anim", "glow.widgets", "glow.widgets.Mask", "glow.widgets.Overlay", "glow.widgets.Panel", "glow.net"],

            onLoad: function(unbuiltGlow) {

              glow = unbuiltGlow;

              glow.ready( init );

            },

            loadMethod: 'gloaderSyncCallback'

        });


        function init() {


            var mask, panel, content;


            // Grab the image that will act as the context

            // for the mask and panel.

            var img = glow.dom.get("#context-image")[0];

            glow.events.addListener( img, "click",

                                    function() {

                                        if(mask && !panel) mask.add();

                                        if(panel) panel.show();

                                    });


            // Example 1: Create a mask that is restricted to the

            // context element given

            /*

            mask = new glow.widgets.Mask({

                    onClick: function() { this.remove(); },

                    context: img

                });

            mask.add();

            */


            // Example 2: Create a panel restricted to the context.

            // As 'modal' is true, the context is passed through

            // to the mask

            content = glow.dom.get("#context-panel");

            panel = new glow.widgets.Panel( content, {modal:true, context: img});

            panel.show();


            // Example 3: Define our own mask and pass to the Panel

            // The mask doesn't use the context that we pass through

            // with the Panel

            /*

            mask = new glow.widgets.Mask();

            content = glow.dom.get("#context-panel");

            panel = new glow.widgets.Panel( content, {modal:true , mask:mask, context: img});

            panel.show();

            */


        }


    })();


    </script>


    <style type="text/css">

        #container {

            position:relative;

            width: 600px;

            margin: 0 auto;

        }


      #context-image {

        position: absolute;

        top: 0;

        left: 120px;

      }


      #context-panel {

        font-size: 1em;

      }


      #context-panel p {

        padding-bottom: 0;

      }


      #left {

        position: absolute;

        top: 0;

        left: 0;


        width: 100px;

        height: 300px;

        display: block;

      }

    </style>


</head>

<body>


  <div id="container">


    <div id="left">

        <p>Here's some left hand content to push the panel away from the left of the window.</p>

        <p>Internet fraudsters sell complete financial identities for just £80, according to an online safety group.</p>

        <p>The details packaged and sold online include names, addresses, passport numbers and confidential financial data such as credit card numbers.</p>

        <p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

        <p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

        <p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

        <p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

        <p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

        <p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

    </div>


    <div style="display:none;">

        <div id="context-panel">

            <span class="hd">Lovely</span>

            <p>Some context for a panel</p>

            <p>Internet fraudsters sell complete financial identities for just £80, according to an online safety group.</p>

            <p>The details packaged and sold online include names, addresses, passport numbers and confidential financial data such as credit card numbers.</p>

            <p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

            <!--

            <p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

            <p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

            <p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

            <p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

            <p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

            -->

        </div>

    </div>


    <img src="image.jpg" alt="Armistice Map" style="border: 0px" id="context-image" width="466" height="440" />


  </div>


</body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">

	<head>

	<title>Glow Panel and Mask with Context</title>



	<script type="text/javascript" src="http://www.bbc.co.uk/glow/gloader.js"></script>



	<!-- ** Path to local glow source -->

	<script type="text/javascript" src="http://noldev25.newsonline.tc.nca.bbc.co.uk:11020/projects/glow/trunk/loader/svnloader.js"></script>



	<script type="text/javascript">



	(function(){



	var glow;



	// ** Path to local glow source

	loadUnbuiltGlow(createGlowMap("http://noldev25.newsonline.tc.nca.bbc.co.uk:11020/projects/glow/trunk/"), {

	modules: ["glow", "glow.dom", "glow.data", "glow.embed", "glow.events", "glow.tweens", "glow.anim", "glow.widgets", "glow.widgets.Mask", "glow.widgets.Overlay", "glow.widgets.Panel", "glow.net"],

	onLoad: function(unbuiltGlow) {

	glow = unbuiltGlow;

	glow.ready( init );

	},

	loadMethod: 'gloaderSyncCallback'

	});



	function init() {



	var mask, panel, content;



	// Grab the image that will act as the context

	// for the mask and panel.

	var img = glow.dom.get("#context-image")[0];

	glow.events.addListener( img, "click",

	function() {

	if(mask && !panel) mask.add();

	if(panel) panel.show();

	});



	// Example 1: Create a mask that is restricted to the

	// context element given

	/*

	mask = new glow.widgets.Mask({

	onClick: function() { this.remove(); },

	context: img

	});

	mask.add();

	*/



	// Example 2: Create a panel restricted to the context.

	// As 'modal' is true, the context is passed through

	// to the mask

	content = glow.dom.get("#context-panel");

	panel = new glow.widgets.Panel( content, {modal:true, context: img});

	panel.show();



	// Example 3: Define our own mask and pass to the Panel

	// The mask doesn't use the context that we pass through

	// with the Panel

	/*

	mask = new glow.widgets.Mask();

	content = glow.dom.get("#context-panel");

	panel = new glow.widgets.Panel( content, {modal:true , mask:mask, context: img});

	panel.show();

	*/



	}



	})();





	</script>



	<style type="text/css">

	#container {

	position:relative;

	width: 600px;

	margin: 0 auto;

	}



	#context-image {

	position: absolute;

	top: 0;

	left: 120px;

	}



	#context-panel {

	font-size: 1em;

	}



	#context-panel p {

	padding-bottom: 0;

	}



	#left {

	position: absolute;

	top: 0;

	left: 0;



	width: 100px;

	height: 300px;

	display: block;

	}

	</style>



	</head>

	<body>



	<div id="container">



	<div id="left">

	<p>Here's some left hand content to push the panel away from the left of the window.</p>

	<p>Internet fraudsters sell complete financial identities for just £80, according to an online safety group.</p>

	<p>The details packaged and sold online include names, addresses, passport numbers and confidential financial data such as credit card numbers.</p>

	<p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

	<p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

	<p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

	<p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

	<p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

	<p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

	</div>





	<div style="display:none;">

	<div id="context-panel">

	<span class="hd">Lovely</span>

	<p>Some context for a panel</p>

	<p>Internet fraudsters sell complete financial identities for just £80, according to an online safety group.</p>

	<p>The details packaged and sold online include names, addresses, passport numbers and confidential financial data such as credit card numbers.</p>

	<p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

	<!--

	<p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

	<p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

	<p>With six out of 10 people now managing finances online, experts say the public needs to do more to prevent e-crime.</p>

	<p>The figure comes in data released as part of a week highlighting ways to protect identities online.</p>

	<p>The Get Safe Online group, which is backed by police, government and banks, says ID theft is a serious problem because of an international trade in stolen identities and data.</p>

	-->

	</div>

	</div>



	<img src="image.jpg" alt="Armistice Map" style="border: 0px" id="context-image" width="466" height="440" />



	</div>



	</body>

	</html>