upgrading to YUI 2.6

data tables are going to need some work yet, but the other stuff seems to be working 100%
2008-10-22 23:53:29 +00:00 · 2008-10-22 23:53:29 +00:00 · 20f8df1291
commit 20f8df1291
parent a041e93da8
2106 changed files with 993560 additions and 237 deletions
--- a/www/extras/yui/examples/carousel/assets/carouselariaplugin-min.js
+++ b/www/extras/yui/examples/carousel/assets/carouselariaplugin-min.js
@ -0,0 +1 @@
+(function(){var t=YAHOO.util.Event,u=YAHOO.util.Dom,AC=YAHOO.lang,k=YAHOO.env.ua,AE=YAHOO.widget.Carousel.prototype,P=AE.initAttributes,O={},o={},a=(k.gecko&&k.gecko>=1.9)||(k.ie&&k.ie>=8),p={"A":true,"SELECT":true,"TEXTAREA":true,"BUTTON":true,"INPUT":true},n="usearia",W="aria-",I="hidden",i="*",e="id",AB="role",j="option",r="listbox",b="li",d="selectedItem",A="selected",R="toolbar",AD="keydown",v="presentation",N="button",y="href",f="UL",V="A",c="render",G="selectedItemChange",D="show",K="pageChange",L="keypress",B="controls",Z="labelledby",Y="describedby",H=" (Current Page)";var S=function(AF,AG){AF.setAttribute(AB,AG);};var U=function(AF,AH,AG){AF.setAttribute((W+AH),AG);};var s=function(){var AF=this.getElementsByClassName(this.CLASSES.CAROUSEL_EL);if(AF.length===1){return AF[0];}};var J=function(){var AF=this.getElementsByClassName(this.CLASSES.NAVIGATION);if(AF.length===1){return AF[0];}};var x=function(AF){return((AF.tabIndex>-1||p[AF.nodeName.toUpperCase()])&&AF.type!==I&&!AF.disabled);};var C=function(AF){AF.tabIndex=0;};var w=function(AF){AF.tabIndex=-1;};var h=function(AF){var AG=this.getItem(AF);if(AG){u.getElementsBy(x,i,AG.id,C);}};var z=function(AF){var AG=this.getItem(AF);if(AG){u.getElementsBy(x,i,AG.id,w);}};var g=function(AG){var AF=AG.prevValue;if(AC.isNumber(AF)){z.call(this,AF);}h.call(this,AG.newValue);U(this.getElementForItem(AG.newValue),A,true);};var M=function(AK){t.stopPropagation(AK);var AJ=this.get(e),AI=O[AJ],AH=o[AJ],AG,AF;switch(t.getCharCode(AK)){case 37:case 38:AF=AI[AH];AF.tabIndex=-1;AH=AH-1;AG=AI[AH];if(!AG){AH=AI.length-1;AG=AI[AH];}o[AJ]=AH;AG.tabIndex=0;AG.focus();break;case 39:case 40:AF=AI[AH];AF.tabIndex=-1;AH=AH+1;AG=AI[AH];if(!AG){AH=0;AG=AI[AH];}o[AJ]=AH;AG.tabIndex=0;AG.focus();break;}};var q=function(AF){S(AF,j);u.getElementsBy(x,i,AF,w);};var E=function(){var AH=s.call(this),AG,AF;if(AH){S(AH,r);u.batch(AH.getElementsByTagName(b),q);AG=this.get(d);if(AC.isNumber(AG)){U(this.getElementForItem(AG),A,true);h.call(this,AG);}AF=J.call(this);if(AF){S(AF,R);t.on(AF,AD,M,null,this);}}};var X=function(AK,AI){var AM=AI.carousel,AG=AI.toolbarButtons;S(AK,v);var AL=u.getFirstChild(AK);S(AL,N);U(AL,B,AI.listID);AL.value=AL.getAttribute(y,2);AL.removeAttribute(y);var AJ=u.hasClass(AK,AM.CLASSES.SELECTED_NAV)?0:-1;AL.tabIndex=AJ;var AH=AG.length;var AF=u.getFirstChild(AL);if(AJ===0){o[AM.get(e)]=AH;AF.innerHTML=AF.innerHTML+H;}AG[AH]=AL;};var Q=function(AG,AF){var AH=AF.toolbarButtons;S(AG,v);U(AG,B,AF.listID);var AI=u.getFirstChild(AG);if(!AI.disabled){AI.tabIndex=-1;AH[AH.length]=AI;}};var m=function(AJ){var AH=J.call(this),AG=[],AF,AL,AK,AI;if(AH){AL=u.getFirstChild(AH);AK=s.call(this);if(AL&&AK){AI=AK.id||u.generatId(AK);if(AL.nodeName.toUpperCase()===f){S(AL,v);u.batch(AL.getElementsByTagName(b),X,{carousel:this,toolbarButtons:AG,listID:AI});}else{AL.tabIndex=0;U(AL,B,AI);}u.batch(this.getElementsByClassName(this.CLASSES.BUTTON),Q,{toolbarButtons:AG,listID:AI});O[this.get(e)]=AG;}}};var l=function(){AC.later(0,this,m);};var AA=function(AH){var AF=t.getTarget(AH),AG=t.getCharCode(AH);if(AF.nodeName.toUpperCase()===V&&u.getAncestorByClassName(AF,this.CLASSES.NAVIGATION)&&(AG===13||AG===32)){this._pagerClickHandler(AH);}};var F=function(AF,AG){this.set(Z,AG,true);this.removeListener(c,F);};var T=function(AF,AG){this.set(Y,AG,true);this.removeListener(c,T);};AC.augmentObject(AE,{_setLabelledBy:function(AH){var AF=J.call(this),AG=s.call(this);if(this.get(n)&&AF&&AG){U(AF,Z,AH);U(AG,Z,AH);}else{this.on(c,F,AH);}},_setDescribedBy:function(AH){var AF=J.call(this),AG=s.call(this);if(this.get(n)&&AF&&AG){U(AF,Y,AH);U(AG,Y,AH);}else{this.on(c,T,AH);}},_setUseARIA:function(AF){if(AF){this.on(c,E);this.on(G,g);this.on(D,m);this.on(K,l);this.on(L,AA);}},initAttributes:function(AF){this.setAttributeConfig(n,{value:AF.usearia||a,validator:AC.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(Z,{value:AF.labelledby,validator:AC.isString,method:this._setLabelledBy});this.setAttributeConfig(Y,{value:AF.describedby,validator:AC.isString,method:this._setDescribedBy});P.apply(this,arguments);if(a){this.set(n,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy");}());
--- a/www/extras/yui/examples/carousel/assets/carouselariaplugin.js
+++ b/www/extras/yui/examples/carousel/assets/carouselariaplugin.js
@ -0,0 +1,501 @@
+(function () {
+
+	var Event = YAHOO.util.Event,
+		Dom = YAHOO.util.Dom,
+		Lang = YAHOO.lang,
+		UA = YAHOO.env.ua,
+		
+		CarouselPrototype = YAHOO.widget.Carousel.prototype,
+		fnCarouselInitAttributes = CarouselPrototype.initAttributes,
+
+		m_oToolbarButtons = {},
+		m_oCurrentButtonIndex = {},
+
+		m_bUseARIA = (UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8),
+		
+		m_aFocusableElements = {
+		
+			"A": true,
+			"SELECT": true,
+			"TEXTAREA": true,
+			"BUTTON": true,
+			"INPUT": true
+		
+		},
+
+		_USE_ARIA = "usearia",
+		_ARIA_PREFIX = "aria-",
+		_HIDDEN = "hidden",
+		_ASTERIX = "*",
+		_ID = "id",
+		_ROLE = "role",
+		_OPTION = "option",
+		_LISTBOX = "listbox",
+		_LI = "li",
+		_SELECTED_ITEM = "selectedItem",
+		_SELECTED = "selected",
+		_TOOLBAR = "toolbar",
+		_KEY_DOWN = "keydown",
+		_PRESENTATION = "presentation",
+		_BUTTON = "button",
+		_HREF = "href",
+		_UL = "UL",
+		_A = "A",
+		_RENDER = "render", 
+		_SELECTED_ITEM_CHANGE = "selectedItemChange",
+		_SHOW = "show",
+		_PAGE_CHANGE = "pageChange",
+		_KEY_PRESS = "keypress",
+		_CONTROLS = "controls",
+		_LABELLED_BY = "labelledby",
+		_DESCRIBED_BY = "describedby",
+		_CURRENT_PAGE = " (Current Page)";
+
+
+
+	var setARIARole = function (element, role) {
+	
+		element.setAttribute(_ROLE, role);
+	
+	};
+
+	var setARIAProperty = function (element, property, value) {
+
+		element.setAttribute((_ARIA_PREFIX + property), value);
+	
+	};
+
+	var getCarouselListElement = function () {
+
+		var aCarouselEl = this.getElementsByClassName(this.CLASSES.CAROUSEL_EL);
+
+		if (aCarouselEl.length === 1) {
+			return aCarouselEl[0];
+		}
+	
+	};
+	
+
+	var getCarouselNavElement = function () {
+
+		var aNavigationEl = this.getElementsByClassName(this.CLASSES.NAVIGATION);
+		
+		if (aNavigationEl.length === 1) {
+			return aNavigationEl[0];
+		}
+	
+	};
+
+	var isFocusableElement = function (element) {
+
+		return ((element.tabIndex > -1 || m_aFocusableElements[element.nodeName.toUpperCase()]) && 
+			element.type !== _HIDDEN && !element.disabled);
+
+	};
+
+
+	var addToTabIndex = function (element) {
+	
+		element.tabIndex = 0;
+	
+	};
+
+
+	var removeFromTabIndex = function (element) {
+	
+		element.tabIndex = -1;
+	
+	};	
+
+
+	var enableCarouselItem = function (index) {
+	
+		var oItem = this.getItem(index);
+
+		if (oItem) {
+			Dom.getElementsBy(isFocusableElement, _ASTERIX, oItem.id, addToTabIndex);
+		}
+	
+	};
+
+	
+	var disableCarouselItem = function (index) {
+
+		var oItem = this.getItem(index);
+		
+		if (oItem) {
+			Dom.getElementsBy(isFocusableElement, _ASTERIX, oItem.id, removeFromTabIndex);
+		}
+	
+	};
+
+
+	var onSelectedItemChange = function (event) {
+
+		var nPreviousItemIndex = event.prevValue;
+
+		if (Lang.isNumber(nPreviousItemIndex)) {
+			disableCarouselItem.call(this, nPreviousItemIndex);
+		}
+
+		enableCarouselItem.call(this, event.newValue);
+		
+		setARIAProperty(this.getElementForItem(event.newValue), _SELECTED, true);
+	
+	};
+
+
+	var onKeyDown = function (event) {
+	
+		Event.stopPropagation(event);
+
+		var sId = this.get(_ID),
+			aToolBarButtons = m_oToolbarButtons[sId],
+			nCurrentButtonIndex = m_oCurrentButtonIndex[sId],
+			oNextButton,
+			oCurrentButton;
+		
+		
+		switch (Event.getCharCode(event)) {
+
+            case 0x25:	// left arrow
+            case 0x26:	// up arrow
+
+				oCurrentButton = aToolBarButtons[nCurrentButtonIndex];
+				oCurrentButton.tabIndex = -1;
+
+				nCurrentButtonIndex = nCurrentButtonIndex - 1;
+
+				oNextButton = aToolBarButtons[nCurrentButtonIndex];
+				
+				if (!oNextButton) {
+					nCurrentButtonIndex = aToolBarButtons.length - 1;
+					oNextButton = aToolBarButtons[nCurrentButtonIndex];
+				}
+				
+				m_oCurrentButtonIndex[sId] = nCurrentButtonIndex;
+
+				oNextButton.tabIndex = 0;
+				oNextButton.focus();
+
+			break;
+
+            case 0x27:	// right arrow
+            case 0x28:	// down arrow
+
+				oCurrentButton = aToolBarButtons[nCurrentButtonIndex];
+				oCurrentButton.tabIndex = -1;
+
+				nCurrentButtonIndex = nCurrentButtonIndex + 1;
+
+				oNextButton = aToolBarButtons[nCurrentButtonIndex];
+				
+				if (!oNextButton) {
+					nCurrentButtonIndex = 0;
+					oNextButton = aToolBarButtons[nCurrentButtonIndex];
+				}
+
+				m_oCurrentButtonIndex[sId] = nCurrentButtonIndex;
+				
+				oNextButton.tabIndex = 0;
+				oNextButton.focus();
+
+			break;
+		
+		}
+
+	};
+
+
+	var addOptionRole = function (element) {
+
+		setARIARole(element, _OPTION);
+		
+		Dom.getElementsBy(isFocusableElement, _ASTERIX, element, removeFromTabIndex);
+
+	};
+
+
+	var onRender = function () {
+
+		var oList = getCarouselListElement.call(this),
+			nSelectedItemIndex,
+			oNavigation;		
+
+
+		if (oList) {
+
+			setARIARole(oList, _LISTBOX);
+			Dom.batch(oList.getElementsByTagName(_LI), addOptionRole);
+	
+
+			nSelectedItemIndex = this.get(_SELECTED_ITEM);
+		
+			if (Lang.isNumber(nSelectedItemIndex)) {
+				setARIAProperty(this.getElementForItem(nSelectedItemIndex), _SELECTED, true);
+				enableCarouselItem.call(this, nSelectedItemIndex);
+			}
+			
+	
+			oNavigation = getCarouselNavElement.call(this);
+	
+			if (oNavigation) {
+				setARIARole(oNavigation, _TOOLBAR);
+				Event.on(oNavigation, _KEY_DOWN, onKeyDown, null, this);
+			}
+	
+		}
+	
+	};
+
+
+	var setupPageButton = function (element, object) {
+
+		var oCarousel = object.carousel,
+			aToolBarButtons = object.toolbarButtons;
+
+		setARIARole(element, _PRESENTATION);
+		
+		var oAnchor = Dom.getFirstChild(element);
+
+		setARIARole(oAnchor, _BUTTON);
+		setARIAProperty(oAnchor, _CONTROLS, object.listID);
+
+		oAnchor.value = oAnchor.getAttribute(_HREF, 2);
+		oAnchor.removeAttribute(_HREF);
+
+		var nTabIndex = Dom.hasClass(element, oCarousel.CLASSES.SELECTED_NAV) ? 0 : -1;
+
+		oAnchor.tabIndex = nTabIndex;
+		
+		var nToolBarIndex = aToolBarButtons.length;
+		var oEM = Dom.getFirstChild(oAnchor);
+
+		if (nTabIndex === 0) {
+			m_oCurrentButtonIndex[oCarousel.get(_ID)] = nToolBarIndex;
+			oEM.innerHTML = oEM.innerHTML + _CURRENT_PAGE;
+		}
+
+		aToolBarButtons[nToolBarIndex] = oAnchor;
+	
+	};
+	
+
+	var setupNextPrevPageButton = function (element, object) {
+
+		var aToolbarButtons = object.toolbarButtons;
+
+		setARIARole(element, _PRESENTATION);
+		setARIAProperty(element, _CONTROLS, object.listID);
+		
+		var oInput = Dom.getFirstChild(element);
+		
+		if (!oInput.disabled) {
+			oInput.tabIndex = -1;
+			aToolbarButtons[aToolbarButtons.length] = oInput;
+		}
+	
+	};
+
+
+	var updatePagingNav = function (event) {
+	
+		var oNavigation = getCarouselNavElement.call(this),
+			aToolBarButtons = [],
+			nCurrentButtonIndex,
+			oFirstChild,
+			oList,
+			sListID;
+		
+
+		if (oNavigation) {
+
+			oFirstChild = Dom.getFirstChild(oNavigation);
+			oList = getCarouselListElement.call(this);
+
+
+			if (oFirstChild && oList) {
+
+				sListID = oList.id || Dom.generatId(oList);
+	
+				if (oFirstChild.nodeName.toUpperCase() === _UL) {
+
+					setARIARole(oFirstChild, _PRESENTATION);
+
+					Dom.batch(oFirstChild.getElementsByTagName(_LI), setupPageButton, 
+						{ carousel: this, toolbarButtons: aToolBarButtons, listID: sListID });
+
+				}
+				else {
+
+					oFirstChild.tabIndex = 0;
+					setARIAProperty(oFirstChild, _CONTROLS, sListID);
+
+				}
+				
+				Dom.batch(this.getElementsByClassName(this.CLASSES.BUTTON), 
+					setupNextPrevPageButton, { toolbarButtons: aToolBarButtons, listID: sListID });
+	
+				m_oToolbarButtons[this.get(_ID)] = aToolBarButtons;
+			
+			}
+		
+		}
+
+	};
+
+
+	var onPageChange = function () {
+
+		Lang.later(0, this, updatePagingNav);
+	
+	};
+
+
+	var onKeyPress = function (event) {
+				
+		var oTarget = Event.getTarget(event),
+			nCharCode = Event.getCharCode(event);
+
+		if (oTarget.nodeName.toUpperCase() === _A && 
+			Dom.getAncestorByClassName(oTarget, this.CLASSES.NAVIGATION) && 
+			(nCharCode === 13 || nCharCode === 32)) {
+
+			this._pagerClickHandler(event);
+		
+		}
+	
+	};
+
+
+	var setLabelledByOnRender = function (event, id) {
+
+		this.set(_LABELLED_BY, id, true);
+		this.removeListener(_RENDER, setLabelledByOnRender);
+
+	};
+
+
+	var setDescribedByOnRender = function (event, id) {
+
+		this.set(_DESCRIBED_BY, id, true);
+		this.removeListener(_RENDER, setDescribedByOnRender);
+
+	};
+
+
+	Lang.augmentObject(CarouselPrototype, {
+	
+		_setLabelledBy: function (id) {
+
+			var oNav = getCarouselNavElement.call(this),
+				oList = getCarouselListElement.call(this);
+
+			if (this.get(_USE_ARIA) && oNav && oList) {
+				setARIAProperty(oNav, _LABELLED_BY, id);
+				setARIAProperty(oList, _LABELLED_BY, id);
+			}
+			else {
+				this.on(_RENDER, setLabelledByOnRender, id);
+			}
+			
+		},
+		
+		_setDescribedBy: function (id) {
+
+			var oNav = getCarouselNavElement.call(this),
+				oList = getCarouselListElement.call(this);
+
+			if (this.get(_USE_ARIA) && oNav && oList) {
+				setARIAProperty(oNav, _DESCRIBED_BY, id);
+				setARIAProperty(oList, _DESCRIBED_BY, id);
+			}
+			else {
+				this.on(_RENDER, setDescribedByOnRender, id);
+			}
+		
+		},
+	
+		_setUseARIA: function (p_bUseARIA) {
+	
+			if (p_bUseARIA) {
+	
+				this.on(_RENDER, onRender);
+				this.on(_SELECTED_ITEM_CHANGE, onSelectedItemChange);
+				this.on(_SHOW, updatePagingNav);
+				this.on(_PAGE_CHANGE, onPageChange);
+				this.on(_KEY_PRESS, onKeyPress);
+			
+			}
+	
+		},
+	
+		initAttributes: function (p_oAttributes) {
+			
+            /**
+            * @attribute usearia
+            * @description Boolean indicating if use of the WAI-ARIA Roles and States should 
+            * be enabled.
+            * @type Boolean
+            * @default true for Firefox 3 and IE 8, false for all other browsers.
+            */
+			this.setAttributeConfig(_USE_ARIA, {
+		
+				value: p_oAttributes.usearia || m_bUseARIA,
+				validator: Lang.isBoolean,
+				writeOnce: true,
+				method: this._setUseARIA
+		
+			});
+
+
+            /**
+            * @attribute labelledby
+            * @description String representing the id of the element that labels the Carousel's
+            * navigation (<code>&#60;div class="yui-carousel-nav"&#62;</code>) and content 
+            * (<code>&#60;div class="yui-carousel-content"&#62;</code>) elements.
+            * Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#labelledby">
+            * <code>aria-labelledby</code></a> attribute.
+            * @type String
+            * @default null
+            */
+			this.setAttributeConfig(_LABELLED_BY, {
+		
+				value: p_oAttributes.labelledby,
+				validator: Lang.isString,
+				method: this._setLabelledBy
+
+			});
+
+
+            /**
+            * @attribute describedby
+            * @description String representing the id of the element that describes the Carousel's
+            * navigation (<code>&#60;div class="yui-carousel-nav"&#62;</code>) and content 
+            * (<code>&#60;div class="yui-carousel-content"&#62;</code>) elements.
+            * Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#describedby">
+            * <code>aria-describedby</code></a> attribute.
+            * @type String
+            * @default null
+            */
+			this.setAttributeConfig(_DESCRIBED_BY, {
+		
+				value: p_oAttributes.describedby,
+				validator: Lang.isString,
+				method: this._setDescribedBy
+
+			});
+
+
+			fnCarouselInitAttributes.apply(this, arguments);
+
+
+			if (m_bUseARIA) {
+				this.set(_USE_ARIA, true);			
+			}			
+	
+		}
+	
+	}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy");
+
+}());
--- a/www/extras/yui/examples/carousel/assets/php/getimages.php
+++ b/www/extras/yui/examples/carousel/assets/php/getimages.php
@ -0,0 +1,36 @@
+<?php
+error_reporting(0);
+
+$images = array(
+    'http://farm1.static.flickr.com/112/259393256_db700f455f_s.jpg',
+    'http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg',
+    'http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg',
+    'http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg',
+    'http://farm1.static.flickr.com/92/259391837_c51c12afae_s.jpg',
+    'http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg',
+    'http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg',
+    'http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg',
+    'http://farm1.static.flickr.com/93/258613376_ff23d40bbf_s.jpg',
+    'http://farm1.static.flickr.com/87/259398074_395d6000fe_s.jpg',
+    'http://farm1.static.flickr.com/112/259383196_7af79d83ef_s.jpg',
+    'http://farm1.static.flickr.com/81/258622067_7e136cb6bc_s.jpg',
+    'http://farm1.static.flickr.com/95/259394895_8944fe68bc_s.jpg',
+    'http://farm1.static.flickr.com/107/259394141_03f8cf975a_s.jpg',
+    'http://farm1.static.flickr.com/111/259384471_7e387ad17c_s.jpg',
+    'http://farm1.static.flickr.com/108/259396982_b330f60663_s.jpg',
+    'http://farm1.static.flickr.com/81/259386441_c5fb7049de_s.jpg'
+);
+
+$num = 3;                       // number of items to return
+$pos = (int)$_GET['pos'];
+
+$rv = '[';
+for ($i = 0; $i < $num; $i++) {
+    $rv .= '"'.$images[$pos+$i].'",';
+}
+$rv = preg_replace('/,$/', '', $rv);
+$rv .= ']';
+
+header('Content-Type: application/json');
+echo $rv;
+?>
--- a/www/extras/yui/examples/carousel/carousel-ariaplugin.html
+++ b/www/extras/yui/examples/carousel/carousel-ariaplugin.html
--- a/www/extras/yui/examples/carousel/carousel-ariaplugin_log.html
+++ b/www/extras/yui/examples/carousel/carousel-ariaplugin_log.html
--- a/www/extras/yui/examples/carousel/carousel-ariaplugin_source.html
+++ b/www/extras/yui/examples/carousel/carousel-ariaplugin_source.html
@ -0,0 +1,213 @@
+<!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>Carousel: Using the Carousel ARIA Plugin</title>
+
+		<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css"> 
+		<link type="text/css" rel="stylesheet" href="../../build/carousel/assets/skins/sam/carousel.css">	
+
+		<style type="text/css">
+
+			.yui-carousel-element li {
+				height: 158px;
+				text-align: left;
+			}
+		
+			#container {
+				font-size: 13px;
+				margin: 0 auto;
+			}
+		
+			#container a {
+				text-decoration: none;
+			}
+			
+			#container li img {
+				border: 0;
+			}
+					
+			#container .intro {
+				display: inline;
+				margin: 0px 14px 0px 4px;
+				width: 202px;
+			}
+					
+			#container .item {
+				display: inline;
+				margin: 0 22px 0 12px;
+				overflow: hidden;
+				padding-right: 80px;
+				width: 106px;
+			}
+		
+			#container .item .authimg {
+				bottom: 2px;
+				margin-left: 61px;
+				position: absolute;
+				z-index: 1;
+			}
+					
+			#container .item h3 {
+				line-height: 85%;
+				margin-top: 4px;
+			}
+					
+			#container .item h3 a {
+				font: 77% Arial, sans-serif;
+				position: relative;
+				text-transform: uppercase;
+				z-index: 2;
+			}
+					
+			#container .item h3 a:link {
+				color:#35a235;
+			}
+					
+			#container .item h4 {
+				margin-top:5px;
+			}
+					
+			#container .item h4 a {
+				font: 100% Georgia, Times, serif;
+				position: relative;
+				z-index:2;
+			}
+		
+			#container .item h4 a:link {
+				color:#00639b;
+			}
+					
+			#container .item cite {
+				color: #888;
+				display: block;
+				font-size: 77%;
+				line-height: normal;
+				margin-bottom: 30px;
+			}
+					
+			#container .item p.all {
+				bottom: 25px;
+				position: absolute;
+				z-index: 2;
+			}
+					
+			#container .item p.all a {
+				font-weight: bold;
+				font-size: 85%;
+			}
+
+			/*
+				The Carousel ARIA Plugin removes the "href" attribute from the <A> elements used to 
+				create the buttons in the navigation, resulting in the focus outline no longer be 
+				rendered in Gecko-based browsers when the <A> element is focused.  For this reason, 
+				it is necessary to restore the focus outline for the <A>.
+			*/				
+			a[role=button]:focus {
+				outline: dotted 1px #000;
+			}    
+			
+		</style>
+
+		<script src="../../build/utilities/utilities.js"></script>
+		<script src="../../build/carousel/carousel-beta-min.js"></script>
+		<script type="text/javascript" src="../carousel/assets/carouselariaplugin.js"></script>	
+
+	</head>
+	<body class="yui-skin-sam">
+		<h1 id="my-carousel-label">Expert Health Advice</h1>
+		<div id="container">
+			<ol id="carousel">
+				<li class="intro"><a href="http://health.yahoo.com/experts/"><img width="202" height="162" alt="Health Expert Advice: Leading experts share advice, tips and personal experiences." src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/></a></li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/"><img width="125" height="154" alt="Leslie Baumann, M.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">Skin Treatments for&#8240;</a></h4>
+					<cite>Posted Thu 5.1.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/"><img width="125" height="154" alt="Deepak Chopra, M.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">How You Think About Illness&#8240;</a></h4>
+					<cite>Posted Thu 5.1.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/"><img width="125" height="154" class="lz" alt="Christine McKinney, M.S., R.D., C.D.E." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">Christine McKinney, M.S., R.D., C.D.E.</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">Fat: How Much Is Enough of a&#8240;</a></h4>
+					<cite>Posted Thu 5.1.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/"><img width="125" height="154" class="lz" alt="Dr. Maoshing Ni" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/MaoshingNi_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">Centenarian Tips for a Long&#8240;</a></h4>
+					<cite>Posted Tue 4.29.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/"><img width="125" height="154" class="lz" alt="Lillie Shockney, R.N., M.A.S." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LillieShockney_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
+					Lillie Shockney, R.N., M.A.S.</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">Are You Being Over- or&#8240;</a></h4>
+					<cite>Posted Tue 4.29.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/depression/bio/david-neubauer/"><img width="125" height="154" class="lz" alt="David Neubauer, M.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">Could a Breast Cancer&#8240;</a></h4>
+					<cite>Posted Tue 4.29.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/capessa/bio/capessa/"><img width="125" height="154" class="lz" alt="Jennifer Tuma-Young" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Capessa_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">Relieve Stress With Your&#8240;</a></h4>
+					<cite>Posted Mon 4.28.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/"><img width="125" height="154" class="lz" alt="Lucy Danziger, SELF Edit" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LucyDanziger_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/healthieryou/2639/de-stress-in-mere-minutes/">De-Stress in Mere Minutes</a></h4>
+					<cite>Posted Mon 4.28.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/"><img width="125" height="154" class="lz" alt="Simeon Margolis, M.D., Ph.D." src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">Alzheimer's and Dementia: Will&#8240;</a></h4>
+					<cite>Posted Mon 4.28.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts &#187;</a></p>
+				</li>
+				<li class="item">
+					<a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/intentblog/bio/intentblog/"><img width="125" height="154" class="lz" alt="Mallika Chopra, IntentBlog" src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Intentblog_carousel.png"/></a>
+					<h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>
+					<h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">Treating a Sore Throat</a></h4>
+					<cite>Posted Mon 4.28.08</cite>
+					<p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts &#187;</a></p>
+				</li>
+			</ol>
+		</div>
+		<script>
+			(function () {
+				var carousel;
+						
+				YAHOO.util.Event.onDOMReady(function (ev) {
+					var carousel = new YAHOO.widget.Carousel("container", {
+								animation: { speed: 0.5 },
+								describedby: "my-carousel-label"
+						});
+								
+					carousel.render(); // get ready for rendering the widget
+					carousel.show();   // display the widget
+				});
+			})();
+		</script>
+	</body>
+</html>
--- a/www/extras/yui/examples/carousel/csl_circular.html
+++ b/www/extras/yui/examples/carousel/csl_circular.html
--- a/www/extras/yui/examples/carousel/csl_circular_log.html
+++ b/www/extras/yui/examples/carousel/csl_circular_log.html
--- a/www/extras/yui/examples/carousel/csl_circular_source.html
+++ b/www/extras/yui/examples/carousel/csl_circular_source.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>Carousel: Circular Carousel</title>
+
+    <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
+    <link type="text/css" rel="stylesheet" href="../../build/carousel/assets/skins/sam/carousel.css">
+
+    <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+    <script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
+    <script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
+
+    <style type="text/css">
+    body {
+        margin:0;
+        padding:0;
+    }
+
+    #container {
+        margin: 0 auto;
+    }
+
+    .yui-carousel-element li {
+        height: 375px;
+    }
+    </style>
+
+</head>
+<body class="yui-skin-sam">
+    <h1>Circular Carousel Example</h1>
+    <!-- The Carousel container -->
+    <div id="container">
+        <ol id="carousel">
+            <li>
+                <img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/59/213129191_b958880a96_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/92/214077367_77ae970965_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/81/214076446_18fe6a6c91_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/93/214075781_0604edb894_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/40/214075243_ea66c4cb31_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/67/214074120_33933bf232_d.jpg"
+                 height="375" width="500">
+            </li>
+            <li>
+                <img src="http://farm1.static.flickr.com/79/214073568_f16d1ffce7_d.jpg"
+                 height="375" width="500">
+            </li>
+        </ol>
+    </div>
+    <script>
+    (function () {
+        var carousel;
+                
+        YAHOO.util.Event.onDOMReady(function (ev) {
+            var carousel    = new YAHOO.widget.Carousel("container", {
+                        isCircular: true, numVisible: 1
+                });
+
+            carousel.render(); // get ready for rendering the widget
+            carousel.show();   // display the widget
+        });
+    })();
+    </script>
+</body>
+</html>
--- a/www/extras/yui/examples/carousel/csl_dynload2.html
+++ b/www/extras/yui/examples/carousel/csl_dynload2.html
--- a/www/extras/yui/examples/carousel/csl_dynload2_clean.html
+++ b/www/extras/yui/examples/carousel/csl_dynload2_clean.html
@ -0,0 +1,194 @@
+<!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 Ajax for deferred loading of items</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
+<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
+<script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+    /* Style the spotlight container */
+    #spotlight {
+        border: 1px solid #ccc;
+        height: 180px;
+        margin: 10px auto;
+        padding: 1px;
+        width: 240px;
+    }
+
+    #carousel {
+        margin: 0;
+    }
+
+    #container {
+        margin: 0 auto;
+    }
+
+    .yui-skin-sam .yui-carousel-nav ul,
+    .yui-skin-sam .yui-carousel-nav select {
+        display: none;
+    }
+    
+    .yui-carousel-element li {
+        height: 75px;
+        width: 75px;
+    }
+</style>
+
+<!--end custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Using Ajax for deferred loading of items</h1>
+
+<div class="exampleIntro">
+	<p>
+    This example showcases the dynamic loading capabilities of the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a>.  The YUI Carousel Control exposes an event called <code>loadItems</code>.  This
+    event is fired whenever the Carousel needs items to be loaded into it for
+    display.  Subscribing  to this event makes it easy to dynamically load
+    the next set of images.
+</p>
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<!-- The Carousel container -->
+<div id="container">
+    <ol id="carousel"></ol>
+</div>
+<!-- The spotlight container -->
+<div id="spotlight"></div>
+<script>
+    var carousel, curpos, items = [];
+
+    function getImageTag(img) {
+        return "<img src=\"" + img + "\" height=\"75\" width=\"75\">";
+    }
+
+    function getImages() {
+        var carousel = this;
+                
+        YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages.php?pos="+curpos,
+                {
+                    success: function (o) {
+                        var i = curpos,
+                            j = 0,
+                            r = eval('(' + o.responseText + ')');
+                            
+                        curpos += r.length;
+
+                        while (i < curpos) {
+                            if (r[j]) {
+                                carousel.addItem(getImageTag(r[j]));
+                            } else {
+                                break;
+                            }
+                            i++;
+                            j++;
+                        }
+
+                        carousel.set("selectedItem", carousel.get("firstVisible"));
+                    },
+
+                    failure: function (o) {
+                        alert("Ajax request failed!");
+                    }
+        });
+    }
+                
+    // Get the image link from within its (parent) container.
+    function getLargeImage(parent) {
+        var el = parent.firstChild;
+                
+        while (el) { // walk through till as long as there's an element
+            if (el.nodeName.toUpperCase() == "IMG") { // found an image
+                // flickr uses "_s" suffix for small, and "_m" for big
+                // images respectively
+                return el.src.replace(/_s\.jpg$/, "_m.jpg");
+            }
+            el = el.nextSibling;
+        }
+                
+        return "";
+    }
+
+    YAHOO.util.Event.onDOMReady(function (ev) {
+        var i, spotlight;
+       
+        carousel = new YAHOO.widget.Carousel("container", {
+                numItems: 17
+        });
+        YAHOO.util.Connect.asyncRequest("GET", "assets/php/getimages.php", {
+                success: function (o) {
+                    var i, r = eval('(' + o.responseText + ')');
+                    
+                    curpos = r.length;
+
+                    for (i = 0; i < curpos; i++) {
+                        items.push(r[i]);
+                    }
+
+                    // check if the Carousel widget is available
+                    if (typeof carousel != "undefined") {
+                        for (i = 0; i < curpos; i++) {
+                            // if so, shove the elements into it
+                            carousel.addItem(getImageTag(items[i]));
+                        }
+                        carousel.set("selectedItem", 0);
+                        items = [];
+                    }
+                },
+
+                failure: function (o) {
+                    alert("Ajax request failed!");
+                }
+        });
+        spotlight   = YAHOO.util.Dom.get("spotlight"),
+            
+        carousel.render();
+        carousel.show();
+                
+        carousel.on("loadItems", function (o) {
+            // more items available?
+            getImages.call(this);
+        });
+                
+        carousel.on("itemSelected", function (index) {
+            // item has the reference to the Carousel's item
+            var el, item = carousel.getElementForItem(index);
+
+            if (item) {
+                spotlight.innerHTML = "<img src=\""+getLargeImage(item)+"\">";
+            }
+        });
+    });
+
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/carousel/csl_dynload2_log.html
+++ b/www/extras/yui/examples/carousel/csl_dynload2_log.html
--- a/www/extras/yui/examples/carousel/csl_imagentext.html
+++ b/www/extras/yui/examples/carousel/csl_imagentext.html
--- a/www/extras/yui/examples/carousel/csl_imagentext_log.html
+++ b/www/extras/yui/examples/carousel/csl_imagentext_log.html
--- a/www/extras/yui/examples/carousel/csl_imagentext_source.html
+++ b/www/extras/yui/examples/carousel/csl_imagentext_source.html
@ -0,0 +1,275 @@
+<!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>Carousel: Using both images and text within an item</title>
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css"> 
+<link type="text/css" rel="stylesheet" href="../../build/carousel/assets/skins/sam/carousel.css">
+<script src="../../build/utilities/utilities.js"></script>
+<script src="../../build/carousel/carousel-beta-min.js"></script>
+
+<style type="text/css">
+    .yui-carousel-element li {
+        height: 158px;
+        text-align: left;
+    }
+
+    #container {
+        font-size: 13px;
+        margin: 0 auto;
+    }
+
+    #container a {
+        text-decoration: none;
+    }
+            
+    #container .intro {
+        display: inline;
+        margin: 0px 14px 0px 4px;
+        width: 202px;
+    }
+            
+    #container .item {
+        display: inline;
+        margin: 0 22px 0 12px;
+        overflow: hidden;
+        padding-right: 80px;
+        width: 106px;
+    }
+
+    #container .item .authimg {
+        bottom: 2px;
+        margin-left: 61px;
+        position: absolute;
+        z-index: 1;
+    }
+            
+    #container .item h3 {
+        line-height: 85%;
+        margin-top: 4px;
+    }
+            
+    #container .item h3 a {
+        font: 77% Arial, sans-serif;
+        position: relative;
+        text-transform: uppercase;
+        z-index: 2;
+    }
+            
+    #container .item h3 a:link {
+        color:#35a235;
+    }
+            
+    #container .item h4 {
+        margin-top:5px;
+    }
+            
+    #container .item h4 a {
+        font: 100% Georgia, Times, serif;
+        position: relative;
+        z-index:2;
+    }
+
+    #container .item h4 a:link {
+        color:#00639b;
+    }
+            
+    #container .item cite {
+        color: #888;
+        display: block;
+        font-size: 77%;
+        line-height: normal;
+        margin-bottom: 30px;
+    }
+            
+    #container .item p.all {
+        bottom: 25px;
+        position: absolute;
+        z-index: 2;
+    }
+            
+    #container .item p.all a {
+        font-weight: bold;
+        font-size: 85%;
+    }
+</style>
+
+</head>
+
+<body class="yui-skin-sam">
+
+<h1>Using both images and text within an item</h1>
+
+<p> This example uses the <a href="http://developer.yahoo.com/yui/carousel">YUI Carousel Control</a> to showcase an example where each
+  (list) item contains an image and some text.  As always, you can use arrow
+  keys to select items or to click on an item to select it. </p>
+<p> Also in this example, you will see the animation capabilities available in
+  the YUI Carousel Control.  For getting an animated effect during scroll, you
+  will have to set the <code>animation</code> configuration setting in the constructor and include the <a href="http://developer.yahoo.com/yui/animation/">YUI Animation Utility</a> on the page.</p>
+<!-- The Carousel container -->
+<div id="container">
+    <ol id="carousel">
+        <li class="intro">
+            <a href="http://health.yahoo.com/experts/">
+                <img width="202" height="162" border="0"
+                     alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
+                     src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
+            </a>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">
+                <img width="125" height="154" border="0"
+                     alt="Leslie Baumann, M.D."
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">
+            Skin Treatments for…</a></h4>
+            <cite>Posted Thu 5.1.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">
+                <img width="125" height="154" border="0"
+                     alt="Deepak Chopra, M.D."
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">
+            How You Think About Illness…</a></h4>
+            <cite>Posted Thu 5.1.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Christine McKinney, M.S., R.D., C.D.E."
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
+            Christine McKinney, M.S., R.D., C.D.E.</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">
+            Fat: How Much Is Enough of a…</a></h4>
+            <cite>Posted Thu 5.1.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Dr. Maoshing Ni"
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/MaoshingNi_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">
+            Centenarian Tips for a Long…</a></h4>
+            <cite>Posted Tue 4.29.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Lillie Shockney, R.N., M.A.S."
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LillieShockney_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
+            Lillie Shockney, R.N., M.A.S.</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">
+            Are You Being Over- or…</a></h4>
+            <cite>Posted Tue 4.29.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="David Neubauer, M.D."
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">
+            Could a Breast Cancer…</a></h4>
+            <cite>Posted Tue 4.29.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/capessa/bio/capessa/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Jennifer Tuma-Young"
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Capessa_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">
+            Relieve Stress With Your…</a></h4>
+            <cite>Posted Mon 4.28.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Lucy Danziger, SELF Edit"
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LucyDanziger_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/healthieryou/2639/de-stress-in-mere-minutes/">
+            De-Stress in Mere Minutes</a></h4>
+            <cite>Posted Mon 4.28.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Simeon Margolis, M.D., Ph.D."
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">
+            Alzheimer's and Dementia: Will…</a></h4>
+            <cite>Posted Mon 4.28.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="item">
+            <a title="View Author's Biography" class="authimg"
+               href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">
+                <img width="125" height="154" border="0" class="lz"
+                     alt="Mallika Chopra, IntentBlog"
+                     src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Intentblog_carousel.png"/>
+            </a>
+            <h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>
+            <h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">
+            Treating a Sore Throat</a></h4>
+            <cite>Posted Mon 4.28.08</cite>
+            <p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts &raquo;</a></p>
+        </li>
+        <li class="intro">
+            <a href="http://health.yahoo.com/experts/">
+                <img width="202" height="162" border="0"
+                     alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
+                     src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
+            </a>
+        </li>
+    </ol>
+</div>
+<script>
+    (function () {
+        var carousel;
+                
+        YAHOO.util.Event.onDOMReady(function (ev) {
+            var carousel    = new YAHOO.widget.Carousel("container", {
+                        animation: { speed: 0.5 }
+                });
+                        
+            carousel.render(); // get ready for rendering the widget
+            carousel.show();   // display the widget
+        });
+    })();
+</script>
+</body>
+</html>
--- a/www/extras/yui/examples/carousel/csl_reveal.html
+++ b/www/extras/yui/examples/carousel/csl_reveal.html
--- a/www/extras/yui/examples/carousel/csl_reveal_log.html
+++ b/www/extras/yui/examples/carousel/csl_reveal_log.html
--- a/www/extras/yui/examples/carousel/csl_reveal_source.html
+++ b/www/extras/yui/examples/carousel/csl_reveal_source.html
@ -0,0 +1,83 @@
+<!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>Carousel: Partially revealing previous and next items</title>
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css"> 
+<link type="text/css" rel="stylesheet" href="../../build/carousel/assets/skins/sam/carousel.css">
+<script src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script src="../../build/element/element-beta-min.js"></script>
+<script src="../../build/carousel/carousel-beta-min.js"></script>
+</head>
+
+<body class="yui-skin-sam">
+
+<h1>Partially revealing previous and next items</h1>
+
+<p> This example showcases a simple yet powerful feature of the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a>.  In this example, the Carousel displays the previous and next
+  elements partially, giving a sneak peak of the upcoming image to the user.
+  The <code>revealAmount</code> configuration setting accepts the percentage of the
+  width of an item to reveal. </p>
+
+<!-- The Carousel container -->
+<div id="container">
+    <ol id="carousel">
+        <li>
+            <img src="http://farm1.static.flickr.com/32/52955391_e7bed4c41f_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/28/52955478_0a35209bbb_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/26/52955086_df2cdece3d_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/24/52956234_809467624f_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/30/52954770_ef743b4afe_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/33/52953744_1c4a4ffaaf_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/26/52953668_33ea00edac_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/32/52953229_28f32b92a1_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/32/52953161_9e067407b2_m.jpg"
+                 height="180" width="240">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/32/52953399_047d25504b_m.jpg"
+                 height="180" width="240">
+        </li>
+    </ol>
+</div>
+<script>
+    (function () {
+        var carousel;
+                
+        YAHOO.util.Event.onDOMReady(function (ev) {
+            var carousel    = new YAHOO.widget.Carousel("container", {
+                        revealAmount: 25
+                });
+                        
+            carousel.render(); // get ready for rendering the widget
+            carousel.show();   // display the widget
+        });
+    })();
+</script>
+
+</body>
+</html>
--- a/www/extras/yui/examples/carousel/csl_selection.html
+++ b/www/extras/yui/examples/carousel/csl_selection.html
--- a/www/extras/yui/examples/carousel/csl_selection_clean.html
+++ b/www/extras/yui/examples/carousel/csl_selection_clean.html
@ -0,0 +1,186 @@
+<!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>Spotlight example</title>
+
+<style type="text/css">
+/*margin and padding on body element
+  can introduce errors in determining
+  element position and are not recommended;
+  we turn them off as a foundation for YUI
+  CSS treatments. */
+body {
+	margin:0;
+	padding:0;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
+<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
+<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
+<script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+    /* Style the spotlight container */
+    #spotlight {
+        border: 1px solid #ccc;
+        height: 180px;
+        margin: 10px auto;
+        padding: 1px;
+        width: 240px;
+    }
+    
+    #container {
+        margin: 0 auto;
+    }
+
+    .yui-carousel-element li {
+        height: 75px;
+        opacity: 0.6;
+        width: 75px;
+    }
+    
+    .yui-carousel-element .yui-carousel-item-selected {
+        opacity: 1;
+    }
+
+    .yui-skin-sam .yui-carousel-nav ul li {
+        margin: 0;
+    }
+</style>
+
+<!--end custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+
+<h1>Spotlight example</h1>
+
+<div class="exampleIntro">
+	<p>
+    This example uses the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a> to showcase a simple spotlight
+    example using its <code>itemSelected</code> event.  In this example, you can use arrow
+    keys to select items as well as click on an item to select it.
+</p>
+<p>
+    Though this functionality looks a little complicated, it is very easy to
+    implement.  This is because the YUI Carousel Control handles the keyboard
+    event and the mouse click event for setting the selection.  When an item is
+    selected, the YUI Carousel Control triggers an <code>itemSelected</code> event.  This
+    example subscribes to the <code>itemSelected</code> event to display the selected
+    image in the spotlight.
+</p>
+			
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<!-- The Carousel container -->
+<div id="container">
+    <ol id="carousel">
+        <li>
+            <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
+        </li>
+        <li>
+            <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
+        </li>
+    </ol>
+</div>
+<!-- The spotlight container -->
+<div id="spotlight"></div>
+
+<style type="text/css">
+/* Style the spotlight container */
+#spotlight {
+	border: 1px solid #ccc;
+	height: 180px;
+	margin: 10px auto;
+	padding: 1px;
+	width: 240px;
+}
+
+.yui-carousel-element li {
+	opacity: 0.6;
+}
+
+.yui-carousel-element .yui-carousel-item-selected {
+	opacity: 1;
+}
+</style>
+<script>
+    (function () {
+        var carousel;
+                        
+        // Get the image link from within its (parent) container.
+        function getImage(parent) {
+            var el = parent.firstChild;
+                    
+            while (el) { // walk through till as long as there's an element
+                if (el.nodeName.toUpperCase() == "IMG") { // found an image
+                    // flickr uses "_s" suffix for small, and "_m" for big
+                    // images respectively
+                    return el.src.replace(/_s\.jpg$/, "_m.jpg");
+                }
+                el = el.nextSibling;
+            }
+            
+            return "";
+        }
+                
+        YAHOO.util.Event.onDOMReady(function (ev) {
+            var el, item,
+                spotlight   = YAHOO.util.Dom.get("spotlight"),
+                carousel    = new YAHOO.widget.Carousel("container");
+                
+            carousel.render(); // get ready for rendering the widget
+            carousel.show();   // display the widget
+                    
+            // display the first selected item in the spotlight
+            item = carousel.getElementForItem(carousel.get("selectedItem"));
+            if (item) {
+                spotlight.innerHTML = "<img src=\"" + getImage(item) + "\">";
+            }
+                       
+            carousel.on("itemSelected", function (index) {
+                // item has the reference to the Carousel's item
+                item = carousel.getElementForItem(index);
+
+                if (item) {
+                    spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
+                }
+            });
+        });
+    })();
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>
--- a/www/extras/yui/examples/carousel/csl_selection_log.html
+++ b/www/extras/yui/examples/carousel/csl_selection_log.html
--- a/www/extras/yui/examples/carousel/index.html
+++ b/www/extras/yui/examples/carousel/index.html
				`@ -0,0 +1 @@`
				(function(){var t=YAHOO.util.Event,u=YAHOO.util.Dom,AC=YAHOO.lang,k=YAHOO.env.ua,AE=YAHOO.widget.Carousel.prototype,P=AE.initAttributes,O={},o={},a=(k.gecko&&k.gecko>=1.9)\|\|(k.ie&&k.ie>=8),p={"A":true,"SELECT":true,"TEXTAREA":true,"BUTTON":true,"INPUT":true},n="usearia",W="aria-",I="hidden",i="*",e="id",AB="role",j="option",r="listbox",b="li",d="selectedItem",A="selected",R="toolbar",AD="keydown",v="presentation",N="button",y="href",f="UL",V="A",c="render",G="selectedItemChange",D="show",K="pageChange",L="keypress",B="controls",Z="labelledby",Y="describedby",H=" (Current Page)";var S=function(AF,AG){AF.setAttribute(AB,AG);};var U=function(AF,AH,AG){AF.setAttribute((W+AH),AG);};var s=function(){var AF=this.getElementsByClassName(this.CLASSES.CAROUSEL_EL);if(AF.length===1){return AF[0];}};var J=function(){var AF=this.getElementsByClassName(this.CLASSES.NAVIGATION);if(AF.length===1){return AF[0];}};var x=function(AF){return((AF.tabIndex>-1\|\|p[AF.nodeName.toUpperCase()])&&AF.type!==I&&!AF.disabled);};var C=function(AF){AF.tabIndex=0;};var w=function(AF){AF.tabIndex=-1;};var h=function(AF){var AG=this.getItem(AF);if(AG){u.getElementsBy(x,i,AG.id,C);}};var z=function(AF){var AG=this.getItem(AF);if(AG){u.getElementsBy(x,i,AG.id,w);}};var g=function(AG){var AF=AG.prevValue;if(AC.isNumber(AF)){z.call(this,AF);}h.call(this,AG.newValue);U(this.getElementForItem(AG.newValue),A,true);};var M=function(AK){t.stopPropagation(AK);var AJ=this.get(e),AI=O[AJ],AH=o[AJ],AG,AF;switch(t.getCharCode(AK)){case 37:case 38:AF=AI[AH];AF.tabIndex=-1;AH=AH-1;AG=AI[AH];if(!AG){AH=AI.length-1;AG=AI[AH];}o[AJ]=AH;AG.tabIndex=0;AG.focus();break;case 39:case 40:AF=AI[AH];AF.tabIndex=-1;AH=AH+1;AG=AI[AH];if(!AG){AH=0;AG=AI[AH];}o[AJ]=AH;AG.tabIndex=0;AG.focus();break;}};var q=function(AF){S(AF,j);u.getElementsBy(x,i,AF,w);};var E=function(){var AH=s.call(this),AG,AF;if(AH){S(AH,r);u.batch(AH.getElementsByTagName(b),q);AG=this.get(d);if(AC.isNumber(AG)){U(this.getElementForItem(AG),A,true);h.call(this,AG);}AF=J.call(this);if(AF){S(AF,R);t.on(AF,AD,M,null,this);}}};var X=function(AK,AI){var AM=AI.carousel,AG=AI.toolbarButtons;S(AK,v);var AL=u.getFirstChild(AK);S(AL,N);U(AL,B,AI.listID);AL.value=AL.getAttribute(y,2);AL.removeAttribute(y);var AJ=u.hasClass(AK,AM.CLASSES.SELECTED_NAV)?0:-1;AL.tabIndex=AJ;var AH=AG.length;var AF=u.getFirstChild(AL);if(AJ===0){o[AM.get(e)]=AH;AF.innerHTML=AF.innerHTML+H;}AG[AH]=AL;};var Q=function(AG,AF){var AH=AF.toolbarButtons;S(AG,v);U(AG,B,AF.listID);var AI=u.getFirstChild(AG);if(!AI.disabled){AI.tabIndex=-1;AH[AH.length]=AI;}};var m=function(AJ){var AH=J.call(this),AG=[],AF,AL,AK,AI;if(AH){AL=u.getFirstChild(AH);AK=s.call(this);if(AL&&AK){AI=AK.id\|\|u.generatId(AK);if(AL.nodeName.toUpperCase()===f){S(AL,v);u.batch(AL.getElementsByTagName(b),X,{carousel:this,toolbarButtons:AG,listID:AI});}else{AL.tabIndex=0;U(AL,B,AI);}u.batch(this.getElementsByClassName(this.CLASSES.BUTTON),Q,{toolbarButtons:AG,listID:AI});O[this.get(e)]=AG;}}};var l=function(){AC.later(0,this,m);};var AA=function(AH){var AF=t.getTarget(AH),AG=t.getCharCode(AH);if(AF.nodeName.toUpperCase()===V&&u.getAncestorByClassName(AF,this.CLASSES.NAVIGATION)&&(AG===13\|\|AG===32)){this._pagerClickHandler(AH);}};var F=function(AF,AG){this.set(Z,AG,true);this.removeListener(c,F);};var T=function(AF,AG){this.set(Y,AG,true);this.removeListener(c,T);};AC.augmentObject(AE,{_setLabelledBy:function(AH){var AF=J.call(this),AG=s.call(this);if(this.get(n)&&AF&&AG){U(AF,Z,AH);U(AG,Z,AH);}else{this.on(c,F,AH);}},_setDescribedBy:function(AH){var AF=J.call(this),AG=s.call(this);if(this.get(n)&&AF&&AG){U(AF,Y,AH);U(AG,Y,AH);}else{this.on(c,T,AH);}},_setUseARIA:function(AF){if(AF){this.on(c,E);this.on(G,g);this.on(D,m);this.on(K,l);this.on(L,AA);}},initAttributes:function(AF){this.setAttributeConfig(n,{value:AF.usearia\|\|a,validator:AC.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(Z,{value:AF.labelledby,validator:AC.isString,method:this._setLabelledBy});this.setAttributeConfig(Y,{value:AF.describedby,validator:AC.isString,method:this._setDescribedBy});P.apply(this,arguments);if(a){this.set(n,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy");}());