// preload some images
var imgs = {};
imgs.clientLogin = [];
imgs.clientLogin[0] = new Image();
imgs.clientLogin[0].src = "img/clientlogin_0." + ext;
imgs.clientLogin[1] = new Image();
imgs.clientLogin[1].src = "img/clientlogin_1." + ext;
imgs.clientLogout = [];
imgs.clientLogout[0] = new Image();
imgs.clientLogout[0].src = "img/clientlogout_0." + ext;
imgs.clientLogout[1] = new Image();
imgs.clientLogout[1].src = "img/clientlogout_1." + ext;
imgs.contact = [];
imgs.contact[0] = new Image();
imgs.contact[0].src = "img/contact_0." + ext;
imgs.contact[1] = new Image();
imgs.contact[1].src = "img/contact_1." + ext;
imgs.password = new Image();
imgs.password.src = "img/password." + ext;
imgs.clientArea = new Image();
imgs.clientArea.src = "img/clientarea." + ext;
imgs.available = new Image();
imgs.available.src = "img/available." + ext;
imgs.listPrev = [];
imgs.listPrev[0] = new Image();
imgs.listPrev[0].src = "img/listprev_0." + ext;
imgs.listPrev[1] = new Image();
imgs.listPrev[1].src = "img/listprev_1." + ext;
imgs.listNext = [];
imgs.listNext[0] = new Image();
imgs.listNext[0].src = "img/listnext_0." + ext;
imgs.listNext[1] = new Image();
imgs.listNext[1].src = "img/listnext_1." + ext;

// flags & data for various app states
var clientLoginShown = false;
var contactInfoShown = false;
var clientKey = '';
var pagePrev = -1;
var pageNext = -1;
var videoIds = [];
var videoId = 0;

// add handlers to the various buttons
function initBtns () {
	$("clientBtn").onmouseover = function () {
		if (clientLoginShown) return;
		this.src = clientKey.length ? imgs.clientLogout[1].src : imgs.clientLogin[1].src;
	}
	$("clientBtn").onmouseout = function () {
		if (clientLoginShown) return;
		this.src = clientKey.length ? imgs.clientLogout[0].src : imgs.clientLogin[0].src;
	}
	$("clientBtn").onclick = function () {
		if (clientKey.length) {
			clientLogout();
		} else {
			clientLoginShown = !clientLoginShown;
			$("clientlogin").style.display = clientLoginShown ? "block" : "none";
			var cli = $("clientlogininput");
			if (clientLoginShown) {
				this.src = imgs.password.src;
				cli.value = "";
				cli.focus();
				Event.observe(cli, "keypress", clientLoginSubmit, false);
				if (contactInfoShown) {
					contactInfoShown = false;
					$("contactBtn").src = imgs.contact[0].src;
					$("contactinfo").style.display = "none";
				}
			} else {
				cli.blur();
				Event.stopObserving(cli, "keypress", clientLoginSubmit, false);
				this.src = imgs.clientLogin[1].src;
			}
		}
	}

	$("contactBtn").onmouseover = function () { if (contactInfoShown) return; this.src = imgs.contact[1].src; }
	$("contactBtn").onmouseout = function () { if (contactInfoShown) return; this.src = imgs.contact[0].src; }
	$("contactBtn").onclick = function () {
		contactInfoShown = !contactInfoShown;
		$("contactinfo").style.display = contactInfoShown ? "block" : "none";
	}

	$("listprev").onmouseover = function () { this.src = imgs.listPrev[1].src; }
	$("listprev").onmouseout = function () { this.src = imgs.listPrev[0].src; }
	$("listprev").onclick = function () { getListEntries(pagePrev); }

	$("listnext").onmouseover = function () { this.src = imgs.listNext[1].src; }
	$("listnext").onmouseout = function () { this.src = imgs.listNext[0].src; }
	$("listnext").onclick = function () { getListEntries(pageNext); }
}

function onListEntryHover (el, state) {
	var vid = Number(el.id.substr(1));
	if (vid == videoId) return;
	try {
		if (state)	el.addClassName("listentryhover");
		else		el.removeClassName("listentryhover");
	}
	catch (e) {}
}

function onListEntryClick (el, id) {
	videoId = id;
	for (var i=0; i<videoIds.length; i++) {
		var entry = $("v" + videoIds[i]);
		var entryNp = $("np" + videoIds[i]);
		if (videoIds[i] == videoId) {
			entry.addClassName("listentryhover");
			entryNp.style.display = "block";
		} else {
			entry.removeClassName("listentryhover");
			entryNp.style.display = "none";
		}
	}
	playVideo(id);
}

function clientLoginSubmit (evt) {
	if (evt.keyCode == Event.KEY_RETURN) {
		var pwd = $F("clientlogininput");
		function loaded (ajax) {
			var json = getJSON(ajax);
			if (!json.ck.length) {
				alert("Sorry, no accounts matching that password. Please try again.");
				$("clientlogininput").focus();
			} else {
				clientLoginShown = false;
				clientKey = json.ck;
				Event.stopObserving($("clientlogininput"), "keypress", clientLoginSubmit, false);
				$("clientlogininput").blur();
				$("clientlogin").style.display = "none";
				$("clientBtn").src = imgs.clientLogout[0].src;
				$("available").src = imgs.clientArea.src;
				getListEntries();
			}
		}
		var url = "ajax.login.php";
		var params = ["pwd=" + pwd];
		var ajax = new Ajax.Request(url,
									{ method: "get",
									  parameters: params.join("&"),
									  onComplete: loaded
									}
									);
	}
}

function clientLogout () {
	clientKey = '';
	getListEntries();
	$("available").src = imgs.available.src;
	$("clientBtn").src = imgs.clientLogin[1].src;
}

function getListEntries (page) {
	if (page == undefined) page = 0;
	function loaded (ajax) {
		var json = getJSON(ajax);
		// get some of the paging data
		var pc = json.data.page_curr;
		var pp = json.data.page_prev;
		var pn = json.data.page_next;
		var pm = json.data.page_max;
		pagePrev = pp;
		pageNext = pn;
		// reference the paging controls
		var lp = $("listprev");
		var ln = $("listnext");
		var ld = $("listdiv");
		// determine if the controls should be shown
		lp.style.display = (pp != -1) ? "block" : "none";
		ln.style.display = (pn != -1) ? "block" : "none";
		ld.style.display = (pp != -1 && pn != -1) ? "block" : "none";
		// display the video entries
		videoIds = [];
		var videos = [];
		for (var i=0; i<json.data.videos.length; i++) {
			var v = json.data.videos[i];
			videoIds.push(v.id);
			var html = "<div class=\"listentry\" id=\"v" + v.id + "\" onmouseover=\"onListEntryHover(this,1);\" onmouseout=\"onListEntryHover(this,0);\" onclick=\"onListEntryClick(this," + v.id + ");\">\n";
				html += "<div>\n";
				html += "<img src=\"reel/resized/" + v.i + "\" width=\"90\" width=\"66\">\n";
				html += "<span>" + v.t + "</span><br>\n";
				html += "Director: " + v.d + "<br>\n";
				html += "Photography: " + v.p + "<br>\n";
				html += "Editor: " + v.e + "<br>\n";
				html += "<span style=\"display:none;\" id=\"np" + v.id + "\">&laquo; now playing</span>\n";
				html += "</div>\n";
				html += "</div>\n";
			videos.push(html);
		}
		$("listentries").update(videos.join("\n\n"));
		for (var i=0; i<videoIds.length; i++) {
			var entry = $("v" + videoIds[i]);
			var entryNp = $("np" + videoIds[i]);
			if (videoIds[i] == videoId) {
				entry.addClassName("listentryhover");
				entryNp.style.display = "block";
			} else {
				entry.removeClassName("listentryhover");
				entryNp.style.display = "none";
			}
		}
	}
	var url = "ajax.list.php";
	var params = ["pg=" + page,
				  "ck=" + clientKey];
	var ajax = new Ajax.Request(url,
								{ method: "get",
								  parameters: params.join("&"),
								  onComplete: loaded
								}
								);
}

function playVideo (id) {
	videoId = id;
	function loaded (ajax) {
		var json = getJSON(ajax);
		insertQTs(json);
	}
	var url = "ajax.video.php";
	var params = ["id=" + id,
				  "ck=" + clientKey];
	var ajax = new Ajax.Request(url,
								{ method: "get",
								  parameters: params.join("&"),
								  onComplete: loaded
								}
								);
}

function insertQTs (json) {
	if (!json.qt) return;
	for (var i=0; i<json.qt.length; i++) {
		var qt = json.qt[i];
		var q = new QTObject(qt.src, qt.qtId, Number(qt.w), Number(qt.h) + 16);
		if (qt.href) {
			q.addParam("href", qt.href);
		}
		if (qt.vars) {
			for (var j=0; j<qt.vars.length; j++) {
				q.addParam(qt.vars[j][0], qt.vars[j][1]);
			}
		}
		$(qt.targetId).update(q.getHTML());
	}
}

function getJSON (ajax) {
	// converts the JSON content of the AJAX object's 'responseText'
	// property to a Javascript object.
	var json = eval('(' + ajax.responseText + ')');
	return json;
}

function getPluginRef (id) {
	return ie ? window[id] : document[id];
}