Swim Away!

swimAway.js

var swimAway = function(radius) {
    clones = [];
    var startRunning = function() {
        elements = Array.prototype.slice.call(document.querySelectorAll('a, button, input'));

        makePlaceholders(elements);

        document.body.onmousemove = function(e) {
            var mouseX = e.pageX;
            var mouseY = e.pageY;

            evade(mouseX, mouseY);
        };
    };


    var getPos = function(el) {
        for (var lx = 0, ly = 0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
        return {
            x: lx,
            y: ly
        };
    };

    var evade = function(mouseX, mouseY) {
        for (var i = 0; i < clones.length; i++) {
            var element = clones[i];
            var coords = getPos(element);
            var x = coords.x;
            var y = coords.y;
            //check if we're within the acceptable radius
            if (distance(x, y, mouseX, mouseY) <= radius) {
                if (y > mouseY) {
                    y = Math.min(y + Math.sqrt((Math.abs(mouseY - y))), document.body.clientHeight);
                } else {
                    y = Math.max(y - Math.sqrt((Math.abs(mouseY - y))), 0);
                }

                if (x > mouseX) {
                    x = Math.min(x + Math.sqrt((Math.abs(mouseX - x))), document.body.clientHeight);
                } else {
                    x = Math.max(x - Math.sqrt((Math.abs(mouseX - x))), 0);
                }

                element.style.top = y + 'px';
                element.style.left = x + 'px';
            }
        }
    };


    //distance formula
    var distance = function(x1, y1, x2, y2) {
        return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    };

    var makePlaceholders = function(nodes) {
        //add CSS
        var elementStyles = '.monetate_placeholder_wrap { ' +
            'display: inline-block; width: auto !important; margin: 0 !important; ' +
            'padding: 0 !important; position: relative; }' +
            '.monetate_placeholder_dup { display: inline-block; position: absolute !important; left: 0px; top: 0px}';

        var head = document.head;
        var e = document.createElement('style');
        e.setAttribute('type', 'text/css');
        if (e.styleSheet) { //IE
            e.styleSheet.cssText = elementStyles;
        } else { //EVERYONE ELSE
            var stl = document.createTextNode(elementStyles);
            e.appendChild(stl);
        }
        head.appendChild(e);

        // Clone found node, add classes to both, hide original.
        for (var i = 0; i < nodes.length; i++) {
            var origNode = nodes[i];
            var clonedNode = origNode.cloneNode(true);
            origNode.className += ' monetate_placeholder_hide';
            clonedNode.className += ' monetate_placeholder_dup';
            origNode.style.visibility = 'hidden';

            // Add a wrapper node as previous sibling to found node.
            var wrapper = document.createElement('div');
            wrapper.className = 'monetate_placeholder_wrap';
            origNode.parentNode.insertBefore(wrapper, origNode);

            // Add hidden original node and new cloned version to the wrapper.
            wrapper.appendChild(origNode);

            var coords = getPos(origNode);
            if (coords.x !== 0 && coords.y !== 0) {
                clonedNode.style.top = coords.y + 'px';
                clonedNode.style.left = coords.x + 'px';
                clonedNode.style.position = 'absolute';

                document.body.appendChild(clonedNode);

                clones.push(clonedNode);
            }
        }

    };
    startRunning();
};

// Bind to a clickzone with the href of #swimAway- only for use when delivered via Monetate.
// Otherwise, just call swimAway(200)
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 === '#swimAway') {
        cz.onclick = function() {
            swimAway(200);
        };
    }
}