<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>R-Consensus</title>
    <link rel='stylesheet' href="form.css">
    <link rel="stylesheet" href="jquery-ui.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>
    <script type="text/javascript" src='viewerLib.js'></script>
    <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 userName;
var treeInfo;
var userList=[];
var root_id;
function loadConsensus(id){
    $.ajax({
	url:BASE_URL+"/consensus/browse/"+id,
	success:function(o){onload(o)},
	type:"GET",cache:false,
	error:function(o){console.log("ERROR",o)}
    });
}

function loadRevisionInfo(consensus_id) {
    $.ajax({
	url:BASE_URL+"/claims/get/revision/"+consensus_id,
	success:function(o){ console.log("revision = "+ o)
			     createSlider(o);
			   },
	type:"GET",cache:false,
	error:function(o){console.log("ERROR",o)}
    });
}

function changeRevision(id) {
    root_id = id;
    loadConsensus(id);
}

var REVISION_INFO = {};
var STEP = 5;
var SLIDE_DISTANCE = 20;
function createSlider(revisionInfo) {
    $('#slider').css('width',revisionInfo.length * SLIDE_DISTANCE);
    var slideMax = 0;
    for (var i=0; i<revisionInfo.length; i++) {
	var r = revisionInfo[i];
	REVISION_INFO[i*STEP] = r;
	slideMax = i*STEP;
    }
    var MAX_REV = revisionInfo.length-1;
    $('#revisionDisplayId').val("0/"+MAX_REV);
    function _slideAction(event, ui) {
	var id = REVISION_INFO[ui.value];
	$('#revisionDisplayId').val(ui.value/STEP+"/"+MAX_REV);
	changeRevision(id);
    }
    function _slideMoveAction(event, ui){
	var id = REVISION_INFO[ui.value];
	$('#revisionDisplayId').val(ui.value/STEP+"/"+MAX_REV);
    }
    $('#slider').slider({ step:STEP,
			  max: slideMax,
			  slide: _slideMoveAction,
			  stop: _slideAction
			});
    $('#slider').slider('option','value',0);
    $('#slider').slider();
}

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

function login(uname){
    userName=localStorage.userName=uname;
    start();
}

function start(){
    init();
    var consensus_id=(location.search.match("[0-9]+")||[])[0];
    loadRevisionInfo(consensus_id);
}

</script>
    <style>
    body{background-color:black;}
p.revisionDisplay{
    position:absolute;
    left:5px;
    top:40px;
    z-index:5;
    color:white;
}
div.revisionSlider{
    position:absolute;
    left:20px;top:80px;
    z-index:5;
    width:50%;
}

</style>
    <script>
    function resetMentionForm(){
	var keys=['title','contents','w','d','b','q','r'];
	for(var i=0;i<keys.length;i++)$("#mentionform_"+keys[i]).val("");
	$("#mention_option")[0].className="option";
    }
var formClaim;
var claimUserMap,mentionUserMap;
function showClaim(claim){
    formClaim=claim;
    var info=claim.info;
    var keys=['title','contents','w','d','b','q','r'];
    for(var i=0;i<keys.length;i++)$("#claimform_"+keys[i]).val(info.toulmin[keys[i]]);
    
    var status="";
    for(var i=0;i<info.users.length;i++)if(info.users[i].id==userName)status=info.users[i].status;
    var op=({denied:1,pend:2,agreed:3})[status];
    
    $("#claim_status").text(info.status)
    $("#claim_status").css("color",({passed:"blue",failed:"red",fail:"red",unknown:"black"})[info.status]);
    $("#agree_option")[0].className="option"+(op?" option"+op:"");
    $("#agree_option").css("display",status?"block":"none");
    
    $("#claim_button").css("display",(userName==info.author)?"block":"none");
    $("#claimvote_option").css("display",status?"block":"none");
    
    $("#claimbody")[0].className="claim_contents";
    $("#mentionbody")[0].className="mention_contents";
    
    $("#claim_author").text(info.author);
    $("#mention_author").text(userName);
    $("#claimvote_option")[0].className="option option"+(claim.agreeType=="majority"?2:1);
    $("#mentionvote_option")[0].className="option option1";
    var stateMap={};
    for(var i=0;i<info.users.length;i++)stateMap['#'+info.users[i].id]=info.users[i].status;
    claimUserMap=new HashSet(info.users.map(function(u){return u.id}));
    mentionUserMap=new HashSet();
    $("#claim_users").text("");
    $("#mention_users").text("");
    if(userName!=info.author)mentionUserMap.add(info.author);
    for(var i=0;i<userList.length;i++){
	var name=userList[i];
	if(name!=info.author){
	    var status=stateMap['#'+name];
	    createUserSelectItem(name,status,claimUserMap).appendTo($("#claim_users"));
	}if(name!=userName){
	    createUserSelectItem(name,name==info.author?"unknown":"",mentionUserMap).appendTo($("#mention_users"));
	}
    }
    resetMentionForm();
    popupShowMain()
}


function claimSave(){
    var claim=formClaim;
    var info=claim.info;
    var id=claim.id||root_id;
    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/edit/"+id,
	    success:function(o){loadConsensus(root_id)},
	    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();
    }
}
function claimAgree(status){
    var claim=formClaim;
    var info=claim.info;
    var id=claim.id||root_id;
    $.ajax({
	url:BASE_URL+"/claims/answer/"+id+"/"+userName+"/"+status,
	success:function(o){loadConsensus(root_id)},
	type:"POST",cache:false,
	error:function(o){console.log("ERROR",o)}
    });
    popupHideAll();
}
function mentionSave(){
    var claim=formClaim;
    var info=claim.info;
    var id=claim.id||root_id;
    var mentionType=[null,"refutation","question","suggestion"][($('#mention_option')[0].className.match("[0-9]+")||"0")[0]];
    var agreeType=[null,"unanimously","majority"][($('#mentionvote_option')[0].className.match("[0-9]+")||"0")[0]];
    var title=$('#mentionform_title').val();
    var contents=$('#mentionform_contents').val();
    var d=$('#mentionform_d').val();
    var w=$('#mentionform_w').val();
    var b=$('#mentionform_b').val();
    var q=$('#mentionform_q').val();
    var r=$('#mentionform_r').val();
    var users=mentionUserMap.toArray();
    var author=userName;
    var errors=[];
    if(!title)errors.push("タイトル");
    if(!agreeType)errors.push("採決方法");
    if(!mentionType)errors.push("反論質問提案");
    if(users.length==0)errors.push("同意を取るユーザ");
    if(errors.length){
	alert("未入力項目："+errors.join(", "));
    }else{
	$.ajax({
	    url:BASE_URL+"/claims/"+mentionType+"/"+id+"/create",
	    success:function(o){loadConsensus(root_id)},
	    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:author,users:users}),
	    error:function(o){console.log("ERROR",o)}
	});
	popupHideAll();
    }
}

</script>
    <div class='header'>
    <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr>
    </div>
    <p class='revisionDisplay'>
    <label for="revInfo">Revision Number:</label>
    <input type="text" id="revisionDisplayId" style='background-color:black; border:0; color:white;'/>
    </p>
    <div class="revisionSlider" id="slider" ></div>

    <div style="position:relative;left:0;top:0;" id='treeMain'>
    <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'>
    </div>
    </div>

    <div class='userList'></div>


    <div id='popup_base' style='display:none;z-index:100'>
    <div id='popup_background'></div>
    <div class='popup_center'>
    <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'>
    <span onclick='popupShowSubMain()' class='button mention_button'>mention</span>
    <div class='option' id='agree_option'>
    <span class='option option1 agree1' onclick="$('#agree_option')[0].className='option option1';claimAgree('denied');">否認</span>
    <span class='option option2 agree2' onclick="$('#agree_option')[0].className='option option2';claimAgree('pend');">保留</span>
    <span class='option option3 agree3' onclick="$('#agree_option')[0].className='option option3';claimAgree('agreed');">合意</span>
    </div>
    <div id='claim_button'>
    <span class='button cancel' onclick="popupHideAll()">cancel</span>
    <span class='button save' onclick="claimSave()">save</span>
    </div>
    </div>
    <div class='cover' id='claim_cover'></div>
    </div>


    <div class='mentioninfo' id='mentioninfo'>
    <div class='claim_title'><input placeholder="title" id='mentionform_title'></div>
    <div id='mentionbody' class='mention_contents'>
    <div class='claim_menu'>
    <div class='menu_item menu_contents' onclick="$('#mentionbody')[0].className='mention_contents'">Contents</div>
    <div class='menu_item menu_toulmin' onclick="$('#mentionbody')[0].className='mention_toulmin'">Toulmin</div>
    <div class='menu_item menu_users'  onclick="$('#mentionbody')[0].className='mention_users'">Users</div>
    </div>
    <div class='mention_main main_contents'>
    <textarea placeholder='contents' id='mentionform_contents'></textarea>
    </div>
    <div class='mention_main main_toulmin'>
    <div class='item_toulmin'><span>データ</span><input id='mentionform_d'></div>
    <div class='item_toulmin'><span>論拠　</span><input id='mentionform_w'></div>
    <div class='item_toulmin'><span>裏付け</span><input id='mentionform_b'></div>
    <div class='item_toulmin'><span>限定詞</span><input id='mentionform_q'></div>
    <div class='item_toulmin'><span>反駁　</span><input id='mentionform_r'></div>
    </div>
    <div class='mention_main main_users'>
    <span class='author_label'>作者:</span>
    <span class='author_name' id='mention_author'></span>
    <div class='option option1' id='mentionvote_option'>
    <span class='option option1 vote1' onclick="$('#mentionvote_option')[0].className='option option1'">全会一致</span>
    <span class='option option2 vote2' onclick="$('#mentionvote_option')[0].className='option option2'">多数決</span>
    </div>
    <div id='mention_users'></div>
    </div>
    </div>	
    <div class='claim_footer'>
    <div class='option' id='mention_option'>
    <span class='option option1 mention1' onclick="$('#mention_option')[0].className='option option1'">反論</span>
    <span class='option option2 mention2' onclick="$('#mention_option')[0].className='option option2'">質問</span>
    <span class='option option3 mention3' onclick="$('#mention_option')[0].className='option option3'">提案</span>
    </div>
    <span class='button cancel' onclick="popupShowMain()">cancel</span>
    <span class='button save' onclick="mentionSave()">save</span>
    </div>
    <div class='cover' id='mention_cover'></div>
    </div>
    </div>
    </div>




    <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>