var Log = {
   elem: false,
    write: function(text){
        if (!this.elem) 
            this.elem = document.getElementById('log');
        this.elem.innerHTML = text;
        this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
    }
};

function addEvent(obj, type, fn) {
    if (obj.addEventListener) obj.addEventListener(type, fn, false);
    else obj.attachEvent('on' + type, fn);
};


function init(){
    var infovis = document.getElementById('infovis');
    var w = infovis.offsetWidth, h = infovis.offsetHeight;
    //init data
    //If a node in this JSON structure
    //has the "$type" or "$dim" parameters
    //defined it will override the "type" and
    //"dim" parameters globally defined in the
    //RGraph constructor.
    var json = mxwjson;
    //end
    //init canvas
    //Create a new canvas instance.
    var canvas = new Canvas('mycanvas', {
        'injectInto': 'infovis',
        'width': w,
        'height': h,
        //Optional: Add a background canvas
        //that draws some concentric circles.
        'backgroundCanvas': {
            'styles': {
                'strokeStyle': '#e0e0e0'
            },
            'impl': {
                'init': function(){},
                'plot': function(canvas, ctx){
                    var times = 2, d = 48;
                    var pi2 = Math.PI * 2;
                    for (var i = 1; i <= times; i++) {
                        ctx.lineWidth = 5;
                        ctx.beginPath();
                        ctx.arc(0, 0, i * d, 0, pi2, true);
                        ctx.stroke();
                        ctx.closePath();
                    }
                }
            }
        }
    });
    //end
    //init RGraph
    var oldhtml = document.getElementById('inner-details').innerHTML;
    var rgraph = new RGraph(canvas, {
        //Nodes and Edges parameters
        //can be overriden if defined in 
        //the JSON input data.

        //This way we can define different node
        //types individually.

        Node: {
            'overridable': true,
             'color': '#ccc',
             'type':'circle',
             'dim':1.0

        },
        Edge: {
            'overridable': true,
            'color': '#cccccc'
        },

        //Set polar interpolation.
        //Default's linear.
        interpolation: 'polar',
        
        //Change the transition effect from linear
        //to elastic.
        transition: Trans.Quad.easeOut,
        //Change other animation parameters.
        duration:400,
        fps: 30,
        //Change father-child distance.
        levelDistance: 48,
        
        //This method is called right before plotting
        //an edge. This method is useful to change edge styles
        //individually.
        //onBeforePlotLine: function(adj){
            //Add some random lineWidth to each edge.
        //    if (!adj.data.$lineWidth) 
                //adj.data.$lineWidth = Math.random() * 5 + 1;
        //        adj.data.$lineWidth = 1;
        //},
        
        onBeforeCompute: function(node){
            Log.write("centering " + node.name + "...");
            
            //Make right column relations list.
            var html = "<div id='infovis_links'><a target='_parent' href='" + node.data.link + "' title='"+ node.data.longtitle +"'>" + node.name + " " +  node.data.title + "</a></div>";
            //html += "<ul>";
            //Graph.Util.eachAdjacency(node, function(adj){
            //   var child = adj.nodeTo;
            //    html += "<li>" + child.name + "</li>";
            //});
            //html += "</ul>";
            document.getElementById('inner-details').innerHTML = html;
            oldhtml = html;
        },
        

        
        //Add node click handler and some styles.
        //This method is called only once for each node/label crated.
        onCreateLabel: function(domElement, node){
            domElement.innerHTML = node.name;
            domElement.onclick = function () {
                rgraph.onClick(node.id, { hideLabels: false });
            };
            domElement.onmouseover = function () {
              var html = "<div id='infovis_links'><a target='_parent' href='" + node.data.link + "' title='"+ node.data.longtitle +"'>" + node.name + " " +  node.data.title + "</a></div>";
              document.getElementById('inner-details').innerHTML = html;
              opacity('infovis_links', 0, 100, 200);
            };
            domElement.onmouseout = function () {
              document.getElementById('inner-details').innerHTML = oldhtml;
              opacity('infovis_links', 0, 100, 200);
            };
            var style = domElement.style;
            style.cursor = 'pointer';
            style.fontSize = "0.8em";
            style.color = "#333";
        },
        //This method is called when rendering/moving a label.
        //This is method is useful to make some last minute changes
        //to node labels like adding some position offset.
        onPlaceLabel: function(domElement, node){
            var style = domElement.style;
            var left = parseInt(style.left);
            var top = parseInt(style.top);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
            style.top = top-10 +'px'
        },
        
        onAfterCompute: function(){
            Log.write("done");
        }
        
    });
    //load graph.
    rgraph.loadJSON(json, 0);
    
    //compute positions and plot
    rgraph.refresh();
    //end
    rgraph.controller.onBeforeCompute(rgraph.graph.getNode(rgraph.root));
    rgraph.controller.onAfterCompute();
    
}