var TickerPaused = false;

Ext.ns("Ext.ux.plugins");

Ext.ux.plugins.Ticker = function(cfg) {
    Ext.apply(this, cfg);
};

Ext.ux.plugins.Ticker.prototype = {

    direction: 'left',

    init: function(cmp) {
        this.cmp = cmp;
        this.cmp.on({
            render: { fn: this.onRender, scope: this, delay: 30 },
            destroy: this.onDestroy,
            scope: this
        });
    },

    onDestroy: function() {
        if (this.task) {
            Ext.TaskMgr.stop(this.task);
        }
    },

    onRender: function() {
        var cmp = this.cmp;
        if (cmp.getXType() == 'panel') {
            this.el = cmp.body;
            this.contentEl = Ext.get(cmp.body.dom.firstChild);
        } else {
            if (!this.el) {
                this.el = this.cmp.el;
            }
        }
        var outerEl = this.el;

        // Default speed
        if (!this.speed) {
            this.speed = (this.direction == 'left' || this.direction == 'right') ? 2 : 1;
        }
        this.task = {
            interval: 30,
            scope: this
        }

        var posInfo;
        switch (this.direction) {
            case "left":
            case "right":
                posInfo = { left: cmp.width || outerEl.getWidth() };
                this.task.run = this.scroll.horz;
                break;
            case "up":
            case "down":
                posInfo = { top: outerEl.getHeight() };
                this.task.run = this.scroll.vert;
                break;
        }
        posInfo.position = 'relative';

        if (!this.contentEl) {
            if (this.html) {
                this.contentEl = outerEl.createChild({ tag: 'span', html: this.html, style: posInfo });
            } else {
                this.contentEl = cmp.body.el;
            }
        } else {
            if (typeof this.contentEl == 'string') {
                var ce = Ext.getDom(this.contentEl);
                outerEl.dom.appendChild(ce);
                this.contentEl = Ext.get(ce);
            }
            this.contentEl.setPositioning(posInfo);
        }
        this.contentEl.removeClass(['x-hidden', 'x-hide-display']);
        Ext.TaskMgr.start(this.task);
    },

    scroll: {
        horz: function() {
            var contentEl = this.contentEl;
            var left = contentEl.getLeft(true);
            var width = contentEl.getWidth();
            var outerWidth = this.el.getWidth();
            if (this.direction == 'left') {
                if (left <= -width) {
                    left = outerWidth;
                } else {
                    left -= this.speed;
                }
            } else {
                if (left >= outerWidth) {
                    left = -width;
                } else {
                    left += this.speed;
                }
            }
            contentEl.setLeft(left);
        },

        vert: function() {
			if(TickerPaused) return;
            var contentEl = this.contentEl;
            var top = contentEl.getTop(true);
            var height = contentEl.getHeight();
            if (this.direction == 'up') {
                if (top <= -height) {
                    top = this.el.getHeight(true);
                } else {
                    top -= this.speed;
                }
            } else {
                if (top >= height) {
                    top = -height;
                } else {
                    top += this.speed;
                }
            }
            contentEl.setTop(top);
        }
    }
}

Ext.ux.Ticker = function(cfg) {
    if (!cfg) {
        cfg = {};
    }
    var tickerCfg = { direction: cfg.direction, speed: cfg.speed, html: cfg.html, contentEl: cfg.contentEl };
    delete cfg.direction;
    delete cfg.speed;
    delete cfg.html;
    delete cfg.contentEl;

    if (!cfg.plugins) {
        cfg.plugins = [];
    }
    cfg.plugins.push(new Ext.ux.plugins.Ticker(tickerCfg));

    Ext.ux.Ticker.superclass.constructor.call(this, cfg);
};


Ext.extend(Ext.ux.Ticker, Ext.BoxComponent, {
    baseCls: 'x-ticker',
    direction: 'left',
    autoEl: {
        tag: 'div',
        cls: 'x-ticker-wrap'
    }
});

Ext.onReady(function() {
    //new Ext.ux.Ticker({width: 180, height: 200, speed: 1, renderTo: 'ticker', contentEl: 'tickerContent', direction: 'up' });
    var ticker = new Ext.Panel({ height: 200, width: 200, renderTo: 'ticker', contentEl: 'tickerContent', plugins: new Ext.ux.plugins.Ticker({ speed: 1, direction: 'up' }) });
	ticker = document.getElementById("ticker");
	if(ticker.addEventListener) {
		ticker.addEventListener('mouseover', function(){TickerPaused = true;},false);
		ticker.addEventListener('mouseout', function(){TickerPaused = false;},false);
	}
	else if(ticker.attachEvent){
		ticker.attachEvent('onmouseover',function(){TickerPaused = true;});
		ticker.attachEvent('onmouseout',function(){TickerPaused = false;});
	}
});