<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Graph Display</title>
<link rel='stylesheet' href="css/viewer_form.css">
<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>


<div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'>
    <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div>
    <div id="closeTraverseDisplay" style='position:absolute; right:5; top:-3; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >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="traverseDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'>
    Traverse 
	    </div>
	    <div style='position:absolute; top:30px; width:100%; margin-left:10px;'> Direction:
		<label style='position:relative;' ><input id="direction_in" type='checkbox' checked value='in'/>IN</label>
		<label style='position:relative;'><input id="direction_out" type='checkbox' checked value='out'/>OUT</label>   
	    </div>
    	    <div id="traverseDisplayBody" style='position:absolute; left:20px; top:50px;'>
    Please click any node.
	    </div>
	</div>
    </div>
    <span class='button display' style='position:absolute; width:100; left:75; bottom:5; opacity:1;' onclick='traverseAction();'>traverse</span>
</div>

<div id="miniDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'>
    <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; color:white;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','yellow');" onmouseout="$('#closeMiniDisplay').css('color','white')" >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;'>
		Please click any node.
	    </div>
	</div>
    </div>
</div>

<div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'>
    <div  style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
    </div>
</div>


<div id='menuDisplay' class='menuDisplayCss' style='left:0; top:20; z-index:20;'>
    <div id="closeMenuDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="$('#menuDisplay').css('visibility','hidden');" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeMenuDisplay').css('color','white')" >CLOSE</div>  
    <div class='menu' id='stateMenu'>
	<div class='menuTitleCss' id='menuTitle'>StateSelect</div>
	<div class='menuTitleBodyCss' id='menuTitleBody'></div>
    </div>
    <div class='menu' id='traverseMenu' style='top:38px;'>
	<div class='menuTitleCss' id='menuTitle'>TraverseSelect</div>
	<div class='menuTitleBodyCss' id='menuTitleBody'></div>
    </div>
</div>

<script type="text/javascript">
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;
    }
}

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 GraphData() {
    var graphData = {};
    graphData.nodes = {};
    graphData.edges = {};
    return graphData;
}

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

var DragHandler = {
    _oElem : null,
    _id : null,
    attach : function(oElem) {
	oElem.onmousedown = DragHandler._dragBegin;
	return oElem;
    },
    /* TODO: refoctoring */
    attach : function(oElem, id) {
	oElem.onmousedown = DragHandler._dragBegin;
	_id = id;
	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;
	var nextX =  x + (e.clientX - oElem.mouseX);
	var nextY =  y + (e.clientY - oElem.mouseY);
	oElem.style.left = nextX + 'px';
	oElem.style.top = nextY  + 'px';
	oElem.mouseX = e.clientX;
	oElem.mouseY = e.clientY;
	if (_id) {
	    var node = GRAPH_DATA.nodes[_id];
	    node.position.x = nextX;
	    node.position.x = nextY;	    
	}
	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) {
	if (key != 'edgeInfo' ) {
	    str = str + key + ": "+ jsonObj.property[key] + "<br>";
	}
    }
    writeMiniDisplay(jsonObj.property.title, str);
}

function getTraverseDivTemplate(kind, inNum, outNum) {
    return "<div><label id='traverseLabel'><input type='checkbox' checked value='"+kind+"'/>"+kind+"</label><br>in:"+inNum+" out:"+outNum+"</div>";
}

function createTraverseView(info) {
    var viewHtml = "";
    for (var kind in info) {
	var data = info[kind];
	var inNum = 0;
	var outNum = 0;
	if (data['in']) {
	    inNum = data['in'];
	}
	if (data['out']) {
	    outNum = data['out'];
	}
	viewHtml = viewHtml + getTraverseDivTemplate(kind, inNum, outNum);
    }
    return viewHtml;
}

function createEdgeInfoView(node) {
    var id = node.property.id;
    var edgeInfo = node.property.edgeInfo;
    var str = "";
    var info = {};
    for (var i=0; i<edgeInfo.length; i++) {
	var kind = edgeInfo[i].kind;
	var dir = edgeInfo[i].direction;
	var num = edgeInfo[i].num;
	info[kind] = {};
	info[kind][dir] = num;
    }
    var viewHTML = createTraverseView(info);
    edgeInfo.viewHtml = viewHTML;
    $('#traverseDisplayBody')[0].innerHTML = viewHTML;
}

function init() {
    jsPlumb.importDefaults({
	Connector : [ "Straight", { curviness:50 } ],
	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
	EndpointStyle : {},
	Anchors: ["BottomCenter","TopCenter"],
    });
    var rootDiv = $('#graphMain');
    var rootLeft = rootDiv.offset().left;
    var rootTop = rootDiv.offset().top;
    $('#traverseDisplay').css( {
	left: rootLeft,
	top: rootTop
    });
    var heightStr = $('#traverseDisplay').css('height').split('px')[0];
    var height = parseInt(heightStr);
    $('#miniDisplay').css( {
	left: rootLeft,
	top: rootTop + height + 50
    });
}

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

function showTraverseDisplay(node) {
    this.id = node.property.id;
    if (!node.property.edgeInfo) { console.log("not found node.edgeInfo "); return; }
    if (!node.property.edgeInfo.viewHtml) {
	createEdgeInfoView(node);
    }
    $('#traverseDisplayBody')[0].innerHTML = node.property.edgeInfo.viewHtml;	
    $("#traverseDisplay").css("visibility", "visible");
}

var nodeNum = 0;
var OFFSET = 200;
var miniD = $('#miniDisplay')[0].style;
var offsetLeft = parseInt(miniD.width.split('px')[0]);
var offsetTop = parseInt(miniD.height.split('px')[0]);
function calcNewNodePosition() {
    var position = {};
    position = {x: offsetLeft, y: nodeNum*OFFSET + offsetTop / 3};
    nodeNum++;
    return position;
}

/*
 *
 */
function clickNodeDiv(id) {
    var graphData = GRAPH_DATA;
    var node = graphData.nodes[id];
    var rels = {evidence:1,
		dependency:1,
		derived:1,
		version:1,
		agreement:1};
    showRelationNodes(graphData, node, rels);    
}

function addEdgeInfo(id, kind, direction) {
    var nodes = GRAPH_DATA.nodes;
    var edges = GRAPH_DATA.edges;
    
}

function getEvidence(id, kind, direction) {
    $.ajax({
	url:"/aat/aaevidencesiftingmodel.userdesktops/get?id="+id+"?kind="+kind+"?direction="+direction,
	success:function(o) { parseJSONGraphData(GRAPH_DATA, o); },
	type:"GET", cache:false,
	error:function(o) { console.log("getEvidence error : ", o); }
    });
}

function traverseAction() {
    var inDirChecked = $('#direction_in')[0].checked;
    var outDirChecked = $('#direction_out')[0].checked;
    var labelTags = $('[id=traverseLabel]');
    var kinds = [];
    for (var i=0;i<labelTags.length; i++ ) { 
	var inputTag = labelTags[i].children[0];
	if (inputTag.checked) {
	    kinds.push(inputTag.value);
	}
    }
    var id = this.id;
    for (var i=0; i<kinds.length; i++) {
	var kind = kinds[i];
	if (inDirChecked) getEvidence(id, kind, "in");
	if (outDirChecked) getEvidence(id, kind, "out");
    }
    
}

function createNodeDiv(node) {
    node.view = $("<div class='graphNode'/>");
    node.view.click(function(){ clickNodeDiv(node.property.id) });
    if(!node.position) node.position = calcNewNodePosition();
    node.view.hover();
    var div = $("<div class='graphNodeContent' />")[0];
    div.innerHTML = node.property.title;
    node.view[0].appendChild(div);
    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); showTraverseDisplay(node);});
    DragHandler.attach($(node.view)[0], node.property.id);
    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] ||"#58f");
    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 Edge(fromNode, toNode, relation) {
    var obj = {from:fromNode, to:toNode, rel:relation };
    return obj;
}

var arrowConnector = {
    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} ]]
};

var arrowBothConnector = {
    connector:"StateMachine",
    paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
    hoverPaintStyle:{strokeStyle:"#dbe300"},
    endpoint:"Blank",
};

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

function showEdge(graphData, edge) {
    function connectEdge(fromNode, toNode, rel, type) {
	var c;
	if (type == 'both') {
	    c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowBothConnector);
	} else {
	    c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowConnector);
	}
	//	jsPlumb.select({source:fromNode.view[0]}).removeAllOverlays();
	c.setLabel({label:"<span style='color:#129; font-size:1.5em;'>"+rel+"</span>",cssStyle:""});
	return c;
    }
    if (edge.visible) return;
    var fromNode = graphData.nodes[edge.property.from];
    var toNode = graphData.nodes[edge.property.to];
    if (!fromNode.view && !toNode.view) return;
    var rel = edge.property.rel;
    var type = edge.property.type;
    connectEdge(fromNode, toNode, rel, type);
    edge.visible = true;
}

function createNodeFromEdge(graphData, edge, baseNode) {
    if(edge.visible) return;
    var fromNode = graphData.nodes[edge.property.from];
    if (!fromNode.view) {
	updateNode(fromNode);
    }
    var toNode = graphData.nodes[edge.property.to];
    if (!toNode.view) {
	updateNode(toNode);
    }
    showEdge(graphData, edge);
}

function getRelationEdgeIds(node) {
    var edgeIds = [];
    for (var i=0; i<node.in.length; i++) edgeIds.push(node.in[i]);
    for (var i=0; i<node.out.length; i++) edgeIds.push(node.out[i]);
    for (var i=0; i<node.both.length; i++) edgeIds.push(node.both[i]);
    return edgeIds;
}

function getRelationNodeIds(graphData, node) {
    var nodes = graphData.nodes;
    var edges = graphData.edges;
    var nodeIds = [];
    for (var i=0; i<node.in.length; i++) {
	var edgeId = node.in[i];
	nodeIds.push(edges[edgeId].property.from);
    }
    for (var i=0; i<node.out.length; i++) {
	var edgeId = node.out[i];
	nodeIds.push(edges[edgeId].property.to);
    }
    for (var i=0; i<node.both.length; i++) {
	var edgeId = node.both[i];
	var fromId = edges[edgeId].property.from;
	var toId = edges[edgeId].property.to;
	if (fromId == node.property.id) {
	    nodeIds.push(toId);
	} else {
	    nodeIds.push(fromId);
	}
    }
    return nodeIds;
}

/*
 * This function output all NODE that are related [node]
 */
function updateRelationNodes(graphData, node) {
    var id = node.property.id;
    var edges = graphData.edges;
    var edgeIds = getRelationEdgeIds(node);
    for (var i=0; i<edgeIds.length; i++ ) {
	createNodeFromEdge(graphData, edges[edgeIds[i]]);
    }
    jsPlumb.removeAllEndpoints();
    jsPlumb.draggable($('.graphNode'));
}

/* 
 * rels = {dependency:1, evidence:1}; 
 * showRelationNodes(graphData, node, rels);
 */
function showRelationNodes(graphData, node, rels) {
    var id = node.property.id;
    var edges = graphData.edges;
    var edgeIds = getRelationEdgeIds(node);
    for (var i=0; i<edgeIds.length; i++) {
	var edge = edges[edgeIds[i]];
	if (rels[edge.property.rel]) {
	    createNodeFromEdge(graphData, edges[edgeIds[i]]);	    
	}
    }
    jsPlumb.removeAllEndpoints();
    jsPlumb.draggable($('.graphNode'));
}

var BASE_THETA = -30;
var BASE_ANGLE = 180;
var BASE_DISTANCE = 180;
function calcChildNodePosition(parent, num) {
    var pX = parent.position.x;
    var pY = parent.position.y;
    var deg = BASE_ANGLE - num * BASE_THETA;
    var theta = deg * (Math.PI / 180);
    var cX = pX - (BASE_DISTANCE * Math.cos(theta));
    var cY = pY - (BASE_DISTANCE * Math.sin(theta));
    return {x:cX, y:cY};
}

function showAllEdge(graphData) {
    var edges = graphData.edges;
    for (var id in edges) {
	showEdge(graphData, edges[id]);
    }
    jsPlumb.removeAllEndpoints();
    jsPlumb.draggable($('.graphNode'));
}

var EDGE_LIST = {
    evidence:'evidence',
    dependency:'dependency',
    version:'version',
    derived:'derived',
    agreement:'agreement'
};

function recursiveCalcPosition(graphData, parentNode) {
    if (!parentNode.position) updateNode(parentNode);
    childNodeIds = getRelationNodeIds(graphData, parentNode);
    /* calcration of childNode position */
    var numCalcChild = 0;
    var childArray = {};
    for (var i=0; i<childNodeIds.length; i++) {
	var id = childNodeIds[i];
	var childNode = graphData.nodes[id];
	childArray[id] = childNode;
	if (!childNode.position) {
	    childNode.position = calcChildNodePosition(parentNode, numCalcChild);
	    numCalcChild++;
	}
    }
    /* calcration of grandchildNode position  */
    for (var id in childArray) {
	var childNode = childArray[id];
	var grandChildIds = getRelationNodeIds(graphData, childNode);
	for (var i=0; i<grandChildIds.length; i++) {
	    var gId = grandChildIds[i];
	    var grandChild = graphData.nodes[gId];
	    if (!grandChild.position) {
 		recursiveCalcPosition(graphData, childNode);
	    }
	}
    }
}

var GRAPH_DATA = new GraphData();
var rootNode = {};
function startUserDesktopUI() {
    function showFirstEvidenceList(graphData) {
	var nodes = graphData.nodes;
	for (var id in nodes) {
	    updateNode(nodes[id]);
	}
    }
    var graphData = GRAPH_DATA;
    showFirstEvidenceList(graphData);
}

function testStart() {
    init();
    var graphData = parseJSONGraphData(GRAPH_DATA, sampleData);
    startUserDesktopUI();
}

$(function() {
    userName = localStorage.userName;
    testStart();
})

var BASE_MARGIN = parseInt($('.menu').css('margin-top').split('px')[0])*2 + 
    parseInt($('.menuDisplayCss').css('border-top-width').split('px')[0])*2;
function updateMenuDisplayHeight() {
    function calcMenuDisplayHeight(menuD) {
	var menuArray = $('.menu');
	var height = 0;
	for (var i=0; i<menuArray.length; i++) {
	    height = height + menuArray[i].offsetHeight
	}
	return height;
    }
    var menuD =  $('#menuDisplay');
    var height = calcMenuDisplayHeight(menuD) + BASE_MARGIN;
    menuD.css('height', height + 'px');
}



edgeInfo1 = [
	{
	    kind:"collected",
	    direction:"in",
	    num:"2"
	},
	{
	    kind:"reject",
	    direction:"out",
	    num:"1"
	 }
];

edgeInfo2 = [
    {
	kind:"collected",
	direction:"in",
	num:"1"
    }
];

sampleData = {
    nodes: [
	{
	    id:"1",
	    title:"context1",
	    createdUser:"oshiro",
	    edgeInfo:edgeInfo1
	},
	{
	    id:"2",
	    title:"context2",
	    content:"content",
	    createUser:"tamayose",
	    edgeInfo:edgeInfo2
	}
    ]
};

/* id 1 select direction in and kind collected */
sampleData2 = {
    nodes: [
	{
	    id:"3",
	    title:"id 3",
	    createUser:"kinjo",
	    edgeInfo:edgeInfo1
	},
	{
	    id:"4",
	    title:"id 4",
	    createUser:"oshiro",
	    edgeInfo:edgeInfo2
	}
    ]
};

/* id 1 select direction out and kind reject */
sampleData3 = {
    nodes: [
	{
	    id:"6",
	    title:"id 6",
	    createUser:"kinjo",
	    edgeInfo:edgeInfo1
	}
    ]
};

/* id 2 select direction in and kind collected */
sampleData4 = {
    nodes: [
	{
	    id:"5",
	    title:"id 5",
	    createUser:"user 5",
	    edgeInfo:edgeInfo2
	}
    ]
};

</script>