upgraded to yui 0.12.0

upgraded to yui-ext 0.33 rc2

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

@@ -0,0 +1,32 @@
+<?php
+print "data = { ";
+
+$index = 0;
+
+foreach($_GET as $key => $value) {
+	
+	print "$key:";
+    
+	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,32 @@
+<?php
+print "data = { ";
+
+$index = 0;
+
+foreach($_POST as $key => $value) {
+	
+	print "$key:";
+    
+	if (gettype($value) == "array") {
+		print "[";
+		for ($i = 0;$i < count($_POST["$key"]);$i++) { 
+		   $v = $_POST["$key"][$i]; 
+		   print "\"$v\"";
+		   if ($i < count($_POST["$key"])-1) {
+				print ",";
+		   }
+		} 
+		print "]";
+	} else {
+		print "\"$value\"";
+	}
+
+	$index++;
+
+	if ( ($index) < count($_POST) ) {
+		print ", ";
+	}
+}
+
+print " };";
+?> 

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/dialog/1.html

@@ -0,0 +1,170 @@
+<!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>YUI Container - Dialog Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Dialog Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item selected"><a href="1.html">Dialog Quickstart</a></li>
+<li class="child active"><a href="1.html">Setting up the Dialog</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the Dialog</h1>
+
+								<p>The Dialog component is an extension of Panel that is meant to emulate the behavior of an dialog window using a floating, draggable HTML element. Dialog provides an interface for easily gathering information from the user without leaving the underlying page context. The information gathered is collected via a standard HTML form; Dialog supports the submission of form data  through XMLHttpRequest, through a normal form submission, or through a manual script-based response (where the script reads and responds to the form values and the form is never actually submitted to the server).</p>
+
+			<p>Instantiating a Dialog is very similar to other controls in the Container collection. In this tutorial, we will create a Dialog from existing markup where the container element's id is "dialog1":</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Instantiate the Dialog
+				YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
+																			{ width : "300px",
+																			  fixedcenter : true,
+																			  visible : false, 
+																			  constraintoviewport : true,
+																			  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
+																						  { text:"Cancel", handler:handleCancel } ]
+																			 } );
+			</textarea>
+
+			<p>The properties for <em>width</em>, <em>fixedcenter</em>, <em>visible</em>, and <em>constraintoviewport</em> are inherited from Panel. Unique to the Dialog control is the <em>buttons</em> property, which takes an array of object literals representing the buttons that will be rendered in the Dialog's footer. Each one of these button literals has three possible properties: "text" which represents the button text, "handler" which is a reference to the function that will execute when the button is clicked, and "isDefault" which will apply a bold style to the button when set to true.</p>
+
+			<p>Next, we must define the <em>handleCancel</em> and <em>handleSubmit</em> handlers for our buttons. In this tutorial, the submit and cancel buttons will call the corresponding functions in the Dialog:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Define various event handlers for Dialog
+				var handleSubmit = function() {
+					this.submit();
+				};
+				var handleCancel = function() {
+					this.cancel();
+				};
+			</textarea>
+
+			<p>By default, the Dialog is submitted using the <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a>. In order to handle the response from the server, we must define callback functions that will execute when the submission has occurred. First, we will define the functions, and then we will set them into our Dialog's <em>callback</em> &mdash; the same callback object that will be passed to  Connection Manager's <em>asyncRequest</em> method:</p>
+			
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				var handleSuccess = function(o) {
+					var response = o.responseText;
+					response = response.split("<!")[0];
+					document.getElementById("resp").innerHTML = response;
+					eval(response);
+				};
+
+				var handleFailure = function(o) {
+					alert("Submission failed: " + o.status);
+				};
+
+				YAHOO.example.container.dialog1.callback = { success: handleSuccess,
+															 failure: handleFailure };
+			</textarea>
+
+			<p>You can also take advantage of Dialog's built-in validation function so that you can verify that the values entered by the user are valid prior to form submission. In this tutorial, we will verify that the user has entered, at the very least, a first and last name. Using the <em>getData</em> function, we can easily query the values of the form fields. In a valid scenario, the function should return true, otherwise the function should return false, which will prevent the submission:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">		
+				// 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;
+					}
+				};
+			</textarea>
+
+			<p>Finally, we will build the markup for the Dialog. A Dialog contains a form whose fields will be submitted to the server. Note that the URL where the form will be submitted is specified in the "action" attribute of the form.</p>
+
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<div id="dialog1">
+					<div class="hd">Please enter your information</div>
+					<div class="bd">
+						<form method="POST" action="http://developer.yahoo.com/yui/examples/container/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
+							
+							<label for="textarea">Text area:</label>&lt;textarea name="textarea"&gt;&lt;/textarea&gt;
+
+								<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>
+			</textarea>
+
+
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/dialog/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Dialog Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Dialog Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item selected"><a href="1.html">Dialog Quickstart</a></li>
+<li class="child"><a href="1.html">Setting up the Dialog</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the Dialog</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/dialog/solution.html

@@ -0,0 +1,129 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js" ></script>
+		<script type="text/javascript" src="../../../build/connection/connection.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+			label { display:block;float:left;width:45%;clear:left; }
+			.clear { clear:both; }
+			#resp { font-family:courier;margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
+		</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;
+						eval(response);
+					};
+					var handleFailure = function(o) {
+						alert("Submission failed: " + o.status);
+					};
+
+					// Instantiate the Dialog
+					YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
+																				{ width : "300px",
+																				  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.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+		<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>
+	</body>
+</html>

www/extras/yui/examples/container/effect/1.html

@@ -0,0 +1,97 @@
+<!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>YUI Container - Using ContainerEffect (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Using ContainerEffect</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item selected"><a href="1.html">Using ContainerEffect</a></li>
+<li class="child active"><a href="1.html">Using the 'effect' Property</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Using the 'effect' Property</h1>
+
+			<p>The ContainerEffect class allows Overlay and its subclasses to be configured with transitional animations that are activated when an Overlay is shown or hidden. For instance, an Overlay can easily be  made to fade in and out, or slide in and out of the viewport when the visibility of the Overlay is changed. The <em>effect</em> property takes an object literal or an array of object literals which define two fields: the predefined effect to use, and the duration of the animation.</p>
+
+			<p>In this tutorial, we will create three Overlays and set them up to use the <em>effect</em> property in different ways. First, we will create a simple Overlay that fades in and out. The built-in ContainerEffect constant used for the fade animation is <em>YAHOO.widget.ContainerEffect.FADE</em>, so we will specify that as the "effect" property of our object literal. The duration should be 0.25 seconds, specified by the "duration" property of the literal:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.example.container.overlay1 = 
+					new YAHOO.widget.Overlay("overlay1", { xy:[150,100], 
+														   visible:false, 
+														   width:"300px",
+														   effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
+			</textarea>
+
+			<p>Our second Overlay shows how you can use  ContainerEffect's "SLIDE" constant. This Overlay looks exactly like the first one, but we will replace "FADE" with "SLIDE":</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.example.container.overlay2 = 
+					new YAHOO.widget.Overlay("overlay2", { xy:[250,200], 
+														   visible:false, 
+														   width:"300px",
+														   effect:{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25} } );
+			</textarea>
+
+			<p>Effects can also be specified as an array of transitions that will all execute simultaneously. For instance, an Overlay can be made to fade and slide in at the same time. When using the ContainerEffect class to configure your Overlay, chaining is not supported, so all animations will always execute at the same time. However, if you need to chain animations, the Animation utility allows you to do this using events. We will set up the third and final Overlay with an array of effects:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.example.container.overlay3 = 
+					new YAHOO.widget.Overlay("overlay3", { xy:[350,300], 
+														   visible:false, 
+														   width:"300px",
+														   effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
+																   {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/effect/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Using ContainerEffect (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Using ContainerEffect</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item selected"><a href="1.html">Using ContainerEffect</a></li>
+<li class="child"><a href="1.html">Using the 'effect' Property</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:450px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Using the 'effect' Property</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/effect/solution.html

@@ -0,0 +1,98 @@
+<!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">
+		
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/animation/animation.js"></script>
+
+		<script type="text/javascript" src="../../../build/container/container_core.js"></script>
+		
+		<style>
+			.overlay { position:absolute;border:1px dotted black;padding:5px;margin:10px;background:#fff; }
+			.overlay .hd { border:1px solid red;padding:5px; }
+			.overlay .bd { border:1px solid green;padding:5px; }
+			.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:[150,100], 
+																							  visible:false, 
+																							  width:"300px",
+																							  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
+					YAHOO.example.container.overlay1.render();
+
+					// Build overlay2 based on markup
+					YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[250,200], 
+																							  visible:false, 
+																							  width:"300px",
+																							  effect:{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25} } );
+					YAHOO.example.container.overlay2.render();
+
+					// Build overlay3 based on markup
+					YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { xy:[350,300], 
+																							  visible:false, 
+																							  width:"300px",
+																							  effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
+																									  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
+					YAHOO.example.container.overlay3.render();
+				
+					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>
+
+	</head>
+	<body>
+
+		<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="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>
+
+	</body>
+</html>

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

@@ -0,0 +1,111 @@
+<!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>YUI Container - Tutorials (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Tutorials</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="#">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">YUI Container Interactive Tutorials</h1>
+
+					
+			<p>The YUI Calendar Tutorials will provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.</p>
+
+
+<div id="landing">
+	<h3><a href="module/1.html">Module: Quickstart</a></h3>
+	<p>Quickly get up and running with the most basic Modules.</p>
+
+		<h3><a href="overlay/1.html">Overlay: Quickstart</a></h3>
+	<p>Create an position a simple Overlay.</p>
+
+		<h3><a href="tooltip/1.html">Tooltip: Quickstart</a></h3>
+	<p>Create several Tooltips associated with different types of elements.</p>
+
+		<h3><a href="tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></h3>
+	<p>Get a significant performance boost by reusing one Tooltip for a large number of context elements.</p>
+
+		<h3><a href="panel/1.html">Panel: Quickstart</a></h3>
+	<p>Create and display a simple draggable content Panel.</p>
+
+		<h3><a href="panelskin/1.html">Panel: Advanced Skinning using CSS</a></h3>
+	<p>Modify the classic Panel using only CSS to give it a more OS-like look and feel.</p>
+
+		<h3><a href="panelwait/1.html">Panel: Creating a 'Loading' Popup</a></h3>
+	<p>Use Panel to temporarily display a message while a large block of content is loading asynchronously.</p>
+
+		<h3><a href="panelphotobox/1.html">PhotoBox: Subclassing Panel</a></h3>
+	<p>Build a subclass of Panel that acts as a simple photo slideshow with basic navigational features.</p>
+
+		<h3><a href="panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></h3>
+	<p>Build a subclass of Panel that adds a special resize handle to the footer for dynamically resizing the Panel using drag and drop.</p>
+
+		<h3><a href="dialog/1.html">Dialog Quickstart</a></h3>
+	<p>Create a basic Dialog and submit its form contents asynchronously.</p>
+
+		<h3><a href="simpledialog/1.html">SimpleDialog Quickstart</a></h3>
+	<p>Dynamically build a simple OK/Cancel dialog and react to the user's response.</p>
+
+		<h3><a href="effect/1.html">Using ContainerEffect</a></h3>
+	<p>Learn to use the 'effect' property in conjunction with the ContainerEffect class to animate your containers when they are shown and hidden.</p>
+
+		<h3><a href="overlaymanager/1.html">Using OverlayManager</a></h3>
+	<p>Use the OverlayManager to register a set of containers for focus tracking.</p>
+
+		<h3><a href="keylistener/1.html">Using KeyListener</a></h3>
+	<p>Configure the 'keylistener' property to allow containers to dynamically react to key press events.</p>
+
+	</div>
+					<div id="stepnav">
+											</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/keylistener/1.html

@@ -0,0 +1,100 @@
+<!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>YUI Container - Using KeyListener (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Using KeyListener</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item selected"><a href="1.html">Using KeyListener</a></li>
+<li class="child active"><a href="1.html">Using the 'keylistener' Property</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Using the 'keylistener' Property</h1>
+
+								<p>The KeyListener class provides an easy way to listen for single or compound key events and fire the associated handler function. KeyListener also provides <em>enable</em> and <em>disable</em> methods that dynamically attach and detach DOM listeners to the associated element. The container classes (Panel and its subclasses) take advantage of KeyListeners using the "keylisteners" property. Any associated listeners are enabled when the Panel is shown, and disabled when the Panel is hidden.</p>
+
+			<p>In this tutorial, we will two KeyListeners: one that will hide a Panel when the escape key is pressed and one that will show the Panel when the user presses Ctrl+Y. First, we'll create a basic Panel and a KeyListener to enable when the Panel is visible.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[150,100] } );
+
+				var kl = new YAHOO.util.KeyListener(document, { keys:27 },  							
+															  { fn:YAHOO.example.container.panel1.hide,
+																scope:YAHOO.example.container.panel1,
+																correctScope:true } );
+
+				YAHOO.example.container.panel1.cfg.queueProperty("keylisteners", kl);
+			</textarea>
+
+			<p>There are several important things to note about the KeyListener and how it works with the Panel. The first argument of KeyListener's constructor is the element that the DOM event should be attached to. In both cases in this tutorial, the element will be "document" because we want our key presses to be registered document-wide, regardless of the focus.
+			
+			<p>The second argument is an object literal containing data defining which keys to listen for. The "keys" argument can either be a number or an array of numbers representing the character code(s) to listen for. This literal also accepts boolean values for "ctrl", "alt", and "shift". We will use the "ctrl" argument in our second KeyListener.</p>
+			
+			<p>Finally, the third argument defines the handler to be executed when a keypress is detected. This is an object literal as well and it contains three name/value pairs: "fn" represents the function to execute, "scope" represents the scope of the function's execution, and "correctScope", if true, will redefine "this" in your handler to refer the "scope" object.</p>
+
+			<p>After defining the KeyListener, we set it into the "keylisteners" property using <em>queueProperty</em>, which indicates that the KeyListeners will be applied to the Panel after it has been rendered.</p>
+			
+			<p>Our next KeyListener will be created independently of the Panel. It will react to the "Y" key, which has a character code of 89, with the "Control" key depressed at the same time. After instantiating the listener, we can enable it by calling <em>enable</em> directly. Once the listener has been abled, pressing Ctrl+Y should cause the Panel to be displayed.<p>
+
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				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();
+			</textarea>
+
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/keylistener/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Using KeyListener (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Using KeyListener</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item selected"><a href="1.html">Using KeyListener</a></li>
+<li class="child"><a href="1.html">Using the 'keylistener' Property</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below. Note that you may need to give focus to the IFRAME by clicking it before the example will work.</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Using the 'keylistener' Property</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/keylistener/solution.html

@@ -0,0 +1,66 @@
+<!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">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js"></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background-color:#eee }
+		</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], width:"250px" } );
+					
+					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.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+
+		<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>
+
+	</body>
+</html>

www/extras/yui/examples/container/module/1.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>YUI Container - Module: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Module: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item selected"><a href="1.html">Module: Quickstart</a></li>
+<li class="child active"><a href="1.html">Setting up the Modules</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the Modules</h1>
+
+								<p>The Module control enables you to create a JavaScript object representation of a basic module of content. It can be used to manipulate existing content modules on your page or to create modules dynamically and append them to the DOM. All other components in the Container family have Module as their lowest-level base class.</p>
+
+			<p>Module is fundamentally a building block for other UI controls. The concepts presented in this example will form the basis for the way that you interact with all of its subclasses.</p>
+			
+			<p>Module has three required dependencies: the <a href="http://developer.yahoo.com/yui/yahoo/">YAHOO Global object</a>, the <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>, and the <a href="http://developer.yahoo.com/yui/dom/">DOM Collection</a>.</p>
+
+			<p>In addition, the JavaScript file for Container must be included. If you will not be using any of the pre-packaged rich controls (Tooltip, Panel, Dialog, or SimpleDialog), you can include the core libary (container_core.js), which only contains Module, Overlay, and its supporting classes (Config, OverlayManager, and KeyListener). Otherwise, the full library should be included (container.js). You can see what the full list of included files looks like below. Please note that your file paths may vary depending on the location in which you installed the YUI libraries.</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<script type="text/javascript" src="yui/build/yahoo/yahoo.html"></script>
+				<script type="text/javascript" src="yui/event/event.html" ></script>
+				<script type="text/javascript" src="yui/dom/dom.html" ></script>
+
+				<script type="text/javascript" src="yui/build/container/container_core.html"></script>
+			</textarea>
+
+			<p>Modules can be built using existing markup or dynamically at runtime using JavaScript. In this tutorial, we will construct two Modules: one from markup, and one from script only. First, we'll add the Module from markup to the document. The markup is in Standard Module Format, which consists of an outer container div element and three possible child div elements that represent the header, body, and/or footer:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+
+				<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>
+
+			</textarea>
+
+			<p>Next, we'll build the JavaScript for our Modules and wrap it in a function to be executed when the window is finished loading. The Module called "module1" will be associated with our existing markup;  "module2" will be created dynamically from script. In this tutorial, we  pass to the Module constructor the one required argument: the id associated with that Module's container element.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				<script>
+					YAHOO.namespace("example.container");
+
+					function init() {
+						YAHOO.example.container.module1 = new YAHOO.widget.Module("module1");
+						YAHOO.example.container.module1.render();
+
+						YAHOO.example.container.module2 = new YAHOO.widget.Module("module2");
+						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(document.body);
+					}
+
+					YAHOO.util.Event.addListener(window, "load", init);
+				</script>
+			</textarea>
+
+			<p>Note that to avoid using the global variable space, we are placing our example Modules into the YAHOO.example.container namespace. For more information about namespacing, see the <a href="http://developer.yahoo.com/yui/yahoo/">YAHOO Global object</a>.</p>
+
+
+			<p>Because "module1" is already in the document, the call to the <em>render</em> method requires no arguments. On the other hand, "module2" does not have any markup in the document. This means that the node where the new Module should be appended must be passed to <em>render</em>. In this case, we simply append "module2" to "document.body".</p>
+			
+			<p>To see our newly created Modules more easily, we can add a style block that defines custom CSS for the "module" CSS class. By default, Module doesn't come with any predefined styles, so it is up to you as a developer to provide any applicable styles. Our style block will define the "module" CSS class such that Modules and each of their child elements will have distinct border colors:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<style>
+					.module { border:1px dotted black;padding:5px;margin:10px; }
+					.module .hd { border:1px solid red;padding:5px; }
+					.module .bd { border:1px solid green;padding:5px; }
+					.module .ft { border:1px solid blue;padding:5px; }
+				</style>
+			</textarea>
+
+			<p>Finally, we will add some HTML buttons to the page and wire them (using the <a href="http://developer.yahoo.com/yui/event">YUI Event Utility</a>) to the Modules' <em>show</em> and <em>hide</em> methods:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<div>
+					<button id="show1">Show module1</button> 
+					<button id="hide1">Hide module1</button>
+				</div>
+
+				<div>
+					<button id="show2">Show module2</button> 
+					<button id="hide2">Hide module2</button>
+				</div>
+			</textarea>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+					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);
+			</textarea>
+
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/module/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Module: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Module: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item selected"><a href="1.html">Module: Quickstart</a></li>
+<li class="child"><a href="1.html">Setting up the Modules</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution">
+				<iframe src="solution.html" style="width:96%;height:325px;"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the Modules</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/module/solution.html

@@ -0,0 +1,61 @@
+<!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">
+		
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container_core.js"></script>
+		
+		<style>
+			.module { border:1px dotted black;padding:5px;margin:10px; }
+			.module .hd { border:1px solid red;padding:5px; }
+			.module .bd { border:1px solid green;padding:5px; }
+			.module .ft { border:1px solid blue;padding:5px; }
+		</style>
+
+		<script>
+				YAHOO.namespace("example.container");
+
+				function init() {
+					YAHOO.example.container.module1 = new YAHOO.widget.Module("module1");
+					YAHOO.example.container.module1.render();
+
+					YAHOO.example.container.module2 = new YAHOO.widget.Module("module2");
+					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(document.body);
+
+					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);
+				}
+
+				YAHOO.util.Event.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+		<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>
+			<button id="show2">Show module2</button> 
+			<button id="hide2">Hide module2</button>
+		</div>
+
+	</body>
+</html>

www/extras/yui/examples/container/overlay/1.html

@@ -0,0 +1,151 @@
+<!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>YUI Container - Overlay: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Overlay: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Overlay: Quickstart</a></li>
+<li class="child active"><a href="1.html">Setting up the Overlays</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the Overlays</h1>
+
+								<p>The Overlay control is an extension of Module; its role is to facilitate the creation of modular content that is absolutely positioned above the flow of a page. It adds additional functionality to Module, including methods for positioning, multiple custom events for monitoring internal property changes, and a built-in IFRAME solution for dealing with SELECT element bleed-through in Internet Explorer.</p>
+
+			<p>Overlay is fundamentally a building block for other UI controls. The concepts presented in this example will form the basis for the way that you interact with all of its subclasses.</p>
+
+			<p>In this tutorial we will build three Overlays with different types of positioning. One of them will be based on existing markup; the other two will be created dynamically using script. In addition to instantiating the Overlays, we will also use the constructor to pass configuration properties for each of our Overlays.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+					// 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();
+
+
+					// Build overlay2 dynamically, initially hidden, at position x:400,y:500, and 300px wide
+					YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[400,500], 
+																							  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);
+
+					// 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.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);
+			</textarea>
+
+			<p>These Overlays introduce a few configuration properties. The "fixedcenter" property, when set to true, will force the Overlay to always be positioned in the center of the viewport &mdash; even when the window is scrolled or resized. The "visible" property determines whether the Overlay should be visible, and the "width" property allows a CSS width to be set for the Overlay. In addition, basic pixel-based positioning is available via the "xy" property, which can also be split into separate properties ("x" and "y").</p>
+
+			<p>The "context" property, as shown in "overlay3", takes an array of arguments. The first argument in the array is the id of the element to which we want to anchor the Overlay. In this case, that element is a div with an id of "ctx". The next two arguments specify the positioning of the Overlay &mdash; "tl" and "bl" mean, "Anchor my Overlay's <em>t</em>op <em>l</em>eft corner to my context element's <em>b</em>ottom <em>l</em>eft corner." (Other possible values include "tr" and "br" for "top right" and "bottom right", respectively.)</p>
+
+			<p>In the next step, we will define CSS styles that allow us to see a clear visual representation of our Overlays; remember, Overlays are building blocks for other controls and as such they are not styled by default. We will also style our "ctx" context element so that it's easy to see:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<style>
+					.overlay { border:1px dotted black;padding:5px;margin:10px; }
+					.overlay .hd { border:1px solid red;padding:5px; }
+					.overlay .bd { border:1px solid green;padding:5px; }
+					.overlay .ft { border:1px solid blue;padding:5px; }
+
+					#ctx { background:orange;width:100px;height:25px; }
+				</style>
+			</textarea>
+
+			<p>The markup for "overlay1", plus the context element "ctx" and the buttons to show all our Overlays, is displayed below. Note that "overlay1" has an inline style of "visibility:hidden" set in advance. Most browsers are slower to render CSS than inline styles, and we want this marked-up Overlay to be hidden by default. If the inline style isn't present, it may cause a brief "flash of unstyled content" where the Overlay may be visible on slower machines.</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<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>
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/overlay/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Overlay: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Overlay: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Overlay: Quickstart</a></li>
+<li class="child"><a href="1.html">Setting up the Overlays</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the Overlays</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/overlay/solution.html

@@ -0,0 +1,90 @@
+<!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">
+		
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+	
+		<script type="text/javascript" src="../../../build/container/container_core.js"></script>
+		
+		<style>
+			.overlay { position:absolute;background:#fff;border:1px dotted black;padding:5px;margin:10px; }
+			.overlay .hd { border:1px solid red;padding:5px; }
+			.overlay .bd { border:1px solid green;padding:5px; }
+			.overlay .ft { border:1px solid blue;padding:5px; }
+
+			#ctx { background:orange;width:100px;height:25px; }
+		</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();
+
+					// Build overlay2 dynamically, initially hidden, at position x:400,y:500, and 300px wide
+					YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[200,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);
+
+					// 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.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>
+
+	</head>
+	<body>
+
+		<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>
+
+	</body>
+</html>

www/extras/yui/examples/container/overlaymanager/1.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>YUI Container - Using OverlayManager (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Using OverlayManager</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item selected"><a href="1.html">Using OverlayManager</a></li>
+<li class="child active"><a href="1.html">Managing Overlay Focus & Blur</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Managing Overlay Focus & Blur</h1>
+
+								<p>OverlayManager provides an easy way to manage multiple Overlays and keep track of which Overlay is currently in focus. When you register an Overlay with the OverlayManager, it is augmented with <em>focus</em> and <em>blur</em>, as well as two additional events, <em>focusEvent</em> and <em>blurEvent</em>.  By default, clicking on an Overlay that is registered with the OverlayManager will bring it to the top by setting its z-index higher than all the other registered Overlays and will add the CSS class "focused" to its element.</p>
+
+			<p>In this tutorial, we will build three separate Panels and register them with an OverlayManager. To begin, we will instantiate three Panels that are hidden by default and render them:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// 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();
+			</textarea>
+
+			<p>Next, we will instantiate a new OverlayManager and register the Panels as an array:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				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]);
+			</textarea>
+
+			<p>Each of the Panels is then automatically augmented with focus and blur methods and events. Each Panel will be automatically focused when clicked, but we can also wire up buttons to focus and blur our Panels. The OverlayManager also has <em>showAll</em>, <em>hideAll</em>, and <em>blurAll</em> methods:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<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>
+			</textarea>
+
+
+			<p>Finally, we will place the basic markup for our Panels, which looks identical to much of the standard module markup we've seen in previous tutorials. Note that we set the "visibility:hidden" style inline on these Panels because we don't want them to flash before they are hidden by default. Setting the style inline ensures that the Panels will not be seen in the browser until they are made visible.</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<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>
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/overlaymanager/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Using OverlayManager (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Using OverlayManager</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item selected"><a href="1.html">Using OverlayManager</a></li>
+<li class="child"><a href="1.html">Managing Overlay Focus & Blur</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Managing Overlay Focus & Blur</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/overlaymanager/solution.html

@@ -0,0 +1,118 @@
+<!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">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js"></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background-color:#eee }
+			.panel-container.focused .hd { background-color:red; }
+		</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.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+
+		<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>
+
+	</body>
+</html>

www/extras/yui/examples/container/panel/1.html

@@ -0,0 +1,107 @@
+<!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>YUI Container - Panel: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Panel: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item selected"><a href="1.html">Panel: Quickstart</a></li>
+<li class="child active"><a href="1.html">Setting up the Panel</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the Panel</h1>
+
+								<p>The Panel control is an extension of Overlay that is meant to behave similarly to an OS window. Unlike true browser popup windows, panels are floating DHTML elements embedded directly within the page context. The Panel control extends the functionality of Overlay, adding support for modality, drag and drop, and close/dismiss buttons. Panel includes a pre-defined stylesheet to support default look and feel characteristics.</p>
+
+			<p>In this tutorial, we will build two Panels. One of them will be based on existing markup; the other will be created dynamically using script. We'll pass configuration properties via the constructor to specify any non-default settings we want to use in our Panel instances.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+					// Instantiate a Panel from markup
+					YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
+					YAHOO.example.container.panel1.render();
+
+					// Instantiate a Panel from script
+					YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, draggable:false, close:false } );
+					YAHOO.example.container.panel2.setHeader("Panel #2 from Script");
+					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(document.body);
+			</textarea>
+
+			<p>These Panels introduce a few configuration properties. The "constraintoviewport" property, when set to true, will keep the Panel from being positioned outside of the viewport; this defends against the panel being dragged out of the viewport by the user and against the panel being moved outside the viewport by scripted changes to its x/y properties. The "draggable" property determines whether the Panel can be dragged, and the "close" property determines whether the close icon should be displayed in the header of the Panel.</p>
+
+			<p>The "context" property takes an array of arguments. The first argument in the array is the id of the element to which we want to anchor our Panel. In this case, that element is a div with an id of "ctx". The next two arguments specify the positioning of the Panel &mdash; "tl" and "bl" mean, "Anchor my Panel's <em>t</em>op <em>l</em>eft corner to my context element's <em>b</em>ottom <em>l</em>eft corner." (Other possible values include "tr" and "br" for "top right" and "bottom right", respectively.)</p>
+
+			<p>The markup for "panel1" is in standard module format, as is required by the Module and Overlay classes on which Panel is built. We also provide buttons to allow for easy showing and hiding of both Panels:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+
+				<div>
+					<button id="show1">Show panel1</button> 
+					<button id="hide1">Hide panel1</button>
+				</div>
+
+				<div id="panel1">
+					<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>
+					<button id="show2">Show panel2</button> 
+					<button id="hide2">Hide panel2</button>
+				</div>
+
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panel/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Panel: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Panel: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item selected"><a href="1.html">Panel: Quickstart</a></li>
+<li class="child"><a href="1.html">Setting up the Panel</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the Panel</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panel/solution.html

@@ -0,0 +1,66 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+		</style>
+
+		<script>
+				YAHOO.namespace("example.container");
+
+				function init() {
+					// Instantiate a Panel from markup
+					YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
+					YAHOO.example.container.panel1.render();
+
+					// Instantiate a Panel from script
+					YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, draggable:false, close:false } );
+					YAHOO.example.container.panel2.setHeader("Panel #2 from Script");
+					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(document.body);
+
+					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>
+
+	</head>
+	<body>
+
+		<div>
+			<button id="show1">Show panel1</button> 
+			<button id="hide1">Hide panel1</button>
+		</div>
+
+		<div id="panel1">
+			<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>
+			<button id="show2">Show panel2</button> 
+			<button id="hide2">Hide panel2</button>
+		</div>
+
+	</body>
+</html>

www/extras/yui/examples/container/panelphotobox/1.html

@@ -0,0 +1,337 @@
+<!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>YUI Container - PhotoBox: Subclassing Panel (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: PhotoBox: Subclassing Panel</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item selected"><a href="1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="child active"><a href="1.html">Subclassing Panel to Create PhotoBox</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Subclassing Panel to Create PhotoBox</h1>
+
+								<p>Container classes can be subclassed to create all kinds of rich custom controls. The PhotoBox, which we will build in this tutorial, is an example of how Panel can be subclassed and styled to create a basic popup photo viewer with back and forward navigational controls.</p>
+
+			<p>The first step to subclassing the Panel is writing the constructor for the new subclass (PhotoBox, in this case) and specifying its inheritance from the Panel class using <em>YAHOO.extend</em>:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+
+				// BEGIN PHOTOBOX SUBCLASS //
+				YAHOO.widget.PhotoBox = function(el, userConfig) {
+					if (arguments.length > 0) {
+						YAHOO.widget.PhotoBox.superclass.constructor.call(this, el, userConfig);
+					}
+				}
+				
+				// Inherit from YAHOO.widget.Panel
+				YAHOO.extend(YAHOO.widget.PhotoBox, YAHOO.widget.Panel);
+
+			</textarea>
+			
+			<p>Next, we will define a few constants for use by the PhotoBox class: "CSS_PHOTOBOX", which defines the CSS class to apply to the Panel, and "NAV_FOOTER_HTML", the HTML that will be used for the footer navigation.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+
+				// Define the CSS class for the PhotoBox
+				YAHOO.widget.PhotoBox.CSS_PHOTOBOX = "photobox";
+
+				// Define the HTML for the footer navigation
+				YAHOO.widget.PhotoBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=/"javascript:void(null)/" class=\"back\"><img src=/"../assets/img/ybox-back.gif/" /></a><a id=\"$next.id\" href=/"javascript:void(null)/" class=\"next\"><img src=/"../assets/img/ybox-next.gif/" /></a>";
+
+			</textarea>
+
+			<p>Next, the initialization method for the PhotoBox is defined. The first step the initialization must perform is to call the superclass's <em>init</em> method so that the superclasses can initialize first. Then, we fire the <em>beforeInitEvent</em> and add the CSS class to the Panel, and apply the user's configuration properties. The rest of the method configures the footer navigation and fires the <em>initEvent</em> to indicate that the initialization is complete. The full <em>init</em> code is below:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Initialize the PhotoBox by setting up the footer navigation
+				YAHOO.widget.PhotoBox.prototype.init = function(el, userConfig) {
+					YAHOO.widget.PhotoBox.superclass.init.call(this, el); 
+					
+					this.beforeInitEvent.fire(YAHOO.widget.PhotoBox);
+
+					YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.PhotoBox.CSS_PHOTOBOX);
+					
+					if (userConfig) {
+						this.cfg.applyConfig(userConfig, true);
+					}
+					
+					this.setFooter(YAHOO.widget.PhotoBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));
+					
+					this.renderEvent.subscribe(function() {
+						var back = document.getElementById(this.id + "_back");
+						var next = document.getElementById(this.id + "_next");
+
+						YAHOO.util.Event.addListener(back, "mousedown", this.back, this, true);
+						YAHOO.util.Event.addListener(next, "mousedown", this.next, this, true);
+
+					}, this, true);
+
+					this.initEvent.fire(YAHOO.widget.PhotoBox);
+				};
+			</textarea>
+
+			<p>The PhotoBox has a custom property called <em>photos</em> that accepts an array of object literals containing photo URLs and captions to use. The call to <em>addProperty</em> defines the handler that will be executed when the "photos" property is changed. In this case, that handler is the <em>configPhotos</em> method, which is discussed below. Also of note is the "suppressEvent" property, which prevents <em>configPhotos</em> from being fired until a value is set.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Set up the PhotoBox's "photos" property for setting up the list of photos
+				YAHOO.widget.PhotoBox.prototype.initDefaultConfig = function() {
+					YAHOO.widget.PhotoBox.superclass.initDefaultConfig.call(this);
+					
+					this.cfg.addProperty("photos", { handler:this.configPhotos, suppressEvent:true });
+				};
+			</textarea>
+
+			<p>The <em>configPhotos</em> handler, which is fired when the "photos" property is changed, iterates through the list of photo object literals and preloads the image for each photo. At the end of this process, the PhotoBox is automatically set to display the first image in the set, through a call to <em>setImage(0)</em>.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Handler executed when the "photos" property is modified
+				YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
+					var photos = args[0];
+
+					if (photos) {
+						this.images = [];
+
+						if (! (photos instanceof Array)) {
+							photos = [photos];
+						}
+
+						this.currentImage = 0;
+
+						if (photos.length == 1) {
+							this.footer.style.display = "none";
+						}
+
+						for (var p=0;p<photos.length;p++) {
+							var photo = photos[p];
+							var img = new Image();
+							img.src = photo.src;
+							img.title = photo.caption;
+							img.id = this.id + "_img";
+							img.width = 500
+							this.images[this.images.length] = img;
+						}
+
+						this.setImage(0);
+					}
+				};
+			</textarea>
+
+			<p>The <em>setImage</em> function uses an index to grab an image from the "images" array, and places it into the body of the PhotoBox. In addition, it sets the photo's caption, and determines whether the next and back navigation buttons should be displayed, based on the current image index. For instance, image 0 would not display a "back" button, and the last image in the set would not display the "next" button.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Sets the current image displayed in the PhotoBox to the corresponding image in the photo dataset, 
+				// and determines whether back and forward arrows should be diplsayed, based on the position in the dataset
+				YAHOO.widget.PhotoBox.prototype.setImage = function(index) {
+					var photos = this.cfg.getProperty("photos");
+
+					if (photos) {
+						if (! (photos instanceof Array)) {
+							photos = [photos];
+						}
+						
+						var back = document.getElementById(this.id + "_back");
+						var next = document.getElementById(this.id + "_next");
+						var img =  document.getElementById(this.id + "_img");
+						var title = document.getElementById(this.id + "_title");
+
+						this.currentImage = index;
+
+						var current = this.images[index];
+
+						var imgNode = document.createElement("IMG");
+						imgNode.setAttribute("src",current.src);
+						imgNode.setAttribute("title",current.title);
+						imgNode.setAttribute("width",500);
+						imgNode.setAttribute("id",current.id);
+						
+						img.parentNode.replaceChild((this.browser == "safari"?imgNode:current), img);
+						
+						this.body.style.height = "auto";
+
+						title.innerHTML = current.title;
+
+						if (this.currentImage == 0) {
+							back.style.display = "none";
+						} else {
+							back.style.display = "block";
+						}
+
+						if (this.currentImage == (photos.length-1)) {
+							next.style.display = "none";
+						} else {
+							next.style.display = "block";
+						}
+					}
+				};
+			</textarea>
+
+			<p>The <em>next</em> and <em>back</em> methods are used to navigate back and forth through the photos featured in the PhotoBox. They function by evaluating the index of the currently displayed image and adding or subtracting one to that number. Then, a call to <em>setImage</em> actually changes the photo.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Navigates to the next image
+				YAHOO.widget.PhotoBox.prototype.next = function() {	
+					if (typeof this.currentImage == 'undefined') {
+						this.currentImage = 0;
+					}
+
+					this.setImage(this.currentImage+1);
+				};
+
+				// Navigates to the previous image
+				YAHOO.widget.PhotoBox.prototype.back = function() {
+					if (typeof this.currentImage == 'undefined') {
+						this.currentImage = 0;
+					}
+
+					this.setImage(this.currentImage-1);
+				};
+			</textarea>
+
+			<p>The final step in subclassing Panel is to override the "modal" property to allow for the modality mask that overlays the document to fade in and out in an animated fashion. The customizations employed here detect the opacity of the mask and allow for <em>showMask</em> and <em>hideMask</em> to fade the mask in until it reaches that initial opacity, and out until it's completely transparent.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// Overrides the handler for the "modal" property with special animation-related functionality
+				YAHOO.widget.PhotoBox.prototype.configModal = function(type, args, obj) {
+					var modal = args[0];
+
+					if (modal) {
+						this.buildMask();
+
+						if (typeof this.maskOpacity == 'undefined') {
+							this.mask.style.visibility = "hidden";
+							this.mask.style.display = "block";
+							this.maskOpacity = YAHOO.util.Dom.getStyle(this.mask,"opacity");
+							this.mask.style.display = "none";
+							this.mask.style.visibility = "visible";
+						}
+
+						if (! YAHOO.util.Config.alreadySubscribed( this.beforeShowEvent, this.showMask, this ) ) {
+							this.beforeShowEvent.subscribe(this.showMask, this, true);
+						}
+						if (! YAHOO.util.Config.alreadySubscribed( this.beforeHideEvent, this.hideMask, this) ) {
+							this.beforeHideEvent.subscribe(this.hideMask, this, true);
+						}
+						if (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, this.sizeMask, this ) ) {
+							YAHOO.widget.Overlay.windowResizeEvent.subscribe(this.sizeMask, this, true);
+						}
+					} else {
+						this.beforeShowEvent.unsubscribe(this.showMask, this);
+						this.beforeHideEvent.unsubscribe(this.hideMask, this);
+						YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(this.sizeMask);
+					}
+				};
+
+				// Overrides the showMask function to allow for fade-in animation
+				YAHOO.widget.PhotoBox.prototype.showMask = function() {
+					if (this.cfg.getProperty("modal") && this.mask) {
+						YAHOO.util.Dom.addClass(document.body, "masked");
+						this.sizeMask();
+
+						var o = this.maskOpacity;
+
+						if (! this.maskAnimIn) {
+							this.maskAnimIn = new YAHOO.util.Anim(this.mask, {opacity: {to:o}}, 0.25)
+							YAHOO.util.Dom.setStyle(this.mask, "opacity", 0);
+						}
+
+						if (! this.maskAnimOut) {
+							this.maskAnimOut = new YAHOO.util.Anim(this.mask, {opacity: {to:0}}, 0.25)
+							this.maskAnimOut.onComplete.subscribe(function() {
+																	this.mask.tabIndex = -1;
+																	this.mask.style.display = "none";
+																	this.hideMaskEvent.fire();
+																	YAHOO.util.Dom.removeClass(document.body, "masked");
+																  }, this, true);
+							
+						}
+						this.mask.style.display = "block";
+						this.maskAnimIn.animate();
+						this.mask.tabIndex = 0;
+						this.showMaskEvent.fire();
+					}
+				};
+
+				// Overrides the showMask function to allow for fade-out animation
+				YAHOO.widget.PhotoBox.prototype.hideMask = function() {
+					if (this.cfg.getProperty("modal") && this.mask) {
+						this.maskAnimOut.animate();
+					}
+				};
+			</textarea>
+			
+			<p>The last part of the tutorial involves instantiating the PhotoBox once the class has been defined. As you will see in the code below, many of the properties being used are familiar from the Panel API, with the addition of the new "photos" property that allows the photo set to be specified:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.example.container.photobox = new YAHOO.widget.PhotoBox("photobox", 
+				{ 
+					effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45}, 
+					fixedcenter:true,
+					constraintoviewport:true,
+					underlay:"none",
+					close:true,
+					visible:false,
+					draggable:false,
+					modal:true, 
+					photos:[{src:"http://static.flickr.com/51/129586913_e78683c466.jpg",caption:"Linus"},
+							{src:"http://static.flickr.com/50/129590195_0642f2d96a.jpg",caption:"Linus 2"},
+							{src:"http://static.flickr.com/8/12669712_be928a0d97.jpg",caption:"Dobb's Ferry, NY"}
+						   ], 
+					width:"500px"
+				} );
+				YAHOO.example.container.photobox.render();
+				YAHOO.example.container.photobox.show();
+			</textarea>
+
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelphotobox/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - PhotoBox: Subclassing Panel (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: PhotoBox: Subclassing Panel</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item selected"><a href="1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="child"><a href="1.html">Subclassing Panel to Create PhotoBox</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:99%;height:500px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Subclassing Panel to Create PhotoBox</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelphotobox/solution.html

@@ -0,0 +1,291 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/animation/animation.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+			.mask { background-color:#000;-moz-opacity:0.75;opacity:.75;filter:alpha(opacity=75);}
+			.photobox {border:3px solid #666;overflow:visible;background-color:#333;padding:5px;}
+			.photobox .close {top:8px;right:8px;height:15px;width:18px;}
+			.photobox .close.nonsecure {background-image:url(../assets/img/ybox-close.gif);}
+			.photobox .close.secure {background-image:url(../assets/img/ybox-close.gif);}
+			.photobox .hd {font-family:georgia, times new roman, times, serif;font-weight:normal;border:none;border-bottom:1px solid #666;background:transparent;color:#FFF;height:18px;text-align:left;overflow:visible;padding:0;padding-bottom:5px;margin-bottom:5px;width:500px;}
+			.photobox .hd span {vertical-align:middle;line-height:15px;}
+			.photobox .bd  {padding:0;}
+			.photobox .bd img {border:none;}
+			.photobox .ft {height:16px;width:500px;padding:5px 0;position:relative;}
+			.photobox .ft .back {position:absolute;left:1px;}
+			.photobox .ft .back img, .photobox .ft .next img {border:none;}
+			.photobox .ft .next {position:absolute;right:1px;}
+		</style>
+
+		<script>
+			YAHOO.namespace("example.container");
+
+			// BEGIN PHOTOBOX SUBCLASS //
+			YAHOO.widget.PhotoBox = function(el, userConfig) {
+				if (arguments.length > 0) {
+					YAHOO.widget.PhotoBox.superclass.constructor.call(this, el, userConfig);
+				}
+			}
+			
+			// Inherit from YAHOO.widget.Panel
+			YAHOO.extend(YAHOO.widget.PhotoBox, YAHOO.widget.Panel);
+
+			// Define the CSS class for the PhotoBox
+			YAHOO.widget.PhotoBox.CSS_PHOTOBOX = "photobox";
+
+			// Define the HTML for the footer navigation
+			YAHOO.widget.PhotoBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=\"javascript:void(null)\" class=\"back\"><img src=\"../assets/img/ybox-back.gif\" /></a><a id=\"$next.id\" href=\"javascript:void(null)\" class=\"next\"><img src=\"../assets/img/ybox-next.gif\" /></a>";
+
+			// Initialize the PhotoBox by setting up the footer navigation
+			YAHOO.widget.PhotoBox.prototype.init = function(el, userConfig) {
+				YAHOO.widget.PhotoBox.superclass.init.call(this, el); 
+				
+				this.beforeInitEvent.fire(YAHOO.widget.PhotoBox);
+
+				YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.PhotoBox.CSS_PHOTOBOX);
+				
+				if (userConfig) {
+					this.cfg.applyConfig(userConfig, true);
+				}
+				
+				this.setFooter(YAHOO.widget.PhotoBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));
+				
+				this.renderEvent.subscribe(function() {
+					var back = document.getElementById(this.id + "_back");
+					var next = document.getElementById(this.id + "_next");
+
+					YAHOO.util.Event.addListener(back, "mousedown", this.back, this, true);
+					YAHOO.util.Event.addListener(next, "mousedown", this.next, this, true);
+
+				}, this, true);
+
+				this.initEvent.fire(YAHOO.widget.PhotoBox);
+			};
+
+			// Set up the PhotoBox's "photos" property for setting up the list of photos
+			YAHOO.widget.PhotoBox.prototype.initDefaultConfig = function() {
+				YAHOO.widget.PhotoBox.superclass.initDefaultConfig.call(this);
+				
+				this.cfg.addProperty("photos", { handler:this.configPhotos, suppressEvent:true });
+			};
+
+			// Handler executed when the "photos" property is modified
+			YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
+				var photos = args[0];
+
+				if (photos) {
+					this.images = [];
+
+					if (! (photos instanceof Array)) {
+						photos = [photos];
+					}
+
+					this.currentImage = 0;
+
+					if (photos.length == 1) {
+						this.footer.style.display = "none";
+					}
+
+					for (var p=0;p<photos.length;p++) {
+						var photo = photos[p];
+						var img = new Image();
+						img.src = photo.src;
+						img.title = photo.caption;
+						img.id = this.id + "_img";
+						img.width = 500
+						this.images[this.images.length] = img;
+					}
+
+					this.setImage(0);
+				}
+			};
+
+			// Sets the current image displayed in the PhotoBox to the corresponding image in the photo dataset, 
+			// and determines whether back and forward arrows should be diplsayed, based on the position in the dataset
+			YAHOO.widget.PhotoBox.prototype.setImage = function(index) {
+				var photos = this.cfg.getProperty("photos");
+
+				if (photos) {
+					if (! (photos instanceof Array)) {
+						photos = [photos];
+					}
+					
+					var back = document.getElementById(this.id + "_back");
+					var next = document.getElementById(this.id + "_next");
+					var img =  document.getElementById(this.id + "_img");
+					var title = document.getElementById(this.id + "_title");
+
+					this.currentImage = index;
+
+					var current = this.images[index];
+
+					var imgNode = document.createElement("IMG");
+					imgNode.setAttribute("src",current.src);
+					imgNode.setAttribute("title",current.title);
+					imgNode.setAttribute("width",500);
+					imgNode.setAttribute("id",current.id);
+					
+					img.parentNode.replaceChild((this.browser == "safari"?imgNode:current), img);
+					
+					this.body.style.height = "auto";
+
+					title.innerHTML = current.title;
+
+					if (this.currentImage == 0) {
+						back.style.display = "none";
+					} else {
+						back.style.display = "block";
+					}
+
+					if (this.currentImage == (photos.length-1)) {
+						next.style.display = "none";
+					} else {
+						next.style.display = "block";
+					}
+				}
+			};
+			
+			// Navigates to the next image
+			YAHOO.widget.PhotoBox.prototype.next = function() {	
+				if (typeof this.currentImage == 'undefined') {
+					this.currentImage = 0;
+				}
+
+				this.setImage(this.currentImage+1);
+			};
+
+			// Navigates to the previous image
+			YAHOO.widget.PhotoBox.prototype.back = function() {
+				if (typeof this.currentImage == 'undefined') {
+					this.currentImage = 0;
+				}
+
+				this.setImage(this.currentImage-1);
+			};
+			
+			// Overrides the handler for the "modal" property with special animation-related functionality
+			YAHOO.widget.PhotoBox.prototype.configModal = function(type, args, obj) {
+				var modal = args[0];
+
+				if (modal) {
+					this.buildMask();
+
+					if (typeof this.maskOpacity == 'undefined') {
+						this.mask.style.visibility = "hidden";
+						this.mask.style.display = "block";
+						this.maskOpacity = YAHOO.util.Dom.getStyle(this.mask,"opacity");
+						this.mask.style.display = "none";
+						this.mask.style.visibility = "visible";
+					}
+
+					if (! YAHOO.util.Config.alreadySubscribed( this.beforeShowEvent, this.showMask, this ) ) {
+						this.beforeShowEvent.subscribe(this.showMask, this, true);
+					}
+					if (! YAHOO.util.Config.alreadySubscribed( this.hideEvent, this.hideMask, this) ) {
+						this.hideEvent.subscribe(this.hideMask, this, true);
+					}
+					if (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, this.sizeMask, this ) ) {
+						YAHOO.widget.Overlay.windowResizeEvent.subscribe(this.sizeMask, this, true);
+					}
+					if (! YAHOO.util.Config.alreadySubscribed( this.destroyEvent, this.removeMask, this) ) {
+						this.destroyEvent.subscribe(this.removeMask, this, true);
+					}
+					this.cfg.refireEvent("zIndex");
+				} else {
+					this.beforeShowEvent.unsubscribe(this.showMask, this);
+					this.beforeHideEvent.unsubscribe(this.hideMask, this);
+					YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(this.sizeMask);
+				}
+			};
+			
+			// Overrides the showMask function to allow for fade-in animation
+			YAHOO.widget.PhotoBox.prototype.showMask = function() {
+				if (this.cfg.getProperty("modal") && this.mask) {
+					YAHOO.util.Dom.addClass(document.body, "masked");
+					this.sizeMask();
+
+					var o = this.maskOpacity;
+
+					if (! this.maskAnimIn) {
+						this.maskAnimIn = new YAHOO.util.Anim(this.mask, {opacity: {to:o}}, 0.25)
+						YAHOO.util.Dom.setStyle(this.mask, "opacity", 0);
+					}
+
+					if (! this.maskAnimOut) {
+						this.maskAnimOut = new YAHOO.util.Anim(this.mask, {opacity: {to:0}}, 0.25)
+						this.maskAnimOut.onComplete.subscribe(function() {
+																this.mask.tabIndex = -1;
+																this.mask.style.display = "none";
+																this.hideMaskEvent.fire();
+																YAHOO.util.Dom.removeClass(document.body, "masked");
+															  }, this, true);
+						
+					}
+					this.mask.style.display = "block";
+					this.maskAnimIn.animate();
+					this.mask.tabIndex = 0;
+					this.showMaskEvent.fire();
+				}
+			};
+
+			// Overrides the showMask function to allow for fade-out animation
+			YAHOO.widget.PhotoBox.prototype.hideMask = function() {
+				if (this.cfg.getProperty("modal") && this.mask) {
+					this.maskAnimOut.animate();
+				}
+			};
+			// END PHOTOBOX SUBCLASS //
+
+			function init() {
+				YAHOO.example.container.photobox = new YAHOO.widget.PhotoBox("photobox", 
+				{ 
+					effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45}, 
+					fixedcenter:true,
+					constraintoviewport:true,
+					underlay:"none",
+					close:true,
+					visible:false,
+					draggable:false,
+					modal:true, 
+					photos:[{src:"http://static.flickr.com/51/129586913_e78683c466.jpg",caption:"Linus"},
+							{src:"http://static.flickr.com/50/129590195_0642f2d96a.jpg",caption:"Linus 2"},
+							{src:"http://static.flickr.com/8/12669712_be928a0d97.jpg",caption:"Dobb's Ferry, NY"}
+						   ], 
+					width:"500px"
+				} );
+				YAHOO.example.container.photobox.render();
+				
+				YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.photobox.show, YAHOO.example.container.photobox, true);
+			}
+
+			YAHOO.util.Event.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+		
+		<button id="show">Show PhotoBox</button>
+
+		<div id="photobox">
+				<div class="hd"><div class="lt"></div><span id="photobox_title"></span><div class="rt"></div></div>
+				<div class="bd">
+					<img id="photobox_img" src="#" width="500"/>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

www/extras/yui/examples/container/panelresize/1.html

@@ -0,0 +1,185 @@
+<!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>YUI Container - ResizePanel: Creating a Resizable Panel (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: ResizePanel: Creating a Resizable Panel</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item selected"><a href="1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="child active"><a href="1.html">Subclassing Panel to Create ResizePanel</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Subclassing Panel to Create ResizePanel</h1>
+
+								<p>In this tutorial, we will build a subclass for Panel called ResizePanel that will allow the Panel to be resized using a draggable handle in the bottom-right corner of the footer.</p>
+
+			<p>The first step to subclassing the Panel is writing the constructor for the new subclass (ResizePanel, in this case) and specifying its inheritance from the Panel class using <em>YAHOO.extend</em>:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+
+				// BEGIN PHOTOBOX SUBCLASS //
+				YAHOO.widget.PhotoBox = function(el, userConfig) {
+					if (arguments.length > 0) {
+						YAHOO.widget.PhotoBox.superclass.constructor.call(this, el, userConfig);
+					}
+				}
+				
+				// Inherit from YAHOO.widget.Panel
+				YAHOO.extend(YAHOO.widget.PhotoBox, YAHOO.widget.Panel);
+
+			</textarea>
+			
+			<p>Next, we will define a few constants for use by the ResizePanel class: "CSS_PANEL_RESIZE", which defines the CSS class to apply to the Panel, and "CSS_RESIZE_HANDLE", the CSS class to apply to the resize handler.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+
+				YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE = "resizepanel";
+
+				YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE = "resizehandle";
+
+			</textarea>
+
+			<p>Next, the initialization method for the ResizePanel is defined. The first step the initialization must perform is to call the superclass's <em>init</em> method so that the superclasses can initialize first. After that, take the following steps:</p>
+			<ol>
+			  <li>We fire the <em>beforeInitEvent</em> and add the CSS class to the Panel;</li>
+			  <li>We create the element that will serve as the resize handle in the footer;</li>
+			  <li>We make sure that the footer is set to blank text if no footer is specified by render time, since a footer is required in order for the ResizePanel to function properly.</li>
+			  <li>Finally, we subscribe a function to the Panel's <em>renderEvent</em> wherein we'll configure the resize handle's Drag and Drop instance (instance of <a href="http://developer.yahoo.com/yui/docs/dragdrop/YAHOO.util.DragDrop.html">YAHOO.util.DragDrop</a>). The resize is achieved by calculating the difference in position between the handle's start point and end point.</li>
+</ol>
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.widget.ResizePanel.prototype.init = function(el, userConfig) {
+					YAHOO.widget.ResizePanel.superclass.init.call(this, el);
+					this.beforeInitEvent.fire(YAHOO.widget.ResizePanel);
+
+					YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE);
+
+					this.resizeHandle = document.createElement("DIV");
+					this.resizeHandle.id = this.id + "_r";
+					this.resizeHandle.className = YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE;
+						
+					this.beforeRenderEvent.subscribe(function() {
+							if (! this.footer) {
+								this.setFooter("");
+							}
+						}, 
+						this, true
+					);
+
+					this.renderEvent.subscribe(function() {
+						var me = this;
+						
+						me.innerElement.appendChild(me.resizeHandle);
+
+						this.ddResize = new YAHOO.util.DragDrop(this.resizeHandle.id, this.id);
+						this.ddResize.setHandleElId(this.resizeHandle.id);
+
+						var headerHeight = me.header.offsetHeight;
+
+						this.ddResize.onMouseDown = function(e) {
+
+							this.startWidth = me.innerElement.offsetWidth;
+							this.startHeight = me.innerElement.offsetHeight;
+							
+							me.cfg.setProperty("width", this.startWidth + "px");
+							me.cfg.setProperty("height", this.startHeight + "px");
+
+							this.startPos = [YAHOO.util.Event.getPageX(e),
+											 YAHOO.util.Event.getPageY(e)];
+
+							me.innerElement.style.overflow = "hidden";
+							me.body.style.overflow = "auto";
+						}
+						
+						this.ddResize.onDrag = function(e) {
+							var newPos = [YAHOO.util.Event.getPageX(e),
+										  YAHOO.util.Event.getPageY(e)];
+							
+							var offsetX = newPos[0] - this.startPos[0];
+							var offsetY = newPos[1] - this.startPos[1];
+					
+							var newWidth = Math.max(this.startWidth + offsetX, 10);
+							var newHeight = Math.max(this.startHeight + offsetY, 10);
+
+							me.cfg.setProperty("width", newWidth + "px");
+							me.cfg.setProperty("height", newHeight + "px");
+
+							var bodyHeight = (newHeight - 5 - me.footer.offsetHeight - me.header.offsetHeight - 3);
+							if (bodyHeight < 0) {
+								bodyHeight = 0;
+							}
+
+							me.body.style.height =  bodyHeight + "px";
+
+							var innerHeight = me.innerElement.offsetHeight;
+							var innerWidth = me.innerElement.offsetWidth;
+
+							if (innerHeight < headerHeight) {
+								me.innerElement.style.height = headerHeight + "px";
+							}
+
+							if (innerWidth < 20) {
+								me.innerElement.style.width = "20px";
+							}
+						}
+
+					}, this, true);
+
+					if (userConfig) {
+						this.cfg.applyConfig(userConfig, true);
+					}
+
+					this.initEvent.fire(YAHOO.widget.ResizePanel);
+				};
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelresize/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - ResizePanel: Creating a Resizable Panel (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: ResizePanel: Creating a Resizable Panel</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item selected"><a href="1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="child"><a href="1.html">Subclassing Panel to Create ResizePanel</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:425px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Subclassing Panel to Create ResizePanel</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelresize/solution.html

@@ -0,0 +1,160 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+
+			/* Resize Panel CSS */
+			.resizepanel .resizehandle { position:absolute; width:25px; height:4px; right:0; bottom:0; margin:0; padding:0; z-index:1; background:#666;  cursor:se-resize; font-size:2px; }
+		</style>
+
+		<script>
+				YAHOO.namespace("example.container");
+				
+				// BEGIN RESIZEPANEL SUBCLASS //
+				YAHOO.widget.ResizePanel = function(el, userConfig) {
+					if (arguments.length > 0) {
+						YAHOO.widget.ResizePanel.superclass.constructor.call(this, el, userConfig);
+					}
+				}
+
+				YAHOO.extend(YAHOO.widget.ResizePanel, YAHOO.widget.Panel);
+
+				YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE = "resizepanel";
+
+				YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE = "resizehandle";
+
+				YAHOO.widget.ResizePanel.prototype.init = function(el, userConfig) {
+					YAHOO.widget.ResizePanel.superclass.init.call(this, el);
+					this.beforeInitEvent.fire(YAHOO.widget.ResizePanel);
+
+					YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.ResizePanel.CSS_PANEL_RESIZE);
+
+					this.resizeHandle = document.createElement("DIV");
+					this.resizeHandle.id = this.id + "_r";
+					this.resizeHandle.className = YAHOO.widget.ResizePanel.CSS_RESIZE_HANDLE;
+						
+					this.beforeRenderEvent.subscribe(function() {
+							if (! this.footer) {
+								this.setFooter("");
+							}
+						}, 
+						this, true
+					);
+
+					this.renderEvent.subscribe(function() {
+						var me = this;
+						
+						me.innerElement.appendChild(me.resizeHandle);
+
+						this.ddResize = new YAHOO.util.DragDrop(this.resizeHandle.id, this.id);
+						this.ddResize.setHandleElId(this.resizeHandle.id);
+
+						var headerHeight = me.header.offsetHeight;
+
+						this.ddResize.onMouseDown = function(e) {
+
+							this.startWidth = me.innerElement.offsetWidth;
+							this.startHeight = me.innerElement.offsetHeight;
+							
+							me.cfg.setProperty("width", this.startWidth + "px");
+							me.cfg.setProperty("height", this.startHeight + "px");
+
+							this.startPos = [YAHOO.util.Event.getPageX(e),
+											 YAHOO.util.Event.getPageY(e)];
+
+							me.innerElement.style.overflow = "hidden";
+							me.body.style.overflow = "auto";
+						}
+						
+						this.ddResize.onDrag = function(e) {
+							var newPos = [YAHOO.util.Event.getPageX(e),
+										  YAHOO.util.Event.getPageY(e)];
+							
+							var offsetX = newPos[0] - this.startPos[0];
+							var offsetY = newPos[1] - this.startPos[1];
+					
+							var newWidth = Math.max(this.startWidth + offsetX, 10);
+							var newHeight = Math.max(this.startHeight + offsetY, 10);
+
+							me.cfg.setProperty("width", newWidth + "px");
+							me.cfg.setProperty("height", newHeight + "px");
+
+							var bodyHeight = (newHeight - 5 - me.footer.offsetHeight - me.header.offsetHeight - 3);
+							if (bodyHeight < 0) {
+								bodyHeight = 0;
+							}
+
+							me.body.style.height =  bodyHeight + "px";
+
+							var innerHeight = me.innerElement.offsetHeight;
+							var innerWidth = me.innerElement.offsetWidth;
+
+							if (innerHeight < headerHeight) {
+								me.innerElement.style.height = headerHeight + "px";
+							}
+
+							if (innerWidth < 20) {
+								me.innerElement.style.width = "20px";
+							}
+						}
+
+					}, this, true);
+
+					if (userConfig) {
+						this.cfg.applyConfig(userConfig, true);
+					}
+
+					this.initEvent.fire(YAHOO.widget.ResizePanel);
+				};
+
+				YAHOO.widget.ResizePanel.prototype.toString = function() {
+					return "ResizePanel " + this.id;
+				};
+				
+				// END RESIZEPANEL SUBCLASS //
+
+				function init() {
+					YAHOO.example.container.panel1 = new YAHOO.widget.ResizePanel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
+					YAHOO.example.container.panel1.render();
+
+
+					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.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+		<div>
+			<button id="show">Show panel1</button> 
+			<button id="hide">Hide panel1</button>
+		</div>
+
+		<div id="panel1">
+			<div class="hd">ResizePanel #1 from Markup</div>
+			<div class="bd" style="height:300px;overflow:auto"><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>
+
+			<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>
+
+
+	</body>
+</html>

www/extras/yui/examples/container/panelskin/1.html

@@ -0,0 +1,132 @@
+<!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>YUI Container - Panel: Advanced Skinning using CSS (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Panel: Advanced Skinning using CSS</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="child active"><a href="1.html">Skinning the Panel</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Skinning the Panel</h1>
+
+								<p>Panels can be skinned using only CSS, and a bit of extra markup. In this tutorial, we will create two Panels &mdash; one skinned to look like a Windows XP window, and one that looks like the Mac OS X Aqua style. First, let's look at the markup structure that will serve as the framework for our newly skinned Panels. You'll notice that a few additional elements have been added to the header and footer. The classes of these elements &mdash; "tl", "tr", "br" and "bl" &mdash; represent each of the corner images that will be applied to the XP skin. The Aqua skin will be built from script (not based on existing markup) using the same structure, although the rounded corners will only be applied to the top corners. The script and markup for the two skinned Panels are listed below: </p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				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>");
+			</textarea>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<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>
+			</textarea>
+
+			<p>The skinning of these Panels is achieved using CSS definitions. In this tutorial, we will use id selectors in our CSS definitions to specify which Panel should receive each skin. Most of the styles consist of background images that are applied to various pieces of the Panels. The styles are defined below:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				/* XP Panel Skin CSS */
+				#panel1_c.panel-container.shadow .underlay { background-color:#999; }
+				
+				/* Apply the border to the right side */
+				#panel1.panel { border:none; overflow:visible; background:transparent url(../assets/img/xp-brdr-rt.gif) no-repeat top right; }
+
+				/* Style the close icon */
+				#panel1.panel .close { top:5px; right:8px; height:21px; width:21px; }
+				#panel1.panel .close.nonsecure { background-image:url(../assets/img/xp-close.gif); } 
+				#panel1.panel .close.secure { background-image:url(../assets/img/xp-close.gif); }
+
+				/* Style the header with its associated corners */
+				#panel1.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.panel .hd span { line-height:30px; vertical-align:middle; }
+				#panel1.panel .hd .tl { width:8px;height:29px; top:1px;left:0; background:transparent url(../assets/img/xp-tl.gif); position:absolute; }
+				#panel1.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.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.panel .ft { background:transparent url(../assets/img/xp-ft.gif); font-size:11px; height:26px; padding:0px 10px; }
+				#panel1.panel .ft span { line-height:22px; vertical-align:middle; }
+				#panel1.panel .ft .bl { width:8px;height:26px; bottom:0;left:0; background:transparent url(../assets/img/xp-bl.gif); position:absolute; }
+				#panel1.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.panel-container.shadow .underlay { background-color:#999; }
+				#panel2.panel { border:none; overflow:visible; background-color:transparent; } 
+
+				/* Apply styles to the close icon to anchor it to the left side of the header */
+				#panel2.panel .close { top:3px; left:4px; height:18px; width:17px; }
+				#panel2.panel .close.nonsecure { background-image:url(../assets/img/aqua-hd-close.gif); }
+				#panel2.panel .close.secure { background-image:url(../assets/img/aqua-hd-close.gif); }
+				#panel2.panel .close.nonsecure:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }
+				#panel2.panel .close.secure:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }
+
+				/* Style the header and apply the rounded corners, center the text */
+				#panel2.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.panel .hd span { vertical-align:middle; line-height:22px; }
+				#panel2.panel .hd .tl { width:7px; height:22px; top:0; left:0; background:transparent url(../assets/img/aqua-hd-lt.gif); position:absolute; }
+				#panel2.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.panel .bd { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; }
+				#panel2.panel .ft { font-size:75%; color:#666; padding:2px; overflow:hidden; border:1px solid #aeaeae; border-top:none; background-color:#dfdfdf; }
+			</textarea>
+
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelskin/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Panel: Advanced Skinning using CSS (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Panel: Advanced Skinning using CSS</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="child"><a href="1.html">Skinning the Panel</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Skinning the Panel</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelskin/solution.html

@@ -0,0 +1,111 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+
+			/* XP Panel Skin CSS */
+			#panel1_c.panel-container.shadow .underlay { background-color:#999; }
+			
+			/* Apply the border to the right side */
+			#panel1.panel { border:none; overflow:visible; background:transparent url(../assets/img/xp-brdr-rt.gif) no-repeat top right; }
+
+			/* Style the close icon */
+			#panel1.panel .close { top:5px; right:8px; height:21px; width:21px; }
+			#panel1.panel .close.nonsecure { background-image:url(../assets/img/xp-close.gif); } 
+			#panel1.panel .close.secure { background-image:url(../assets/img/xp-close.gif); }
+
+			/* Style the header with its associated corners */
+			#panel1.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.panel .hd span { line-height:30px; vertical-align:middle; }
+			#panel1.panel .hd .tl { width:8px;height:29px; top:1px;left:0; background:transparent url(../assets/img/xp-tl.gif); position:absolute; }
+			#panel1.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.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.panel .ft { background:transparent url(../assets/img/xp-ft.gif); font-size:11px; height:26px; padding:0px 10px; }
+			#panel1.panel .ft span { line-height:22px; vertical-align:middle; }
+			#panel1.panel .ft .bl { width:8px;height:26px; bottom:0;left:0; background:transparent url(../assets/img/xp-bl.gif); position:absolute; }
+			#panel1.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.panel-container.shadow .underlay { background-color:#999; }
+			#panel2.panel { border:none; overflow:visible; background-color:transparent; } 
+
+			/* Apply styles to the close icon to anchor it to the left side of the header */
+			#panel2.panel .close { top:3px; left:4px; height:18px; width:17px; }
+			#panel2.panel .close.nonsecure { background-image:url(../assets/img/aqua-hd-close.gif); }
+			#panel2.panel .close.secure { background-image:url(../assets/img/aqua-hd-close.gif); }
+			#panel2.panel .close.nonsecure:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }
+			#panel2.panel .close.secure:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }
+
+			/* Style the header and apply the rounded corners, center the text */
+			#panel2.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.panel .hd span { vertical-align:middle; line-height:22px; }
+			#panel2.panel .hd .tl { width:7px; height:22px; top:0; left:0; background:transparent url(../assets/img/aqua-hd-lt.gif); position:absolute; }
+			#panel2.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.panel .bd { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; }
+			#panel2.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.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(document.body);
+
+					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>
+
+	</head>
+	<body>
+		<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>
+
+	</body>
+</html>

www/extras/yui/examples/container/panelwait/1.html

@@ -0,0 +1,123 @@
+<!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>YUI Container - Panel: Creating a 'Loading' Popup (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Panel: Creating a 'Loading' Popup</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item selected"><a href="1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="child active"><a href="1.html">Using Panel as a 'Wait' Indicator</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Using Panel as a 'Wait' Indicator</h1>
+
+								<p>The Panel can be used to display a temporary message is automatically dismissed when a task has completed. In this tutorial, we will build a Panel that will be displayed while content is being loaded from an external data source, and will be dismissed when the content has finished loading.</p>
+
+			<p>We will start by instantiating a Panel and configuring it to display an image and some text in its body:</p>
+			
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// 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, 
+														  modal:true,
+														  visible:false,
+														  effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5} 
+														} 
+													);
+
+				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);
+			</textarea>
+
+			<p>We will also need to place a container for the content that will be dynamically loaded:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+				<div id="content" style="visibility:hidden"></div>
+			</textarea>
+
+			<p>Finally, we will set up our Connection object and configure its callback to load the content into the container element and close the Panel after the content has finished loading. If the connection is successful, the content will be loaded into the container and the Panel will be hidden. If the connection fails, an error message will be displayed in the container.</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+
+				// Define the callback object for Connection Manager that will set the body of our content area when the content has loaded
+		
+				var content = document.getElementById("content");
+
+				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);
+			
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelwait/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Panel: Creating a 'Loading' Popup (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Panel: Creating a 'Loading' Popup</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item selected"><a href="1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="child"><a href="1.html">Using Panel as a 'Wait' Indicator</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Using Panel as a 'Wait' Indicator</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/panelwait/solution.html

@@ -0,0 +1,78 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/animation/animation.js" ></script>
+		<script type="text/javascript" src="../../../build/connection/connection.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+			#content { font-face:serif; text-align:justify; background:#fff; border:1px solid #ccc; width:400px; margin:50px auto; padding:5px; }
+		</style>
+
+		<script>
+				YAHOO.namespace("example.container");
+
+				function init() {
+					// 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, 
+															  modal:true,
+															  visible:false,
+															  effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5} 
+															} 
+														);
+
+					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 content = document.getElementById("content");
+
+					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.addListener(window, "load", init);
+		</script>
+
+	</head>
+	<body>
+
+		<div id="content" style="visibility:hidden"></div>
+
+	</body>
+</html>

www/extras/yui/examples/container/simpledialog/1.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>YUI Container - SimpleDialog Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: SimpleDialog Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item selected"><a href="1.html">SimpleDialog Quickstart</a></li>
+<li class="child active"><a href="1.html">Setting up the SimpleDialog</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the SimpleDialog</h1>
+
+								<p>The SimpleDialog component is an extension of Dialog that reproduces the behavior of a simple dialog box (but without using an actual browser popup window); its primary use is to elicit binary decisions from the user (yes/no, okay/cancel, etc.). SimpleDialog makes it easy to implement this kind of interaction. In this tutorial, we will create a SimpleDialog with "Yes"/"No" choices, and display an alert if the user clicks "Yes".</p>
+
+			<p>SimpleDialog defines two new properties:</p>
+			<ol>
+			  <li> <strong>icon</strong>: defines which of six standard icons will be displayed in the SimpleDialog;</li>
+			  <li><strong>text</strong>: used to specify a small amount of text to display in the SimpleDialog.</li>
+</ol>
+			<p> The "buttons" property is inherited from Dialog, and uses the same familiar array-of-object literals syntax as demonstrated in the following constructor:</p>
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				// 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 } ]
+												 } );
+			</textarea>
+
+			<p>Next, we'll define the handlers for our buttons. Clicking "Yes" will cause an alert to be displayed, whereas the "No" button will simply dismiss the SimpleDialog:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+
+				// Define various event handlers for Dialog
+				var handleYes = function() {
+					alert("You clicked yes!");
+					this.hide();
+				};
+
+				var handleNo = function() {
+					this.hide();
+				};
+
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/simpledialog/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - SimpleDialog Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: SimpleDialog Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item selected"><a href="1.html">SimpleDialog Quickstart</a></li>
+<li class="child"><a href="1.html">Setting up the SimpleDialog</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the SimpleDialog</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/simpledialog/solution.html

@@ -0,0 +1,70 @@
+<!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">
+		
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+		<script type="text/javascript" src="../../../build/dragdrop/dragdrop.js" ></script>
+		<script type="text/javascript" src="../../../build/connection/connection.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			body { background:#eee }
+			.clear { clear:both; }
+		</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(document.body);
+
+					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>
+
+	</head>
+	<body>
+		<div>
+			<button id="show">Show simpledialog1</button> 
+			<button id="hide">Hide simpledialog1</button>
+		</div>
+	</body>
+</html>

www/extras/yui/examples/container/tooltip/1.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>YUI Container - Tooltip: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Tooltip: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Tooltip: Quickstart</a></li>
+<li class="child active"><a href="1.html">Setting up the Tooltips</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the Tooltips</h1>
+
+								<p>The Tooltip control is an extension of Overlay that is analogous to popup tooltips within common operating systems. The standard tooltip interaction pattern involves a small overlay that is displayed when the mouse hovers over a context element for a specified amount of time. Tooltip is designed to be simple to implement with easily-accessed configuration options and visual styling handled entirely via CSS.</p>
+
+			<p>Tooltips are instantiated by script and are rendered (and hidden) automatically when the window's <em>load</em> event fires; no call to <em>render</em> is required. Tooltip introduces several specific configuration properties:</p>
+
+			<ul class="properties">
+				<li><strong>context</strong> - Defines the context element that will trigger the Tooltip to be displayed. This property can be set using either an element id or an element reference.</li>
+				<li><strong>text</strong> - The Tooltip's text. If the text property is omitted, the Tooltip will try to set its own text using the context element's "title" attribute.</li>
+				<li><strong>showdelay</strong> - The number of milliseconds to wait before showing the Tooltip on mouse over. Defaults to 200.</li>
+				<li><strong>hidedelay</strong> - The number of milliseconds to wait before hiding the Tooltip on mouse out. Defaults to 250.</li>
+				<li><strong>autodismissdelay</strong> - The number of milliseconds to wait before automatically dismissing the Tooltip. Defaults to 5000.</li>
+			</ul>
+
+			<p>In this tutorial, we will create two Tooltips. The first will be associated with an element with an id of "ctx", and will have its text set explicitly. The second Tooltip will be associated with a link with an id of "link", but it will retrieve its text from the link's "title" attribute:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+				YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", 
+										{ context:"ctx", 
+										  text:"My text was set using the 'text' configuration property" });
+				YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" });
+			</textarea>
+
+			<p>The corresponding markup for the context elements for this tutorial look like this:</p>
+
+			<textarea name="code" class="HTML" cols="60" rows="1">
+					<div id="ctx">Hover over me to see a Tooltip!</div>
+					<a id="link" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a>
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/tooltip/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Tooltip: Quickstart (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Tooltip: Quickstart</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Tooltip: Quickstart</a></li>
+<li class="child"><a href="1.html">Setting up the Tooltips</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the Tooltips</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/tooltip/solution.html

@@ -0,0 +1,36 @@
+<!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">
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+		
+		<style>
+			#ctx { background:orange;width:200px;height:200px; }
+		</style>
+
+		<script>
+			YAHOO.namespace("example.container");
+		</script>
+
+	</head>
+	<body>
+
+		<div id="ctx">Hover over me to see a Tooltip!</div>
+		
+		<a id="link" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a>
+		
+		<script type="text/javascript">
+			YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", { context:"ctx", text:"My text was set using the 'text' configuration property" });
+			YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" });
+		</script>
+
+	</body>
+</html>

www/extras/yui/examples/container/tooltipmulti/1.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>YUI Container - Tooltip: One Tooltip, Many Elements (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Tooltip: One Tooltip, Many Elements</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="child active"><a href="1.html">Setting up the Tooltip</a></li>
+<li class="child"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Setting up the Tooltip</h1>
+
+								<p>Tooltip can also be configured to reuse one Tooltip for multiple context elements with "title" attributes &mdash; by default, Tooltip will autopopulate its "text" configuration property with the contents of its context element's "title attribute. Reuse of Tooltip instances is an advisable performance enhancement strategy, especially when you have a large number of context elements that need to invoke Tooltips.</p>
+
+			<p>In this tutorial, we will dynamically create 25 links, and then associate a single Tooltip with all of the generated links. This is achieved by setting the <em>context</em> property to an array of element ids:</p>
+
+			<textarea name="code" class="JScript" cols="60" rows="1">
+					var contextElements = [];
+
+					for (var i=1;i<=25;i++) {
+						var a = document.createElement("a");
+						a.id = "link" + i;
+						a.href = "http://www.yahoo.com/";
+						a.title = "This is link number " + i;
+						a.innerHTML = i + ".  Hover over me to see my Tooltip";
+
+						document.body.appendChild(a);
+						document.body.appendChild(document.createElement("br"));
+						document.body.appendChild(document.createElement("br"));
+					
+						contextElements[contextElements.length] = a.id;
+					}
+
+					YAHOO.example.container.tt = new YAHOO.widget.Tooltip("tt", { context:contextElements } );
+			</textarea>
+					<div id="stepnav">
+						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/tooltipmulti/2.html

@@ -0,0 +1,71 @@
+<!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>YUI Container - Tooltip: One Tooltip, Many Elements (YUI Library)</title>
+
+	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
+
+	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
+	<link type="text/css" rel="stylesheet" href="../assets/style.css">
+</head>
+
+<body>
+
+	<div id="doc3" class="yui-t5">
+		<div id="hd">
+			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
+			<h1>YUI Container: Tooltip: One Tooltip, Many Elements</h1>
+		</div>
+
+		<div id="bd">
+
+					<div id="toc" class="yui-b">
+			<ul>
+				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
+
+<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
+<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
+<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
+<li class="item selected"><a href="1.html">Tooltip: One Tooltip, Many Elements</a></li>
+<li class="child"><a href="1.html">Setting up the Tooltip</a></li>
+<li class="child active"><a href="2.html">Functional Example</a></li>
+<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
+<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
+<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
+<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
+<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
+<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
+<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
+<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
+<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
+<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
+			</ul>
+		</div>
+			<div id="yui-main">
+				<div class="yui-b">
+					<h1 class="first">Functional Example</h1>
+
+											<p>You can see the full example in action below:</p>
+			
+			<div id="solution" style="">
+				<iframe src="solution.html" style="width:96%;height:325px"></iframe>
+				<a href="solution.html" target="_blank">Open this example in a new window</a>
+			</div>
+					<div id="stepnav">
+						<a class="back" href="1.html">&lt; Back to <em>Setting up the Tooltip</em></a>					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div id="ft">&nbsp;</div>
+	</div>	
+
+	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
+	<script language="javascript"> 
+		dp.SyntaxHighlighter.HighlightAll('code'); 
+	</script>
+
+</body>
+</html>

www/extras/yui/examples/container/tooltipmulti/solution.html

@@ -0,0 +1,44 @@
+<!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">
+		<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
+		<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
+
+		<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
+		<script type="text/javascript" src="../../../build/event/event.js" ></script>
+		<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
+
+		<script type="text/javascript" src="../../../build/container/container.js"></script>
+		<link type="text/css" rel="stylesheet" href="../../../build/container/assets/container.css">
+
+		<script>
+				YAHOO.namespace("example.container");
+
+				function init() {
+					var contextElements = [];
+
+					for (var i=1;i<=25;i++) {
+						var a = document.createElement("a");
+						a.id = "link" + i;
+						a.href = "http://www.yahoo.com/";
+						a.title = "This is link number " + i;
+						a.innerHTML = i + ".  Hover over me to see my Tooltip";
+
+						document.body.appendChild(a);
+						document.body.appendChild(document.createElement("br"));
+						document.body.appendChild(document.createElement("br"));
+					
+						contextElements[contextElements.length] = a.id;
+					}
+
+					YAHOO.example.container.tt = new YAHOO.widget.Tooltip("tt", { context:contextElements } );
+				}
+
+				YAHOO.util.Event.addListener(window, "load", init);
+		</script>
+	</head>
+
+	<body></body>
+
+</html>