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 canvas
    //Create a new canvas instance.
    var canvas = new Canvas('mycanvas', {
        //Where to append the canvas widget
        'injectInto': 'infovis',
        'width': w,
        'height': h,
        
        //Optional: create a background canvas and plot
        //concentric circles in it.
        'backgroundCanvas': {
            'styles': {
                'strokeStyle': '#333'
            },
            
            'impl': {
                'init': function(){},
                'plot': function(canvas, ctx){
                    var times = 10, d = 45;
                    var pi2 = Math.PI * 2;
                    for (var i = 1; i <= times; i++) {
                        ctx.beginPath();
                        ctx.arc(0, 0, i * d, 0, pi2, true);
                        ctx.stroke();
                        ctx.closePath();
                    }
                }
            }
        }
    });
    //end
    //init RGraph
    var rgraph = new RGraph(canvas, {
		levelDistance: 45,
		
        //Set Node and Edge colors.
        Node: {
			overridable: true,
            color: '#ccddee'
        },
        
        Edge: {
			overridable: true,
			type: 'arrow',
            color: '#772277',
			lineWidth: 1.5
        },
		
		onBeforePlotNode: function(node){
            if (node.data.platform == "네이버") {
				node.data.$type = 'square';
				node.data.$color = '#0C0';
			} else if (node.data.platform == "티스토리") {
				node.data.$type = 'circle';
				node.data.$color = '#C00';
			} else if (node.data.platform == "이글루스") {
				node.data.$type = 'star';
				node.data.$color = '#FFF';
				node.data.$dim = 5;
			} else if (node.data.platform == "텍스트큐브") {
				node.data.$type = 'square';
				node.data.$color = '#00F';
			} else if (node.data.platform == "미투데이") {
				node.data.$type = 'triangle';
				node.data.$color = '#FF0';
			}
        },

        onBeforeCompute: function(node){
            Log.write("centering " + node.name + "...");
            //Add the relation list in the right column.
            //This list is taken from the data property of each JSON node.
            document.getElementById('inner-details').innerHTML = node.data.relation;
			
			var html = "<p><span class=\"author\">" + node.name + "</span> 님의 생각:</p>";
			html += "<p><b>독서</b>는 <span class=\"reading\">"  + node.data.words +"</span> <b>이다.</b></p>";
			html += "<p>[<a href=\"" + node.data.posturl + "\" target=\"_blank\">원문 보기</a>]</p>";
			html += "<p>&nbsp;</p>";
			
			var parents  = new Array();
			var children = new Array();
			Graph.Util.eachAdjacency(node, function(adj) {
				if (adj.data.$direction[0] != node.id)
					parents.push (rgraph.graph.getNode(adj.data.$direction[0]));
				else
					children.push(rgraph.graph.getNode(adj.data.$direction[1]));
			});

			html += "<p><b>" + node.name + "</b> 님의 이전 주자:</p>";
            html += "<ul>";
			if (parents.length > 0) {
				for (var i=0; i<parents.length; i++) {
					html += "<li><a href=\"" + parents[i].data.posturl + "\" target=\"_blank\">" + parents[i].name + "</a></li>";
				}
			} else {
				html += "<li>(없음)</li>";
			}
            html += "</ul>";
			
			html += "<p>&nbsp;</p>";
			html += "<p><b>" + node.name + "</b> 님의 다음 주자:</p>";
            html += "<ul>";
            if (children.length > 0) {
				for (var i=0; i<children.length; i++) {
					html += "<li><a href=\"" + children[i].data.posturl + "\" target=\"_blank\">" + children[i].name + "</a></li>";
				}
			} else {
				html += "<li>(없음)</li>";
			}
            html += "</ul>";
            document.getElementById('inner-details').innerHTML = html;
        },
        
        onAfterCompute: function(){
            Log.write("done");
        },
        //Add the name of the node in the correponding label
        //and a click handler to move the graph.
        //This method is called once, on label creation.
        onCreateLabel: function(domElement, node){
            domElement.innerHTML = node.name;
            domElement.onclick = function(){
                rgraph.onClick(node.id);
            };
        },
        //Change some label dom properties.
        //This method is called each time a label is plotted.
        onPlaceLabel: function(domElement, node){
            var style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';

            if (node._depth <= 1) {
				style.fontWeight = "bold";
                style.fontSize = "9pt";
                style.color = "#ccc";
            
            } else if(node._depth >= 2){
				style.fontWeight = "normal";
                style.fontSize = "8pt";
                style.color = "#494949";
            
            } else {
                style.display = 'none';
            }

            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
        }
    });
    
    //load JSON data
    rgraph.loadJSON(json);
    //compute positions and make the first plot
    rgraph.refresh();
    //end
    //append information about the root relations in the right column
    rgraph.controller.onBeforeCompute(rgraph.graph.getNode(rgraph.root));
    rgraph.controller.onAfterCompute();
}