function displaySettings(settings) {
	var innerHtml = "";
	if (settings.clientId != null) {
		innerHtml += "<input type=\"hidden\" id=\"clientIdStr\" name=\"clientIdStr\" value=\"" + settings.clientId + "\"/>";
		innerHtml += "<div class=\"bm_header\">";
		innerHtml += "<div class=\"bm_float-left\">";
		innerHtml += "Call Us: " + settings.phone;
		innerHtml += "</div>";  // End float-right div
		innerHtml += "<div class=\"bm_float-right\">";
		innerHtml += "<a href=\"http://www.broadmouth.com/\"><img src=\"" + webServerUrl + "/images/logo-powered_by_broadmouth.gif\" width=\"125\" height=\"12\" border=\"0\" /></a>";
		innerHtml += "</div><br /><br />";	// End float-right div

		if (settings.options.length > 0) {
			innerHtml += "<div class=\"bm_float-left\">Filter By "; 
		    innerHtml += "<select id=\"option\" name=\"option\" onChange=\"getMessages()\">";
            innerHtml += "<option selected value=\"Select...\">Select...</option>";
            for (var i = 0; i < settings.options.length; i++) {
                innerHtml += "<option value=\"" + settings.options[i] + "\">" + settings.options[i] + "</option>";
            }
            innerHtml += "</select>";
            innerHtml += "</div>";	// End float-left div
        }
        else
            innerHtml += "<input type=\"hidden\" id=\"option\" name=\"option\" value=\"\">";
        
        innerHtml += "<div class=\"bm_float-right\">Sort By ";
		innerHtml += "<select id=\"sort\" name=\"sort\" onChange=\"sortMessages()\">";
        innerHtml += "<option selected value=\"Select...\">Select...</option>";
        innerHtml += "<option value=\"Date\">Date</option>";
        innerHtml += "<option value=\"Duration\">Duration</option>";
        innerHtml += "<option value=\"Forwards\">Forwards</option>";
        innerHtml += "<option value=\"Listens\">Listens</option>";
        innerHtml += "</select>";
        innerHtml += "</div>";	// End float-right div
        innerHtml += "</div>";	// End header div
	}
    $("settingsDiv").innerHTML = innerHtml;
}
		
function getMessages() {
	var clientIdStr = $("clientIdStr").value;
	var selectedOption = $("option").value;
	if (selectedOption == "Select...") {
        alert("Please select a 'Filter By'");
        return;
	}
	var script = document.createElement("script");
	document.body.appendChild(script);
	script.src = appServerUrl + "/getMessages" + "?clientIdStr=" + clientIdStr + "&option=" + selectedOption;
}

var displayedMessages;

function displayMessages(messages) {
	displayedMessages = messages;
	var innerHtml = "";
	if (messages.length != 0) {
		for (var i = 0; i < messages.length; i++) {
			innerHtml += "<div class=\"bm_main-content\">";
			innerHtml += "<div class=\"bm_message\">";
			var option = messages[i].option;
			if (option != null)
				innerHtml += option;
			innerHtml += "<div class=\"bm_message-info\">";
			
			innerHtml += "<div class=\"bm_float-left\">";
			if (messages[i].playerType == "flash")
				innerHtml += "<span id=\"player" + messages[i].messageId + "\"><a href=\"http://www.macromedia.com/go/getflashplayer\">Get Flash Player</a></span>";
			else {
				innerHtml += "<img src=\"" + webServerUrl + "/images/button-play.gif\" alt=\"Play\" border=\"0\" ";
				innerHtml += "onClick=\"window.open('" + messages[i].voicemailUrl + "','listenpage','width=250,height=200,top=100,left=100');\"/>";
			}
			innerHtml += " <img src=\"" + webServerUrl + "/images/button-fwd.gif\" alt=\"Forward this message\" border=\"0\" ";
			innerHtml += "onClick=\"window.open('" + messages[i].forwardUrl + "','forwardpage','width=375,height=400,top=100,left=100');\"/>";
            innerHtml += "</div>";	// End float-left div
					
			innerHtml += "<div class=\"bm_float-right\">";
			innerHtml += "Listens: " + messages[i].numHits + ", Forwards: "+ messages[i].numForwards;
			innerHtml += "<br />";
			innerHtml += "Duration: " + messages[i].duration + " sec";
	        innerHtml += "</div>";	// End float-right div
	        
			innerHtml += "<div class=\"bm_message-desc\">";
			innerHtml += messages[i].notes;
            innerHtml += "</div>";	// End float-left div

	        innerHtml += "</div>";	// End message-info div
	        innerHtml += "</div>";	// End message div
			
			innerHtml += "<div class=\"bm_sm-text\">";
			innerHtml += "<ul>";
			innerHtml += "<li>Recorded on: " + formatDate(messages[i].callDt);
			innerHtml += "</ul>";
			innerHtml += "</div>";	// End sm-text div
			innerHtml += "</div>";	// End main-content div
		}
	}		
	$("messagesDiv").innerHTML = innerHtml;
	
	if (messages.length != 0) {
		for (var i = 0; i < messages.length; i++) {
			if (messages[i].playerType == "flash") {
				var swfObject = new SWFObject(webServerUrl + "/mp3player.swf", "line", "200", "20", "7");
				swfObject.addVariable("file", messages[i].voicemailUrl);
				swfObject.addVariable("width", 200);
				swfObject.addVariable("height", 20);
				swfObject.addVariable("showdigits", "false");
				swfObject.addVariable("showdownload", "true");
				swfObject.addVariable("link", messages[i].voicemailUrl);
				swfObject.addVariable("id", messages[i].clientId + ":" + messages[i].messageId);
				swfObject.addVariable("callback", appServerUrl + "/incrementNumListens");
				swfObject.write("player" + messages[i].messageId);
			}
		}
	}
}

function forwardMessage() {
	var script = document.createElement("script");
	document.body.appendChild(script);
	script.src = appServerUrl + "/getMessages" + "?clientIdStr=" + clientIdStr.value + "&option=" + option.value;
}

function sortMessages() {
	var selectedSort = $("sort").value;
	if (selectedSort == "Select...") {
        alert("Please select a 'Sort By'");
        return; 
	}
	
	if (selectedSort == "Date")
		displayMessages(displayedMessages.sort(compareDate));
	else if (selectedSort == "Duration")
		displayMessages(displayedMessages.sort(compareDuration));
	else if (selectedSort == "Forwards")
		displayMessages(displayedMessages.sort(compareForwards));
	else if (selectedSort == "Listens")
		displayMessages(displayedMessages.sort(compareListens));
	else {
        alert("Please select a 'Sort By'");
        return; 
	}		
}

function formatDate(millis) {
	var dateTime = new Date(millis - 0);
	var year = dateTime.getFullYear() + "";
	year = year.slice(2);
	var month = (dateTime.getMonth() + 1) + "";
	if (month.length == 1)
		month = "0" + month;
	var date = dateTime.getDate() + "";
	if (date.length == 1)
		date = "0" + date;
	var hours = dateTime.getHours() + "";
	if (hours.length == 1)
		hours = "0" + hours;
	var minutes = dateTime.getMinutes() + "";
	if (minutes.length == 1)
		minutes = "0" + minutes;
	return month + "-" + date + "-" + year + " " + hours + ":" + minutes;
}

function compareDate(m1, m2) {
	return m2.callDt - m1.callDt;
}

function compareDuration(m1, m2) {
	return m2.duration - m1.duration;
}

function compareForwards(m1, m2) {
	return m2.numForwards - m1.numForwards;
}

function compareListens(m1, m2) {
	return m2.numHits - m1.numHits;
}

function $(elementId) {
	return document.getElementById(elementId);
}