vivagraph.js

/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */
var Viva = Viva || {};

Viva.Graph = Viva.Graph || {};
if (typeof module !== 'undefined' && module.exports) {
    module.exports = Viva;
}
Viva.Graph.version = '0.4.1';
/** 
 * Extends target object with given fields/values in the options object.
 * Unlike jQuery's extend this method does not override target object
 * properties if their type matches corresponding type in the options object
 */
Viva.lazyExtend = function (target, options) {
    var key;
    if (!target) { target = {}; }
    if (options) {
        for (key in options) {
            if (options.hasOwnProperty(key)) {
                var targetHasIt = target.hasOwnProperty(key),
                    optionsValueType = typeof options[key],
                    shouldReplace = !targetHasIt || (typeof target[key] !== optionsValueType);

                if (shouldReplace) {
                    target[key] = options[key];
                } else if (optionsValueType === 'object') {
                    // go deep, don't care about loops here, we are simple API!:
                    target[key] = Viva.lazyExtend(target[key], options[key]);
                }
            }
        }
    }

    return target;
};
/**
 * Implenetation of seeded pseudo random number generator, based on LFIB4 algorithm.
 *
 * Usage example:
 *  var random = Viva.random('random seed', 'can', 'be', 'multiple strings'),
 *      i = random.next(100); // returns random number from [0 .. 100) range.
 */

Viva.random = function () {
    // From http://baagoe.com/en/RandomMusings/javascript/
    function getMash() {
        var n = 0xefc8249d;

        var mash = function (data) {
            var i;
            data = data.toString();
            for (i = 0; i < data.length; i++) {
                n += data.charCodeAt(i);
                var h = 0.02519603282416938 * n;
                n = h >>> 0;
                h -= n;
                h *= n;
                n = h >>> 0;
                h -= n;
                n += h * 0x100000000; // 2^32
            }
            return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
        };

        mash.version = 'Mash 0.9';
        return mash;
    }

    function LFIB4(args) {
        return (function (args) {
            // George Marsaglia's LFIB4,
            //http://groups.google.com/group/sci.crypt/msg/eb4ddde782b17051
            var k0 = 0,
                k1 = 58,
                k2 = 119,
                k3 = 178,
                j,
                i,
                s = [],
                mash = getMash();

            if (args.length === 0) {
                args = [+new Date()];
            }

            for (j = 0; j < 256; j++) {
                s[j] = mash(' ');
                s[j] -= mash(' ') * 4.76837158203125e-7; // 2^-21
                if (s[j] < 0) {
                    s[j] += 1;
                }
            }

            for (i = 0; i < args.length; i++) {
                for (j = 0; j < 256; j++) {
                    s[j] -= mash(args[i]);
                    s[j] -= mash(args[i]) * 4.76837158203125e-7; // 2^-21
                    if (s[j] < 0) {
                        s[j] += 1;
                    }
                }
            }

            mash = null;

            var random = function () {
                var x;

                k0 = (k0 + 1) & 255;
                k1 = (k1 + 1) & 255;
                k2 = (k2 + 1) & 255;
                k3 = (k3 + 1) & 255;

                x = s[k0] - s[k1];
                if (x < 0) {
                    x += 1;
                }
                x -= s[k2];
                if (x < 0) {
                    x += 1;
                }
                x -= s[k3];
                if (x < 0) {
                    x += 1;
                }

                s[k0] = x;
                return x;
            };

            random.uint32 = function () {
                return random() * 0x100000000 >>> 0; // 2^32
            };
            random.fract53 = random;
            random.version = 'LFIB4 0.9';
            random.args = args;

            return random;
        }(args));
    }

    var randomFunc = new LFIB4(Array.prototype.slice.call(arguments));

    return {
        /**
         * Generates random integer number in the range from 0 (inclusive) to maxValue (exclusive)
         *
         * @param maxValue is REQUIRED. Ommitit this numbe will result in NaN values from PRNG.
         */
        next : function (maxValue) {
            return Math.floor(randomFunc() * maxValue);
        },

        /**
         * Generates random double number in the range from 0 (inclusive) to 1 (exclusive)
         * This function is the same as Math.random() (except that it could be seeded)
         */
        nextDouble : function () {
            return randomFunc();
        }
    };
};

/**
 * Iterates over array in arbitrary order. The iterator modifies actual array content.
 * It's based on modern version of Fisher–Yates shuffle algorithm.
 *
 * @see http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
 *
 * @param array to be shuffled
 * @param random - a [seeded] random number generator to produce same sequences. This parameter
 * is optional. If you don't need determenistic randomness keep it blank.
 */
Viva.randomIterator = function (array, random) {
    random = random || Viva.random();

    return {
        forEach : function (callback) {
            var i, j, t;
            for (i = array.length - 1; i > 0; --i) {
                j = random.next(i + 1); // i inclusive
                t = array[j];
                array[j] = array[i];
                array[i] = t;

                callback(t);
            }

            if (array.length) {
                callback(array[0]);
            }
        },

        /**
         * Shuffles array randomly.
         */
        shuffle : function () {
            var i, j, t;
            for (i = array.length - 1; i > 0; --i) {
                j = random.next(i + 1); // i inclusive
                t = array[j];
                array[j] = array[i];
                array[i] = t;
            }

            return array;
        }
    };
};
Viva.BrowserInfo = (function () {
    if (typeof window === "undefined" || !window.hasOwnProperty("navigator")) {
        return {
            browser : "",
            version : "0"
        };
    }

    var ua = window.navigator.userAgent.toLowerCase(),
        // Useragent RegExp
        rwebkit = /(webkit)[ \/]([\w.]+)/,
        ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
        rmsie = /(msie) ([\w.]+)/,
        rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
        match = rwebkit.exec(ua) ||
                ropera.exec(ua) ||
                rmsie.exec(ua) ||
                (ua.indexOf("compatible") < 0 && rmozilla.exec(ua)) ||
                [];

    return {
        browser: match[1] || "",
        version: match[2] || "0"
    };
}());
/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.Utils = Viva.Graph.Utils || {};

Viva.Graph.Utils.indexOfElementInArray = function (element, array) {
    if (array.indexOf) {
        return array.indexOf(element);
    }

    var len = array.length,
        i;

    for (i = 0; i < len; i += 1) {
        if (array.hasOwnProperty(i) && (array[i] === element)) {
            return i;
        }
    }

    return -1;
};
Viva.Graph.Utils = Viva.Graph.Utils || {};

Viva.Graph.Utils.getDimension = function (container) {
    if (!container) {
        throw {
            message : 'Cannot get dimensions of undefined container'
        };
    }

    // TODO: Potential cross browser bug.
    var width = container.clientWidth;
    var height = container.clientHeight;

    return {
        left : 0,
        top : 0,
        width : width,
        height : height
    };
};

/**
 * Finds the absolute position of an element on a page
 */
Viva.Graph.Utils.findElementPosition = function (obj) {
    var curleft = 0,
        curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while ((obj = obj.offsetParent) !== null);
    }

    return [curleft, curtop];
};/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.Utils = Viva.Graph.Utils || {};

// TODO: I don't really like the way I implemented events. It looks clumsy and
// hard to understand. Refactor it.

// TODO: This is really painful. Please don't use this class anymore, I will
// definitely depricate it or update its interface.

/**
 * Allows to start/stop listen to element's events. An element can be arbitrary
 * DOM element, or object with eventuality behavior.
 *
 * To add eventuality behavior to arbitrary object 'obj' call
 * Viva.Graph.Utils.event(obj).extend() method.
 * After this call is made the object can use obj.fire(eventName, params) method, and listeners
 * can listen to event by Viva.Graph.Utils.events(obj).on(eventName, callback) method.
 */
Viva.Graph.Utils.events = function (element) {

    /**
     * Extends arbitrary object with fire method and allows it to be used with on/stop methods.
     *
     * This behavior is based on Crockford's eventuality example, but with a minor changes:
     *   - fire() method accepts parameters to pass to callbacks (instead of setting them in 'on' method)
     *   - on() method is replaced with addEventListener(), to let objects be used as a DOM objects.
     *   - behavoir contract is simplified to "string as event name"/"function as callback" convention.
     *   - removeEventListener() method added to let unsubscribe from events.
     */
    var eventuality = function (that) {
        var registry = {};

        /**
         * Fire an event on an object. The event is a string containing the name of the event
         * Handlers registered by the 'addEventListener' method that match the event name
         * will be invoked.
         */
        that.fire = function (eventName, parameters) {
            var registeredHandlers,
                callback,
                handler,
                i;

            if (typeof eventName !== "string") {
                throw "Only strings can be used as even type";
            }

            // If an array of handlers exist for this event, then
            // loop through it and execute the handlers in order.
            if (registry.hasOwnProperty(eventName)) {
                registeredHandlers = registry[eventName];
                for (i = 0; i < registeredHandlers.length; ++i) {
                    handler = registeredHandlers[i];
                    callback = handler.method;
                    callback(parameters);
                }
            }

            return this;
        };

        that.addEventListener = function (eventName, callback) {
            if (typeof callback !== "function") {
                throw "Only functions allowed to be callbacks";
            }

            var handler = {
                method: callback
            };
            if (registry.hasOwnProperty(eventName)) {
                registry[eventName].push(handler);
            } else {
                registry[eventName] = [handler];
            }

            return this;
        };

        that.removeEventListener = function (eventName, callback) {
            if (typeof callback !== "function") {
                throw "Only functions allowed to be callbacks";
            }

            if (registry.hasOwnProperty(eventName)) {
                var handlers = registry[eventName],
                    i;

                for (i = 0; i < handlers.length; ++i) {
                    if (handlers[i].callback === callback) {
                        handlers.splice(i);
                        break;
                    }
                }
            }

            return this;
        };

        that.removeAllListeners = function () {
            var eventName;
            for (eventName in registry) {
                if (registry.hasOwnProperty(eventName)) {
                    delete registry[eventName];
                }
            }
        };

        return that;
    };

    return {
        /**
         * Registes callback to be called when element fires event with given event name.
         */
        on : function (eventName, callback) {
            if (element.addEventListener) {// W3C DOM and eventuality objecets.
                element.addEventListener(eventName, callback, false);
            } else if (element.attachEvent) { // IE DOM
                element.attachEvent("on" + eventName, callback);
            }

            return this;
        },

        /**
         * Unsubcribes from object's events.
         */
        stop : function (eventName, callback) {
            if (element.removeEventListener) {
                element.removeEventListener(eventName, callback, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + eventName, callback);
            }
        },

        /**
         * Adds eventuality to arbitrary JavaScript object. Eventuality adds
         * fire(), addEventListner() and removeEventListners() to the target object.
         *
         * This is required if you want to use object with on(), stop() methods.
         */
        extend : function () {
            return eventuality(element);
        }
    };
};/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.Utils = Viva.Graph.Utils || {};

// TODO: Move to input namespace
// TODO: Methods should be extracted into the prototype. This class
// does not need to consume so much memory for every tracked element
Viva.Graph.Utils.dragndrop = function (element) {
    var start,
        drag,
        end,
        scroll,
        prevSelectStart,
        prevDragStart,
        documentEvents = Viva.Graph.Utils.events(window.document),
        elementEvents = Viva.Graph.Utils.events(element),
        findElementPosition = Viva.Graph.Utils.findElementPosition,

        startX = 0,
        startY = 0,
        dragObject,
        touchInProgress = false,
        pinchZoomLength = 0,

        getMousePos = function (e) {
            var posx = 0,
                posy = 0;

            e = e || window.event;

            if (e.pageX || e.pageY) {
                posx = e.pageX;
                posy = e.pageY;
            } else if (e.clientX || e.clientY) {
                posx = e.clientX + window.document.body.scrollLeft + window.document.documentElement.scrollLeft;
                posy = e.clientY + window.document.body.scrollTop + window.document.documentElement.scrollTop;
            }

            return [posx, posy];
        },

        move = function (e, clientX, clientY) {
            if (drag) {
                drag(e, {x : clientX - startX, y : clientY - startY });
            }

            startX = clientX;
            startY = clientY;
        },

        stopPropagation = function (e) {
            if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }
        },
        preventDefault = function (e) {
            if (e.preventDefault) { e.preventDefault(); }
        },

        handleDisabledEvent = function (e) {
            stopPropagation(e);
            return false;
        },

        handleMouseMove = function (e) {
            e = e || window.event;

            move(e, e.clientX, e.clientY);
        },

        handleMouseDown = function (e) {
            e = e || window.event;
            if (touchInProgress) {
                // modern browsers will fire mousedown for touch events too
                // we do not want this, since touch is handled separately.
                stopPropagation(e);
                return false;
            }
            // for IE, left click == 1
            // for Firefox, left click == 0
            var isLeftButton = ((e.button === 1 && window.event !== null) || e.button === 0);

            if (isLeftButton) {
                startX = e.clientX;
                startY = e.clientY;

                // TODO: bump zIndex?
                dragObject = e.target || e.srcElement;

                if (start) { start(e, {x: startX, y : startY}); }

                documentEvents.on('mousemove', handleMouseMove);
                documentEvents.on('mouseup', handleMouseUp);


                stopPropagation(e);
                // TODO: What if event already there? Not bullet proof:
                prevSelectStart = window.document.onselectstart;
                prevDragStart = window.document.ondragstart;

                window.document.onselectstart = handleDisabledEvent;
                dragObject.ondragstart = handleDisabledEvent;

                // prevent text selection (except IE)
                return false;
            }
        },

        handleMouseUp = function (e) {
            e = e || window.event;

            documentEvents.stop('mousemove', handleMouseMove);
            documentEvents.stop('mouseup', handleMouseUp);

            window.document.onselectstart = prevSelectStart;
            dragObject.ondragstart = prevDragStart;
            dragObject = null;
            if (end) { end(e); }
        },

        handleMouseWheel = function (e) {
            if (typeof scroll !== 'function') {
                return;
            }

            e = e || window.event;
            if (e.preventDefault) {
                e.preventDefault();
            }

            e.returnValue = false;
            var delta,
                mousePos = getMousePos(e),
                elementOffset = findElementPosition(element),
                relMousePos = {
                    x: mousePos[0] - elementOffset[0],
                    y: mousePos[1] - elementOffset[1]
                };

            if (e.wheelDelta) {
                delta = e.wheelDelta / 360; // Chrome/Safari
            } else {
                delta = e.detail / -9; // Mozilla
            }

            scroll(e, delta, relMousePos);
        },

        updateScrollEvents = function (scrollCallback) {
            if (!scroll && scrollCallback) {
                // client is interested in scrolling. Start listening to events:
                if (Viva.BrowserInfo.browser === 'webkit') {
                    element.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
                } else {
                    element.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
                }
            } else if (scroll && !scrollCallback) {
                if (Viva.BrowserInfo.browser === 'webkit') {
                    element.removeEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
                } else {
                    element.removeEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
                }
            }

            scroll = scrollCallback;
        },

        getPinchZoomLength = function(finger1, finger2) {
            return (finger1.clientX - finger2.clientX) * (finger1.clientX - finger2.clientX) +
                   (finger1.clientY - finger2.clientY) * (finger1.clientY - finger2.clientY);
        },

        handleTouchMove = function (e) {
            if (e.touches.length === 1) {
                stopPropagation(e);

                var touch = e.touches[0];
                move(e, touch.clientX, touch.clientY);
            } else if (e.touches.length === 2) {
                // it's a zoom:
                var currentPinchLength = getPinchZoomLength(e.touches[0], e.touches[1]);
                var delta = 0;
                if (currentPinchLength < pinchZoomLength) {
                    delta = -1;
                } else if (currentPinchLength > pinchZoomLength) {
                    delta = 1;
                }
                scroll(e, delta, {x: e.touches[0].clientX, y: e.touches[0].clientY});
                pinchZoomLength = currentPinchLength;
                stopPropagation(e);
                preventDefault(e);
            }
        },

        handleTouchEnd = function (e) {
            touchInProgress = false;
            documentEvents.stop('touchmove', handleTouchMove);
            documentEvents.stop('touchend', handleTouchEnd);
            documentEvents.stop('touchcancel', handleTouchEnd);
            dragObject = null;
            if (end) { end(e); }
        },

        handleSignleFingerTouch = function (e, touch) {
            stopPropagation(e);
            preventDefault(e);

            startX = touch.clientX;
            startY = touch.clientY;

            dragObject = e.target || e.srcElement;

            if (start) { start(e, {x: startX, y : startY}); }
            // TODO: can I enter into the state when touch is in progress
            // but it's still a single finger touch?
            if (!touchInProgress) {
                touchInProgress = true;
                documentEvents.on('touchmove', handleTouchMove);
                documentEvents.on('touchend', handleTouchEnd);
                documentEvents.on('touchcancel', handleTouchEnd);
            }
        },

        handleTouchStart = function (e) {
            console.log('Touch start for ', element);
            if (e.touches.length === 1) {
                return handleSignleFingerTouch(e, e.touches[0]);
            } else if (e.touches.length === 2) {
                // handleTouchMove() will care about pinch zoom.
                stopPropagation(e);
                preventDefault(e);

                pinchZoomLength = getPinchZoomLength(e.touches[0], e.touches[1]);

            }
            // don't care about the rest.
        };


    elementEvents.on('mousedown', handleMouseDown);
    elementEvents.on('touchstart', handleTouchStart);

    return {
        onStart : function (callback) {
            start = callback;
            return this;
        },

        onDrag : function (callback) {
            drag = callback;
            return this;
        },

        onStop : function (callback) {
            end = callback;
            return this;
        },

        /**
         * Occurs when mouse wheel event happens. callback = function(e, scrollDelta, scrollPoint);
         */
        onScroll : function (callback) {
            updateScrollEvents(callback);
            return this;
        },

        release : function () {
            // TODO: could be unsafe. We might wanna release dragObject, etc.
            documentEvents.stop('mousemove', handleMouseMove);
            documentEvents.stop('mousedown', handleMouseDown);
            documentEvents.stop('mouseup', handleMouseUp);
            documentEvents.stop('touchmove', handleTouchMove);
            documentEvents.stop('touchend', handleTouchEnd);
            documentEvents.stop('touchcancel', handleTouchEnd);

            updateScrollEvents(null);
        }
    };
};
/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Input = Viva.Input || {};
Viva.Input.domInputManager = function () {
    return {
        /**
         * Called by renderer to listen to drag-n-drop events from node. E.g. for CSS/SVG
         * graphics we may listen to DOM events, whereas for WebGL the graphics
         * should provide custom eventing mechanism.
         *
         * @param node - to be monitored.
         * @param handlers - object with set of three callbacks:
         *   onStart: function(),
         *   onDrag: function(e, offset),
         *   onStop: function()
         */
        bindDragNDrop : function (node, handlers) {
            if (handlers) {
                var events = Viva.Graph.Utils.dragndrop(node.ui);
                if (typeof handlers.onStart === 'function') {
                    events.onStart(handlers.onStart);
                }
                if (typeof handlers.onDrag === 'function') {
                    events.onDrag(handlers.onDrag);
                }
                if (typeof handlers.onStop === 'function') {
                    events.onStop(handlers.onStop);
                }

                node.events = events;
            } else if (node.events) {
                // TODO: i'm not sure if this is required in JS world...
                node.events.release();
                node.events = null;
                delete node.events;
            }
        }
    };
};
/**
 * Allows querying graph nodes position at given point.
 *
 * @param graph - graph to be queried.
 * @param toleranceOrCheckCallback - if it's a number then it represents offest
 *          in pixels from any node position to be considered a part of the node.
 *          if it's a function then it's called for every node to check intersection
 *
 * TODO: currently it performes linear search. Use real spatial index to improve performance.
 */
Viva.Graph.spatialIndex = function (graph, toleranceOrCheckCallback) {
    var getNodeFunction,
        preciseCheckCallback,
        tolerance = 16;

    if (typeof toleranceOrCheckCallback === 'function') {
        preciseCheckCallback = toleranceOrCheckCallback;
        getNodeFunction = function (x, y) {
            var foundNode = null;
            graph.forEachNode(function (node) {
                if (preciseCheckCallback(node, x, y)) {
                    foundNode = node;
                    return true;
                }
            });

            return foundNode;
        };
    } else if (typeof toleranceOrCheckCallback === 'number') {
        tolerance = toleranceOrCheckCallback;
        getNodeFunction = function (x, y) {
            var foundNode = null;

            graph.forEachNode(function (node) {
                var pos = node.position;

                if (pos.x - tolerance < x && x < pos.x + tolerance &&
                        pos.y - tolerance < y && y < pos.y + tolerance) {

                    foundNode = node;
                    return true;
                }
            });

            return foundNode;
        };
    }


    return {
        getNodeAt : getNodeFunction
    };
};
/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.Utils = Viva.Graph.Utils || {};

(function () {
    var lastTime = 0,
        vendors = ['ms', 'moz', 'webkit', 'o'],
        i,
        scope;

    if (typeof window !== 'undefined') {
        scope = window;
    } else if (typeof global !== 'undefined') {
        scope = global;
    } else {
        scope = {
            setTimeout: function () {},
            clearTimeout: function () {}
        };
    }
    for (i = 0; i < vendors.length && !scope.requestAnimationFrame; ++i) {
        var vendorPrefix = vendors[i];
        scope.requestAnimationFrame = scope[vendorPrefix + 'RequestAnimationFrame'];
        scope.cancelAnimationFrame =
            scope[vendorPrefix + 'CancelAnimationFrame'] || scope[vendorPrefix + 'CancelRequestAnimationFrame'];
    }

    if (!scope.requestAnimationFrame) {
        scope.requestAnimationFrame = function (callback) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = scope.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }

    if (!scope.cancelAnimationFrame) {
        scope.cancelAnimationFrame = function (id) {
            scope.clearTimeout(id);
        };
    }

    /**
     * Timer that fires callback with given interval (in ms) until
     * callback returns true;
     */
    Viva.Graph.Utils.timer = function (callback) {
        var intervalId,
            stopTimer = function () {
                scope.cancelAnimationFrame(intervalId);
                intervalId = 0;
            },

            startTimer = function () {
                intervalId = scope.requestAnimationFrame(startTimer);
                if (!callback()) {
                    stopTimer();
                }
            };

        startTimer(); // start it right away.

        return {
            /**
             * Stops execution of the callback
             */
            stop: stopTimer,

            restart : function () {
                if (!intervalId) {
                    startTimer();
                }
            }
        };
    };
}());Viva.Graph.geom = function () {

    return {
        // function from Graphics GEM to determine lines intersection:
        // http://www.opensource.apple.com/source/graphviz/graphviz-498/graphviz/dynagraph/common/xlines.c
        intersect : function (x1, y1, x2, y2, // first line segment
                            x3, y3, x4, y4) { // second line segment
            var a1, a2, b1, b2, c1, c2, /* Coefficients of line eqns. */
                r1, r2, r3, r4,         /* 'Sign' values */
                denom, offset, num,     /* Intermediate values */
                result = { x: 0, y : 0};

            /* Compute a1, b1, c1, where line joining points 1 and 2
             * is "a1 x  +  b1 y  +  c1  =  0".
             */
            a1 = y2 - y1;
            b1 = x1 - x2;
            c1 = x2 * y1 - x1 * y2;

            /* Compute r3 and r4.
             */
            r3 = a1 * x3 + b1 * y3 + c1;
            r4 = a1 * x4 + b1 * y4 + c1;

            /* Check signs of r3 and r4.  If both point 3 and point 4 lie on
             * same side of line 1, the line segments do not intersect.
             */

            if (r3 !== 0 && r4 !== 0 && ((r3 >= 0) === (r4 >= 4))) {
                return null; //no itersection.
            }

            /* Compute a2, b2, c2 */
            a2 = y4 - y3;
            b2 = x3 - x4;
            c2 = x4 * y3 - x3 * y4;

            /* Compute r1 and r2 */

            r1 = a2 * x1 + b2 * y1 + c2;
            r2 = a2 * x2 + b2 * y2 + c2;

            /* Check signs of r1 and r2.  If both point 1 and point 2 lie
             * on same side of second line segment, the line segments do
             * not intersect.
             */
            if (r1 !== 0 && r2 !== 0 && ((r1 >= 0) === (r2 >= 0))) {
                return null; // no intersection;
            }
            /* Line segments intersect: compute intersection point.
             */

            denom = a1 * b2 - a2 * b1;
            if (denom === 0) {
                return null; // Actually collinear..
            }

            offset = denom < 0 ? -denom / 2 : denom / 2;
            offset = 0.0;

            /* The denom/2 is to get rounding instead of truncating.  It
             * is added or subtracted to the numerator, depending upon the
             * sign of the numerator.
             */


            num = b1 * c2 - b2 * c1;
            result.x = (num < 0 ? num - offset : num + offset) / denom;

            num = a2 * c1 - a1 * c2;
            result.y = (num < 0 ? num - offset : num + offset) / denom;

            return result;
        },

          /**
           * Returns intersection point of the rectangle defined by
           * left, top, right, bottom and a line starting in x1, y1
           * and ending in x2, y2;
           */
        intersectRect : function (left, top, right, bottom, x1, y1, x2, y2) {
            return this.intersect(left, top, left, bottom, x1, y1, x2, y2) ||
                   this.intersect(left, bottom, right, bottom, x1, y1, x2, y2) ||
                   this.intersect(right, bottom, right, top, x1, y1, x2, y2) ||
                   this.intersect(right, top, left, top, x1, y1, x2, y2);
        },

        convexHull : function (points) {
            var polarAngleSort = function (basePoint, points) {
                    var cosAngle = function (p) {
                            var dx = p.x - basePoint.x,
                                dy = p.y - basePoint.y,
                                sign = dx > 0 ? 1 : -1;

                            // We use squared dx, to avoid Sqrt opertion and improve performance.
                            // To avoid sign loss during dx * dx operation we precompute its sign:
                            return sign * dx * dx / (dx * dx + dy * dy);
                        },

                        sortedPoints = points.sort(function (p1, p2) {
                            return cosAngle(p2) - cosAngle(p1);
                        }),

                        // If more than one point has the same angle, remove all but the one that is farthest from basePoint:
                        lastPoint = sortedPoints[0],
                        lastAngle = cosAngle(lastPoint),
                        dx = lastPoint.x - basePoint.x,
                        dy = lastPoint.y - basePoint.y,
                        lastDistance = dx * dx + dy * dy,
                        curDistance,
                        i;

                    for (i = 1; i < sortedPoints.length; ++i) {
                        lastPoint = sortedPoints[i];
                        var angle = cosAngle(lastPoint);
                        if (angle === lastAngle) {
                            dx = lastPoint.x - basePoint.x;
                            dy = lastPoint.y - basePoint.y;
                            curDistance = dx * dx + dy * dy;

                            if (curDistance < lastDistance) {
                                sortedPoints.splice(i, 1);
                            } else {
                                sortedPoints.splice(i - 1, 1);
                            }
                        } else {
                            lastAngle = angle;
                        }
                    }

                    return sortedPoints;
                },

                /**
                 * Returns true if angle formed by points p0, p1, p2 makes left turn.
                 * (counterclockwise)
                 */
                ccw = function (p0, p1, p2) {
                    return ((p2.x - p0.x) * (p1.y - p0.y) - (p2.y - p0.y) * (p1.x - p0.x)) < 0;
                };

            if (points.length < 3) {
                return points; // This one is easy... Not precise, but should be enough for now.
            }

            // let p0 be the point in Q with the minimum y-coordinate, or the leftmost
            // such point in case of a tie
            var p0Idx = 0,
                i;
            for (i = 0; i < points.length; ++i) {
                if (points[i].y < points[p0Idx].y) {
                    p0Idx = i;
                } else if (points[i].y === points[p0Idx].y && points[i].x < points[p0Idx].x) {
                    p0Idx = i;
                }
            }

            var p0 = points[p0Idx];
            // let <p1; p2; ... pm> be the remaining points
            points.splice(p0Idx, 1);
            // sorted by polar angle in counterclockwise order around p0
            var sortedPoints = polarAngleSort(p0, points);
            if (sortedPoints.length < 2) {
                return sortedPoints;
            }

            // let S be empty stack
            var s = [];
            s.push(p0);
            s.push(sortedPoints[0]);
            s.push(sortedPoints[1]);
            var sLength = s.length;
            for (i = 2; i < sortedPoints.length; ++i) {
                while (!ccw(s[sLength - 2], s[sLength - 1], sortedPoints[i])) {
                    s.pop();
                    sLength -= 1;
                }

                s.push(sortedPoints[i]);
                sLength += 1;
            }

            return s;
        }
    };
};/**
 * Very generic rectangle. 
 */
Viva.Graph.Rect = function (x1, y1, x2, y2) {
    this.x1 = x1 || 0;
    this.y1 = y1 || 0;
    this.x2 = x2 || 0;
    this.y2 = y2 || 0;
};

/**
 * Very generic two-dimensional point.
 */
Viva.Graph.Point2d = function (x, y) {
    this.x = x || 0;
    this.y = y || 0;
};

/**
 * Internal structure to represent node;
 */
Viva.Graph.Node = function (id) {
    this.id = id;
    this.links = [];
    this.data = null;
};

/**
 * Internal structure to represent links;
 */
Viva.Graph.Link = function (fromId, toId, data) {
    this.fromId = fromId;
    this.toId = toId;
    this.data = data;
};/**
 * @fileOverview Contains definition of the core graph object.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

/**
 * @namespace Represents a graph data structure.
 *
 * @example
 *  var g = Viva.Graph.graph();
 *  g.addNode(1);     // g has one node.
 *  g.addLink(2, 3);  // now g contains three nodes and one link.
 *
 */
Viva.Graph.graph = function () {

    // Graph structure is maintained as dictionary of nodes
    // and array of links. Each node has 'links' property which
    // hold all links related to that node. And general links
    // array is used to speed up all links enumeration. This is inefficient
    // in terms of memory, but simplifies coding. Furthermore, the graph structure
    // is isolated from outter world, and can be changed to adjacency matrix later.

    var nodes = {},
        links = [],
        nodesCount = 0,
        suspendEvents = 0,

        // Accumlates all changes made during graph updates.
        // Each change element contains:
        //  changeType - one of the strings: 'add', 'remove' or 'update';
        //  node - if change is related to node this property is set to changed graph's node;
        //  link - if change is related to link this property is set to changed graph's link;
        changes = [],

        fireGraphChanged = function (graph) {
            // TODO: maybe we shall copy changes?
            graph.fire('changed', changes);
        },

        // Enter, Exit Mofidication allows bulk graph updates without firing events.
        enterModification = function () {
            suspendEvents += 1;
        },

        exitModification = function (graph) {
            suspendEvents -= 1;
            if (suspendEvents === 0 && changes.length > 0) {
                fireGraphChanged(graph);
                changes.length = 0;
            }
        },

        recordNodeChange = function (node, changeType) {
            // TODO: Could add changeType verification.
            changes.push({node : node, changeType : changeType});
        },

        recordLinkChange = function (link, changeType) {
            // TODO: Could add change type verification;
            changes.push({link : link, changeType : changeType});
        },

        isArray = function (value) {
            return value &&
                   typeof value === 'object' &&
                   typeof value.length === 'number' &&
                   typeof value.splice === 'function' &&
                   !(value.propertyIsEnumerable('length'));
        };

    /** @scope Viva.Graph.graph */
    var graphPart = {

        /**
         * Adds node to the graph. If node with given id already exists in the graph
         * its data is extended with whatever comes in 'data' argument.
         *
         * @param nodeId the node's identifier. A string is preferred.
         * @param [data] additional data for the node being added. If node already
         *   exists its data object is augmented with the new one.
         *
         * @return {node} The newly added node or node with given id if it already exists.
         */
        addNode : function (nodeId, data) {
            if (typeof nodeId === 'undefined') {
                throw {
                    message: 'Invalid node identifier'
                };
            }

            enterModification();

            var node = this.getNode(nodeId);
            if (!node) {
                node = new Viva.Graph.Node(nodeId);
                nodesCount++;

                recordNodeChange(node, 'add');
            } else {
                recordNodeChange(node, 'update');
            }

            if (data) {
                var augmentedData = node.data || {},
                    dataType = typeof data,
                    name;

                if (dataType === 'string' || isArray(data) ||
                        dataType === 'number' || dataType === 'boolean') {
                    augmentedData = data;
                } else if (dataType === 'undefined') {
                    augmentedData = null;
                } else {
                    for (name in data) {
                        if (data.hasOwnProperty(name)) {
                            augmentedData[name] = data[name];
                        }
                    }
                }

                node.data = augmentedData;
            }

            nodes[nodeId] = node;

            exitModification(this);
            return node;
        },

        /**
         * Adds a link to the graph. The function always create a new
         * link between two nodes. If one of the nodes does not exists
         * a new node is created.
         *
         * @param fromId link start node id;
         * @param toId link end node id;
         * @param [data] additional data to be set on the new link;
         *
         * @return {link} The newly created link
         */
        addLink : function (fromId, toId, data) {
            enterModification();

            var fromNode = this.getNode(fromId) || this.addNode(fromId);
            var toNode = this.getNode(toId) || this.addNode(toId);

            var link = new Viva.Graph.Link(fromId, toId, data);

            links.push(link);

            // TODO: this is not cool. On large graphs potentially would consume more memory.
            fromNode.links.push(link);
            toNode.links.push(link);

            recordLinkChange(link, 'add');

            exitModification(this);

            return link;
        },

        /**
         * Removes link from the graph. If link does not exist does nothing.
         *
         * @param link - object returned by addLink() or getLinks() methods.
         *
         * @returns true if link was removed; false otherwise.
         */
        removeLink : function (link) {
            if (!link) { return false; }
            var idx = Viva.Graph.Utils.indexOfElementInArray(link, links);
            if (idx < 0) { return false; }

            enterModification();

            links.splice(idx, 1);

            var fromNode = this.getNode(link.fromId);
            var toNode = this.getNode(link.toId);

            if (fromNode) {
                idx = Viva.Graph.Utils.indexOfElementInArray(link, fromNode.links);
                if (idx >= 0) {
                    fromNode.links.splice(idx, 1);
                }
            }

            if (toNode) {
                idx = Viva.Graph.Utils.indexOfElementInArray(link, toNode.links);
                if (idx >= 0) {
                    toNode.links.splice(idx, 1);
                }
            }

            recordLinkChange(link, 'remove');

            exitModification(this);

            return true;
        },

        /**
         * Removes node with given id from the graph. If node does not exist in the graph
         * does nothing.
         *
         * @param nodeId node's identifier passed to addNode() function.
         *
         * @returns true if node was removed; false otherwise.
         */
        removeNode: function (nodeId) {
            var node = this.getNode(nodeId);
            if (!node) { return false; }

            enterModification();

            while (node.links.length) {
                var link = node.links[0];
                this.removeLink(link);
            }

            nodes[nodeId] = null;
            delete nodes[nodeId];
            nodesCount--;

            recordNodeChange(node, 'remove');

            exitModification(this);
        },

        /**
         * Gets node with given identifier. If node does not exist undefined value is returned.
         *
         * @param nodeId requested node identifier;
         *
         * @return {node} in with requested identifier or undefined if no such node exists.
         */
        getNode : function (nodeId) {
            return nodes[nodeId];
        },

        /**
         * Gets number of nodes in this graph.
         *
         * @return number of nodes in the graph.
         */
        getNodesCount : function () {
            return nodesCount;
        },

        /**
         * Gets total number of links in the graph.
         */
        getLinksCount : function () {
            return links.length;
        },

        /**
         * Gets all links (inbound and outbound) from the node with given id.
         * If node with given id is not found null is returned.
         *
         * @param nodeId requested node identifier.
         *
         * @return Array of links from and to requested node if such node exists;
         *   otherwise null is returned.
         */
        getLinks : function (nodeId) {
            var node = this.getNode(nodeId);
            return node ? node.links : null;
        },

        /**
         * Invokes callback on each node of the graph.
         *
         * @param {Function(node)} callback Function to be invoked. The function
         *   is passed one argument: visited node.
         */
        forEachNode : function (callback) {
            if (typeof callback !== 'function') {
                return;
            }
            var node;

            // TODO: could it be faster for nodes iteration if we had indexed access?
            // I.e. use array + 'for' iterator instead of dictionary + 'for .. in'?
            for (node in nodes) {
                // For performance reasons you might want to sacrifice this sanity check:
                if (nodes.hasOwnProperty(node)) {
                    if (callback(nodes[node])) {
                        return; // client doesn't want to proceed. return.
                    }
                }
            }
        },

        /**
         * Invokes callback on every linked (adjacent) node to the given one.
         *
         * @param nodeId Identifier of the requested node.
         * @param {Function(node, link)} callback Function to be called on all linked nodes.
         *   The function is passed two parameters: adjacent node and link object itself.
         * @param oriented if true graph treated as oriented.
         */
        forEachLinkedNode : function (nodeId, callback, oriented) {
            var node = this.getNode(nodeId),
                i,
                link,
                linkedNodeId;

            if (node && node.links && typeof callback === 'function') {
                // Extraced orientation check out of the loop to increase performance
                if (oriented) {
                    for (i = 0; i < node.links.length; ++i) {
                        link = node.links[i];
                        if (link.fromId === nodeId) {
                            callback(nodes[link.toId], link);
                        }
                    }
                } else {
                    for (i = 0; i < node.links.length; ++i) {
                        link = node.links[i];
                        linkedNodeId = link.fromId === nodeId ? link.toId : link.fromId;

                        callback(nodes[linkedNodeId], link);
                    }
                }
            }
        },

        /**
         * Enumerates all links in the graph
         *
         * @param {Function(link)} callback Function to be called on all links in the graph.
         *   The function is passed one parameter: graph's link object.
         *
         * Link object contains at least the following fields:
         *  fromId - node id where link starts;
         *  toId - node id where link ends,
         *  data - additional data passed to graph.addLink() method.
         */
        forEachLink : function (callback) {
            var i;
            if (typeof callback === 'function') {
                for (i = 0; i < links.length; ++i) {
                    callback(links[i]);
                }
            }
        },

        /**
         * Suspend all notifications about graph changes until
         * endUpdate is called.
         */
        beginUpdate : function () {
            enterModification();
        },

        /**
         * Resumes all notifications about graph changes and fires
         * graph 'changed' event in case there are any pending changes.
         */
        endUpdate : function () {
            exitModification(this);
        },

        /**
         * Removes all nodes and links from the graph.
         */
        clear : function () {
            var that = this;
            that.beginUpdate();
            that.forEachNode(function (node) { that.removeNode(node.id); });
            that.endUpdate();
        },

        /**
         * Detects whether there is a link between two nodes.
         * Operation complexity is O(n) where n - number of links of a node.
         *
         * @returns link if there is one. null otherwise.
         */
        hasLink : function (fromNodeId, toNodeId) {
            // TODO: Use adjacency matrix to speed up this operation.
            var node = this.getNode(fromNodeId),
                i;
            if (!node) {
                return null;
            }

            for (i = 0; i < node.links.length; ++i) {
                var link = node.links[i];
                if (link.fromId === fromNodeId && link.toId === toNodeId) {
                    return link;
                }
            }

            return null; // no link.
        }
    };

    // Let graph fire events before we return it to the caller.
    Viva.Graph.Utils.events(graphPart).extend();

    return graphPart;
};/**
 * @fileOverview Contains collection of primitve operations under graph.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.operations = function () {

    return {
        /**
         * Gets graph density, which is a ratio of actual number of edges to maximum
         * number of edges. I.e. graph density 1 means all nodes are connected with each other with an edge.
         * Density 0 - graph has no edges. Runtime: O(1)
         * 
         * @param graph represents oriented graph structure.
         * 
         * @returns density of the graph if graph has nodes. NaN otherwise 
         */
        density : function (graph) {
            var nodes = graph.getNodesCount();
            if (nodes === 0) {
                return NaN;
            }

            return 2 * graph.getLinksCount() / (nodes * (nodes - 1));
        }
    };
};
Viva.Graph.Physics = Viva.Graph.Physics || {};

Viva.Graph.Physics.Vector = function (x, y) {
    this.x = x || 0;
    this.y = y || 0;
};

Viva.Graph.Physics.Vector.prototype = {
    multiply : function (scalar) {
        return new Viva.Graph.Physics.Vector(this.x * scalar, this.y * scalar);
    }
};

Viva.Graph.Physics.Point = function (x, y) {
    this.x = x || 0;
    this.y = y || 0;
};

Viva.Graph.Physics.Point.prototype = {
    add : function (point) {
        return new Viva.Graph.Physics.Point(this.x + point.x, this.y + point.y);
    }
};

Viva.Graph.Physics.Body = function () {
    this.mass = 1;
    this.force = new Viva.Graph.Physics.Vector();
    this.velocity = new Viva.Graph.Physics.Vector(); // For chained call use vel() method.
    this.location = new Viva.Graph.Physics.Point(); // For chained calls use loc() method instead.
    this.prevLocation = new Viva.Graph.Physics.Point(); // TODO: might be not always needed
};

Viva.Graph.Physics.Body.prototype = {
    loc : function (location) {
        if (location) {
            this.location.x = location.x;
            this.location.y = location.y;

            return this;
        }

        return this.location;
    },
    vel : function (velocity) {
        if (velocity) {
            this.velocity.x = velocity.x;
            this.velocity.y = velocity.y;

            return this;
        }

        return this.velocity;
    }
};

Viva.Graph.Physics.Spring = function (body1, body2, length, coeff, weight) {
    this.body1 = body1;
    this.body2 = body2;
    this.length = length;
    this.coeff = coeff;
    this.weight = weight;
};

Viva.Graph.Physics.QuadTreeNode = function () {
    this.centerOfMass = new Viva.Graph.Physics.Point();
    this.children = [];
    this.body = null;
    this.hasChildren = false;
    this.x1 = 0;
    this.y1 = 0;
    this.x2 = 0;
    this.y2 = 0;
};
Viva.Graph.Physics = Viva.Graph.Physics || {};

/**
 * Updates velocity and position data using the Euler's method.
 * It is faster than RK4 but may produce less accurate results.
 *
 * http://en.wikipedia.org/wiki/Euler_method
 */
Viva.Graph.Physics.eulerIntegrator = function () {
    return {
        /**
         * Performs forces integration, using given timestep and force simulator.
         *
         * @returns squared distance of total position updates.
         */
        integrate : function (simulator, timeStep) {
            var speedLimit = simulator.speedLimit,
                tx = 0,
                ty = 0,
                i,
                max = simulator.bodies.length;

            for (i = 0; i < max; ++i) {
                var body = simulator.bodies[i],
                    coeff = timeStep / body.mass;

                body.velocity.x += coeff * body.force.x;
                body.velocity.y += coeff * body.force.y;
                var vx = body.velocity.x,
                    vy = body.velocity.y,
                    v = Math.sqrt(vx * vx + vy * vy);

                if (v > speedLimit) {
                    body.velocity.x = speedLimit * vx / v;
                    body.velocity.y = speedLimit * vy / v;
                }

                tx = timeStep * body.velocity.x;
                ty = timeStep * body.velocity.y;
                body.location.x += tx;
                body.location.y += ty;
            }

            return tx * tx + ty * ty;
        }
    };
};
/**
 * This is Barnes Hut simulation algorithm. Implementation
 * is adopted to non-recursive solution, since certain browsers
 * handle recursion extremly bad.
 *
 * http://www.cs.princeton.edu/courses/archive/fall03/cs126/assignments/barnes-hut.html
 */
Viva.Graph.Physics.nbodyForce = function (options) {
    options = Viva.lazyExtend(options || {
        gravity : -1,
        theta : 0.8
    });

    // the following structures are here to reduce memory pressure
    // when constructing BH-tree.
    function InsertStackElement(node, body) {
        this.node = node;
        this.body = body;
    }

    function InsertStack () {
        this.stack = [];
        this.popIdx = 0;
    }

    InsertStack.prototype = {
        isEmpty: function() {
            return this.popIdx === 0;
        },
        push: function (node, body) {
            var item = this.stack[this.popIdx];
            if (!item) {
                this.stack[this.popIdx] = new InsertStackElement(node, body);
            } else {
                item.node = node;
                item.body = body;
            }
            ++this.popIdx;
        },
        pop: function () {
            if (this.popIdx > 0) {
                return this.stack[--this.popIdx];
            }
        },
        reset: function () {
            this.popIdx = 0;
        }
    };


    var gravity = options.gravity,
        updateQueue = [],
        insertStack = new InsertStack(),
        theta = options.theta,
        random = Viva.random('5f4dcc3b5aa765d61d8327deb882cf99', 75, 20, 63, 0x6c, 65, 76, 65, 72),

        Node = function () {
            this.body = null;
            this.quads = [];
            this.mass = 0;
            this.massX = 0;
            this.massY = 0;
            this.left = 0;
            this.top = 0;
            this.bottom = 0;
            this.right = 0;
            this.isInternal = false;
        },

        nodesCache = [],
        currentInCache = 0,
        newNode = function () {
            // To avoid pressure on GC we reuse nodes.
            var node;
            if (nodesCache[currentInCache]) {
                node = nodesCache[currentInCache];
                node.quads[0] = null;
                node.quads[1] = null;
                node.quads[2] = null;
                node.quads[3] = null;
                node.body = null;
                node.mass = node.massX = node.massY = 0;
                node.left = node.right = node.top = node.bottom = 0;
                node.isInternal = false;
            } else {
                node = new Node();
                nodesCache[currentInCache] = node;
            }

            ++currentInCache;
            return node;
        },

        root = newNode(),

        isSamePosition = function (point1, point2) {
            // TODO: inline it?
            var dx = Math.abs(point1.x - point2.x);
            var dy = Math.abs(point1.y - point2.y);

            return (dx < 0.01 && dy < 0.01);
        },

        // Inserts body to the tree
        insert = function (newBody) {
            insertStack.reset();
            insertStack.push(root, newBody);

            while (!insertStack.isEmpty()) {
                var stackItem = insertStack.pop(),
                    node = stackItem.node,
                    body = stackItem.body;

                if (node.isInternal) {
                    // This is internal node. Update the total mass of the node and center-of-mass.
                    var x = body.location.x;
                    var y = body.location.y;
                    node.mass = node.mass + body.mass;
                    node.massX = node.massX + body.mass * x;
                    node.massY = node.massY + body.mass * y;

                    // Recursively insert the body in the appropriate quadrant.
                    // But first find the appropriate quadrant.
                    var quadIdx = 0, // Assume we are in the 0's quad.
                        left = node.left,
                        right = (node.right + left) / 2,
                        top = node.top,
                        bottom = (node.bottom + top) / 2;

                    if (x > right) {// somewhere in the eastern part.
                        quadIdx = quadIdx + 1;
                        var oldLeft = left;
                        left = right;
                        right = right + (right - oldLeft);
                    }
                    if (y > bottom) {// and in south.
                        quadIdx = quadIdx + 2;
                        var oldTop = top;
                        top = bottom;
                        bottom = bottom + (bottom - oldTop);
                    }

                    var child = node.quads[quadIdx];
                    if (!child) {
                        // The node is internal but this quadrant is not taken. Add
                        // subnode to it.
                        child = newNode();
                        child.left = left;
                        child.top = top;
                        child.right = right;
                        child.bottom = bottom;

                        node.quads[quadIdx] = child;
                    }

                    // continue searching in this quadrant.
                    insertStack.push(child, body);
                } else if (node.body) {
                    // We are trying to add to the leaf node.
                    // To achieve this we have to convert current leaf into internal node
                    // and continue adding two nodes.
                    var oldBody = node.body;
                    node.body = null; // internal nodes do not cary bodies
                    node.isInternal = true;

                    if (isSamePosition(oldBody.location, body.location)) {
                        // Prevent infinite subdivision by bumping one node
                        // slightly. I assume this operation should be quite
                        // rare, that's why usage of cos()/sin() shouldn't hit performance.
                        var newX, newY;
                        do {
                            var angle = random.nextDouble() * 2 * Math.PI;
                            var dx = (node.right - node.left) * 0.006 * Math.cos(angle);
                            var dy = (node.bottom - node.top) * 0.006 * Math.sin(angle);

                            newX = oldBody.location.x + dx;
                            newY = oldBody.location.y + dy;
                            // Make sure we don't bump it out of the box. If we do, next iteration should fix it
                        } while (newX < node.left || newX > node.right ||
                                 newY < node.top  || newY > node.bottom);

                        oldBody.location.x = newX;
                        oldBody.location.y = newY;
                    }
                    // Next iteration should subdivide node further.
                    insertStack.push(node, oldBody);
                    insertStack.push(node, body);
                } else {
                    // Node has no body. Put it in here.
                    node.body = body;
                }
            }
        },

        update = function (sourceBody) {
            var queue = updateQueue,
                v,
                dx,
                dy,
                r,
                queueLength = 1,
                shiftIdx = 0,
                pushIdx = 1;

            queue[0] = root;

            // TODO: looks like in rare cases this guy has infinite loop bug. To reproduce
            // render K1000 (complete(1000)) with the settings: {springLength : 3, springCoeff : 0.0005,
            // dragCoeff : 0.02, gravity : -1.2 }
            while (queueLength) {
                var node = queue[shiftIdx],
                    body = node.body;

                queueLength -= 1;
                shiftIdx += 1;

                if (body && body !== sourceBody) {
                    // If the current node is an external node (and it is not source body),
                    // calculate the force exerted by the current node on body, and add this
                    // amount to body's net force.
                    dx = body.location.x - sourceBody.location.x;
                    dy = body.location.y - sourceBody.location.y;
                    r = Math.sqrt(dx * dx + dy * dy);

                    if (r === 0) {
                        // Poor man's protection agains zero distance.
                        dx = (random.nextDouble() - 0.5) / 50;
                        dy = (random.nextDouble() - 0.5) / 50;
                        r = Math.sqrt(dx * dx + dy * dy);
                    }

                    // This is standard gravition force calculation but we divide
                    // by r^3 to save two operations when normalizing force vector.
                    v = gravity * body.mass * sourceBody.mass / (r * r * r);
                    sourceBody.force.x = sourceBody.force.x + v * dx;
                    sourceBody.force.y = sourceBody.force.y + v * dy;
                } else {
                    // Otherwise, calculate the ratio s / r,  where s is the width of the region
                    // represented by the internal node, and r is the distance between the body
                    // and the node's center-of-mass
                    dx = node.massX / node.mass - sourceBody.location.x;
                    dy = node.massY / node.mass - sourceBody.location.y;
                    r = Math.sqrt(dx * dx + dy * dy);

                    if (r === 0) {
                        // Sorry about code duplucation. I don't want to create many functions
                        // right away. Just want to see performance first.
                        dx = (random.nextDouble() - 0.5) / 50;
                        dy = (random.nextDouble() - 0.5) / 50;
                        r = Math.sqrt(dx * dx + dy * dy);
                    }
                    // If s / r < θ, treat this internal node as a single body, and calculate the
                    // force it exerts on body b, and add this amount to b's net force.
                    if ((node.right - node.left) / r < theta) {
                        // in the if statement above we consider node's width only
                        // because the region was sqaurified during tree creation.
                        // Thus there is no difference between using width or height.
                        v = gravity * node.mass * sourceBody.mass / (r * r * r);
                        sourceBody.force.x = sourceBody.force.x + v * dx;
                        sourceBody.force.y = sourceBody.force.y + v * dy;
                    } else {
                        // Otherwise, run the procedure recursively on each of the current node's children.

                        // I intentionally unfolded this loop, to save several CPU cycles.
                        if (node.quads[0]) { queue[pushIdx] = node.quads[0]; queueLength += 1; pushIdx += 1; }
                        if (node.quads[1]) { queue[pushIdx] = node.quads[1]; queueLength += 1; pushIdx += 1; }
                        if (node.quads[2]) { queue[pushIdx] = node.quads[2]; queueLength += 1; pushIdx += 1; }
                        if (node.quads[3]) { queue[pushIdx] = node.quads[3]; queueLength += 1; pushIdx += 1; }
                    }
                }
            }
        },

        init = function (forceSimulator) {
            var x1 = Number.MAX_VALUE,
                y1 = Number.MAX_VALUE,
                x2 = Number.MIN_VALUE,
                y2 = Number.MIN_VALUE,
                i,
                bodies = forceSimulator.bodies,
                max = bodies.length;

            // To reduce quad tree depth we are looking for exact bounding box of all particles.
            i = max;
            while (i--) {
                var x = bodies[i].location.x;
                var y = bodies[i].location.y;
                if (x < x1) { x1 = x; }
                if (x > x2) { x2 = x; }
                if (y < y1) { y1 = y; }
                if (y > y2) { y2 = y; }
            }

            // Squarify the bounds.
            var dx = x2 - x1,
                dy = y2 - y1;
            if (dx > dy) { y2 = y1 + dx; } else { x2 = x1 + dy; }

            currentInCache = 0;
            root = newNode();
            root.left = x1;
            root.right = x2;
            root.top = y1;
            root.bottom = y2;

            i = max;
            while (i--) {
                insert(bodies[i], root);
            }
        };

    return {
        insert : insert,
        init : init,
        update : update,
        options : function (newOptions) {
            if (newOptions) {
                if (typeof newOptions.gravity === 'number') { gravity = newOptions.gravity; }
                if (typeof newOptions.theta === 'number') { theta = newOptions.theta; }

                return this;
            }

            return {gravity : gravity, theta : theta};
        }
    };
};Viva.Graph.Physics.dragForce = function (options) {
    if (!options) {
        options = {};
    }

    var currentOptions = {
        coeff : options.coeff || 0.01
    };

    return {
        init : function (forceSimulator) {},
        update : function (body) {
            body.force.x -= currentOptions.coeff * body.velocity.x;
            body.force.y -= currentOptions.coeff * body.velocity.y;
        },
        options : function (newOptions) {
            if (newOptions) {
                if (typeof newOptions.coeff === 'number') { currentOptions.coeff = newOptions.coeff; }

                return this;
            }

            return currentOptions;
        }
    };
};
Viva.Graph.Physics.springForce = function (currentOptions) {
    currentOptions = Viva.lazyExtend(currentOptions, {
        length : 50,
        coeff : 0.00022
    });

    var random = Viva.random('Random number 4.', 'Chosen by fair dice roll');

    return {
        init : function (forceSimulator) {},

        update : function (spring) {
            var body1 = spring.body1,
                body2 = spring.body2,
                length = spring.length < 0 ? currentOptions.length : spring.length,
                dx = body2.location.x - body1.location.x,
                dy = body2.location.y - body1.location.y,
                r = Math.sqrt(dx * dx + dy * dy);

            if (r === 0) {
                dx = (random.nextDouble() - 0.5) / 50;
                dy = (random.nextDouble() - 0.5) / 50;
                r = Math.sqrt(dx * dx + dy * dy);
            }

            var d = r - length;
            var coeff = ((!spring.coeff || spring.coeff < 0) ? currentOptions.coeff : spring.coeff) * d / r * spring.weight;

            body1.force.x += coeff * dx;
            body1.force.y += coeff * dy;

            body2.force.x += -coeff * dx;
            body2.force.y += -coeff * dy;
        },

        options : function (newOptions) {
            if (newOptions) {
                if (typeof newOptions.length === 'number') { currentOptions.length = newOptions.length; }
                if (typeof newOptions.coeff === 'number') { currentOptions.coeff = newOptions.coeff; }

                return this;
            }
            return currentOptions;
        }
    };
};
Viva.Graph.Physics = Viva.Graph.Physics || {};

/**
 * Manages a simulation of physical forces acting on bodies.
 * To create a custom force simulator register forces of the system
 * via addForce() method, choos appropriate integrator and register
 * bodies.
 *
 * // TODO: Show example.
 */
Viva.Graph.Physics.forceSimulator = function (forceIntegrator) {
    var integrator = forceIntegrator,
        bodies = [], // Bodies in this simulation.
        springs = [], // Springs in this simulation.
        bodyForces = [], // Forces acting on bodies.
        springForces = []; // Forces acting on springs.

    return {

        /**
         * The speed limit allowed by this simulator.
         */
        speedLimit : 1.0,

        /**
         * Bodies in this simulation
         */
        bodies : bodies,

        /**
         * Accumulates all forces acting on the bodies and springs.
         */
        accumulate : function () {
            var i, j, body;

            // Reinitialize all forces
            i = bodyForces.length;
            while (i--) {
                bodyForces[i].init(this);
            }

            i = springForces.length;
            while (i--) {
                springForces[i].init(this);
            }

            // Accumulate forces acting on bodies.
            i = bodies.length;
            while (i--) {
                body = bodies[i];
                body.force.x = 0;
                body.force.y = 0;

                for (j = 0; j < bodyForces.length; j++) {
                    bodyForces[j].update(body);
                }
            }

            // Accumulate forces acting on springs.
            for (i = 0; i < springs.length; ++i) {
                for (j = 0; j < springForces.length; j++) {
                    springForces[j].update(springs[i]);
                }
            }
        },

        /**
         * Runs simulation for one time step.
         */
        run : function (timeStep) {
            this.accumulate();
            return integrator.integrate(this, timeStep);
        },

        /**
         * Adds body to this simulation
         *
         * @param body - a new body. Bodies expected to have
         *   mass, force, velocity, location and prevLocation properties.
         *   the method does not check all this properties, for the sake of performance.
         *   // TODO: maybe it should check it?
         */
        addBody : function (body) {
            if (!body) {
                throw {
                    message : 'Cannot add null body to force simulator'
                };
            }

            bodies.push(body); // TODO: could mark simulator as dirty...

            return body;
        },

        removeBody : function (body) {
            if (!body) { return false; }

            var idx = Viva.Graph.Utils.indexOfElementInArray(body, bodies);
            if (idx < 0) { return false; }

            return bodies.splice(idx, 1);
        },

        /**
         * Adds a spring to this simulation.
         */
        addSpring: function (body1, body2, springLength, springCoefficient, springWeight) {
            if (!body1 || !body2) {
                throw {
                    message : 'Cannot add null spring to force simulator'
                };
            }

            if (typeof springLength !== 'number') {
                throw {
                    message : 'Spring length should be a number'
                };
            }
            springWeight = typeof springWeight === 'number' ? springWeight : 1;

            var spring = new Viva.Graph.Physics.Spring(body1, body2, springLength, springCoefficient >= 0 ? springCoefficient : -1, springWeight);
            springs.push(spring);

            // TODO: could mark simulator as dirty.
            return spring;
        },

        removeSpring : function (spring) {
            if (!spring) { return false; }

            var idx = Viva.Graph.Utils.indexOfElementInArray(spring, springs);
            if (idx < 0) { return false; }

            return springs.splice(idx, 1);
        },

        /**
         * Adds a force acting on all bodies in this simulation
         */
        addBodyForce: function (force) {
            if (!force) {
                throw {
                    message : 'Cannot add mighty (unknown) force to the simulator'
                };
            }

            bodyForces.push(force);
        },

        /**
         * Adds a spring force acting on all springs in this simulation.
         */
        addSpringForce : function (force) {
            if (!force) {
                throw {
                    message : 'Cannot add unknown force to the simulator'
                };
            }

            springForces.push(force);
        }
    };
};// I don't like to suppress this, but I'm afraid 'force_directed_body'
// could already be used by someone. Don't want to break it now.
/* jshint camelcase:false */

Viva.Graph.Layout = Viva.Graph.Layout || {};
Viva.Graph.Layout.forceDirected = function(graph, settings) {
    var STABLE_THRESHOLD = 0.001; // Maximum movement of the system which can be considered as stabilized

    if (!graph) {
        throw {
            message: 'Graph structure cannot be undefined'
        };
    }

    settings = Viva.lazyExtend(settings, {
        /**
         * Ideal length for links (springs in physical model).
         */
        springLength: 80,

        /**
         * Hook's law coefficient. 1 - solid spring.
         */
        springCoeff: 0.0002,

        /**
         * Coulomb's law coefficient. It's used to repel nodes thus should be negative
         * if you make it positive nodes start attract each other :).
         */
        gravity: -1.2,

        /**
         * Theta coeffiecient from Barnes Hut simulation. Ranged between (0, 1).
         * The closer it's to 1 the more nodes algorithm will have to go through.
         * Setting it to one makes Barnes Hut simulation no different from
         * brute-force forces calculation (each node is considered).
         */
        theta: 0.8,

        /**
         * Drag force coefficient. Used to slow down system, thus should be less than 1.
         * The closer it is to 0 the less tight system will be.
         */
        dragCoeff: 0.02
    });

    var forceSimulator = Viva.Graph.Physics.forceSimulator(Viva.Graph.Physics.eulerIntegrator()),
        nbodyForce = Viva.Graph.Physics.nbodyForce({
            gravity: settings.gravity,
            theta: settings.theta
        }),
        springForce = Viva.Graph.Physics.springForce({
            length: settings.springLength,
            coeff: settings.springCoeff
        }),
        dragForce = Viva.Graph.Physics.dragForce({
            coeff: settings.dragCoeff
        }),
        graphRect = new Viva.Graph.Rect(),
        random = Viva.random('ted.com', 103, 114, 101, 97, 116),

        getBestNodePosition = function(node) {
            // TODO: Initial position could be picked better, e.g. take into
            // account all neighbouring nodes/links, not only one.
            // TODO: this is the same as in gem layout. consider refactoring.
            var baseX = (graphRect.x1 + graphRect.x2) / 2,
                baseY = (graphRect.y1 + graphRect.y2) / 2,
                springLength = settings.springLength;

            if (node.links && node.links.length > 0) {
                var firstLink = node.links[0],
                    otherNode = firstLink.fromId !== node.id ? graph.getNode(firstLink.fromId) : graph.getNode(firstLink.toId);
                if (otherNode.position) {
                    baseX = otherNode.position.x;
                    baseY = otherNode.position.y;
                }
            }

            return {
                x: baseX + random.next(springLength) - springLength / 2,
                y: baseY + random.next(springLength) - springLength / 2
            };
        },

        updateNodeMass = function(node) {
            var body = node.force_directed_body;
            body.mass = 1 + graph.getLinks(node.id).length / 3.0;
        },

        initNode = function(node) {
            var body = node.force_directed_body;
            if (!body) {
                // TODO: rename position to location or location to position to be consistent with
                // other places.
                node.position = node.position || getBestNodePosition(node);

                body = new Viva.Graph.Physics.Body();
                node.force_directed_body = body;
                updateNodeMass(node);

                body.loc(node.position);
                forceSimulator.addBody(body);
            }
        },

        releaseNode = function(node) {
            var body = node.force_directed_body;
            if (body) {
                node.force_directed_body = null;
                delete node.force_directed_body;

                forceSimulator.removeBody(body);
            }
        },

        initLink = function(link) {
            // TODO: what if bodies are not initialized?
            var from = graph.getNode(link.fromId),
                to = graph.getNode(link.toId);

            updateNodeMass(from);
            updateNodeMass(to);
            link.force_directed_spring = forceSimulator.addSpring(from.force_directed_body, to.force_directed_body, -1.0, link.weight);
        },

        releaseLink = function(link) {
            var spring = link.force_directed_spring;
            if (spring) {
                var from = graph.getNode(link.fromId),
                    to = graph.getNode(link.toId);
                if (from) {
                    updateNodeMass(from);
                }
                if (to) {
                    updateNodeMass(to);
                }

                link.force_directed_spring = null;
                delete link.force_directed_spring;

                forceSimulator.removeSpring(spring);
            }
        },

        onGraphChanged = function(changes) {
            for (var i = 0; i < changes.length; ++i) {
                var change = changes[i];
                if (change.changeType === 'add') {
                    if (change.node) {
                        initNode(change.node);
                    }
                    if (change.link) {
                        initLink(change.link);
                    }
                } else if (change.changeType === 'remove') {
                    if (change.node) {
                        releaseNode(change.node);
                    }
                    if (change.link) {
                        releaseLink(change.link);
                    }
                }
                // Probably we don't need to care about 'update' event here;
            }
        },

        initSimulator = function() {
            graph.forEachNode(initNode);
            graph.forEachLink(initLink);
            graph.addEventListener('changed', onGraphChanged);
        },

        isNodePinned = function(node) {
            if (!node) {
                return true;
            }

            return node.isPinned || (node.data && node.data.isPinned);
        },

        updateNodePositions = function() {
            var x1 = Number.MAX_VALUE,
                y1 = Number.MAX_VALUE,
                x2 = Number.MIN_VALUE,
                y2 = Number.MIN_VALUE;
            if (graph.getNodesCount() === 0) {
                return;
            }

            graph.forEachNode(function(node) {
                var body = node.force_directed_body;
                if (!body) {
                    // This could be a sign someone removed the propery.
                    // I should really decouple force related stuff from node
                    return;
                }

                if (isNodePinned(node)) {
                    body.loc(node.position);
                }

                // TODO: once again: use one name to be consistent (position vs location)
                node.position.x = body.location.x;
                node.position.y = body.location.y;

                // szydan
                /*
                if(node.data.t && node.data.t.length){
                    node.position.x = 1000 * ( node.data.t.length -1);
                    node.position.y = body.location.y;
                }else{
                    node.position.x = body.location.x;
                    node.position.y = body.location.y;
                }
                */
                // szydan end

                if (node.position.x < x1) {
                    x1 = node.position.x;
                }
                if (node.position.x > x2) {
                    x2 = node.position.x;
                }
                if (node.position.y < y1) {
                    y1 = node.position.y;
                }
                if (node.position.y > y2) {
                    y2 = node.position.y;
                }
            });

            graphRect.x1 = x1;
            graphRect.x2 = x2;
            graphRect.y1 = y1;
            graphRect.y2 = y2;
        };

    forceSimulator.addSpringForce(springForce);
    forceSimulator.addBodyForce(nbodyForce);
    forceSimulator.addBodyForce(dragForce);

    initSimulator();

    return {
        /**
         * Attempts to layout graph within given number of iterations.
         *
         * @param {integer} [iterationsCount] number of algorithm's iterations.
         */
        run: function(iterationsCount) {
            var i;
            iterationsCount = iterationsCount || 50;

            for (i = 0; i < iterationsCount; ++i) {
                this.step();
            }
        },

        step: function() {
            var energy = forceSimulator.run(20);
            updateNodePositions();

            return energy < STABLE_THRESHOLD;
        },

        /**
         * Returns rectangle structure {x1, y1, x2, y2}, which represents
         * current space occupied by graph.
         */
        getGraphRect: function() {
            return graphRect;
        },

        /**
         * Request to release all resources
         */
        dispose: function() {
            graph.removeEventListener('change', onGraphChanged);
        },

        // Layout specific methods
        /**
         * Gets or sets current desired length of the edge.
         *
         * @param length new desired length of the springs (aka edge, aka link).
         * if this parameter is empty then old spring length is returned.
         */
        springLength: function(length) {
            if (arguments.length === 1) {
                springForce.options({
                    length: length
                });
                return this;
            }

            return springForce.options().length;
        },

        /**
         * Gets or sets current spring coeffiсient.
         *
         * @param coeff new spring coeffiсient.
         * if this parameter is empty then its old value returned.
         */
        springCoeff: function(coeff) {
            if (arguments.length === 1) {
                springForce.options({
                    coeff: coeff
                });
                return this;
            }

            return springForce.options().coeff;
        },

        /**
         * Gets or sets current gravity in the nbody simulation.
         *
         * @param g new gravity constant.
         * if this parameter is empty then its old value returned.
         */
        gravity: function(g) {
            if (arguments.length === 1) {
                nbodyForce.options({
                    gravity: g
                });
                return this;
            }

            return nbodyForce.options().gravity;
        },

        /**
         * Gets or sets current theta value in the nbody simulation.
         *
         * @param t new theta coeffiсient.
         * if this parameter is empty then its old value returned.
         */
        theta: function(t) {
            if (arguments.length === 1) {
                nbodyForce.options({
                    theta: t
                });
                return this;
            }

            return nbodyForce.options().theta;
        },

        /**
         * Gets or sets current theta value in the nbody simulation.
         *
         * @param dragCoeff new drag coeffiсient.
         * if this parameter is empty then its old value returned.
         */
        drag: function(dragCoeff) {
            if (arguments.length === 1) {
                dragForce.options({
                    coeff: dragCoeff
                });
                return this;
            }

            return dragForce.options().coeff;
        }
    };
};
Viva.Graph.Layout = Viva.Graph.Layout || {};

/**
 * Does not really perform any layouting algorithm but is compliant
 * with renderer interface. Allowing clients to provide specific positioning
 * callback and get static layout of the graph
 *
 * @param {Viva.Graph.graph} graph to layout
 * @param {Object} userSettings
 */
Viva.Graph.Layout.constant = function (graph, userSettings) {
    userSettings = Viva.lazyExtend(userSettings, {
        maxX : 1024,
        maxY : 1024,
        seed : 'Deterministic randomness made me do this'
    });
    // This class simply follows API, it does not use some of the arguments:
    /*jshint unused: false */
    var rand = Viva.random(userSettings.seed),
        graphRect = new Viva.Graph.Rect(Number.MAX_VALUE, Number.MAX_VALUE, Number.MIN_VALUE, Number.MIN_VALUE),

        placeNodeCallback = function (node) {
            return new Viva.Graph.Point2d(rand.next(userSettings.maxX), rand.next(userSettings.maxY));
        },

        updateGraphRect = function (node, graphRect) {
            if (node.position.x < graphRect.x1) { graphRect.x1 = node.position.x; }
            if (node.position.x > graphRect.x2) { graphRect.x2 = node.position.x; }
            if (node.position.y < graphRect.y1) { graphRect.y1 = node.position.y; }
            if (node.position.y > graphRect.y2) { graphRect.y2 = node.position.y; }
        },

        ensureNodeInitialized = function (node) {
            if (!node.hasOwnProperty('position')) {
                node.position = placeNodeCallback(node);
            }
            updateGraphRect(node, graphRect);
        },

        updateNodePositions = function () {
            if (graph.getNodesCount() === 0) { return; }

            graphRect.x1 = Number.MAX_VALUE;
            graphRect.y1 = Number.MAX_VALUE;
            graphRect.x2 = Number.MIN_VALUE;
            graphRect.y2 = Number.MIN_VALUE;

            graph.forEachNode(ensureNodeInitialized);
        },

        onGraphChanged = function(changes) {
            for (var i = 0; i < changes.length; ++i) {
                var change = changes[i];
                if (change.changeType === 'add' && change.node) {
                    ensureNodeInitialized(change.node);
                }
            }
        },

        initLayout = function () {
            updateNodePositions();
            graph.addEventListener('changed', onGraphChanged);
        };

    return {
        /**
         * Attempts to layout graph within given number of iterations.
         *
         * @param {integer} [iterationsCount] number of algorithm's iterations.
         *  The constant layout ignores this parameter.
         */
        run : function (iterationsCount) {
            this.step();
        },

        /**
         * One step of layout algorithm.
         */
        step : function () {
            updateNodePositions();

            return false; // no need to continue.
        },

        /**
         * Returns rectangle structure {x1, y1, x2, y2}, which represents
         * current space occupied by graph.
         */
        getGraphRect : function () {
            return graphRect;
        },

        /**
         * Request to release all resources
         */
        dispose : function () {
            graph.removeEventListener('change', onGraphChanged);
        },

        // Layout specific methods:

        /**
         * Based on argument either update default node placement callback or
         * attempts to place given node using current placement callback.
         * Setting new node callback triggers position update for all nodes.
         *
         * @param {Object} newPlaceNodeCallbackOrNode - if it is a function then
         * default node placement callback is replaced with new one. Node placement
         * callback has a form of function (node) {}, and is expected to return an
         * object with x and y properties set to numbers.
         *
         * Otherwise if it's not a function the argument is treated as graph node
         * and current node placement callback will be used to place it.
         */
        placeNode : function (newPlaceNodeCallbackOrNode) {
            if (typeof newPlaceNodeCallbackOrNode === 'function') {
                placeNodeCallback = newPlaceNodeCallbackOrNode;
                updateNodePositions();
                return this;
            }

            // it is not a request to update placeNodeCallback, trying to place
            // a node using current callback:
            return placeNodeCallback(newPlaceNodeCallbackOrNode);
        }

    };
};
/**
 * @fileOverview Defines a graph renderer that uses CSS based drawings.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.View = Viva.Graph.View || {};

/**
 * This is heart of the rendering. Class accepts graph to be rendered and rendering settings.
 * It monitors graph changes and depicts them accordingly.
 *
 * @param graph - Viva.Graph.graph() object to be rendered.
 * @param settings - rendering settings, composed from the following parts (with their defaults shown):
 *   settings = {
 *     // Represents a module that is capable of displaying graph nodes and links.
 *     // all graphics has to correspond to defined interface and can be later easily
 *     // replaced for specific needs (e.g. adding WebGL should be piece of cake as long
 *     // as WebGL has implemented required interface). See svgGraphics for example.
 *     // NOTE: current version supports Viva.Graph.View.cssGraphics() as well.
 *     graphics : Viva.Graph.View.svgGraphics(),
 *
 *     // Where the renderer should draw graph. Container size matters, because
 *     // renderer will attempt center graph to that size. Also graphics modules
 *     // might depend on it.
 *     container : document.body,
 *
 *     // Layout algorithm to be used. The algorithm is expected to comply with defined
 *     // interface and is expected to be iterative. Renderer will use it then to calculate
 *     // grpaph's layout. For examples of the interface refer to Viva.Graph.Layout.forceDirected()
 *     layout : Viva.Graph.Layout.forceDirected(),
 *
 *     // Directs renderer to display links. Usually rendering links is the slowest part of this
 *     // library. So if you don't need to display links, consider settings this property to false.
 *     renderLinks : true,
 *
 *     // Number of layout iterations to run before displaying the graph. The bigger you set this number
 *     // the closer to ideal position graph will apper first time. But be careful: for large graphs
 *     // it can freeze the browser.
 *     prerender : 0
 *   }
 */
Viva.Graph.View.renderer = function (graph, settings) {
    // TODO: This class is getting hard to understand. Consider refactoring.
    // TODO: I have a technical debt here: fix scaling/recentring! Currently it's total mess.
    var FRAME_INTERVAL = 30;

    settings = settings || {};

    var layout = settings.layout,
        graphics = settings.graphics,
        container = settings.container,
        inputManager,
        animationTimer,
        rendererInitialized = false,
        updateCenterRequired = true,

        currentStep = 0,
        totalIterationsCount = 0,
        isStable = false,
        userInteraction = false,

        viewPortOffset = {
            x : 0,
            y : 0
        },

        transform = {
            offsetX : 0,
            offsetY : 0,
            scale : 1
        };

    var prepareSettings = function () {
            container = container || window.document.body;
            layout = layout || Viva.Graph.Layout.forceDirected(graph);
            graphics = graphics || Viva.Graph.View.svgGraphics(graph, {container : container});

            if (!settings.hasOwnProperty('renderLinks')) {
                settings.renderLinks = true;
            }

            settings.prerender = settings.prerender || 0;
            inputManager = (graphics.inputManager || Viva.Input.domInputManager)(graph, graphics);
        },
        // Cache positions object to prevent GC pressure
        cachedFromPos = {x : 0, y : 0, node: null},
        cachedToPos = {x : 0, y : 0, node: null},
        cachedNodePos = { x: 0, y: 0},
        windowEvents = Viva.Graph.Utils.events(window),
        publicEvents = Viva.Graph.Utils.events({}).extend(),
        graphEvents,
        containerDrag,


        renderLink = function (link) {
            var fromNode = graph.getNode(link.fromId),
                toNode = graph.getNode(link.toId);

            if (!fromNode || !toNode) {
                return;
            }

            cachedFromPos.x = fromNode.position.x;
            cachedFromPos.y = fromNode.position.y;
            cachedFromPos.node = fromNode;

            cachedToPos.x = toNode.position.x;
            cachedToPos.y = toNode.position.y;
            cachedToPos.node = toNode;

            graphics.updateLinkPosition(link.ui, cachedFromPos, cachedToPos);
        },

        renderNode = function (node) {
            cachedNodePos.x = node.position.x;
            cachedNodePos.y = node.position.y;

            graphics.updateNodePosition(node.ui, cachedNodePos);
        },

        renderGraph = function () {
            graphics.beginRender();
            if (settings.renderLinks && !graphics.omitLinksRendering) {
                graph.forEachLink(renderLink);
            }

            graph.forEachNode(renderNode);
            graphics.endRender();
        },

        onRenderFrame = function () {
            isStable = layout.step() && !userInteraction;
            renderGraph();

            return !isStable;
        },

        renderIterations = function (iterationsCount) {
            if (animationTimer) {
                totalIterationsCount += iterationsCount;
                return;
            }

            if (iterationsCount) {
                totalIterationsCount += iterationsCount;

                animationTimer = Viva.Graph.Utils.timer(function () {
                    return onRenderFrame();
                }, FRAME_INTERVAL);
            } else {
                currentStep = 0;
                totalIterationsCount = 0;
                animationTimer = Viva.Graph.Utils.timer(onRenderFrame, FRAME_INTERVAL);
            }
        },

        resetStable = function () {
            isStable = false;
            animationTimer.restart();
        },

        prerender = function () {
            // To get good initial positions for the graph
            // perform several prerender steps in background.
            var i;
            if (typeof settings.prerender === 'number' && settings.prerender > 0) {
                for (i = 0; i < settings.prerender; i += 1) {
                    layout.step();
                }
            }
        },

        updateCenter = function () {
            var graphRect = layout.getGraphRect(),
                containerSize = Viva.Graph.Utils.getDimension(container);

            viewPortOffset.x = viewPortOffset.y = 0;
            transform.offsetX = containerSize.width / 2 - (graphRect.x2 + graphRect.x1) / 2;
            transform.offsetY = containerSize.height / 2 - (graphRect.y2 + graphRect.y1) / 2;
            graphics.graphCenterChanged(transform.offsetX + viewPortOffset.x, transform.offsetY + viewPortOffset.y);

            updateCenterRequired = false;
        },

        createNodeUi = function (node) {
            var nodeUI = graphics.node(node);
            node.ui = nodeUI;
            graphics.initNode(nodeUI);

            renderNode(node);
        },

        removeNodeUi = function (node) {
            if (node.hasOwnProperty('ui')) {
                graphics.releaseNode(node.ui);

                node.ui = null;
                delete node.ui;
            }
        },

        createLinkUi = function (link) {
            var linkUI = graphics.link(link);
            link.ui = linkUI;
            graphics.initLink(linkUI);

            if (!graphics.omitLinksRendering) {
                renderLink(link);
            }
        },

        removeLinkUi = function (link) {
            if (link.hasOwnProperty('ui')) {
                graphics.releaseLink(link.ui);
                link.ui = null;
                delete link.ui;
            }
        },

        listenNodeEvents = function (node) {
            var wasPinned = false;

            // TODO: This may not be memory efficient. Consider reusing handlers object.
            inputManager.bindDragNDrop(node, {
                onStart : function () {
                    wasPinned = node.isPinned;
                    node.isPinned = true;
                    userInteraction = true;
                    resetStable();
                },
                onDrag : function (e, offset) {
                    node.position.x += offset.x / transform.scale;
                    node.position.y += offset.y / transform.scale;
                    userInteraction = true;

                    renderGraph();
                },
                onStop : function () {
                    node.isPinned = wasPinned;
                    userInteraction = false;
                }
            });
        },

        releaseNodeEvents = function (node) {
            inputManager.bindDragNDrop(node, null);
        },

        initDom = function () {
            graphics.init(container);

            graph.forEachNode(createNodeUi);

            if (settings.renderLinks) {
                graph.forEachLink(createLinkUi);
            }
        },

        releaseDom = function () {
            graphics.release(container);
        },

        processNodeChange = function (change) {
            var node = change.node;

            if (change.changeType === 'add') {
                createNodeUi(node);
                listenNodeEvents(node);
                if (updateCenterRequired) {
                    updateCenter();
                }
            } else if (change.changeType === 'remove') {
                releaseNodeEvents(node);
                removeNodeUi(node);
                if (graph.getNodesCount() === 0) {
                    updateCenterRequired = true; // Next time when node is added - center the graph.
                }
            } else if (change.changeType === 'update') {
                releaseNodeEvents(node);
                removeNodeUi(node);

                createNodeUi(node);
                listenNodeEvents(node);
            }
        },

        processLinkChange = function (change) {
            var link = change.link;
            if (change.changeType === 'add') {
                if (settings.renderLinks) { createLinkUi(link); }
            } else if (change.changeType === 'remove') {
                if (settings.renderLinks) { removeLinkUi(link); }
            } else if (change.changeType === 'update') {
                throw 'Update type is not implemented. TODO: Implement me!';
            }
        },

        onGraphChanged = function (changes) {
            var i, change;
            for (i = 0; i < changes.length; i += 1) {
                change = changes[i];
                if (change.node) {
                    processNodeChange(change);
                } else if (change.link) {
                    processLinkChange(change);
                }
            }

            resetStable();
        },

        onWindowResized = function () {
            updateCenter();
            onRenderFrame();
        },

        releaseContainerDragManager = function () {
            if (containerDrag) {
                containerDrag.release();
                containerDrag = null;
            }
        },

        releaseGraphEvents = function () {
            if (graphEvents) {
                // Interesting.. why is it not null? Anyway:
                graphEvents.stop('changed', onGraphChanged);
                graphEvents = null;
            }
        },

        listenToEvents = function () {
            windowEvents.on('resize', onWindowResized);

            releaseContainerDragManager();
            containerDrag = Viva.Graph.Utils.dragndrop(container);
            containerDrag.onDrag(function (e, offset) {
                viewPortOffset.x += offset.x;
                viewPortOffset.y += offset.y;
                graphics.translateRel(offset.x, offset.y);

                renderGraph();
            });

            containerDrag.onScroll(function (e, scaleOffset, scrollPoint) {
                var scaleFactor = Math.pow(1 + 0.4, scaleOffset < 0 ? -0.2 : 0.2);
                transform.scale = graphics.scale(scaleFactor, scrollPoint);

                renderGraph();
                publicEvents.fire('scale', transform.scale);
            });

            graph.forEachNode(listenNodeEvents);

            releaseGraphEvents();
            graphEvents = Viva.Graph.Utils.events(graph);
            graphEvents.on('changed', onGraphChanged);
        },

        stopListenToEvents = function () {
            rendererInitialized = false;
            releaseGraphEvents();
            releaseContainerDragManager();
            windowEvents.stop('resize', onWindowResized);
            publicEvents.removeAllListeners();
            animationTimer.stop();

            graph.forEachLink(function (link) {
                if (settings.renderLinks) { removeLinkUi(link); }
            });

            graph.forEachNode(function (node) {
                releaseNodeEvents(node);
                removeNodeUi(node);
            });

            layout.dispose();
            releaseDom();
        };

    return {
        /**
         * Performs rendering of the graph.
         *
         * @param iterationsCount if specified renderer will run only given number of iterations
         * and then stop. Otherwise graph rendering is performed infinitely.
         *
         * Note: if rendering stopped by used started dragging nodes or new nodes were added to the
         * graph renderer will give run more iterations to reflect changes.
         */
        run : function (iterationsCount) {

            if (!rendererInitialized) {
                prepareSettings();
                prerender();

                updateCenter();
                initDom();
                listenToEvents();

                rendererInitialized = true;
            }

            renderIterations(iterationsCount);

            return this;
        },

        reset : function () {
            graphics.resetScale();
            updateCenter();
            transform.scale = 1;
        },

        pause : function () {
            animationTimer.stop();
        },

        resume : function () {
            animationTimer.restart();
        },

        rerender : function () {
            renderGraph();
            return this;
        },

        /**
         * Removes this renderer and deallocates all resources/timers
         */
        dispose : function () {
            stopListenToEvents(); // I quit!
        },

        on : function (eventName, callback) {
            publicEvents.addEventListener(eventName, callback);
            return this;
        },

        off : function (eventName, callback) {
            publicEvents.removeEventListener(eventName, callback);
            return this;
        }
    };
};
Viva.Graph.serializer = function () {
    var checkJSON = function () {
            if (typeof JSON === 'undefined' || !JSON.stringify || !JSON.parse) {
                throw 'JSON serializer is not defined.';
            }
        },

        nodeTransformStore = function (node) {
            return { id : node.id, data: node.data };
        },

        linkTransformStore = function (link) {
            return {
                fromId : link.fromId,
                toId: link.toId,
                data : link.data
            };
        },

        nodeTransformLoad = function (node) {
            return node;
        },

        linkTransformLoad = function (link) {
            return link;
        };

    return {
        /**
         * Saves graph to JSON format.
         *
         * NOTE: ECMAScript 5 (or alike) JSON object is required to be defined
         * to get proper output.
         *
         * @param graph to be saved in JSON format.
         * @param nodeTransform optional callback function(node) which returns what should be passed into nodes collection
         * @param linkTransform optional callback functions(link) which returns what should be passed into the links collection
         */
        storeToJSON : function (graph, nodeTransform, linkTransform) {
            if (!graph) { throw 'Graph is not defined'; }
            checkJSON();

            nodeTransform = nodeTransform || nodeTransformStore;
            linkTransform = linkTransform || linkTransformStore;

            var store = {
                nodes : [],
                links : []
            };

            graph.forEachNode(function (node) { store.nodes.push(nodeTransform(node)); });
            graph.forEachLink(function (link) { store.links.push(linkTransform(link)); });

            return JSON.stringify(store);
        },

        /**
         * Restores graph from JSON string created by storeToJSON() method.
         *
         * NOTE: ECMAScript 5 (or alike) JSON object is required to be defined
         * to get proper output.
         *
         * @param jsonString is a string produced by storeToJSON() method.
         * @param nodeTransform optional callback function(node) which accepts deserialized node and returns object with
         *        'id' and 'data' properties.
         * @param linkTransform optional callback functions(link) which accepts deserialized link and returns link object with
         *        'fromId', 'toId' and 'data' properties.
         */
        loadFromJSON : function (jsonString, nodeTransform, linkTransform) {
            if (typeof jsonString !== 'string') { throw 'String expected in loadFromJSON() method'; }
            checkJSON();

            nodeTransform = nodeTransform || nodeTransformLoad;
            linkTransform = linkTransform || linkTransformLoad;

            var store = JSON.parse(jsonString),
                graph = Viva.Graph.graph(),
                i;

            if (!store || !store.nodes || !store.links) { throw 'Passed json string does not represent valid graph'; }

            for (i = 0; i < store.nodes.length; ++i) {
                var parsedNode = nodeTransform(store.nodes[i]);
                if (!parsedNode.hasOwnProperty('id')) { throw 'Graph node format is invalid. Node.id is missing'; }

                graph.addNode(parsedNode.id, parsedNode.data);
            }

            for (i = 0; i < store.links.length; ++i) {
                var link = linkTransform(store.links[i]);
                if (!link.hasOwnProperty('fromId') || !link.hasOwnProperty('toId')) { throw 'Graph link format is invalid. Both fromId and toId are required'; }

                graph.addLink(link.fromId, link.toId, link.data);
            }

            return graph;
        }
    };
};
/**
 * @fileOverview Centrality calcuation algorithms.
 * 
 * @see http://en.wikipedia.org/wiki/Centrality
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.centrality = function () {
    var singleSourceShortestPath = function (graph, node, oriented) {
            // I'm using the same naming convention used in http://www.inf.uni-konstanz.de/algo/publications/b-fabc-01.pdf
            // sorry about cryptic names.
            var P = {}, // predcessors lists. 
                S = [],
                sigma = {},
                d = {},
                Q = [node.id],
                v,
                dV,
                sigmaV,
                processNode = function (w) {
                    // w found for the first time?
                    if (!d.hasOwnProperty(w.id)) {
                        Q.push(w.id);
                        d[w.id] = dV + 1;
                    }
                    // Shortest path to w via v?
                    if (d[w.id] === dV + 1) {
                        sigma[w.id] += sigmaV;
                        P[w.id].push(v);
                    }
                };

            graph.forEachNode(function (t) {
                P[t.id] = [];
                sigma[t.id] = 0;
            });

            d[node.id] = 0;
            sigma[node.id] = 1;

            while (Q.length) { // Using BFS to find shortest paths
                v = Q.shift();
                dV = d[v];
                sigmaV = sigma[v];

                S.push(v);
                graph.forEachLinkedNode(v, processNode, oriented);
            }

            return {
                S : S,
                P : P,
                sigma : sigma
            };
        },

        accumulate = function (betweenness, shortestPath, s) {
            var delta = {},
                S = shortestPath.S,
                i,
                w,
                coeff,
                pW,
                v;

            for (i = 0; i < S.length; i += 1) {
                delta[S[i]] = 0;
            }

            // S returns vertices in order of non-increasing distance from s
            while (S.length) {
                w = S.pop();
                coeff = (1 + delta[w]) / shortestPath.sigma[w];
                pW = shortestPath.P[w];

                for (i = 0; i < pW.length; i += 1) {
                    v = pW[i];
                    delta[v] += shortestPath.sigma[v] * coeff;
                }

                if (w !== s) {
                    betweenness[w] += delta[w];
                }
            }
        },

        sortBetweennes = function (b) {
            var sorted = [],
                key;
            for (key in b) {
                if (b.hasOwnProperty(key)) {
                    sorted.push({ key : key, value : b[key]});
                }
            }

            return sorted.sort(function (x, y) { return y.value - x.value; });
        };

    return {

        /**
         * Compute the shortest-path betweenness centrality for all nodes in a graph.
         * 
         * Betweenness centrality of a node `n` is the sum of the fraction of all-pairs 
         * shortest paths that pass through `n`. Runtime O(n * v) for non-weighted graphs.
         *
         * @see http://en.wikipedia.org/wiki/Centrality#Betweenness_centrality
         * 
         * @see A Faster Algorithm for Betweenness Centrality. 
         *      Ulrik Brandes, Journal of Mathematical Sociology 25(2):163-177, 2001.
         *      http://www.inf.uni-konstanz.de/algo/publications/b-fabc-01.pdf
         * 
         * @see Ulrik Brandes: On Variants of Shortest-Path Betweenness 
         *      Centrality and their Generic Computation.
         *      Social Networks 30(2):136-145, 2008.
         *      http://www.inf.uni-konstanz.de/algo/publications/b-vspbc-08.pdf
         * 
         * @see Ulrik Brandes and Christian Pich: Centrality Estimation in Large Networks.
         *      International Journal of Bifurcation and Chaos 17(7):2303-2318, 2007.
         *      http://www.inf.uni-konstanz.de/algo/publications/bp-celn-06.pdf
         * 
         * @param graph for which we are calculating betweenness centrality. Non-weighted graphs are only supported 
         */
        betweennessCentrality : function (graph) {
            var betweennes = {},
                shortestPath;
            graph.forEachNode(function (node) {
                betweennes[node.id] = 0;
            });

            graph.forEachNode(function (node) {
                shortestPath = singleSourceShortestPath(graph, node);
                accumulate(betweennes, shortestPath, node);
            });

            return sortBetweennes(betweennes);
        },

        /**
         * Calculates graph nodes degree centrality (in/out or both).
         * 
         * @see http://en.wikipedia.org/wiki/Centrality#Degree_centrality
         * 
         * @param graph for which we are calculating centrality.
         * @param kind optional parameter. Valid values are
         *   'in'  - calculate in-degree centrality
         *   'out' - calculate out-degree centrality
         *         - if it's not set generic degree centrality is calculated
         */
        degreeCentrality : function (graph, kind) {
            var calcDegFunction,
                sortedDegrees = [],
                result = [],
                degree;

            kind = (kind || 'both').toLowerCase();
            if (kind === 'in') {
                calcDegFunction = function (links, nodeId) {
                    var total = 0,
                        i;
                    for (i = 0; i < links.length; i += 1) {
                        total += (links[i].toId === nodeId) ? 1 : 0;
                    }
                    return total;
                };
            } else if (kind === 'out') {
                calcDegFunction = function (links, nodeId) {
                    var total = 0,
                        i;
                    for (i = 0; i < links.length; i += 1) {
                        total += (links[i].fromId === nodeId) ? 1 : 0;
                    }
                    return total;
                };
            } else if (kind === 'both') {
                calcDegFunction = function (links) {
                    return links.length;
                };
            } else {
                throw 'Expected centrality degree kind is: in, out or both';
            }

            graph.forEachNode(function (node) {
                var links = graph.getLinks(node.id),
                    nodeDeg = calcDegFunction(links, node.id);

                if (!sortedDegrees.hasOwnProperty(nodeDeg)) {
                    sortedDegrees[nodeDeg] = [node.id];
                } else {
                    sortedDegrees[nodeDeg].push(node.id);
                }
            });

            for (degree in sortedDegrees) {
                if (sortedDegrees.hasOwnProperty(degree)) {
                    var nodes = sortedDegrees[degree],
                        j;
                    if (nodes) {
                        for (j = 0; j < nodes.length; ++j) {
                            result.unshift({key : nodes[j], value : parseInt(degree, 10)});
                        }
                    }
                }
            }

            return result;
        }
    };
};/**
 * @fileOverview Community structure detection algorithms
 * 
 * @see http://en.wikipedia.org/wiki/Community_structure
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.community = function () {
    return {
        /**
         * Implementation of Speaker-listener Label Propagation Algorithm (SLPA) of
         * Jierui Xie and Boleslaw K. Szymanski. 
         * 
         * @see http://arxiv.org/pdf/1109.5720v3.pdf
         * @see https://sites.google.com/site/communitydetectionslpa/ 
         */
        slpa : function (graph, T, r) {
            var algorithm = Viva.Graph._community.slpaAlgorithm(graph, T, r);
            return algorithm.run();
        }
    };
};Viva.Graph._community = {};

/**
 * Implementation of Speaker-listener Label Propagation Algorithm (SLPA) of
 * Jierui Xie and Boleslaw K. Szymanski.
 *
 * @see http://arxiv.org/pdf/1109.5720v3.pdf
 * @see https://sites.google.com/site/communitydetectionslpa/
 */
Viva.Graph._community.slpaAlgorithm = function (graph, T, r) {
    T = T || 100; // number of evaluation iterations. Should be at least 20. Influence memory consumption by O(n * T);
    r = r || 0.3; // community threshold on scale from 0 to 1. Value greater than 0.5 result in disjoint communities.

    var random = Viva.random(1331782216905),
        shuffleRandom = Viva.random('Greeting goes to you, ', 'dear reader'),

        calculateCommunities = function (nodeMemory, threshold) {
            var communities = [];
            nodeMemory.forEachUniqueWord(function (word, count) {
                if (count > threshold) {
                    communities.push({name : word, probability : count / T });
                } else {
                    return true; // stop enumeration, nothing more popular after this word.
                }
            });

            return communities;
        },

        init = function (graph) {
            var algoNodes = [];
            graph.forEachNode(function (node) {
                var memory = Viva.Graph._community.occuranceMap(random);
                memory.add(node.id);

                node.slpa = { memory : memory  };
                algoNodes.push(node.id);
            });

            return algoNodes;
        },

        evaluate = function (graph, nodes) {
            var shuffle = Viva.randomIterator(nodes, shuffleRandom),
                t,

               /**
                * One iteration of SLPA.
                */
                processNode = function (nodeId) {
                    var listner = graph.getNode(nodeId),
                        saidWords = Viva.Graph._community.occuranceMap(random);

                    graph.forEachLinkedNode(nodeId, function (speakerNode) {
                        var word = speakerNode.slpa.memory.getRandomWord();
                        saidWords.add(word);
                    });

                    // selecting the most popular label from what it observed in the current step
                    var heard = saidWords.getMostPopularFair();
                    listner.slpa.memory.add(heard);
                };

            for (t = 0; t < T - 1; ++t) { // -1 is because one 'step' was during init phase
                shuffle.forEach(processNode);
            }
        },

        postProcess = function (graph) {
            var communities = {};

            graph.forEachNode(function (node) {
                var nodeCommunities = calculateCommunities(node.slpa.memory, r * T),
                    i;

                for (i = 0; i < nodeCommunities.length; ++i) {
                    var communityName = nodeCommunities[i].name;
                    if (communities.hasOwnProperty(communityName)) {
                        communities[communityName].push(node.id);
                    } else {
                        communities[communityName] = [node.id];
                    }
                }

                node.communities = nodeCommunities; // TODO: I doesn't look right to augment node's properties. No?

                // Speaking of memory. Node memory created by slpa is really expensive. Release it:
                node.slpa = null;
                delete node.slpa;
            });

            return communities;
        };

    return {

        /**
         * Executes SLPA algorithm. The function returns dictionary of discovered communities:
         * {
         *     'communityName1' : [nodeId1, nodeId2, .., nodeIdN],
         *     'communityName2' : [nodeIdK1, nodeIdK2, .., nodeIdKN],
         *     ...
         * };
         *
         * After algorithm is done each node is also augmented with new property 'communities':
         *
         * node.communities = [
         *      {name: 'communityName1', probability: 0.78},
         *      {name: 'communityName2', probability: 0.63},
         *     ...
         * ];
         *
         * 'probability' is always higher than 'r' parameter and denotes level of confidence
         * with which we think node belongs to community.
         *
         * Runtime is O(T * m), where m is total number of edges, and T - number of algorithm iterations.
         *
         */
        run : function () {
            var nodes = init(graph);

            evaluate(graph, nodes);

            return postProcess(graph);
        }
    };
};

/**
 * A data structure which serves as node memory during SLPA execution. The main idea is to
 * simplify operations on memory such as
 *  - add word to memory,
 *  - get random word from memory, with probablity proportional to word occurrence in the memory
 *  - get the most popular word in memory
 *
 * TODO: currently this structure is extremely inefficient in terms of memory. I think it could be
 * optimized.
 */
Viva.Graph._community.occuranceMap = function (random) {
    random = random || Viva.random();

    var wordsCount = {},
        allWords = [],
        dirtyPopularity = false,
        uniqueWords = [],

        rebuildPopularityArray = function () {
            var key;

            uniqueWords.length = 0;
            for (key in wordsCount) {
                if (wordsCount.hasOwnProperty(key)) {
                    uniqueWords.push(key);
                }
            }

            uniqueWords.sort(function (x, y) {
                var result = wordsCount[y] - wordsCount[x];
                if (result) {
                    return result;
                }

                // Not only number of occurances matters but order of keys also does.
                // for ... in implementation in different browsers results in different
                // order, and if we want to have same categories accross all browsers
                // we should order words by key names too:
                if (x < y) { return -1; }
                if (x > y) { return 1; }

                return 0;
            });
        },

        ensureUniqueWordsUpdated = function () {
            if (dirtyPopularity) {
                rebuildPopularityArray();
                dirtyPopularity = false;
            }
        };

    return {

        /**
         * Adds a new word to the collection of words.
         */
        add : function (word) {
            word = String(word);
            if (wordsCount.hasOwnProperty(word)) {
                wordsCount[word] += 1;
            } else {
                wordsCount[word] = 1;
            }

            allWords.push(word);
            dirtyPopularity = true;
        },

        /**
         * Gets number of occurances for a given word. If word is not present in the dictionary
         * zero is returned.
         */
        getWordCount : function (word) {
            return wordsCount[word] || 0;
        },

        /**
         * Gets the most popular word in the map. If multiple words are at the same position
         * random word among them is choosen.
         *
         */
        getMostPopularFair : function () {
            if (allWords.length === 1) {
                return allWords[0]; // optimizes speed for simple case.
            }

            ensureUniqueWordsUpdated();

            var maxCount = 0,
                i;

            for (i = 1; i < uniqueWords.length; ++i) {
                if (wordsCount[uniqueWords[i - 1]] !== wordsCount[uniqueWords[i]]) {
                    break; // other words are less popular... not interested.
                } else {
                    maxCount += 1;
                }
            }

            maxCount += 1;  // to include upper bound. i.e. random words between [0, maxCount] (not [0, maxCount) ).
            return uniqueWords[random.next(maxCount)];
        },

        /**
         * Selects a random word from map with probability proportional
         * to the occurrence frequency of words.
         */
        getRandomWord : function () {
            if (allWords.length === 0) {
                throw 'The occurance map is empty. Cannot get empty word';
            }

            return allWords[random.next(allWords.length)];
        },

        /**
         * Enumerates all unique words in the map, and calls
         *  callback(word, occuranceCount) function on each word. Callback
         * can return true value to stop enumeration.
         *
         * Note: enumeration is guaranteed in to run in decreasing order.
         */
        forEachUniqueWord : function (callback) {
            if (typeof callback !== 'function') {
                throw 'Function callback is expected to enumerate all words';
            }
            var i;

            ensureUniqueWordsUpdated();

            for (i = 0; i < uniqueWords.length; ++i) {
                var word = uniqueWords[i],
                    count = wordsCount[word];

                var stop = callback(word, count);
                if (stop) {
                    break;
                }
            }
        }
    };
};/**
 * @fileOverview Contains collection of graph generators.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.generator = function () {

    return {
        /**
         * Generates complete graph Kn.
         *
         * @param n represents number of nodes in the complete graph.
         */
        complete : function (n) {
            if (!n || n < 1) {
                throw { message: "At least two nodes expected for complete graph" };
            }

            var g = Viva.Graph.graph(),
                i,
                j;

            g.Name = "Complete K" + n;

            for (i = 0; i < n; ++i) {
                for (j = i + 1; j < n; ++j) {
                    if (i !== j) {
                        g.addLink(i, j);
                    }
                }
            }

            return g;
        },

        /**
         * Generates complete bipartite graph K n,m. Each node in the
         * first partition is connected to all nodes in the second partition.
         *
         * @param n represents number of nodes in the first graph partition
         * @param m represents number of nodes in the second graph partition
         */
        completeBipartite : function (n, m) {
            if (!n || !m || n < 0 || m < 0) {
                throw { message: "Graph dimensions are invalid. Number of nodes in each partition should be greate than 0" };
            }

            var g = Viva.Graph.graph(),
                i,
                j;

            g.Name = "Complete K " + n + "," + m;
            for (i = 0; i < n; ++i) {
                for (j = n; j < n + m; ++j) {
                    g.addLink(i, j);
                }
            }

            return g;
        },
        /**
         * Generates a graph in a form of a ladder with n steps.
         *
         * @param n number of steps in the ladder.
         */
        ladder : function (n) {
            if (!n || n < 0) {
                throw { message: "Invalid number of nodes" };
            }

            var g = Viva.Graph.graph(),
                i;
            g.Name = "Ladder graph " + n;

            for (i = 0; i < n - 1; ++i) {
                g.addLink(i, i + 1);
                // first row
                g.addLink(n + i, n + i + 1);
                // second row
                g.addLink(i, n + i);
                // ladder"s step
            }

            g.addLink(n - 1, 2 * n - 1);
            // last step in the ladder;

            return g;
        },

        /**
         * Generates a graph in a form of a circular ladder with n steps.
         *
         * @param n number of steps in the ladder.
         */
        circularLadder : function (n) {
            if (!n || n < 0) {
                throw { message: "Invalid number of nodes" };
            }

            var g = this.ladder(n);
            g.Name = "Circular ladder graph " + n;

            g.addLink(0, n - 1);
            g.addLink(n, 2 * n - 1);
            return g;
        },
        /**
         * Generates a graph in a form of a grid with n rows and m columns.
         *
         * @param n number of rows in the graph.
         * @param m number of columns in the graph.
         */
        grid: function (n, m) {
            var g = Viva.Graph.graph(),
                i,
                j;
            g.Name = "Grid graph " + n + "x" + m;
            for (i = 0; i < n; ++i) {
                for (j = 0; j < m; ++j) {
                    var node = i + j * n;
                    if (i > 0) { g.addLink(node, i - 1 + j * n); }
                    if (j > 0) { g.addLink(node, i + (j - 1) * n); }
                }
            }

            return g;
        },

        path: function (n) {
            if (!n || n < 0) {
                throw { message: "Invalid number of nodes" };
            }

            var g = Viva.Graph.graph(),
                i;
            g.Name = "Path graph " + n;
            g.addNode(0);

            for (i = 1; i < n; ++i) {
                g.addLink(i - 1, i);
            }

            return g;
        },

        lollipop: function (m, n) {
            if (!n || n < 0 || !m || m < 0) {
                throw { message: "Invalid number of nodes" };
            }

            var g = this.complete(m),
                i;
            g.Name = "Lollipop graph. Head x Path " + m + "x" + n;

            for (i = 0; i < n; ++i) {
                g.addLink(m + i - 1, m + i);
            }

            return g;
        },

        /**
         * Creates balanced binary tree with n levels.
         */
        balancedBinTree: function (n) {
            var g = Viva.Graph.graph(),
                count = Math.pow(2, n),
                level;
            g.Name = "Balanced bin tree graph " + n;

            for (level = 1; level < count; ++level) {
                var root = level,
                    left = root * 2,
                    right = root * 2 + 1;

                g.addLink(root, left);
                g.addLink(root, right);
            }

            return g;
        },
        /**
         * Generates a graph with n nodes and 0 links.
         *
         * @param n number of nodes in the graph.
         */
        randomNoLinks : function (n) {
            if (!n || n < 0) {
                throw { message: "Invalid number of nodes" };
            }

            var g = Viva.Graph.graph(),
                i;
            g.Name = "Random graph, no Links: " + n;
            for (i = 0; i < n; ++i) {
                g.addNode(i);
            }

            return g;
        }
    };
};
/**
 * @fileOverview Defines a graph renderer that uses CSS based drawings.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */
// The file tries to conform generic interface:
/*jshint unused: false */

Viva.Graph.View = Viva.Graph.View || {};

/**
 * Performs css-based graph rendering. This module does not perform
 * layout, but only visualizes nodes and edeges of the graph.
 *
 * NOTE: Most likely I will remove this graphics engine due to superior svg support.
 * In certain cases it doesn't work and require further imporvments:
 *  * does not properly work for dragging.
 *  * does not support scaling.
 *  * does not support IE versions prior to IE9.
 *
 */
Viva.Graph.View.cssGraphics = function () {
    var container, // Where graph will be rendered
        OLD_IE = "OLD_IE",
        offsetX,
        offsetY,
        scaleX = 1,
        scaleY = 1,

        transformName = (function () {
			var browserName = Viva.BrowserInfo.browser,
                prefix,
                version;

            switch (browserName) {
            case "mozilla":
                prefix = "Moz";
                break;
            case "webkit":
                prefix = "webkit";
                break;
            case "opera":
                prefix = "O";
                break;
            case "msie":
                version = Viva.BrowserInfo.version.split(".")[0];
                if (version > 8) {
                    prefix = "ms";
                } else {
                    return OLD_IE;
                }
                break;
            }

            if (prefix) { // CSS3
                return prefix + "Transform";
            }
            // Unknown browser
            return null;
        }()),

       /**
        * Returns a function (ui, x, y, angleRad).
        *
        * The function attempts to rotate "ui" dom element on "angleRad" radians
        * and position it to "x" "y" coordinates.
        *
        * Operation works in most modern browsers that support transform css style
        * and IE.
        * */
        positionLink = (function () {
            if (transformName === OLD_IE) { // This is old IE, use filters
                return function (ui, x, y, angleRad) {
                    var cos = Math.cos(angleRad),
                        sin = Math.sin(angleRad);

                    // IE 6, 7 and 8 are screwed up when it comes to transforms;
                    // I could not find justification for their choice of "floating"
                    // matrix transform origin. The following ugly code was written
                    // out of complete dispair.
                    if (angleRad < 0) {
                        angleRad = 2 * Math.PI + angleRad;
                    }

                    if (angleRad < Math.PI / 2) {
                        ui.style.left = x + "px";
                        ui.style.top = y + "px";
                    } else if (angleRad < Math.PI) {
                        ui.style.left = x - (ui.clientWidth) * Math.cos(Math.PI - angleRad);
                        ui.style.top = y;
                    } else if (angleRad < (Math.PI + Math.PI / 2)) {
                        ui.style.left = x - (ui.clientWidth) * Math.cos(Math.PI - angleRad);
                        ui.style.top = y + (ui.clientWidth) * Math.sin(Math.PI - angleRad);
                    } else {
                        ui.style.left = x;
                        ui.style.top = y + ui.clientWidth * Math.sin(Math.PI - angleRad);
                    }
                    ui.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\"auto expand\"," + "M11=" + cos + ", M12=" + (-sin) + "," + "M21=" + sin + ", M22=" + cos + ");";
                };
            }

            if (transformName) { // Modern CSS3 browser
                return function (ui, x, y, angleRad) {
                    ui.style.left = x + "px";
                    ui.style.top = y + "px";

                    ui.style[transformName] = "rotate(" + angleRad + "rad)";
                    ui.style[transformName + "Origin"] = "left";
                };
            }

            return function (ui, x, y, angleRad) {
                // Don't know how to rotate links in other browsers.
            };
        }()),

        nodeBuilder = function (node) {
            var nodeUI = window.document.createElement("div");
            nodeUI.setAttribute("class", "node");
            return nodeUI;
        },

        nodePositionCallback = function (nodeUI, pos) {
            // TODO: Remove magic 5. It should be half of the width or height of the node.
            nodeUI.style.left = pos.x - 5 + "px";
            nodeUI.style.top = pos.y - 5 + "px";
        },

        linkPositionCallback = function (linkUI, fromPos, toPos) {
            var dx = fromPos.x - toPos.x,
                dy = fromPos.y - toPos.y,
                length = Math.sqrt(dx * dx + dy * dy);

            linkUI.style.height = "1px";
            linkUI.style.width = length + "px";

            positionLink(linkUI, toPos.x, toPos.y, Math.atan2(dy, dx));
        },

        linkBuilder = function (link) {
            var linkUI = window.document.createElement("div");
            linkUI.setAttribute("class", "link");

            return linkUI;
        },

        updateTransform = function () {
            if (container) {
                if (transformName && transformName !== OLD_IE) {
                    var transform = "matrix(" + scaleX + ", 0, 0," + scaleY + "," + offsetX + "," + offsetY + ")";
                    container.style[transformName] = transform;
                } else {
                    throw "Not implemented. TODO: Implement OLD_IE Filter based transform";
                }
            }
        };

    return {
        /**
         * Sets the collback that creates node representation or creates a new node
         * presentation if builderCallbackOrNode is not a function.
         *
         * @param builderCallbackOrNode a callback function that accepts graph node
         * as a parameter and must return an element representing this node. OR
         * if it's not a function it's treated as a node to which DOM element should be created.
         *
         * @returns If builderCallbackOrNode is a valid callback function, instance of this is returned;
         * Otherwise a node representation is returned for the passed parameter.
         */
        node : function (builderCallbackOrNode) {
            if (builderCallbackOrNode && typeof builderCallbackOrNode !== "function") {
                return nodeBuilder(builderCallbackOrNode);
            }

            nodeBuilder = builderCallbackOrNode;

            return this;
        },

        /**
         * Sets the collback that creates link representation or creates a new link
         * presentation if builderCallbackOrLink is not a function.
         *
         * @param builderCallbackOrLink a callback function that accepts graph link
         * as a parameter and must return an element representing this link. OR
         * if it's not a function it's treated as a link to which DOM element should be created.
         *
         * @returns If builderCallbackOrLink is a valid callback function, instance of this is returned;
         * Otherwise a link representation is returned for the passed parameter.
         */
        link : function (builderCallbackOrLink) {
            if (builderCallbackOrLink && typeof builderCallbackOrLink !== "function") {
                return linkBuilder(builderCallbackOrLink);
            }

            linkBuilder = builderCallbackOrLink;
            return this;
        },

        /**
         * Default input manager listens to DOM events to process nodes drag-n-drop
         */
        inputManager : Viva.Input.domInputManager,

        /**
         * Sets translate operation that should be applied to all nodes and links.
         */
        graphCenterChanged : function (x, y) {
            offsetX = x;
            offsetY = y;
            updateTransform();
        },

        translateRel : function (dx, dy) {
            offsetX += dx;
            offsetY += dy;
            updateTransform();
        },

        scale : function (x, y) {
            // TODO: implement me
            return 1;
        },

        resetScale : function () {
            // TODO: implement me
            return this;
        },

        /**
         * Called every before renderer starts rendering.
         */
        beginRender : function () {},

        /**
         * Called every time when renderer finishes one step of rendering.
         */
        endRender : function () {},
        /**
         * Allows to override default position setter for the node with a new
         * function. newPlaceCallback(node, position) is function which
         * is used by updateNode().
         */
        placeNode : function (newPlaceCallback) {
            nodePositionCallback = newPlaceCallback;
            return this;
        },

        placeLink : function (newPlaceLinkCallback) {
            linkPositionCallback = newPlaceLinkCallback;
            return this;
        },

        /**
         * Called by Viva.Graph.View.renderer to let concrete graphic output
         * providers prepare to render.
         */
        init : function (parentContainer) {
            container = parentContainer;
            updateTransform();
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render given link of the graph
        *
        * @param linkUI visual representation of the link created by link() execution.
        */
        initLink : function (linkUI) {
            if (container.childElementCount > 0) {
                container.insertBefore(linkUI, container.firstChild);
            } else {
                container.appendChild(linkUI);
            }
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider remove link from rendering surface.
        *
        * @param linkUI visual representation of the link created by link() execution.
        **/
        releaseLink : function (linkUI) {
            container.removeChild(linkUI);
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render given node of the graph.
        *
        * @param nodeUI visual representation of the node created by node() execution.
        **/
        initNode : function (nodeUI) {
            container.appendChild(nodeUI);
        },

        /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider remove node from rendering surface.
        *
        * @param nodeUI visual representation of the node created by node() execution.
        **/
        releaseNode : function (nodeUI) {
            container.removeChild(nodeUI);
        },

        /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider place given node to recommended position pos {x, y};
        */
        updateNodePosition : function (node, pos) {
            nodePositionCallback(node, pos);
        },

        /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider place given link of the graph
        */
        updateLinkPosition : function (link, fromPos, toPos) {
            linkPositionCallback(link, fromPos, toPos);
        }
    };
};
/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

/**
 * Simple wrapper over svg object model API, to shorten the usage syntax.
 */
Viva.Graph.svg = function (element) {
    var svgns = "http://www.w3.org/2000/svg",
        xlinkns = "http://www.w3.org/1999/xlink",
        svgElement = element;

    if (typeof element === "string") {
        svgElement = window.document.createElementNS(svgns, element);
    }

    if (svgElement.vivagraphAugmented) {
        return svgElement;
    }

    svgElement.vivagraphAugmented = true;

    // Augment svg element (TODO: it's not safe - what if some function already exists on the prototype?):

    /**
     * Gets an svg attribute from an element if value is not specified.
     * OR sets a new value to the given attribute.
     *
     * @param name - svg attribute name;
     * @param value - value to be set;
     *
     * @returns svg element if both name and value are specified; or value of the given attribute
     * if value parameter is missing.
     */
    svgElement.attr = function (name, value) {
        if (arguments.length === 2) {
            if (value !== null) {
                svgElement.setAttributeNS(null, name, value);
            } else {
                svgElement.removeAttributeNS(null, name);
            }

            return svgElement;
        }

        return svgElement.getAttributeNS(null, name);
    };

    svgElement.append = function (element) {
        var child = Viva.Graph.svg(element);
        svgElement.appendChild(child);
        return child;
    };

    svgElement.text = function (textContent) {
        if (typeof textContent !== "undefined") {
            svgElement.textContent = textContent;
            return svgElement;
        }
        return svgElement.textContent;
    };

    svgElement.link = function (target) {
        if (arguments.length) {
            svgElement.setAttributeNS(xlinkns, "xlink:href", target);
            return svgElement;
        }

        return svgElement.getAttributeNS(xlinkns, "xlink:href");
    };

    svgElement.children = function (selector) {
        var wrappedChildren = [],
            childrenCount = svgElement.childNodes.length,
            i,
            j;

        if (selector === undefined && svgElement.hasChildNodes()) {
            for (i = 0; i < childrenCount; i++) {
                wrappedChildren.push(Viva.Graph.svg(svgElement.childNodes[i]));
            }
        } else if (typeof selector === "string") {
            var classSelector = (selector[0] === "."),
                idSelector    = (selector[0] === "#"),
                tagSelector   = !classSelector && !idSelector;

            for (i = 0; i < childrenCount; i++) {
                var el = svgElement.childNodes[i];

                // pass comments, text nodes etc.
                if (el.nodeType === 1) {
                    var classes = el.attr("class"),
                        id = el.attr("id"),
                        tagName = el.nodeName;

                    if (classSelector && classes) {
                        classes = classes.replace(/\s+/g, " ").split(" ");
                        for (j = 0; j < classes.length; j++) {
                            if (classSelector && classes[j] === selector.substr(1)) {
                                wrappedChildren.push(Viva.Graph.svg(el));
                                break;
                            }
                        }
                    } else if (idSelector && id === selector.substr(1)) {
                        wrappedChildren.push(Viva.Graph.svg(el));
                        break;
                    } else if (tagSelector && tagName === selector) {
                        wrappedChildren.push(Viva.Graph.svg(el));
                    }

                    wrappedChildren = wrappedChildren.concat(Viva.Graph.svg(el).children(selector));
                }
            }

            if (idSelector && wrappedChildren.length === 1) {
                return wrappedChildren[0];
            }
        }

        return wrappedChildren;
    };

    return svgElement;
};
/**
 * @fileOverview Defines a graph renderer that uses SVG based drawings.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.View = Viva.Graph.View || {};

/**
 * Performs svg-based graph rendering. This module does not perform
 * layout, but only visualizes nodes and edeges of the graph.
 */
Viva.Graph.View.svgGraphics = function () {
    var svgContainer,
        svgRoot,
        offsetX,
        offsetY,
        actualScale = 1,
/*jshint unused: false */
        nodeBuilder = function (node) {
            return Viva.Graph.svg("rect")
                     .attr("width", 10)
                     .attr("height", 10)
                     .attr("fill", "#00a2e8");
        },

        nodePositionCallback = function (nodeUI, pos) {
            // TODO: Remove magic 5. It should be halfo of the width or height of the node.
            nodeUI.attr("x", pos.x - 5)
                  .attr("y", pos.y - 5);
        },

        linkBuilder = function (link) {
            return Viva.Graph.svg("line")
                              .attr("stroke", "#999");
        },

        linkPositionCallback = function (linkUI, fromPos, toPos) {
            linkUI.attr("x1", fromPos.x)
                  .attr("y1", fromPos.y)
                  .attr("x2", toPos.x)
                  .attr("y2", toPos.y);
        },

        fireRescaled = function (graphics) {
            // TODO: maybe we shall copy changes?
            graphics.fire("rescaled");
        },

        updateTransform = function () {
            if (svgContainer) {
                var transform = "matrix(" + actualScale + ", 0, 0," + actualScale + "," + offsetX + "," + offsetY + ")";
                svgContainer.attr("transform", transform);
            }
        };

    var graphics = {
        /**
         * Sets the collback that creates node representation or creates a new node
         * presentation if builderCallbackOrNode is not a function.
         *
         * @param builderCallbackOrNode a callback function that accepts graph node
         * as a parameter and must return an element representing this node. OR
         * if it's not a function it's treated as a node to which DOM element should be created.
         *
         * @returns If builderCallbackOrNode is a valid callback function, instance of this is returned;
         * Otherwise a node representation is returned for the passed parameter.
         */
        node : function (builderCallbackOrNode) {

            if (builderCallbackOrNode && typeof builderCallbackOrNode !== "function") {
                return nodeBuilder(builderCallbackOrNode);
            }

            nodeBuilder = builderCallbackOrNode;

            return this;
        },

        /**
         * Sets the collback that creates link representation or creates a new link
         * presentation if builderCallbackOrLink is not a function.
         *
         * @param builderCallbackOrLink a callback function that accepts graph link
         * as a parameter and must return an element representing this link. OR
         * if it's not a function it's treated as a link to which DOM element should be created.
         *
         * @returns If builderCallbackOrLink is a valid callback function, instance of this is returned;
         * Otherwise a link representation is returned for the passed parameter.
         */
        link : function (builderCallbackOrLink) {
            if (builderCallbackOrLink && typeof builderCallbackOrLink !== "function") {
                return linkBuilder(builderCallbackOrLink);
            }

            linkBuilder = builderCallbackOrLink;
            return this;
        },

        /**
         * Allows to override default position setter for the node with a new
         * function. newPlaceCallback(nodeUI, position) is function which
         * is used by updateNodePosition().
         */
        placeNode : function (newPlaceCallback) {
            nodePositionCallback = newPlaceCallback;
            return this;
        },

        placeLink : function (newPlaceLinkCallback) {
            linkPositionCallback = newPlaceLinkCallback;
            return this;
        },

        /**
         * Called every before renderer starts rendering.
         */
        beginRender : function () {},

        /**
         * Called every time when renderer finishes one step of rendering.
         */
        endRender : function () {},

        /**
         * Sets translate operation that should be applied to all nodes and links.
         */
        graphCenterChanged : function (x, y) {
            offsetX = x;
            offsetY = y;
            updateTransform();
        },

        /**
         * Default input manager listens to DOM events to process nodes drag-n-drop
         */
        inputManager : Viva.Input.domInputManager,

        translateRel : function (dx, dy) {
            var p = svgRoot.createSVGPoint(),
                t = svgContainer.getCTM(),
                origin = svgRoot.createSVGPoint().matrixTransform(t.inverse());

            p.x = dx;
            p.y = dy;

            p = p.matrixTransform(t.inverse());
            p.x = (p.x - origin.x) * t.a;
            p.y = (p.y - origin.y) * t.d;

            t.e += p.x;
            t.f += p.y;

            var transform = "matrix(" + t.a + ", 0, 0," + t.d + "," + t.e + "," + t.f + ")";
            svgContainer.attr("transform", transform);
        },

        scale : function (scaleFactor, scrollPoint) {
            var p = svgRoot.createSVGPoint();
            p.x = scrollPoint.x;
            p.y = scrollPoint.y;

            p = p.matrixTransform(svgContainer.getCTM().inverse()); // translate to svg coordinates

            // Compute new scale matrix in current mouse position
            var k = svgRoot.createSVGMatrix().translate(p.x, p.y).scale(scaleFactor).translate(-p.x, -p.y),
                t = svgContainer.getCTM().multiply(k);

            actualScale = t.a;
            offsetX = t.e;
            offsetY = t.f;
            var transform = "matrix(" + t.a + ", 0, 0," + t.d + "," + t.e + "," + t.f + ")";
            svgContainer.attr("transform", transform);

            fireRescaled(this);
            return actualScale;
        },

        resetScale : function () {
            actualScale = 1;
            var transform = "matrix(1, 0, 0, 1, 0, 0)";
            svgContainer.attr("transform", transform);
            fireRescaled(this);
            return this;
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render.
        */
        init : function (container) {
            svgRoot = Viva.Graph.svg("svg");

            svgContainer = Viva.Graph.svg("g")
                 .attr("buffered-rendering", "dynamic");

            svgRoot.appendChild(svgContainer);
            container.appendChild(svgRoot);
            updateTransform();
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider release occupied resources.
        */
        release : function (container) {
            if (svgRoot && container) {
                container.removeChild(svgRoot);
            }
        },

        /**
         * Called by Viva.Graph.View.renderer to let concrete graphic output
         * provider prepare to render given link of the graph
         *
         * @param linkUI visual representation of the link created by link() execution.
         */
        initLink : function (linkUI) {
            if (!linkUI) { return; }
            if (svgContainer.childElementCount > 0) {
                svgContainer.insertBefore(linkUI, svgContainer.firstChild);
            } else {
                svgContainer.appendChild(linkUI);
            }
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider remove link from rendering surface.
        *
        * @param linkUI visual representation of the link created by link() execution.
        **/
        releaseLink : function (linkUI) {
            svgContainer.removeChild(linkUI);
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render given node of the graph.
        *
        * @param nodeUI visual representation of the node created by node() execution.
        **/
        initNode : function (nodeUI) {
            svgContainer.appendChild(nodeUI);
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider remove node from rendering surface.
        *
        * @param nodeUI visual representation of the node created by node() execution.
        **/
        releaseNode : function (nodeUI) {
            svgContainer.removeChild(nodeUI);
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider place given node UI to recommended position pos {x, y};
        */
        updateNodePosition : function (nodeUI, pos) {
            nodePositionCallback(nodeUI, pos);
        },

        /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider place given link of the graph. Pos objects are {x, y};
        */
        updateLinkPosition : function (link, fromPos, toPos) {
            linkPositionCallback(link, fromPos, toPos);
        },

        /**
         * Returns root svg element.
         *
         * Note: This is internal method specific to this renderer
         * TODO: Rename this to getGraphicsRoot() to be uniform accross graphics classes
         */
        getSvgRoot : function () {
            return svgRoot;
        }
    };

    // Let graphics fire events before we return it to the caller.
    Viva.Graph.Utils.events(graphics).extend();

    return graphics;
};
/**
 * @fileOverview I used this class to render links UI within
 * node. Lesser SVG elements is proven to improve performance
 * but I'm not happy with the code result here. Probably this class
 * will be removed from future versions.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.View.svgNodeFactory = function (graph) {
    var defaultColor = "#999",
        geom = Viva.Graph.geom(),

        attachCustomContent = function (nodeUI) {
            nodeUI.size = {w: 10, h: 10};
            nodeUI.append("rect")
                .attr("width", nodeUI.size.w)
                .attr("height", nodeUI.size.h)
                .attr("stroke", "orange")
                .attr("fill", "orange");
        },

        nodeSize = function (nodeUI) {
            return nodeUI.size;
        };


    return {
        node : function (node) {
            var nodeUI = Viva.Graph.svg("g");

            attachCustomContent(nodeUI, node);
            nodeUI.nodeId = node.id;
            return nodeUI;
        },

        link : function (link) {
            var fromNode = graph.getNode(link.fromId),
                nodeUI = fromNode && fromNode.ui;

            if (nodeUI && !nodeUI.linksContainer) {
                var nodeLinks = Viva.Graph.svg("path")
                                    .attr("stroke", defaultColor);
                nodeUI.linksContainer = nodeLinks;
                return nodeLinks;
            }

            return null;
        },

        /**
         * Sets a callback function for custom nodes contnet.
         * @param conentCreator(nodeUI, node) - callback function which returns a node content UI.
         *  Image, for example.
         * @param sizeProvider(nodeUI) - a callback function which accepts nodeUI returned by
         *  contentCreator and returns it"s custom rectangular size.
         *
         */
        customContent : function (contentCreator, sizeProvider) {
            if (typeof contentCreator !== "function" ||
                typeof sizeProvider !== "function") {
                throw "Two functions expected: contentCreator(nodeUI, node) and size(nodeUI)";
            }

            attachCustomContent = contentCreator;
            nodeSize = sizeProvider;
        },

        placeNode : function (nodeUI, fromNodePos) {
            var linksPath = "",
                fromNodeSize = nodeSize(nodeUI);

            graph.forEachLinkedNode(nodeUI.nodeId, function (linkedNode, link) {
                if (!linkedNode.position || !linkedNode.ui) {
                    return; // not yet defined - ignore.
                }

                if (linkedNode.ui === nodeUI) {
                    return; // incoming link - ignore;
                }
                if (link.fromId !== nodeUI.nodeId) {
                    return; // we process only outgoing links.
                }

                var toNodeSize = nodeSize(linkedNode.ui),
                    toNodePos = linkedNode.position;

                var from = geom.intersectRect(
                        fromNodePos.x - fromNodeSize.w / 2, // left
                        fromNodePos.y - fromNodeSize.h / 2, // top
                        fromNodePos.x + fromNodeSize.w / 2, // right
                        fromNodePos.y + fromNodeSize.h / 2, // bottom
                        fromNodePos.x,
                        fromNodePos.y,
                        toNodePos.x,
                        toNodePos.y
                    ) || fromNodePos;

                var to = geom.intersectRect(
                        toNodePos.x - toNodeSize.w / 2, // left
                        toNodePos.y - toNodeSize.h / 2, // top
                        toNodePos.x + toNodeSize.w / 2, // right
                        toNodePos.y + toNodeSize.h / 2, // bottom
                        toNodePos.x,
                        toNodePos.y,
                        fromNodePos.x,
                        fromNodePos.y
                    ) || toNodePos;

                linksPath += "M" + Math.round(from.x) + " " + Math.round(from.y) +
                             "L" + Math.round(to.x) + " " + Math.round(to.y);
            });

            nodeUI.attr("transform",
                        "translate(" + (fromNodePos.x - fromNodeSize.w / 2) + ", " +
                         (fromNodePos.y - fromNodeSize.h / 2) + ")");
            if (linksPath !== "" && nodeUI.linksContainer) {
                nodeUI.linksContainer.attr("d", linksPath);
            }
        }

    };
};
/**
 * @fileOverview Utility functions for webgl rendering.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.webgl = function (gl) {
    var createShader = function (shaderText, type) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, shaderText);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                var msg = gl.getShaderInfoLog(shader);
                window.alert(msg);
                throw msg;
            }

            return shader;
        };

    return {
        createProgram : function (vertexShaderSrc, fragmentShaderSrc) {
            var program = gl.createProgram(),
                vs = createShader(vertexShaderSrc, gl.VERTEX_SHADER),
                fs = createShader(fragmentShaderSrc, gl.FRAGMENT_SHADER);

            gl.attachShader(program, vs);
            gl.attachShader(program, fs);
            gl.linkProgram(program);

            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                var msg = gl.getShaderInfoLog(program);
                window.alert(msg);
                throw msg;
            }

            return program;
        },

        extendArray : function (buffer, itemsInBuffer, elementsPerItem) {
            if ((itemsInBuffer  + 1) * elementsPerItem > buffer.length) {
                // Every time we run out of space create new array twice bigger.
                // TODO: it seems buffer size is limited. Consider using multiple arrays for huge graphs
                var extendedArray = new Float32Array(buffer.length * elementsPerItem * 2);
                extendedArray.set(buffer);

                return extendedArray;
            }

            return buffer;
        },

        copyArrayPart : function (array, to, from, elementsCount) {
            var i;
            for (i = 0; i < elementsCount; ++i) {
                array[to + i] = array[from + i];
            }
        },

        swapArrayPart : function (array, from, to, elementsCount) {
            var i;
            for (i = 0; i < elementsCount; ++i) {
                var tmp = array[from + i];
                array[from + i] = array[to + i];
                array[to + i] = tmp;
            }
        },

        getLocations : function (program, uniformOrAttributeNames) {
            var foundLocations = {},
                i;
            for (i = 0; i < uniformOrAttributeNames.length; ++i) {
                var name = uniformOrAttributeNames[i],
                    location = -1;
                if (name.indexOf("a_") === 0) {
                    location = gl.getAttribLocation(program, name);
                    if (location === -1) {
                        throw "Program doesn't have required attribute: " + name;
                    }

                    foundLocations[name.slice(2)] = location;
                } else if (name.indexOf("u_") === 0) {
                    location = gl.getUniformLocation(program, name);
                    if (location === null) {
                        throw "Program doesn't have required uniform: " + name;
                    }

                    foundLocations[name.slice(2)] = location;
                } else {
                    throw "Couldn't figure out your intent. All uniforms should start with 'u_' prefix, and attributes with 'a_'";
                }
            }

            return foundLocations;
        },

        context : gl
    };
};
/**
 * @fileOverview Defines a model objects to represents graph rendering
 * primitives in webglGraphics.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.View.WebglUtils = function () { };

/**
 * Parses various color strings and returns color value used in webgl shaders.
 */
Viva.Graph.View.WebglUtils.prototype.parseColor = function (color) {
    var parsedColor = 0x009ee8ff;

    if (typeof color === 'string' && color) {
        if (color.length === 4) { // #rgb
            color = color.replace(/([^#])/g, '$1$1'); // duplicate each letter except first #.
        }
        if (color.length === 9) { // #rrggbbaa
            parsedColor = parseInt(color.substr(1), 16);
        } else if (color.length === 7) { // or #rrggbb.
            parsedColor = (parseInt(color.substr(1), 16) << 8) | 0xff;
        } else {
            throw 'Color expected in hex format with preceding "#". E.g. #00ff00. Got value: ' + color;
        }
    } else if (typeof color === 'number') {
        parsedColor = color;
    }

    return parsedColor;
};

Viva.Graph.View._webglUtil = new Viva.Graph.View.WebglUtils(); // reuse this instance internally.

/**
 * Defines a webgl line. This class has no rendering logic at all,
 * it's just passed to corresponding shader and the shader should
 * figure out how to render it.
 *
 * @see Viva.Graph.View.webglLinkShader.position
 */
Viva.Graph.View.webglLine = function (color) {
    return {
        /**
         * Gets or sets color of the line. If you set this property externally
         * make sure it always come as integer of 0xRRGGBBAA format
         */
        color : Viva.Graph.View._webglUtil.parseColor(color)
    };
};

/**
 * Can be used as a callback in the webglGraphics.node() function, to
 * create a custom looking node.
 *
 * @param size - size of the node in pixels.
 * @param color - color of the node in '#rrggbbaa' or '#rgb' format.
 */
Viva.Graph.View.webglSquare = function (size, color) {
    return {
        /**
         * Gets or sets size of the sqare side.
         */
        size : typeof size === 'number' ? size : 10,

        /**
         * Gets or sets color of the square.
         */
        color : Viva.Graph.View._webglUtil.parseColor(color)
    };
};

/**
 * Represents a model for image.
 */
Viva.Graph.View.webglImage = function (size, src) {
    return {
        /**
         * Gets texture index where current image is placed.s
         */
        _texture : 0,

        /**
         * Gets offset in the texture where current image is placed.
         */
        _offset : 0,

        /**
         * Gets size of the square with the image.
         */
        size : typeof size === 'number' ? size : 32,

        /**
         * Source of the image. If image is comming not from your domain
         * certain origin restrictions applies.
         * See http://www.khronos.org/registry/webgl/specs/latest/#4.2 for more details.
         */
        src  : src
    };
};/**
 * @fileOverview Defines a naive form of nodes for webglGraphics class.
 * This form allows to change color of node. Shape of nodes is rectangular.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

/**
 * Defines simple UI for nodes in webgl renderer. Each node is rendered as square. Color and size can be changed.
 */
Viva.Graph.View.webglNodeProgram = function () {
    var ATTRIBUTES_PER_PRIMITIVE = 4, // Primitive is point, x, y, size, color
        // x, y, z - floats, color = uint.
        BYTES_PER_NODE = 3 * Float32Array.BYTES_PER_ELEMENT + Uint32Array.BYTES_PER_ELEMENT,
        nodesFS = [
            'precision mediump float;',
            'varying vec4 color;',

            'void main(void) {',
            '   gl_FragColor = color;',
            '}'
        ].join('\n'),
        nodesVS = [
            'attribute vec3 a_vertexPos;',
            'attribute vec4 a_color;',
            'uniform vec2 u_screenSize;',
            'uniform mat4 u_transform;',
            'varying vec4 color;',

            'void main(void) {',
            '   gl_Position = u_transform * vec4(a_vertexPos.xy/u_screenSize, 0, 1);',
            '   gl_PointSize = a_vertexPos.z * u_transform[0][0];',
            '   color = a_color.abgr;',
            '}'
        ].join('\n'),

        program,
        gl,
        buffer,
        locations,
        utils,
        storage = new ArrayBuffer(16 * BYTES_PER_NODE),
        positions = new Float32Array(storage),
        colors = new Uint32Array(storage),
        nodesCount = 0,
        width,
        height,
        transform,
        sizeDirty,

        ensureEnoughStorage = function () {
            if ((nodesCount + 1) * BYTES_PER_NODE >= storage.byteLength) {
                // Every time we run out of space create new array twice bigger.
                // TODO: it seems buffer size is limited. Consider using multiple arrays for huge graphs
                var extendedStorage = new ArrayBuffer(storage.byteLength * 2),
                    extendedPositions = new Float32Array(extendedStorage),
                    extendedColors = new Uint32Array(extendedStorage);

                extendedColors.set(colors); // should be enough to copy just one view.
                positions = extendedPositions;
                colors = extendedColors;
                storage = extendedStorage;
            }
        };

    return {
        load : function (glContext) {
            gl = glContext;
            utils = Viva.Graph.webgl(glContext);

            program = utils.createProgram(nodesVS, nodesFS);
            gl.useProgram(program);
            locations = utils.getLocations(program, ['a_vertexPos', 'a_color', 'u_screenSize', 'u_transform']);

            gl.enableVertexAttribArray(locations.vertexPos);
            gl.enableVertexAttribArray(locations.color);

            buffer = gl.createBuffer();
        },

        /**
         * Updates position of node in the buffer of nodes.
         *
         * @param idx - index of current node.
         * @param pos - new position of the node.
         */
        position : function (nodeUI, pos) {
            var idx = nodeUI.id;

            positions[idx * ATTRIBUTES_PER_PRIMITIVE] = pos.x;
            positions[idx * ATTRIBUTES_PER_PRIMITIVE + 1] = pos.y;
            positions[idx * ATTRIBUTES_PER_PRIMITIVE + 2] = nodeUI.size;

            colors[idx * ATTRIBUTES_PER_PRIMITIVE + 3] = nodeUI.color;
        },

        updateTransform : function (newTransform) {
            sizeDirty = true;
            transform = newTransform;
        },

        updateSize : function (w, h) {
            width = w;
            height = h;
            sizeDirty = true;
        },

        removeNode : function (node) {
            if (nodesCount > 0) { nodesCount -= 1; }

            if (node.id < nodesCount && nodesCount > 0) {
                // we can use colors as a 'view' into array array buffer.
                utils.copyArrayPart(colors, node.id * ATTRIBUTES_PER_PRIMITIVE, nodesCount * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
            }
        },
/*jshint unused:false */
        createNode : function (node) {
            ensureEnoughStorage();
            nodesCount += 1;
        },

        replaceProperties : function (replacedNode, newNode) {},
/*jshint unused:true */

        render : function () {
            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, storage, gl.DYNAMIC_DRAW);

            if (sizeDirty) {
                sizeDirty = false;
                gl.uniformMatrix4fv(locations.transform, false, transform);
                gl.uniform2f(locations.screenSize, width, height);
            }

            gl.vertexAttribPointer(locations.vertexPos, 3, gl.FLOAT, false, ATTRIBUTES_PER_PRIMITIVE * Float32Array.BYTES_PER_ELEMENT, 0);
            gl.vertexAttribPointer(locations.color, 4, gl.UNSIGNED_BYTE, true, ATTRIBUTES_PER_PRIMITIVE * Float32Array.BYTES_PER_ELEMENT, 3 * 4);

            gl.drawArrays(gl.POINTS, 0, nodesCount);
        }
    };
};/**
 * @fileOverview Defines a naive form of links for webglGraphics class.
 * This form allows to change color of links.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

/**
 * Defines UI for links in webgl renderer.
 */
Viva.Graph.View.webglLinkProgram = function () {
    var ATTRIBUTES_PER_PRIMITIVE = 6, // primitive is Line with two points. Each has x,y and color = 3 * 2 attributes.
        BYTES_PER_LINK = 2 * (2 * Float32Array.BYTES_PER_ELEMENT + Uint32Array.BYTES_PER_ELEMENT), // two nodes * (x, y + color)
        linksFS = [
            'precision mediump float;',
            'varying vec4 color;',
            'void main(void) {',
            '   gl_FragColor = color;',
            '}'
        ].join('\n'),

        linksVS = [
            'attribute vec2 a_vertexPos;',
            'attribute vec4 a_color;',

            'uniform vec2 u_screenSize;',
            'uniform mat4 u_transform;',

            'varying vec4 color;',

            'void main(void) {',
            '   gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0.0, 1.0);',
            '   color = a_color.abgr;',
            '}'
        ].join('\n'),

        program,
        gl,
        buffer,
        utils,
        locations,
        linksCount = 0,
        frontLinkId, // used to track z-index of links.
        storage = new ArrayBuffer(16 * BYTES_PER_LINK),
        positions = new Float32Array(storage),
        colors = new Uint32Array(storage),
        width,
        height,
        transform,
        sizeDirty,

        ensureEnoughStorage = function () {
            // TODO: this is a duplicate of webglNodeProgram code. Extract it to webgl.js
            if ((linksCount+1)*BYTES_PER_LINK > storage.byteLength) {
                // Every time we run out of space create new array twice bigger.
                // TODO: it seems buffer size is limited. Consider using multiple arrays for huge graphs
                var extendedStorage = new ArrayBuffer(storage.byteLength * 2),
                    extendedPositions = new Float32Array(extendedStorage),
                    extendedColors = new Uint32Array(extendedStorage);

                extendedColors.set(colors); // should be enough to copy just one view.
                positions = extendedPositions;
                colors = extendedColors;
                storage = extendedStorage;
            }
        };

    return {
        load : function (glContext) {
            gl = glContext;
            utils = Viva.Graph.webgl(glContext);

            program = utils.createProgram(linksVS, linksFS);
            gl.useProgram(program);
            locations = utils.getLocations(program, ['a_vertexPos', 'a_color', 'u_screenSize', 'u_transform']);

            gl.enableVertexAttribArray(locations.vertexPos);
            gl.enableVertexAttribArray(locations.color);

            buffer = gl.createBuffer();
        },

        position: function (linkUi, fromPos, toPos) {
            var linkIdx = linkUi.id,
                offset = linkIdx * ATTRIBUTES_PER_PRIMITIVE;
            positions[offset] = fromPos.x;
            positions[offset + 1] = fromPos.y;
            colors[offset + 2] = linkUi.color;

            positions[offset + 3] = toPos.x;
            positions[offset + 4] = toPos.y;
            colors[offset + 5] = linkUi.color;
        },

        createLink : function (ui) {
            ensureEnoughStorage();

            linksCount += 1;
            frontLinkId = ui.id;
        },

        removeLink : function (ui) {
            if (linksCount > 0) { linksCount -= 1; }
            // swap removed link with the last link. This will give us O(1) performance for links removal:
            if (ui.id < linksCount && linksCount > 0) {
                // using colors as a view to array buffer is okay here.
                utils.copyArrayPart(colors, ui.id * ATTRIBUTES_PER_PRIMITIVE, linksCount * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
            }
        },

        updateTransform : function (newTransform) {
            sizeDirty = true;
            transform = newTransform;
        },

        updateSize : function (w, h) {
            width = w;
            height = h;
            sizeDirty = true;
        },

        render : function () {
            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, storage, gl.DYNAMIC_DRAW);

            if (sizeDirty) {
                sizeDirty = false;
                gl.uniformMatrix4fv(locations.transform, false, transform);
                gl.uniform2f(locations.screenSize, width, height);
            }

            gl.vertexAttribPointer(locations.vertexPos, 2, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
            gl.vertexAttribPointer(locations.color, 4, gl.UNSIGNED_BYTE, true, 3 * Float32Array.BYTES_PER_ELEMENT, 2 * 4);

            gl.drawArrays(gl.LINES, 0, linksCount * 2);

            frontLinkId = linksCount - 1;
        },

        bringToFront : function (link) {
            if (frontLinkId > link.id) {
                utils.swapArrayPart(positions, link.id * ATTRIBUTES_PER_PRIMITIVE, frontLinkId * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
            }
            if (frontLinkId > 0) {
                frontLinkId -= 1;
            }
        },

        getFrontLinkId : function () {
            return frontLinkId;
        }
    };
};
/**
 * @fileOverview Defines an image nodes for webglGraphics class.
 * Shape of nodes is sqare.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

/**
 * Single texture in the webglAtlas.
 */
Viva.Graph.View.Texture = function (size) {
    this.canvas = window.document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.isDirty = false;
    this.canvas.width = this.canvas.height = size;
};

/**
 * My naive implementation of textures atlas. It allows clients to load
 * multimple images into atlas and get canvas representing all of them.
 *
 * @param tilesPerTexture - indicates how many images can be loaded to one
 *          texture of the atlas. If number of loaded images exceeds this
 *          parameter a new canvas will be created.
 */
Viva.Graph.View.webglAtlas = function (tilesPerTexture) {
    var tilesPerRow = Math.sqrt(tilesPerTexture || 1024) << 0,
        tileSize = tilesPerRow,
        lastLoadedIdx = 1,
        loadedImages = {},
        dirtyTimeoutId,
        skipedDirty = 0,
        textures = [],
        trackedUrls = [],
        that,

        isPowerOf2 = function (n) {
            return (n & (n - 1)) === 0;
        },
        createTexture = function () {
            var texture = new Viva.Graph.View.Texture(tilesPerRow * tileSize);
            textures.push(texture);
        },
        getTileCoordinates = function (absolutePosition) {
            var textureNumber = (absolutePosition / tilesPerTexture) << 0,
                localTileNumber =  (absolutePosition % tilesPerTexture),
                row = (localTileNumber / tilesPerRow) << 0,
                col = (localTileNumber % tilesPerRow);

            return {textureNumber : textureNumber, row : row, col: col};
        },
        markDirtyNow = function () {
            that.isDirty = true;
            skipedDirty = 0;
            dirtyTimeoutId = null;
        },
        markDirty = function () {
            // delay this call, since it results in texture reload
            if (dirtyTimeoutId) {
                window.clearTimeout(dirtyTimeoutId);
                skipedDirty += 1;
                dirtyTimeoutId = null;
            }

            if (skipedDirty > 10) {
                markDirtyNow();
            } else {
                dirtyTimeoutId = window.setTimeout(markDirtyNow, 400);
            }
        },

        copy = function (from, to) {
            var fromCanvas = textures[from.textureNumber].canvas,
                toCtx = textures[to.textureNumber].ctx,
                x = to.col * tileSize,
                y = to.row * tileSize;

            toCtx.drawImage(fromCanvas, from.col * tileSize, from.row * tileSize, tileSize, tileSize, x, y, tileSize, tileSize);
            textures[from.textureNumber].isDirty = true;
            textures[to.textureNumber].isDirty = true;
        },

        drawAt = function (tileNumber, img, callback) {
            var tilePosition = getTileCoordinates(tileNumber),
                coordinates = { offset : tileNumber };

            if (tilePosition.textureNumber >= textures.length) {
                createTexture();
            }
            var currentTexture = textures[tilePosition.textureNumber];

            currentTexture.ctx.drawImage(img, tilePosition.col * tileSize, tilePosition.row * tileSize, tileSize, tileSize);
            trackedUrls[tileNumber] = img.src;

            loadedImages[img.src] = coordinates;
            currentTexture.isDirty = true;

            callback(coordinates);
        };

    if (!isPowerOf2(tilesPerTexture)) {
        throw "Tiles per texture should be power of two.";
    }

    // this is the return object
    that = {
        /**
         * indicates whether atlas has changed texture in it. If true then
         * some of the textures has isDirty flag set as well.
         */
        isDirty : false,

        /**
         * Clears any signs of atlas changes.
         */
        clearDirty : function () {
            var i;
            this.isDirty = false;
            for (i = 0; i < textures.length; ++i) {
                textures[i].isDirty = false;
            }
        },

        /**
         * Removes given url from colleciton of tiles in the atlas.
         */
        remove : function (imgUrl) {
            var coordinates = loadedImages[imgUrl];
            if (!coordinates) { return false; }
            delete loadedImages[imgUrl];
            lastLoadedIdx -= 1;


            if (lastLoadedIdx === coordinates.offset) {
                return true; // Ignore if it's last image in the whole set.
            }

            var tileToRemove = getTileCoordinates(coordinates.offset),
                lastTileInSet = getTileCoordinates(lastLoadedIdx);

            copy(lastTileInSet, tileToRemove);

            var replacedOffset = loadedImages[trackedUrls[lastLoadedIdx]];
            replacedOffset.offset = coordinates.offset;
            trackedUrls[coordinates.offset] = trackedUrls[lastLoadedIdx];

            markDirty();
            return true;
        },

        /**
         * Gets all textures in the atlas.
         */
        getTextures : function () {
            return textures; // I trust you...
        },

        /**
         * Gets coordinates of the given image in the atlas. Coordinates is an object:
         * {offset : int } - where offset is an absolute position of the image in the
         * atlas.
         *
         * Absolute means it can be larger than tilesPerTexture parameter, and in that
         * case clients should get next texture in getTextures() collection.
         */
        getCoordinates : function (imgUrl) {
            return loadedImages[imgUrl];
        },

        /**
         * Asynchronously Loads the image to the atlas. Cross-domain security
         * limitation applies.
         */
        load : function (imgUrl, callback) {
            if (loadedImages.hasOwnProperty(imgUrl)) {
                callback(loadedImages[imgUrl]);
            } else {
                var img = new window.Image(),
                    imgId = lastLoadedIdx;

                lastLoadedIdx += 1;
                img.crossOrigin = "anonymous";
                img.onload = function () {
                    markDirty();
                    drawAt(imgId, img, callback);
                };

                img.src = imgUrl;
            }
        }
    };

    return that;
};

/**
 * Defines simple UI for nodes in webgl renderer. Each node is rendered as an image.
 */
Viva.Graph.View.webglImageNodeProgram = function () {
    var ATTRIBUTES_PER_PRIMITIVE = 18,
        nodesFS = [
            "precision mediump float;",
            "varying vec4 color;",
            "varying vec3 vTextureCoord;",
            "uniform sampler2D u_sampler0;",
            "uniform sampler2D u_sampler1;",
            "uniform sampler2D u_sampler2;",
            "uniform sampler2D u_sampler3;",

            "void main(void) {",
            "   if (vTextureCoord.z == 0.) {",
            "     gl_FragColor = texture2D(u_sampler0, vTextureCoord.xy);",
            "   } else if (vTextureCoord.z == 1.) {",
            "     gl_FragColor = texture2D(u_sampler1, vTextureCoord.xy);",
            "   } else if (vTextureCoord.z == 2.) {",
            "     gl_FragColor = texture2D(u_sampler2, vTextureCoord.xy);",
            "   } else if (vTextureCoord.z == 3.) {",
            "     gl_FragColor = texture2D(u_sampler3, vTextureCoord.xy);",
            "   } else { gl_FragColor = vec4(0, 1, 0, 1); }",
            "}"
        ].join("\n"),

        nodesVS = [
            "attribute vec2 a_vertexPos;",

            "attribute float a_customAttributes;",
            "uniform vec2 u_screenSize;",
            "uniform mat4 u_transform;",
            "uniform float u_tilesPerTexture;",
            "varying vec3 vTextureCoord;",

            "void main(void) {",
            "   gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0, 1);",
            "float corner = mod(a_customAttributes, 4.);",
            "float tileIndex = mod(floor(a_customAttributes / 4.), u_tilesPerTexture);",
            "float tilesPerRow = sqrt(u_tilesPerTexture);",
            "float tileSize = 1./tilesPerRow;",
            "float tileColumn = mod(tileIndex, tilesPerRow);",
            "float tileRow = floor(tileIndex/tilesPerRow);",

            "if(corner == 0.0) {",
            "  vTextureCoord.xy = vec2(0, 1);",
            "} else if(corner == 1.0) {",
            "  vTextureCoord.xy = vec2(1, 1);",
            "} else if(corner == 2.0) {",
            "  vTextureCoord.xy = vec2(0, 0);",
            "} else {",
            "  vTextureCoord.xy = vec2(1, 0);",
            "}",

            "vTextureCoord *= tileSize;",
            "vTextureCoord.x += tileColumn * tileSize;",
            "vTextureCoord.y += tileRow * tileSize;",
            "vTextureCoord.z = floor(floor(a_customAttributes / 4.)/u_tilesPerTexture);",
            "}"
        ].join("\n"),

        tilesPerTexture = 1024, // TODO: Get based on max texture size
        atlas;

    var program,
        gl,
        buffer,
        utils,
        locations,
        nodesCount = 0,
        nodes = new Float32Array(64),
        width,
        height,
        transform,
        sizeDirty,

        refreshTexture = function (texture, idx) {
            if (texture.nativeObject) {
                gl.deleteTexture(texture.nativeObject);
            }

            var nativeObject = gl.createTexture();
            gl.activeTexture(gl["TEXTURE" + idx]);
            gl.bindTexture(gl.TEXTURE_2D, nativeObject);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.canvas);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

            gl.generateMipmap(gl.TEXTURE_2D);
            gl.uniform1i(locations["sampler" + idx], idx);

            texture.nativeObject = nativeObject;
        },

        ensureAtlasTextureUpdated = function () {
            if (atlas.isDirty) {
                var textures = atlas.getTextures(),
                    i;
                for (i = 0; i < textures.length; ++i) {
                    if (textures[i].isDirty || !textures[i].nativeObject) {
                        refreshTexture(textures[i], i);
                    }
                }

                atlas.clearDirty();
            }
        };

    return {
        load : function (glContext) {
            gl = glContext;
            utils = Viva.Graph.webgl(glContext);

            atlas = new Viva.Graph.View.webglAtlas(tilesPerTexture);

            program = utils.createProgram(nodesVS, nodesFS);
            gl.useProgram(program);
            locations = utils.getLocations(program, ["a_vertexPos", "a_customAttributes", "u_screenSize", "u_transform", "u_sampler0", "u_sampler1", "u_sampler2", "u_sampler3", "u_tilesPerTexture"]);

            gl.uniform1f(locations.tilesPerTexture, tilesPerTexture);

            gl.enableVertexAttribArray(locations.vertexPos);
            gl.enableVertexAttribArray(locations.customAttributes);

            buffer = gl.createBuffer();
        },

        /**
         * Updates position of current node in the buffer of nodes.
         *
         * @param idx - index of current node.
         * @param pos - new position of the node.
         */
        position : function (nodeUI, pos) {
            var idx = nodeUI.id * ATTRIBUTES_PER_PRIMITIVE;
            nodes[idx] = pos.x - nodeUI.size;
            nodes[idx + 1] = pos.y - nodeUI.size;
            nodes[idx + 2] = nodeUI._offset * 4;

            nodes[idx + 3] = pos.x + nodeUI.size;
            nodes[idx + 4] = pos.y - nodeUI.size;
            nodes[idx + 5] = nodeUI._offset * 4 + 1;

            nodes[idx + 6] = pos.x - nodeUI.size;
            nodes[idx + 7] = pos.y + nodeUI.size;
            nodes[idx + 8] = nodeUI._offset * 4 + 2;

            nodes[idx + 9] = pos.x - nodeUI.size;
            nodes[idx + 10] = pos.y + nodeUI.size;
            nodes[idx + 11] = nodeUI._offset * 4 + 2;

            nodes[idx + 12] = pos.x + nodeUI.size;
            nodes[idx + 13] = pos.y - nodeUI.size;
            nodes[idx + 14] = nodeUI._offset * 4 + 1;

            nodes[idx + 15] = pos.x + nodeUI.size;
            nodes[idx + 16] = pos.y + nodeUI.size;
            nodes[idx + 17] = nodeUI._offset * 4 + 3;
        },

        createNode : function (ui) {
            nodes = utils.extendArray(nodes, nodesCount, ATTRIBUTES_PER_PRIMITIVE);
            nodesCount += 1;

            var coordinates = atlas.getCoordinates(ui.src);
            if (coordinates) {
                ui._offset = coordinates.offset;
            } else {
                ui._offset = 0;
                // Image is not yet loaded into the atlas. Reload it:
                atlas.load(ui.src, function (coordinates) {
                    ui._offset = coordinates.offset;
                });
            }
        },

        removeNode : function (nodeUI) {
            if (nodesCount > 0) { nodesCount -= 1; }

            if (nodeUI.id < nodesCount && nodesCount > 0) {
                if (nodeUI.src) {
                    atlas.remove(nodeUI.src);
                }

                utils.copyArrayPart(nodes, nodeUI.id * ATTRIBUTES_PER_PRIMITIVE, nodesCount * ATTRIBUTES_PER_PRIMITIVE, ATTRIBUTES_PER_PRIMITIVE);
            }
        },

        replaceProperties : function (replacedNode, newNode) {
            newNode._offset = replacedNode._offset;
        },

        updateTransform : function (newTransform) {
            sizeDirty = true;
            transform = newTransform;
        },

        updateSize : function (w, h) {
            width = w;
            height = h;
            sizeDirty = true;
        },

        render : function () {
            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, nodes, gl.DYNAMIC_DRAW);

            if (sizeDirty) {
                sizeDirty = false;
                gl.uniformMatrix4fv(locations.transform, false, transform);
                gl.uniform2f(locations.screenSize, width, height);
            }

            gl.vertexAttribPointer(locations.vertexPos, 2, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
            gl.vertexAttribPointer(locations.customAttributes, 1, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 2 * 4);

            ensureAtlasTextureUpdated();

            gl.drawArrays(gl.TRIANGLES, 0, nodesCount * 6);
        }
    };
};/**
 * @fileOverview Defines a graph renderer that uses WebGL based drawings.
 *
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Graph.View = Viva.Graph.View || {};

/**
 * Performs webgl-based graph rendering. This module does not perform
 * layout, but only visualizes nodes and edeges of the graph.
 *
 * @param options - to customize graphics  behavior. Currently supported parameter
 *  enableBlending - true by default, allows to use transparency in node/links colors.
 *  preserveDrawingBuffer - false by default, tells webgl to preserve drawing buffer. 
 *                    See https://www.khronos.org/registry/webgl/specs/1.0/#5.2
 */

Viva.Graph.View.webglGraphics = function (options) {
    options = Viva.lazyExtend(options, {
        enableBlending : true,
        preserveDrawingBuffer : false,
        clearColor: false,
        clearColorValue : {
            r : 1,
            g : 1,
            b : 1,
            a : 1
        }
    });

    var container,
        graphicsRoot,
        gl,
        width,
        height,
        nodesCount = 0,
        linksCount = 0,
        transform,
        userPlaceNodeCallback,
        userPlaceLinkCallback,
        nodes = [],
        links = [],
        initCallback,

        linkProgram = Viva.Graph.View.webglLinkProgram(),
        nodeProgram = Viva.Graph.View.webglNodeProgram(),
/*jshint unused: false */
        nodeUIBuilder = function (node) {
            return Viva.Graph.View.webglSquare(); // Just make a square, using provided gl context (a nodeProgram);
        },

        linkUIBuilder = function (link) {
            return Viva.Graph.View.webglLine(0xb3b3b3ff);
        },
/*jshint unused: true */
        updateTransformUniform = function () {
            linkProgram.updateTransform(transform);
            nodeProgram.updateTransform(transform);
        },

        resetScaleInternal = function () {
            transform = [1, 0, 0, 0,
                        0, 1, 0, 0,
                        0, 0, 1, 0,
                        0, 0, 0, 1];
        },

        updateSize = function () {
            if (container && graphicsRoot) {
                const dpr = window.devicePixelRatio || 1;
                width = graphicsRoot.width = Math.max(container.offsetWidth * dpr, 1);
                height = graphicsRoot.height = Math.max(container.offsetHeight * dpr, 1);
                if (gl) {
                    gl.viewport(0, 0, width, height);
                    gl.canvas.style = "width: 100%";
                    gl.canvas.width = width;
                    gl.canvas.height = height;
                }
                if (linkProgram) { linkProgram.updateSize(width / 2, height / 2); }
                if (nodeProgram) { nodeProgram.updateSize(width / 2, height / 2); }
            }
        },

        nodeBuilderInternal = function (node) {
            var nodeId = nodesCount++,
                ui = nodeUIBuilder(node);
            ui.id = nodeId;

            nodeProgram.createNode(ui);

            nodes[nodeId] = node;
            return ui;
        },

        linkBuilderInternal = function (link) {
            var linkId = linksCount++,
                ui = linkUIBuilder(link);
            ui.id = linkId;

            linkProgram.createLink(ui);

            links[linkId] = link;
            return ui;
        },

        fireRescaled = function (graphics) {
            graphics.fire("rescaled");
        };

    var graphics = {
        /**
         * Sets the collback that creates node representation or creates a new node
         * presentation if builderCallbackOrNode is not a function.
         *
         * @param builderCallbackOrNode a callback function that accepts graph node
         * as a parameter and must return an element representing this node. OR
         * if it's not a function it's treated as a node to which DOM element should be created.
         *
         * @returns If builderCallbackOrNode is a valid callback function, instance of this is returned;
         * Otherwise a node representation is returned for the passed parameter.
         */
        node : function (builderCallbackOrNode) {
            if (builderCallbackOrNode && typeof builderCallbackOrNode !== "function") {
                return nodeBuilderInternal(builderCallbackOrNode); // create ui for node using current nodeUIBuilder
            }

            nodeUIBuilder = builderCallbackOrNode; // else replace ui builder with provided function.

            return this;
        },

        /**
         * Sets the collback that creates link representation or creates a new link
         * presentation if builderCallbackOrLink is not a function.
         *
         * @param builderCallbackOrLink a callback function that accepts graph link
         * as a parameter and must return an element representing this link. OR
         * if it's not a function it's treated as a link to which DOM element should be created.
         *
         * @returns If builderCallbackOrLink is a valid callback function, instance of this is returned;
         * Otherwise a link representation is returned for the passed parameter.
         */
        link : function (builderCallbackOrLink) {

            if (builderCallbackOrLink && typeof builderCallbackOrLink !== "function") {
                return linkBuilderInternal(builderCallbackOrLink);
            }

            linkUIBuilder = builderCallbackOrLink;
            return this;
        },

        /**
         * Allows to override default position setter for the node with a new
         * function. newPlaceCallback(nodeUI, position) is function which
         * is used by updateNodePosition().
         */
        placeNode : function (newPlaceCallback) {
            userPlaceNodeCallback = newPlaceCallback;
            return this;
        },

        placeLink : function (newPlaceLinkCallback) {
            userPlaceLinkCallback = newPlaceLinkCallback;
            return this;
        },

        /**
         * Custom input manager listens to mouse events to process nodes drag-n-drop inside WebGL canvas
         */
        inputManager : Viva.Input.webglInputManager,

        /**
         * Called every time before renderer starts rendering.
         */
        beginRender : function () {
            // this function could be replaced by this.init, 
            // based on user options.
        },

        /**
         * Called every time when renderer finishes one step of rendering.
         */
        endRender : function () {
            if (linksCount > 0) {
                linkProgram.render();
            }
            if (nodesCount > 0) {
                nodeProgram.render();
            }
        },

        bringLinkToFront : function (linkUI) {
            var frontLinkId = linkProgram.getFrontLinkId(),
                srcLinkId,
                temp;

            linkProgram.bringToFront(linkUI);

            if (frontLinkId > linkUI.id) {
                srcLinkId = linkUI.id;

                temp = links[frontLinkId];
                links[frontLinkId] = links[srcLinkId];
                links[frontLinkId].ui.id = frontLinkId;
                links[srcLinkId] = temp;
                links[srcLinkId].ui.id = srcLinkId;
            }
        },
/*jshint unused: false */
        /**
         * Sets translate operation that should be applied to all nodes and links.
         */
        graphCenterChanged : function (x, y) {
            updateSize();
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render given link of the graph
        *
        * @param linkUI visual representation of the link created by link() execution.
        */
        initLink : function (linkUI) {
        },
       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render given node of the graph.
        *
        * @param nodeUI visual representation of the node created by node() execution.
        **/
        initNode : function (nodeUI) {
        },
/*jshint unused: true */

        translateRel : function (dx, dy) {
            transform[12] += (2 * transform[0] * dx / width) / transform[0];
            transform[13] -= (2 * transform[5] * dy / height) / transform[5];
            updateTransformUniform();
        },

        scale : function (scaleFactor, scrollPoint) {
            // Transform scroll point to clip-space coordinates:
            var cx = 2 * scrollPoint.x / width - 1,
                cy = 1 - (2 * scrollPoint.y) / height;

            cx -= transform[12];
            cy -= transform[13];

            transform[12] += cx * (1 - scaleFactor);
            transform[13] += cy * (1 - scaleFactor);

            transform[0] *= scaleFactor;
            transform[5] *= scaleFactor;

            updateTransformUniform();
            fireRescaled(this);

            return transform[0];
        },

        resetScale : function () {
            resetScaleInternal();

            if (gl) {
                updateSize();
                // TODO: what is this?
                // gl.useProgram(linksProgram);
                // gl.uniform2f(linksProgram.screenSize, width, height);
                updateTransformUniform();
            }
            return this;
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider prepare to render.
        */
        init : function (c) {
            var contextParameters = {};

            if (options.preserveDrawingBuffer) {
                contextParameters.preserveDrawingBuffer = true;
            }

            container = c;

            graphicsRoot = window.document.createElement("canvas");
            gl = graphicsRoot.getContext("experimental-webgl", contextParameters);
            updateSize();
            resetScaleInternal();
            container.appendChild(graphicsRoot);


            if (!gl) {
                var msg = "Could not initialize WebGL. Seems like the browser doesn't support it.";
                window.alert(msg);
                throw msg;
            }
            if (options.enableBlending) {
                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
                gl.enable(gl.BLEND);
            }
            if (options.clearColor) {
                var color = options.clearColorValue;
                gl.clearColor(color.r, color.g, color.b, color.a);
                // TODO: not the best way, really. Should come up with something better
                // what if we need more updates inisde beginRender, like depth buffer?
                this.beginRender = function () {
                    gl.clear(gl.COLOR_BUFFER_BIT);
                };
            }

            linkProgram.load(gl);
            linkProgram.updateSize(width / 2, height / 2);

            nodeProgram.load(gl);
            nodeProgram.updateSize(width / 2, height / 2);

            updateTransformUniform();

            // Notify the world if someoen waited for update. TODO: should send an event
            if (typeof initCallback === "function") {
                initCallback(graphicsRoot);
            }
        },

        /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider release occupied resources.
        */
        release : function (container) {
            if (graphicsRoot && container) {
                container.removeChild(graphicsRoot);
                // TODO: anything else?
            }
        },

       /**
        * Checks whether webgl is supported by this browser.
        */
        isSupported : function () {
            var c = window.document.createElement("canvas"),
                gl = c && c.getContext && c.getContext("experimental-webgl");
            return gl;
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider remove link from rendering surface.
        *
        * @param linkUI visual representation of the link created by link() execution.
        **/
        releaseLink : function (linkToRemove) {
            if (linksCount > 0) { linksCount -= 1; }

            linkProgram.removeLink(linkToRemove);

            var linkIdToRemove = linkToRemove.id;
            if (linkIdToRemove < linksCount) {
                if (linksCount === 0 || linksCount === linkIdToRemove) {
                    return; // no more links or removed link is the last one.
                }

                // TODO: consider getting rid of this. The only reason why it's here is to update 'ui' property
                // so that renderer will pass proper id in updateLinkPosition.
                links[linkIdToRemove] = links[linksCount];
                links[linkIdToRemove].ui.id = linkIdToRemove;
            }
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider remove node from rendering surface.
        *
        * @param nodeUI visual representation of the node created by node() execution.
        **/
        releaseNode : function (nodeUI) {
            if (nodesCount > 0) { nodesCount -= 1; }

            nodeProgram.removeNode(nodeUI);

            if (nodeUI.id < nodesCount) {
                var nodeIdToRemove = nodeUI.id;
                if (nodesCount === 0 || nodesCount === nodeIdToRemove) {
                    return; // no more nodes or removed node is the last in the list.
                }

                var lastNode = nodes[nodesCount],
                    replacedNode = nodes[nodeIdToRemove];

                nodes[nodeIdToRemove] = lastNode;
                nodes[nodeIdToRemove].ui.id = nodeIdToRemove;

                // Since concrete shaders may cache properties in the ui element
                // we are letting them to make this swap (e.g. image node shader
                // uses this approach to update node's offset in the atlas)
                nodeProgram.replaceProperties(replacedNode.ui, lastNode.ui);
            }
        },

       /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider place given node UI to recommended position pos {x, y};
        */
        updateNodePosition : function (nodeUI, pos) {
            // WebGL coordinate system is different. Would be better
            // to have this transform in the shader code, but it would
            // require every shader to be updated..
            pos.y = -pos.y;
            if (userPlaceNodeCallback) {
                userPlaceNodeCallback(nodeUI, pos);
            }

            nodeProgram.position(nodeUI, pos);
        },

        /**
        * Called by Viva.Graph.View.renderer to let concrete graphic output
        * provider place given link of the graph. Pos objects are {x, y};
        */
        updateLinkPosition : function (link, fromPos, toPos) {
            // WebGL coordinate system is different. Would be better
            // to have this transform in the shader code, but it would
            // require every shader to be updated..
            fromPos.y = -fromPos.y;
            toPos.y = -toPos.y;
            if (userPlaceLinkCallback) {
                userPlaceLinkCallback(link, fromPos, toPos);
            }

            linkProgram.position(link, fromPos, toPos);
        },

        /**
         * Returns root element which hosts graphics.
         */
        getGraphicsRoot : function (callbackWhenReady) {
            // todo: should fire an event, instead of having this context.
            if (typeof callbackWhenReady === "function") {
                if (graphicsRoot) {
                    callbackWhenReady(graphicsRoot);
                } else {
                    initCallback = callbackWhenReady;
                }
            }
            return graphicsRoot;
        },

        /**
         * Updates default shader which renders nodes
         *
         * @param newProgram to use for nodes.
         */
        setNodeProgram : function (newProgram) {
            if (!gl && newProgram) {
                // Nothing created yet. Just set shader to the new one
                // and let initialization logic take care about the rest.
                nodeProgram = newProgram;
            } else if (newProgram) {
                throw "Not implemented. Cannot swap shader on the fly... yet.";
                // TODO: unload old shader and reinit.
            }
        },

        /**
         * Updates default shader which renders links
         *
         * @param newProgram to use for links.
         */
        setLinkProgram : function (newProgram) {
            if (!gl && newProgram) {
                // Nothing created yet. Just set shader to the new one
                // and let initialization logic take care about the rest.
                linkProgram = newProgram;
            } else if (newProgram) {
                throw "Not implemented. Cannot swap shader on the fly... yet.";
                // TODO: unload old shader and reinit.
            }
        },
        getGraphCoordinates : function (graphicsRootPos) {
            // TODO: could be a problem when container has margins?
            // to save memory we modify incoming parameter:
            // point in clipspace coordinates:
            graphicsRootPos.x = 2 * graphicsRootPos.x / width - 1;
            graphicsRootPos.y = 1 - (2 * graphicsRootPos.y) / height;
            // apply transform:
            graphicsRootPos.x = (graphicsRootPos.x - transform[12]) / transform[0];
            graphicsRootPos.y = (graphicsRootPos.y - transform[13]) / transform[5];
            // now transform to graph coordinates:
            graphicsRootPos.x *= width / 2;
            graphicsRootPos.y *= -height / 2;

            return graphicsRootPos;
        }
    };

    // Let graphics fire events before we return it to the caller.
    Viva.Graph.Utils.events(graphics).extend();

    return graphics;
};/**
 * Monitors graph-related mouse input in webgl graphics and notifies subscribers.
 *
 * @param {Viva.Graph.View.webglGraphics} webglGraphics
 * @param {Viva.Graph.graph} graph
 */
Viva.Graph.webglInputEvents = function (webglGraphics, graph) {
    if (webglGraphics.webglInputEvents) {
        // Don't listen twice, if we are already attached to this graphics:
        return webglGraphics.webglInputEvents;
    }

    var preciseCheck = function (node, x, y) {
            if (node.ui && node.ui.size) {
                var pos = node.position,
                    half = node.ui.size;

                return pos.x - half < x && x < pos.x + half &&
                       pos.y - half < y && y < pos.y + half;
            }

            return true;
        },
        mouseCapturedNode = null,

        spatialIndex = Viva.Graph.spatialIndex(graph, preciseCheck),
        mouseEnterCallback = [],
        mouseLeaveCallback = [],
        mouseDownCallback = [],
        mouseUpCallback = [],
        mouseMoveCallback = [],
        clickCallback = [],
        dblClickCallback = [],
        documentEvents = Viva.Graph.Utils.events(window.document),
        prevSelectStart,
        boundRect,

        stopPropagation = function (e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        },

        handleDisabledEvent = function (e) {
            stopPropagation(e);
            return false;
        },

        invoke = function (callbacksChain, args) {
            var i, stopPropagation;
            for (i = 0; i < callbacksChain.length; i += 1) {
                stopPropagation = callbacksChain[i].apply(undefined, args);
                if (stopPropagation) { return true; }
            }
        },

        startListen = function (root) {
            var pos = {x : 0, y : 0},
                lastFound = null,
                lastClickTime = +new Date(),

                handleMouseMove = function (e) {
                    invoke(mouseMoveCallback, [lastFound, e]);
                    pos.x = e.clientX;
                    pos.y = e.clientY;
                },

                handleMouseUp = function () {
                    documentEvents.stop('mousemove', handleMouseMove);
                    documentEvents.stop('mouseup', handleMouseUp);
                },

                updateBoundRect = function () {
                    boundRect = root.getBoundingClientRect();
                };

            window.addEventListener('resize', updateBoundRect);
            updateBoundRect();

            // mouse move inside container serves only to track mouse enter/leave events.
            root.addEventListener('mousemove',
                function (e) {
                    if (mouseCapturedNode) {
                        return;
                    }

                    var cancelBubble = false,
                        node;

                    pos.x = e.clientX - boundRect.left;
                    pos.y = e.clientY - boundRect.top;

                    webglGraphics.getGraphCoordinates(pos);
                    node = spatialIndex.getNodeAt(pos.x, pos.y);

                    if (node && lastFound !== node) {
                        lastFound = node;
                        cancelBubble = cancelBubble || invoke(mouseEnterCallback, [lastFound]);
                    } else if (node === null && lastFound !== node) {
                        cancelBubble = cancelBubble || invoke(mouseLeaveCallback, [lastFound]);
                        lastFound = null;
                    }

                    if (cancelBubble) { stopPropagation(e); }
                });

            root.addEventListener('mousedown',
                function (e) {
                    var cancelBubble = false,
                        args;

                    pos.x = e.clientX - boundRect.left;
                    pos.y = e.clientY - boundRect.top;
                    webglGraphics.getGraphCoordinates(pos);

                    args = [spatialIndex.getNodeAt(pos.x, pos.y), e];
                    if (args[0]) {
                        cancelBubble = invoke(mouseDownCallback, args);
                        // we clicked on a node. Following drag should be handled on document events:
                        documentEvents.on('mousemove', handleMouseMove);
                        documentEvents.on('mouseup', handleMouseUp);

                        prevSelectStart = window.document.onselectstart;

                        window.document.onselectstart = handleDisabledEvent;

                        lastFound = args[0];
                    } else {
                        lastFound = null;
                    }
                    if (cancelBubble) { stopPropagation(e); }
                });

            root.addEventListener('mouseup',
                function (e) {
                    var clickTime = +new Date(),
                        args;

                    pos.x = e.clientX - boundRect.left;
                    pos.y = e.clientY - boundRect.top;
                    webglGraphics.getGraphCoordinates(pos);

                    args = [spatialIndex.getNodeAt(pos.x, pos.y), e];
                    if (args[0]) {
                        window.document.onselectstart = prevSelectStart;

                        if (clickTime - lastClickTime < 400 && args[0] === lastFound) {
                            invoke(dblClickCallback, args);
                        } else {
                            invoke(clickCallback, args);
                        }
                        lastClickTime = clickTime;

                        if (invoke(mouseUpCallback, args)) {
                            stopPropagation(e);
                        }
                    }
                });
        };

    // webgl may not be initialized at this point. Pass callback
    // to start listen after graphics root is ready.
    webglGraphics.getGraphicsRoot(startListen);

    webglGraphics.webglInputEvents = {
        mouseEnter : function (callback) {
            if (typeof callback === 'function') {
                mouseEnterCallback.push(callback);
            }
            return this;
        },
        mouseLeave : function (callback) {
            if (typeof callback === 'function') {
                mouseLeaveCallback.push(callback);
            }
            return this;
        },
        mouseDown : function (callback) {
            if (typeof callback === 'function') {
                mouseDownCallback.push(callback);
            }
            return this;
        },
        mouseUp : function (callback) {
            if (typeof callback === 'function') {
                mouseUpCallback.push(callback);
            }
            return this;
        },
        mouseMove : function (callback) {
            if (typeof callback === 'function') {
                mouseMoveCallback.push(callback);
            }
            return this;
        },
        click : function (callback) {
            if (typeof callback === 'function') {
                clickCallback.push(callback);
            }
            return this;
        },
        dblClick : function (callback) {
            if (typeof callback === 'function') {
                dblClickCallback.push(callback);
            }
            return this;
        },
        mouseCapture : function (node) {
            mouseCapturedNode = node;
        },
        releaseMouseCapture : function () {
            mouseCapturedNode = null;
        }
    };

    return webglGraphics.webglInputEvents;
};
/**
 * @author Andrei Kashcha (aka anvaka) / http://anvaka.blogspot.com
 */

Viva.Input = Viva.Input || {};
Viva.Input.webglInputManager = function (graph, graphics) {
    var inputEvents = Viva.Graph.webglInputEvents(graphics, graph),
        draggedNode = null,
        internalHandlers = {},
        pos = {x : 0, y : 0};

    inputEvents.mouseDown(function (node, e) {
        draggedNode = node;
        pos.x = e.clientX;
        pos.y = e.clientY;

        inputEvents.mouseCapture(draggedNode);

        var handlers = internalHandlers[node.ui.id];
        if (handlers && handlers.onStart) {
            handlers.onStart(e, pos);
        }

        return true;
    }).mouseUp(function (node) {
        inputEvents.releaseMouseCapture(draggedNode);

        draggedNode = null;
        var handlers = internalHandlers[node.ui.id];
        if (handlers && handlers.onStop) {
            handlers.onStop();
        }
        return true;
    }).mouseMove(function (node, e) {
        if (draggedNode) {
            var handlers = internalHandlers[draggedNode.ui.id];
            if (handlers && handlers.onDrag) {
                handlers.onDrag(e, {x : e.clientX - pos.x, y : e.clientY - pos.y });
            }

            pos.x = e.clientX;
            pos.y = e.clientY;
            return true;
        }
    });

    return {
        /**
         * Called by renderer to listen to drag-n-drop events from node. E.g. for CSS/SVG
         * graphics we may listen to DOM events, whereas for WebGL we graphics
         * should provide custom eventing mechanism.
         *
         * @param node - to be monitored.
         * @param handlers - object with set of three callbacks:
         *   onStart: function(),
         *   onDrag: function(e, offset),
         *   onStop: function()
         */
        bindDragNDrop : function (node, handlers) {
            internalHandlers[node.ui.id] = handlers;
        }
    };
};