update YUI to 2.8.0r4

www/extras/yui/examples/event/assets/checkbox.css

@@ -0,0 +1,76 @@
+.yui-checkbox {
+
+	display: -moz-inline-stack;	/* Gecko < 1.9, since it doesn't support "inline-block" */
+	display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
+	width: 10px;
+	height: 10px;
+	border: inset 2px #999;
+	
+	background-color: #fff;	/*	Need to set a background color or IE won't get mouse events	*/
+
+	/*
+		Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since 
+		they don't support use of negative margins without relative positioning.  
+	*/
+
+	_position: relative;
+}
+
+.yui-checkbox span {
+
+	display: block;
+	height: 14px;
+	width: 12px;
+	overflow: hidden;
+
+	/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
+	margin: -5px 0 0 1px;
+	
+
+	/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
+	_margin: 0;
+	_position: absolute;
+	_top: -5px;
+	_left: 1px;
+	
+}
+
+/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
+.yui-checkbox span:after {
+
+	content: ".";
+	visibility: hidden;
+	line-height: 2;
+
+}
+
+/*
+	Hide the actual checkbox offscreen so that it is out of view, but still accessible via 
+	the keyboard. 
+*/
+.yui-checkbox input {
+
+	position: absolute;
+	left: -10000px;
+
+}
+
+.yui-checkbox-focus {
+
+	border-color: #39f;
+	background-color: #9cf;
+
+}
+
+.yui-checkbox-active {
+
+	background-color: #ccc;
+
+}
+
+.yui-checkbox-checked span {
+
+	/* Draw a custom checkmark for the checked state using a background image. */
+	background: url(checkmark.png) no-repeat;
+
+}

www/extras/yui/examples/event/assets/checkbox.js

@@ -0,0 +1,316 @@
+(function () {
+
+	var Event = YAHOO.util.Event,
+		Dom = YAHOO.util.Dom,
+		Selector = YAHOO.util.Selector,
+		UA = YAHOO.env.ua,
+
+		bKeyListenersInitialized = false,
+		bMouseListenersInitialized = false,
+		sCheckboxFocusClass = "yui-checkbox-focus",
+		sCheckboxCheckedClass = "yui-checkbox-checked",
+		sCheckboxActiveClass = "yui-checkbox-active",
+		forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
+		bBlockDocumentMouseUp = false,
+		bBlockClearActive = false,
+		bBlockBlur = false,
+		oActiveCheckbox;			
+	
+
+	var initKeyListeners = function () {
+
+		Event.delegate(this, "keydown", onCheckboxKeyDown, ".yui-checkbox");
+		Event.delegate(this, "click", onCheckboxClick, ".yui-checkbox");
+		Event.delegate(this, "focusout", onCheckboxBlur, "input[type=checkbox]");
+
+		bKeyListenersInitialized = true;
+
+	};
+
+
+	var initMouseListeners = function () {
+
+		Event.delegate(this, "mouseover", onCheckboxMouseOver, ".yui-checkbox");
+		Event.delegate(this, "mouseout", onCheckboxMouseOut, ".yui-checkbox-active");
+		Event.on(this.ownerDocument, "mouseup", onDocumentMouseUp);
+
+		bMouseListenersInitialized = true;
+
+	};
+
+
+	var getCheckbox = function (node) {
+
+		return (Dom.hasClass(node, "yui-checkbox") ? node: 
+					Dom.getAncestorByClassName(node, "yui-checkbox"));
+
+	};
+
+
+	var getCheckboxForLabel = function (label) {
+
+		var sID = label.getAttribute(forAttr),
+			oInput,
+			oCheckbox;
+
+		if (sID) {
+
+			oInput = Dom.get(sID);
+
+			if (oInput) {
+				oCheckbox = getCheckbox(oInput);
+			}
+
+		}
+
+		return oCheckbox;
+
+	};
+
+
+	var updateCheckedState = function (input) {
+
+		var oCheckbox = getCheckbox(input);
+
+		if (input.checked) {
+			Dom.addClass(oCheckbox, sCheckboxCheckedClass);
+		}
+		else {
+			Dom.removeClass(oCheckbox, sCheckboxCheckedClass);
+		}
+
+	};
+
+
+	var setActiveCheckbox = function (checkbox) {
+
+		Dom.addClass(checkbox, sCheckboxActiveClass);
+		oActiveCheckbox = checkbox;
+
+	};
+
+
+	var clearActiveCheckbox = function () {
+
+		if (oActiveCheckbox) {
+			Dom.removeClass(oActiveCheckbox, sCheckboxActiveClass);
+			oActiveCheckbox = null;
+		}
+
+	};
+
+
+	var onCheckboxMouseOver = function (event, matchedEl) {
+
+		if (oActiveCheckbox === matchedEl) {
+			Dom.addClass(oActiveCheckbox, sCheckboxActiveClass);
+		}
+
+	};
+
+
+	var onCheckboxMouseOut = function (event, matchedEl) {
+
+		Dom.removeClass(matchedEl, sCheckboxActiveClass);
+
+	};				
+
+
+	var onDocumentMouseUp = function (event) {
+
+		var oCheckbox;
+
+		if (!bBlockDocumentMouseUp) {
+
+			oCheckbox = getCheckbox(Event.getTarget(event));
+
+			if ((oCheckbox && oActiveCheckbox !== oCheckbox) || !oCheckbox) {
+				clearActiveCheckbox();
+			}
+
+		}
+
+		bBlockDocumentMouseUp = false;
+
+	};
+
+
+	var onCheckboxFocus = function (event, matchedEl, container) {
+
+		//	Remove the focus style from any checkbox that might still have it
+
+		var oCheckbox = Selector.query(".yui-checkbox-focus", "checkboxes", true);
+
+		if (oCheckbox) {
+			Dom.removeClass(oCheckbox, sCheckboxFocusClass);
+		}
+
+
+		//	Defer adding key-related and click event listeners until 
+		//	one of the checkboxes is initially focused.
+
+		if (!bKeyListenersInitialized) {
+			initKeyListeners.call(container);
+		}
+
+		oCheckbox = getCheckbox(matchedEl);
+
+		Dom.addClass(oCheckbox, sCheckboxFocusClass);
+
+	};
+
+
+	var onCheckboxBlur = function (event, matchedEl) {
+
+		if (bBlockBlur) {
+			bBlockBlur = false;
+			return;
+		}
+
+		var oCheckbox = getCheckbox(matchedEl);
+
+		Dom.removeClass(oCheckbox, sCheckboxFocusClass);
+
+		if (!bBlockClearActive && oCheckbox === oActiveCheckbox) {
+			clearActiveCheckbox();
+		}
+
+		bBlockClearActive = false;
+
+	};
+
+
+	var onCheckboxMouseDown = function (event, matchedEl, container) {
+
+		//	Defer adding mouse-related and click event listeners until 
+		//	the user mouses down on one of the checkboxes.
+
+		if (!bMouseListenersInitialized) {
+			initMouseListeners.call(container);
+		}
+
+		var oCheckbox,
+			oInput;
+
+
+		if (matchedEl.nodeName.toLowerCase() === "label") {
+
+			//	If the target of the event was the checkbox's label element, the
+			//	label will dispatch a click event to the checkbox, meaning the 
+			//	"onCheckboxClick" handler will be called twice.  For that reason
+			//	it is necessary to block the "onDocumentMouseUp" handler from
+			//	clearing the active state, so that a reference to the active  
+			//	checkbox still exists the second time the "onCheckboxClick"
+			//	handler is called.
+
+			bBlockDocumentMouseUp = true;
+
+			//	When the user clicks the label instead of the checkbox itself, 
+			//	the checkbox will be blurred if it has focus.  Since the 
+			//	"onCheckboxBlur" handler clears the active state it is 
+			//	necessary to block the clearing of the active state when the 
+			//	label is clicked instead of the checkbox itself.
+
+			bBlockClearActive = true;
+
+			oCheckbox = getCheckboxForLabel(matchedEl);
+
+		}
+		else {
+
+			oCheckbox = matchedEl;
+
+		}
+
+		//	Need to focus the input manually for two reasons:
+		//	1) 	Mousing down on a label in Webkit doesn't focus its  
+		//		associated checkbox
+		//	2)	By default checkboxes are focused when the user mouses 
+		//		down on them.  However, since the actually checkbox is 
+		//		obscurred by the two span elements that are used to 
+		//		style it, the checkbox wont' receive focus as it was 
+		//		never the actual target of the mousedown event.
+
+		oInput = Selector.query("input", oCheckbox, true);
+
+		//	Calling Event.preventDefault won't block the blurring of the 
+		//	currently focused element in IE, so we'll use the "bBlockBlur"
+		//	variable to stop the code in the blur event handler  
+		//	from executing.
+
+		bBlockBlur = (UA.ie && document.activeElement == oInput);
+
+		oInput.focus();
+
+		setActiveCheckbox(oCheckbox);
+
+		//	Need to call preventDefault because by default mousing down on
+		//	an element will blur the element in the document that currently 
+		//	has focus--in this case, the input element that was 
+		//	just focused.
+
+		Event.preventDefault(event);
+
+	};
+
+
+	var onCheckboxClick = function (event, matchedEl) {
+
+		var oTarget = Event.getTarget(event),
+			oInput;
+
+
+		if (matchedEl === oActiveCheckbox) {
+
+			oInput = Selector.query("input", matchedEl, true);
+
+			if (oTarget !== oInput) {
+
+				//	If the click event was fired via the mouse the checked
+				//	state will have to be manually updated since the input 
+				//	is hidden offscreen and therefore couldn't be the 
+				//	target of the click.
+
+				oInput.checked = (!oInput.checked);
+
+			}
+
+			updateCheckedState(oInput);
+			clearActiveCheckbox();
+
+		}
+
+	};
+
+
+	var onCheckboxKeyDown = function (event, matchedEl) {
+
+		//	Style the checkbox as being active when the user presses the 
+		//	space bar
+
+		if (Event.getCharCode(event) === 32) {
+			setActiveCheckbox(matchedEl);						
+		}
+
+	};
+
+
+	var checkboxes = Selector.query("#checkboxes>div>span");
+	
+	for (var i = checkboxes.length - 1; i >= 0; i--) {
+		Dom.addClass(checkboxes[i], "yui-checkbox");
+	}
+
+	//	Remove the "yui-checkboxes-loading" class used to hide the 
+	//	checkboxes now that the checkboxes have been skinned.	
+	
+	document.documentElement.className = "";
+
+
+	//	Add the minimum number of event listeners needed to start, bind the 
+	//	rest when needed
+
+	Event.delegate("checkboxes", "mousedown", onCheckboxMouseDown, ".yui-checkbox,label");
+	Event.delegate("checkboxes", "focusin", onCheckboxFocus, "input[type=checkbox]");
+	
+}());

www/extras/yui/examples/event/custom-event_clean.html

@@ -1,6 +1,8 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
+
+
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Using Custom Events</title>
 
@@ -33,7 +35,7 @@ body {
 
 </head>
 
-<body class=" yui-skin-sam">
+<body class="yui-skin-sam">
 
 
 <h1>Using Custom Events</h1>

www/extras/yui/examples/event/event-delegation_clean.html

@@ -0,0 +1,159 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+
+
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Using Event Utility and Event Delegation to Improve Performance</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/selector/selector-min.js"></script>
+<script type="text/javascript" src="../../build/event-delegate/event-delegate-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+
+#list li { 
+	cursor: pointer;
+}
+
+#list li.selected {
+	background-color: red;	
+}
+
+#list li.hover {
+	background-color: yellow;
+}
+
+</style>
+
+
+<!--end custom header content for this example-->
+
+</head>
+
+<body class="yui-skin-sam">
+
+
+<h1>Using Event Utility and Event Delegation to Improve Performance</h1>
+
+<div class="exampleIntro">
+	<p>
+Event delegation is a technique whereby you use a single event handler on a 
+parent element to listen for interactions that affect the parent's descendant 
+elements; because events on the descendant elements will bubble up to the 
+parent, this can be a reliable and extremely efficient mitigation strategy for 
+reducing the number of resource-consuming event handlers you have on any given 
+page. (<a href="http://yuiblog.com/blog/2007/01/17/event-plan/">You can read 
+more about Event Delegation in this YUIBlog article</a>.)
+</p>
+<p>
+In the example below, mousing over an item in the list will change its 
+background color to yellow.  Clicking an item will change its 
+background color to red.  Because we're using event delegation, only one event 
+listener is needed for each type of event (<code>click</code>, 
+<code>mouseover</code>, and <code>mouseout</code>), regardless of the size of 
+the list.  To illustrate this point, click the "Add Item" button to append more 
+items to list.  An infinite number of items can be added to the list, and still 
+just one <code>click</code>, <code>mouseover</code>, and <code>mouseout</code> 
+event handler is required to highlight the items.
+</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div id="container">
+	<ul id="list">
+		<li id="li-1">List Item 1</li>
+		<li id="li-2">List Item 2</li>
+		<li id="li-3">List Item 3</li>
+		<li id="li-4">List Item 4</li>
+		<li id="li-5">List Item 5</li>
+	</ul>
+</div>
+<button id="add-item">Add Item</button>
+
+<script type="text/javascript">
+
+(function() {
+
+var Dom = YAHOO.util.Dom,
+	Event = YAHOO.util.Event;
+
+var onLIClick = function (event, matchedEl, container) {
+
+	if (Dom.hasClass(matchedEl, "selected")) {
+		Dom.removeClass(matchedEl, "selected");		
+	}
+	else {
+		Dom.addClass(matchedEl, "selected");
+	}
+
+};
+
+//	Use the "delegate" method to attach a "click" event listener to the 
+//	container (<div id="container">).  The listener will only be called if the 
+//	target of the click event matches the element specified via the CSS 
+//	selector passed as the fourth argument to the delegate method.
+
+Event.delegate("container", "click", onLIClick, "li");
+
+var onLIMouseOver = function (event, matchedEl, container) {
+
+	Dom.addClass(matchedEl, "hover");
+};
+
+var onLIMouseOut = function (event, matchedEl, container) {
+
+	Dom.removeClass(matchedEl, "hover");
+	
+};
+
+
+//	Use the "delegate" method to attach a mouseover and mouseout event listener 
+//	to the container (<div id="container">).  The listener will only be called  
+//	if the target of the click event matches the element specified via the CSS 
+//	selector passed as the fourth argument to the delegate method.
+
+Event.delegate("container", "mouseover", onLIMouseOver, "li");
+Event.delegate("container", "mouseout", onLIMouseOut, "li");
+
+
+//	Add a click event listener to the button that will add new items to the list
+//	to illustrate that new items can be added and the existing click, mouseover,
+//	and mouseout event listeners will apply to them as well.
+
+Event.on("add-item", "click", function (event) {
+
+	var list = Dom.get("list"),
+		items = Dom.getChildren(list),
+ 		nItemNumber = (items.length + 1),
+ 		fragment = Dom.get("container").ownerDocument.createElement("div");
+	
+	fragment.innerHTML = '<li id ="li-'+ nItemNumber +'">List Item ' + nItemNumber + '</li>';
+
+	list.appendChild(fragment.firstChild);
+	
+});
+
+})();
+
+</script>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/event/event-focus-blur_clean.html

@@ -0,0 +1,140 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+
+
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Skinning via Progressive Enhancement using the Event Utility and the YUILoader</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+
+	.yui-checkboxes-loading #checkboxes {
+		display: none;
+	}
+
+</style>
+
+<script type="text/javascript">
+
+	//	Hide the checkboxes if JavaScript is enabled to prevent 
+	//	the user from seeing a flash of unstyled content while
+	//	the JavaScript for the checkboxes is being loaded.
+	document.documentElement.className = "yui-checkboxes-loading";
+
+</script>
+<!--end custom header content for this example-->
+
+</head>
+
+<body class="yui-skin-sam">
+
+
+<h1>Skinning via Progressive Enhancement using the Event Utility and the YUILoader</h1>
+
+<div class="exampleIntro">
+	<p>
+Using Progressive Enhancement to skin checkboxes with the help of the YUILoader 
+and the Event Utility's <code>focus</code> and <code>blur</code> events and the 
+<code>delegate</code> method.
+</p>			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div id="checkboxes">
+	<div>
+		<label for="field-1">Field 1: </label>
+		<span>
+			<span>
+				<input type="checkbox" id="field-1" name="field-1" value="1">
+			</span>
+		</span>
+	</div>
+	<div>
+		<label for="field-2">Field 2: </label>
+		<span>
+			<span>
+				<input type="checkbox" id="field-2" name="field-2" value="2">
+			</span>
+		</span>
+	</div>
+	<div>
+		<label for="field-3">Field 3: </label>
+		<span>
+			<span>
+				<input type="checkbox" id="field-3" name="field-3" value="3">
+			</span>
+		</span>
+	</div>			
+</div>
+
+<script type="text/javascript">
+
+	(function () {
+
+		//	Use the YUILoader to load the JavaScript and CSS required for 
+		//	skinning the checkboxes.
+
+		var loader = new YAHOO.util.YUILoader({
+		
+		    require: ["event-delegate"],
+		    loadOptional: true,
+			base: '../../build/',
+		    timeout: 10000,
+			onFailure: function () {
+
+				//	Show the checkboxes if the loader failed that way the original 
+				//	unskinned checkboxes will be visible so that the user can
+				//	interact with them either way.		
+
+				document.documentElement.className = "";
+				
+			}
+		
+		});
+
+		loader.addModule({		
+			name: 'checkboxstyles',
+			type: 'css',
+			varName: "CheckboxCSS",
+			fullpath: 'assets/checkbox.css'
+		});
+
+		loader.addModule({		
+			name: 'checkboxjs',
+			type: 'js',
+			varName: "CheckboxJS", 
+			fullpath: 'assets/checkbox.js'
+		});
+
+	    loader.require(["checkboxstyles", "checkboxjs"]);
+		
+		loader.insert();
+		
+	}());
+
+</script>
+
+
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>

www/extras/yui/examples/event/eventsimple_clean.html

@@ -1,6 +1,8 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
+
+
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Simple Event Handling and Processing</title>
 
@@ -23,7 +25,7 @@ body {
 
 </head>
 
-<body class=" yui-skin-sam">
+<body class="yui-skin-sam">
 
 
 <h1>Simple Event Handling and Processing</h1>