gistfile1.js

window.olx        = window.olx || {};
window.olx.Ticker = (function(document, window, undefined) {
    var Backbone  = window.Backbone,
        $g        = window.jQuery;

    var TickerComponent = Backbone.View.extend({
        events : {
            'keydown' : 'onKeydown',
            'blur'    : 'onKeydown'
        },

        // cache the ticker's width. we can probably assume
        // it will be 140, but this value is made accurate 
        // when the view is initialized
        width: 140, 

        initialize: function() {
            var width = this.$el.width();
            if(width)
                this.width = width;
        },

        animate: function() {
            var el       = this.$el;
            var tags     = el.attr('data-tags').split(',');
            var interval = (Math.floor( Math.random() * 3 ) + 1) * 1000;

            setInterval(function() {
                if(!el.is(':focus'))
                    el.attr('placeholder', tags[ Math.floor(Math.random() * tags.length) ]);
            }, interval);
        },

        onKeydown: function(ev) {
            // don't do anything on smaller screens
            if($g(window).width() < 480) return;

            var el       = this.$el;
            var length   = this.width - 30 + (el.val().length * 8);
            el.width(Math.max(this.width, Math.min(length, 300)));
        }
    });

    $(function() {
        $g('input.ticker').each(function() {
            (new TickerComponent({el: $(this) })).animate();
        });
    });

    return {};
}(document, window));