<?php
$DataBase = new DataBase();
$User = new User($DataBase->con);
if (!$User->IsLogged()) header("Location: /login");
$UName = $User->GetNume($_COOKIE['uid']);
?>
<html>
<head>
<script type="text/javascript" src="../loadjs/jquery"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#send").click(function () {
SendMessage();
$("#mesaj").focus();
});
$('#mesaj').bind('keypress', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
SendMessage();
}
});
$("#smiles img").click(function () {
$("#mesaj").val($("#mesaj").val()+" "+$(this).attr("data-code"));
$("#mesaj").focus();
});
$('#user').live('click', function() {
$("#mesaj").val($("#mesaj").val()+" ["+$(this).text()+"] ");
$("#mesaj").focus();
});
Update();
});
function SendMessage() {
var mess = $("#mesaj").val();
if (mess.length > 1) {
$("#mesaj").val("");
$.post("ajax/chat/send", { mesaj : mess }, function (data) {
$("#messages").html(data.messages);
$("#online").html(data.online);
ShowSmiles();
}, "json");
}
}
function Update() {
$.post("ajax/chat/update", { process: 'update' }, function(data) {
$("#messages").html(data.messages);
$("#online").html(data.online);
ShowSmiles();
setTimeout(function () {
Update();
},2000);
}, "json");
}
function ShowSmiles() {
$("#smiles img").each(function () {
$("#messages").html(
$("#messages").html().split($(this).attr('data-code')).join($(this)[0].outerHTML)
);
});
$("#messages").html(
$("#messages").html().split("[<?=$UName?>]").join("<span id=\"foryou\"><?=$UName?></span>, ")
);
$("#messages").scrollTop($("#messages")[0].scrollHeight);
}
</script>
<style type="text/css">
body {
font-family: Tahoma;
font-size: 13px;
}
#chat {
width: 700px;
height: 500px;
}
#messages, #online {
margin: 5px;
border: 1px solid #888;
padding: 10px;
overflow-x:auto;
float: left;
height: 300px;
background: rgba(255,255,255,0.5);
}
#smiles {
margin: 5px;
width: 700px;
}
#smiles img, #user {
cursor: pointer;
}
#messages {
width: 500px;
}
#online {
width: 130px;
}
#mesaj {
width: 523px;
margin: 5px;
height: 30px;
font-size: 20px;
padding-left: 5px;
}
#send {
height: 30px;
width: 150px;
}
#foryou {
color: red;
}
</style>
</head>
<body>
<div id="chat">
<div id="messages">Loading</div>
<div id="online">Loading</div>
<div id="smiles">
<img src="/template/img/smilies/smile.gif" data-code=":)" alt="Bucuros">
<img src="/template/img/smilies/sad.gif" data-code=":(" alt="Mahnit">
<img src="/template/img/smilies/cry.gif" data-code=":'-(" alt="Pling">
<img src="/template/img/smilies/acute.gif" data-code=":acute:" alt="Mai mai mai...">
<img src="/template/img/smilies/aggressive.gif" data-code=":aggressive:" alt="Bataie">
<img src="/template/img/smilies/airkiss.gif" data-code=":airkiss:" alt="Te pup">
<img src="/template/img/smilies/ae.gif" data-code=":ae:" alt="Iuhuuu!">
<img src="/template/img/smilies/blum3.gif" data-code=":blum3:" alt="Limbuta">
<img src="/template/img/smilies/bounce.gif" data-code=":bounce:" alt="Opa!">
<img src="/template/img/smilies/bravo.gif" data-code=":bravo:" alt="Bravo">
<img src="/template/img/smilies/beer2.gif" data-code=":beer:" alt="O bere de la mine!">
<img src="/template/img/smilies/cake.gif" data-code=":cake:" alt="Felicitari!">
<img src="/template/img/smilies/crazy.gif" data-code=":crazy:" alt="Nebun">
<img src="/template/img/smilies/crybaby.gif" data-code=":cry:" alt="Pling in hohote">
<img src="/template/img/smilies/eyebrow.gif" data-code=":serios:" alt="Serios?">
</div>
<input type="text" placeholder="Mesaj..." id="mesaj"/>
<button id="send">Trimite</button>
</div>
</body>
</html>