<?php
require_once('../config/config.php');
require_once(CLASS_DIR.'dbClass.php');
require_once('datetime.php');


if($_SESSION['userid']=='' && $_SESSION['username']==''){
	header("Location:index.php");
	exit;
}
$userros = mysql_fetch_array(mysql_query("select * from `mychat_user` WHERE `id`!='".$_SESSION['userid']."'"));
$sql = mysql_query("SELECT * FROM `mychat` order by `id` asc");

?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


<title id="title"><?=$_SESSION['username'];?> Login</title>

</head>
<style type="text/css">
.commentLikespan{
	color: #3b5998 !important;
	font-size: 12px;
	min-height: 1px;
	margin-left: 20px;
}
.mainw:hover{
background:rgba(255, 255, 255, 0.77);
}
label{
    color:#333;
	font-size: 13px !important;
	float: left;
	margin-left: 10px;
	width: 510px;
	word-wrap: break-word;
}
table tr td {
	color:#666
}

.comments_link a:hover{
	text-decolration:underline;
}
.per_projects_comment {
	border:none;
}
.mainw{ 
	float: left;
	padding: 10px;
	width: 95.5%;
	background: rgba(255, 255, 255, 0.63);
	margin: 5px;
	-moz-box-shadow: 0 0 5px 5px #888;
	-moz-box-shadow: 4px 0px 5px 0px rgba(205, 207, 211, 1);
	-webkit-box-shadow: -1px 1px 26px 0px rgba(207,192,207,0.52);
	-moz-box-shadow: -1px 1px 26px 0px rgba(207,192,207,0.52);
	-webkit-box-shadow: -1px 1px 26px 0px rgba(214,214,214,1);
	-moz-box-shadow: -1px 1px 26px 0px rgba(214,214,214,1);
	box-shadow: -1px 1px 26px 0px rgba(214,214,214,1);
}
.containerw{
	float:left; width:95%
}

a{
	text-decoration:none;
}
label{
	float:left;
	margin-left:10px;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.38;
}
.a{
	color: green;
	cursor: pointer;
	text-decoration: none;
	float:left;
	font-weight:bold
}
.a:hover{
	text-decoration:underline;
	color: #f47e02;
}
.like-share{ 
	width: 100%;
	float: right;
	height: 15px;
}
.like-share a{
	color: #3b5998; 
	cursor: pointer;
	text-decoration: none;
	float:right;
	font-size:11px;
	margin-bottom:20px;
}

.link-share a:hover{
	text-decoration:underline
}
.like-share a:last{
	margin-left:10px;
}
.margin-left{
	margin-left:10px;
}
.comment_time {
	width: 80px;
	float: left;
	margin-top: 5px !important;
}
#replytestarea_2722 > div:nth-child(2) > div:nth-child(2) > a.a.wallpro.name{
	margin-right:7px;
}
.dull{
	color: #999 !important;
}

.commentsw{
	width: 100%;
	min-height:46px;
	float: left;
	background-color: #edeff4;
	margin-top: 1px;
	padding: 3px;
	word-wrap: break-word;	
	border-bottom: 1px #CCC;
}

.style1 {
	color:#FF6600;
	font-size:8px;
	float:right;
}
.style2 {
	color:#FF6600;
}
.style1:hover {
	color:#FFFFFF;
}
.divhover:hover {
	background-color:#dbdbdb;
}
.workarealeft{
	width: 50%;
	margin:0 auto;
	-webkit-box-shadow: -12px -109px 118px 44px rgba(0,0,0,0.35);
-moz-box-shadow: -12px -109px 118px 44px rgba(0,0,0,0.35);
box-shadow: -12px -109px 118px 44px rgba(0,0,0,0.35);
margin-top: 22px;
}
.unreadmsg{
	background-color:#dbdbdb;
}


.messageleft {
 width:260px;
 float:left;

}
.onlineusershow{
display: inline-block;
background: no-repeat url(//ssl.gstatic.com/mail/sprites/chat-34cfc5a266109a1829cf01bdebf98b3b.png) 0 -51px;
width: 18px;
height: 13px;
}
.onlineusershow:hover{
display: inline-block;
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/chat-34cfc5a266109a1829cf01bdebf98b3b.png) -18px -34px;
width: 18px;
height: 13px;
}
.offlineusershow{
display: inline-block;
background: no-repeat url(https://ssl.gstatic.com/mail/sprites/chat-34cfc5a266109a1829cf01bdebf98b3b.png) -18px 0px;
width: 18px;
height: 13px;
}
.messageleft a:hover{ color  : #000000; }


.messagehead {
background-color: #A85023;
padding: 8px;
font-size: 18px;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.messagearea {
 overflow-x: auto;
 overflow-y: auto;
 border:solid;
 border-width:1px;
 border-color:#e2e2e2;
}
.chattext{
width: 100%;
padding: 8px;
}
</style>
<script>
var totalNum;
</script>
<body style=" background: rgb(124, 46, 46); ">
	<div class="workarealeft">
		<div class="welcomediv">
			<div class="message">
				<div class="messageright">
					<div class="messagehead"><a href="http://coalbazaar.com/mychat/webcamjs-master/demos/basic.html" style="color: #fff;float: left;font-size: 10px;" target="_blank">Pic do</a>Message <a href="logout.php" style="color: #fff;float: right;font-size: 10px;">Logout</a></div>
					<div class="messagearea" id="messagearea" style="min-height:500px;height:500px;background-color: rgba(245, 245, 245, 0.32);">
						<?php
						while($r=mysql_fetch_array($sql)){
						$totalNum = $r['id'];
						?>
						<div class="mainw">
							<div class="containerw">
								<div style="float:left"><a href="javascript:;" class="avatar"><img src="<?=($r['userid']==2)?"deeptisoni.png":"pradoshsoni.png";?>" width="40" height="40" style="border-radius: 26px"></a></div>
								<div style="float:left">
									<label>
										<a href="javascript:;" class="a"><span class="<?=($userros['status']==1 && $r['userid']!=$_SESSION['userid'])?"onlineusershow":($r['userid']==$_SESSION['userid'])?"onlineusershow":"offlineusershow"; ?>"></span><?=($r['userid']==2)?"Deepti Soni":"Pradosh Soni";?></a>
									</label><br>
									<label><?=html_entity_decode(DisplayContent($r['msg']));?></label>
								</div>
							</div>
							<div class="like-share">
								<a href="javascript:;" class="dull margin-left"><?=time2str($r['datetime']);?></a>
							</div>
						</div>
						<?php } 
						?>
					</div>
					<div class="texbox">
						<input name="chatbox" id="chattext"  class="chattext" onKeyDown="Javascript: if(event.keyCode==13) { submitchat(this.value); }">
					</div>
					<iframe src="uploadimg.php" scrolling="no" border=0 style="border: none;height: 50px;width: 160px;"></iframe>
				</div>
			</div>
		</div><!--end of welcomediv -->
	</div>
</body>
</html>
<script>
var totalNum = <?=$totalNum;?>;
showAllChat(totalNum);
function showAllChat(totalNum){
	$.post("chatinsert.php?totalNum="+totalNum,function(data){
		if(data=='fail'){
			setTimeout(showAllChat(totalNum), 3000);
		}else{
			var messagearea = $('#messagearea');
			var str = data;
			var strs=str.split("~");
			$('<div class="mainw"><div class="containerw"><div style="float:left"><a href="javascript:;" class="avatar"><img src="'+strs[0]+'" width="40" height="40"  style="border-radius: 26px"></a></div><div style="float:left"><label><a href="javascript:;" class="a"><span class="'+strs[1]+'"></span>'+strs[2]+'</a></label><br><label>'+strs[3]+'</label></div></div><div class="like-share"><a href="javascript:;" class="dull margin-left">'+strs[4]+'</a></div></div>').appendTo(messagearea);
			document.getElementById("messagearea").scrollTop = 99999999;
			var beepThree = $("#beep-three")[0];

		beepThree.pause();
		beepThree.play();
	
			setTimeout(showAllChat(strs[5]), 3000);
		}
	});
}
function DeleteChat(id){
	$.post("chatinsert.php?deleteid="+id,function(data){
		alert("Success fully deleted");
	});
}

function submitchat(val){
	$.post("chatinsert.php?str="+val,function(data){
		document.getElementById("chattext").value='';
	});
}

</script>
<audio id="beep-three" controls preload="auto" style="display:none">
				<source src="beep.mp3" controls></source>
				<source src="beep.ogg" controls></source>
				Your browser isn't invited for super fun time.
			</audio>