<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;
}
</style>


<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 $("#loginPopup").css("display", "hidden");
    else $("#loginPopup").css("visibility", "visible");
})

function start() {

}

function beginScript() {
    function begin(element, x, y) {
	var s = '#' + element.id + '(begin drag)' + ' x:' + x + ', y:' + y;
	updateInfo(s);
    }
    function drag(element, x, y) {
	var s = '#' + element.id + ' (dragging)' + ' x:' + x +', y:' +y;
	updateInfo(s);
    }
    function end(element, x, y) {
	var s = '#' + element.id + ' (end drag)' + ' x:' + x +', y:' +y;
	updateInfo(s);
    }
    function updateInfo(s) {
	document.getElementById("info").innerHTML = s;
    }
    var infoForm = DragHandler.attach(document.getElementById('loginPopup'));
    infoForm.dragBegin = begin;
    infoForm.drag = drag;
    infoForm.dragEnd = end;
}

var DragHandler = {
    _oElem : null,
    attach : function(oElem) {
	oElem.onmousedown = DragHandler._dragBegin;
	oElem.dragBegin = new Function();
	oElem.drag = new Function();
	oElem.dragEnd = new Function();
	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;
	oElem.dragBegin(oElem, x, y);
	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;
	oElem.drag(oElem, x, y);
	return false;
    },
    _dragEnd : function() {
	var oElem = DragHandler._oElem;
	var x = parseInt(oElem.style.left);
	var y = parseInt(oElem.style.top);
	oElem.dragEnd(oElem, x, y);
	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();
});

</script>

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

<div id='info'></div>
<div id="loginPopup" style='position:fixed; left:20; top:70; width:35%; height:35%; border:solid 1px; border-radius:5px; '>
  <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
  <div style='position:absolute; left:50%; top:50%'>
  <div style='position:absolute; left:-160px; top:-80px; width:320px; height:120px; background:white;'>
  <form onsubmit="try{var a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}} catch(e){console.log(e)}return false;">
      <div style='position:absolute; left:20px; top:15px; font-size:24px; width:280; text-align:left;'>
	  dimolto
      </div>
      <input type=text placeholder='username' style='position:absolute; left:20px; top:70px; width:180px; font-size:16px; height:24px;' id='loginUserName'>
<!--
      <span style='position:absolute; left:220px; top:70px; width:80px; font-size:16px; height:24px; line-height:24px;' class='button' value='login' onclick="try{var a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false;">Login</span>
-->
      <span style='position:absolute; left:220px; top:70px; width:80px; font-size:16px; height:24px; line-height:24px;' class='button' value='login' >move</span>
  </form>
  </div>
  </div>
</div>