<?php

//header("Access-Control-Allow-Origin: *");

require_once "../private/includes/_inc_config.php";
require_once "../private/includes/_inc_secret.php";

// tmp debug get all database entries as sql
/*
require_once "../private/includes/_inc_connect.php";
require_once "../private/includes/_inc_db_chat.php";
$sql = dbchatGetAllToSQL($mysqli);
echo "<!-- $sql -->";
if($mysqli) $mysqli->close();
// */

// nf test group:	grp_vhchffsnxct74d1mlive
// nf test user id:	vhchffsnxct74d1m_WYpLyWf7Y9live

$streamID = "somelivestream";
$socketioUrl = URL_SOCKET_IO;
$socketioUrlProxy = URL_SOCKET_IO_PROXY;
$socketioWss = WSS_SOCKET_IO;
$socketioWssProxy = WSS_SOCKET_IO_PROXY;

// clear cookie
if( isset($_GET['clear_cookie']) && ($_GET['clear_cookie'] == 1)  ){
	if( isset($_COOKIE['tmplivechatuserid']) ) unset($_COOKIE['tmplivechatuserid']); 
	setcookie('tmplivechatuserid', null, -1, '/');
}

$data = array();
$data['type'] = TYPE_ADMIN; // TYPE_ADMIN, TYPE_USER, TYPE_GUEST
$data['ts'] = time();
//$data['ek'] = sha1( $data['type'] . $data['ts'] . SECRET_KEY );
$partBeforeSecret = $data['type'] . $data['ts'];
$partAfterSecret = "";
$data['ek'] = secretGetEncryptedKey($partBeforeSecret, $partAfterSecret);
// user id cookie
if( isset($_COOKIE["tmplivechatuserid"]) ){
	$data['id'] = $_COOKIE["tmplivechatuserid"];
}else{
	$data['id'] = $data['type'] ."_". rand(1, 1000);
	$expire = time() + 10 * 60 * 60;
	setcookie("tmplivechatuserid", $data['id'], $expire, "/");
}
$data['name'] = "Otto N. Horn (". $data['id'] .")";
$data['group'] = "grp_".$streamID;

// load chat from database
$dbUrl = HTML_ROOT_DB_GET;
$dbTS = time();
//$dbEK = sha1( $dbTS . SECRET_KEY . $data['group'] . $data['id'] );
$partBeforeSecret = $dbTS;
$partAfterSecret = $data['type'] . $data['group'] . $data['id'];
$dbEK = secretGetEncryptedKey($partBeforeSecret, $partAfterSecret);

$strGlobalMute = "";
if($data['type'] == TYPE_ADMIN){
	$strGlobalMute = "<div class=\"chatToolBarItem\">\n";
	$strGlobalMute .= "<select id=\"htmlidGlobalMuteTime\">\n";
	$strGlobalMute .= "<option value=\"0\">permanent</option>\n";
	$strGlobalMute .= "<option value=\"10\">10 minutter</option>\n";
	$strGlobalMute .= "</select>\n";
	$strGlobalMute .= "<a href=\"javascript:usersToggleGlobalMute();\"><img id=\"htmlidUserGlobalMute\" class=\"chatBtn\" src=\"img/muted_global_no.png\" title=\"Mute for alle\"></a>\n";
	$strGlobalMute .= "</div>";
}

// polls user id
$pollUserID = $data['id'];
$pollOriginID = "myoriginid";
// polls admin get / view
$pollDomainName = POLL_DOMAIN_NAME;
$pollTS = time();
$pollEK = sha1( $pollTS . SECRET_KEY );

?>
<html>

<head>

<title>| VideoTool Live Chat |</title>

<style>
	html { margin: 0; padding: 0; box-sizing: border-box; }
	body { margin: 0; padding: 0; background-color: #646464; font-size: 14px; font-family: Helvetica, Arial; color: #ECECEC; }
	
	a:link {color: #ECECEC; font-weight: bold; text-decoration: none;}
	a:active {color: #FFFFFF; font-weight: bold; text-decoration: none;}
	a:visited {color: #ECECEC; font-weight: bold; text-decoration: none;}
	a:Hover {color: #FFFFFF; font-weight: bold; text-decoration: none;}
	
	.chatContainer { position: relative; width: 80%; margin-top: 5px; margin-bottom: 20px; margin-left: 10%; padding: 10px; background-color: #464646; border-radius: 3px; box-sizing: border-box; display: block; }
	.chatToolBar { position: relative; width: 100%; height: 2em; margin-bottom: 10px; vertical-align: middle; box-sizing: border-box; }
	.chatToolBarItem { position: relative; margin-right: 10px; display: inline-block; }
	.chatBtn { position: relative; height: 2em; }
	.chatBtnClose { position: absolute; width: 2em; top: 0; right: 0; }
	.chatStatusLeft { position: relative; width: 1em; }
	.chatUserName { font-size: 1.5em; }
	.chatContent { position: relative; width: 100%; min-height: 20vh; font-size: 1.4em; color: #fdfbfc; font-weight: normal; overflow: auto; }
	div.chat { position: relative; padding: 10px; width: 90%; margin: 5px; border-radius: 10px; border: 1px solid #c9c7c8; overflow-wrap: break-word; }
	div.chat.me { background-color: #726e6f; float: right; }
	div.chat.other { background-color: #373536; float: left; }
	span.chatInfo { font-size: 0.9em; line-height: 0.9em; color: #dedfd9; font-weight: bold; }
	span.chatInfoTime { font-size: 0.5em; font-weight: normal; display: block; }
	
	.formChat { position: relative; padding: 3px; width: 100%; }
	.formChat input { padding: 10px; width: 70%; margin-right: .5%; border-radius: 5px; outline: none; font-size: 1.6em; }
	.formChat button { width: 29%; color: #ECECEC; background-color: #364636; border-radius: 5px; border: 1px solid #CAC8C9; padding: 10px; outline: none; font-size: 1.6em; }
	
	.usersContainer { position: relative; width: 80%; height: 300px; margin-bottom: 20px; margin-left: 10%; padding: 10px; background-color: #464646; border-radius: 3px; overflow-y: auto; box-sizing: border-box; display: block; }
	.usersToolBar { position: relative; width: 100%; height: 3em; overflow: hidden; vertical-align: middle; }
	.usersPages { position: relative; margin-bottom: 10px; }
	.usersPending { position: relative; margin-bottom: 10px; }
	a.usersSelectedPage:link { color: #afe100; }
	.users { position: relative; }
	.usersItem { position: relative; margin-bottom: 5px; padding: 10px; border-radius: 5px; overflow: hidden; background-color: #363636; }
	.usersItem.self { background-color: #363656; }
	.usersItem.active { background-color: #364636; }
	.usersItem.online { background-color: #363636; }
	.usersItem.busy { background-color: #302626; }
	.usersItem.offline { background-color: #302626; }
	.usersItemIcons { margin-left: 10px; display: inline-block; }
	.usersItemIconsBtn { width: 2em; }
	.userChatPending {display: inline-block; }
	.userChatPendingImg { width: 1em; }
	
	.pollContainer { position: relative; width: 60%; margin-bottom: 20px; margin-left: 10%; padding: 0; background-color: #363636; box-sizing: border-box; }
	.pollContainerAdmin { position: relative; margin-bottom: 10px; }
	.pollContainerAdminBtn { width: 2em; margin-left: 5px; display: none; }
	
	#htmlidJsDebugOutput { width: 90%; }

</style>

<meta http-equiv="imagetoolbar" content="no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="author" content="Nicolai Farver" />
<meta name="keywords" content="Nicolai , Farver ... " />
<meta name="description" content="WebRTC" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<link rel="icon" href="img/favicon.png" type="image/png">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

<!-- socket -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.5/socket.io.js"></script>

<!-- poll style -->
<link rel="stylesheet" href="<?php echo POLL_DOMAIN; ?>css/poll.css?anticache=v30">
<!-- poll js -->
<script src="<?php echo POLL_DOMAIN; ?>js/poll.js?anticache=v30"></script>

<script src="js/debug.js?anticache=v30"></script>
<script src="js/sleep.js?anticache=v30"></script>
<script src="js/html.js?anticache=v30"></script>
<script src="js/chat.js?anticache=v30"></script>
<script src="js/users.js?anticache=v30"></script>
<script src="js/socket.js?anticache=v30"></script>
<script src="js/NetworkCheck.js?anticache=v30"></script>
<script src="js/_main.js?anticache=v30"></script>

<script>
	// user init for poll vote
	pollInitGet(<?php echo "'$pollDomainName', '$pollTS', '$pollEK'"; ?>);
	pollSetUserID(<?php echo "'$pollUserID', '$pollOriginID'"; ?>);
	// main livechat
	mainInit(<?php echo "'$socketioUrl', '$socketioUrlProxy', '$socketioWss', '$socketioWssProxy', '".$data['type']."', ".$data['ts'].", '".$data['ek']."', '".$data['id']."', '".$data['name']."', '".$data['group']."', '$dbUrl', '$dbTS', '$dbEK', 'asc'"; ?>);
</script>

</head>

<body>

<div id="htmlidChatContainer" class="chatContainer">
	<div class="chatToolBar">
		<div class="chatToolBarItem">
			<span class="chatUserName">Alle chat:</span>
		</div>
	</div>
	
	<div id="htmlidChat" class="chatContent">
	</div>
	
	<form id="htmlidFormChatAll" class="formChat" action="">
		<input id="htmlidFormChatMessage" autocomplete="off" /><button>send</button>
	</form>
	<div id="htmlidChatBanMsg"></div>
</div>

<div class="usersContainer">
	<div class="usersToolBar">
		<input id="htmlidSearchInput" type="text" name="searchtext" placeholder="Søg" autocomplete="off">
	</div>
	<div id="htmlidUserChatPending"  class="usersPending">
	</div>
	<div id="htmlidUsersPages" class="usersPages">
	</div>
	<div id="htmlidUsers" class="users">
	</div>
</div>

<div id="htmlidPrivateChatContainer" class="chatContainer">
	<div class="chatToolBar">
		<div class="chatToolBarItem">
			<img id="htmlidChatUserOnlineStatus" class="chatStatusLeft" src="img/onlinestatus_online.png" title="Online status">
		</div>
		<div class="chatToolBarItem">
			<span id="htmlidPrivateChatUserName" class="chatUserName"></span>
		</div>
		<?php echo $strGlobalMute; ?>
		<div class="chatToolBarItem">
			<a href="javascript:usersToggleLocalMute();"><img id="htmlidUserLocalMute" class="chatBtn" src="img/muted_local_no.png" title="Mute lokalt"></a>
		</div>
		
		<a href="javascript:chatClosePrivate();"><img class="chatBtnClose" src="img/btn_close.png" border="0"></a>
	</div>
	
	<div id="htmlidChatPrivate" class="chatContent">
	</div>
	
	<form id="htmlidFormPrivateChat" class="formChat" action="">
		<input id="htmlidFormPrivateMessage" autocomplete="off" /><button>send</button>
	</form>
	<div id="htmlidChatPrivateBanMsg"></div>
</div>

<div class="pollContainer">
	<div id="htmlidPollQuestionVote"></div>
</div>

<div id="htmlidJsDebugOutput">JS debug output:<br></div>

</body>
</html>