<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:fragment="header">
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

	<meta name="theme-color" content="#ffffff"></meta>
    <link rel="stylesheet" type="text/css" href="/css/style.css" th:href="@{/css/style.css}"></link>
   	<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" th:href="@{/css/font-awesome.css}"></link>
    <!-- Bootstrap & JQuery -->
	<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"></link>
	<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}"></link>
    <script type="application/javascript" src="http://cdn.jsdelivr.net/webjars/jquery/2.2.1/jquery.min.js" th:src="@{/webjars/jquery/2.2.1/jquery.min.js}"></script>
    <script type="application/javascript" src="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/bootstrap.min.js" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
	<script type="application/javascript" src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js" th:src="@{/webjars/jquery-ui/1.11.4/jquery-ui.min.js}"></script>
    
	<script type="application/javascript" src="/ckeditor/ckeditor.js"></script> <!--  th:src="@{/webjars/ckeditor/4.5.8/standard/ckeditor.js}"></script> -->
	<script src="/ckeditor/gameserver/js/sample.js"></script>
	<link rel="stylesheet" type="text/css" href="/ckeditor/gameserver/css/samples.css"></link>
	<link rel="stylesheet" type="text/css" href="/ckeditor/gameserver/toolbarconfigurator/lib/codemirror/neo.css"></link>

    <title th:text="#{viewMessageBoard.title}">Title</title>
    
	<script th:inline="javascript">
	$(document).ready(function() {
		$( window ).load(function() {
		 	var messagePreviewListString = $("#messagePreviewList").val();
			if (messagePreviewListString.length > 0) {
				var messagePreviewList = jQuery.parseJSON(messagePreviewListString);
				var listString = "";
				$.each(messagePreviewList, function(i, item) {
					var messageId = item["messageId"];
					var threadId = item["threadId"];
					var parentMessageId = item["parentMessageId"];
					var subject = item["subject"];
					var message = item["message"];
					var posterName = item["posterName"];
					var posterId = item["posterId"];
					var created = item["created"];
					
					var messagePanelDiv = '<div class="panel-body panel-border">';
					var subjectString = $("#subjectString").val();
					var messageHeaderDiv = '<div class="message-header" onclick="getMessage(&apos;'+messageId+'&apos;);">'+subjectString+': '+subject+'</div>';
					var messageSnippetDiv = '<div class="message-snippet" onclick="getMessage(&apos;'+messageId+'&apos;);">'+message+'</div>';
					var messageFooterDiv = '<div class="message-footer">'+posterName+'   '+created+'</div>';
					var panel = messagePanelDiv+messageHeaderDiv+messageSnippetDiv+messageFooterDiv+'</div>';
					$("#messagePanelContainer").append(panel);
				});
			} else {
				$("#messageListPreviewDiv").hide();	
			}
			
			if ($("#boardState").val() === "NO_BOARD_SELECTED") {
				$("#messageListPreviewDiv").hide();
				$("#newMessage").hide();
				$("#messageSubjectRow").hide();
				$("#editorContainer").hide();
				$("#viewContainer").hide();
				$("#submitBtn").hide();
			}
			
			if ($("#boardState").val() === "EDIT") {
				$("#messageListPreviewDiv").hide();
				$("#newMessage").show();
				$("#messageSubjectRow").show();
				$("#editorContainer").show();
				$("#viewContainer").hide();
				$("#submitBtn").show();
			} 

			if ($("#boardState").val() === "READ") {
				$("#messageListPreviewDiv").hide();
				$("#newMessage").hide();
				$("#messageSubjectRow").show();
				$("#messageSubjectInput").prop("disabled", "true");
				$("#editorContainer").hide();
        		var data = $("#messageContent").val();
        		$("#viewContainer").html(data);
				$("#viewContainer").show();
				$("#submitBtn").hide();
			} 
			
			if ($("#boardState").val() === "PREVIEW") {
				$("#messageListPreviewDiv").show();
				$("#newMessage").show();
				$("#messageSubjectRow").hide();
				$("#editorContainer").hide();
				$("#viewContainer").hide();
				$("#submitBtn").hide();
			}
			
			$("#newMessage").click(function() {
				$("#messageListPreviewDiv").hide();
				$("#messageSubjectRow").show();
				$("#editorContainer").show();
				$("#submitBtn").show();
			});
			
			$("#submitBtn").click(function() {
				$("#viewMessageBoardForm").submit();
			});
        });
	});		

	function getMessage(messageId) {
		$("#readMessageForm").attr("action", "/shared/readFullMessage/"+messageId);
		$("#readMessageForm").submit();
	}
	</script>   

</head>
<body>
	<div th:include="/public/navbar :: navbar"></div>
	
	<br></br>
	<br></br>
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-11">
			<h1 th:text="#{viewMessageBoard.title}">Updated</h1>
		</div>
	</div>

	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<span class="error-message" th:if="${feFeedback.error}" th:text="${feFeedback.error}">Error.</span>
		</div>
	</div>
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<span class="info-message" th:if="${feFeedback.info}" th:text="${feFeedback.info}">Info.</span>
		</div>
	</div>
 
 	<form id="readMessageForm" action="#" th:action="@{/shared/readFullMessage/}" method="get"></form>
	<form id="viewMessageBoardForm" th:object="${messageBoardDto}" action="#" th:action="@{/shared/postToMessageBoard}" method="post">
	<input id="messageBoardId" type="hidden" th:field="*{messageBoardId}"></input>
	<input id="messageBoardName" type="hidden" th:field="*{messageBoardName}"></input>
	<input id="messageId" type="hidden" th:field="*{messageId}"></input>
	<input id="messageParentId" type="hidden" th:field="*{messageParentId}"></input>
	<input id="threadId" type="hidden" th:field="*{threadId}"></input>
	<input id="messagePreviewList" type="hidden" th:field="*{messagePreviewList}"></input>
	<input id="subjectString" type="hidden" th:value="*{subjectString}"></input>
	<input id="boardState" type="hidden" th:value="*{boardState}"></input>
	<input id="messageContent" type="hidden" th:value="*{messageContent}"></input>
	
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<hr></hr>
			</div>
		</div>

		<div class="row">
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-11">
					<button id="messageBoardStatus" type="button" class="input-margin btn btn-info dropdown-toggle messageboard-status" aria-expanded="false" th:text="${feFeedback.userStatus}"></button>
				</div>
			</div>
		</div>

		<div id="selectBoardDiv" class="row">
			<div class="col-md-1"></div>
			<div class="col-md-5">
				<div class="dropdown">
				    <!--Default buttons with dropdown menu-->
				    <div class="btn-group">
		        		<button type="button" class="btn btn-default messageboard-selector" th:text="#{viewMessageBoard.selectMessageBoard}">Action</button>
				        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
				        <ul class="dropdown-menu">
		        		    <li th:each="descriptor : *{messageBoardList}" th:value="${descriptor.id}">
		            			<a th:href="@{/shared/viewMessageBoard/}+${descriptor.id}" th:text="${descriptor.name}">test</a>
				           	</li>
				        </ul>
		    		</div>
				</div> 		    
			</div>
			<div class="col-md-5">
				<button id="newMessage" type="button" class="btn btn-default right" th:text="#{messageBoard.newMessage}">New</button>
			</div>
		</div>

		<div id="messageListPreviewDiv" class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<div id="messagePanelContainer" class="panel panel-primary message-panel-container" ></div>	
			</div>
		</div>	

		<div id="messageSubjectRow" class="row">
			<div class="col-md-1"></div>
			<div class="col-md-1">
				<label class="input-margin" th:text="#{messageBoard.subject}">Sub</label>
			</div>
			<div class="col-md-9">
				<input id="messageSubjectInput" class="input-margin fullWidth" th:field="*{messageSubject}"></input>
			</div>
		</div>
		<div id="editorContainer" class="folio-margin">
			<div class="grid-container">
				<div class="grid-width-100">
					<textarea id="editor" th:field="*{messageContent}"></textarea>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<div id="viewContainer" class="folio-margin"></div>
			</div>
		</div>

		<br></br>
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-7">
				<input id="submitBtn" class="basic-margin" type="submit" value="Submit" />
			</div>
		</div>

	</form>

	<script>
	<!-- ckeditor js code -->
		initSample();
	</script>

</body>
</html>