Mouse Tail Plugin

mouseTail

(function() {
    var mouseEffects = new function() {
        var tiles = [];
        var body = document.getElementsByTagName('body')[0];

        this.init = function(config) {
            var split;
            if (config.text) {
                split = config.text.split('');
                console.log('split: ', split);
            }

            var container = document.createElement('div');
            container.id = 'mt_tiles_container';
            container.style.fontSize = '18px';

            for (var i = 0; i < config.max; i++) {
                var tile = document.createElement('div');
                tile.id = 'mt_tile_' + i;

                tile.style.width = config.width + 'px';
                tile.style.height = config.height + 'px';
                if (config.blink) {
                    tile.style.color = this.randColor();
                } else {
                    tile.style.backgroundColor = this.randColor();
                }
                tile.style.position = 'absolute';
                tile.style.zIndex = 2000;

                if (split) {
                    if (split.length === 1) {
                        // Should repeat the same char across all the elements in the trail
                        this.setText(tile, split[0]);
                    } else if (split.length < config.max) {
                        var txt = split[i];
                        if (txt) {
                            this.setText(tile, txt);
                        } else {
                            break;
                        }
                    }
                }

                tiles.push(tile);

                // insertFirstChild
                container.insertBefore(tile, container.firstChild);
            }

            if (tiles && tiles.length) {
                // insertLastChild
                body.appendChild(container);

                this.bindMouseMove(config);
            }
        };


        this.randColor = function() {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        };


        this.fixPageXY = function(e) {
            e = e || window.event;

            // This should only run for IE<9
            if (e.pageX == null && e.clientX != null ) {
                var html = document.documentElement;

                e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
                e.pageX -= html.clientLeft || 0;

                e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
                e.pageY -= html.clientTop || 0;
            }
        };


        this.bindMouseMove = function(config) {
            var namespace = this;

            var move = function(tile, x, y, interval) {
                setTimeout(function() {
                    tile.style.left = x + 'px';
                    tile.style.top = y + 'px';

                    if (config.blink) {
                        tile.style.color = namespace.randColor();
                    } else {
                        tile.style.backgroundColor = namespace.randColor();
                    }
                }, interval);
            };

            var handler = function(e) {
                // Fix for older IE
                namespace.fixPageXY(e);

                for (var i = 0, l = tiles.length; i < l; i++) {
                    var tileInterval = config.interval + (config.step * i);
                    move(tiles[i], e.pageX, e.pageY, tileInterval);
                }
            }

            this.bindEvent(window, 'mousemove', handler);
        };


        this.bindEvent = function(node, e, handler) {
            if (node.addEventListener) {
                node.addEventListener(e, handler, false);
            } else if (node.attachEvent) {
                node.attachEvent('on' + e, handler);
            }
        };


        this.setText = function(node, text) {
            node.innerText = node.textContent = text;
        };
    };


    // Bind to a clickzone with the href of #mouseEffects
    var clickzones = document.getElementsByTagName('area');
    for (var i = 0, l = clickzones.length; i < l; i++) {
        var cz = clickzones[i];
        var href = cz.getAttribute('href');
        if (href === '#mouseEffects') {
            mouseEffects.bindEvent(cz, 'click', function(e) {
                e.preventDefault();

                /****** Configure the action here ******/
                mouseEffects.init({
                    max: 100,
                    width: 20,
                    height: 20,
                    interval: 180,
                    step: 50,
                    text: 'Personalize now',
                    blink: true
                });
                /***************************************/
            });
        }
    }
}());