YUI().use('node', 'anim', function(Y) {
    var anim = new Y.Anim({
        node: '#banner .active',
        from: { 
            width: 0,
            left: 956
        },
        to : {
            width: 956,
            left: 0
        },
        duration: .2
    });
    
    //need to know which item is movin
    anim.on('start', function() {
        this.get('node').addClass('animating');
    });
    
    //clean up when we're done
    anim.on('end', function() {
        //remove active class & reset inline styles added by anim
        Y.get('#banner .active').removeClass('active').setStyles({ 'width' : 'auto', 'left' : '-999em' });
        
        //make freshly moved node the "active" one
        this.get('node').replaceClass('animating', 'active');
        
        //hide previous quote (if exists)
        var old = Y.get("#banner .active .promo li.current");
        if(old) {
            old.removeClass('current');
            old = null;
        }
        
        //show new random quote
        var quotes = Y.all("#banner .active .promo li");
        if(quotes.size()) {
            quotes.item(Math.floor(Math.random() * quotes.size())).addClass('current');
            quotes = null;
        }
    });
    
    Y.on('click', function(e) {
        e.preventDefault();
        
        if(!e.target.hasClass('active')) {
            anim.stop();
            
            //set next banner based off of click target
            anim.set('node', Y.get('#' + e.target.get('id').split('_')[0]));
            anim.run();
            
            //move selection target on game nav to new game
            Y.get('#nav li a.active').removeClass('active');
            e.target.addClass('active');
        }
    }, '#nav li a');
});