gistfile1.js

YUI.add('plugin-panorama', function(Y){

    var TRIGGER_CLASS = '.item';

    Y.namespace('Plugin').Panorama = Y.Base.create('panorama', Y.Plugin.Base, [], {
    
        _host : null,
    
        _mouseMove : null,
        
        _timer : null,
        
        _timerTimer : null,
        
        _windowResize : null,
        
        _bannerWidth : 0,
        
        _paused : false,
        
        _cursor : null,
      
        _cursorText : null,
        
        _screenWidth : null,
      
        _pos : [0,0],
        
        initializer : function(config) {
            Y.log('initializer', 'info','Y.Plugin.Banner');
            
            this._host = this.get('host');
            this._timer = new Y.Timer({ length: 50 });
            
            this._bannerWidth = config.bannerWidth || 2970;
            this._pos = config.pos || [0,0];
            
            this.renderUI();
            this.bindUI();
            this.syncUI();
        },
        
        renderUI : function() {
        
        /** removing custom cursor
            this._cursor = Y.Node.create('<span class="cursorWrapper"><span class="cursor" /><span class="text"></span></span>');
            this._cursorText = this._cursor.one('.text');
            this._host.prepend(this._cursor);
        **/
            
            this._screenWidth = Y.DOM.winWidth();
        
            this._host.all(TRIGGER_CLASS).each(function(node){
                node.setData('left', parseFloat(node.getStyle('left')));
            });
        },
        
        bindUI : function() {
            Y.log('bindUI', 'info', 'Y.Plugin.Banner');
            this._mouseMove = this._host.on('mousemove', this._onMouseMove, this);
            this._mouseEnter = this._host.on('mouseenter', this._onMouseEnter, this);
            this._mouseLeave = this._host.on('mouseleave', this._onMouseLeave, this);
            this._timerTimer = this._timer.on('timer:timer', this._updateBanner, this);
            
            this._windowResize = Y.on('windowresize', this._onResize, this);
            
            this._host.delegate('mouseenter', this._triggerEnter, TRIGGER_CLASS, this);
            this._host.delegate('mouseleave', this._triggerLeave, TRIGGER_CLASS, this);
            this._host.delegate('click', this._triggerClick, TRIGGER_CLASS, this);
            this._host.delegate('click', this._calloutClick, '.callout', this);
        },
        
        syncUI : function() {
        
            this._host.once('mousemove', function(e){
                this._onMouseEnter();
            }, this);
            
            if (this.get('autostart')) {
                this._timer.start();
            }
            
        },
        
        _onMouseMove : function(e) {
            //Y.log('_onMouseMove', 'info', 'Y.Plugin.Banner');
            var width = this._host.get('offsetWidth'),
                delta = width / 2 - ( width - e.pageX ),
                direction = this.get('direction'), speed;
            
            if (delta < 0 && direction !== -1) {
                this.set('direction', -1);
            } else if (delta > 0 && direction !== 1) {
                this.set('direction', 1);
            } else if (delta === 0 && direction !== 0) {
                this.set('direction', 0);
            }
            
            speed = Math.abs(delta) / (width / 2);
            this.set('speed', speed);
            
            /** removing custom cursor
            this._cursor.setX(e.pageX);
            this._cursor.setY(e.pageY);
            **/
        
        },
        
        _onMouseEnter : function(e) {
            Y.log('_onMouseEnter', 'info', 'Y.Plugin.Banner');
            
            if (!this._paused) {
                this._timer.start();
            }
            
            if (!this._host.hasClass('target')) {
                this._host.addClass('cursor');
            }
        },
        
        _onMouseLeave : function(e) {
            Y.log('_onMouseLeave', 'info', 'Y.Plugin.Banner');
            if (!this._paused) {
                this._timer.stop();
            }
            
            this._host.removeClass('cursor');
        },
        
        _onResize : function(e) {
            Y.log('_onResize', 'info', 'Y.Plugin.Banner');
            this._screenWidth = Y.DOM.winWidth();
        },
        
        _triggerEnter : function(e) {
        /** removing custom cursor
            this._cursor.one('.cursor').addClass('target');
            this._cursorText.set('text', 'Click for ' + e.currentTarget.get('text'));
        **/    
        },
        
        _triggerLeave : function(e) {
        /** removing custom cursor
            this._cursor.one('.cursor').removeClass('target');
        **/
        },
        
        _triggerClick : function(e) {
            Y.log('_triggerClick', 'info', 'Y.Plugin.Banner');
            this._host.one('#' + e.target.getAttribute('target')).setStyle('display', 'block');
            this._timer.pause();
            this._paused = true;
            this._host.removeClass('cursor');
            this._host.addClass('target');
        },
        
        _calloutClick : function(e) {
            Y.log('_calloutClick', 'info', 'Y.Plugin.Banner');
            e.currentTarget.setStyle('display','none');
            this._timer.resume();
            this._paused = false;
            this._host.addClass('cursor');
            this._host.removeClass('target');
        },
        
        
        _updateBanner : function(e) {
           // Y.log('_updateBanner', 'info', 'Y.Plugin.Banner');
          
            var base = this.get('base'),
                speed = this.get('speed'), 
                direction = this.get('direction'), 
                width = this._host.get('offsetWidth'),
                pos = this._pos,
                curX = parseFloat(pos[0], 10), newX = 0, offScreen, rightCheck;

            newX = base * speed * -direction + curX;
            
            pos[0] = Math.floor(newX) + 'px';
            
            offScreen = (newX % this._bannerWidth);
            
            rightCheck = offScreen - this._screenWidth + this._bannerWidth;
            
            this._host.all(TRIGGER_CLASS).each(function(node) {
                var left = node.getData('left'),  l;
                
                if (isNaN(left)) {
                    left = 0;
                }
                
                l = left + offScreen;
                
                if (offScreen + left + node.get('offsetWidth') > this._bannerWidth) {
                    l = left - (this._bannerWidth - offScreen);
                } else if (left > rightCheck && rightCheck < 0 && left < this._screenWidth) {
                    l = left + (rightCheck + this._screenWidth);
                }
                
                
                node.setStyle('left', Math.floor(l) );
            }, this);
            
            this._host.setStyle('backgroundPosition', pos.join(' '));
            this._pos = pos;
        }
        
    }, {
        NS : 'panorama',
        ATTRS : {
            direction : {
                value : 0
            },
            
            speed : {
                value : 0
            },
            
            base : {
                value : 10
            },
            autostart : {
                value : false
            }
        }
    });

}, '0.1', {requires : ['plugin','base-build','event','node','gallery-timer','event-mouseenter']});