<?
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
	     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		 <style>
		      
		     .cont-chat{position:fixed;bottom:0px;right:0px;width:200px;height:auto;min-height:30px !important;border-left:solid 4px #1C1C1C;border-top:solid 4px #1C1C1C;background:#1C1C1C;}
			 .cont-chat a{outline:none;text-decoration:none;}
			 .opciones{display:none;background:#E6E6E6;width:100%;margin-top:10px;}
			 .chats{display:none;background:#FFFFFF;margin-top:10px;}
			 .disponible{position:absolute;top:8px;right:5px;width:10px;height:10px; background:#3ADF00;-moz-border-radius: 5px;-webkit-border-radius: 15px;border-radius: 5px;-khtml-border-radius: 5px;}
			 .ocupado{position:absolute;top:8px;right:5px;width:10px;height:10px; background:#DF0101;-moz-border-radius: 5px;-webkit-border-radius: 15px;border-radius: 5px;-khtml-border-radius: 5px;}
			 .out{position:absolute;top:8px;right:5px;width:10px;height:10px; background:#E6E6E6;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-khtml-border-radius: 5px;}
			 .section{width:200px;height:17px;-Moz-box-shadow: inset 0px 0px 15px # 000;-webkit-box-shadow: inset 0px 0px 15px #000; box-shadow:inset 0px 0px 15px #000;font-family:arial;font-size:13px;padding-left:10px;}
			 .contacto{width:200px;height:20px;font-family:arial;font-size:14px;padding-left:10px;padding-top:5px;border-bottom:solid 1px #D8D8D8;color:#6E6E6E;}
			 .contacto:hover{background:#BDBDBD;color:#0d0d0d;cursor:pointer;cursor:hand;}
			
			 
			  .cont-conv{position:fixed;bottom:0px;right:200px;height:auto;min-height:30px !important;}
			  .box{position:absolute;bottom:0px;width:200px;height:auto;min-height:30px !important;background:#1C1C1C;border-left:solid 4px #1C1C1C;border-top:solid 4px #1C1C1C;border-right:solid 4px #1C1C1C;border-top:solid 4px #1C1C1C; color:#FFFFFF;font-family:arial;font-size:12px;}
			  .box:hover{cursor:pointer;cursor:hand;}
			  .msg-box{width:200px;display:none;}
			  .msg{height:200px;width:200px;background:#FFFFFF;color:#0D0D0D;overflow-y:scroll;overflow-x:none;}
			  .ipt{width:190px;margin-bottom:10px;}
			  .cntrl{height:30px;}
			 .msgb{width:163px;height:auto;min-height:20px !important;font-family:arial;font-size:14px;padding-left:10px;padding-right:9px;padding-top:5px;padding-bottom:5px;border-bottom:solid 1px #D8D8D8;color:#323232;}
			 .msgb:hover{background:#BDBDBD;color:#0d0d0d;cursor:default;}
			 
			 .msgbnl{width:163px;height:auto;min-height:20px !important;font-family:arial;font-size:14px;padding-left:10px;padding-right:9px;padding-top:5px;padding-bottom:5px;border-bottom:solid 1px #D8D8D8;color:#323232;}
			 .msgbnl:hover{background:#BDBDBD;color:#0d0d0d;cursor:default;}
			 
			 .hora{font-size:9px;margin-top:-30px;height:8px;}
			 
			 .closechat{background:url(imgchat/cerrar.png) left top;width:21px;height:21px;position:absolute;top:3px;right:3px;}
			 .closechat:hover{background:url(imgchat/cerrar.png) left bottom;}
			 .settings{background:url(imgchat/opciones.png) left top;width:21px;height:21px;position:absolute;top:3px;right:26px;}
			 .settings:hover{background:url(imgchat/opciones.png) left bottom;}
			 
			 .notification-center{float:right;}
			 .notification{display:none;width:200px;background:#FFFFFF;color:#0D0D0D;font-family:arial;font-size:11;border:1px solid #D8D8D8;padding:10px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;-khtml-border-radius: 5px;-Moz-box-shadow: 0px 0px 15px # 000;-webkit-box-shadow:0px 0px 15px #000; box-shadow:0px 0px 15px #000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer;cursor:hand;}
		 </style>
		 <script>/*
		     var stat=0;
			 var us="<?echo $_SESSION['usuario_id'];?>";
			 var log="TURISISCOM";
		     function status(s){
			      st=s;
			      $.post("statuschat.php", { usu: us,estado:st, logeo:log}, function(data){
	             });
				 if(s==1){
					     $("#estado").removeClass("ocupado");
					     $("#estado").removeClass("out");
					     $("#estado").addClass("disponible");
					 }
					  if(s==2){
					     $("#estado").removeClass("disponible");
					     $("#estado").removeClass("out");
					     $("#estado").addClass("ocupado");
					 }
					 if(s==0){
					     $("#estado").removeClass("disponible");
					     $("#estado").removeClass("ocupado");
					     $("#estado").addClass("out");
						 $(".chats").slideDown('fast');
						 $(".chats").html("");
					 }
					 stat=s;
			 }
			 function cargachat(){
			     if(stat!=0){
			        $.post("loadchats.php", { usu: us, logeo:log}, function(data){
	                     $(".chats").html(data);
	                 });
				 }
			 }
			 
			 $(document).ready(function(){carga=setInterval("cargachat()",1500);});
			 var pos=0;
			 function conversa(id,al){
			     if(!document.getElementById(id)){
			     cont=document.getElementById("content");
				 chat=document.createElement("div");
				 chat.id=id;
				 chat.setAttribute("class","box");
				 this.iden=id;
				 var _this=this;
				 chat.innerHTML="<div class='cntrl' onclick=\"abre('msg-box"+id+"')\"><b>"+al+"</b><a href='#' onclick=\"cierra('"+id+"')\" class='closechat'></a></div><div class='msg-box' id='msg-box"+id+"'><div class='msg'  id='msgb"+id+"'></div><br><center><input type='text' name='msg"+id+"' class='ipt' onkeyup=\"javascript:enter(this,'"+id+"',event);\"></center></div>";
				 cont.appendChild(chat);
				 document.getElementById(id).style.right=pos+"px";
				 pos=pos+212;
				
				 funct=setInterval(function(){_this.verf();},1000);
			
				 objDiv = document.getElementById ("msgb"+id);
				 this.height=objDiv.scrollHeight;
				 this.verf=function(){
				         id=_this.iden;
				         if(document.getElementById(id)){
				          des=id;
			             $.post("chatea.php", { usu: us,destino:des,ver:2}, function(data){
	                          $("#msgb"+id).html(data);
							  var objDiv = document.getElementById ("msgb"+id);
							     if(objDiv.scrollHeight>_this.height){
                                     objDiv.scrollTop = objDiv.scrollHeight;
								     _this.height=objDiv.scrollHeight;
								  }
	                     });
				     }
				}
					 }
			 }
			 function notification(usu,msg,id,emisor){
			    if(!document.getElementById(id)){
			     cont=document.getElementById("notif-cent");
				 not=document.createElement("div");
				 not.id="n"+id;
				 _this=this;
				 this.iden="n"+id;
				 not.setAttribute("class","notification");
				 not.setAttribute("onclick","javascript: new conversa('"+emisor+"','"+usu+"');abre('msg-box"+emisor+"')");
				 not.innerHTML="<font  style='font-size:11px;'>"+usu+"</font><br>"+msg;
				 cont.appendChild(not);
				 $.post("chatea.php", { idmsg: id,ver:4});
				 $("#n"+id).slideDown('slow').delay(3500).slideUp('slow');
			   }
			   quita(id);
			 }
			 function quita(){ 
				         var nnot=$(".notification");
						 for(i=0;i<nnot.length;i++){
						     if(nnot[i].style.display=="none"){
							     cont=document.getElementById("notif-cent");
								 cont.removeChild(nnot[i]);
							 }
						 }
				 }
			 
			 function abre(id){
			 $("#"+id).slideToggle('slow');
			 checa(id);
			 }
			  function cierra(id){
			   cont=document.getElementById("content");
			   chat=document.getElementById(id);
			   cont.removeChild(chat);
			   ajusta();
			 }
			 
			 function enter(t,id,e)
                    {
					     msg=t.value;
					     des=id;
                         if(e.keyCode=='13'){
						     if(msg!=""){
                                  $.post("chatea.php", { usu: us,mensaje:msg,destino:des,ver:1}, function(data){
	                              $("#msgb"+id).html(data);
							      var objDiv = document.getElementById ("msgb"+id);
                                  objDiv.scrollTop = objDiv.scrollHeight;
	                              });
						         t.value="";
							    }
						     }
                    }
			 function ajusta(){
			     boxes=$(".box");
				 if(boxes.length==0){
				     pos=0;
				 }else{
				     pos=0;
                     for(i=0;i<boxes.length;i++){
					     boxes[i].style.right=pos+"px";
						 pos=pos+212;
					 } 
				 
				 }
			 }	
             function checa(id){
			     idn=id.replace("msg-box","msgb");
			     em=id.replace("msg-box","");
			     var cont=document.getElementById(idn);
			     var msjs=$(".msgbnl");				  
				 for(i=0;i<msjs.length;i++){
				     n=msjs[i].id;
				    id=n.replace("m","");
					 $.post("chatea.php", { idmsg: id, destino:em,ver:3});
				 }
			 } */
		 </script>
     </head>
	 <body>
	     <div class="notification-center" id="notif-cent">
		 </div>
	    <div class="cont-chat" id="chat">
		     <div><a href="#" onclick="javascript:$('.chats').slideToggle('slow');"><img src="imgchat/show-list.png"></a> <a href="#" onclick="$('.opciones').slideToggle('slow')" class="settings"></a><div id="estado" class="out"></div>
			     <div class="opciones"> 
				     <div><a href="javascript:status(1)">disponible</a></div>
					 <div><a href="javascript:status(2)">ocupado</a></div>
					 <div><a href="javascript:status(0)">salir</a></div>
				 </div>
			 </div>
			 <div class="chats">
			 </div>
			 <div class="cont-conv" id="content"></div>
		</div>
	 </body>
</html>