<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<!-- CSS styly-->
		<link href="css/css.css" rel="stylesheet" type="text/css" />
		<link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
		<!-- jQuery -->
		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
		<script src="js/jquery.fancybox-1.3.4.pack.js" type="text/javascript" ></script>
		<!-- Sacl init-->
		<script src="js/phonesacl.js" type="text/javascript"></script>
		<!-- JsSIP -->
		<script src="js/jssip-0.3.0.min.js" type="text/javascript"></script>

		<title>SIP klient Sacl</title>
	</head>
	<body>
		<div id="body">
			<!-- Hlavička s elementy pro přihlášení -->
			<div id="hlavicka">
				<div id="hlavickanadpis">SIP klient by <font color="red">Sacl</font></div>

				<div id="prihlaseni">
					<ul>
						<li class="registrace">
							<!-- Odkaz na stránku registrace k SIP serveru -->
							<a href="registrace.html">Registrace</a>
						</li>
						<li class="prihboxf">
							<input id="uri" name="uri" class="uri" type="text" value="SIP adresa"   onclick="if(this.value=='SIP adresa'){this.value=''; this.style.color='#000'}"
							onblur="if(this.value==''){this.value='SIP adresa'; this.style.color='#555'}">
						</li>
						<li class="prihbox">
							<input id="password" class="uri" type="password" value="aaaa"   onclick="if(this.value=='aaaa'){this.value=''; this.style.color='#000'}"
							onblur="if(this.value==''){this.value='aaaa'; this.style.color='#555'}">
						</li>
						<li class="prihbox">
							<input id="proxy"type="text" class="uri" value="IP WS server"   onclick="if(this.value=='IP WS server'){this.value=''; this.style.color='#000'}"
							onblur="if(this.value==''){this.value='IP WS server'; this.style.color='#555'}">
						</li>
						<li>
							<input type="checkbox" id="wsdany" onclick="WsDany();" title="Defaultní SIP server">
						</li>
						<li class="prihboxp">
							<input type="text" id="pripojit" class="cssbutton" value="Připojit" readonly>
						</li>

						<li class="statusline">
							<span id="statusLine"></span>
						</li>

					</ul>
				</div>
			</div>
			<!-- Prostor pro Kontakt list -->
			<div id="contact_list"></div>
			<!-- Prostor pro zobrazení oken jednotlivých konverzací -->
			<div id="chat">
				<ul class="chatContainer">
				</ul>
			</div>
			<!-- Prostor pro informační řádek a skryté video panely -->
			<div id="videochat">
				<br/>
				<p id="callLine"></p>
				<video id="selfView" class="videoprvek" hidden=true autoplay poster="images/video_background.png" width="160" height="120"></video>
				<!--<video id="selfView" autoplay--><!--src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg">--><!--</video>-->
				<video id="remoteView" class="videoprvek" autoplay hidden=true poster="images/video_background.png" width="400" height="300"></video>
				<!--<video id="remoteView" autoplay--><!--src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg">--><!--</video>-->
			</div>

		</div>

	</body>
</html>
<script type="text/javascript">
		$(document).ready(function() {
	//ovládání jednotlivého okna konverzace
	$("form.addMessage").live("submit", function() {
	var text = $(this).parent().find(".message").val();
	var uri = $(this).parent().find(".chaturi").text();
	try {
	if (text !== "") {
	//odeslání rychlé zprávy
	phone.sendMessage(uri,text);
	//přidání zprávy do určeného okna
	$(this).parent().find(".conversation").append("<li class=\"memessage\">já:  " + text + "</li>");
	$(this).parent().find(".message").val("");}
	} catch(e){
	console.log(e);
	return;
	}
	var scroll = $(this).parent().find('.conversation').height();
	//scrollování okna při jeho přeplnění
	$(this).parent().find(".scrollBox").parent().scrollTop(scroll);
	});
	//skrytí, zobrazení,přečtení, ukončení jednotlivých konverzačních oken
	$(".chaturi").live("click", function() {
	$(this).parent().toggleClass("hide");
	$(this).parent().css('background', '#6F9FC4');
	});
	$(".addMessage").live("click", function() {
	$(this).parent().css('background', '#6F9FC4');
	});
	$(".zavritchatokno").live("click", function() {
	$(this).parent().remove("");
	});

	});
	//vytvoření jednotlivého okna konverzace
	function Chat (uri){
	var uri1 = uri.replace('@','');
	uri1 = uri1.replace('.','');
	var chat = '<li id=\"'+uri1+'\" class=\"chatokno\">\
	<span class=\"chaturi\">'+uri+'</span>\<img src=\"images/zavritchat.png\" class=\"zavritchatokno\"/>\
	<form onsubmit=\"return false\"  class=\"addMessage\">\
	<div id=\"scrollBoxContainer\">\
	<div class=\"scrollBox\">\
	<ul class=\"conversation\">\
	</ul>\
	</div>\
	</div>\
	<input type=\"text\" wrap=\"true\" name=\"message\" class=\"message\" />\
	</form>\
	</li>';
	
	if(document.getElementById(uri1)!=null){

	}else{
	if(uri!==$(".chaturi").text()){
	$(".chatContainer").append(chat);};
	console.log($(".chaturi").text());
	}
	};
	//funkce přihlašovacího tlačítka
	$('#pripojit').click(function() {
		if ($(this).val() == "Připojit") {
		$(this).val("Odpojit");
		pripojit.style.color="black";
		phoneInit();
		}
		else {
		$(this).val("Připojit");
		pripojit.style.color="green";
		phoneStop();
		}
		});
	//Ajax funkce pro načtení Kontakt listu
	function createContactList() {
	var sip_uri = $("#uri").val();
	$.ajax({
	url: "createcontactlist.php",
	type:"GET",
	data:{data1: sip_uri },
	success: function(html){
	$("#contact_list").html(html);
	}
	});
	};
	//vepíše jméno serveru do připraveného textboxu
	function WsDany(){
	document.getElementById("wsdany").checked = $("#proxy").val("<?php echo $_SERVER['SERVER_NAME'] ?>");
		};
</script>