gistfile1.js

YUI.add('chiclet', function(Y) {
    function Chiclet(config) {
        Chiclet.superclass.constructor.apply(this, arguments);
    }
    
    Y.mix(Chiclet, {
        //YUI ATTRS
        NAME : "Chiclet",
        ATTRS : {
            speed : { value : .4 },
            images : { value : [] },
            easing : { value : Y.Easing.easeIn },
            delay : { value : 15000 },
            deferredClass : { value : "deferred" }
        },
        HTML_PARSER : {
            images : ["ul li a"]
        },
        
        //CUSTOM ATTRS
        BIG_WIDTH : 200,
        PX : "px",
        ACTIVE_CLASS : "active"
    });

    Y.extend(Chiclet, Y.Widget, { 
        //My Methods
        _move : function(pos) {
            var left = 0,
                activeClass = Chiclet.ACTIVE_CLASS;
            
            this._nodes.a.removeClass(activeClass);
            this._nodes.a.item(pos).addClass(activeClass);
            
            //calculate new pos
            this._nodes.images.each(function(node, n) {
                if(n < pos) {
                    left += parseInt(node.getStyle("width"), 10);
                }
            });
            
            if(!this._anim) {
                this._anim = new Y.Anim({
                    node : this._list,
                    duration : this.get("speed"),
                    easing : this.get("easing")
                });
                
                this._anim.on('end', function() {
                    this._timerSetup();
                }, this);
            }
            
            if(this._anim.get('running')) {
                this._anim.stop();
            }
            
            this._anim.set("to", { left : "-" + left + "px" }); 
            
            this._anim.run();
            
            this._timer.cancel();
        },
        
        _click : function(e) {
            e.preventDefault();
            
            this._tick(this._nodes.a.indexOf(e.target));
            
            return false;
        },
        
        _timerSetup : function() {
            var pos = this._nodes.a.indexOf(this.get("contentBox").one("." + Chiclet.ACTIVE_CLASS)) + 1;
            
            pos = (pos >= this._nodes.a.size()) ? 0 : pos;
            
            this._timer = Y.later(this.get("delay"), this, this._tick, pos, true);
        },
        
        //remove deferred loading class
        _tick : function(pos) {
            var deferred = this.get("deferredClass");
            
            this._nodes.images.each(function(n, p) {
                if(p <= pos) {
                    this.removeClass(deferred);
                }
            });
            
            this._move(pos);
        },
        
        //YUI3 Widget Methods
        initializer : function(config) {
            //cached dom nodes
            this._nodes = {
                a : null,
                list : null,
                images : null
            };
            
            this._anim = null;
        },
        
        destructor : function() {
            this._nodes.a = null;
            this._nodes.images = null;
            this._nodes = null;
            this._anim = null;
        },
        
        renderUI : function() {
            var cb = this.get("contentBox"),
                images = this.get("images"),
                control;
            
            images.item(0).removeClass(this.get("deferredClass"));
            
            cb.setStyles({ 
                "width" : parseInt(images.item(0).getStyle("width"), 10) + Chiclet.PX, 
                "height" : parseInt(images.item(0).getStyle("height"), 10) + Chiclet.PX 
            });
            cb.one("ul")
                .addClass(this.getClassName("items"))
                .setStyle("width", Math.max(parseInt(cb.getStyle("width"), 10) * images.size(), Chiclet.BIG_WIDTH) + Chiclet.PX);
            
            cb.append("<div class='" + this.getClassName("control") + "'></div>");
            control = cb.one("div." + this.getClassName("control"));
            control.setStyle("visibility", "hidden");
            
            images.each(function() {
                control.append("<a class='ib' href='#'>&nbsp;</a>");
            });
            
            control.one('a').addClass(Chiclet.ACTIVE_CLASS);
            
            //slightly complicated way to center the UL because it has to take padding into account
            control.setStyle(
                "marginLeft", 
                "-" + ((Math.floor(parseInt(control.getStyle("width"), 10) / 2)) + (Math.floor((parseInt(control.getStyle("paddingLeft"), 10) + parseInt(control.getStyle("paddingRight"), 10)) / 2 ))) + Chiclet.PX
            );
            
            control.setStyle("visibility", "visible");
            
            //fill up our cache with sutff!
            this._nodes.images = images;
            this._nodes.a = control.all('a');
            this._list = cb.one("." + this.getClassName("items"));
            
            //start up the timer
            this._timerSetup();
        },
        
        bindUI : function() {
            var cb = this.get("contentBox"),
                control = cb.one("." + this.getClassName("control"));
            
            Y.delegate("click", this._click, control, "a", this);
        }
    });
    
    Y.Chiclet = Chiclet;
    
}, "0.1" , { requires: ["widget", "anim-base", "anim-easing"] });