Dr. Altay Coskun

(function() {
    
    var merge = function() {
        
        var merged = {};
        
        for (var i = 0; i < arguments.length; i++) {
            var source = arguments[i];
            if (typeof source !== 'object') { continue; } // Each argument must be an object
            
            for (var key in source) {
                var value = source[key];
                if (typeof value !== 'object') {
                    // Simple value
                    merged[key] = value;
                } else {
                    // Value is an object
                    if (typeof merged[key] === 'undefined') {
                        merged[key] = deep_copy(value);
                    } else {
                        merged[key] = merge(merged[key], value);
                    }
                }
            }
        }
        
        return merged;
        
    };
    
    window['merge'] = merge;
    
    var deep_copy = function(source) {
        
        var copied = {};
        
        if (typeof source !== 'object') {
            return copied;
        }
        
        for (var key in source) {
            var value = source[key];
            if (typeof value === 'object') {
                value = deep_copy(value);
            }
            copied[key] = value;
        }
        
        return copied;
        
    };
    
    var nextNodeID = (function() {
        var nodes = 0;
        return function() {
            return 'ft_node_' + nodes++;
        }
    })()
    
    window['FamilyTreeJS'] = {
        
        AUTHOR: 'Chandler Prall <chandler.prall@gmail.com>',
        VERSION: '.1',
        
        FamilyTree: function() {
        
            /**
             * FamilyTree private members
             */
            var tree_element = null;
            var scroll_info = { 'scrolling':false, 'x1':0, 'x2':0, 'y1':0, 'y2':0 };
            
            this.config = {
                compressable: true,         
                node: {
                    fontcolor: 'black',
                    background: 'white',
                    height: 30,
                    width: 100,
                    borderwidth: 1,
                    bordercolor: 'black',
                    spacingVertical: 40,
                    spacingHorizontal: 15
                },
                line: {
                    offsetY: 0,
                    width: 2,
                    color: 'random'
                }
            };
            
            var people = []; // Holds all people in the family tree
            
            
            /**
             * Class Person
             */
            var Person = function(identity, config, details) {
                
                this.node_id = nextNodeID();
                this.identity = identity;
                this.details = (typeof details !== 'undefined') ? details : {};
                
                this.parents = [];
                this.children = [];
                
                this.leveled = false;
                this.level = null;
                this.rendered = false;
                this.on_grid = false;
                this.starting_pos = null;
                this.connected = false;
                
                this.node = null;
                this.config = config;
                this.line_color = null;
                
                this.birth = function(identity, details) {
                    
                    var config = deep_copy(this.config);
                    if (typeof details !== 'undefined' && typeof details.config !== 'undefined') {
                        config = merge(config, details.config);
                    }
                    
                    // Create new person
                    var person = new Person(identity, deep_copy(config), details);
                    
                    // Add parent/child relatonship
                    person.parents.push(this);
                    this.children.push(person);
                    if (typeof details !== 'undefined' && typeof details.partner !== 'undefined') {
                        person.parents.push(details.partner);
                        details.partner.children.push(person);
                    }
                    
                    people.push(person);
                    
                    return person;
                    
                };
                
                this.Level = function(level) {
                    
                    this.level = level;
                    this.leveled = true;
                    
                    for (var i = 0; i < this.parents.length; i++) {
                        if (!this.parents[i].leveled) {
                            this.parents[i].Level(level - 1);
                        }
                    }
                    
                    for (var i = 0; i < this.children.length; i++) {
                        if (!this.children[i].leveled) {
                            this.children[i].Level(level + 1);
                        }
                    }
                    
                };
                
                this.GetMaxNodeWidth = function() {
                    
                    var width = 0;
                    
                    var has_children = false;
                    
                    for (var i = 0; i < this.children.length; i++) {
                        if (this.children[i].parents[0] === this) {
                            has_children = true;
                            width += this.children[i].GetMaxNodeWidth();
                        }
                    }
                    
                    return width + ((has_children) ? 0 : 1);
                    
                };
                
                this.FillGrid = function(grid, starting_pos) {
                    
                    if (this.on_grid) {
                        return grid;
                    }
                    
                    if (typeof grid[this.level] === 'undefined') {
                        grid[this.level] = [];
                    };
                    
                    this.on_grid = true;
                    
                    // Make sure our main parent is on the grid
                    if (this.parents.length > 0) {
                        if (typeof grid[this.level-1] === 'undefined') {
                            grid[this.level-1] = [];
                        }
                        //grid = this.parents[0].FillGrid(grid, grid[this.level-1].length);
                        grid = this.parents[0].FillGrid(grid, starting_pos);
                        if (this.parents[0].starting_pos > starting_pos) {
                            starting_pos = this.parents[0].starting_pos;
                        }
                    }
                    
                    while (typeof grid[this.level][starting_pos] !== 'undefined' && grid[this.level][starting_pos] !== null) {
                        starting_pos++;
                    }
                    
                    this.starting_pos = starting_pos;
                    
                    while (starting_pos > grid[this.level].length) {
                        grid[this.level].push(null);
                    }
                    
                    grid[this.level][starting_pos] = this;
                    for (var i = 0; i < this.GetMaxNodeWidth() - 1; i++) {
                        grid[this.level].push(null);
                    }
                    
                    // Lists of partners & children
                    var partners = [];
                    var children = [];
                    for (var i = 0; i < this.children.length; i++) {
                        if (this === this.children[i].parents[0]) {
                            children.push(this.children[i]);
                        }
                        
                        for (var j = 0; j < this.children[i].parents.length; j++) {
                            if (this !== this.children[i].parents[j]) {
                                var found = false;
                                for (var k = 0; k < partners.length; k++) {
                                    if (partners[k] === this.children[i].parents[j]) {
                                        found = true;
                                    }
                                }
                                if (!found) {
                                    partners.push(this.children[i].parents[j]);
                                }
                            }
                        }
                    }
                    
                    // Put the partners on our grid
                    for (var i = 0; i < partners.length; i++) {
                        grid = partners[i].FillGrid(grid, starting_pos + this.GetMaxNodeWidth());
                    }
                    
                    // Add our children
                    var children_aggregate_size = 0;
                    for (var i = 0; i < children.length; i++) {
                        grid = children[i].FillGrid(grid, starting_pos + children_aggregate_size);
                        children_aggregate_size += children[i].GetMaxNodeWidth();
                    }
                    
                    return grid;
                };
                
                this.IsChildNo = function() {
                    
                    if (this.parents.length === 0) {
                        return 0;
                    }
                    
                    parent = this.parents[0];
                    for (var i = 0; i < parent.children.length; i++) {
                        if (parent.children[i].node_id === this.node_id) {
                            return i;
                        }
                    }
                    
                };
                
                this.DrawConnections = function(target) {
                    
                    this.connected = true;
                    
                    for (var i = 0; i < this.children.length; i++) {
                        var child = this.children[i];
                        if (!child.connected) {
                            for (var j = 0; j < child.parents.length; j++) {
                                var parent = child.parents[j];
                                
                                if (this.line_color === null) {
                                    switch (this.config.line.color) {
                                        case 'random':
                                            this.line_color = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ')';
                                            break;
                                        case 'inherit':
                                            this.line_color = this.parents[0].line_color;
                                            this.config.line.color = this.line_color;
                                        default:
                                            this.line_color = this.config.line.color;
                                    }
                                }
                                
                                if (child.parents.length > 0 || this !== parent) {
                                    
                                    if (child.parents.length > 1) {
                                        var other_parent = parent;
                                    }
                                    
                                    // Draw line down from me
                                    var shape = AutoshapeJS.createShape({
                                        'shape': 'Box',
                                        'color': this.line_color,
                                        'width': this.config.line.width + 'px',
                                        'height': ((this.config.node.spacingVertical / 2) + this.config.line.offsetY) + 'px',
                                        'position': 'absolute',
                                        'left': ((this.config.node.borderwidth * 2) + this.node.element.offsetLeft + (this.config.node.width / 2)) + 'px',
                                        'top': ((this.config.node.borderwidth * 2) + this.node.element.offsetTop + this.config.node.height)+1 + 'px'
                                    });
                                    shape.attachTo(target);
                                    
                                    if (typeof other_parent !== 'undefined') {
                                        
                                        // Draw line down from other parent
                                        var shape = AutoshapeJS.createShape({
                                            'shape': 'Box',
                                            'color': this.line_color,
                                            'width': this.config.line.width + 'px',
                                            'height': (((this.level - other_parent.level)*this.config.node.spacingVertical) + ((this.level - other_parent.level) * (this.config.node.spacingVertical / 2))) + ((this.config.node.spacingVertical / 2) + this.config.line.offsetY) + 'px',
                                            'position': 'absolute',
                                            'left': ((this.config.node.borderwidth * 2) + other_parent.node.element.offsetLeft + (this.config.node.width / 2)) + 'px',
                                            'top': ((this.config.node.borderwidth * 2) + other_parent.node.element.offsetTop + this.config.node.height)+1 + 'px'
                                        });
                                        shape.attachTo(target);
                                        
                                        // Draw line across to other parent
                                        var shape = AutoshapeJS.createShape({
                                            'shape': 'Box',
                                            'color': this.line_color,
                                            'width': (this.node.element.offsetLeft < other_parent.node.element.offsetLeft) ?
                                                ((this.config.node.borderwidth * 2) + other_parent.node.element.offsetLeft - this.node.element.offsetLeft) + 'px'
                                                : ((this.config.node.borderwidth * 2) + this.node.element.offsetLeft - other_parent.node.element.offsetLeft) + 'px',
                                            'height': this.config.line.width + 'px',
                                            'position': 'absolute',
                                            'left': (this.node.element.offsetLeft < other_parent.node.element.offsetLeft) ?
                                                ((this.config.node.borderwidth * 2) + this.node.element.offsetLeft + (this.config.node.width / 2)) + 'px'
                                                : ((this.config.node.borderwidth * 2) + other_parent.node.element.offsetLeft + (this.config.node.width / 2)) + 'px',
                                            'top': ((this.config.node.borderwidth * 2) + other_parent.node.element.offsetTop + this.config.node.height + (this.config.node.spacingVertical / 2) + this.config.line.offsetY) + 'px'
                                        });
                                        
                                        shape.attachTo(target);
                                    }
                                    
                                    // Draw line across to child
                                    var shape_width = child.node.element.offsetLeft - this.node.element.offsetLeft;
                                    if (shape_width < 0) shape_width *= -1;
                                    var shape_left = (this.node.element.offsetLeft < child.node.element.offsetLeft) ? this.node.element.offsetLeft + (this.config.node.borderwidth*2) + (this.config.node.width / 2) : child.node.element.offsetLeft + (this.config.node.borderwidth*2) + (this.config.node.width / 2) ;
                                    var shape = AutoshapeJS.createShape({
                                        'shape': 'Box',
                                        'color': this.line_color,
                                        'width': shape_width + 'px',
                                        'height': this.config.line.width + 'px',
                                        'position': 'absolute',
                                        'left': shape_left + 'px',
                                        'top': ((this.config.node.borderwidth * 2) + this.node.element.offsetTop + this.config.node.height + (this.config.node.spacingVertical / 2) + this.config.line.offsetY) + 'px'
                                    });
                                    shape.attachTo(target);
                                    
                                    // Draw line down to child
                                    var shape = AutoshapeJS.createShape({
                                        'shape': 'Box',
                                        'color': this.line_color,
                                        'width': this.config.line.width + 'px',
                                        'height': (this.config.node.spacingVertical / 2) + 1 + this.config.node.height - (this.config.line.offsetY) + 'px',
                                        'position': 'absolute',
                                        'left': ((this.config.node.borderwidth * 2) + child.node.element.offsetLeft + (this.config.node.width / 2)) + 'px',
                                        'top': ((this.config.node.borderwidth * 2) + child.node.element.offsetTop - (this.config.node.spacingVertical / 2) + this.config.line.offsetY) + 'px'
                                    });
                                    shape.attachTo(target);
                                    
                                    
                                    child.DrawConnections(target);
                                    
                                }
                            }
                        }
                    }
                }
                
            };
            
            
            /**
             * AddPerson function
             * 
             * used to add a 'parentless' person to the family tree (no higher-level nodes)
             */
            this.AddPerson = function(identity, details) {
                
                var config = deep_copy(this.config);
                if (typeof details !== 'undefined' && typeof details.config !== 'undefined') {
                    config = merge(config, details.config);
                }
                
                var person = new Person(identity, config, details);
                people.push(person);
                return person;
                
            };
            
            
            var MouseCoordinatesFromEvent = function(e) {
                var pos = {x:null, y:null};
                if (e.pageX || e.pageY)     {
                    pos.x = e.pageX;
                    pos.y = e.pageY;
                } else if (e.clientX || e.clientY)  {
                    pos.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                    pos.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                }
                return pos;
            };
            
            
            /**
             * Render function
             *
             * renders the family tree
             */
            this.Render = function(element) {
                
                tree_element = element;
                tree_element.style.position = 'relative';
                tree_element.innerHTML = '';
                
                // Generate all the people's levels so we know where they are at
                people[0].Level(0);
                
                min_level = 0;
                for (var i = 0; i < people.length; i++) {
                    if (people[i].level < min_level) {
                        min_level = people[i].level;
                    }
                }
                
                if (min_level < 0) {
                    var level_increase = min_level * -1
                    for (var i = 0; i < people.length; i++) {
                        people[i].level += level_increase;
                    }
                }
                
                var grid = {};
                
                grid = people[0].FillGrid(grid, 0);
                
                // Compress the grid
while_loop:
                while (true) {
                    for (var i in grid) {
                        level = grid[i];
                        
                        for (var j = 1; j < level.length; j++) {
                            node = level[j];
                            
                            if (node !== null && (level[j-1] === null) && node.config.compressable === true) {
                                // It's a candidate to move, nothing to it's left. Is anything around it may conflict with?
                                
                                // Are we already above our first parent? If so we shouldn't wander away
                                if (node.parents.length) {
                                    if (grid[node.level-1] === null || typeof grid[node.level-1] !== 'undefined') {
                                        if (grid[node.level-1][j] !== null && grid[node.level-1][j] === node.parents[0]) {
                                            continue;
                                        }
                                    }
                                }
                                
                                var clear_above = true;
                                var clear_below = true;
                                
                                /*
                                if (typeof grid[node.level-1] !== 'undefined') {
                                    if (grid[node.level-1][j-1] !== null && typeof grid[node.level-1][j-1] !== 'undefined' && grid[node.level-1][j-1].children.length > 0) {
                                        // We're blocked if the thing above isn't our parent
                                        
                                        clear_above = false;
                                        
                                        for (var k = 0; k < node.parents.length; k++) {
                                            if (grid[node.level-1][j-1] === node.parents[k]) {
                                                clear_above = true;
                                            }
                                        }
                                        
                                    }
                                }
                                */
                                
                                if (typeof grid[node.level+1] !== 'undefined') {
                                    if (grid[node.level+1][j-1] !== null && typeof grid[node.level+1][j-1] !== 'undefined' && grid[node.level+1][j-1].parents.length > 0) {
                                        // We're blocked if the thing below isn't our child
                                        
                                        clear_below = false;
                                        
                                        for (var k = 0; k < node.children.length; k++) {
                                            if (grid[node.level+1][j-1] === node.children[k]) {
                                                clear_below = true;
                                            }
                                        }
                                        
                                    }
                                }
                                
                                if (clear_above && clear_below) {
                                    grid[i][j-1] = node;
                                    grid[i][j] = null;
                                    continue while_loop;
                                }
                            }
                        }
                        
                    }
                    
                    break;
                }
                
                var all_nodes = [];
                
                for (var level in grid) {
                    var nodes = grid[level];
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];
                        if (node !== null) {
                            this.RenderNode(node, tree_element, level, i);
                            all_nodes.push(node);
                        }
                    }
                }
                
                for (var node in all_nodes) {
                    node = all_nodes[node];
                    node.DrawConnections(tree_element);
                }
                
                // Setup the drag ability
                tree_element.onselectstart = function() { return false; };
                tree_element.unselectable = 'on';
                tree_element.style.MozUserSelect = 'none';
                
                tree_element.style.cursor = 'move';
                tree_element.onmousedown = function(e) {
                    scroll_info.scrolling = true;
                    
                    e = e || window.event;
                    var mouse_coordinates = MouseCoordinatesFromEvent(e);
                    
                    scroll_info.x = mouse_coordinates.x;
                    scroll_info.y = mouse_coordinates.y;
                };
                tree_element.onmouseup = function(e) {
                    if (scroll_info.scrolling) {
                        scroll_info.scrolling = false;
                        
                        e = e || window.event;
                        var mouse_coordinates = MouseCoordinatesFromEvent(e);
                        
                        if (scroll_info.x !== null && scroll_info.y !== null) {
                            
                            delta = {
                                x: scroll_info.x - mouse_coordinates.x,
                                y: scroll_info.y - mouse_coordinates.y
                            }
                            
                            tree_element.scrollLeft += delta.x;
                            tree_element.scrollTop += delta.y;
                            
                        }
                    }
                };
                tree_element.onmousemove = function(e) {
                    if (scroll_info.scrolling) {
                        
                        e = e || window.event;
                        var mouse_coordinates = MouseCoordinatesFromEvent(e);
                        
                        if (scroll_info.x !== null && scroll_info.y !== null) {
                            
                            delta = {
                                x: scroll_info.x - mouse_coordinates.x,
                                y: scroll_info.y - mouse_coordinates.y
                            }
                            
                            tree_element.scrollLeft += delta.x;
                            tree_element.scrollTop += delta.y;
                            
                        }
                        
                        scroll_info.x = mouse_coordinates.x;
                        scroll_info.y = mouse_coordinates.y;
                        
                    }
                }
                tree_element.onmouseout = function(e) {
                    e = e || window.event;
                    
                    // Check to see if we are, in fact, still in the tree_element
                    var element = e.relatedTarget || e.toElement;
                    
                    if (typeof element !== 'undefined') {
                    
                        while (element !== null && element !== tree_element) {
                            element = element.parentNode;
                        }
                        
                        if (element !== tree_element) {
                            scroll_info.scrolling = false;
                        }
                    
                    }
                }
                
            };
            
            this.RenderNode = function(person, element, level, position) {
                
                var node_left = position * (this.config.node.width + this.config.node.spacingHorizontal);
                
                var shape = AutoshapeJS.createShape({
                    'shape': 'Box',
                    'color': person.config.node.background,
                    'borderwidth': person.config.node.borderwidth + 'px',
                    'bordercolor': person.config.node.bordercolor,
                    'width': this.config.node.width + 'px',
                    'height': this.config.node.height + 'px',
                    'position': 'absolute',
                    'left': node_left + 'px',
                    'top': (level * (this.config.node.height + this.config.node.spacingVertical)) + 'px',
                    'opacity': (person.identity.length > 0) ? 1 : 0
                });
                shape.attachTo(element);
                shape.element.innerHTML = person.identity;
                if (typeof person.details.blurb !== 'undefined') {
                    shape.element.innerHTML += '<div class="blurb">' + person.details.blurb + '</div>';
                }
                shape.element.style.color = person.config.node.fontcolor;
                shape.element.style.textAlign = 'center';
                shape.element.className = 'familytree-node';
                
                person.node = shape;
                
            };
            
            this.center = function() {
                
                var view_center = {
                        x: tree_element.clientWidth / 2,
                        y: tree_element.clientHeight / 2
                    }
                
                if (arguments.length == 0) {
                    
                    // Center the whole tree
                    var center = {
                        x: tree_element.scrollWidth / 2,
                        y: tree_element.scrollHeight / 2
                    }
                    
                } else {
                    
                    // Center on a specific node
                    var node = arguments[0];
                    var center = {
                        x: node.node.element.offsetLeft + (node.config.node.width / 2),
                        y: node.node.element.offsetTop + (node.config.node.height / 2),
                    }
                    
                }
                
                tree_element.scrollLeft = center.x - view_center.x;
                tree_element.scrollTop = center.y - view_center.y;
                
            }
        
        }
        
    };
    
})();