yui-rails-asset 2.8.1

data/vendor/assets/javascripts/yui-2.8.1/build/carousel/carousel-min.js

@@ -0,0 +1,12 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.8.1
+*/
+(function(){var P;YAHOO.widget.Carousel=function(s,r){YAHOO.widget.Carousel.superclass.constructor.call(this,s,r);};var U=YAHOO.widget.Carousel,e=YAHOO.util.Dom,c=YAHOO.util.Event,p=YAHOO.lang;P="Carousel";var T={},F="afterScroll",g="allItemsRemoved",b="beforeHide",J="beforePageChange",i="beforeScroll",Y="beforeShow",B="blur",X="focus",a="hide",S="itemAdded",o="itemRemoved",Q="itemReplaced",C="itemSelected",L="loadItems",I="navigationStateChange",h="pageChange",H="render",V="show",Z="startAutoPlay",q="stopAutoPlay",K="uiUpdate";function G(r,s){var t;for(t in s){if(s.hasOwnProperty(t)){e.setStyle(r,t,s[t]);}}}function W(s,r){var t=document.createElement(s);r=r||{};if(r.className){e.addClass(t,r.className);}if(r.styles){G(t,r.styles);}if(r.parent){r.parent.appendChild(t);}if(r.id){t.setAttribute("id",r.id);}if(r.content){if(r.content.nodeName){t.appendChild(r.content);}else{t.innerHTML=r.content;}}return t;}function d(t,s,r){var v;if(!t){return 0;}function u(y,x){var z;if(x=="marginRight"&&YAHOO.env.ua.webkit){z=parseInt(e.getStyle(y,"marginLeft"),10);}else{z=parseInt(e.getStyle(y,x),10);}return p.isNumber(z)?z:0;}function w(y,x){var z;if(x=="marginRight"&&YAHOO.env.ua.webkit){z=parseFloat(e.getStyle(y,"marginLeft"));}else{z=parseFloat(e.getStyle(y,x));}return p.isNumber(z)?z:0;}if(typeof r=="undefined"){r="int";}switch(s){case"height":v=t.offsetHeight;if(v>0){v+=u(t,"marginTop")+u(t,"marginBottom");}else{v=w(t,"height")+u(t,"marginTop")+u(t,"marginBottom")+u(t,"borderTopWidth")+u(t,"borderBottomWidth")+u(t,"paddingTop")+u(t,"paddingBottom");}break;case"width":v=t.offsetWidth;if(v>0){v+=u(t,"marginLeft")+u(t,"marginRight");}else{v=w(t,"width")+u(t,"marginLeft")+u(t,"marginRight")+u(t,"borderLeftWidth")+u(t,"borderRightWidth")+u(t,"paddingLeft")+u(t,"paddingRight");}break;default:if(r=="int"){v=u(t,s);}else{if(r=="float"){v=w(t,s);}else{v=e.getStyle(t,s);}}break;}return v;}function O(w){var u=this,x,t,s=0,v=u.get("firstVisible"),r=false;if(u._itemsTable.numItems===0){return 0;}t=u._itemsTable.items[v]||u._itemsTable.loading[v];if(p.isUndefined(t)){return 0;}x=e.get(t.id);if(typeof w=="undefined"){r=u.get("isVertical");}else{r=w=="height";}if(this._itemAttrCache[w]){return this._itemAttrCache[w];}if(r){s=d(x,"height");}else{s=d(x,"width");}this._itemAttrCache[w]=s;return s;}function N(){var s=this,t,r;t=s.get("isVertical");r=O.call(s,t?"height":"width");return(r*s.get("revealAmount")/100);}function m(w){var AH=this,z=AH._cols,v=AH._rows,u,AC,AB,t,x,AD,AJ=0,AE,s,AG,AA={},y=0,AI=AH._itemsTable,AF=AI.items,r=AI.loading;AB=AH.get("isVertical");AC=O.call(AH,AB?"height":"width");AG=N.call(AH);while(y<w){if(!AF[y]&&!r[y]){AJ++;}y++;}w-=AJ;if(v){u=this.getPageForItem(w);if(AB){x=Math.floor(w/z);AJ=x;AE=AJ*AC;AA.top=(AE+AG)+"px";AC=O.call(AH,"width");t=w%z;AJ=t;s=AJ*AC;AA.left=s+"px";}else{t=w%z;AD=(u-1)*z;AJ=t+AD;s=AJ*AC;AA.left=(s+AG)+"px";AC=O.call(AH,"height");x=Math.floor(w/z);AD=(u-1)*v;AJ=x-AD;AE=AJ*AC;AA.top=AE+"px";}}else{if(AB){AA.left=0;AA.top=((w*AC)+AG)+"px";}else{AA.top=0;AA.left=((w*AC)+AG)+"px";}}return AA;}function D(s){var r=this.get("numVisible");return Math.floor(s/r)*r;}function j(t){var s=0,r=0;s=O.call(this);r=s*t;return r;}function f(r,s){s.scrollPageBackward();c.preventDefault(r);}function k(r,s){s.scrollPageForward();c.preventDefault(r);}function n(w,s){var AA=this,AB=AA.CLASSES,r,y=AA._firstItem,t=AA.get("isCircular"),x=AA.get("numItems"),z=AA.get("numVisible"),v=s,u=y+z-1;if(v>=0&&v<x){if(!p.isUndefined(AA._itemsTable.items[v])){r=e.get(AA._itemsTable.items[v].id);if(r){e.removeClass(r,AB.SELECTED_ITEM);}}}if(p.isNumber(w)){w=parseInt(w,10);w=p.isNumber(w)?w:0;}else{w=y;}if(p.isUndefined(AA._itemsTable.items[w])){w=D.call(AA,w);AA.scrollTo(w);}if(!p.isUndefined(AA._itemsTable.items[w])){r=e.get(AA._itemsTable.items[w].id);if(r){e.addClass(r,AB.SELECTED_ITEM);}}if(w<y||w>u){w=D.call(AA,w);AA.scrollTo(w);}}function l(){var t=false,w=this,s=w.CLASSES,v,r,u;if(!w._hasRendered){return;}r=w.get("navigation");u=w._firstItem+w.get("numVisible");if(r.prev){if(w.get("numItems")===0||w._firstItem===0){if(w.get("numItems")===0||!w.get("isCircular")){c.removeListener(r.prev,"click",f);e.addClass(r.prev,s.FIRST_NAV_DISABLED);for(v=0;v<w._navBtns.prev.length;v++){w._navBtns.prev[v].setAttribute("disabled","true");}w._prevEnabled=false;}else{t=!w._prevEnabled;}}else{t=!w._prevEnabled;}if(t){c.on(r.prev,"click",f,w);e.removeClass(r.prev,s.FIRST_NAV_DISABLED);for(v=0;v<w._navBtns.prev.length;v++){w._navBtns.prev[v].removeAttribute("disabled");}w._prevEnabled=true;}}t=false;if(r.next){if(u>=w.get("numItems")){if(!w.get("isCircular")){c.removeListener(r.next,"click",k);e.addClass(r.next,s.DISABLED);for(v=0;v<w._navBtns.next.length;v++){w._navBtns.next[v].setAttribute("disabled","true");}w._nextEnabled=false;}else{t=!w._nextEnabled;}}else{t=!w._nextEnabled;}if(t){c.on(r.next,"click",k,w);e.removeClass(r.next,s.DISABLED);for(v=0;v<w._navBtns.next.length;v++){w._navBtns.next[v].removeAttribute("disabled");}w._nextEnabled=true;}}w.fireEvent(I,{next:w._nextEnabled,prev:w._prevEnabled});}function R(t){var u=this,r,s;if(!u._hasRendered){return;}s=u.get("numVisible");if(!p.isNumber(t)){t=Math.floor(u.get("selectedItem")/s);}r=Math.ceil(u.get("numItems")/s);u._pages.num=r;u._pages.cur=t;if(r>u.CONFIG.MAX_PAGER_BUTTONS){u._updatePagerMenu();}else{u._updatePagerButtons();}}function M(r,s){switch(s){case"height":return d(r,"marginTop")+d(r,"marginBottom")+d(r,"paddingTop")+d(r,"paddingBottom")+d(r,"borderTopWidth")+d(r,"borderBottomWidth");case"width":return d(r,"marginLeft")+d(r,"marginRight")+d(r,"paddingLeft")+d(r,"paddingRight")+d(r,"borderLeftWidth")+d(r,"borderRightWidth");default:break;}return d(r,s);}function A(s){var r=this;if(!p.isObject(s)){return;}switch(s.ev){case S:r._syncUiForItemAdd(s);break;case o:r._syncUiForItemRemove(s);break;case Q:r._syncUiForItemReplace(s);break;case L:r._syncUiForLazyLoading(s);break;}r.fireEvent(K);}function E(u,s){var w=this,v=w.get("currentPage"),t,r=w.get("numVisible");
+t=parseInt(w._firstItem/r,10);if(t!=v){w.setAttributeConfig("currentPage",{value:t});w.fireEvent(h,t);}if(w.get("selectOnScroll")){if(w.get("selectedItem")!=w._selectedItem){w.set("selectedItem",w._selectedItem);}}clearTimeout(w._autoPlayTimer);delete w._autoPlayTimer;if(w.isAutoPlayOn()){w.startAutoPlay();}w.fireEvent(F,{first:w._firstItem,last:s},w);}U.getById=function(r){return T[r]?T[r].object:false;};YAHOO.extend(U,YAHOO.util.Element,{_rows:null,_cols:null,_animObj:null,_carouselEl:null,_clipEl:null,_firstItem:0,_hasFocus:false,_hasRendered:false,_isAnimationInProgress:false,_isAutoPlayInProgress:false,_itemsTable:null,_navBtns:null,_navEl:null,_nextEnabled:true,_pages:null,_pagination:{},_prevEnabled:true,_recomputeSize:true,_itemAttrCache:{},CLASSES:{BUTTON:"yui-carousel-button",CAROUSEL:"yui-carousel",CAROUSEL_EL:"yui-carousel-element",CONTAINER:"yui-carousel-container",CONTENT:"yui-carousel-content",DISABLED:"yui-carousel-button-disabled",FIRST_NAV:" yui-carousel-first-button",FIRST_NAV_DISABLED:"yui-carousel-first-button-disabled",FIRST_PAGE:"yui-carousel-nav-first-page",FOCUSSED_BUTTON:"yui-carousel-button-focus",HORIZONTAL:"yui-carousel-horizontal",ITEM_LOADING:"yui-carousel-item-loading",MIN_WIDTH:"yui-carousel-min-width",NAVIGATION:"yui-carousel-nav",NEXT_NAV:" yui-carousel-next-button",NEXT_PAGE:"yui-carousel-next",NAV_CONTAINER:"yui-carousel-buttons",PAGER_ITEM:"yui-carousel-pager-item",PAGINATION:"yui-carousel-pagination",PAGE_FOCUS:"yui-carousel-nav-page-focus",PREV_PAGE:"yui-carousel-prev",SELECTED_ITEM:"yui-carousel-item-selected",SELECTED_NAV:"yui-carousel-nav-page-selected",VERTICAL:"yui-carousel-vertical",MULTI_ROW:"yui-carousel-multi-row",ROW:"yui-carousel-row",VERTICAL_CONTAINER:"yui-carousel-vertical-container",VISIBLE:"yui-carousel-visible"},CONFIG:{FIRST_VISIBLE:0,HORZ_MIN_WIDTH:180,MAX_PAGER_BUTTONS:5,VERT_MIN_WIDTH:115,NUM_VISIBLE:3},STRINGS:{ITEM_LOADING_CONTENT:"Loading",NEXT_BUTTON_TEXT:"Next Page",PAGER_PREFIX_TEXT:"Go to page ",PREVIOUS_BUTTON_TEXT:"Previous Page"},addItem:function(y,s){var x=this,u,t,r,z=0,w,v=x.get("numItems");if(!y){return false;}if(p.isString(y)||y.nodeName){t=y.nodeName?y.innerHTML:y;}else{if(p.isObject(y)){t=y.content;}else{return false;}}u=y.className||"";r=y.id?y.id:e.generateId();if(p.isUndefined(s)){x._itemsTable.items.push({item:t,className:u,id:r});w=x._itemsTable.items.length-1;}else{if(s<0||s>v){return false;}if(!x._itemsTable.items[s]){x._itemsTable.items[s]=undefined;z=1;}x._itemsTable.items.splice(s,z,{item:t,className:u,id:r});}x._itemsTable.numItems++;if(v<x._itemsTable.items.length){x.set("numItems",x._itemsTable.items.length);}x.fireEvent(S,{pos:s,ev:S,newPos:w});return true;},addItems:function(r){var s,u,t=true;if(!p.isArray(r)){return false;}for(s=0,u=r.length;s<u;s++){if(this.addItem(r[s][0],r[s][1])===false){t=false;}}return t;},blur:function(){this._carouselEl.blur();this.fireEvent(B);},clearItems:function(){var r=this,s=r.get("numItems");while(s>0){if(!r.removeItem(0)){}if(r._itemsTable.numItems===0){r.set("numItems",0);break;}s--;}r.fireEvent(g);},focus:function(){var AA=this,v,w,x,u,z,AB,s,t,r;if(!AA._hasRendered){return;}if(AA.isAnimating()){return;}r=AA.get("selectedItem");AB=AA.get("numVisible");s=AA.get("selectOnScroll");t=(r>=0)?AA.getItem(r):null;v=AA.get("firstVisible");z=v+AB-1;x=(r<v||r>z);w=(t&&t.id)?e.get(t.id):null;u=AA._itemsTable;if(!s&&x){w=(u&&u.items&&u.items[v])?e.get(u.items[v].id):null;}if(w){try{w.focus();}catch(y){}}AA.fireEvent(X);},hide:function(){var r=this;if(r.fireEvent(b)!==false){r.removeClass(r.CLASSES.VISIBLE);r.fireEvent(a);}},init:function(u,s){var v=this,r=u,w=false,t;if(!u){return;}v._hasRendered=false;v._navBtns={prev:[],next:[]};v._pages={el:null,num:0,cur:0};v._pagination={};v._itemAttrCache={};v._itemsTable={loading:{},numItems:0,items:[],size:0};if(p.isString(u)){u=e.get(u);}else{if(!u.nodeName){return;}}U.superclass.init.call(v,u,s);t=v.get("selectedItem");if(t>0){v.set("firstVisible",D.call(v,t));}if(u){if(!u.id){u.setAttribute("id",e.generateId());}w=v._parseCarousel(u);if(!w){v._createCarousel(r);}}else{u=v._createCarousel(r);}r=u.id;v.initEvents();if(w){v._parseCarouselItems();}if(t>0){n.call(v,t,0);}if(!s||typeof s.isVertical=="undefined"){v.set("isVertical",false);}v._parseCarouselNavigation(u);v._navEl=v._setupCarouselNavigation();T[r]={object:v};v._loadItems(Math.min(v.get("firstVisible")+v.get("numVisible"),v.get("numItems"))-1);},initAttributes:function(r){var s=this;r=r||{};U.superclass.initAttributes.call(s,r);s.setAttributeConfig("carouselEl",{validator:p.isString,value:r.carouselEl||"OL"});s.setAttributeConfig("carouselItemEl",{validator:p.isString,value:r.carouselItemEl||"LI"});s.setAttributeConfig("currentPage",{readOnly:true,value:0});s.setAttributeConfig("firstVisible",{method:s._setFirstVisible,validator:s._validateFirstVisible,value:r.firstVisible||s.CONFIG.FIRST_VISIBLE});s.setAttributeConfig("selectOnScroll",{validator:p.isBoolean,value:r.selectOnScroll||true});s.setAttributeConfig("numVisible",{setter:s._numVisibleSetter,method:s._setNumVisible,validator:s._validateNumVisible,value:r.numVisible||s.CONFIG.NUM_VISIBLE});s.setAttributeConfig("numItems",{method:s._setNumItems,validator:s._validateNumItems,value:s._itemsTable.numItems});s.setAttributeConfig("scrollIncrement",{validator:s._validateScrollIncrement,value:r.scrollIncrement||1});s.setAttributeConfig("selectedItem",{setter:s._selectedItemSetter,method:s._setSelectedItem,validator:p.isNumber,value:-1});s.setAttributeConfig("revealAmount",{method:s._setRevealAmount,validator:s._validateRevealAmount,value:r.revealAmount||0});s.setAttributeConfig("isCircular",{validator:p.isBoolean,value:r.isCircular||false});s.setAttributeConfig("isVertical",{method:s._setOrientation,validator:p.isBoolean,value:r.isVertical||false});s.setAttributeConfig("navigation",{method:s._setNavigation,validator:s._validateNavigation,value:r.navigation||{prev:null,next:null,page:null}});s.setAttributeConfig("animation",{validator:s._validateAnimation,value:r.animation||{speed:0,effect:null}});
+s.setAttributeConfig("autoPlay",{validator:p.isNumber,value:r.autoPlay||0});s.setAttributeConfig("autoPlayInterval",{validator:p.isNumber,value:r.autoPlayInterval||0});s.setAttributeConfig("numPages",{readOnly:true,getter:s._getNumPages});s.setAttributeConfig("lastVisible",{readOnly:true,getter:s._getLastVisible});},initEvents:function(){var t=this,s=t.CLASSES,r;t.on("keydown",t._keyboardEventHandler);t.on(F,l);t.on(S,A);t.on(o,A);t.on(Q,A);t.on(C,function(){if(t._hasFocus){t.focus();}});t.on(L,A);t.on(g,function(u){t.scrollTo(0);l.call(t);R.call(t);});t.on(h,R,t);t.on(H,function(u){if(t.get("selectedItem")===null||t.get("selectedItem")<=0){t.set("selectedItem",t.get("firstVisible"));}l.call(t,u);R.call(t,u);t._setClipContainerSize();t.show();});t.on("selectedItemChange",function(u){n.call(t,u.newValue,u.prevValue);if(u.newValue>=0){t._updateTabIndex(t.getElementForItem(u.newValue));}t.fireEvent(C,u.newValue);});t.on(K,function(u){l.call(t,u);R.call(t,u);});t.on("firstVisibleChange",function(u){if(!t.get("selectOnScroll")){if(u.newValue>=0){t._updateTabIndex(t.getElementForItem(u.newValue));}}});t.on("click",function(u){if(t.isAutoPlayOn()){t.stopAutoPlay();}t._itemClickHandler(u);t._pagerClickHandler(u);});c.onFocus(t.get("element"),function(u,w){var v=c.getTarget(u);if(v&&v.nodeName.toUpperCase()=="A"&&e.getAncestorByClassName(v,s.NAVIGATION)){if(r){e.removeClass(r,s.PAGE_FOCUS);}r=v.parentNode;e.addClass(r,s.PAGE_FOCUS);}else{if(r){e.removeClass(r,s.PAGE_FOCUS);}}w._hasFocus=true;w._updateNavButtons(c.getTarget(u),true);},t);c.onBlur(t.get("element"),function(u,v){v._hasFocus=false;v._updateNavButtons(c.getTarget(u),false);},t);},isAnimating:function(){return this._isAnimationInProgress;},isAutoPlayOn:function(){return this._isAutoPlayInProgress;},getElementForItem:function(r){var s=this;if(r<0||r>=s.get("numItems")){return null;}if(s._itemsTable.items[r]){return e.get(s._itemsTable.items[r].id);}return null;},getElementForItems:function(){var t=this,s=[],r;for(r=0;r<t._itemsTable.numItems;r++){s.push(t.getElementForItem(r));}return s;},getItem:function(r){var s=this;if(r<0||r>=s.get("numItems")){return null;}if(s._itemsTable.numItems>r){if(!p.isUndefined(s._itemsTable.items[r])){return s._itemsTable.items[r];}}return null;},getItems:function(){return this._itemsTable.items;},getLoadingItems:function(){return this._itemsTable.loading;},getRows:function(){return this._rows;},getCols:function(){return this._cols;},getItemPositionById:function(w){var u=this,v=u.get("numItems"),s=0,r=u._itemsTable.items,t;while(s<v){t=r[s]||{};if(t.id==w){return s;}s++;}return -1;},getVisibleItems:function(){var u=this,s=u.get("firstVisible"),v=s+u.get("numVisible"),t=[];while(s<v){t.push(u.getElementForItem(s));s++;}return t;},removeItem:function(s){var u=this,t,r=u.get("numItems");if(s<0||s>=r){return false;}t=u._itemsTable.items.splice(s,1);if(t&&t.length==1){u._itemsTable.numItems--;u.set("numItems",r-1);u.fireEvent(o,{item:t[0],pos:s,ev:o});return true;}return false;},replaceItem:function(z,u){var y=this,w,v,t,x=y.get("numItems"),s,r=z;if(!z){return false;}if(p.isString(z)||z.nodeName){v=z.nodeName?z.innerHTML:z;}else{if(p.isObject(z)){v=z.content;}else{return false;}}if(p.isUndefined(u)){return false;}else{if(u<0||u>=x){return false;}s=y._itemsTable.items[u];if(!s){s=y._itemsTable.loading[u];y._itemsTable.items[u]=undefined;}y._itemsTable.items.splice(u,1,{item:v,className:z.className||"",id:e.generateId()});r=y._itemsTable.items[u];}y.fireEvent(Q,{newItem:r,oldItem:s,pos:u,ev:Q});return true;},replaceItems:function(r){var s,u,t=true;if(!p.isArray(r)){return false;}for(s=0,u=r.length;s<u;s++){if(this.replaceItem(r[s][0],r[s][1])===false){t=false;}}return t;},render:function(s){var u=this,r=u.CLASSES,t=u._rows;u.addClass(r.CAROUSEL);if(!u._clipEl){u._clipEl=u._createCarouselClip();u._clipEl.appendChild(u._carouselEl);}if(s){u.appendChild(u._clipEl);u.appendTo(s);}else{if(!e.inDocument(u.get("element"))){return false;}u.appendChild(u._clipEl);}if(t){e.addClass(u._clipEl,r.MULTI_ROW);}if(u.get("isVertical")){u.addClass(r.VERTICAL);}else{u.addClass(r.HORIZONTAL);}if(u.get("numItems")<1){return false;}u._refreshUi();return true;},scrollBackward:function(){var r=this;r.scrollTo(r._firstItem-r.get("scrollIncrement"));},scrollForward:function(){var r=this;r.scrollTo(r._firstItem+r.get("scrollIncrement"));},scrollPageBackward:function(){var t=this,u=t.get("isVertical"),s=t._cols,r=t._firstItem-t.get("numVisible");if(r<0){if(s){r=t._firstItem-s;}}if(t.get("selectOnScroll")){t._selectedItem=t._getSelectedItem(r);}t.scrollTo(r);},scrollPageForward:function(){var s=this,r=s._firstItem+s.get("numVisible");if(r>s.get("numItems")){r=0;}if(s.get("selectOnScroll")){s._selectedItem=s._getSelectedItem(r);}s.scrollTo(r);},scrollTo:function(AL,AI){var AH=this,u,AJ,z,AB,AC,AM,AN,AO,AD,AA,v,AF,s,w,t,x,AE,y,AP,AK=AH._itemsTable,AG=AK.items,r=AK.loading;if(p.isUndefined(AL)||AL==AH._firstItem||AH.isAnimating()){return;}AJ=AH.get("animation");z=AH.get("isCircular");AB=AH.get("isVertical");AA=AH._cols;v=AH._rows;AO=AH._firstItem;AF=AH.get("numItems");s=AH.get("numVisible");t=AH.get("currentPage");AP=function(){if(AH.isAutoPlayOn()){AH.stopAutoPlay();}};if(AL<0){if(z){AL=AF+AL;}else{AP.call(AH);return;}}else{if(AF>0&&AL>AF-1){if(AH.get("isCircular")){AL=AF-AL;}else{AP.call(AH);return;}}}if(isNaN(AL)){return;}AN=(AH._firstItem>AL)?"backward":"forward";AE=AO+s;AE=(AE>AF-1)?AF-1:AE;x=AH.fireEvent(i,{dir:AN,first:AO,last:AE});if(x===false){return;}AH.fireEvent(J,{page:t});AD=AL+s-1;AH._loadItems(AD>AF-1?AF-1:AD);AM=0-AL;if(v){if(AB){AM=parseInt(AM/AA,10);}else{AM=parseInt(AM/v,10);}}y=0;while(AM<0&&y<AL+s-1&&y<AF){if(!AG[y]&&!r[y]){AM++;}y+=v?v:1;}AH._firstItem=AL;AH.set("firstVisible",AL);AE=AL+s;AE=(AE>AF-1)?AF-1:AE;w=j.call(AH,AM);u=AJ.speed>0;if(u){AH._animateAndSetCarouselOffset(w,AL,AE,AI);}else{AH._setCarouselOffset(w);E.call(AH,AL,AE);}},getPageForItem:function(r){return Math.ceil((r+1)/parseInt(this.get("numVisible"),10));},getFirstVisibleOnPage:function(r){return(r-1)*this.get("numVisible");
+},selectPreviousItem:function(){var t=this,s=0,r=t.get("selectedItem");if(r==this._firstItem){s=r-t.get("numVisible");t._selectedItem=t._getSelectedItem(r-1);t.scrollTo(s);}else{s=t.get("selectedItem")-t.get("scrollIncrement");t.set("selectedItem",t._getSelectedItem(s));}},selectNextItem:function(){var s=this,r=0;r=s.get("selectedItem")+s.get("scrollIncrement");s.set("selectedItem",s._getSelectedItem(r));},show:function(){var s=this,r=s.CLASSES;if(s.fireEvent(Y)!==false){s.addClass(r.VISIBLE);s.fireEvent(V);}},startAutoPlay:function(){var r=this,s;if(p.isUndefined(r._autoPlayTimer)){s=r.get("autoPlayInterval");if(s<=0){return;}r._isAutoPlayInProgress=true;r.fireEvent(Z);r._autoPlayTimer=setTimeout(function(){r._autoScroll();},s);}},stopAutoPlay:function(){var r=this;if(!p.isUndefined(r._autoPlayTimer)){clearTimeout(r._autoPlayTimer);delete r._autoPlayTimer;r._isAutoPlayInProgress=false;r.fireEvent(q);}},updatePagination:function(){var z=this,x=z._pagination;if(!x.el){return false;}var w=z.get("numItems"),AA=z.get("numVisible"),u=z.get("firstVisible")+1,v=z.get("currentPage")+1,r=z.get("numPages"),t={"numVisible":AA,"numPages":r,"numItems":w,"selectedItem":z.get("selectedItem")+1,"currentPage":v,"firstVisible":u,"lastVisible":z.get("lastVisible")+1},s=x.callback||{},y=s.scope&&s.obj?s.obj:z;x.el.innerHTML=p.isFunction(s.fn)?s.fn.apply(y,[x.template,t]):YAHOO.lang.substitute(x.template,t);},registerPagination:function(s,u,r){var t=this;t._pagination.template=s;t._pagination.callback=r||{};if(!t._pagination.el){t._pagination.el=W("DIV",{className:t.CLASSES.PAGINATION});if(u=="before"){t._navEl.insertBefore(t._pagination.el,t._navEl.firstChild);}else{t._navEl.appendChild(t._pagination.el);}t.on("itemSelected",t.updatePagination);t.on("pageChange",t.updatePagination);}t.updatePagination();},toString:function(){return P+(this.get?" (#"+this.get("id")+")":"");},_animateAndSetCarouselOffset:function(w,u,s){var v=this,t=v.get("animation"),r=null;if(v.get("isVertical")){r=new YAHOO.util.Motion(v._carouselEl,{top:{to:w}},t.speed,t.effect);}else{r=new YAHOO.util.Motion(v._carouselEl,{left:{to:w}},t.speed,t.effect);}v._isAnimationInProgress=true;r.onComplete.subscribe(v._animationCompleteHandler,{scope:v,item:u,last:s});r.animate();},_animationCompleteHandler:function(r,s,t){t.scope._isAnimationInProgress=false;E.call(t.scope,t.item,t.last);},_autoScroll:function(){var s=this,t=s._firstItem,r;if(t>=s.get("numItems")-1){if(s.get("isCircular")){r=0;}else{s.stopAutoPlay();}}else{r=t+s.get("numVisible");}s._selectedItem=s._getSelectedItem(r);s.scrollTo.call(s,r);},_createCarousel:function(s){var u=this,r=u.CLASSES,t=e.get(s);if(!t){t=W("DIV",{className:r.CAROUSEL,id:s});}if(!u._carouselEl){u._carouselEl=W(u.get("carouselEl"),{className:r.CAROUSEL_EL});}return t;},_createCarouselClip:function(){return W("DIV",{className:this.CLASSES.CONTENT});},_createCarouselItem:function(u){var r,t=this,s=m.call(t,u.pos);return W(t.get("carouselItemEl"),{className:u.className,styles:u.styles,content:u.content,id:u.id});},_getValidIndex:function(t){var w=this,r=w.get("isCircular"),u=w.get("numItems"),v=w.get("numVisible"),s=u-1;if(t<0){t=r?Math.ceil(u/v)*v+t:0;}else{if(t>s){t=r?0:s;}}return t;},_getSelectedItem:function(v){var u=this,r=u.get("isCircular"),t=u.get("numItems"),s=t-1;if(v<0){if(r){v=t+v;}else{v=u.get("selectedItem");}}else{if(v>s){if(r){v=v-t;}else{v=u.get("selectedItem");}}}return v;},_itemClickHandler:function(v){var y=this,w=y.get("carouselItemEl"),s=y.get("element"),t,u,x=c.getTarget(v),r=x.tagName.toUpperCase();if(r==="INPUT"||r==="SELECT"||r==="TEXTAREA"){return;}while(x&&x!=s&&x.id!=y._carouselEl){t=x.nodeName;if(t.toUpperCase()==w){break;}x=x.parentNode;}if((u=y.getItemPositionById(x.id))>=0){y.set("selectedItem",y._getSelectedItem(u));y.focus();}},_keyboardEventHandler:function(t){var v=this,s=c.getCharCode(t),u=c.getTarget(t),r=false;if(v.isAnimating()||u.tagName.toUpperCase()==="SELECT"){return;}switch(s){case 37:case 38:v.selectPreviousItem();r=true;break;case 39:case 40:v.selectNextItem();r=true;break;case 33:v.scrollPageBackward();r=true;break;case 34:v.scrollPageForward();r=true;break;}if(r){if(v.isAutoPlayOn()){v.stopAutoPlay();}c.preventDefault(t);}},_loadItems:function(t){var w=this,s=w.get("numItems"),u=w.get("numVisible"),v=w.get("revealAmount"),x=w._itemsTable.items.length,r=w.get("lastVisible");if(x>t&&t+1>=u){x=t%u||t==r?t-t%u:t-u+1;}if(v&&t<s-1){t++;}if(t>=x&&(!w.getItem(x)||!w.getItem(t))){w.fireEvent(L,{ev:L,first:x,last:t,num:t-x+1});}},_pagerChangeHandler:function(s){var v=this,u=c.getTarget(s),t=u.value,r;if(t){r=v.getFirstVisibleOnPage(t);v._selectedItem=r;v.scrollTo(r);v.focus();}},_pagerClickHandler:function(x){var z=this,t=z.CLASSES,u=c.getTarget(x),s=u.nodeName.toUpperCase(),r,w,v,y;if(e.hasClass(u,t.PAGER_ITEM)||e.hasClass(u.parentNode,t.PAGER_ITEM)){if(s=="EM"){u=u.parentNode;}r=u.href;w=r.lastIndexOf("#");v=parseInt(r.substring(w+1),10);if(v!=-1){y=z.getFirstVisibleOnPage(v);z._selectedItem=y;z.scrollTo(y);z.focus();}c.preventDefault(x);}},_parseCarousel:function(t){var w=this,x,r,s,v,u;r=w.CLASSES;s=w.get("carouselEl");v=false;for(x=t.firstChild;x;x=x.nextSibling){if(x.nodeType==1){u=x.nodeName;if(u.toUpperCase()==s){w._carouselEl=x;e.addClass(w._carouselEl,w.CLASSES.CAROUSEL_EL);v=true;}}}return v;},_parseCarouselItems:function(){var y=this,AA=y.CLASSES,v=0,z,r,t,u,s,w=y.get("firstVisible"),x=y._carouselEl;z=y._rows;t=y.get("carouselItemEl");for(r=x.firstChild;r;r=r.nextSibling){if(r.nodeType==1){s=r.nodeName;if(s.toUpperCase()==t){if(r.id){u=r.id;}else{u=e.generateId();r.setAttribute("id",u);}y.addItem(r,w);w++;}}}},_parseCarouselNavigation:function(x){var y=this,w,z=y.CLASSES,s,v,u,r,t=false;r=e.getElementsByClassName(z.PREV_PAGE,"*",x);if(r.length>0){for(v in r){if(r.hasOwnProperty(v)){s=r[v];if(s.nodeName=="INPUT"||s.nodeName=="BUTTON"||s.nodeName=="A"){y._navBtns.prev.push(s);}else{u=s.getElementsByTagName("INPUT");if(p.isArray(u)&&u.length>0){y._navBtns.prev.push(u[0]);
+}else{u=s.getElementsByTagName("BUTTON");if(p.isArray(u)&&u.length>0){y._navBtns.prev.push(u[0]);}}}}}w={prev:r};}r=e.getElementsByClassName(z.NEXT_PAGE,"*",x);if(r.length>0){for(v in r){if(r.hasOwnProperty(v)){s=r[v];if(s.nodeName=="INPUT"||s.nodeName=="BUTTON"||s.nodeName=="A"){y._navBtns.next.push(s);}else{u=s.getElementsByTagName("INPUT");if(p.isArray(u)&&u.length>0){y._navBtns.next.push(u[0]);}else{u=s.getElementsByTagName("BUTTON");if(p.isArray(u)&&u.length>0){y._navBtns.next.push(u[0]);}}}}}if(w){w.next=r;}else{w={next:r};}}if(w){y.set("navigation",w);t=true;}return t;},_refreshUi:function(){var v=this,s,w=v.get("isVertical"),y=v.get("firstVisible"),t,x,r,u;if(v._itemsTable.numItems<1){return;}u=O.call(v,w?"height":"width");t=v._itemsTable.items[y].id;u=w?d(t,"width"):d(t,"height");e.setStyle(v._carouselEl,w?"width":"height",u+"px");v._hasRendered=true;v.fireEvent(H);},_setCarouselOffset:function(t){var r=this,s;s=r.get("isVertical")?"top":"left";e.setStyle(r._carouselEl,s,t+"px");},_setupCarouselNavigation:function(){var w=this,u,s,r,y,v,x,t;r=w.CLASSES;v=e.getElementsByClassName(r.NAVIGATION,"DIV",w.get("element"));if(v.length===0){v=W("DIV",{className:r.NAVIGATION});w.insertBefore(v,e.getFirstChild(w.get("element")));}else{v=v[0];}w._pages.el=W("UL");v.appendChild(w._pages.el);y=w.get("navigation");if(p.isString(y.prev)||p.isArray(y.prev)){if(p.isString(y.prev)){y.prev=[y.prev];}for(u in y.prev){if(y.prev.hasOwnProperty(u)){w._navBtns.prev.push(e.get(y.prev[u]));}}}else{t=W("SPAN",{className:r.BUTTON+r.FIRST_NAV});e.setStyle(t,"visibility","visible");u=e.generateId();t.innerHTML='<button type="button" '+'id="'+u+'" name="'+w.STRINGS.PREVIOUS_BUTTON_TEXT+'">'+w.STRINGS.PREVIOUS_BUTTON_TEXT+"</button>";v.appendChild(t);u=e.get(u);w._navBtns.prev=[u];s={prev:[t]};}if(p.isString(y.next)||p.isArray(y.next)){if(p.isString(y.next)){y.next=[y.next];}for(u in y.next){if(y.next.hasOwnProperty(u)){w._navBtns.next.push(e.get(y.next[u]));}}}else{x=W("SPAN",{className:r.BUTTON+r.NEXT_NAV});e.setStyle(x,"visibility","visible");u=e.generateId();x.innerHTML='<button type="button" '+'id="'+u+'" name="'+w.STRINGS.NEXT_BUTTON_TEXT+'">'+w.STRINGS.NEXT_BUTTON_TEXT+"</button>";v.appendChild(x);u=e.get(u);w._navBtns.next=[u];if(s){s.next=[x];}else{s={next:[x]};}}if(s){w.set("navigation",s);}return v;},_setClipContainerSize:function(r,t){var z=this,x=z.get("isVertical"),AB=z._rows,v=z._cols,y=z.get("revealAmount"),s=O.call(z,"height"),u=O.call(z,"width"),AA,w;r=r||z._clipEl;if(AB){AA=s*AB;w=u*v;}else{t=t||z.get("numVisible");if(x){AA=s*t;}else{w=u*t;}}z._recomputeSize=(AA===0);if(z._recomputeSize){z._hasRendered=false;return;}y=N.call(z);if(x){AA+=(y*2);}else{w+=(y*2);}if(x){AA+=M(z._carouselEl,"height");e.setStyle(r,"height",AA+"px");if(v){w+=M(z._carouselEl,"width");e.setStyle(r,"width",w+(0)+"px");}}else{w+=M(z._carouselEl,"width");e.setStyle(r,"width",w+"px");if(AB){AA+=M(z._carouselEl,"height");e.setStyle(r,"height",AA+"px");}}z._setContainerSize(r);},_setContainerSize:function(s,t){var w=this,r=w.CONFIG,z=w.CLASSES,v,y,u,x;v=w.get("isVertical");y=w._rows;u=w._cols;s=s||w._clipEl;t=t||(v?"height":"width");x=parseFloat(e.getStyle(s,t),10);x=p.isNumber(x)?x:0;if(v){x+=M(w._carouselEl,"height")+d(w._navEl,"height");}else{x+=M(w._carouselEl,"width");}if(!v){if(x<r.HORZ_MIN_WIDTH){x=r.HORZ_MIN_WIDTH;w.addClass(z.MIN_WIDTH);}}w.setStyle(t,x+"px");if(v){x=O.call(w,"width");if(u){x=x*u;}e.setStyle(w._carouselEl,"width",x+"px");if(x<r.VERT_MIN_WIDTH){x=r.VERT_MIN_WIDTH;w.addClass(z.MIN_WIDTH);}w.setStyle("width",x+"px");}else{if(y){x=O.call(w,"height");x=x*y;e.setStyle(w._carouselEl,"height",x+"px");}}},_setFirstVisible:function(s){var r=this;if(s>=0&&s<r.get("numItems")){r.scrollTo(s);}else{s=r.get("firstVisible");}return s;},_setNavigation:function(r){var s=this;if(r.prev){c.on(r.prev,"click",f,s);}if(r.next){c.on(r.next,"click",k,s);}},_setNumVisible:function(s){var r=this;r._setClipContainerSize(r._clipEl,s);},_numVisibleSetter:function(t){var s=this,r=t;if(p.isArray(t)){s._cols=t[0];s._rows=t[1];r=t[0]*t[1];}return r;},_selectedItemSetter:function(s){var r=this;return(s<r.get("numItems"))?s:0;},_setNumItems:function(t){var s=this,r=s._itemsTable.numItems;if(p.isArray(s._itemsTable.items)){if(s._itemsTable.items.length!=r){r=s._itemsTable.items.length;s._itemsTable.numItems=r;}}if(t<r){while(r>t){s.removeItem(r-1);r--;}}return t;},_setOrientation:function(t){var s=this,r=s.CLASSES;if(t){s.replaceClass(r.HORIZONTAL,r.VERTICAL);}else{s.replaceClass(r.VERTICAL,r.HORIZONTAL);}this._itemAttrCache={};return t;},_setRevealAmount:function(s){var r=this;if(s>=0&&s<=100){s=parseInt(s,10);s=p.isNumber(s)?s:0;r._setClipContainerSize();}else{s=r.get("revealAmount");}return s;},_setSelectedItem:function(r){this._selectedItem=r;},_getNumPages:function(){return Math.ceil(parseInt(this.get("numItems"),10)/parseInt(this.get("numVisible"),10));},_getLastVisible:function(){var r=this;return r.get("currentPage")+1==r.get("numPages")?r.get("numItems")-1:r.get("firstVisible")+r.get("numVisible")-1;},_syncUiForItemAdd:function(u){var v,AA=this,x=AA._carouselEl,r,AB,t=AA._itemsTable,s,w,y,z;w=p.isUndefined(u.pos)?u.newPos||t.numItems-1:u.pos;if(!s){AB=t.items[w]||{};r=AA._createCarouselItem({className:AB.className,styles:AB.styles,content:AB.item,id:AB.id,pos:w});if(p.isUndefined(u.pos)){if(!p.isUndefined(t.loading[w])){s=t.loading[w];}if(s){x.replaceChild(r,s);delete t.loading[w];}else{x.appendChild(r);}}else{if(!p.isUndefined(t.items[u.pos+1])){y=e.get(t.items[u.pos+1].id);}if(y){x.insertBefore(r,y);}else{}}}else{if(p.isUndefined(u.pos)){if(!e.isAncestor(AA._carouselEl,s)){x.appendChild(s);}}else{if(!e.isAncestor(x,s)){if(!p.isUndefined(t.items[u.pos+1])){x.insertBefore(s,e.get(t.items[u.pos+1].id));}}}}if(!AA._hasRendered){AA._refreshUi();}if(AA.get("selectedItem")<0){AA.set("selectedItem",AA.get("firstVisible"));}AA._syncUiItems();},_syncUiForItemReplace:function(x){var w=this,t=w._carouselEl,r=w._itemsTable,y=x.pos,v=x.newItem,s=x.oldItem,u;
+u=w._createCarouselItem({className:v.className,styles:v.styles,content:v.item,id:v.id,pos:y});if(u&&s){c.purgeElement(s,true);t.replaceChild(u,e.get(s.id));if(!p.isUndefined(r.loading[y])){r.numItems++;delete r.loading[y];}}if(!w._hasRendered){w._refreshUi();}w._syncUiItems();},_syncUiForItemRemove:function(w){var v=this,r=v._carouselEl,t,u,s,x;s=v.get("numItems");u=w.item;x=w.pos;if(u&&(t=e.get(u.id))){if(t&&e.isAncestor(r,t)){c.purgeElement(t,true);r.removeChild(t);}if(v.get("selectedItem")==x){x=x>=s?s-1:x;}}else{}v._syncUiItems();},_syncUiForLazyLoading:function(v){var z=this,x=z._carouselEl,t=z._itemsTable,w=t.items.length,y=t.items[v.last+1],r,s;if(!y&&v.last<w){s=v.first;do{y=t.items[s];s++;}while(s<w&&!y);}for(var u=v.first;u<=v.last;u++){if(p.isUndefined(t.loading[u])&&p.isUndefined(t.items[u])){r=z._createCarouselItem({className:z.CLASSES.ITEM_LOADING,content:z.STRINGS.ITEM_LOADING_CONTENT,id:e.generateId(),pos:u});if(r){if(y){y=e.get(y.id);if(y){x.insertBefore(r,y);}else{}}else{x.appendChild(r);}}t.loading[u]=r;}}z._syncUiItems();},_syncUiItems:function(){var u,y=this,w=y.get("numItems"),t,s=y._itemsTable,v=s.items,r=s.loading,z,x;for(t=0;t<w;t++){z=v[t]||r[t];if(z&&z.id){x=m.call(y,t);z.styles=z.styles||{};for(u in x){if(x.hasOwnProperty(u)){z.styles[u]=x[u];}}G(e.get(z.id),x);}}},_updateNavButtons:function(v,s){var t,r=this.CLASSES,w,u=v.parentNode;if(!u){return;}w=u.parentNode;if(v.nodeName.toUpperCase()=="BUTTON"&&e.hasClass(u,r.BUTTON)){if(s){if(w){t=e.getChildren(w);if(t){e.removeClass(t,r.FOCUSSED_BUTTON);}}e.addClass(u,r.FOCUSSED_BUTTON);}else{e.removeClass(u,r.FOCUSSED_BUTTON);}}},_updatePagerButtons:function(){var z=this,x=z.CLASSES,y=z._pages.cur,r,w,u,AA,s=z.get("numVisible"),v=z._pages.num,t=z._pages.el;if(v===0||!t){return;}e.setStyle(t,"visibility","hidden");while(t.firstChild){t.removeChild(t.firstChild);}for(u=0;u<v;u++){r=document.createElement("LI");if(u===0){e.addClass(r,x.FIRST_PAGE);}if(u==y){e.addClass(r,x.SELECTED_NAV);}w="<a class="+x.PAGER_ITEM+' href="#'+(u+1)+'" tabindex="0"><em>'+z.STRINGS.PAGER_PREFIX_TEXT+" "+(u+1)+"</em></a>";r.innerHTML=w;t.appendChild(r);}e.setStyle(t,"visibility","visible");},_updatePagerMenu:function(){var z=this,x=z.CLASSES,y=z._pages.cur,s,v,AA,t=z.get("numVisible"),w=z._pages.num,u=z._pages.el,r;if(w===0){return;}r=document.createElement("SELECT");if(!r){return;}e.setStyle(u,"visibility","hidden");while(u.firstChild){u.removeChild(u.firstChild);}for(v=0;v<w;v++){s=document.createElement("OPTION");s.value=v+1;s.innerHTML=z.STRINGS.PAGER_PREFIX_TEXT+" "+(v+1);if(v==y){s.setAttribute("selected","selected");}r.appendChild(s);}s=document.createElement("FORM");if(!s){}else{s.appendChild(r);u.appendChild(s);}c.addListener(r,"change",z._pagerChangeHandler,this,true);e.setStyle(u,"visibility","visible");},_updateTabIndex:function(r){var s=this;if(r){if(s._focusableItemEl){s._focusableItemEl.tabIndex=-1;}s._focusableItemEl=r;r.tabIndex=0;}},_validateAnimation:function(r){var s=true;if(p.isObject(r)){if(r.speed){s=s&&p.isNumber(r.speed);}if(r.effect){s=s&&p.isFunction(r.effect);}else{if(!p.isUndefined(YAHOO.util.Easing)){r.effect=YAHOO.util.Easing.easeOut;}}}else{s=false;}return s;},_validateFirstVisible:function(t){var s=this,r=s.get("numItems");if(p.isNumber(t)){if(r===0&&t==r){return true;}else{return(t>=0&&t<r);}}return false;},_validateNavigation:function(r){var s;if(!p.isObject(r)){return false;}if(r.prev){if(!p.isArray(r.prev)){return false;}for(s in r.prev){if(r.prev.hasOwnProperty(s)){if(!p.isString(r.prev[s].nodeName)){return false;}}}}if(r.next){if(!p.isArray(r.next)){return false;}for(s in r.next){if(r.next.hasOwnProperty(s)){if(!p.isString(r.next[s].nodeName)){return false;}}}}return true;},_validateNumItems:function(r){return p.isNumber(r)&&(r>=0);},_validateNumVisible:function(r){var s=false;if(p.isNumber(r)){s=r>0&&r<=this.get("numItems");}else{if(p.isArray(r)){if(p.isNumber(r[0])&&p.isNumber(r[1])){s=r[0]*r[1]>0&&r.length==2;}}}return s;},_validateRevealAmount:function(r){var s=false;if(p.isNumber(r)){s=r>=0&&r<100;}return s;},_validateScrollIncrement:function(r){var s=false;if(p.isNumber(r)){s=(r>0&&r<this.get("numItems"));}return s;}});})();YAHOO.register("carousel",YAHOO.widget.Carousel,{version:"2.8.1",build:"19"});

data/vendor/assets/javascripts/yui-2.8.1/build/carousel/carousel.js

@@ -0,0 +1,4349 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.8.1
+*/
+/**
+ * The Carousel module provides a widget for browsing among a set of like
+ * objects represented pictorially.
+ *
+ * @module carousel
+ * @requires yahoo, dom, event, element
+ * @optional animation
+ * @namespace YAHOO.widget
+ * @title Carousel Widget
+ * @beta
+ */
+(function () {
+
+    var WidgetName;             // forward declaration
+
+    /**
+     * The Carousel widget.
+     *
+     * @class Carousel
+     * @extends YAHOO.util.Element
+     * @constructor
+     * @param el {HTMLElement | String} The HTML element that represents the
+     * the container that houses the Carousel.
+     * @param cfg {Object} (optional) The configuration values
+     */
+    YAHOO.widget.Carousel = function (el, cfg) {
+
+        YAHOO.widget.Carousel.superclass.constructor.call(this, el, cfg);
+    };
+
+    /*
+     * Private variables of the Carousel component
+     */
+
+    /* Some abbreviations to avoid lengthy typing and lookups. */
+    var Carousel    = YAHOO.widget.Carousel,
+        Dom         = YAHOO.util.Dom,
+        Event       = YAHOO.util.Event,
+        JS          = YAHOO.lang;
+
+    /**
+     * The widget name.
+     * @private
+     * @static
+     */
+    WidgetName = "Carousel";
+
+    /**
+     * The internal table of Carousel instances.
+     * @private
+     * @static
+     */
+    var instances = {},
+
+    /*
+     * Custom events of the Carousel component
+     */
+
+    /**
+     * @event afterScroll
+     * @description Fires when the Carousel has scrolled to the previous or
+     * next page.  Passes back the index of the first and last visible items in
+     * the Carousel.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    afterScrollEvent = "afterScroll",
+
+    /**
+     * @event allItemsRemovedEvent
+     * @description Fires when all items have been removed from the Carousel.
+     * See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    allItemsRemovedEvent = "allItemsRemoved",
+
+    /**
+     * @event beforeHide
+     * @description Fires before the Carousel is hidden.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    beforeHideEvent = "beforeHide",
+
+    /**
+     * @event beforePageChange
+     * @description Fires when the Carousel is about to scroll to the previous
+     * or next page.  Passes back the page number of the current page.  Note
+     * that the first page number is zero.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    beforePageChangeEvent = "beforePageChange",
+
+    /**
+     * @event beforeScroll
+     * @description Fires when the Carousel is about to scroll to the previous
+     * or next page.  Passes back the index of the first and last visible items
+     * in the Carousel and the direction (backward/forward) of the scroll.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    beforeScrollEvent = "beforeScroll",
+
+    /**
+     * @event beforeShow
+     * @description Fires when the Carousel is about to be shown.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    beforeShowEvent = "beforeShow",
+
+    /**
+     * @event blur
+     * @description Fires when the Carousel loses focus.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    blurEvent = "blur",
+
+    /**
+     * @event focus
+     * @description Fires when the Carousel gains focus.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    focusEvent = "focus",
+
+    /**
+     * @event hide
+     * @description Fires when the Carousel is hidden.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    hideEvent = "hide",
+
+    /**
+     * @event itemAdded
+     * @description Fires when an item has been added to the Carousel.  Passes
+     * back the content of the item that would be added, the index at which the
+     * item would be added, and the event itself.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    itemAddedEvent = "itemAdded",
+
+    /**
+     * @event itemRemoved
+     * @description Fires when an item has been removed from the Carousel.
+     * Passes back the content of the item that would be removed, the index
+     * from which the item would be removed, and the event itself.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    itemRemovedEvent = "itemRemoved",
+
+    /**
+     * @event itemReplaced
+     * @description Fires when an item has been replaced in the Carousel.
+     * Passes back the content of the item that was replaced, the content
+     * of the new item, the index where the replacement occurred, and the event
+     * itself.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    itemReplacedEvent = "itemReplaced",
+
+    /**
+     * @event itemSelected
+     * @description Fires when an item has been selected in the Carousel.
+     * Passes back the index of the selected item in the Carousel.  Note, that
+     * the index begins from zero.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    itemSelectedEvent = "itemSelected",
+
+    /**
+     * @event loadItems
+     * @description Fires when the Carousel needs more items to be loaded for
+     * displaying them.  Passes back the first and last visible items in the
+     * Carousel, and the number of items needed to be loaded.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    loadItemsEvent = "loadItems",
+
+    /**
+     * @event navigationStateChange
+     * @description Fires when the state of either one of the navigation
+     * buttons are changed from enabled to disabled or vice versa.  Passes back
+     * the state (true/false) of the previous and next buttons.  The value true
+     * signifies the button is enabled, false signifies disabled.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    navigationStateChangeEvent = "navigationStateChange",
+
+    /**
+     * @event pageChange
+     * @description Fires after the Carousel has scrolled to the previous or
+     * next page.  Passes back the page number of the current page.  Note
+     * that the first page number is zero.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    pageChangeEvent = "pageChange",
+
+    /*
+     * Internal event.
+     * @event render
+     * @description Fires when the Carousel is rendered.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    renderEvent = "render",
+
+    /**
+     * @event show
+     * @description Fires when the Carousel is shown.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    showEvent = "show",
+
+    /**
+     * @event startAutoPlay
+     * @description Fires when the auto play has started in the Carousel.  See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    startAutoPlayEvent = "startAutoPlay",
+
+    /**
+     * @event stopAutoPlay
+     * @description Fires when the auto play has been stopped in the Carousel.
+     * See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    stopAutoPlayEvent = "stopAutoPlay",
+
+    /*
+     * Internal event.
+     * @event uiUpdateEvent
+     * @description Fires when the UI has been updated.
+     * See
+     * <a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
+     * for more information on listening for this event.
+     * @type YAHOO.util.CustomEvent
+     */
+    uiUpdateEvent = "uiUpdate";
+
+    /*
+     * Private helper functions used by the Carousel component
+     */
+
+   /**
+     * Set multiple styles on one element.
+     * @method setStyles
+     * @param el {HTMLElement} The element to set styles on
+     * @param style {Object} top:"10px", left:"0px", etc.
+     * @private
+     */
+     function setStyles(el, styles) {
+         var which;
+
+         for (which in styles) {
+             if (styles.hasOwnProperty(which)) {
+                 Dom.setStyle(el, which, styles[which]);
+             }
+         }
+     }
+
+    /**
+     * Create an element, set its class name and optionally install the element
+     * to its parent.
+     * @method createElement
+     * @param el {String} The element to be created
+     * @param attrs {Object} Configuration of parent, class and id attributes.
+     * If the content is specified, it is inserted after creation of the
+     * element. The content can also be an HTML element in which case it would
+     * be appended as a child node of the created element.
+     * @private
+     */
+    function createElement(el, attrs) {
+        var newEl = document.createElement(el);
+
+        attrs = attrs || {};
+        if (attrs.className) {
+            Dom.addClass(newEl, attrs.className);
+        }
+
+        if (attrs.styles) {
+            setStyles(newEl, attrs.styles);
+        }
+
+        if (attrs.parent) {
+            attrs.parent.appendChild(newEl);
+        }
+
+        if (attrs.id) {
+            newEl.setAttribute("id", attrs.id);
+        }
+
+        if (attrs.content) {
+            if (attrs.content.nodeName) {
+                newEl.appendChild(attrs.content);
+            } else {
+                newEl.innerHTML = attrs.content;
+            }
+        }
+
+        return newEl;
+    }
+
+    /**
+     * Get the computed style of an element.
+     *
+     * @method getStyle
+     * @param el {HTMLElement} The element for which the style needs to be
+     * returned.
+     * @param style {String} The style attribute
+     * @param type {String} "int", "float", etc. (defaults to int)
+     * @private
+     */
+    function getStyle(el, style, type) {
+        var value;
+
+        if (!el) {
+            return 0;
+        }
+
+        function getStyleIntVal(el, style) {
+            var val;
+
+            /*
+             * XXX: Safari calculates incorrect marginRight for an element
+             * which has its parent element style set to overflow: hidden
+             * https://bugs.webkit.org/show_bug.cgi?id=13343
+             * Let us assume marginLeft == marginRight
+             */
+            if (style == "marginRight" && YAHOO.env.ua.webkit) {
+                val = parseInt(Dom.getStyle(el, "marginLeft"), 10);
+            } else {
+                val = parseInt(Dom.getStyle(el, style), 10);
+            }
+
+            return JS.isNumber(val) ? val : 0;
+        }
+
+        function getStyleFloatVal(el, style) {
+            var val;
+
+            /*
+             * XXX: Safari calculates incorrect marginRight for an element
+             * which has its parent element style set to overflow: hidden
+             * https://bugs.webkit.org/show_bug.cgi?id=13343
+             * Let us assume marginLeft == marginRight
+             */
+            if (style == "marginRight" && YAHOO.env.ua.webkit) {
+                val = parseFloat(Dom.getStyle(el, "marginLeft"));
+            } else {
+                val = parseFloat(Dom.getStyle(el, style));
+            }
+
+            return JS.isNumber(val) ? val : 0;
+        }
+
+        if (typeof type == "undefined") {
+            type = "int";
+        }
+
+        switch (style) {
+        case "height":
+            value = el.offsetHeight;
+            if (value > 0) {
+                value += getStyleIntVal(el, "marginTop")        +
+                        getStyleIntVal(el, "marginBottom");
+            } else {
+                value = getStyleFloatVal(el, "height")          +
+                        getStyleIntVal(el, "marginTop")         +
+                        getStyleIntVal(el, "marginBottom")      +
+                        getStyleIntVal(el, "borderTopWidth")    +
+                        getStyleIntVal(el, "borderBottomWidth") +
+                        getStyleIntVal(el, "paddingTop")        +
+                        getStyleIntVal(el, "paddingBottom");
+            }
+            break;
+        case "width":
+            value = el.offsetWidth;
+            if (value > 0) {
+                value += getStyleIntVal(el, "marginLeft")       +
+                        getStyleIntVal(el, "marginRight");
+            } else {
+                value = getStyleFloatVal(el, "width")           +
+                        getStyleIntVal(el, "marginLeft")        +
+                        getStyleIntVal(el, "marginRight")       +
+                        getStyleIntVal(el, "borderLeftWidth")   +
+                        getStyleIntVal(el, "borderRightWidth")  +
+                        getStyleIntVal(el, "paddingLeft")       +
+                        getStyleIntVal(el, "paddingRight");
+            }
+            break;
+        default:
+            if (type == "int") {
+                value = getStyleIntVal(el, style);
+            } else if (type == "float") {
+                value = getStyleFloatVal(el, style);
+            } else {
+                value = Dom.getStyle(el, style);
+            }
+            break;
+        }
+
+        return value;
+    }
+
+    /**
+     * Compute and return the height or width of a single Carousel item
+     * depending upon the orientation.
+     *
+     * @method getCarouselItemSize
+     * @param which {String} "height" or "width" to be returned.  If this is
+     * passed explicitly, the calculated size is not cached.
+     * @private
+     */
+    function getCarouselItemSize(which) {
+        var carousel = this,
+            child,
+            item,
+            size     = 0,
+            first = carousel.get("firstVisible"),
+            vertical = false;
+
+        if (carousel._itemsTable.numItems === 0) {
+            return 0;
+        }
+
+        item = carousel._itemsTable.items[first] ||
+               carousel._itemsTable.loading[first];
+
+        if (JS.isUndefined(item)) {
+            return 0;
+        }
+
+        child = Dom.get(item.id);
+
+        if (typeof which == "undefined") {
+            vertical = carousel.get("isVertical");
+        } else {
+            vertical = which == "height";
+        }
+
+        if (this._itemAttrCache[which]) {
+            return this._itemAttrCache[which];
+        }
+
+        if (vertical) {
+            size = getStyle(child, "height");
+        } else {
+            size = getStyle(child, "width");
+        }
+
+        this._itemAttrCache[which] = size;
+
+        return size;
+    }
+
+    /**
+     * Return the size of a part of the item (reveal).
+     *
+     * @method getRevealSize
+     * @private
+     */
+    function getRevealSize() {
+        var carousel = this, isVertical, sz;
+
+        isVertical = carousel.get("isVertical");
+        sz  = getCarouselItemSize.call(carousel,
+                isVertical ? "height" : "width");
+        return (sz * carousel.get("revealAmount") / 100);
+    }
+
+    /**
+     * Compute and return the position of a Carousel item based on its
+     * position.
+     *
+     * @method getCarouselItemPosition
+     * @param position {Number} The position of the Carousel item.
+     * @private
+     */
+    function getCarouselItemPosition(pos) {
+        var carousel    = this,
+            itemsPerRow = carousel._cols,
+            itemsPerCol = carousel._rows,
+            page,
+            sz,
+            isVertical,
+            itemsCol,
+            itemsRow,
+            sentinel,
+            delta = 0,
+            top,
+            left,
+            rsz,
+            styles = {},
+            index = 0,
+            itemsTable = carousel._itemsTable,
+            items = itemsTable.items,
+            loading = itemsTable.loading;
+
+        isVertical = carousel.get("isVertical");
+        sz  = getCarouselItemSize.call(carousel,
+                isVertical ? "height" : "width");
+        rsz = getRevealSize.call(carousel);
+
+        // adjust for items not yet loaded
+        while (index < pos) {
+            if (!items[index] && !loading[index]) {
+                delta++;
+            }
+            index++;
+        }
+        pos -= delta;
+
+        if (itemsPerCol) {
+            page = this.getPageForItem(pos);
+            if (isVertical) {
+                itemsRow = Math.floor(pos/itemsPerRow);
+                delta = itemsRow;
+                top = delta * sz;
+                styles.top  = (top + rsz) + "px";
+
+                sz  = getCarouselItemSize.call(carousel, "width");
+
+                itemsCol = pos % itemsPerRow;
+                delta = itemsCol;
+                left = delta * sz;
+                styles.left = left + "px";
+            } else {
+                itemsCol = pos % itemsPerRow;
+                sentinel = (page - 1) * itemsPerRow;
+                delta = itemsCol + sentinel;
+                left = delta * sz;
+                styles.left = (left + rsz) + "px";
+
+                sz  = getCarouselItemSize.call(carousel, "height");
+
+                itemsRow = Math.floor(pos/itemsPerRow);
+                sentinel = (page - 1) * itemsPerCol;
+                delta = itemsRow - sentinel;
+                top = delta * sz;
+
+                styles.top  = top + "px";
+            }
+        } else {
+        if (isVertical) {
+            styles.left = 0;
+            styles.top  = ((pos * sz) + rsz) + "px";
+        } else {
+            styles.top  = 0;
+            styles.left = ((pos * sz) + rsz) + "px";
+        }
+        }
+
+        return styles;
+    }
+
+    /**
+     * Return the index of the first item in the view port for displaying item
+     * in "pos".
+     *
+     * @method getFirstVisibleForPosition
+     * @param pos {Number} The position of the item to be displayed
+     * @private
+     */
+    function getFirstVisibleForPosition(pos) {
+        var num = this.get("numVisible");
+        return Math.floor(pos / num) * num;
+    }
+
+    /**
+     * Return the scrolling offset size given the number of elements to
+     * scroll.
+     *
+     * @method getScrollOffset
+     * @param delta {Number} The delta number of elements to scroll by.
+     * @private
+     */
+    function getScrollOffset(delta) {
+        var itemSize = 0,
+            size     = 0;
+
+        itemSize = getCarouselItemSize.call(this);
+        size = itemSize * delta;
+
+        return size;
+    }
+
+    /**
+     * Scroll the Carousel by a page backward.
+     *
+     * @method scrollPageBackward
+     * @param {Event} ev The event object
+     * @param {Object} obj The context object
+     * @private
+     */
+    function scrollPageBackward(ev, obj) {
+        obj.scrollPageBackward();
+        Event.preventDefault(ev);
+    }
+
+    /**
+     * Scroll the Carousel by a page forward.
+     *
+     * @method scrollPageForward
+     * @param {Event} ev The event object
+     * @param {Object} obj The context object
+     * @private
+     */
+    function scrollPageForward(ev, obj) {
+        obj.scrollPageForward();
+        Event.preventDefault(ev);
+    }
+
+    /**
+     * Set the selected item.
+     *
+     * @method setItemSelection
+     * @param {Number} newpos The index of the new position
+     * @param {Number} oldpos The index of the previous position
+     * @private
+     */
+     function setItemSelection(newpos, oldpos) {
+        var carousel = this,
+            cssClass   = carousel.CLASSES,
+            el,
+            firstItem  = carousel._firstItem,
+            isCircular = carousel.get("isCircular"),
+            numItems   = carousel.get("numItems"),
+            numVisible = carousel.get("numVisible"),
+            position   = oldpos,
+            sentinel   = firstItem + numVisible - 1;
+
+        if (position >= 0 && position < numItems) {
+            if (!JS.isUndefined(carousel._itemsTable.items[position])) {
+                el = Dom.get(carousel._itemsTable.items[position].id);
+                if (el) {
+                    Dom.removeClass(el, cssClass.SELECTED_ITEM);
+                }
+            }
+        }
+
+        if (JS.isNumber(newpos)) {
+            newpos = parseInt(newpos, 10);
+            newpos = JS.isNumber(newpos) ? newpos : 0;
+        } else {
+            newpos = firstItem;
+        }
+
+        if (JS.isUndefined(carousel._itemsTable.items[newpos])) {
+            newpos = getFirstVisibleForPosition.call(carousel, newpos);
+            carousel.scrollTo(newpos); // still loading the item
+        }
+
+        if (!JS.isUndefined(carousel._itemsTable.items[newpos])) {
+            el = Dom.get(carousel._itemsTable.items[newpos].id);
+            if (el) {
+                Dom.addClass(el, cssClass.SELECTED_ITEM);
+            }
+        }
+
+        if (newpos < firstItem || newpos > sentinel) { // out of focus
+            newpos = getFirstVisibleForPosition.call(carousel, newpos);
+            carousel.scrollTo(newpos);
+        }
+    }
+
+    /**
+     * Fire custom events for enabling/disabling navigation elements.
+     *
+     * @method syncNavigation
+     * @private
+     */
+    function syncNavigation() {
+        var attach   = false,
+            carousel = this,
+            cssClass = carousel.CLASSES,
+            i,
+            navigation,
+            sentinel;
+
+        // Don't do anything if the Carousel is not rendered
+        if (!carousel._hasRendered) {
+            return;
+        }
+
+        navigation = carousel.get("navigation");
+        sentinel   = carousel._firstItem + carousel.get("numVisible");
+
+        if (navigation.prev) {
+            if (carousel.get("numItems") === 0 || carousel._firstItem === 0) {
+                if (carousel.get("numItems") === 0 ||
+                   !carousel.get("isCircular")) {
+                    Event.removeListener(navigation.prev, "click",
+                            scrollPageBackward);
+                    Dom.addClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);
+                    for (i = 0; i < carousel._navBtns.prev.length; i++) {
+                        carousel._navBtns.prev[i].setAttribute("disabled",
+                                "true");
+                    }
+                    carousel._prevEnabled = false;
+                } else {
+                    attach = !carousel._prevEnabled;
+                }
+            } else {
+                attach = !carousel._prevEnabled;
+            }
+
+            if (attach) {
+                Event.on(navigation.prev, "click", scrollPageBackward,
+                         carousel);
+                Dom.removeClass(navigation.prev, cssClass.FIRST_NAV_DISABLED);
+                for (i = 0; i < carousel._navBtns.prev.length; i++) {
+                    carousel._navBtns.prev[i].removeAttribute("disabled");
+                }
+                carousel._prevEnabled = true;
+            }
+        }
+
+        attach = false;
+        if (navigation.next) {
+            if (sentinel >= carousel.get("numItems")) {
+                if (!carousel.get("isCircular")) {
+                    Event.removeListener(navigation.next, "click",
+                            scrollPageForward);
+                    Dom.addClass(navigation.next, cssClass.DISABLED);
+                    for (i = 0; i < carousel._navBtns.next.length; i++) {
+                        carousel._navBtns.next[i].setAttribute("disabled",
+                                "true");
+                    }
+                    carousel._nextEnabled = false;
+                } else {
+                    attach = !carousel._nextEnabled;
+                }
+            } else {
+                attach = !carousel._nextEnabled;
+            }
+
+            if (attach) {
+                Event.on(navigation.next, "click", scrollPageForward,
+                         carousel);
+                Dom.removeClass(navigation.next, cssClass.DISABLED);
+                for (i = 0; i < carousel._navBtns.next.length; i++) {
+                    carousel._navBtns.next[i].removeAttribute("disabled");
+                }
+                carousel._nextEnabled = true;
+            }
+        }
+
+        carousel.fireEvent(navigationStateChangeEvent,
+                { next: carousel._nextEnabled, prev: carousel._prevEnabled });
+    }
+
+    /**
+     * Synchronize and redraw the Pager UI if necessary.
+     *
+     * @method syncPagerUi
+     * @private
+     */
+    function syncPagerUi(page) {
+        var carousel = this, numPages, numVisible;
+
+        // Don't do anything if the Carousel is not rendered
+        if (!carousel._hasRendered) {
+            return;
+        }
+
+        numVisible = carousel.get("numVisible");
+
+        if (!JS.isNumber(page)) {
+            page = Math.floor(carousel.get("selectedItem") / numVisible);
+        }
+
+        numPages = Math.ceil(carousel.get("numItems") / numVisible);
+
+        carousel._pages.num = numPages;
+        carousel._pages.cur = page;
+
+        if (numPages > carousel.CONFIG.MAX_PAGER_BUTTONS) {
+            carousel._updatePagerMenu();
+        } else {
+            carousel._updatePagerButtons();
+        }
+    }
+
+    /**
+     * Get full dimensions of an element.
+     *
+     * @method getDimensions
+     * @param {Object} el The element to get the dimensions of
+     * @param {String} which Get the height or width of an element
+     * @private
+     */
+    function getDimensions(el, which) {
+        switch (which) {
+        case 'height':
+            return  getStyle(el, "marginTop")        +
+                    getStyle(el, "marginBottom")     +
+                    getStyle(el, "paddingTop")       +
+                    getStyle(el, "paddingBottom")    +
+                    getStyle(el, "borderTopWidth")   +
+                    getStyle(el, "borderBottomWidth");
+        case 'width':
+            return   getStyle(el, "marginLeft")      +
+                     getStyle(el, "marginRight")     +
+                     getStyle(el, "paddingLeft")     +
+                     getStyle(el, "paddingRight")    +
+                     getStyle(el, "borderLeftWidth") +
+                     getStyle(el, "borderRightWidth");
+        default:
+            break;
+        }
+
+        return getStyle(el, which);
+    }
+
+    /**
+     * Handle UI update.
+     * Call the appropriate methods on events fired when an item is added, or
+     * removed for synchronizing the DOM.
+     *
+     * @method syncUi
+     * @param {Object} o The item that needs to be added or removed
+     * @private
+     */
+    function syncUi(o) {
+        var carousel = this;
+
+        if (!JS.isObject(o)) {
+            return;
+        }
+
+        switch (o.ev) {
+        case itemAddedEvent:
+            carousel._syncUiForItemAdd(o);
+            break;
+        case itemRemovedEvent:
+            carousel._syncUiForItemRemove(o);
+            break;
+        case itemReplacedEvent:
+            carousel._syncUiForItemReplace(o);
+            break;
+        case loadItemsEvent:
+            carousel._syncUiForLazyLoading(o);
+            break;
+        }
+
+        carousel.fireEvent(uiUpdateEvent);
+    }
+
+    /**
+     * Update the state variables after scrolling the Carousel view port.
+     *
+     * @method updateStateAfterScroll
+     * @param {Integer} item The index to which the Carousel has scrolled to.
+     * @param {Integer} sentinel The last element in the view port.
+     * @private
+     */
+    function updateStateAfterScroll(item, sentinel) {
+        var carousel   = this,
+            page       = carousel.get("currentPage"),
+            newPage,
+            numPerPage = carousel.get("numVisible");
+
+        newPage = parseInt(carousel._firstItem / numPerPage, 10);
+        if (newPage != page) {
+            carousel.setAttributeConfig("currentPage", { value: newPage });
+            carousel.fireEvent(pageChangeEvent, newPage);
+        }
+
+        if (carousel.get("selectOnScroll")) {
+            if (carousel.get("selectedItem") != carousel._selectedItem) {
+                carousel.set("selectedItem", carousel._selectedItem);
+            }
+        }
+
+        clearTimeout(carousel._autoPlayTimer);
+        delete carousel._autoPlayTimer;
+        if (carousel.isAutoPlayOn()) {
+            carousel.startAutoPlay();
+        }
+
+        carousel.fireEvent(afterScrollEvent,
+                           { first: carousel._firstItem,
+                             last: sentinel },
+                           carousel);
+    }
+
+    /*
+     * Static members and methods of the Carousel component
+     */
+
+    /**
+     * Return the appropriate Carousel object based on the id associated with
+     * the Carousel element or false if none match.
+     * @method getById
+     * @public
+     * @static
+     */
+    Carousel.getById = function (id) {
+        return instances[id] ? instances[id].object : false;
+    };
+
+    YAHOO.extend(Carousel, YAHOO.util.Element, {
+
+        /*
+         * Internal variables used within the Carousel component
+         */
+
+         /**
+         * Number of rows for a multirow carousel.
+         *
+         * @property _rows
+         * @private
+         */
+        _rows: null,
+
+        /**
+         * Number of cols for a multirow carousel.
+         *
+         * @property _cols
+         * @private
+         */
+        _cols: null,
+
+        /**
+         * The Animation object.
+         *
+         * @property _animObj
+         * @private
+         */
+        _animObj: null,
+
+        /**
+         * The Carousel element.
+         *
+         * @property _carouselEl
+         * @private
+         */
+        _carouselEl: null,
+
+        /**
+         * The Carousel clipping container element.
+         *
+         * @property _clipEl
+         * @private
+         */
+        _clipEl: null,
+
+        /**
+         * The current first index of the Carousel.
+         *
+         * @property _firstItem
+         * @private
+         */
+        _firstItem: 0,
+
+        /**
+         * Does the Carousel element have focus?
+         *
+         * @property _hasFocus
+         * @private
+         */
+        _hasFocus: false,
+
+        /**
+         * Is the Carousel rendered already?
+         *
+         * @property _hasRendered
+         * @private
+         */
+        _hasRendered: false,
+
+        /**
+         * Is the animation still in progress?
+         *
+         * @property _isAnimationInProgress
+         * @private
+         */
+        _isAnimationInProgress: false,
+
+        /**
+         * Is the auto-scrolling of Carousel in progress?
+         *
+         * @property _isAutoPlayInProgress
+         * @private
+         */
+        _isAutoPlayInProgress: false,
+
+        /**
+         * The table of items in the Carousel.
+         * The numItems is the number of items in the Carousel, items being the
+         * array of items in the Carousel.  The size is the size of a single
+         * item in the Carousel.  It is cached here for efficiency (to avoid
+         * computing the size multiple times).
+         *
+         * @property _itemsTable
+         * @private
+         */
+        _itemsTable: null,
+
+        /**
+         * The Carousel navigation buttons.
+         *
+         * @property _navBtns
+         * @private
+         */
+        _navBtns: null,
+
+        /**
+         * The Carousel navigation.
+         *
+         * @property _navEl
+         * @private
+         */
+        _navEl: null,
+
+        /**
+         * Status of the next navigation item.
+         *
+         * @property _nextEnabled
+         * @private
+         */
+        _nextEnabled: true,
+
+        /**
+         * The Carousel pages structure.
+         * This is an object of the total number of pages and the current page.
+         *
+         * @property _pages
+         * @private
+         */
+        _pages: null,
+
+        /**
+         * The Carousel pagination structure.
+         *
+         * @property _pagination
+         * @private
+         */
+        _pagination: {},
+
+        /**
+         * Status of the previous navigation item.
+         *
+         * @property _prevEnabled
+         * @private
+         */
+        _prevEnabled: true,
+
+        /**
+         * Whether the Carousel size needs to be recomputed or not?
+         *
+         * @property _recomputeSize
+         * @private
+         */
+        _recomputeSize: true,
+
+        /**
+         * Cache the Carousel item attributes.
+         *
+         * @property _itemAttrCache
+         * @private
+         */
+         _itemAttrCache: {},
+
+        /*
+         * CSS classes used by the Carousel component
+         */
+
+        CLASSES: {
+
+            /**
+             * The class name of the Carousel navigation buttons.
+             *
+             * @property BUTTON
+             * @default "yui-carousel-button"
+             */
+            BUTTON: "yui-carousel-button",
+
+            /**
+             * The class name of the Carousel element.
+             *
+             * @property CAROUSEL
+             * @default "yui-carousel"
+             */
+            CAROUSEL: "yui-carousel",
+
+            /**
+             * The class name of the container of the items in the Carousel.
+             *
+             * @property CAROUSEL_EL
+             * @default "yui-carousel-element"
+             */
+            CAROUSEL_EL: "yui-carousel-element",
+
+            /**
+             * The class name of the Carousel's container element.
+             *
+             * @property CONTAINER
+             * @default "yui-carousel-container"
+             */
+            CONTAINER: "yui-carousel-container",
+
+            /**
+             * The class name of the Carousel's container element.
+             *
+             * @property CONTENT
+             * @default "yui-carousel-content"
+             */
+            CONTENT: "yui-carousel-content",
+
+            /**
+             * The class name of a disabled navigation button.
+             *
+             * @property DISABLED
+             * @default "yui-carousel-button-disabled"
+             */
+            DISABLED: "yui-carousel-button-disabled",
+
+            /**
+             * The class name of the first Carousel navigation button.
+             *
+             * @property FIRST_NAV
+             * @default " yui-carousel-first-button"
+             */
+            FIRST_NAV: " yui-carousel-first-button",
+
+            /**
+             * The class name of a first disabled navigation button.
+             *
+             * @property FIRST_NAV_DISABLED
+             * @default "yui-carousel-first-button-disabled"
+             */
+            FIRST_NAV_DISABLED: "yui-carousel-first-button-disabled",
+
+            /**
+             * The class name of a first page element.
+             *
+             * @property FIRST_PAGE
+             * @default "yui-carousel-nav-first-page"
+             */
+            FIRST_PAGE: "yui-carousel-nav-first-page",
+
+            /**
+             * The class name of the Carousel navigation button that has focus.
+             *
+             * @property FOCUSSED_BUTTON
+             * @default "yui-carousel-button-focus"
+             */
+            FOCUSSED_BUTTON: "yui-carousel-button-focus",
+
+            /**
+             * The class name of a horizontally oriented Carousel.
+             *
+             * @property HORIZONTAL
+             * @default "yui-carousel-horizontal"
+             */
+            HORIZONTAL: "yui-carousel-horizontal",
+
+            /**
+             * The element to be used as the progress indicator when the item
+             * is still being loaded.
+             *
+             * @property ITEM_LOADING
+             * @default The progress indicator (spinner) image CSS class
+             */
+            ITEM_LOADING: "yui-carousel-item-loading",
+
+            /**
+             * The class name that will be set if the Carousel adjusts itself
+             * for a minimum width.
+             *
+             * @property MIN_WIDTH
+             * @default "yui-carousel-min-width"
+             */
+            MIN_WIDTH: "yui-carousel-min-width",
+
+            /**
+             * The navigation element container class name.
+             *
+             * @property NAVIGATION
+             * @default "yui-carousel-nav"
+             */
+            NAVIGATION: "yui-carousel-nav",
+
+            /**
+             * The class name of the next Carousel navigation button.
+             *
+             * @property NEXT_NAV
+             * @default " yui-carousel-next-button"
+             */
+            NEXT_NAV: " yui-carousel-next-button",
+
+            /**
+             * The class name of the next navigation link. This variable is
+             * not only used for styling, but also for identifying the link
+             * within the Carousel container.
+             *
+             * @property NEXT_PAGE
+             * @default "yui-carousel-next"
+             */
+            NEXT_PAGE: "yui-carousel-next",
+
+            /**
+             * The class name for the navigation container for prev/next.
+             *
+             * @property NAV_CONTAINER
+             * @default "yui-carousel-buttons"
+             */
+            NAV_CONTAINER: "yui-carousel-buttons",
+
+            /**
+              * The class name for an item in the pager UL or dropdown menu.
+              *
+              * @property PAGER_ITEM
+              * @default "yui-carousel-pager-item"
+              */
+            PAGER_ITEM: "yui-carousel-pager-item",
+
+            /**
+             * The class name for the pagination container
+             *
+             * @property PAGINATION
+             * @default "yui-carousel-pagination"
+             */
+            PAGINATION: "yui-carousel-pagination",
+
+            /**
+             * The class name of the focussed page navigation.  This class is
+             * specifically used for the ugly focus handling in Opera.
+             *
+             * @property PAGE_FOCUS
+             * @default "yui-carousel-nav-page-focus"
+             */
+            PAGE_FOCUS: "yui-carousel-nav-page-focus",
+
+            /**
+             * The class name of the previous navigation link. This variable
+             * is not only used for styling, but also for identifying the link
+             * within the Carousel container.
+             *
+             * @property PREV_PAGE
+             * @default "yui-carousel-prev"
+             */
+            PREV_PAGE: "yui-carousel-prev",
+
+            /**
+             * The class name of the selected item.
+             *
+             * @property SELECTED_ITEM
+             * @default "yui-carousel-item-selected"
+             */
+            SELECTED_ITEM: "yui-carousel-item-selected",
+
+            /**
+             * The class name of the selected paging navigation.
+             *
+             * @property SELECTED_NAV
+             * @default "yui-carousel-nav-page-selected"
+             */
+            SELECTED_NAV: "yui-carousel-nav-page-selected",
+
+            /**
+             * The class name of a vertically oriented Carousel.
+             *
+             * @property VERTICAL
+             * @default "yui-carousel-vertical"
+             */
+            VERTICAL: "yui-carousel-vertical",
+
+            /**
+             * The class name of a multirow Carousel.
+             *
+             * @property MULTI_ROW
+             * @default "yui-carousel-multi-row"
+             */
+            MULTI_ROW: "yui-carousel-multi-row",
+
+            /**
+             * The class name of a row in a multirow Carousel.
+             *
+             * @property ROW
+             * @default "yui-carousel-new-row"
+             */
+            ROW: "yui-carousel-row",
+
+            /**
+             * The class name of a vertical Carousel's container element.
+             *
+             * @property VERTICAL_CONTAINER
+             * @default "yui-carousel-vertical-container"
+             */
+            VERTICAL_CONTAINER: "yui-carousel-vertical-container",
+
+            /**
+             * The class name of a visible Carousel.
+             *
+             * @property VISIBLE
+             * @default "yui-carousel-visible"
+             */
+            VISIBLE: "yui-carousel-visible"
+
+        },
+
+        /*
+         * Configuration attributes for configuring the Carousel component
+         */
+
+        CONFIG: {
+
+            /**
+             * The offset of the first visible item in the Carousel.
+             *
+             * @property FIRST_VISIBLE
+             * @default 0
+             */
+            FIRST_VISIBLE: 0,
+
+            /**
+             * The minimum width of the horizontal Carousel container to support
+             * the navigation buttons.
+             *
+             * @property HORZ_MIN_WIDTH
+             * @default 180
+             */
+            HORZ_MIN_WIDTH: 180,
+
+            /**
+             * The maximum number of pager buttons allowed beyond which the UI
+             * of the pager would be a drop-down of pages instead of buttons.
+             *
+             * @property MAX_PAGER_BUTTONS
+             * @default 5
+             */
+            MAX_PAGER_BUTTONS: 5,
+
+            /**
+             * The minimum width of the vertical Carousel container to support
+             * the navigation buttons.
+             *
+             * @property VERT_MIN_WIDTH
+             * @default 155
+             */
+            VERT_MIN_WIDTH: 115,
+
+            /**
+             * The number of visible items in the Carousel.
+             *
+             * @property NUM_VISIBLE
+             * @default 3
+             */
+            NUM_VISIBLE: 3
+
+        },
+
+        /*
+         * Internationalizable strings in the Carousel component
+         */
+
+        STRINGS: {
+
+            /**
+             * The content to be used as the progress indicator when the item
+             * is still being loaded.
+             *
+             * @property ITEM_LOADING_CONTENT
+             * @default "Loading"
+             */
+            ITEM_LOADING_CONTENT: "Loading",
+
+            /**
+             * The next navigation button name/text.
+             *
+             * @property NEXT_BUTTON_TEXT
+             * @default "Next Page"
+             */
+            NEXT_BUTTON_TEXT: "Next Page",
+
+            /**
+             * The prefix text for the pager in case the UI is a drop-down.
+             *
+             * @property PAGER_PREFIX_TEXT
+             * @default "Go to page "
+             */
+            PAGER_PREFIX_TEXT: "Go to page ",
+
+            /**
+             * The previous navigation button name/text.
+             *
+             * @property PREVIOUS_BUTTON_TEXT
+             * @default "Previous Page"
+             */
+            PREVIOUS_BUTTON_TEXT: "Previous Page"
+
+        },
+
+        /*
+         * Public methods of the Carousel component
+         */
+
+        /**
+         * Insert or append an item to the Carousel.
+         * E.g. if Object: ({content:"Your Content", id:"", className:""}, index)
+         *
+         * @method addItem
+         * @public
+         * @param item {String | Object | HTMLElement} The item to be appended
+         * to the Carousel. If the parameter is a string, it is assumed to be
+         * the content of the newly created item. If the parameter is an
+         * object, it is assumed to supply the content and an optional class
+         * and an optional id of the newly created item.
+         * @param index {Number} optional The position to where in the list
+         * (starts from zero).
+         * @return {Boolean} Return true on success, false otherwise
+         */
+        addItem: function (item, index) {
+            var carousel = this,
+                className,
+                content,
+                elId,
+                replaceItems = 0,
+                newIndex, // Add newIndex as workaround for undefined pos
+                numItems = carousel.get("numItems");
+
+            if (!item) {
+                return false;
+            }
+
+            if (JS.isString(item) || item.nodeName) {
+                content = item.nodeName ? item.innerHTML : item;
+            } else if (JS.isObject(item)) {
+                content = item.content;
+            } else {
+                return false;
+            }
+
+            className = item.className || "";
+            elId      = item.id ? item.id : Dom.generateId();
+
+            if (JS.isUndefined(index)) {
+                carousel._itemsTable.items.push({
+                        item      : content,
+                        className : className,
+                        id        : elId
+                });
+                // Add newIndex as workaround for undefined pos
+                newIndex = carousel._itemsTable.items.length-1;
+            } else {
+                if (index < 0 || index > numItems) {
+                    return false;
+                }
+
+                // make sure we splice into the correct position
+                if(!carousel._itemsTable.items[index]){
+                    carousel._itemsTable.items[index] = undefined;
+                    replaceItems = 1;
+                }
+
+                carousel._itemsTable.items.splice(index, replaceItems, {
+                        item      : content,
+                        className : className,
+                        id        : elId
+                });
+            }
+            carousel._itemsTable.numItems++;
+
+            if (numItems < carousel._itemsTable.items.length) {
+                carousel.set("numItems", carousel._itemsTable.items.length);
+            }
+
+            // Add newPos as workaround for undefined pos
+            carousel.fireEvent(itemAddedEvent, { pos: index, ev: itemAddedEvent, newPos:newIndex });
+
+            return true;
+        },
+
+        /**
+         * Insert or append multiple items to the Carousel.
+         *
+         * @method addItems
+         * @public
+         * @param items {Array} An array containing an array of new items each linked to the
+         * index where the insertion should take place.
+         * E.g. [[{content:'<img/>'}, index1], [{content:'<img/>'}, index2]]
+         * NOTE: An item at index must already exist.
+         * @return {Boolean} Return true on success, false otherwise
+         */
+        addItems: function (items) {
+            var i, n, rv = true;
+
+            if (!JS.isArray(items)) {
+                return false;
+            }
+
+            for (i = 0, n = items.length; i < n; i++) {
+                if (this.addItem(items[i][0], items[i][1]) === false) {
+                    rv = false;
+                }
+            }
+
+            return rv;
+        },
+
+        /**
+         * Remove focus from the Carousel.
+         *
+         * @method blur
+         * @public
+         */
+        blur: function () {
+            this._carouselEl.blur();
+            this.fireEvent(blurEvent);
+        },
+
+        /**
+         * Clears the items from Carousel.
+         *
+         * @method clearItems
+         * @public
+         */
+        clearItems: function () {
+            var carousel = this, n = carousel.get("numItems");
+
+            while (n > 0) {
+                if (!carousel.removeItem(0)) {
+                }
+                /*
+                    For dynamic loading, the numItems may be much larger than
+                    the actual number of items in the table. So, set the
+                    numItems to zero, and break out of the loop if the table
+                    is already empty.
+                 */
+                if (carousel._itemsTable.numItems === 0) {
+                    carousel.set("numItems", 0);
+                    break;
+                }
+                n--;
+            }
+
+            carousel.fireEvent(allItemsRemovedEvent);
+        },
+
+        /**
+         * Set focus on the Carousel.
+         *
+         * @method focus
+         * @public
+         */
+        focus: function () {
+            var carousel = this,
+                first,
+                focusEl,
+                isSelectionInvisible,
+                itemsTable,
+                last,
+                numVisible,
+                selectOnScroll,
+                selected,
+                selItem;
+
+            // Don't do anything if the Carousel is not rendered
+            if (!carousel._hasRendered) {
+                return;
+            }
+
+            if (carousel.isAnimating()) {
+                // this messes up real bad!
+                return;
+            }
+
+            selItem              = carousel.get("selectedItem");
+            numVisible           = carousel.get("numVisible");
+            selectOnScroll       = carousel.get("selectOnScroll");
+            selected             = (selItem >= 0) ?
+                                   carousel.getItem(selItem) : null;
+            first                = carousel.get("firstVisible");
+            last                 = first + numVisible - 1;
+            isSelectionInvisible = (selItem < first || selItem > last);
+            focusEl              = (selected && selected.id) ?
+                                   Dom.get(selected.id) : null;
+            itemsTable           = carousel._itemsTable;
+
+            if (!selectOnScroll && isSelectionInvisible) {
+                focusEl = (itemsTable && itemsTable.items &&
+                           itemsTable.items[first]) ?
+                        Dom.get(itemsTable.items[first].id) : null;
+            }
+
+            if (focusEl) {
+                try {
+                    focusEl.focus();
+                } catch (ex) {
+                    // ignore focus errors
+                }
+            }
+
+            carousel.fireEvent(focusEvent);
+        },
+
+        /**
+         * Hide the Carousel.
+         *
+         * @method hide
+         * @public
+         */
+        hide: function () {
+            var carousel = this;
+
+            if (carousel.fireEvent(beforeHideEvent) !== false) {
+                carousel.removeClass(carousel.CLASSES.VISIBLE);
+                carousel.fireEvent(hideEvent);
+            }
+        },
+
+        /**
+         * Initialize the Carousel.
+         *
+         * @method init
+         * @public
+         * @param el {HTMLElement | String} The html element that represents
+         * the Carousel container.
+         * @param attrs {Object} The set of configuration attributes for
+         * creating the Carousel.
+         */
+        init: function (el, attrs) {
+            var carousel = this,
+                elId     = el,  // save for a rainy day
+                parse    = false,
+                selected;
+
+            if (!el) {
+                return;
+            }
+
+            carousel._hasRendered = false;
+            carousel._navBtns     = { prev: [], next: [] };
+            carousel._pages       = { el: null, num: 0, cur: 0 };
+            carousel._pagination  = {};
+            carousel._itemAttrCache = {};
+
+            carousel._itemsTable  = { loading: {}, numItems: 0,
+                                      items: [], size: 0 };
+
+
+            if (JS.isString(el)) {
+                el = Dom.get(el);
+            } else if (!el.nodeName) {
+                return;
+            }
+
+            Carousel.superclass.init.call(carousel, el, attrs);
+
+            // check if we're starting somewhere in the middle
+            selected = carousel.get("selectedItem");
+            if(selected > 0){
+                carousel.set("firstVisible",getFirstVisibleForPosition.call(carousel,selected));
+            }
+
+            if (el) {
+                if (!el.id) {   // in case the HTML element is passed
+                    el.setAttribute("id", Dom.generateId());
+                }
+                parse = carousel._parseCarousel(el);
+                if (!parse) {
+                    carousel._createCarousel(elId);
+                }
+            } else {
+                el = carousel._createCarousel(elId);
+            }
+            elId = el.id;
+
+            carousel.initEvents();
+
+            if (parse) {
+                carousel._parseCarouselItems();
+            }
+
+            // add the selected class
+            if(selected > 0){
+                setItemSelection.call(carousel,selected,0);
+            }
+
+            if (!attrs || typeof attrs.isVertical == "undefined") {
+                carousel.set("isVertical", false);
+            }
+
+            carousel._parseCarouselNavigation(el);
+            carousel._navEl = carousel._setupCarouselNavigation();
+
+            instances[elId] = { object: carousel };
+            carousel._loadItems(Math.min(carousel.get("firstVisible")+carousel.get("numVisible"),carousel.get("numItems"))-1);
+        },
+
+        /**
+         * Initialize the configuration attributes used to create the Carousel.
+         *
+         * @method initAttributes
+         * @public
+         * @param attrs {Object} The set of configuration attributes for
+         * creating the Carousel.
+         */
+        initAttributes: function (attrs) {
+            var carousel = this;
+
+            attrs = attrs || {};
+            Carousel.superclass.initAttributes.call(carousel, attrs);
+
+            /**
+             * @attribute carouselEl
+             * @description The type of the Carousel element.
+             * @default OL
+             * @type Boolean
+             */
+            carousel.setAttributeConfig("carouselEl", {
+                    validator : JS.isString,
+                    value     : attrs.carouselEl || "OL"
+            });
+
+            /**
+             * @attribute carouselItemEl
+             * @description The type of the list of items within the Carousel.
+             * @default LI
+             * @type Boolean
+             */
+            carousel.setAttributeConfig("carouselItemEl", {
+                    validator : JS.isString,
+                    value     : attrs.carouselItemEl || "LI"
+            });
+
+            /**
+             * @attribute currentPage
+             * @description The current page number (read-only.)
+             * @type Number
+             */
+            carousel.setAttributeConfig("currentPage", {
+                    readOnly : true,
+                    value    : 0
+            });
+
+            /**
+             * @attribute firstVisible
+             * @description The index to start the Carousel from (indexes begin
+             * from zero)
+             * @default 0
+             * @type Number
+             */
+            carousel.setAttributeConfig("firstVisible", {
+                    method    : carousel._setFirstVisible,
+                    validator : carousel._validateFirstVisible,
+                    value     :
+                        attrs.firstVisible || carousel.CONFIG.FIRST_VISIBLE
+            });
+
+            /**
+             * @attribute selectOnScroll
+             * @description Set this to true to automatically set focus to
+             * follow scrolling in the Carousel.
+             * @default true
+             * @type Boolean
+             */
+            carousel.setAttributeConfig("selectOnScroll", {
+                    validator : JS.isBoolean,
+                    value     : attrs.selectOnScroll || true
+            });
+
+            /**
+             * @attribute numVisible
+             * @description The number of visible items in the Carousel's
+             * viewport.
+             * @default 3
+             * @type Number
+             */
+            carousel.setAttributeConfig("numVisible", {
+                    setter    : carousel._numVisibleSetter,
+                    method    : carousel._setNumVisible,
+                    validator : carousel._validateNumVisible,
+                    value     : attrs.numVisible || carousel.CONFIG.NUM_VISIBLE
+            });
+
+            /**
+             * @attribute numItems
+             * @description The number of items in the Carousel.
+             * @type Number
+             */
+            carousel.setAttributeConfig("numItems", {
+                    method    : carousel._setNumItems,
+                    validator : carousel._validateNumItems,
+                    value     : carousel._itemsTable.numItems
+            });
+
+            /**
+             * @attribute scrollIncrement
+             * @description The number of items to scroll by for arrow keys.
+             * @default 1
+             * @type Number
+             */
+            carousel.setAttributeConfig("scrollIncrement", {
+                    validator : carousel._validateScrollIncrement,
+                    value     : attrs.scrollIncrement || 1
+            });
+
+            /**
+             * @attribute selectedItem
+             * @description The index of the selected item.
+             * @type Number
+             */
+            carousel.setAttributeConfig("selectedItem", {
+                    setter    : carousel._selectedItemSetter,
+                    method    : carousel._setSelectedItem,
+                    validator : JS.isNumber,
+                    value     : -1
+            });
+
+            /**
+             * @attribute revealAmount
+             * @description The percentage of the item to be revealed on each
+             * side of the Carousel (before and after the first and last item
+             * in the Carousel's viewport.)
+             * @default 0
+             * @type Number
+             */
+            carousel.setAttributeConfig("revealAmount", {
+                    method    : carousel._setRevealAmount,
+                    validator : carousel._validateRevealAmount,
+                    value     : attrs.revealAmount || 0
+            });
+
+            /**
+             * @attribute isCircular
+             * @description Set this to true to wrap scrolling of the contents
+             * in the Carousel.
+             * @default false
+             * @type Boolean
+             */
+            carousel.setAttributeConfig("isCircular", {
+                    validator : JS.isBoolean,
+                    value     : attrs.isCircular || false
+            });
+
+            /**
+             * @attribute isVertical
+             * @description True if the orientation of the Carousel is vertical
+             * @default false
+             * @type Boolean
+             */
+            carousel.setAttributeConfig("isVertical", {
+                    method    : carousel._setOrientation,
+                    validator : JS.isBoolean,
+                    value     : attrs.isVertical || false
+            });
+
+            /**
+             * @attribute navigation
+             * @description The set of navigation controls for Carousel
+             * @default <br>
+             * { prev: null, // the previous navigation element<br>
+             *   next: null } // the next navigation element
+             * @type Object
+             */
+            carousel.setAttributeConfig("navigation", {
+                    method    : carousel._setNavigation,
+                    validator : carousel._validateNavigation,
+                    value     :
+                        attrs.navigation || {prev: null,next: null,page: null}
+            });
+
+            /**
+             * @attribute animation
+             * @description The optional animation attributes for the Carousel.
+             * @default <br>
+             * { speed: 0, // the animation speed (in seconds)<br>
+             *   effect: null } // the animation effect (like
+             *   YAHOO.util.Easing.easeOut)
+             * @type Object
+             */
+            carousel.setAttributeConfig("animation", {
+                    validator : carousel._validateAnimation,
+                    value     : attrs.animation || { speed: 0, effect: null }
+            });
+
+            /**
+             * @attribute autoPlay
+             * @description Set this to time in milli-seconds to have the
+             * Carousel automatically scroll the contents.
+             * @type Number
+             * @deprecated Use autoPlayInterval instead.
+             */
+            carousel.setAttributeConfig("autoPlay", {
+                    validator : JS.isNumber,
+                    value     : attrs.autoPlay || 0
+            });
+
+            /**
+             * @attribute autoPlayInterval
+             * @description The delay in milli-seconds for scrolling the
+             * Carousel during auto-play.
+             * Note: The startAutoPlay() method needs to be invoked to trigger
+             * automatic scrolling of Carousel.
+             * @type Number
+             */
+            carousel.setAttributeConfig("autoPlayInterval", {
+                    validator : JS.isNumber,
+                    value     : attrs.autoPlayInterval || 0
+            });
+
+            /**
+             * @attribute numPages
+             * @description The number of pages in the carousel.
+             * @type Number
+             */
+            carousel.setAttributeConfig("numPages", {
+                    readOnly  : true,
+                    getter    : carousel._getNumPages
+            });
+
+            /**
+             * @attribute lastVisible
+             * @description The last item visible in the carousel.
+             * @type Number
+             */
+            carousel.setAttributeConfig("lastVisible", {
+                    readOnly  : true,
+                    getter    : carousel._getLastVisible
+            });
+        },
+
+        /**
+         * Initialize and bind the event handlers.
+         *
+         * @method initEvents
+         * @public
+         */
+        initEvents: function () {
+            var carousel = this,
+                cssClass = carousel.CLASSES,
+                focussedLi;
+
+            carousel.on("keydown", carousel._keyboardEventHandler);
+
+            carousel.on(afterScrollEvent, syncNavigation);
+
+            carousel.on(itemAddedEvent, syncUi);
+
+            carousel.on(itemRemovedEvent, syncUi);
+
+            carousel.on(itemReplacedEvent, syncUi);
+
+            carousel.on(itemSelectedEvent, function () {
+                if (carousel._hasFocus) {
+                    carousel.focus();
+                }
+            });
+
+            carousel.on(loadItemsEvent, syncUi);
+
+            carousel.on(allItemsRemovedEvent, function (ev) {
+                carousel.scrollTo(0);
+                syncNavigation.call(carousel);
+                syncPagerUi.call(carousel);
+            });
+
+            carousel.on(pageChangeEvent, syncPagerUi, carousel);
+
+            carousel.on(renderEvent, function (ev) {
+                if (carousel.get("selectedItem") === null ||
+                    carousel.get("selectedItem") <= 0) { //in either case
+                carousel.set("selectedItem", carousel.get("firstVisible"));
+                }
+                syncNavigation.call(carousel, ev);
+                syncPagerUi.call(carousel, ev);
+                carousel._setClipContainerSize();
+                carousel.show();
+            });
+
+            carousel.on("selectedItemChange", function (ev) {
+                setItemSelection.call(carousel, ev.newValue, ev.prevValue);
+                if (ev.newValue >= 0) {
+                    carousel._updateTabIndex(
+                            carousel.getElementForItem(ev.newValue));
+                }
+                carousel.fireEvent(itemSelectedEvent, ev.newValue);
+            });
+
+            carousel.on(uiUpdateEvent, function (ev) {
+                syncNavigation.call(carousel, ev);
+                syncPagerUi.call(carousel, ev);
+            });
+
+            carousel.on("firstVisibleChange", function (ev) {
+                if (!carousel.get("selectOnScroll")) {
+                    if (ev.newValue >= 0) {
+                        carousel._updateTabIndex(
+                                carousel.getElementForItem(ev.newValue));
+                    }
+                }
+            });
+
+            // Handle item selection on mouse click
+            carousel.on("click", function (ev) {
+                if (carousel.isAutoPlayOn()) {
+                    carousel.stopAutoPlay();
+                }
+                carousel._itemClickHandler(ev);
+                carousel._pagerClickHandler(ev);
+            });
+
+            // Restore the focus on the navigation buttons
+
+            Event.onFocus(carousel.get("element"), function (ev, obj) {
+                var target = Event.getTarget(ev);
+
+                if (target && target.nodeName.toUpperCase() == "A" &&
+                    Dom.getAncestorByClassName(target, cssClass.NAVIGATION)) {
+                    if (focussedLi) {
+                        Dom.removeClass(focussedLi, cssClass.PAGE_FOCUS);
+                    }
+                    focussedLi = target.parentNode;
+                    Dom.addClass(focussedLi, cssClass.PAGE_FOCUS);
+                } else {
+                    if (focussedLi) {
+                        Dom.removeClass(focussedLi, cssClass.PAGE_FOCUS);
+                    }
+                }
+
+                obj._hasFocus = true;
+                obj._updateNavButtons(Event.getTarget(ev), true);
+            }, carousel);
+
+            Event.onBlur(carousel.get("element"), function (ev, obj) {
+                obj._hasFocus = false;
+                obj._updateNavButtons(Event.getTarget(ev), false);
+            }, carousel);
+        },
+
+        /**
+         * Return true if the Carousel is still animating, or false otherwise.
+         *
+         * @method isAnimating
+         * @return {Boolean} Return true if animation is still in progress, or
+         * false otherwise.
+         * @public
+         */
+        isAnimating: function () {
+            return this._isAnimationInProgress;
+        },
+
+        /**
+         * Return true if the auto-scrolling of Carousel is "on", or false
+         * otherwise.
+         *
+         * @method isAutoPlayOn
+         * @return {Boolean} Return true if autoPlay is "on", or false
+         * otherwise.
+         * @public
+         */
+        isAutoPlayOn: function () {
+            return this._isAutoPlayInProgress;
+        },
+
+        /**
+         * Return the carouselItemEl at index or null if the index is not
+         * found.
+         *
+         * @method getElementForItem
+         * @param index {Number} The index of the item to be returned
+         * @return {Element} Return the item at index or null if not found
+         * @public
+         */
+        getElementForItem: function (index) {
+            var carousel = this;
+
+            if (index < 0 || index >= carousel.get("numItems")) {
+                return null;
+            }
+
+            if (carousel._itemsTable.items[index]) {
+                return Dom.get(carousel._itemsTable.items[index].id);
+            }
+
+            return null;
+        },
+
+        /**
+         * Return the carouselItemEl for all items in the Carousel.
+         *
+         * @method getElementForItems
+         * @return {Array} Return all the items
+         * @public
+         */
+        getElementForItems: function () {
+            var carousel = this, els = [], i;
+
+            for (i = 0; i < carousel._itemsTable.numItems; i++) {
+                els.push(carousel.getElementForItem(i));
+            }
+
+            return els;
+        },
+
+        /**
+         * Return the item at index or null if the index is not found.
+         *
+         * @method getItem
+         * @param index {Number} The index of the item to be returned
+         * @return {Object} Return the item at index or null if not found
+         * @public
+         */
+        getItem: function (index) {
+            var carousel = this;
+
+            if (index < 0 || index >= carousel.get("numItems")) {
+                return null;
+            }
+
+            if (carousel._itemsTable.numItems > index) {
+                if (!JS.isUndefined(carousel._itemsTable.items[index])) {
+                    return carousel._itemsTable.items[index];
+                }
+            }
+
+            return null;
+        },
+
+        /**
+         * Return all items as an array.
+         *
+         * @method getItems
+         * @return {Array} Return all items in the Carousel
+         * @public
+         */
+        getItems: function () {
+            return this._itemsTable.items;
+        },
+
+        /**
+         * Return all loading items as an array.
+         *
+         * @method getLoadingItems
+         * @return {Array} Return all items that are loading in the Carousel.
+         * @public
+         */
+        getLoadingItems: function () {
+            return this._itemsTable.loading;
+        },
+
+        /**
+         * For a multirow carousel, return the number of rows specified by user.
+         *
+         * @method getItems
+         * @return {Number} Number of rows
+         * @public
+         */
+        getRows: function () {
+            return this._rows;
+        },
+
+        /**
+         * For a multirow carousel, return the number of cols specified by user.
+         *
+         * @method getItems
+         * @return {Array} Return all items in the Carousel
+         * @public
+         */
+        getCols: function () {
+            return this._cols;
+        },
+
+        /**
+         * Return the position of the Carousel item that has the id "id", or -1
+         * if the id is not found.
+         *
+         * @method getItemPositionById
+         * @param index {Number} The index of the item to be returned
+         * @public
+         */
+        getItemPositionById: function (id) {
+            var carousel = this,
+                n = carousel.get("numItems"),
+                i = 0,
+                items = carousel._itemsTable.items,
+                item;
+
+            while (i < n) {
+                item = items[i] || {};
+                if(item.id == id) {
+                    return i;
+                }
+                i++;
+            }
+
+            return -1;
+        },
+
+        /**
+         * Return all visible items as an array.
+         *
+         * @method getVisibleItems
+         * @return {Array} The array of visible items
+         * @public
+         */
+        getVisibleItems: function () {
+            var carousel = this,
+                i        = carousel.get("firstVisible"),
+                n        = i + carousel.get("numVisible"),
+                r        = [];
+
+            while (i < n) {
+                r.push(carousel.getElementForItem(i));
+                i++;
+            }
+
+            return r;
+        },
+
+        /**
+         * Remove an item at index from the Carousel.
+         *
+         * @method removeItem
+         * @public
+         * @param index {Number} The position to where in the list (starts from
+         * zero).
+         * @return {Boolean} Return true on success, false otherwise
+         */
+        removeItem: function (index) {
+            var carousel = this,
+                item,
+                num      = carousel.get("numItems");
+
+            if (index < 0 || index >= num) {
+                return false;
+            }
+
+            item = carousel._itemsTable.items.splice(index, 1);
+            if (item && item.length == 1) {
+                carousel._itemsTable.numItems--;
+                carousel.set("numItems", num - 1);
+
+                carousel.fireEvent(itemRemovedEvent,
+                        { item: item[0], pos: index, ev: itemRemovedEvent });
+                return true;
+            }
+
+            return false;
+        },
+
+        /**
+         * Replace an item at index witin Carousel.
+         *
+         * @method replaceItem
+         * @public
+         * @param item {String | Object | HTMLElement} The item to be appended
+         * to the Carousel. If the parameter is a string, it is assumed to be
+         * the content of the newly created item. If the parameter is an
+         * object, it is assumed to supply the content and an optional class
+         * and an optional id of the newly created item.
+         * @param index {Number} The position to where in the list (starts from
+         * zero).
+         * @return {Boolean} Return true on success, false otherwise
+         */
+        replaceItem: function (item, index) {
+            var carousel = this,
+                className,
+                content,
+                elId,
+                numItems = carousel.get("numItems"),
+                oel,
+                el = item;
+
+            if (!item) {
+                return false;
+            }
+
+            if (JS.isString(item) || item.nodeName) {
+                content = item.nodeName ? item.innerHTML : item;
+            } else if (JS.isObject(item)) {
+                content = item.content;
+            } else {
+                return false;
+            }
+
+            if (JS.isUndefined(index)) {
+                return false;
+            } else {
+                if (index < 0 || index >= numItems) {
+                    return false;
+                }
+
+                oel = carousel._itemsTable.items[index];
+                if(!oel){
+                    oel = carousel._itemsTable.loading[index];
+                    carousel._itemsTable.items[index] = undefined;
+                }
+
+                carousel._itemsTable.items.splice(index, 1, {
+                    item      : content,
+                    className : item.className || "",
+                    id        : Dom.generateId()
+                });
+
+                el = carousel._itemsTable.items[index];
+            }
+            carousel.fireEvent(itemReplacedEvent,
+                    { newItem: el, oldItem: oel, pos: index, ev: itemReplacedEvent });
+
+            return true;
+        },
+
+        /**
+         * Replace multiple items at specified indexes.
+         * NOTE: item at index must already exist.
+         *
+         * @method replaceItems
+         * @public
+         * @param items {Array} An array containing an array of replacement items each linked to the
+         * index where the substitution should take place.
+         * E.g. [[{content:'<img/>'}, index1], [{content:'<img/>'}, index2]]
+         * @return {Boolean} Return true on success, false otherwise
+         */
+         replaceItems: function (items) {
+             var i, n, rv = true;
+
+             if (!JS.isArray(items)) {
+                 return false;
+             }
+
+             for (i = 0, n = items.length; i < n; i++) {
+                 if (this.replaceItem(items[i][0], items[i][1]) === false) {
+                     rv = false;
+                 }
+             }
+
+             return rv;
+         },
+
+        /**
+         * Render the Carousel.
+         *
+         * @method render
+         * @public
+         * @param appendTo {HTMLElement | String} The element to which the
+         * Carousel should be appended prior to rendering.
+         * @return {Boolean} Status of the operation
+         */
+        render: function (appendTo) {
+            var carousel  = this,
+                cssClass  = carousel.CLASSES,
+                rows = carousel._rows;
+
+            carousel.addClass(cssClass.CAROUSEL);
+
+            if (!carousel._clipEl) {
+                carousel._clipEl = carousel._createCarouselClip();
+                carousel._clipEl.appendChild(carousel._carouselEl);
+            }
+
+            if (appendTo) {
+                carousel.appendChild(carousel._clipEl);
+                carousel.appendTo(appendTo);
+            } else {
+                if (!Dom.inDocument(carousel.get("element"))) {
+                    return false;
+                }
+                carousel.appendChild(carousel._clipEl);
+            }
+
+            if (rows) {
+                Dom.addClass(carousel._clipEl, cssClass.MULTI_ROW);
+            }
+
+            if (carousel.get("isVertical")) {
+                carousel.addClass(cssClass.VERTICAL);
+            } else {
+                carousel.addClass(cssClass.HORIZONTAL);
+            }
+
+            if (carousel.get("numItems") < 1) {
+                return false;
+            }
+
+            carousel._refreshUi();
+
+            return true;
+        },
+
+        /**
+         * Scroll the Carousel by an item backward.
+         *
+         * @method scrollBackward
+         * @public
+         */
+        scrollBackward: function () {
+            var carousel = this;
+            carousel.scrollTo(carousel._firstItem -
+                              carousel.get("scrollIncrement"));
+        },
+
+        /**
+         * Scroll the Carousel by an item forward.
+         *
+         * @method scrollForward
+         * @public
+         */
+        scrollForward: function () {
+            var carousel = this;
+            carousel.scrollTo(carousel._firstItem +
+                              carousel.get("scrollIncrement"));
+        },
+
+        /**
+         * Scroll the Carousel by a page backward.
+         *
+         * @method scrollPageBackward
+         * @public
+         */
+        scrollPageBackward: function () {
+            var carousel = this,
+                isVertical = carousel.get("isVertical"),
+                cols       = carousel._cols,
+                item     = carousel._firstItem - carousel.get("numVisible");
+
+            if (item < 0) { // only account for multi-row when scrolling backwards from item 0
+                if (cols) {
+                    item = carousel._firstItem - cols;
+                }
+            }
+
+            if (carousel.get("selectOnScroll")) {
+                carousel._selectedItem = carousel._getSelectedItem(item);
+            }
+
+            carousel.scrollTo(item);
+        },
+
+        /**
+         * Scroll the Carousel by a page forward.
+         *
+         * @method scrollPageForward
+         * @public
+         */
+        scrollPageForward: function () {
+            var carousel = this,
+                item     = carousel._firstItem + carousel.get("numVisible");
+
+            if (item > carousel.get("numItems")) {
+                item = 0;
+            }
+
+            if (carousel.get("selectOnScroll")) {
+                carousel._selectedItem = carousel._getSelectedItem(item);
+            }
+
+            carousel.scrollTo(item);
+        },
+
+        /**
+         * Scroll the Carousel to make the item the first visible item.
+         *
+         * @method scrollTo
+         * @public
+         * @param item Number The index of the element to position at.
+         * @param dontSelect Boolean True if select should be avoided
+         */
+        scrollTo: function (item, dontSelect) {
+            var carousel   = this, animate, animCfg, isCircular, isVertical,
+                rows, delta, direction, firstItem, lastItem, itemsPerRow,
+                itemsPerCol, numItems, numPerPage, offset, page, rv, sentinel,
+                index, stopAutoScroll,
+                itemsTable = carousel._itemsTable,
+                items = itemsTable.items,
+                loading = itemsTable.loading;
+
+            if (JS.isUndefined(item) || item == carousel._firstItem ||
+                carousel.isAnimating()) {
+                return; // nothing to do!
+            }
+
+            animCfg        = carousel.get("animation");
+            isCircular     = carousel.get("isCircular");
+            isVertical     = carousel.get("isVertical");
+            itemsPerRow    = carousel._cols;
+            itemsPerCol    = carousel._rows;
+            firstItem      = carousel._firstItem;
+            numItems       = carousel.get("numItems");
+            numPerPage     = carousel.get("numVisible");
+            page           = carousel.get("currentPage");
+
+            stopAutoScroll = function () {
+                if (carousel.isAutoPlayOn()) {
+                    carousel.stopAutoPlay();
+                }
+            };
+
+            if (item < 0) {
+                if (isCircular) {
+                    item = numItems + item;
+                } else {
+                    stopAutoScroll.call(carousel);
+                    return;
+                }
+            } else if (numItems > 0 && item > numItems - 1) {
+
+                if (carousel.get("isCircular")) {
+                    item = numItems - item;
+                } else {
+                    stopAutoScroll.call(carousel);
+                    return;
+                }
+            }
+
+            if (isNaN(item)) {
+                return;
+            }
+
+            direction = (carousel._firstItem > item) ? "backward" : "forward";
+
+            sentinel  = firstItem + numPerPage;
+            sentinel  = (sentinel > numItems - 1) ? numItems - 1 : sentinel;
+            rv = carousel.fireEvent(beforeScrollEvent,
+                    { dir: direction, first: firstItem, last: sentinel });
+            if (rv === false) { // scrolling is prevented
+                return;
+            }
+
+            carousel.fireEvent(beforePageChangeEvent, { page: page });
+
+            // call loaditems to check if we have all the items to display
+            lastItem = item + numPerPage - 1;
+            carousel._loadItems(lastItem > numItems-1 ? numItems-1 : lastItem);
+
+            // Calculate the delta relative to the first item, the delta is
+            // always negative.
+            delta = 0 - item;
+
+            if (itemsPerCol) {
+            	// offset calculations for multirow Carousel
+                if (isVertical) {
+                    delta = parseInt(delta / itemsPerRow, 10);
+                } else {
+                    delta = parseInt(delta / itemsPerCol, 10);
+                }
+            }
+
+            // adjust for items not yet loaded
+            index = 0;
+            while (delta < 0 && index < item+numPerPage-1 && index < numItems) {
+                if (!items[index] && !loading[index]) {
+                    delta++;
+                }
+                index += itemsPerCol ? itemsPerCol : 1;
+            }
+
+            carousel._firstItem = item;
+            carousel.set("firstVisible", item);
+
+
+            sentinel  = item + numPerPage;
+            sentinel  = (sentinel > numItems - 1) ? numItems - 1 : sentinel;
+
+            offset    = getScrollOffset.call(carousel, delta);
+
+            animate   = animCfg.speed > 0;
+
+            if (animate) {
+                carousel._animateAndSetCarouselOffset(offset, item, sentinel,
+                        dontSelect);
+            } else {
+                carousel._setCarouselOffset(offset);
+                updateStateAfterScroll.call(carousel, item, sentinel);
+            }
+        },
+
+        /**
+         * Get the page an item is on within carousel.
+         *
+         * @method getPageForItem
+         * @public
+         * @param index {Number} Index of item
+         * @return {Number} Page item is on
+         */
+        getPageForItem : function(item) {
+            return Math.ceil(
+                (item+1) / parseInt(this.get("numVisible"),10)
+            );
+        },
+
+        /**
+         * Get the first visible item's index on any given page.
+         *
+         * @method getFirstVisibleOnpage
+         * @public
+         * @param page {Number} Page
+         * @return {Number} First item's index
+         */
+        getFirstVisibleOnPage : function(page) {
+            return (page - 1) * this.get("numVisible");
+        },
+
+        /**
+         * Select the previous item in the Carousel.
+         *
+         * @method selectPreviousItem
+         * @public
+         */
+        selectPreviousItem: function () {
+            var carousel = this,
+                newpos   = 0,
+                selected = carousel.get("selectedItem");
+
+            if (selected == this._firstItem) {
+                newpos = selected - carousel.get("numVisible");
+                carousel._selectedItem = carousel._getSelectedItem(selected-1);
+                carousel.scrollTo(newpos);
+            } else {
+                newpos = carousel.get("selectedItem") -
+                         carousel.get("scrollIncrement");
+                carousel.set("selectedItem",carousel._getSelectedItem(newpos));
+            }
+        },
+
+        /**
+         * Select the next item in the Carousel.
+         *
+         * @method selectNextItem
+         * @public
+         */
+        selectNextItem: function () {
+            var carousel = this, newpos = 0;
+
+            newpos = carousel.get("selectedItem") +
+                     carousel.get("scrollIncrement");
+            carousel.set("selectedItem", carousel._getSelectedItem(newpos));
+        },
+
+        /**
+         * Display the Carousel.
+         *
+         * @method show
+         * @public
+         */
+        show: function () {
+            var carousel = this,
+                cssClass = carousel.CLASSES;
+
+            if (carousel.fireEvent(beforeShowEvent) !== false) {
+                carousel.addClass(cssClass.VISIBLE);
+                carousel.fireEvent(showEvent);
+            }
+        },
+
+        /**
+         * Start auto-playing the Carousel.
+         *
+         * @method startAutoPlay
+         * @public
+         */
+        startAutoPlay: function () {
+            var carousel = this, timer;
+
+            if (JS.isUndefined(carousel._autoPlayTimer)) {
+                timer = carousel.get("autoPlayInterval");
+                if (timer <= 0) {
+                    return;
+                }
+                carousel._isAutoPlayInProgress = true;
+                carousel.fireEvent(startAutoPlayEvent);
+                carousel._autoPlayTimer = setTimeout(function () {
+                    carousel._autoScroll();
+                }, timer);
+            }
+        },
+
+        /**
+         * Stop auto-playing the Carousel.
+         *
+         * @method stopAutoPlay
+         * @public
+         */
+        stopAutoPlay: function () {
+            var carousel = this;
+
+            if (!JS.isUndefined(carousel._autoPlayTimer)) {
+                clearTimeout(carousel._autoPlayTimer);
+                delete carousel._autoPlayTimer;
+                carousel._isAutoPlayInProgress = false;
+                carousel.fireEvent(stopAutoPlayEvent);
+            }
+        },
+
+        /**
+         * Update interface's pagination data within a registered template.
+         *
+         * @method updatePagination
+         * @public
+         */
+        updatePagination: function () {
+            var carousel = this,
+                pagination = carousel._pagination;
+            if(!pagination.el){ return false; }
+
+            var numItems = carousel.get('numItems'),
+                numVisible = carousel.get('numVisible'),
+                firstVisible = carousel.get('firstVisible')+1,
+                currentPage = carousel.get('currentPage')+1,
+                numPages = carousel.get('numPages'),
+                replacements = {
+                    'numVisible' : numVisible,
+                    'numPages' : numPages,
+                    'numItems' : numItems,
+                    'selectedItem' : carousel.get('selectedItem')+1,
+                    'currentPage' : currentPage,
+                    'firstVisible' : firstVisible,
+                    'lastVisible' : carousel.get("lastVisible")+1
+                },
+                cb = pagination.callback || {},
+                scope = cb.scope && cb.obj ? cb.obj : carousel;
+
+            pagination.el.innerHTML = JS.isFunction(cb.fn) ? cb.fn.apply(scope, [pagination.template, replacements]) : YAHOO.lang.substitute(pagination.template, replacements);
+        },
+
+        /**
+         * Register carousels pagination template, append to interface, and populate.
+         *
+         * @method registerPagination
+         * @param template {String} Pagination template as passed to lang.substitute
+         * @public
+         */
+        registerPagination: function (tpl, pos, cb) {
+            var carousel = this;
+
+            carousel._pagination.template = tpl;
+            carousel._pagination.callback = cb || {};
+
+            if(!carousel._pagination.el){
+                carousel._pagination.el = createElement('DIV', {className:carousel.CLASSES.PAGINATION});
+
+                if(pos == "before"){
+                    carousel._navEl.insertBefore(carousel._pagination.el, carousel._navEl.firstChild);
+                } else {
+                    carousel._navEl.appendChild(carousel._pagination.el);
+                }
+
+                carousel.on('itemSelected', carousel.updatePagination);
+                carousel.on('pageChange', carousel.updatePagination);
+            }
+
+            carousel.updatePagination();
+        },
+
+        /**
+         * Return the string representation of the Carousel.
+         *
+         * @method toString
+         * @public
+         * @return {String}
+         */
+        toString: function () {
+            return WidgetName + (this.get ? " (#" + this.get("id") + ")" : "");
+        },
+
+        /*
+         * Protected methods of the Carousel component
+         */
+
+        /**
+         * Set the Carousel offset to the passed offset after animating.
+         *
+         * @method _animateAndSetCarouselOffset
+         * @param {Integer} offset The offset to which the Carousel has to be
+         * scrolled to.
+         * @param {Integer} item The index to which the Carousel will scroll.
+         * @param {Integer} sentinel The last element in the view port.
+         * @protected
+         */
+        _animateAndSetCarouselOffset: function (offset, item, sentinel) {
+            var carousel = this,
+                animCfg  = carousel.get("animation"),
+                animObj  = null;
+
+            if (carousel.get("isVertical")) {
+                animObj = new YAHOO.util.Motion(carousel._carouselEl,
+                        { top: { to: offset } },
+                        animCfg.speed, animCfg.effect);
+            } else {
+                animObj = new YAHOO.util.Motion(carousel._carouselEl,
+                        { left: { to: offset } },
+                        animCfg.speed, animCfg.effect);
+            }
+
+            carousel._isAnimationInProgress = true;
+            animObj.onComplete.subscribe(carousel._animationCompleteHandler,
+                                         { scope: carousel, item: item,
+                                           last: sentinel });
+            animObj.animate();
+        },
+
+        /**
+         * Handle the animation complete event.
+         *
+         * @method _animationCompleteHandler
+         * @param {Event} ev The event.
+         * @param {Array} p The event parameters.
+         * @param {Object} o The object that has the state of the Carousel
+         * @protected
+         */
+        _animationCompleteHandler: function (ev, p, o) {
+            o.scope._isAnimationInProgress = false;
+            updateStateAfterScroll.call(o.scope, o.item, o.last);
+        },
+
+        /**
+         * Automatically scroll the contents of the Carousel.
+         * @method _autoScroll
+         * @protected
+         */
+        _autoScroll: function() {
+            var carousel  = this,
+                currIndex = carousel._firstItem,
+                index;
+
+            if (currIndex >= carousel.get("numItems") - 1) {
+                if (carousel.get("isCircular")) {
+                    index = 0;
+                } else {
+                    carousel.stopAutoPlay();
+                }
+            } else {
+                index = currIndex + carousel.get("numVisible");
+            }
+
+            carousel._selectedItem = carousel._getSelectedItem(index);
+            carousel.scrollTo.call(carousel, index);
+        },
+
+        /**
+         * Create the Carousel.
+         *
+         * @method createCarousel
+         * @param elId {String} The id of the element to be created
+         * @protected
+         */
+        _createCarousel: function (elId) {
+            var carousel = this,
+                cssClass = carousel.CLASSES,
+                el       = Dom.get(elId);
+
+            if (!el) {
+                el = createElement("DIV", {
+                        className : cssClass.CAROUSEL,
+                        id        : elId
+                });
+            }
+
+            if (!carousel._carouselEl) {
+                carousel._carouselEl=createElement(carousel.get("carouselEl"),
+                        { className: cssClass.CAROUSEL_EL });
+            }
+
+            return el;
+        },
+
+        /**
+         * Create the Carousel clip container.
+         *
+         * @method createCarouselClip
+         * @protected
+         */
+        _createCarouselClip: function () {
+            return createElement("DIV", { className: this.CLASSES.CONTENT });
+        },
+
+        /**
+         * Create the Carousel item.
+         *
+         * @method createCarouselItem
+         * @param obj {Object} The attributes of the element to be created
+         * @protected
+         */
+        _createCarouselItem: function (obj) {
+            var attr, carousel = this,
+                styles = getCarouselItemPosition.call(carousel, obj.pos);
+
+            return createElement(carousel.get("carouselItemEl"), {
+                    className : obj.className,
+                    styles    : obj.styles,
+                    content   : obj.content,
+                    id        : obj.id
+            });
+        },
+
+        /**
+         * Return a valid item for a possibly out of bounds index considering
+         * the isCircular property.
+         *
+         * @method _getValidIndex
+         * @param index {Number} The index of the item to be returned
+         * @return {Object} Return a valid item index
+         * @protected
+         */
+        _getValidIndex: function (index) {
+            var carousel   = this,
+                isCircular = carousel.get("isCircular"),
+                numItems   = carousel.get("numItems"),
+                numVisible = carousel.get("numVisible"),
+                sentinel   = numItems - 1;
+
+            if (index < 0) {
+                index = isCircular ?
+                        Math.ceil(numItems/numVisible)*numVisible + index : 0;
+            } else if (index > sentinel) {
+                index = isCircular ? 0 : sentinel;
+            }
+
+            return index;
+        },
+
+        /**
+         * Get the value for the selected item.
+         *
+         * @method _getSelectedItem
+         * @param val {Number} The new value for "selected" item
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _getSelectedItem: function (val) {
+            var carousel   = this,
+                isCircular = carousel.get("isCircular"),
+                numItems   = carousel.get("numItems"),
+                sentinel   = numItems - 1;
+
+            if (val < 0) {
+                if (isCircular) {
+                    val = numItems + val;
+                } else {
+                    val = carousel.get("selectedItem");
+                }
+            } else if (val > sentinel) {
+                if (isCircular) {
+                    val = val - numItems;
+                } else {
+                    val = carousel.get("selectedItem");
+                }
+            }
+            return val;
+        },
+
+        /**
+         * The "click" handler for the item.
+         *
+         * @method _itemClickHandler
+         * @param {Event} ev The event object
+         * @protected
+         */
+        _itemClickHandler: function (ev) {
+            var carousel     = this,
+                carouselItem = carousel.get("carouselItemEl"),
+                container    = carousel.get("element"),
+                el,
+                item,
+                target       = Event.getTarget(ev),
+                tag          = target.tagName.toUpperCase();
+
+            if(tag === "INPUT" ||
+               tag === "SELECT" ||
+               tag === "TEXTAREA") {
+                return;
+            }
+
+            while (target && target != container &&
+                   target.id != carousel._carouselEl) {
+                el = target.nodeName;
+                if (el.toUpperCase() == carouselItem) {
+                    break;
+                }
+                target = target.parentNode;
+            }
+
+            if ((item = carousel.getItemPositionById(target.id)) >= 0) {
+                carousel.set("selectedItem", carousel._getSelectedItem(item));
+                carousel.focus();
+            }
+        },
+
+        /**
+         * The keyboard event handler for Carousel.
+         *
+         * @method _keyboardEventHandler
+         * @param ev {Event} The event that is being handled.
+         * @protected
+         */
+        _keyboardEventHandler: function (ev) {
+            var carousel = this,
+                key      = Event.getCharCode(ev),
+                target   = Event.getTarget(ev),
+                prevent  = false;
+
+            // do not mess while animation is in progress or naving via select
+            if (carousel.isAnimating() || target.tagName.toUpperCase() === "SELECT") {
+                return;
+            }
+
+            switch (key) {
+            case 0x25:          // left arrow
+            case 0x26:          // up arrow
+                carousel.selectPreviousItem();
+                prevent = true;
+                break;
+            case 0x27:          // right arrow
+            case 0x28:          // down arrow
+                carousel.selectNextItem();
+                prevent = true;
+                break;
+            case 0x21:          // page-up
+                carousel.scrollPageBackward();
+                prevent = true;
+                break;
+            case 0x22:          // page-down
+                carousel.scrollPageForward();
+                prevent = true;
+                break;
+            }
+
+            if (prevent) {
+                if (carousel.isAutoPlayOn()) {
+                    carousel.stopAutoPlay();
+                }
+                Event.preventDefault(ev);
+            }
+        },
+
+        /**
+         * The load the required set of items that are needed for display.
+         *
+         * @method _loadItems
+         * @protected
+         */
+        _loadItems: function(last) {
+            var carousel    = this,
+                numItems    = carousel.get("numItems"),
+                numVisible  = carousel.get("numVisible"),
+                reveal      = carousel.get("revealAmount"),
+                first       = carousel._itemsTable.items.length,
+                lastVisible = carousel.get("lastVisible");
+
+            // adjust if going backwards
+            if(first > last && last+1 >= numVisible){
+                // need to get first a bit differently for the last page
+                first = last % numVisible || last == lastVisible ? last - last % numVisible : last - numVisible + 1;
+            }
+
+            if(reveal && last < numItems - 1){ last++; }
+
+            if (last >= first && (!carousel.getItem(first) || !carousel.getItem(last))) {
+                carousel.fireEvent(loadItemsEvent, {
+                        ev: loadItemsEvent, first: first, last: last,
+                        num: last - first + 1
+                });
+            }
+
+        },
+
+        /**
+         * The "onchange" handler for select box pagination.
+         *
+         * @method _pagerChangeHandler
+         * @param {Event} ev The event object
+         * @protected
+         */
+         _pagerChangeHandler: function (ev) {
+            var carousel = this,
+                target = Event.getTarget(ev),
+                 page = target.value,
+                 item;
+
+             if (page) {
+                 item = carousel.getFirstVisibleOnPage(page);
+                 carousel._selectedItem = item;
+                 carousel.scrollTo(item);
+                 carousel.focus();
+            }
+          },
+        /**
+         * The "click" handler for anchor pagination.
+         *
+         * @method _pagerClickHandler
+         * @param {Event} ev The event object
+         * @protected
+         */
+         _pagerClickHandler: function (ev) {
+             var carousel = this,
+                 css = carousel.CLASSES,
+                 target = Event.getTarget(ev),
+                 elNode = target.nodeName.toUpperCase(),
+                 val,
+                 stringIndex,
+                 page,
+                 item;
+
+             if (Dom.hasClass(target, css.PAGER_ITEM) || Dom.hasClass(target.parentNode, css.PAGER_ITEM))  {
+                 if (elNode == "EM") {
+                     target = target.parentNode;// item is an em and not an anchor (when text is visible)
+                 }
+                 val = target.href;
+                 stringIndex = val.lastIndexOf("#");
+                 page =  parseInt(val.substring(stringIndex+1), 10);
+                    if (page != -1) {
+                     item = carousel.getFirstVisibleOnPage(page);
+                     carousel._selectedItem = item;
+                     carousel.scrollTo(item);
+                            carousel.focus();
+                        }
+                        Event.preventDefault(ev);
+                    }
+        },
+
+        /**
+         * Find the Carousel within a container. The Carousel is identified by
+         * the first element that matches the carousel element tag or the
+         * element that has the Carousel class.
+         *
+         * @method parseCarousel
+         * @param parent {HTMLElement} The parent element to look under
+         * @return {Boolean} True if Carousel is found, false otherwise
+         * @protected
+         */
+        _parseCarousel: function (parent) {
+            var carousel = this, child, cssClass, domEl, found, node;
+
+            cssClass  = carousel.CLASSES;
+            domEl     = carousel.get("carouselEl");
+            found     = false;
+
+            for (child = parent.firstChild; child; child = child.nextSibling) {
+                if (child.nodeType == 1) {
+                    node = child.nodeName;
+                    if (node.toUpperCase() == domEl) {
+                        carousel._carouselEl = child;
+                        Dom.addClass(carousel._carouselEl,
+                                     carousel.CLASSES.CAROUSEL_EL);
+                        found = true;
+                    }
+                }
+            }
+
+            return found;
+        },
+
+        /**
+         * Find the items within the Carousel and add them to the items table.
+         * A Carousel item is identified by elements that matches the carousel
+         * item element tag.
+         *
+         * @method parseCarouselItems
+         * @protected
+         */
+        _parseCarouselItems: function () {
+            var carousel = this,
+                cssClass = carousel.CLASSES,
+                i=0,
+                rows,
+                child,
+                domItemEl,
+                elId,
+                node,
+                index = carousel.get("firstVisible"),
+                parent   = carousel._carouselEl;
+
+            rows = carousel._rows;
+            domItemEl = carousel.get("carouselItemEl");
+
+            for (child = parent.firstChild; child; child = child.nextSibling) {
+                if (child.nodeType == 1) {
+                    node = child.nodeName;
+                    if (node.toUpperCase() == domItemEl) {
+                        if (child.id) {
+                            elId = child.id;
+                        } else {
+                            elId = Dom.generateId();
+                            child.setAttribute("id", elId);
+                        }
+                        carousel.addItem(child,index);
+                        index++;
+                    }
+                }
+            }
+        },
+
+        /**
+         * Find the Carousel navigation within a container. The navigation
+         * elements need to match the carousel navigation class names.
+         *
+         * @method parseCarouselNavigation
+         * @param parent {HTMLElement} The parent element to look under
+         * @return {Boolean} True if at least one is found, false otherwise
+         * @protected
+         */
+        _parseCarouselNavigation: function (parent) {
+            var carousel = this,
+                cfg,
+                cssClass = carousel.CLASSES,
+                el,
+                i,
+                j,
+                nav,
+                rv       = false;
+
+            nav = Dom.getElementsByClassName(cssClass.PREV_PAGE, "*", parent);
+            if (nav.length > 0) {
+                for (i in nav) {
+                    if (nav.hasOwnProperty(i)) {
+                        el = nav[i];
+                        if (el.nodeName == "INPUT" ||
+                            el.nodeName == "BUTTON" ||
+                            el.nodeName == "A") {// Anchor support in Nav (for SEO)
+                            carousel._navBtns.prev.push(el);
+                        } else {
+                            j = el.getElementsByTagName("INPUT");
+                            if (JS.isArray(j) && j.length > 0) {
+                                carousel._navBtns.prev.push(j[0]);
+                            } else {
+                                j = el.getElementsByTagName("BUTTON");
+                                if (JS.isArray(j) && j.length > 0) {
+                                    carousel._navBtns.prev.push(j[0]);
+                                }
+                            }
+                        }
+                    }
+                }
+                cfg = { prev: nav };
+            }
+
+            nav = Dom.getElementsByClassName(cssClass.NEXT_PAGE, "*", parent);
+            if (nav.length > 0) {
+                for (i in nav) {
+                    if (nav.hasOwnProperty(i)) {
+                        el = nav[i];
+                        if (el.nodeName == "INPUT" ||
+                            el.nodeName == "BUTTON" ||
+                            el.nodeName == "A") {// Anchor support in Nav (for SEO)
+                            carousel._navBtns.next.push(el);
+                        } else {
+                            j = el.getElementsByTagName("INPUT");
+                            if (JS.isArray(j) && j.length > 0) {
+                                carousel._navBtns.next.push(j[0]);
+                            } else {
+                                j = el.getElementsByTagName("BUTTON");
+                                if (JS.isArray(j) && j.length > 0) {
+                                    carousel._navBtns.next.push(j[0]);
+                                }
+                            }
+                        }
+                    }
+                }
+                if (cfg) {
+                    cfg.next = nav;
+                } else {
+                    cfg = { next: nav };
+                }
+            }
+
+            if (cfg) {
+                carousel.set("navigation", cfg);
+                rv = true;
+            }
+
+            return rv;
+        },
+
+        /**
+         * Refresh the widget UI if it is not already rendered, on first item
+         * addition.
+         *
+         * @method _refreshUi
+         * @protected
+         */
+        _refreshUi: function () {
+            var carousel = this, i, isVertical = carousel.get("isVertical"), firstVisible = carousel.get("firstVisible"), item, n, rsz, sz;
+
+            if (carousel._itemsTable.numItems < 1) {
+                return;
+            }
+
+            sz  = getCarouselItemSize.call(carousel,
+                    isVertical ? "height" : "width");
+            // This fixes the widget to auto-adjust height/width for absolute
+            // positioned children.
+            item = carousel._itemsTable.items[firstVisible].id;
+
+            sz   = isVertical ? getStyle(item, "width") :
+                    getStyle(item, "height");
+
+            Dom.setStyle(carousel._carouselEl,
+                         isVertical ? "width" : "height", sz + "px");
+
+            // Set the rendered state appropriately.
+            carousel._hasRendered = true;
+            carousel.fireEvent(renderEvent);
+        },
+
+        /**
+         * Set the Carousel offset to the passed offset.
+         *
+         * @method _setCarouselOffset
+         * @protected
+         */
+        _setCarouselOffset: function (offset) {
+            var carousel = this, which;
+
+            which = carousel.get("isVertical") ? "top" : "left";
+            Dom.setStyle(carousel._carouselEl, which, offset + "px");
+        },
+
+        /**
+         * Setup/Create the Carousel navigation element (if needed).
+         *
+         * @method _setupCarouselNavigation
+         * @protected
+         */
+        _setupCarouselNavigation: function () {
+            var carousel = this,
+                btn, cfg, cssClass, nav, navContainer, nextButton, prevButton;
+
+            cssClass = carousel.CLASSES;
+
+            // TODO: can the _navBtns be tested against instead?
+            navContainer = Dom.getElementsByClassName(cssClass.NAVIGATION,
+                    "DIV", carousel.get("element"));
+
+            if (navContainer.length === 0) {
+                navContainer = createElement("DIV",
+                        { className: cssClass.NAVIGATION });
+                carousel.insertBefore(navContainer,
+                        Dom.getFirstChild(carousel.get("element")));
+            } else {
+                navContainer = navContainer[0];
+            }
+
+            carousel._pages.el = createElement("UL");
+            navContainer.appendChild(carousel._pages.el);
+
+            nav = carousel.get("navigation");
+            if (JS.isString(nav.prev) || JS.isArray(nav.prev)) {
+                if (JS.isString(nav.prev)) {
+                    nav.prev = [nav.prev];
+                }
+                for (btn in nav.prev) {
+                    if (nav.prev.hasOwnProperty(btn)) {
+                        carousel._navBtns.prev.push(Dom.get(nav.prev[btn]));
+                    }
+                }
+            } else {
+                // TODO: separate method for creating a navigation button
+                prevButton = createElement("SPAN",
+                        { className: cssClass.BUTTON + cssClass.FIRST_NAV });
+                // XXX: for IE 6.x
+                Dom.setStyle(prevButton, "visibility", "visible");
+                btn = Dom.generateId();
+                prevButton.innerHTML = "<button type=\"button\" "      +
+                        "id=\"" + btn + "\" name=\""                   +
+                        carousel.STRINGS.PREVIOUS_BUTTON_TEXT + "\">"  +
+                        carousel.STRINGS.PREVIOUS_BUTTON_TEXT + "</button>";
+                navContainer.appendChild(prevButton);
+                btn = Dom.get(btn);
+                carousel._navBtns.prev = [btn];
+                cfg = { prev: [prevButton] };
+            }
+
+            if (JS.isString(nav.next) || JS.isArray(nav.next)) {
+                if (JS.isString(nav.next)) {
+                    nav.next = [nav.next];
+                }
+                for (btn in nav.next) {
+                    if (nav.next.hasOwnProperty(btn)) {
+                        carousel._navBtns.next.push(Dom.get(nav.next[btn]));
+                    }
+                }
+            } else {
+                // TODO: separate method for creating a navigation button
+                nextButton = createElement("SPAN",
+                        { className: cssClass.BUTTON + cssClass.NEXT_NAV });
+                // XXX: for IE 6.x
+                Dom.setStyle(nextButton, "visibility", "visible");
+                btn = Dom.generateId();
+                nextButton.innerHTML = "<button type=\"button\" "      +
+                        "id=\"" + btn + "\" name=\""                   +
+                        carousel.STRINGS.NEXT_BUTTON_TEXT + "\">"      +
+                        carousel.STRINGS.NEXT_BUTTON_TEXT + "</button>";
+                navContainer.appendChild(nextButton);
+                btn = Dom.get(btn);
+                carousel._navBtns.next = [btn];
+                if (cfg) {
+                    cfg.next = [nextButton];
+                } else {
+                    cfg = { next: [nextButton] };
+                }
+            }
+
+            if (cfg) {
+                carousel.set("navigation", cfg);
+            }
+
+            return navContainer;
+        },
+
+        /**
+         * Set the clip container size (based on the new numVisible value).
+         *
+         * @method _setClipContainerSize
+         * @param clip {HTMLElement} The clip container element.
+         * @param num {Number} optional The number of items per page.
+         * @protected
+         */
+        _setClipContainerSize: function (clip, num) {
+            var carousel   = this,
+                isVertical = carousel.get("isVertical"),
+                rows       = carousel._rows,
+                cols       = carousel._cols,
+                reveal     = carousel.get("revealAmount"),
+                itemHeight = getCarouselItemSize.call(carousel, "height"),
+                itemWidth  = getCarouselItemSize.call(carousel, "width"),
+                containerHeight,
+                containerWidth;
+
+            clip = clip || carousel._clipEl;
+
+            if (rows) {
+                 containerHeight = itemHeight * rows;
+                 containerWidth  = itemWidth  * cols;
+            } else {
+                num = num || carousel.get("numVisible");
+                if (isVertical) {
+                    containerHeight = itemHeight * num;
+                } else {
+                    containerWidth  = itemWidth  * num;
+                }
+            }
+
+            // TODO: try to re-use the _hasRendered indicator
+
+            carousel._recomputeSize = (containerHeight === 0); // bleh!
+            if (carousel._recomputeSize) {
+                carousel._hasRendered = false;
+                return;             // no use going further, bail out!
+            }
+
+            reveal = getRevealSize.call(carousel);
+            if (isVertical) {
+                containerHeight += (reveal * 2);
+            } else {
+                containerWidth  += (reveal * 2);
+            }
+
+            if (isVertical) {
+                containerHeight += getDimensions(carousel._carouselEl,"height");
+                Dom.setStyle(clip, "height", containerHeight + "px");
+                // For multi-row Carousel
+                if (cols) {
+                    containerWidth += getDimensions(carousel._carouselEl,
+                            "width");
+                    Dom.setStyle(clip, "width", containerWidth + (0) + "px");
+                }
+            } else {
+                containerWidth += getDimensions(carousel._carouselEl, "width");
+                Dom.setStyle(clip, "width", containerWidth + "px");
+                // For multi-row Carousel
+                if (rows) {
+                    containerHeight += getDimensions(carousel._carouselEl,
+                            "height");
+                    Dom.setStyle(clip, "height", containerHeight + "px");
+                }
+            }
+
+            carousel._setContainerSize(clip); // adjust the container size too
+        },
+
+        /**
+         * Set the container size.
+         *
+         * @method _setContainerSize
+         * @param clip {HTMLElement} The clip container element.
+         * @param attr {String} Either set the height or width.
+         * @protected
+         */
+        _setContainerSize: function (clip, attr) {
+            var carousel = this,
+                config   = carousel.CONFIG,
+                cssClass = carousel.CLASSES,
+                isVertical,
+                rows,
+                cols,
+                size;
+
+            isVertical = carousel.get("isVertical");
+            rows       = carousel._rows;
+            cols       = carousel._cols;
+            clip       = clip || carousel._clipEl;
+            attr       = attr || (isVertical ? "height" : "width");
+            size       = parseFloat(Dom.getStyle(clip, attr), 10);
+
+            size = JS.isNumber(size) ? size : 0;
+
+            if (isVertical) {
+                size += getDimensions(carousel._carouselEl, "height") +
+                        getStyle(carousel._navEl, "height");
+            } else {
+                size += getDimensions(carousel._carouselEl, "width");
+            }
+
+            if (!isVertical) {
+                if (size < config.HORZ_MIN_WIDTH) {
+                    size = config.HORZ_MIN_WIDTH;
+                    carousel.addClass(cssClass.MIN_WIDTH);
+                }
+            }
+            carousel.setStyle(attr,  size + "px");
+
+            // Additionally the width of the container should be set for
+            // the vertical Carousel
+            if (isVertical) {
+                size = getCarouselItemSize.call(carousel, "width");
+                if(cols) {
+                    size = size * cols;
+                }
+                Dom.setStyle(carousel._carouselEl, "width", size + "px");// Bug fix for vertical carousel (goes in conjunction with .yui-carousel-element {... 3200px removed from styles), and allows for multirows in IEs).
+                if (size < config.VERT_MIN_WIDTH) {
+                    size = config.VERT_MIN_WIDTH;
+                    carousel.addClass(cssClass.MIN_WIDTH);// set a min width on vertical carousel, don't see why this shouldn't always be set...
+                }
+                carousel.setStyle("width",  size + "px");
+            } else {
+                if(rows) {
+                    size = getCarouselItemSize.call(carousel, "height");
+                    size = size * rows;
+                    Dom.setStyle(carousel._carouselEl, "height", size + "px");
+                }
+            }
+        },
+
+        /**
+         * Set the value for the Carousel's first visible item.
+         *
+         * @method _setFirstVisible
+         * @param val {Number} The new value for firstVisible
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _setFirstVisible: function (val) {
+            var carousel = this;
+
+            if (val >= 0 && val < carousel.get("numItems")) {
+                carousel.scrollTo(val);
+            } else {
+                val = carousel.get("firstVisible");
+            }
+            return val;
+        },
+
+        /**
+         * Set the value for the Carousel's navigation.
+         *
+         * @method _setNavigation
+         * @param cfg {Object} The navigation configuration
+         * @return {Object} The new value that would be set
+         * @protected
+         */
+        _setNavigation: function (cfg) {
+            var carousel = this;
+
+            if (cfg.prev) {
+                Event.on(cfg.prev, "click", scrollPageBackward, carousel);
+            }
+            if (cfg.next) {
+                Event.on(cfg.next, "click", scrollPageForward, carousel);
+            }
+        },
+
+        /**
+         * Clip the container size every time numVisible is set.
+         *
+         * @method _setNumVisible
+         * @param val {Number} The new value for numVisible
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _setNumVisible: function (val) { // TODO: _setNumVisible should just be reserved for setting numVisible.
+            var carousel = this;
+
+            carousel._setClipContainerSize(carousel._clipEl, val);
+        },
+
+        /**
+         * Set the value for the number of visible items in the Carousel.
+         *
+         * @method _numVisibleSetter
+         * @param val {Number} The new value for numVisible
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _numVisibleSetter: function (val) {
+            var carousel = this,
+                numVisible = val;
+
+            if(JS.isArray(val)) {
+                carousel._cols = val[0];
+                carousel._rows = val[1];
+                numVisible = val[0] *  val[1];
+            }
+            return numVisible;
+        },
+
+        /**
+         * Set the value for selectedItem.
+         *
+         * @method _selectedItemSetter
+         * @param val {Number} The new value for selectedItem
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _selectedItemSetter: function (val) {
+            var carousel = this;
+            return (val < carousel.get("numItems")) ? val : 0;
+        },
+
+        /**
+         * Set the number of items in the Carousel.
+         * Warning: Setting this to a lower number than the current removes
+         * items from the end.
+         *
+         * @method _setNumItems
+         * @param val {Number} The new value for numItems
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _setNumItems: function (val) {
+            var carousel = this,
+                num      = carousel._itemsTable.numItems;
+
+            if (JS.isArray(carousel._itemsTable.items)) {
+                if (carousel._itemsTable.items.length != num) { // out of sync
+                    num = carousel._itemsTable.items.length;
+                    carousel._itemsTable.numItems = num;
+                }
+            }
+
+            if (val < num) {
+                while (num > val) {
+                    carousel.removeItem(num - 1);
+                    num--;
+                }
+            }
+
+            return val;
+        },
+
+        /**
+         * Set the orientation of the Carousel.
+         *
+         * @method _setOrientation
+         * @param val {Boolean} The new value for isVertical
+         * @return {Boolean} The new value that would be set
+         * @protected
+         */
+        _setOrientation: function (val) {
+            var carousel = this,
+                cssClass = carousel.CLASSES;
+
+            if (val) {
+                carousel.replaceClass(cssClass.HORIZONTAL, cssClass.VERTICAL);
+            } else {
+                carousel.replaceClass(cssClass.VERTICAL, cssClass.HORIZONTAL);
+            }
+            this._itemAttrCache = {}; // force recomputed next time
+
+            return val;
+        },
+
+        /**
+         * Set the value for the reveal amount percentage in the Carousel.
+         *
+         * @method _setRevealAmount
+         * @param val {Number} The new value for revealAmount
+         * @return {Number} The new value that would be set
+         * @protected
+         */
+        _setRevealAmount: function (val) {
+            var carousel = this;
+
+            if (val >= 0 && val <= 100) {
+                val = parseInt(val, 10);
+                val = JS.isNumber(val) ? val : 0;
+                carousel._setClipContainerSize();
+            } else {
+                val = carousel.get("revealAmount");
+            }
+            return val;
+        },
+
+        /**
+         * Set the value for the selected item.
+         *
+         * @method _setSelectedItem
+         * @param val {Number} The new value for "selected" item
+         * @protected
+         */
+        _setSelectedItem: function (val) {
+            this._selectedItem = val;
+        },
+
+        /**
+         * Get the total number of pages.
+         *
+         * @method _getNumPages
+         * @protected
+         */
+        _getNumPages: function () {
+            return Math.ceil(
+                parseInt(this.get("numItems"),10) / parseInt(this.get("numVisible"),10)
+            );
+        },
+
+        /**
+         * Get the index of the last visible item
+         *
+         * @method _getLastVisible
+         * @protected
+         */
+        _getLastVisible: function () {
+            var carousel = this;
+            return carousel.get("currentPage") + 1 == carousel.get("numPages") ?
+                   carousel.get("numItems") - 1:
+                   carousel.get("firstVisible") + carousel.get("numVisible") - 1;
+        },
+
+        /**
+         * Synchronize and redraw the UI after an item is added.
+         *
+         * @method _syncUiForItemAdd
+         * @protected
+         */
+        _syncUiForItemAdd: function (obj) {
+            var attr,
+                carousel   = this,
+                carouselEl = carousel._carouselEl,
+                el,
+                item,
+                itemsTable = carousel._itemsTable,
+                oel,
+                pos,
+                sibling,
+                styles;
+
+            pos  = JS.isUndefined(obj.pos) ?
+                   obj.newPos || itemsTable.numItems - 1 : obj.pos;
+
+            if (!oel) {
+                item = itemsTable.items[pos] || {};
+                el = carousel._createCarouselItem({
+                        className : item.className,
+                        styles    : item.styles,
+                        content   : item.item,
+                        id        : item.id,
+                        pos       : pos
+                });
+                if (JS.isUndefined(obj.pos)) {
+                    if (!JS.isUndefined(itemsTable.loading[pos])) {
+                        oel = itemsTable.loading[pos];
+                        // if oel is null, it is a problem ...
+                    }
+                    if (oel) {
+                        // replace the node
+                        carouselEl.replaceChild(el, oel);
+                        // ... and remove the item from the data structure
+                        delete itemsTable.loading[pos];
+                    } else {
+                        carouselEl.appendChild(el);
+                    }
+                } else {
+                    if (!JS.isUndefined(itemsTable.items[obj.pos + 1])) {
+                        sibling = Dom.get(itemsTable.items[obj.pos + 1].id);
+                    }
+                    if (sibling) {
+                        carouselEl.insertBefore(el, sibling);
+                    } else {
+                    }
+                }
+            } else {
+                if (JS.isUndefined(obj.pos)) {
+                    if (!Dom.isAncestor(carousel._carouselEl, oel)) {
+                        carouselEl.appendChild(oel);
+                    }
+                } else {
+                    if (!Dom.isAncestor(carouselEl, oel)) {
+                        if (!JS.isUndefined(itemsTable.items[obj.pos + 1])) {
+                            carouselEl.insertBefore(oel,
+                                    Dom.get(itemsTable.items[obj.pos + 1].id));
+                        }
+                    }
+                }
+            }
+
+            if (!carousel._hasRendered) {
+                carousel._refreshUi();
+            }
+
+            if (carousel.get("selectedItem") < 0) {
+                carousel.set("selectedItem", carousel.get("firstVisible"));
+            }
+
+            carousel._syncUiItems();
+        },
+
+        /**
+         * Synchronize and redraw the UI after an item is replaced.
+         *
+         * @method _syncUiForItemReplace
+         * @protected
+         */
+        _syncUiForItemReplace: function (o) {
+            var carousel   = this,
+                carouselEl = carousel._carouselEl,
+                itemsTable = carousel._itemsTable,
+                pos        = o.pos,
+                item       = o.newItem,
+                oel        = o.oldItem,
+                el;
+
+            el = carousel._createCarouselItem({
+                className : item.className,
+                styles    : item.styles,
+                content   : item.item,
+                id        : item.id,
+                pos       : pos
+            });
+
+            if(el && oel) {
+                Event.purgeElement(oel, true);
+                carouselEl.replaceChild(el, Dom.get(oel.id));
+                if (!JS.isUndefined(itemsTable.loading[pos])) {
+                    itemsTable.numItems++;
+                    delete itemsTable.loading[pos];
+                }
+            }
+            // TODO: should we add the item if oel is undefined?
+
+            if (!carousel._hasRendered) {
+                carousel._refreshUi();
+            }
+
+            carousel._syncUiItems();
+        },
+
+        /**
+         * Synchronize and redraw the UI after an item is removed.
+         *
+         * @method _syncUiForItemAdd
+         * @protected
+         */
+        _syncUiForItemRemove: function (obj) {
+            var carousel   = this,
+                carouselEl = carousel._carouselEl,
+                el, item, num, pos;
+
+            num  = carousel.get("numItems");
+            item = obj.item;
+            pos  = obj.pos;
+
+            if (item && (el = Dom.get(item.id))) {
+                if (el && Dom.isAncestor(carouselEl, el)) {
+                    Event.purgeElement(el, true);
+                    carouselEl.removeChild(el);
+                }
+
+                if (carousel.get("selectedItem") == pos) {
+                    pos = pos >= num ? num - 1 : pos;
+                }
+            } else {
+            }
+
+            carousel._syncUiItems();
+        },
+
+        /**
+         * Synchronize and redraw the UI for lazy loading.
+         *
+         * @method _syncUiForLazyLoading
+         * @protected
+         */
+        _syncUiForLazyLoading: function (obj) {
+            var carousel   = this,
+                carouselEl = carousel._carouselEl,
+                itemsTable = carousel._itemsTable,
+                len = itemsTable.items.length,
+                sibling = itemsTable.items[obj.last + 1],
+                el,
+                j;
+
+            // attempt to find the next closest sibling
+            if(!sibling && obj.last < len){
+                j = obj.first;
+                do {
+                    sibling = itemsTable.items[j];
+                    j++;
+                } while (j<len && !sibling);
+            }
+
+            for (var i = obj.first; i <= obj.last; i++) {
+                if(JS.isUndefined(itemsTable.loading[i]) && JS.isUndefined(itemsTable.items[i])){
+                    el = carousel._createCarouselItem({
+                            className : carousel.CLASSES.ITEM_LOADING,
+                            content   : carousel.STRINGS.ITEM_LOADING_CONTENT,
+                            id        : Dom.generateId(),
+                            pos       : i
+                    });
+                    if (el) {
+                        if (sibling) {
+                            sibling = Dom.get(sibling.id);
+                            if (sibling) {
+                                carouselEl.insertBefore(el, sibling);
+                            } else {
+                            }
+                        } else {
+                            carouselEl.appendChild(el);
+                        }
+                    }
+                    itemsTable.loading[i] = el;
+                }
+            }
+
+            carousel._syncUiItems();
+        },
+
+        /**
+         * Redraw the UI for item positioning.
+         *
+         * @method _syncUiItems
+         * @protected
+         */
+        _syncUiItems: function () {
+            var attr,
+                carousel = this,
+                numItems = carousel.get("numItems"),
+                i,
+                itemsTable = carousel._itemsTable,
+                items = itemsTable.items,
+                loading = itemsTable.loading,
+                item,
+                styles;
+
+            for (i = 0; i < numItems; i++) {
+                item = items[i] || loading[i];
+
+                if (item && item.id) {
+                    styles = getCarouselItemPosition.call(carousel, i);
+                    item.styles = item.styles || {};
+                    for (attr in styles) {
+                        if (styles.hasOwnProperty(attr)) {
+                            item.styles[attr] = styles[attr];
+                        }
+                    }
+                    setStyles(Dom.get(item.id), styles);
+                }
+            }
+        },
+
+        /**
+         * Set the correct class for the navigation buttons.
+         *
+         * @method _updateNavButtons
+         * @param el {Object} The target button
+         * @param setFocus {Boolean} True to set focus ring, false otherwise.
+         * @protected
+         */
+        _updateNavButtons: function (el, setFocus) {
+            var children,
+                cssClass = this.CLASSES,
+                grandParent,
+                parent   = el.parentNode;
+
+            if (!parent) {
+                return;
+            }
+            grandParent = parent.parentNode;
+
+            if (el.nodeName.toUpperCase() == "BUTTON" &&
+                Dom.hasClass(parent, cssClass.BUTTON)) {
+                if (setFocus) {
+                    if (grandParent) {
+                        children = Dom.getChildren(grandParent);
+                        if (children) {
+                            Dom.removeClass(children, cssClass.FOCUSSED_BUTTON);
+                        }
+                    }
+                    Dom.addClass(parent, cssClass.FOCUSSED_BUTTON);
+                } else {
+                    Dom.removeClass(parent, cssClass.FOCUSSED_BUTTON);
+                }
+            }
+        },
+
+        /**
+         * Update the UI for the pager buttons based on the current page and
+         * the number of pages.
+         *
+         * @method _updatePagerButtons
+         * @protected
+         */
+         _updatePagerButtons: function () {
+             var carousel = this,
+                 css      = carousel.CLASSES,
+                 cur      = carousel._pages.cur, // current page
+                 el,
+                 html,
+                 i,
+                 item,
+                 n        = carousel.get("numVisible"),
+                 num      = carousel._pages.num, // total pages
+                 pager    = carousel._pages.el;  // the pager container element
+
+             if (num === 0 || !pager) {
+                 return;         // don't do anything if number of pages is 0
+             }
+
+             // Hide the pager before redrawing it
+             Dom.setStyle(pager, "visibility", "hidden");
+
+             // Remove all nodes from the pager
+             while (pager.firstChild) {
+                 pager.removeChild(pager.firstChild);
+             }
+
+             for (i = 0; i < num; i++) {
+
+                 el   = document.createElement("LI");
+
+                 if (i === 0) {
+                     Dom.addClass(el, css.FIRST_PAGE);
+                 }
+                 if (i == cur) {
+                     Dom.addClass(el, css.SELECTED_NAV);
+                 }
+
+                 html = "<a class=" + css.PAGER_ITEM + " href=\"#" + (i+1) + "\" tabindex=\"0\"><em>"   +
+                         carousel.STRINGS.PAGER_PREFIX_TEXT + " " + (i+1) +
+                         "</em></a>";
+                 el.innerHTML = html;
+
+                 pager.appendChild(el);
+             }
+
+             // Show the pager now
+             Dom.setStyle(pager, "visibility", "visible");
+         },
+
+        /**
+         * Update the UI for the pager menu based on the current page and
+         * the number of pages.  If the number of pages is greater than
+         * MAX_PAGER_BUTTONS, then the selection of pages is provided by a drop
+         * down menu instead of a set of buttons.
+         *
+         * @method _updatePagerMenu
+         * @protected
+         */
+        _updatePagerMenu: function () {
+            var carousel = this,
+                css      = carousel.CLASSES,
+                cur      = carousel._pages.cur, // current page
+                el,
+                i,
+                item,
+                n        = carousel.get("numVisible"),
+                num      = carousel._pages.num, // total pages
+                pager    = carousel._pages.el,  // the pager container element
+                sel;
+
+            if (num === 0) {
+                return;// don't do anything if number of pages is 0
+            }
+
+            sel = document.createElement("SELECT");
+
+
+            if (!sel) {
+                return;
+            }
+
+            // Hide the pager before redrawing it
+            Dom.setStyle(pager, "visibility", "hidden");
+
+            // Remove all nodes from the pager
+            while (pager.firstChild) {
+                pager.removeChild(pager.firstChild);
+            }
+
+            for (i = 0; i < num; i++) {
+
+                el   = document.createElement("OPTION");
+                el.value     = i+1;
+                el.innerHTML = carousel.STRINGS.PAGER_PREFIX_TEXT+" "+(i+1);
+
+                if (i == cur) {
+                    el.setAttribute("selected", "selected");
+                }
+
+                sel.appendChild(el);
+            }
+
+            el = document.createElement("FORM");
+            if (!el) {
+            } else {
+                el.appendChild(sel);
+                pager.appendChild(el);
+            }
+
+            // Show the pager now
+            Event.addListener(sel, "change", carousel._pagerChangeHandler, this, true);
+            Dom.setStyle(pager, "visibility", "visible");
+        },
+
+        /**
+         * Set the correct tab index for the Carousel items.
+         *
+         * @method _updateTabIndex
+         * @param el {Object} The element to be focussed
+         * @protected
+         */
+        _updateTabIndex: function (el) {
+            var carousel = this;
+
+            if (el) {
+                if (carousel._focusableItemEl) {
+                    carousel._focusableItemEl.tabIndex = -1;
+                }
+                carousel._focusableItemEl = el;
+                el.tabIndex = 0;
+            }
+        },
+
+        /**
+         * Validate animation parameters.
+         *
+         * @method _validateAnimation
+         * @param cfg {Object} The animation configuration
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateAnimation: function (cfg) {
+            var rv = true;
+
+            if (JS.isObject(cfg)) {
+                if (cfg.speed) {
+                    rv = rv && JS.isNumber(cfg.speed);
+                }
+                if (cfg.effect) {
+                    rv = rv && JS.isFunction(cfg.effect);
+                } else if (!JS.isUndefined(YAHOO.util.Easing)) {
+                    cfg.effect = YAHOO.util.Easing.easeOut;
+                }
+            } else {
+                rv = false;
+            }
+
+            return rv;
+        },
+
+        /**
+         * Validate the firstVisible value.
+         *
+         * @method _validateFirstVisible
+         * @param val {Number} The first visible value
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateFirstVisible: function (val) {
+            var carousel = this, numItems = carousel.get("numItems");
+
+            if (JS.isNumber(val)) {
+                if (numItems === 0 && val == numItems) {
+                    return true;
+                } else {
+                    return (val >= 0 && val < numItems);
+                }
+            }
+
+            return false;
+        },
+
+        /**
+         * Validate and navigation parameters.
+         *
+         * @method _validateNavigation
+         * @param cfg {Object} The navigation configuration
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateNavigation : function (cfg) {
+            var i;
+
+            if (!JS.isObject(cfg)) {
+                return false;
+            }
+
+            if (cfg.prev) {
+                if (!JS.isArray(cfg.prev)) {
+                    return false;
+                }
+                for (i in cfg.prev) {
+                    if (cfg.prev.hasOwnProperty(i)) {
+                        if (!JS.isString(cfg.prev[i].nodeName)) {
+                            return false;
+                        }
+                    }
+                }
+            }
+
+            if (cfg.next) {
+                if (!JS.isArray(cfg.next)) {
+                    return false;
+                }
+                for (i in cfg.next) {
+                    if (cfg.next.hasOwnProperty(i)) {
+                        if (!JS.isString(cfg.next[i].nodeName)) {
+                            return false;
+                        }
+                    }
+                }
+            }
+
+            return true;
+        },
+
+        /**
+         * Validate the numItems value.
+         *
+         * @method _validateNumItems
+         * @param val {Number} The numItems value
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateNumItems: function (val) {
+            return JS.isNumber(val) && (val >= 0);
+        },
+
+        /**
+         * Validate the numVisible value.
+         *
+         * @method _validateNumVisible
+         * @param val {Number} The numVisible value
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateNumVisible: function (val) {
+            var rv = false;
+
+            if (JS.isNumber(val)) {
+                rv = val > 0 && val <= this.get("numItems");
+            } else if (JS.isArray(val)) {
+                if (JS.isNumber(val[0]) && JS.isNumber(val[1])) {
+                    rv = val[0] * val[1] > 0 && val.length == 2;
+                }
+            }
+
+            return rv;
+        },
+
+        /**
+         * Validate the revealAmount value.
+         *
+         * @method _validateRevealAmount
+         * @param val {Number} The revealAmount value
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateRevealAmount: function (val) {
+            var rv = false;
+
+            if (JS.isNumber(val)) {
+                rv = val >= 0 && val < 100;
+            }
+
+            return rv;
+        },
+
+        /**
+         * Validate the scrollIncrement value.
+         *
+         * @method _validateScrollIncrement
+         * @param val {Number} The scrollIncrement value
+         * @return {Boolean} The status of the validation
+         * @protected
+         */
+        _validateScrollIncrement: function (val) {
+            var rv = false;
+
+            if (JS.isNumber(val)) {
+                rv = (val > 0 && val < this.get("numItems"));
+            }
+
+            return rv;
+        }
+
+    });
+
+})();
+/*
+;;  Local variables: **
+;;  mode: js2 **
+;;  indent-tabs-mode: nil **
+;;  End: **
+*/
+YAHOO.register("carousel", YAHOO.widget.Carousel, {version: "2.8.1", build: "19"});