third
/
freeswitch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
							<html>
	<head>
		
	    <meta http-equiv="Pragma" content="no-cache">
	    <meta http-equiv="Expires" content="-1">
	    <meta http-equiv="cache-control" content="no-store">
	    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	
		<script language="javascript" content-type="text/javascript" src="swfobject.js"></script>
	    <script language="javascript" content-type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" ></script>
	 	<script language="javascript" type="text/javascript" src="jquery.query-2.1.7.js"></script>
	 	<script language="javascript" type="text/javascript" src="jquery.tmpl.js"></script>
		
		<script language="javascript" content-type="text/javascript">		
			var flashvars = { 
				rtmp_url: 'rtmp://my.ip.address.here/phone'
			};
			
			var params  = {
				allowScriptAccess: 'always'
			};
			
			function makeCall(number, account, options) {
				$("#flash")[0].makeCall(number, account, options);
			}
			
			function sendDTMF(digit, duration) {
				$("#flash")[0].sendDTMF(digit, duration);
			}
			
			function onDisplayUpdate(uuid, name, number) {
				var elm = $("#call_" + uuid);
				elm.children(".callerid_name").text(name);
				elm.children(".callerid_number").text(number);
				elm.data("name", name);
				elm.data("number", number);
				
				if (uuid == $("#incoming_call").data("uuid")) {
					$("#incoming_name").text(name);
					$("#incoming_number").text(number);
				}
			}
			
			function hangup(uuid) {
				$("#flash")[0].hangup(uuid);
			}
			
			function answer(uuid) {
				$("#flash")[0].answer(uuid);
			}
			
			function attach(uuid) {
				$("#flash")[0].attach(uuid);
			}
			
			function transfer(uuid, dest) {
				$("#flash")[0].transfer(uuid, dest);
			}
			
			function ui_transfer(uuid) {
				$("#transfer").data("uuid", uuid);
				$("#transfer").dialog('open');
			}
			
			function three_way(uuid1, uuid2) {
				$("#flash")[0].three_way(uuid1, uuid2);
			}
			
			function do_three_way(uuid) {
				var a = $(".active_call").data("uuid");
				if (a != "") {
					three_way(a, uuid);
				}
			}

			function do_join(uuid) {
				var a = $(".active_call").data("uuid");
				if (a != "") {
					join(a, uuid);
				}
			}

			
			function join(uuid1, uuid2) {
				$("#flash")[0].join(uuid1, uuid2);
			}
			
			function onCallState(uuid, state) {
				$("#call_"+uuid).children('.call_state').text(state);
			}
			
			function onIncomingCall(uuid, name, number, account, evt) {
				if (name == "") {
					name = "Unknown Name";
				}
				if (number == "") {
					number = "Unknown Number";
				}
				
				add_call(uuid, name, number);
				
				$("#incoming_call").data("uuid", uuid);
				$("#incoming_name").text(name);
				$("#incoming_number").text(number);
				$("#incoming_account").text(account);
				$("#incoming_call").dialog('open');
			}
			
			function onDisconnected() {
				$("#status").text("Disconnected");
				$("#sessionid").text("");
				setTimeout(function() {
					$("#status").text("Connecting...");
					$("#flash")[0].connect();
				}, 5000);
			}
			
			function onMakeCall(uuid, number, account) {
				add_call(uuid, "", number, account);
			}
			
			function onHangup(uuid, cause) {
				if ($("#incoming_call").data("uuid") == uuid) {
					$("#incoming_call").dialog('close');
				}
				
				$("#call_" + uuid).children(".hangupcause").text(cause);
				
				setTimeout(function() {
					remove_call(uuid);
				}, 1000);
			}

			function onDebug(message) {
				$("#log").append(message + "<br/>");
			}
	
			function onAttach(uuid) {
				$(".active_call").removeClass('active_call');
				
				if (uuid == "") {
						$("a", "#controls").button("option", "disabled", true);
 				} else {
						$("a", "#controls").button("option", "disabled", false); 
						$("#call_" + uuid).addClass('active_call');
				}
			}
			
			function checkMic() {
				try {
					if ($("#flash")[0].isMuted()) {
						$("#no_mic").show();
						$("#input_source").hide();
						return false;
					} else {
						$("#no_mic").hide();
						$("#input_source").show();
						return true;
					}					
				} catch(err) {
					return false;
				}
			}
			
			function onConnected(sessionid) {
				$("#sessionid").text(sessionid);
				$(".call", "#call_container").remove();
				$(".account", "#account_container").remove();
				$("#status").text("Connected");
				
				if (!checkMic()) {
					$("#security").dialog('open');
				}
			}
			
			function login(user,pass) {
				$("#flash")[0].login(user,pass);
			} 
			
			function logout(account) {
				$("#flash")[0].logout(account);
			}
			
			function onLogin(status, user, domain) {
				if (status != "success") {
					softAlert("Authentication failed!", "onAuth");
				} else {
					//$("#status").html("Connected as <span class='user'>" + user + "</span>@<span class='domain'>" + domain + "</span>");
					var u = user + '@' + domain;
					$("#flash")[0].register(u, $.query.get('code'));
					add_account(user, domain);
				}
			}
			
			function onLogout(user,domain) {
				remove_account(user, domain);
			}
			
			function onInit() {
				var mics = eval($("#flash")[0].micList());
				var sources = $("#input_source");
				var current_mic = $("#flash")[0].getMic();
				sources.children().remove();
				
				$("#status").text("Connecting...");

				for (i = 0; i < mics.length; i++) {
					var a = (i == current_mic) ? "selected" : "";
					sources.append("<option value='"+ i + "' " + a + " >" + mics[i] + "</option");
				}
			}
			
			function onEvent(data) {
				onDebug("Got event: " + data);
			}
			
			function softAlert(message,title) {
				$("#message_text").text(message);
				$("#message").dialog('option', 'title', title);
				$("#message").dialog('open');
			}
			
			function get_uuid(object) {
				return object.parent(".call").data("uuid");
			}
			
			function add_call(uuid, name, number, account) {
				var c = [ {uuid: uuid, name: name, number: number, account: account } ];
				
				var elm = $("#call_template").tmpl(c);

				elm.data("uuid", uuid);
				elm.data("name", name);
				elm.data("number", number);
				elm.data("account", account);
				
				elm.appendTo("#call_container");
			}
			
			function remove_call(uuid) {
				var c = $('#call_'+ uuid);
				c.fadeOut("slow", function() { c.remove() } );
			}
			
			function get_user(object) {
				return object.parent(".account").data("user");
			}
			
			function add_account(suser, domain) {
				var u = suser + "@" + domain;
				var sid = u.replace("@", "_").replace(/\./g, "_");
				var c = [ { id: sid, user: u} ];
				var elm = $("#account_template").tmpl(c);
				elm.data("user", u);
				elm.appendTo("#account_container");
				$("a", "#account_" + sid).button();
			}
			
			function remove_account(suser,domain) {
				var u = suser + "_" + domain;
				var sid = u.replace(/\./g, "_")
				
				var c = $('#account_'+ sid);
				c.fadeOut("slow", function() { c.remove() } );
			}
			
			function showSecurity() {
				$("#security").dialog('open');
			}
			
			
			function newcall(account) {
				$("#callout").data('account', account);
				$("#callout").dialog('open');
			}
			
		 $(document).ready(function() {
			swfobject.embedSWF("freeswitch.swf", "flash", "250", "150", "9.0.0", "expressInstall.swf", flashvars, params, []);
			
			if (swfobject.ua.ie) {
				$("#flash").css("top", "-500px"); 
				$("#flash").css("left", "-500px");				
			} else {
				$("#flash").css("visibility", "hidden"); 				
			}
			
		   $("#incoming_call").dialog({ 
			autoOpen: false,
			resizable: false,
			buttons: { 
				"Answer": function() { 
					answer($(this).data("uuid"));
					$(this).dialog("close"); 
				},
				"Decline": function() { 
					hangup($(this).data("uuid"));
					$(this).dialog("close"); 
				}
			}});
			
		   $("#callout").dialog({ 
				autoOpen: false, 
				resizable: false,
				width: 600,
				buttons: { 
					"Call": function() { 
						makeCall($("#number").val(), $(this).data('account'), []);
						$(this).dialog("close"); 
					},
					"Cancel": function() { 
						$(this).dialog("close"); }
					}
				});
			$("#message").dialog({ 
				autoOpen: false,
				resizable: false,
				buttons: { 
					"Ok": function() { 
						$(this).dialog("close"); 
					}
				}});
				
			$("#controls").dialog({
				title: "Keypad",
				autoOpen: false,
				resizable: false,
				width: 200,
				height: 220
			});
			
			$("#auth").dialog({
				modal: true,
				autoOpen: false,
				resizable: false,
				buttons: {
					"Ok": function() {
						login($("#username").val(), $("#password").val());
						$("#password").val('');
						$(this).dialog('close');
					},
					"Cancel": function() {
						$(this).dialog('close');
					}
				}
			});
			
			$("#transfer").dialog({
				autoOpen: false,
				resizable: false,
				width: 600,
				buttons: {
					"Ok": function() {
						transfer($(this).data("uuid"), $("#transfer_number").val());
						$(this).dialog('close');
					},
					"Cancel": function() {
						$(this).dialog('close');
					}
				}
			});
				
			$("#security").dialog({
				autoOpen: false,
				modal: true,
				resizable: false,
				buttons: {
					"Ok": function() { 
						$(this).dialog("close"); 
					}
				},
				minWidth: 300,
				minHeight: 170,
				drag: function () {
					var flash = $("#flash");
					var fake_flash = $("#fake_flash");
					var offset = fake_flash.offset();
					
					flash.css("left", offset.left);
					flash.css("top", offset.top + 20);	
				},
				open: function () {
					var flash = $("#flash");
					var fake_flash = $("#fake_flash");
					var offset = fake_flash.offset();
					
					fake_flash.css("width", flash.width())
					fake_flash.css("height", flash.height() + 20)
					
					flash.css("left", offset.left);
					flash.css("top", offset.top + 20);
					flash.css("visibility", "visible");
					flash.css("z-index", $("#security").parent(".ui-dialog").css("z-index") + 1);
					flash[0].showPrivacy();
				},
				close: function() {
					var flash = $("#flash");
					flash.css("visibility", "hidden");
					flash.css("left", 0);
					flash.css("top", 0);
					flash.css("z-index", "auto");
					
					checkMic();
				}
			});
			$("a", "#controls").button({ disabled: true });
			$("a", "#call_container").button();
			$("a", "#guest_account").button();
		 });
		
			function testevent() {
				var evt = {
					test1: "hello",
					test2: "hallo",
					test3: "allo"
				};
				$("#flash")[0].sendevent(evt);
			}
		
		</script>
		<style type="text/css">
			.dtmfrow {
				min-width: 50px;
				width: 20px;
				height: 20px;
				text-align: center;
				vertical-align: center;
			}
			
			#call_container {
				float: right;
			}
			
			#account_container {
				float: left;
			}
			
			.call {
				border: 1px solid #181469;
				width: 400px;
				height: 120px;
			}
			
			.account, #guest_account {
				border: 1px solid #181469;
				height: 100px;
				width: 300px;
				padding-left: 20px;
			}
		
			#call_add {
				width: 400px;
				text-align: right;
			}
		
			.active_call {
				background-color: #DBF2C2;
			}
			
			.three_way {
				background-color: #C0DAF2;
			}
			
			#controls {
				float: left;
			}
			
			#flash {
				float: left;
				visibility: hidden;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#log {
				font-size: 13px;
			}
			
			#header {
				background-color: #003366;
				color: white;
				height: 30px;
				width: 100%;
				padding-top: 10px;
				padding-left: 5px;
			}
			
			#input_source_container {

			}
			
			#status {
				
			}
			
			#sessionid {
				margin-left: 20px;
			}
			
			#header a, #header a:visited, #header a:hover {
				color: #white;
				text-decoration: underline;
			}
			
			#no_mic {
				float: right;
				padding-right: 10px;
				display: none;
			}
			
			#input_source {
				float: right;
				padding-right: 10px;
			}
		</style>
		<script id="call_template" type="text/html">
		<div class="call" id="call_{{= uuid}}">
			<p class="callerid">
				Account: {{= account}}<br/>
				<span class="callerid_name">{{= name}}</span> <span class="callerid_number">{{= number}}</span>
			</p>
			Call state: <span class="call_state"></span> <span class="hangupcause"></span><br/>
			<a href="#" onClick="attach(get_uuid($(this)))">Switch</a>
			<a href="#" onClick="hangup(get_uuid($(this)))">Hangup</a>
			<a href="#" onClick="do_three_way(get_uuid($(this)))">3-way</a>
			<a href="#" onClick="do_join(get_uuid($(this)))">Join</a>
			<a href="#" onClick="ui_transfer(get_uuid($(this)))">Transfer</a>
		</div>
		</script>
		<script id="account_template" type="text/html">
		<div class="account" id="account_{{= id}}">
			<p>User: {{= user}}</p>
			<a href="#" onClick="logout(get_user($(this)))">Logout</a>
			<a href="#" onClick="newcall(get_user($(this)));">+ New Call</a>
		</div>
		</script>
	</head>
	<body>

		<!-- Dialogs -->
		<div id="incoming_call" title="Incoming call">
			Account: <span id="incoming_account"></span><br/>
			<h3><span id="incoming_name"></span></h3>
			<h3><span id="incoming_number"></span></h3>
		</div>
		
		<div id="callout" title="Call out">
			 <input type="text" id="number" value="sip:888@conference.freeswitch.org" size="58" />
		</div>
		
		<div id="message">
			<span id="message_text"></span>
		</div>
		
		<div id="transfer" title="Transfer call">
			<input type="text" id="transfer_number" value="sip:888@conference.freeswitch.org" size="58" />
		</div>
		
		<div id="security" title="Permissions required">
			You must accept to use your microphone on this site in order to be able to make phone calls
			<div id="fake_flash" width="300" height="170"></div>
		</div>
		
		<div id="auth" title="Login">
			Username: <input type="text" name="username" value="" id="username" />
			Password: <input type="password" name="password" value="" id="password" />
		</div>
		
		<!-- End Dialogs -->
		
		<div id="header">
			<span id="status">Waiting for flash...</span> 
			<span id="sessionid"></span>
			<span id="no_mic">
				<img src="warning-icon.png" width="21" height="20" />
				<a href="#" onClick="showSecurity();">Microphone not allowed</a>
			</span>

			<select id="input_source" onChange="$('#flash')[0].setMic($(this).val())" >
			</select>

		</div>
		
		<div id="flash">
			<h1>Alternative content</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
		
		<div id="call_container">
			<div id="call_add" class="button">
				<a href="#" onClick="attach('');">Hold</a>
			</div>
		</div>

		<div>
			<a href="#" onClick="showSecurity();">Privacy</a>
			<a href="#" onClick="$('#log').html('')" >Clear log</a>
			<a href="#" onClick="$('#controls').dialog('open');">Show Keypad</a>
			<a href="#" onClick="$('#auth').dialog('open');">Login</a>
		</div>

		<div id="controls" class="button">	
			<table cols=3 border=0>
				<tr>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('1', 2000)">1</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('2', 2000)">2</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('3', 2000)">3</a></td>
				</tr>                      
				<tr>                       
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('4', 2000)">4</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('5', 2000)">5</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('6', 2000)">6</a></td>
				</tr>                      
				<tr>                       
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('7', 2000)">7</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('8', 2000)">8</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('9', 2000)">9</a></td>
				</tr>                      
				<tr>                       
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('*', 2000)">*</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('0', 2000)">0</a></td>
					<td class="dtmfrow"><a href="#" onClick="sendDTMF('#', 2000)">#</a></td>
				</tr>
			</table>
			
			<div id="#input_device">
			</div>
		</div>
		
		<div id="account_container">
			<div class="guest_account" id="guest_account">
				<p>Guest account</p>
				<a href="#" onClick="newcall('');">+ New Call</a>
			</div>
		</div>

		<div id="log">
		</div>
		
	</body>
</html>