<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel='stylesheet' href="form.css">
<script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
<script src='form.js'></script>
<script>
var LOAD_INTERVAL=5;
var BASE_URL="";
var viewer_url="viewer.html";
$(function(){
	popupInit();
	$('body')[0].onresize=function(){placementUpdate()};
	if(localStorage.userName){
		login(localStorage.userName);
	}else{
		var u=$('#loginUserName');
		$("#loginPopup").css("display","block");
		u.val(localStorage.userName||'');
		u.focus();
	}
});

var loadedClaimIDs={};
var userList=[];
function loadUserList(){
	$.ajax({
		url:BASE_URL+"/users/all",
		success:function(o){userList=o.sort()},
		type:"GET",cache:false,
		error:function(o){console.log("ERROR",o)}
	});
}
function loadClaimIDList(){
	$.ajax({
		url:BASE_URL+"/users/consensus/"+userName,
		success:function(o){claimIDListLoaded(o)},
		type:"GET",cache:false,
		error:function(o){console.log("ERROR",o)}
	});
	function claimIDListLoaded(arr){
		console.log(arr);
		for(var i=0;i<arr.length;i++){
			var id=arr[i];
			if(!loadedClaimIDs[id])loadClaim(id);
		}
	}
	function loadClaim(id){
		loadedClaimIDs[id]="loading";
		$.ajax({
			url:BASE_URL+"/consensus/browse/"+id,
			success:function(o){claimLoaded(id,o)},
			dataType:"json",
			type:"GET",cache:false,
			error:function(o){
				console.log("ERROR",o);
				if(loadedClaimIDs[id]=="loading")delete loadedClaimIDs[id];
			}
		})
	}
	function claimLoaded(id,o){
		console.log(id,o,loadedClaimIDs[id]);
		if(loadedClaimIDs[id]&&loadedClaimIDs[id]!="loading")return;
		var a=$("<a class='claim'></a>");
		a.text(o.toulmin.title);
		a[0].href=viewer_url+"?q="+id;
		a[0].id=id;
		console.log(id)
		placementUpdate(a);
		loadedClaimIDs[id]={element:a,info:o};
	}
}

var placementList=[];
var headerSize=50;
function placementUpdate(element){
	if(element){
		element.appendTo(document.body);
		placementList.push(element);
	}
	if(placementList.length==0)return;
	var W=$('body').width();
	var w=placementList[0].outerWidth();
	var w2=w+30;
	var n=Math.floor(W/w2);
	w2=W/n;
	var harr=[];for(var i=0;i<n;i++)harr[i]=headerSize;
	for(var i=0;i<placementList.length;i++){
		var e=placementList[i];
		var index=0,y=harr[0];
		for(var j=1;j<n;j++)if(harr[j]<y)y=harr[index=j];
		var x=index*w2+(w2-w)/2;
		harr[index]+=e.outerHeight()+30;
		e.css({position:"absolute",left:x,top:y+30});
	}
}

function login(uname){
	userName=localStorage.userName=uname;
	$('#header_title').text("R-Consensus : "+uname);
	$.ajax({
		url:BASE_URL+"/users/create/"+uname,
		success:function(o){console.log(o)},
		type:"PUT",cache:false,
		error:function(o){console.log(o)}
	});
	loadClaimIDList(uname);
	loadUserList();
	setInterval(function(){loadUserList();loadClaimIDList(uname)},LOAD_INTERVAL*1000);
}

var claimUserMap
function showForm(){
	$("#claimbody")[0].className="claim_contents";
	
      var keys=['title','contents','w','d','b','q','r'];
      for(var i=0;i<keys.length;i++)$("#claimform_"+keys[i]).val("");
	$("#claim_author").text(userName);
	$("#claimvote_option")[0].className="option1";
	claimUserMap=new HashSet();
	$("#claim_users").text("");
	for(var i=0;i<userList.length;i++){
		var name=userList[i];
		if(name==userName)continue;
		createUserSelectItem(name,"",claimUserMap).appendTo($("#claim_users"));
	}
	popupShowMain();
}
function logout(){
    localStorage.userName = "";
    location.href = ""; 
}
function claimSave(){
	var agreeType=[null,"unanimously","majority"][($('#claimvote_option')[0].className.match("[0-9]+")||"0")[0]];
	var title=$('#claimform_title').val();
	var contents=$('#claimform_contents').val();
	var d=$('#claimform_d').val();
	var w=$('#claimform_w').val();
	var b=$('#claimform_b').val();
	var q=$('#claimform_q').val();
	var r=$('#claimform_r').val();
	var users=claimUserMap.toArray();
	var errors=[];
	if(!title)errors.push("タイトル");
	if(!agreeType)errors.push("採決方法");
	if(users.length==0)errors.push("同意を取るユーザ");
	if(errors.length){
		alert("未入力項目："+errors.join(", "));
	}else{
		$.ajax({
			url:BASE_URL+"/claims/create",
			success:function(o){loadClaimIDList()},
			type:"POST",cache:false,contentType:"application/json",
			data:JSON.stringify({type:agreeType,toulmin:{title:title,contents:contents,q:q,d:d,w:w,b:b,r:r},author:userName,users:users}),
			error:function(o){console.log("ERROR",o)}
		});
		popupHideAll();
	}
}


</script>
<style>
body{
	background:black;
}
a.claim{
	overflow:hidden;
	font-size:32px;
	border-radius:16px;
	background:silver;
	display:block;
	width:200px;
	padding:5px;
	background:white;
	box-shadow:0 0 10px white;
}
a.claim:hover{box-shadow:0 0 30px white;}

</style>
<div id="loginPopup" style='position:fixed;left:0;top:0;width:100%;height:100%;z-index:10;display:none;'>
<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{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:center;'>
	R-Consensus Login
</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{a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false">login</span>
</form>
</div>
</div>
</div>






<style>

div.claiminfo{left:-300px;top:-200px;}


body{
	margin:0px;
}
div.header{
	position:fixed;
	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;
}
span.createButton{
	position:absolute;right:0;top:0;
	text-align:center;
	width:160;height:50;
	cursor:pointer;
	background:#334;
	background:-moz-linear-gradient(top,#224,#334);
	background:-webkit-gradient(linear,left top,left bottom,from(#224),to(#334));
	color:silver;
}
span.logoutButton{
        position:absolute;right:400;top:0;
        text-align:center;
        width:160;height:50;
        cursor:pointer;
        background:#334;
        background:-moz-linear-gradient(top,#224,#334);
        background:-webkit-gradient(linear,left top,left bottom,from(#224),to(#334));
        color:silver;
}
</style>

<div class='header'>
<span id='header_title'>R-Consensus : Login</span>
<span onclick="showForm()" class='createButton'>create</span>
<span onclick="logout()" class='logoutButton'>logout</span>

</div>
<div id='popup_base' style='display:none;z-index:100'>
<div id='popup_background' onclick="$('#popup_base').css('display','none')"></div>
<div class='popup_center'>
<div class='mentioninfo' id='mentioninfo'><div class='cover' id='mention_cover'></div></div>
<div class='claiminfo' id='claiminfo'>
	<div class='claim_title'><input placeholder="title" id='claimform_title'></div>
	<div id='claimbody' class='claim_contents'>
		<div class='claim_menu'>
			<div class='menu_item menu_contents' onclick="$('#claimbody')[0].className='claim_contents'">Contents</div>
			<div class='menu_item menu_toulmin' onclick="$('#claimbody')[0].className='claim_toulmin'">Toulmin</div>
			<div class='menu_item menu_users'  onclick="$('#claimbody')[0].className='claim_users'">Users</div>
			<div id='claim_status'></div>
		</div>
		<div class='claim_main main_contents'>
			<textarea placeholder='contents' id='claimform_contents'></textarea>
		</div>
		<div class='claim_main main_toulmin'>
			<div class='item_toulmin'><span>データ</span><input id='claimform_d'></div>
			<div class='item_toulmin'><span>論拠　</span><input id='claimform_w'></div>
			<div class='item_toulmin'><span>裏付け</span><input id='claimform_b'></div>
			<div class='item_toulmin'><span>限定詞</span><input id='claimform_q'></div>
			<div class='item_toulmin'><span>反駁　</span><input id='claimform_r'></div>
		</div>
		<div class='claim_main main_users'>
			<span class='author_label'>作者:</span>
			<span class='author_name' id='claim_author'></span>
			<div class='option option1' id='claimvote_option'>
				<span class='option option1 vote1' onclick="$('#claimvote_option')[0].className='option option1'">全会一致</span>
				<span class='option option2 vote2' onclick="$('#claimvote_option')[0].className='option option2'">多数決</span>
			</div>
			<div id='claim_users'></div>
		</div>
	</div>
	<div class='claim_footer'>
		<div id='claim_button'>
		<span class='button cancel' onclick="popupHideAll()">cancel</span>
		<span class='button save' onclick="claimSave()">save</span>
		</div>
	</div>
	<div id='claim_cover' class='cover'></div>
</div>
</div>
</div>