<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Graph Display</title>
<link rel='stylesheet' href="form.css">
<script src='form.js'></script>
<script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script>
<script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="js/lib/jsBezier-0.4-min.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-util-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-dom-adapter-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-defaults-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-svg-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script>
<script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-all-min.js"></script>
<script type="text/javascript" src='treeArrangement.js'></script>

<style>
body { 
    background-color:#ccf;
    background:-moz-linear-gradient(top,#fff,#ccf);
    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccf));
}
div.header {
    position:absolute;
    left:0;top:0;
    z-index:5;
    height:50px;
    width:100%;
    background:#ddd;
    background:-moz-linear-gradient(top,#fff,#ddd);
    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd));
    color:silver;
    font-size:40px;
}
span.edgeLabel {
    
}

div.graphNode {
    position:absolute; 
    font-size:12px; padding:4px; background:white;
    z-index:20;
    width: 45px; 
    height: 40px; 
    border-radius:50px;
    border:2px solid silver;
    overflow:hidden;
    cursor:pointer;
    border-color:"blue";
}
div.graphNodeContent {
    position:absolute;
    z-index:21;
    font-size:12px;
    background:white;
    width: 50%;
    height: 80%;
    left: 10px;
    top: 8px;
}

</style>

<div class='header'>
    <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
</div>

<div id="miniDisplay" style='position:fixed; left:0; top:70; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'>
    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'>  </div>
    <div id="closeMiniDisplay" style='position:absolute; right:5; top:-3; z-index:10;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >CLOSE</div>
    <div style='position:absolute; width:90%; height:90%;'>
	<div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'>
	    <div id="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
	    </div>
	    <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'>
	    </div>
	</div>
    </div>
</div>


<div style="position:relative;left:0;top:0;" id='graphMain'>
	<div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
    </div>
</div>


<script type="text/javascript">
var LOAD_INTERVAL = 5;
var BASE_URL = "";
if(!Array.prototype.filter){
	Array.prototype.filter=function(func){
		var arr=[];
		for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]);
		return arr;
	}
}

var treeInfo;
var userList = [];
var root_id;
function loadConsensus(id) {
    function onload(json) {
	var title = json.hogehoge ? json.hogehoge : "title";
	document.title = title;
	$('#headertitle_main').text(title)
    }
}

function loadUserList() {
    $.ajax({
	url:BASE_URL + "/users/all",
	success:function(o) { userList = o.sort(); showUserList([]); },
	type:"GET", cache:false,
	error:function(o) { console.log("loadUserList error : ",o); }
    });
}

$(function() {
    userName = localStorage.userName;
    if(userName) {start();}
    else { }
})

function beginScript() {
    DragHandler.attach($('#miniDisplay')[0]);
}

var DragHandler = {
    _oElem : null,
    attach : function(oElem) {
	oElem.onmousedown = DragHandler._dragBegin;
	return oElem;
    },
    _dragBegin : function(e) {
	var oElem = DragHandler._oElem = this;
	if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
	if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	e = e ? e : window.event;
	oElem.mouseX = e.clientX;
	oElem.mouseY = e.clientY;
	document.onmousemove = DragHandler._drag;
	document.onmouseup = DragHandler._dragEnd;
	return false;
    },
    _drag : function(e) {
	var oElem = DragHandler._oElem;
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	e = e ? e : window.event;
	oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
	oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
	oElem.mouseX = e.clientX;
	oElem.mouseY = e.clientY;
	return false;
    },
    _dragEnd : function() {
	var oElem = DragHandler._oElem;
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	document.onmousemove = null;
	document.onmouseup = null;
	DragHandler._oElem = null;
    }

};

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
	window.onload = func;
    } else {
	window.onload = function() {
	    if (oldonload) {
		oldonload();
	    }
	    func();
	}
    }
}

addLoadEvent(function() {
    beginScript();
});

function writeMiniDisplay(title,str) {
    $('#miniDisplayBody')[0].innerHTML = str;
    if(title) {
	$('#miniDisplayTitle')[0].innerHTML = title;
    }
}
 
function writeJSONDataToMiniDisplay(jsonObj) {
    var str = "";
    for (var key in jsonObj.property) {
	str = str + key + ": "+ jsonObj.property[key] + "<br>";
    }
    writeMiniDisplay(jsonObj.property.title, str);
}


function init() {
    jsPlumb.importDefaults({
	Connector : [ "Straight", { curviness:50 } ],
	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
	EndpointStyle : {},
	Anchors: ["BottomCenter","TopCenter"],
    });
    $("#graphRoot").css({
	left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX,
	top: ViewParam.offsetTop + ViewParam.nodeHeight/2
    });
    $("#graphMain").css({
	width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight,
	height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom,
	top:50
    });

}

function showMiniDisplay(jsonInfo) {
    $("#miniDisplay").css("visibility", "visible");
    writeJSONDataToMiniDisplay(jsonInfo)
}

var nodeNum = 0;
var OFFSET = 100;
function createNodeDiv(node) {
    node.view = $("<div class='graphNode'/>");
    var miniD = $('#miniDisplay')[0].style;
    var offsetLeft = parseInt(miniD.width.split('px')[0]);
    var offsetTop = parseInt(miniD.height.split('px')[0]);
    node.position = {x:nodeNum*OFFSET + offsetLeft, y: nodeNum*OFFSET + offsetTop/2};
    node.view.hover();
    var div = $("<div class='graphNodeContent'/>")[0];
    div.innerHTML = node.property.title;
    node.view[0].appendChild(div);
    nodeNum++;
    return node;
}

function updateNodeElement(node) {
    var created = false;
    if(!node.view) {
	created = true;
	createNodeDiv(node);
    }
    var div = node.view;
//    div.text(node.property.title);
    div.click(function(){showMiniDisplay(node)});
    DragHandler.attach($(node.view)[0]);
    var kindBackground = {agree:"#aaf", rejected:"#fff"};
    var kindBorder = {agree:"#66a", rejected:"#a66"};
    div.css("background", kindBackground[node.kind]||"white");
    div.css("border-color", kindBorder[node.kind] ||"blue");
    div.css({
	left: node.position.x,
	top: node.position.y
    });
    return created;    
}


function updateNode(node) {
    if(updateNodeElement(node)) {
	var fc = $('#graphRoot')[0].firstChild;
	if(fc) {
	    $('#graphRoot')[0].insertBefore(node.view[0], fc);
	} else {
	    $('#graphRoot').append(node.view);
	}
    }
}

var ViewParam = {
    offsetTop:100,
    offsetBottom:100,
    offsetLeft:100,
    offsetRight:100,
    nodeWidth:120,
    nodeHeight:60,
    intervalX:140,
    intervalY:120
};

function start() {
    init();
    var rootNode = new Object();
    rootNode.property = sampleJSON1;
    showMiniDisplay(rootNode);
    updateNode(rootNode);
    /* test code */
    var n1 = {property:{title:"task2"}};
    var n2 = {property:{title:"task3"}};
    updateNode(n1);
    updateNode(n2);
    
    var e1 = new Edge(rootNode, n1, "dependency");
    var e2 = new Edge(n1, n2, "dependency");
    edgeArray.push(e1);
    edgeArray.push(e2);
    paintEdge();
}

var edgeArray = new Array();
function Edge(fromNode, toNode, relation) {
    var obj = {from:fromNode, to:toNode, rel:relation };
    return obj;
}

var stateMachineConnector = {
    connector:"StateMachine",
//    paintStyle:{lineWidth:3,strokeStyle:"#056"},
    paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
    hoverPaintStyle:{strokeStyle:"#dbe300"},
    endpoint:"Blank",
    anchor:"Continuous",
    overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
};

function paintEdge() {
    var array = edgeArray;
    for (var i=0; i<array.length; i++) {
	connectGraph(array[i]);
    }
    jsPlumb.removeAllEndpoints();
    jsPlumb.draggable($('.graphNode'));
    /*
    jsPlumb.repaintEverything();
    */
}

function connectGraph(graphObj) {
    var fromNode = graphObj.from;
    var toNode = graphObj.to;
    var rel = graphObj.rel;
    var c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, stateMachineConnector);
    c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"});
    return c;
}

function GraphData() {
/*
    function graph() {
	var g = {};
	g.property = {};
	g.in = {};
	g.out = {};
	g.both = {};
	return g;
    }
    function edge() {
	var e = {};
	e.property = {};
	return e;
    }
*/
    var graphData = {};
    graphData.graphs = {};
    graphData.edges = {};
    return graphData;
}


function parseJSONGraphData(memory ,jsonObj) {
    var graphs = jsonObj.graphs;
    for (var i=0; i<graphs.length; i++) {
	var graph = graphs[i];
	memory.graphs[graph.id].property = graph;
    }
    var edges = jsonObj.edges;
    for (var i=0; i<edges.length; i++) {
	var edge = edges[i];
	var edgeId = edge.id;
	memory.edges[edgeId].property = edge;
	if (edge.kind == "both") {
	    memory.graphs[edge.from].both.append(edgeId);
	    memory.graphs[edge.to].both.append(edgeId);
	} else {
	    memory.graphs[edge.from].out.append(edgeId);
	    memory.graphs[edge.to].in.append(edgeId);
	}
    }
}

/* sample data */
sampleJSON1  = {
    id:"5",
    title:"task1",
    kind:"agreed",
    createdUser:"oshiro",
    createdDate: new Date()
};

sampleJSONData = {
    graphs: [
        {
            id:"1",
            kind:"agree",
	    createdUser:"osrhiro"
	},
        {
            id:"2",
            kind:"reject",
	    createdUser:"kinjo"	    
        },
        {
            id:"3",
	    kind:"agree",
	    createdUser:"tamayose"
        }
    ],
    edges: [
        {
            id:"11",
            from:"1",
            to:"2",
            rel:"dependency",
            type:""
        },
        {
            id:"12",
            from:"2",
            to:"3",
            rel:"dependency",
            type:""
        },
        {
            id:"13",
            from:"3",
            to:"1",
            rel:"dependency",
            type:"both"
        }
    ]
};

</script>