<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>R-Consensus</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='treeArrangement.js'></script>

<style>
div.header{
	position:absolute;
	left:0;top:0;
	z-index:5;
	height:50px;
	width:100%;
	background:#223;
	background:-moz-linear-gradient(top,#002,#223);
	background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
	color:silver;
	font-size:40px;
}
div.graphNode {
    z-index:20;
    position:abusolute; width:92px; height40px; font-size:12px; padding:4px; background:black;
    border:2px solid silver;
    overflow:hidden;
    border-radius:5px;
    cursor:pointer;
}

</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:20; top:70; width:300px; height:300px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; '>
  <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;'>
	  body
      </div>
  </form>
  </div>
  </div>
</div>

<div style="position:relative;left:0;top:0;" id='graphMain'>
    <div style="position:absolute;width:0;height:0;left:100;" 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 $("#miniDisplay").css("visibility", "visible");
})

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 writeMiniDisplay(title,str) {
    $('#miniDisplayBody')[0].innerHTML = str;
    if(title) {
	$('#miniDisplayTitle')[0].innerHTML = title;
    }
}

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 writeJSONDataToMiniDisplay(jsonObj) {
    var str = "";
    for (var key in jsonObj) {
	str = str + key + ": "+ jsonObj[key] + "<br>";
    }
    writeMiniDisplay(jsonObj.title, str);
}


function init() {
    jsPlumb.importDefaults({
	Connector : ["Straight", { curviness:50} ],
	PaintStyle : { strokeStyle:"gray", lineWidth:2 },
	EndpointStyle : {},
	Anchors: ["BottomCenter","TopCenter"]
    });
}

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

function start() {
    init();
    var rootNode = sampleJSON1;
    showMiniDisplay(rootNode);
    var created = false;
    if(!rootNode.view) {
	created = true;
	rootNode.view = $("<div class='graphNode'/>");
	rootNode.view.click(showMiniDisplay(rootNode));
	rootNode.view.hover();
    }
    var div = rootNode.view;
    div.text(rootNode.title);
    div.css("background","black");
    div.css("border-color","blue");

    rootNode.view.css({
	left:'500px',
	right:'500px'
    });
    $("#graphRoot").css({
	left:'500px',
	top:'500px'
    });
    $("#graphMain").css({
	width:'1000px',
	height:'1000px'
    });

    var fc = $("#graphRoot")[0].firstChild;
    if(fc) $("#graphRoot")[0].insertBefore(rootNode.view[0],fc);
    else $("#graphRoot")[0].append(rootNode.view);

    jsPlumb.repaintEverything();
    

}

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



start();

</script>