merging new yui

www/extras/yui/examples/container/assets/get.php

@@ -0,0 +1,33 @@
+<?php
+
+print "data = { ";
+
+$index = 0;
+
+foreach($_GET as $key => $value) {
+	
+    print htmlspecialchars("$key:", ENT_QUOTES);
+    
+	if (gettype($value) == "array") {
+		print "[";
+		for ($i = 0;$i < count($_GET[$key]);$i++) { 
+		   $v = $_GET[$key][$i]; 
+		   print "\"$v\"";
+		   if ($i < count($_GET[$key])-1) {
+				print ",";
+		   }
+		} 
+		print "]";
+	} else {
+		print "\"$value\"";
+	}
+
+	$index++;
+
+	if ( ($index) < count($_GET) ) {
+		print ", ";
+	}
+}
+
+print " };";
+?> 

www/extras/yui/examples/container/assets/post.php

@@ -0,0 +1,25 @@
+<?php
+
+print "<strong>Submitted Data</strong>";
+print "<ul>";
+
+foreach($_POST as $key => $value) {
+  	print "<li>";
+	print htmlspecialchars("$key: ", ENT_QUOTES);
+
+	if (gettype($value) == "array") {
+		for ($i = 0;$i < count($_POST[$key]);$i++) { 
+		   $v = $_POST[$key][$i]; 
+		   print "$v";
+		   if ($i < count($_POST[$key])-1) {
+				print ", ";
+		   }
+		} 
+	} else {
+		print "$value";
+	}
+
+	print "</li>";
+}
+print "</ul>";
+?> 

www/extras/yui/examples/container/assets/somedata.php

@@ -0,0 +1,8 @@
+<?php
+
+print "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis faucibus laoreet lectus. Aliquam erat volutpat. Nulla faucibus ultrices justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi pulvinar pharetra ante. Duis gravida nisi id ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum fermentum odio. In hac habitasse platea dictumst. Mauris semper. Aliquam vitae urna. Duis metus. Phasellus pede nisi, vulputate et, volutpat at, suscipit nec, arcu.";
+
+print "Nam non est a diam faucibus porta. Donec velit nisl, nonummy et, auctor vel, sollicitudin nec, justo. Nulla elementum convallis leo. Vivamus diam ligula, elementum in, consequat eget, luctus nec, tortor. Curabitur sollicitudin nibh sed augue. Aliquam nulla est, tempus eget, vulputate non, consectetuer feugiat, lorem. Quisque in leo. Donec dolor leo, blandit sit amet, cursus et, vehicula nec, diam. Proin massa leo, cursus eget, blandit eget, nonummy in, dolor. Aliquam erat volutpat. Nunc fermentum. Morbi consectetuer.";
+
+sleep(3);
+?> 

www/extras/yui/examples/container/assets/style.css

@@ -0,0 +1,62 @@
+body { padding:0 }
+a {color:#0000de;} 
+a:visited {color:#639}
+a:active {color: #f00;}
+p {color:#000; margin-bottom:1em }
+
+strong { font-weight:bold }
+em { font-style:italic }
+
+#hd a#logo { display:block;margin:10px;width:378px; }
+#hd a#logo div { background:url(../assets/yui.gif) no-repeat;height:34px; }
+#hd h1 { font-weight:bold;text-indent:15px; background: url(http://us.i1.yimg.com/us.yimg.com/i/ydn/bg_hd.gif) 0 0 repeat-x #B6CDE1; border:1px solid #93B2CC; position:relative;font-size:110%;padding:5px 0;margin:0 auto;}
+#hd { margin-bottom:10px; }
+
+#toc { background-color:#ecf5fa; padding:0; border:1px solid #89d;overflow:hidden;zoom:1}
+#toc ul {list-style:none; margin:0; padding:0; font-size:90%;}
+#toc ul li { height:100%;padding:0;margin:0;*margin:0 0 -3px;*zoom:1; }
+
+#toc ul li a { margin:0;display:block;padding:5px 2px 5px 5px; text-decoration:none; }
+#toc ul li a:hover { color:#fff; background-color:#3c3cb7; }
+
+#toc ul li.selected { font-weight:bold; color:#fff; background:#666; padding:0; }
+#toc ul li.selected a { color:#fff; }
+#toc ul li.selected a:hover { font-weight:bold; color:#fff; background:#3c3cb7; }
+
+#toc ul li.child { background-color:#ddd }
+#toc ul li.child a { margin:0;display:block; padding:5px 2px 5px 20px; text-decoration:none; }
+
+#toc ul li.active { font-weight:bold; color:#000; }
+#toc ul li.active a { color:#000; }
+
+#toc ul li a.printer { padding:0;margin-right:2px;margin-top:-1.5em;display:none;float:right;height:12px;width:12px; }
+#toc ul li.selected a.printer { display:block;background:url(http://us.i1.yimg.com/us.yimg.com/i/us/aut/pltfrm/ic/print_12.gif) no-repeat;cursor:pointer;  }
+#toc ul li.selected a.printer:hover { background:url(http://us.i1.yimg.com/us.yimg.com/i/us/aut/pltfrm/ic/print_12.gif) no-repeat;cursor:pointer;  }
+
+#toc ul li em { display:none; }
+#toc ul li.sect { font-weight:bold; color:#fff; background:#ccc; }
+#toc ul li.sect a { color:#333 }
+#toc ul li.sect a:hover { color:#fff }
+
+#bd { margin-left:15px; }
+#bd .dp-highlighter { margin:10px 0 15px }
+#bd h1 { line-height:1.2em; color:#E76300; font-size:120%; margin:0 0 12px;}
+#bd h2 { line-height:1.2em; color:#E76300; font-size:110%; margin:0 0 10px;}
+
+#bd ul.properties { width:85%;margin:20px auto; }
+#bd ul.properties li { margin:1em 0; }
+
+#stepnav { font-size:100%; margin:25px 0 0 15px }
+#stepnav .back { margin-right:15px }
+
+#solution { margin-left:15px; }
+#solution a { display:block;margin-top:7px;margin-bottom:20px }
+#solution { zoom:1 }
+
+#ft { height:2px;line-height:2px;text-indent:15px; background:#B6CDE1;margin:10px auto;clear:both}
+
+#landing { margin-left:1em }
+#landing h3 { font-size:105%;margin-bottom:.5em }
+#landing p { margin-left:1em }
+
+.dp-highlighter { width:96% }

www/extras/yui/examples/container/container-effect_clean.html

@@ -0,0 +1,128 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Using ContainerEffect Transitions</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/animation/animation.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Using ContainerEffect Transitions</h1>
+
+<div class="exampleIntro">
+	<p>The Container Family of controls, including Overlay and all of its subclasses (Panel, Tooltip, Dialog, SimpleDialog), can implement built-in transition effects using the <code>effect</code> property and the ContainerEffect object.  This example demonstrates the fade and slide transitions provided with Container.</p>
+
+<p>Use the buttons below to show and hide Overlays, noting their transition treatmens as they appear and disappear.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+.yui-overlay { position:absolute;border:1px dotted black;padding:5px;margin:10px;background:#fff; }
+.yui-overlay .hd { border:1px solid red;padding:5px; }
+.yui-overlay .bd { border:1px solid green;padding:5px; }
+.yui-overlay .ft { border:1px solid blue;padding:5px; }
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	// Build overlay1 based on markup
+	YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", { xy:[350,100],
+																			  visible:false,
+																			  width:"300px",
+																			  zIndex:1000,
+																			  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
+	YAHOO.example.container.overlay1.render("example");
+
+	// Build overlay2 based on markup
+	YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[350,100],
+																			  visible:false,
+																			  width:"300px",
+																			  zIndex:1000,
+																			  effect:{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25} } );
+	YAHOO.example.container.overlay2.render("example");
+
+	// Build overlay3 based on markup
+	YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { xy:[350,100],
+																			  visible:false,
+																			  width:"300px",
+																			  zIndex:1000,
+																			  effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
+																					  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
+	YAHOO.example.container.overlay3.render("example");
+
+	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, YAHOO.example.container.overlay1, true);
+	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, YAHOO.example.container.overlay1, true);
+
+	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, YAHOO.example.container.overlay2, true);
+	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, YAHOO.example.container.overlay2, true);
+
+	YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
+	YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);
+
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+overlay1 (fade in):
+<button id="show1">Show</button>
+<button id="hide1">Hide</button>
+</div>
+<div>
+overlay2 (slide in):
+<button id="show2">Show</button>
+<button id="hide2">Hide</button>
+</div>
+<div>
+overlay3 (fade and slide):
+<button id="show3">Show</button>
+<button id="hide3">Hide</button>
+</div>
+
+<div id="overlay1" style="visibility:hidden;">
+<div class="hd">Overlay #1 from Markup</div>
+<div class="bd">This is a Overlay that was marked up in the document.</div>
+<div class="ft">End of Overlay #1</div>
+</div>
+
+<div id="overlay2" style="visibility:hidden;">
+<div class="hd">Overlay #2 from Markup</div>
+<div class="bd">This is a Overlay that was marked up in the document.</div>
+<div class="ft">End of Overlay #2</div>
+</div>
+
+<div id="overlay3" style="visibility:hidden;">
+<div class="hd">Overlay #3 from Markup</div>
+<div class="bd">This is a Overlay that was marked up in the document.</div>
+<div class="ft">End of Overlay #3</div>
+</div>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/dialog-quickstart_clean.html

@@ -0,0 +1,152 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Dialog Quickstart Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
+<script type="text/javascript" src="../../build/button/button.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Dialog Quickstart Example</h1>
+
+<div class="exampleIntro">
+	<p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page &mdash; whether interally to the page or by sending the information to the server via form post or XMLHttpRequest.  This example shows how to do the latter.  Click the button to show the Dialog instance and its form fields; fill out the form; submit the form.  Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+#example {height:30em;}
+label { display:block;float:left;width:45%;clear:left; }
+.clear { clear:both; }
+#resp { margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
+#resp li { font-family:monospace }
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	
+	// Define various event handlers for Dialog
+	var handleSubmit = function() {
+		this.submit();
+	};
+	var handleCancel = function() {
+		this.cancel();
+	};
+	var handleSuccess = function(o) {
+		var response = o.responseText;
+		response = response.split("<!")[0];
+		document.getElementById("resp").innerHTML = response;
+	};
+	var handleFailure = function(o) {
+		alert("Submission failed: " + o.status);
+	};
+
+	// Instantiate the Dialog
+	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
+							{ width : "30em",
+							  fixedcenter : true,
+							  visible : false, 
+							  constraintoviewport : true,
+							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
+								      { text:"Cancel", handler:handleCancel } ]
+							});
+
+	// Validate the entries in the form to require that both first and last name are entered
+	YAHOO.example.container.dialog1.validate = function() {
+		var data = this.getData();
+		if (data.firstname == "" || data.lastname == "") {
+			alert("Please enter your first and last names.");
+			return false;
+		} else {
+			return true;
+		}
+	};
+
+	// Wire up the success and failure handlers
+	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
+						     failure: handleFailure };
+	
+	// Render the Dialog
+	YAHOO.example.container.dialog1.render();
+
+	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
+	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+<button id="show">Show dialog1</button> 
+<button id="hide">Hide dialog1</button>
+</div>
+
+<div id="dialog1">
+<div class="hd">Please enter your information</div>
+<div class="bd">
+<form method="POST" action="assets/post.php">
+	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
+	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
+	<label for="email">E-mail:</label><input type="textbox" name="email" /> 
+
+	<label for="state[]">State:</label>
+	<select multiple name="state[]">
+		<option value="California">California</option>
+		<option value="New Jersey">New Jersey</option>
+		<option value="New York">New York</option>
+	</select> 
+
+	<div class="clear"></div>
+
+	<label for="radiobuttons">Radio buttons:</label>
+	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
+	<input type="radio" name="radiobuttons[]" value="2" /> 2
+	
+	<div class="clear"></div>
+
+	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
+	
+	<div class="clear"></div>
+		
+	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>
+
+	<div class="clear"></div>
+
+	<label for="cbarray">Multi checkbox:</label>
+	<input type="checkbox" name="cbarray[]" value="1" /> 1
+	<input type="checkbox" name="cbarray[]" value="2" /> 2
+</form>
+</div>
+</div>
+
+<div id="resp">Server response will be displayed in this area</div>	
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/keylistener_clean.html

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Implementing Container Keyboard Shortcuts with KeyListener</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Implementing Container Keyboard Shortcuts with KeyListener</h1>
+
+<div class="exampleIntro">
+	<p>The KeyListener class integrates with the Container family allowing you to specify specific keys or key combinations to show and hide your containers.</p>
+
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#example {height:20em;}
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	// Build panel1 based on markup
+	YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[350,330], width:"250px", visible: false } );
+	
+	var kl = new YAHOO.util.KeyListener(document, { keys:27 },  							
+												  { fn:YAHOO.example.container.panel1.hide,
+													scope:YAHOO.example.container.panel1,
+													correctScope:true }, "keyup" ); 
+													// keyup is used here because Safari won't recognize the ESC
+													// keydown event, which would normally be used by default
+
+	YAHOO.example.container.panel1.cfg.queueProperty("keylisteners", kl);
+	YAHOO.example.container.panel1.render();
+
+	var kl2 = new YAHOO.util.KeyListener(document, { ctrl:true, keys:89 }, 
+												   { fn:YAHOO.example.container.panel1.show, 
+													 scope:YAHOO.example.container.panel1,
+													 correctScope:true } );
+	
+	kl2.enable();
+
+	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+panel1: 
+<button id="show">Show (Ctrl+Y)</button> 
+<button id="hide">Hide (Esc)</button>
+</div>
+
+<div id="panel1" style="visibility:hidden">
+<div class="hd">KeyListener Example Panel</div>
+<div class="bd">Press [ESC] to dismiss this Panel.</div>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/module_clean.html

@@ -0,0 +1,92 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>The Module Control</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>The Module Control</h1>
+
+<div class="exampleIntro">
+	<p>This example looks at the "standard module format" used by many components in YUI to represent modular content on the page.  The Module Control is a JavaScript representation of a standard module, one that provides some basic plumbing for interacting with the head, body and foot sections of a standard module.  Convenience methods for showing, hinding and rendering the module are also included in the Module Control.</p>
+
+<p>You're most likely to use the Module Control when building a custom widget; its importance in the YUI Library is as a foundation rather than as a UI control in its own right.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style type="text/css">
+	.yui-module { border:1px dotted black;padding:5px;margin:10px; display:none; }
+	.yui-module .hd { border:1px solid red;padding:5px; }
+	.yui-module .bd { border:1px solid green;padding:5px; }
+	.yui-module .ft { border:1px solid blue;padding:5px; }
+</style>
+
+<script type="text/javascript">
+
+    YAHOO.namespace("example.container");
+
+    YAHOO.util.Event.onDOMReady(function () {
+
+        YAHOO.example.container.module1 = new YAHOO.widget.Module("module1", { visible: false });
+        YAHOO.example.container.module1.render();
+
+        YAHOO.example.container.module2 = new YAHOO.widget.Module("module2", { visible: false });
+        YAHOO.example.container.module2.setHeader("Module #2 from Script");
+        YAHOO.example.container.module2.setBody("This is a dynamically generated Module.");
+        YAHOO.example.container.module2.setFooter("End of Module #2");
+        YAHOO.example.container.module2.render();
+
+        YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.module1.show, YAHOO.example.container.module1, true);
+        YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.module1.hide, YAHOO.example.container.module1, true);
+
+        YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.module2.show, YAHOO.example.container.module2, true);
+        YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.module2.hide, YAHOO.example.container.module2, true);
+
+    });
+
+</script>
+
+<div>
+	<button id="show1">Show module1</button> 
+	<button id="hide1">Hide module1</button>
+</div>
+
+<div id="module1">
+	<div class="hd">Module #1 from Markup</div>
+	<div class="bd">This is a Module that was marked up in the document.</div>
+	<div class="ft">End of Module #1</div>
+</div>
+
+<div id="module2"></div>
+
+<div>
+	<button id="show2">Show module2</button> 
+	<button id="hide2">Hide module2</button>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/overlay_clean.html

@@ -0,0 +1,122 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Creating and Positioning an Overlay</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Creating and Positioning an Overlay</h1>
+
+<div class="exampleIntro">
+	<p>Overlays are extensions of Modules and differ in the sense that the float <em>above</em> the normal page flow.  They can be positioned in three different ways: By fixing them to the center of the viewport (overlay1 below), by specifying a position (overlay2), and by positioning them relative to a context element (overlay3).</p>
+
+<p>Use the buttons in the example below to show and hide the three Overlay instances.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	.yui-overlay { position:absolute;background:#fff;border:1px dotted black;padding:5px;margin:10px; }
+	.yui-overlay .hd { border:1px solid red;padding:5px; }
+	.yui-overlay .bd { border:1px solid green;padding:5px; }
+	.yui-overlay .ft { border:1px solid blue;padding:5px; }
+
+	#ctx { background:orange;width:100px;height:25px; }
+	
+	#example {height:15em;}
+</style>
+
+<script>
+		YAHOO.namespace("example.container");
+
+		function init() {
+			// Build overlay1 based on markup, initially hidden, fixed to the center of the viewport, and 300px wide
+			YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", { fixedcenter:true,
+																					  visible:false,
+																					  width:"300px" } );
+			YAHOO.example.container.overlay1.render();
+			YAHOO.log("Overlay1 rendered.", "info", "example");
+
+			// Build overlay2 dynamically, initially hidden, at position x:400,y:500, and 300px wide
+			YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[600,200],
+																					  visible:false,
+																					  width:"300px" } );
+			YAHOO.example.container.overlay2.setHeader("Overlay #2 from Script");
+			YAHOO.example.container.overlay2.setBody("This is a dynamically generated Overlay.");
+			YAHOO.example.container.overlay2.setFooter("End of Overlay #2");
+			YAHOO.example.container.overlay2.render(document.body);
+			YAHOO.log("Overlay2 rendered.", "info", "example");
+
+			// Build overlay3 dynamically, initially hidden, aligned to context element "context", and 200px wide
+			YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { context:["ctx","tl","bl"],
+																					  visible:false,
+																					  width:"200px" } );
+			YAHOO.example.container.overlay3.setHeader("Overlay #3 from Script");
+			YAHOO.example.container.overlay3.setBody("This is a dynamically generated Overlay.");
+			YAHOO.example.container.overlay3.setFooter("End of Overlay #3");
+			YAHOO.example.container.overlay3.render(document.body);
+			YAHOO.log("Overlay3 rendered.", "info", "example");
+
+			YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, YAHOO.example.container.overlay1, true);
+			YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, YAHOO.example.container.overlay1, true);
+
+			YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, YAHOO.example.container.overlay2, true);
+			YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, YAHOO.example.container.overlay2, true);
+
+			YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
+			YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);
+		}
+
+		YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+
+<div>
+	overlay1:
+	<button id="show1">Show</button>
+	<button id="hide1">Hide</button>
+</div>
+<div>
+	overlay2:
+	<button id="show2">Show</button>
+	<button id="hide2">Hide</button>
+</div>
+<div>
+	overlay3:
+	<button id="show3">Show</button>
+	<button id="hide3">Hide</button>
+</div>
+
+<div id="ctx">Align to me</div>
+
+<div id="overlay1" style="visibility:hidden">
+	<div class="hd">Overlay #1 from Markup</div>
+	<div class="bd">This is a Overlay that was marked up in the document.</div>
+	<div class="ft">End of Overlay #1</div>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/overlaymanager_clean.html

@@ -0,0 +1,153 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Using the Overlay Manager to Manage Multiple Panels</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Using the Overlay Manager to Manage Multiple Panels</h1>
+
+<div class="exampleIntro">
+	<p>OverlayManager allows you to manage multiple Overlays (and Overlay subclasses like Panel, Dialog, SimpleDialog and Tooltip) on the same page, giving focus and z-index supremacy to the focused overlay and providing you with event hooks to respond to focus and blur of your overlays with your own scripts.</p>
+
+<p>Use the buttons below to show and hide the overlays in this example's OverlayManager group.  Click within differnt overlays and drag them around to get a sense for how OverlayManager provides a light, operating-system-like feel to the interaction.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style type="text/css">
+
+.yui-skin-sam .yui-panel .hd {
+
+    background: #F2F2F2;
+    
+}
+
+.yui-skin-sam .yui-panel-container.focused .yui-panel .hd {
+
+    background: url(../../build/assets/skins/sam/sprite.png) repeat-x 0 -200px;
+
+}
+
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	// Build panel1 based on markup
+	YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[150,100],
+																		visible:false,
+																		width:"300px"
+																	  } );
+	YAHOO.example.container.panel1.render();
+
+	// Build panel2 based on markup
+	YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { xy:[250,200],
+																		visible:false,
+																		width:"300px"
+																	  } );
+	YAHOO.example.container.panel2.render();
+
+	// Build panel3 based on markup
+	YAHOO.example.container.panel3 = new YAHOO.widget.Panel("panel3", { xy:[350,300],
+																		visible:false,
+																		width:"300px"
+																	  } );
+	YAHOO.example.container.panel3.render();
+
+	YAHOO.example.container.manager = new YAHOO.widget.OverlayManager();
+	YAHOO.example.container.manager.register([YAHOO.example.container.panel1,
+											  YAHOO.example.container.panel2,
+											  YAHOO.example.container.panel3]);
+
+	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("focus1", "click", YAHOO.example.container.panel1.focus, YAHOO.example.container.panel1, true);
+
+	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
+	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
+	YAHOO.util.Event.addListener("focus2", "click", YAHOO.example.container.panel2.focus, YAHOO.example.container.panel2, true);
+
+	YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.panel3.show, YAHOO.example.container.panel3, true);
+	YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.panel3.hide, YAHOO.example.container.panel3, true);
+	YAHOO.util.Event.addListener("focus3", "click", YAHOO.example.container.panel3.focus, YAHOO.example.container.panel3, true);
+
+	YAHOO.util.Event.addListener("showAll", "click", YAHOO.example.container.manager.showAll, YAHOO.example.container.manager, true);
+	YAHOO.util.Event.addListener("hideAll", "click", YAHOO.example.container.manager.hideAll, YAHOO.example.container.manager, true);
+	YAHOO.util.Event.addListener("blurAll", "click", YAHOO.example.container.manager.blurAll, YAHOO.example.container.manager, true);
+}
+
+YAHOO.util.Event.onDOMReady(init);
+</script>
+
+<div>
+panel1:
+<button id="show1">Show</button>
+<button id="hide1">Hide</button>
+<button id="focus1">Focus</button>
+</div>
+<div>
+panel2:
+<button id="show2">Show</button>
+<button id="hide2">Hide</button>
+<button id="focus2">Focus</button>
+</div>
+<div>
+panel3:
+<button id="show3">Show</button>
+<button id="hide3">Hide</button>
+<button id="focus3">Focus</button>
+</div>
+<div>
+All Panels:
+<button id="showAll">Show All</button>
+<button id="hideAll">Hide All</button>
+<button id="blurAll">Blur All</button>
+</div>
+
+<div id="panel1" style="visibility:hidden">
+<div class="hd">Panel #1 from Markup</div>
+<div class="bd">This is a Panel that was marked up in the document.</div>
+<div class="ft">End of Panel #1</div>
+</div>
+
+<div id="panel2" style="visibility:hidden">
+<div class="hd">Panel #2 from Markup</div>
+<div class="bd">This is a Panel that was marked up in the document.</div>
+<div class="ft">End of Panel #2</div>
+</div>
+
+<div id="panel3" style="visibility:hidden">
+<div class="hd">Panel #3 from Markup</div>
+<div class="bd">This is a Panel that was marked up in the document.</div>
+<div class="ft">End of Panel #3</div>
+</div>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/panel-loading_clean.html

@@ -0,0 +1,105 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Creating a Modal "Loading" Panel</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Creating a Modal "Loading" Panel</h1>
+
+<div class="exampleIntro">
+	<p>A common use case for the Panel Control involves using it to display "please wait" text and images to indicate that the application is busy doing something.  As this page loads, a modal "please wait"-style Panel Control instance appears and the remainder of the page dims.  When the content for the container is loaded (consisting of lorem ipsum text), the panel and its modaliy mask fade away and the page returns to a normal interactive state.</p>
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div id="content"></div>
+
+<script type="text/javascript">
+
+    YAHOO.namespace("example.container");
+
+    function init() {
+
+        var content = document.getElementById("content");
+        
+        content.innerHTML = "";
+
+        if (!YAHOO.example.container.wait) {
+
+            // Initialize the temporary Panel to display while waiting for external content to load
+
+            YAHOO.example.container.wait = 
+                    new YAHOO.widget.Panel("wait",  
+                                                    { width: "240px", 
+                                                      fixedcenter: true, 
+                                                      close: false, 
+                                                      draggable: false, 
+                                                      zindex:4,
+                                                      modal: true,
+                                                      visible: false
+                                                    } 
+                                                );
+    
+            YAHOO.example.container.wait.setHeader("Loading, please wait...");
+            YAHOO.example.container.wait.setBody("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
+            YAHOO.example.container.wait.render(document.body);
+
+        }
+
+        // Define the callback object for Connection Manager that will set the body of our content area when the content has loaded
+
+
+
+        var callback = {
+            success : function(o) {
+                content.innerHTML = o.responseText;
+                content.style.visibility = "visible";
+                YAHOO.example.container.wait.hide();
+            },
+            failure : function(o) {
+                content.innerHTML = o.responseText;
+                content.style.visibility = "visible";
+                content.innerHTML = "CONNECTION FAILED!";
+                YAHOO.example.container.wait.hide();
+            }
+        }
+    
+        // Show the Panel
+        YAHOO.example.container.wait.show();
+        
+        // Connect to our data source and load the data
+        var conn = YAHOO.util.Connect.asyncRequest("GET", "assets/somedata.php?r=" + new Date().getTime(), callback);
+    }
+    
+    YAHOO.util.Event.on("panelbutton", "click", init);
+		
+</script>
+<button id="panelbutton">Show Panel</button>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/panel-resize_source.html

@@ -0,0 +1,181 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Creating a Resizable Panel</title>
+
+    <style type="text/css">
+    /*
+      margin and padding on body element
+      can introduce errors in determining
+      element position and are not recommended;
+      we turn them off as a foundation for YUI
+      CSS treatments. 
+    */
+    body {
+        margin:0;
+        padding:0;
+    }
+    </style>
+
+    <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+    <link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+    <link rel="stylesheet" type="text/css" href="../../build/resize/assets/skins/sam/resize.css" />
+    <script type="text/javascript" src="../../build/utilities/utilities.js"></script>
+    <script type="text/javascript" src="../../build/container/container.js"></script>
+    <script type="text/javascript" src="../../build/resize/resize-beta.js"></script>
+
+    <style type="text/css">
+    #examplecontainer {
+        padding:10px;
+    }
+
+    #resizablepanel .bd {
+        overflow:auto;
+        height:10em;
+        background-color:#fff;
+        padding:10px;
+    }
+
+    #resizablepanel .ft {
+        height:15px;
+        padding:0;
+    }
+
+    #resizablepanel .yui-resize-handle-br {
+        right:0;
+        bottom:0;
+        height: 8px;
+        width: 8px;
+        position:absolute;
+    }
+
+    /*  
+        The following CSS is added to prevent scrollbar bleedthrough on
+        Gecko browsers (e.g. Firefox) on MacOS.
+    */
+
+    /*
+        PLEASE NOTE: It is necessary to toggle the "overflow" property 
+        of the body element between "hidden" and "auto" in order to 
+        prevent the scrollbars from remaining visible after the the 
+        Resizable Panel is hidden.  For more information on this issue, 
+        read the comments in the "container-core.css" file.
+       
+        We use the #reziablepanel_c id based specifier, so that the rule
+        is specific enough to over-ride the .bd overflow rule above.
+    */
+
+    #resizablepanel_c.hide-scrollbars .yui-resize .bd {
+        overflow: hidden;
+    }
+
+    #resizablepanel_c.show-scrollbars .yui-resize .bd {
+        overflow: auto;
+    }
+
+    /*
+        PLEASE NOTE: It is necessary to set the "overflow" property of
+        the underlay element to "visible" in order for the 
+        scrollbars on the body of a Resizable Panel instance to be 
+        visible.  By default the "overflow" property of the underlay 
+        element is set to "auto" when a Panel is made visible on
+        Gecko for Mac OS X to prevent scrollbars from poking through
+        it on that browser + platform combintation.  For more 
+        information on this issue, read the comments in the 
+        "container-core.css" file.
+    */
+
+    #resizablepanel_c.show-scrollbars .underlay {
+        overflow: visible;
+    }
+    </style>
+
+    <script type="text/javascript">
+    YAHOO.util.Event.onDOMReady(
+
+        function() {
+
+            // Setup constants
+
+            // QUIRKS FLAG, FOR BOX MODEL
+            var IE_QUIRKS = (YAHOO.env.ua.ie && document.compatMode == "BackCompat");
+
+            // UNDERLAY/IFRAME SYNC REQUIRED
+            var IE_SYNC = (YAHOO.env.ua.ie == 6 || (YAHOO.env.ua.ie == 7 && IE_QUIRKS));
+
+            // PADDING USED FOR BODY ELEMENT (Hardcoded for example)
+            var PANEL_BODY_PADDING = (10*2) // 10px top/bottom padding applied to Panel body element. The top/bottom border width is 0
+
+            // Create a panel Instance, from the 'resizablepanel' DIV standard module markup
+            var panel = new YAHOO.widget.Panel('resizablepanel', {
+                draggable: true,
+                width: '500px',
+                context: ["showbtn", "tl", "bl"]
+            });
+            panel.render();
+
+            // Create Resize instance, binding it to the 'resizablepanel' DIV 
+            var resize = new YAHOO.util.Resize('resizablepanel', {
+                handles: ['br'],
+                autoRatio: false,
+                minWidth: 300,
+                minHeight: 100,
+                status: true
+            });
+
+            // Setup resize handler to update the size of the Panel's body element
+            // whenever the size of the 'resizablepanel' DIV changes
+            resize.on('resize', function(args) {
+
+                var panelHeight = args.height;
+
+                var headerHeight = this.header.offsetHeight; // Content + Padding + Border
+                var footerHeight = this.footer.offsetHeight; // Content + Padding + Border
+
+                var bodyHeight = (panelHeight - headerHeight - footerHeight);
+                var bodyContentHeight = (IE_QUIRKS) ? bodyHeight : bodyHeight - PANEL_BODY_PADDING;
+
+                YAHOO.util.Dom.setStyle(this.body, 'height', bodyContentHeight + 'px');
+
+                if (IE_SYNC) {
+
+                    // Keep the underlay and iframe size in sync.
+
+                    // You could also set the width property, to achieve the 
+                    // same results, if you wanted to keep the panel's internal
+                    // width property in sync with the DOM width. 
+
+                    this.sizeUnderlay();
+
+                    // Syncing the iframe can be expensive. Disable iframe if you
+                    // don't need it.
+
+                    this.syncIframe();
+                }
+            }, panel, true);
+
+            YAHOO.util.Event.on("showbtn", "click", panel.show, panel, true);
+        }
+    );
+    </script>
+</head>
+<body class=" yui-skin-sam">
+    <h1>Creating a Resizable Panel</h1>
+    <div class="exampleIntro">
+        <p>Operating systems offer windows that can be resized, often by dragging from the lower right-hand corner (and, on Microsoft Windows, from the window edges). This example of the Panel Control implements resizability by leveraging YAHOO.util.Resize to introduce a resize handle to the bottom-right corner of the footer. Resize events are listened for, and the size of the body element is modified to fill out the new dimensions of the Panel.</p>
+    </div>
+
+    <div id="examplecontainer">
+        <button id="showbtn">Show Resizable Panel</button>
+        <div id="resizablepanel">
+            <div class="hd">Resizable Panel</div>
+            <div class="bd">
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nulla. Fusce mauris massa, rutrum eu, imperdiet ut, placerat at, nunc. Vestibulum consequat ligula ut lacus. Nulla nec pede. Fusce consequat, augue et eleifend ornare, nibh mi dapibus lorem, ut lacinia turpis eros at eros. Proin laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla velit. Fusce id sem sit amet felis porta mollis. Aliquam erat volutpat. Etiam tortor. Donec dui felis, pretium quis, vulputate et, molestie non, nisi.</p>
+            </div>
+            <div class="ft"></div>
+        </div>
+    </div>
+</body>
+</html>
+

www/extras/yui/examples/container/panel_clean.html

@@ -0,0 +1,88 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Simple Panel Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Simple Panel Example</h1>
+
+<div class="exampleIntro">
+	<p>Use the show/hide buttons below to show and hide two simple panels.  The first panel is created based on markup on the page and its <code>draggable</code> configuration is set to <code>true</code>; it can be dragged around the screen.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#container {height:15em;}
+</style>
+
+<script>
+		YAHOO.namespace("example.container");
+
+		function init() {
+			// Instantiate a Panel from markup
+			YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"320px", visible:false, constraintoviewport:true } );
+			YAHOO.example.container.panel1.render();
+
+			// Instantiate a Panel from script
+			YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"320px", visible:false, draggable:false, close:false } );
+			YAHOO.example.container.panel2.setHeader("Panel #2 from Script &mdash; This Panel Isn't Draggable");
+			YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
+			YAHOO.example.container.panel2.setFooter("End of Panel #2");
+			YAHOO.example.container.panel2.render("container");
+
+			YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+			YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+
+			YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
+			YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
+		}
+
+		YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+<div id="container">
+	<div>
+		<button id="show1">Show panel1</button> 
+		<button id="hide1">Hide panel1</button>
+	</div>
+	
+	<div id="panel1">
+		<div class="hd">Panel #1 from Markup &mdash; This Panel is Draggable</div>
+		<div class="bd">This is a Panel that was marked up in the document.</div>
+		<div class="ft">End of Panel #1</div>
+	</div>
+	
+	<div>
+		<button id="show2">Show panel2</button> 
+		<button id="hide2">Hide panel2</button>
+	</div>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/panelskin1_clean.html

@@ -0,0 +1,85 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Skinning a Panel with Custom CSS: Introduction</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css" />
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" ">
+
+<h1>Skinning a Panel with Custom CSS: Introduction</h1>
+
+<div class="exampleIntro">
+	<p>In this example, custom CSS and images are applied to the appearance of a Panel instance to stylize it similar to a Mac OS X document window.  Use the buttons below to show and hide the Panel.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#example {height:20em;}
+
+	/* Aqua Panel Skin CSS */
+	#myPanel_c.yui-panel-container.shadow .underlay { background-color:#999; }
+	#myPanel.yui-panel { position:relative; border:none; overflow:visible; background-color:transparent; }
+
+	#myPanel.yui-panel .container-close { top:3px; left:4px; height:18px; width:17px; background-image:url(assets/img/aqua-hd-close.gif); }
+	#myPanel.yui-panel .container-close:hover { background-image:url(assets/img/aqua-hd-close-over.gif); }
+
+	#myPanel.yui-panel .hd { padding:0; border:none; background:transparent url(assets/img/aqua-hd-bg.gif); color:#000; height:22px; margin-left:7px; margin-right:7px; text-align:center; overflow:visible; }
+	#myPanel.yui-panel .hd span { vertical-align:middle; line-height:22px; }
+	#myPanel.yui-panel .hd .tl { width:7px; height:22px; top:0; left:0; background:transparent url(assets/img/aqua-hd-lt.gif); position:absolute; }
+	#myPanel.yui-panel .hd .tr { width:7px; height:22px; top:0; right:0; background:transparent url(assets/img/aqua-hd-rt.gif); position:absolute; }
+
+	#myPanel.yui-panel .bd { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; }
+	#myPanel.yui-panel .ft { font-size:75%; color:#666; padding:2px; overflow:hidden; border:1px solid #aeaeae; border-top:none; background-color:#dfdfdf; }
+</style>
+
+<script>
+		YAHOO.namespace("example.container");
+
+		function init() {
+			YAHOO.example.container.myPanel = new YAHOO.widget.Panel("myPanel", { width:"300px", visible:false, constraintoviewport:true, draggable:true } );
+			YAHOO.example.container.myPanel.render();
+		}
+
+		YAHOO.util.Event.onDOMReady(init);
+</script>
+
+
+<div id="myPanel">
+	<div class="hd"><div class="tl"></div><span>Panel from Markup</span><div class="tr"></div></div>
+	<div class="bd">This is a Panel that was marked up in the document.</div>
+	<div class="ft">End of Panel</div>
+</div>
+
+<div>
+	<button onclick="YAHOO.example.container.myPanel.show()">Show panel</button>
+	<button onclick="YAHOO.example.container.myPanel.hide()">Hide panel</button>
+</div>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/panelskin2_clean.html

@@ -0,0 +1,130 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Skinning a Panel with Custom CSS: Advanced</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css" />
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" ">
+
+<h1>Skinning a Panel with Custom CSS: Advanced</h1>
+
+<div class="exampleIntro">
+	<p>In this example, we move beyond the basic skinning steps demonstrated in <a href="panelskin1">the introductory skinning example</a> and show more advanced techniques with multiple styled Panel Control instances on the same page.  Use the buttons below to show and hide the styled panels.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#example {height:20em;}
+
+	/* XP Panel Skin CSS */
+	#panel1_c.yui-panel-container.shadow .underlay { background-color:#999; }
+
+	/* Apply the border to the right side */
+	#panel1.yui-panel { position:relative; border:none; overflow:visible; background:transparent url(assets/img/xp-brdr-rt.gif) no-repeat top right; }
+
+	/* Style the close icon */
+	#panel1.yui-panel .container-close { top:5px; right:8px; height:21px; width:21px; background-image:url(assets/img/xp-close.gif);}
+
+	/* Style the header with its associated corners */
+	#panel1.yui-panel .hd { padding:0; border:none; background:transparent url(assets/img/xp-hd.gif); color:#FFF; height:30px; margin-left:8px; margin-right:8px; text-align:left; vertical-align:middle; overflow:visible; }
+	#panel1.yui-panel .hd span { line-height:30px; vertical-align:middle; }
+	#panel1.yui-panel .hd .tl { width:8px;height:29px; top:1px;left:0; background:transparent url(assets/img/xp-tl.gif); position:absolute; }
+	#panel1.yui-panel .hd .tr { width:8px;height:29px; top:1px;right:0; background:transparent url(assets/img/xp-tr.gif); position:absolute; }
+
+	/* Style the body with the left border */
+	#panel1.yui-panel .bd { overflow:hidden; padding:10px; border:none; background:#FFF url(assets/img/xp-brdr-lt.gif) repeat-y; margin:0 4px 0 0; }
+
+	/* Style the footer with the bottom corner images */
+	#panel1.yui-panel .ft { background:transparent url(assets/img/xp-ft.gif); font-size:11px; height:26px; padding:0px 10px; }
+	#panel1.yui-panel .ft span { line-height:22px; vertical-align:middle; }
+	#panel1.yui-panel .ft .bl { width:8px;height:26px; bottom:0;left:0; background:transparent url(assets/img/xp-bl.gif); position:absolute; }
+	#panel1.yui-panel .ft .br { width:8px;height:26px; bottom:0;right:0; background:transparent url(assets/img/xp-br.gif); position:absolute; }
+
+	/* Aqua Panel Skin CSS */
+	#panel2_c.yui-panel-container.shadow .underlay { background-color:#999; }
+	#panel2.yui-panel { position:relative; border:none; overflow:visible; background-color:transparent; }
+
+	/* Apply styles to the close icon to anchor it to the left side of the header */
+	#panel2.yui-panel .container-close { top:3px; left:4px; height:18px; width:17px; background-image:url(assets/img/aqua-hd-close.gif);}
+	#panel2.yui-panel .container-close:hover { background-image:url(assets/img/aqua-hd-close-over.gif); }
+
+	/* Style the header and apply the rounded corners, center the text */
+	#panel2.yui-panel .hd { padding:0; border:none; background:transparent url(assets/img/aqua-hd-bg.gif); color:#000; height:22px; margin-left:7px; margin-right:7px; text-align:center; overflow:visible; }
+	#panel2.yui-panel .hd span { vertical-align:middle; line-height:22px; }
+	#panel2.yui-panel .hd .tl { width:7px; height:22px; top:0; left:0; background:transparent url(assets/img/aqua-hd-lt.gif); position:absolute; }
+	#panel2.yui-panel .hd .tr { width:7px; height:22px; top:0; right:0; background:transparent url(assets/img/aqua-hd-rt.gif); position:absolute; }
+
+	/* Style the body and footer */
+	#panel2.yui-panel .bd { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; }
+	#panel2.yui-panel .ft { font-size:75%; color:#666; padding:2px; overflow:hidden; border:1px solid #aeaeae; border-top:none; background-color:#dfdfdf; }
+</style>
+
+<div id="container"></div>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
+	YAHOO.example.container.panel1.render();
+
+	YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, constraintoviewport:true } );
+	YAHOO.example.container.panel2.setHeader("<div class='tl'></div><span>Panel #2 from Script</span><div class='tr'></div>");
+	YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
+	YAHOO.example.container.panel2.setFooter("<span>End of Panel #2</span>");
+	YAHOO.example.container.panel2.render("container");
+
+	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
+	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
+
+	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
+	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
+
+}
+
+YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+<div>
+	<button id="show1">Show panel1</button>
+	<button id="hide1">Hide panel1</button>
+</div>
+
+<div id="panel1">
+	<div class="hd"><div class="tl"></div><span>Panel #1 from Markup</span><div class="tr"></div></div>
+	<div class="bd">This is a Panel that was marked up in the document.</div>
+	<div class="ft"><div class="bl"></div><span>End of Panel #1</span><div class="br"></div></div>
+</div>
+
+<div>
+	<button id="show2">Show panel2</button>
+	<button id="hide2">Hide panel2</button>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/simpledialog-quickstart_clean.html

@@ -0,0 +1,93 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>SimpleDialog Quickstart Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/element/element-beta.js"></script>
+<script type="text/javascript" src="../../build/button/button.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>SimpleDialog Quickstart Example</h1>
+
+<div class="exampleIntro">
+	<p>Use the SimpleDialog Control when you want to solicit very simple (usually binary) information from your users &mdash; ok/cancel, yes/no are the classic examples of this sort of interaction.  Use the button below to show a SimpleDialog instance; if you click "yes", that choice will be echoed back to you by script.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+#container { height:12em; }
+</style>
+
+<script>
+YAHOO.namespace("example.container");
+
+function init() {
+	
+	// Define various event handlers for Dialog
+	var handleYes = function() {
+		alert("You clicked yes!");
+		this.hide();
+	};
+	var handleNo = function() {
+		this.hide();
+	};
+
+	// Instantiate the Dialog
+	YAHOO.example.container.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1", 
+																			 { width: "300px",
+																			   fixedcenter: true,
+																			   visible: false,
+																			   draggable: false,
+																			   close: true,
+																			   text: "Do you want to continue?",
+																			   icon: YAHOO.widget.SimpleDialog.ICON_HELP,
+																			   constraintoviewport: true,
+																			   buttons: [ { text:"Yes", handler:handleYes, isDefault:true },
+																						  { text:"No",  handler:handleNo } ]
+																			 } );
+	YAHOO.example.container.simpledialog1.setHeader("Are you sure?");
+	
+	// Render the Dialog
+	YAHOO.example.container.simpledialog1.render("container");
+
+	YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.simpledialog1.show, YAHOO.example.container.simpledialog1, true);
+	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.simpledialog1.hide, YAHOO.example.container.simpledialog1, true);
+
+}
+
+YAHOO.util.Event.addListener(window, "load", init);
+</script>
+
+
+<div id="container">
+<button id="show">Show simpledialog1</button> 
+<button id="hide">Hide simpledialog1</button>
+</div>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/tooltip-multi_clean.html

@@ -0,0 +1,182 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>One Tooltip, Many Context Elements</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+	.ttGroup {
+		float:left;
+		margin:10px;
+	}
+
+	.ttGroup .grphd  {
+		font-weight:bold;
+		background-color:#ccc;
+		border:1px solid #000;
+		padding:2px;
+	}
+
+	.ttGroup .grpbd {
+		padding:10px;
+	}
+
+	#ttGroupB:after {
+		content:".";
+		display:block;
+		clear:left;
+		visibilty:hidden
+	 	height:0;
+		width:0;	
+	}
+</style>
+
+<!--end custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>One Tooltip, Many Context Elements</h1>
+
+<div class="exampleIntro">
+	<p>In the example below, a single Tooltip instance is used to display tooltips for multiple context elements.</p>
+<ol>
+	<li>For one set of links <em>(Group A)</em>, the Tooltip text is provided by the title attribute of the link</li>
+	<li>For the other set <em>(Group B)</em>, we'll use context related events to set the text property
+	    just before the the tooltip is displayed for each link</li> 
+</ol>
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div class="ttGroup" id="ttGroupA">
+	<div class="grphd">Group A: Single Tooltip, text set using title</div>
+	<div class="grpbd" id="containerA"></div>
+</div>
+<div class="ttGroup" id="ttGroupB">
+	<div class="grphd">Group B: Single Tootip, text set using events</div>
+	<div class="grpbd" id="containerB"></div>
+</div>
+
+<script type="text/javascript">
+	YAHOO.namespace("example.container");
+
+	YAHOO.example.container.init = function() {
+
+		// CREATE LINKS FOR EXAMPLE
+
+		function createLink(i, container, title) {
+			var a = document.createElement("a");
+			a.href = "http://www.yahoo.com/";
+			a.innerHTML = i + ".  Hover over me to see my Tooltip";
+
+			if (title) {
+			    a.title = title;
+			}
+
+			container.appendChild(a);
+			container.appendChild(document.createElement("br"));
+			container.appendChild(document.createElement("br"));
+			return a;
+		}
+
+		function createTitledLinks() {
+			var ids = [];
+			var container = YAHOO.util.Dom.get("containerA");
+			for (var i = 1; i <= 5; i++) {
+				// NOTE: We're setting up titles for these links
+				var a = createLink(i, container, "Tooltip for link A" + i + ", set through title");
+				a.id = "A" + i;
+				ids.push(a.id);
+			}
+			return ids;
+		}
+
+		function createUntitledLinks() {
+			var ids = [];
+			var container = YAHOO.util.Dom.get("containerB");
+			for (var i = 1; i <= 5; i++) {
+
+				// NOTE: We're not setting up titles for these links
+				var a = createLink(i, container, null);
+				a.id = "B" + i;
+				ids.push(a.id);
+
+				// Change standard text for the 3rd link, to reflect
+				// that we'll disable the tooltip for it.
+				if ( i == 3 ) {
+					a.innerHTML = i + ". Tooltip display prevented";
+				} 
+			}
+			return ids;
+		}
+
+		var groupAIds = createTitledLinks();
+		var groupBIds = createUntitledLinks();
+
+		// TOOLTIP CODE
+
+		// For links in group A which all have titles, this is all we need.
+		// The tooltip text for each context element will be set from the title attribute
+
+		var ttA = new YAHOO.widget.Tooltip("ttA", { 
+			context:groupAIds
+		});
+
+		// For links in group B, we'll set the tooltip text dynamically, 
+		// right before the tooltip is triggered, using the id of the triggering context.
+		// We'll also prevent the tooltip from being displayed for link B3.
+
+		var ttB = new YAHOO.widget.Tooltip("ttB", { 
+			context:groupBIds
+		});
+
+		// Stop the tooltip from being displayed for link B3.
+		ttB.contextMouseOverEvent.subscribe(
+			function(type, args) {
+				var context = args[0];
+				if (context && context.id == "B3") {
+					return false;
+				} else {
+					return true;
+				}	
+			}
+		);
+
+		// Set the text for the tooltip just before we display it.
+		ttB.contextTriggerEvent.subscribe(
+			function(type, args) {
+				var context = args[0];
+				this.cfg.setProperty("text", "Tooltip for " + context.id + ", set using contextTriggerEvent");
+			}
+		);
+	};
+
+	YAHOO.util.Event.addListener(window, "load", YAHOO.example.container.init);
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/container/tooltip_clean.html

@@ -0,0 +1,56 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Simple Tooltip Example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/container/container.js"></script>
+
+<!--there is no custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Simple Tooltip Example</h1>
+
+<div class="exampleIntro">
+	<p>Hover over the orange box and the link to see their Tooltips.</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<style>
+	#ctx { background:orange;width:200px;height:200px; }
+</style>
+
+<p id="ctx">Hover over me to see a Tooltip!</p>
+
+<p><a id="link" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a></p>
+
+<script type="text/javascript">
+	YAHOO.namespace("example.container");
+	YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", { context:"ctx", text:"My text was set using the 'text' configuration property" });
+	YAHOO.example.container.tt1.beforeShowEvent.subscribe(function(){YAHOO.log("Tooltip one is appearing.","info","example");});
+	YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" });
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>