mheadd/chloe.html

## chloe.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8901/chloe.js"></script>
<script type="text/javascript">

// Function to return a formatted time.
function getTime() {
	var theDate = new Date();
	var hours = theDate.getHours() > 12 ? theDate.getHours()  -12 : theDate.getHours();
	var ap = hours > 12 ? "PM" : "AM";
	var minutes = theDate.getMinutes().toString().length == 1 ? "0" + theDate.getMinutes() : theDate.getMinutes();
	var seconds = theDate.getSeconds().toString().length == 1 ? "0" + theDate.getSeconds() : theDate.getSeconds();

	return hours + ":" + minutes + ":" + seconds + " " + ap;
}

$(document).ready(function() {

var chloe = new Chloe({host: '127.0.0.1', port: 8901});

chloe.connect(function () {
  console.log('Connceted to Chloe server...');
});

chloe.onmessage(function (message) {
  console.log(message);
  var call = JSON.parse(message);
  if(call.event == "join") {
	$("#calls").append("<li id=\"" + call.id + "\">" + call.callerID +" : " + getTime() + "</li>");
  }
  else {
	$("#" + call.id).remove();
  }
});

});
</script>
<style type="text/css">
img {
 display: block;
 margin-left: auto;
 margin-right: auto
}
body {
 padding: 10px;
 margin-left: 20px;
 margin-right: 20px;
}
.center  {
 text-align: center;
}

ul {
    width: 15%;
    margin: auto;
}
</style>
</head>
<body>
<img src="tropo.jpeg" height="100" width="130" alt="Tropo logo" title="Tropo Cloud Communications Platform"/>
<h2 class="center">Tropo + Chloe Conference Dashboard</h2>
<script>
document.write('<p class="center">Conference start time: ' + getTime());
</script>
<p class="center">Currently on this conference call:</p>
<ul id="calls"></ul>
</body>
</html>

## chloe.php
<?php

// The URL where Chloe is running.
define("CHLOE_ENDPOINT", "");

// Conference identifier.
define("CONFERENCE_ID", 9999999999);

// Function to send data to Chloe server.
function sendEvent($event, $id, $callerID) {

	$data = array("event" => $event, "id" => $id, "callerID" => $callerID);
	$postData = "data=" . json_encode($data);

	$ch = $ch = curl_init(CHLOE_ENDPOINT);
	curl_setopt($ch, CURLOPT_POST, true);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/x-www-form-urlencoded'));
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

	$result = curl_exec($ch);
	$error = curl_error($ch);
	$curl_http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

	if($result === false) {
		_log("An error occurred: ".$error);
		return false;
	}
	else {
	   if ($curl_http_code != '200') {
	   	_log("*** An error occurred: Invalid HTTP response returned: " . $curl_http_code);
	   	return false;
	   }
	  return true;
	}

}

// Call properties.
$callerID = $currentCall->callerID;
$id = $currentCall->id;

// Send a join event to Chloe.
if(sendEvent("join", $id, $callerID)) {
	say("Welcome to the conference. Press the pound key to exit.");
}
else {
	say("Sorry, there was a problem joining you to the conference.");
	hangup();
}

// Place caller in conference.
conference(CONFERENCE_ID, array("terminator" => "#"));

// Send exit event to Chloe.
sendEvent("exit", $id, $callerID);

// Exit prompt for caller.
say("Thank you for joining the conference, goodbye.");


?>
	<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://127.0.0.1:8901/chloe.js"></script>
	<script type="text/javascript">

	// Function to return a formatted time.
	function getTime() {
	var theDate = new Date();
	var hours = theDate.getHours() > 12 ? theDate.getHours() -12 : theDate.getHours();
	var ap = hours > 12 ? "PM" : "AM";
	var minutes = theDate.getMinutes().toString().length == 1 ? "0" + theDate.getMinutes() : theDate.getMinutes();
	var seconds = theDate.getSeconds().toString().length == 1 ? "0" + theDate.getSeconds() : theDate.getSeconds();

	return hours + ":" + minutes + ":" + seconds + " " + ap;
	}

	$(document).ready(function() {

	var chloe = new Chloe({host: '127.0.0.1', port: 8901});

	chloe.connect(function () {
	console.log('Connceted to Chloe server...');
	});

	chloe.onmessage(function (message) {
	console.log(message);
	var call = JSON.parse(message);
	if(call.event == "join") {
	$("#calls").append("<li id=\"" + call.id + "\">" + call.callerID +" : " + getTime() + "</li>");
	}
	else {
	$("#" + call.id).remove();
	}
	});

	});
	</script>
	<style type="text/css">
	img {
	display: block;
	margin-left: auto;
	margin-right: auto
	}
	body {
	padding: 10px;
	margin-left: 20px;
	margin-right: 20px;
	}
	.center {
	text-align: center;
	}

	ul {
	width: 15%;
	margin: auto;
	}
	</style>
	</head>
	<body>
	<img src="tropo.jpeg" height="100" width="130" alt="Tropo logo" title="Tropo Cloud Communications Platform"/>
	<h2 class="center">Tropo + Chloe Conference Dashboard</h2>
	<script>
	document.write('<p class="center">Conference start time: ' + getTime());
	</script>
	<p class="center">Currently on this conference call:</p>
	<ul id="calls"></ul>
	</body>
	</html>
	<?php

	// The URL where Chloe is running.
	define("CHLOE_ENDPOINT", "");

	// Conference identifier.
	define("CONFERENCE_ID", 9999999999);

	// Function to send data to Chloe server.
	function sendEvent($event, $id, $callerID) {

	$data = array("event" => $event, "id" => $id, "callerID" => $callerID);
	$postData = "data=" . json_encode($data);

	$ch = $ch = curl_init(CHLOE_ENDPOINT);
	curl_setopt($ch, CURLOPT_POST, true);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/x-www-form-urlencoded'));
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

	$result = curl_exec($ch);
	$error = curl_error($ch);
	$curl_http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

	if($result === false) {
	_log("An error occurred: ".$error);
	return false;
	}
	else {
	if ($curl_http_code != '200') {
	_log("*** An error occurred: Invalid HTTP response returned: " . $curl_http_code);
	return false;
	}
	return true;
	}

	}

	// Call properties.
	$callerID = $currentCall->callerID;
	$id = $currentCall->id;

	// Send a join event to Chloe.
	if(sendEvent("join", $id, $callerID)) {
	say("Welcome to the conference. Press the pound key to exit.");
	}
	else {
	say("Sorry, there was a problem joining you to the conference.");
	hangup();
	}

	// Place caller in conference.
	conference(CONFERENCE_ID, array("terminator" => "#"));

	// Send exit event to Chloe.
	sendEvent("exit", $id, $callerID);

	// Exit prompt for caller.
	say("Thank you for joining the conference, goodbye.");


	?>