var ajaxType = 'JSON';
var th = 60;
var sy = 2006;
var imgArray;

function getYears(catagory)
{
	$("#ajaxerr").empty();
	$("#big-picture").html();
	$("#big-picture").css('display', 'none');
	$("#photos").empty();
	$("#photos").css('display', 'none');
	$("#YEAR").empty();
	if (catagory != "")
	{
		var params = "response=" + encodeURI(ajaxType) + "&a=1";
		params += "&CLASS=" + catagory;
		params += "&filter=" + $("#filter").val();
		sendHTTPrequest('/photos_ajax.isam', params, 'showYears', 'POST', ajaxType);
	}
};

function showYears()
{
	$("#ajaxerr").empty();
	$("#big-picture").html();
	$("#big-picture").css('display', 'none');
	$("#photos").empty();
	$("#photos").css('display', 'none');
	$("#YEAR").append('<option value=""></option>');
	if (ajaxType == 'JSON')
	{
		var jsonObj = JSON.parse(http.responseText);
		if (jsonObj.error)
		{
			var errorHtml = '';
			errorHtml = "<div style=\"display: block; min-width: 60%; max-width: 100%; margin: 1em auto 1em auto;\">";
			errorHtml += "<div class=\"ui-widget\">";
			errorHtml += "<div class=\"ui-state-error ui-corner-all\" style=\"padding: 0 .7em; text-align: left;\">";
			errorHtml += "<p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin-right: .3em;\"></span> ";
			errorHtml += jsonObj.error;
			errorHtml += "</p>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			$("#ajaxerr").append(errorHtml);
		}
		else
		{
			if (jsonObj.year.length > 0)
			{
				$.each(jsonObj.year, function(i, jval)
				{
					$("#YEAR").append('<option value="' + jval + '">' + jval + '</option>');
				});
				if ((sy != null) && (sy != 0))
				{
					$("#YEAR").val(sy);
					if (($("#YEAR").val() != null) && ($("#YEAR").val() != ""))
					{
						getImages($("#CLASS").val(), $("#YEAR").val());
					}
				}
			}
			else
			{
				$("#YEAR").empty();
			}
		}
	}
	else if (ajaxType == 'XML')
	{
		var xmlDoc = http.responseXML.documentElement;
		if (xmlDoc.getElementsByTagName("error")[0])
		{
			var errorHtml = '';
			errorHtml = "<div style=\"display: block; min-width: 60%; max-width: 100%; margin: 1em auto 1em auto;\">";
			errorHtml += "<div class=\"ui-widget\">";
			errorHtml += "<div class=\"ui-state-error ui-corner-all\" style=\"padding: 0 .7em; text-align: left;\">";
			errorHtml += "<p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin-right: .3em;\"></span> ";
			errorHtml += xmlDoc.getElementsByTagName("error")[0].childNodes[0].textContent.trim();
			errorHtml += "</p>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			$("#ajaxerr").append(errorHtml);
		}
		else
		{
			if (xmlDoc.childNodes.length > 0)
			{
				for (i = 0; i < xmlDoc.childNodes.length; i++)
				{
					$("#YEAR").append('<option value="' + xmlDoc.childNodes[i].childNodes[0].nodeValue + '">' + xmlDoc.childNodes[i].childNodes[0].nodeValue + '</option>');
				}
				delete i;
				if ((sy != null) && (sy != 0))
				{
					$("#YEAR").val(sy);
					if (($("#YEAR").val() != null) && ($("#YEAR").val() != ""))
					{
						getImages($("#CLASS").val(), $("#YEAR").val());
					}
				}
			}
			else
			{
				$("#YEAR").empty();
			}
		}
		delete xmlDoc;
	}
};

function getImages(catagory, year)
{
	$("#ajaxerr").empty();
	$("#big-picture").html();
	$("#big-picture").css('display', 'none');
	$("#photos").empty();
	$("#photos").css('display', 'none');
	if ((catagory != "") && (year != ""))
	{
		var params = "response=" + encodeURI(ajaxType) + "&a=2";
		params += "&CLASS=" + catagory;
		params += "&YEAR=" + year;
		params += "&th=" + th;
		params += "&filter=" + $("#filter").val();
		sendHTTPrequest('/photos_ajax.isam', params, 'showImages', 'POST', ajaxType);
	}
};

function showImages()
{
	$("#ajaxerr").empty();
	$("#big-picture").html();
	$("#big-picture").css('display', 'none');
	$("#photos").empty();
	$("#photos").css('display', 'none');
	if (window.innerWidth < 500)
	{
		var rowMax = (window.innerWidth - 50);
	}
	else
	{
		var rowMax = 800;
	}
	var curWidth = 0;
	if (ajaxType == 'JSON')
	{
		var jsonObj = JSON.parse(http.responseText);
		if (jsonObj.error)
		{
			var errorHtml = '';
			errorHtml = "<div style=\"display: block; min-width: 60%; max-width: 100%; margin: 1em auto 1em auto;\">";
			errorHtml += "<div class=\"ui-widget\">";
			errorHtml += "<div class=\"ui-state-error ui-corner-all\" style=\"padding: 0 .7em; text-align: left;\">";
			errorHtml += "<p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin-right: .3em;\"></span> ";
			errorHtml += jsonObj.error;
			errorHtml += "</p>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			$("#ajaxerr").append(errorHtml);
		}
		else
		{
			if (jsonObj.image.length > 0)
			{
				imgArray = new Array();
				$.each(jsonObj.image, function(i, jval)
				{
					imgArray[i] = new Array(jval.src, jval.owidth, jval.oheight, jval.caption);
					curWidth = curWidth + parseInt(jval.twidth) + 14;
					if (curWidth >= rowMax)
					{
						$("#photos").append("<br />");
						curWidth = parseInt(jval.twidth) + 14;
					}
					var pstr = "" + i;
					var pad = "0000";
					imgid = "" + pad.substring(0, pad.length - pstr.length) + pstr;
					$("#photos").append(outputRow(imgid, jval.src, jval.twidth, th, jval.caption, 1));
					$("#" + imgid).bind('mouseover mouseout', function(event)
					{
						showBigPicture($(this), event);
					});
				});
				$("#photos").css({'display': '', 'text-align': 'center', 'width': (rowMax + 14) + 'px', 'margin-left': 'auto', 'margin-right': 'auto'});
			}
		}
	}
	else if (ajaxType == 'XML')
	{
		var xmlDoc = http.responseXML.documentElement;
		if (xmlDoc.getElementsByTagName("error")[0])
		{
			var errorHtml = '';
			errorHtml = "<div style=\"display: block; min-width: 60%; max-width: 100%; margin: 1em auto 1em auto;\">";
			errorHtml += "<div class=\"ui-widget\">";
			errorHtml += "<div class=\"ui-state-error ui-corner-all\" style=\"padding: 0 .7em; text-align: left;\">";
			errorHtml += "<p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin-right: .3em;\"></span> ";
			errorHtml += xmlDoc.getElementsByTagName("error")[0].childNodes[0].textContent.trim();
			errorHtml += "</p>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			errorHtml += "</div>";
			$("#ajaxerr").append(errorHtml);
		}
		else
		{
			if (xmlDoc.childNodes.length > 0)
			{
				imgArray = new Array();
				for (i = 0; i < xmlDoc.childNodes.length; i++)
				{
					imgArray[i] = new Array(xmlDoc.childNodes[i].getAttribute("src"), xmlDoc.childNodes[i].getAttribute("owidth"), xmlDoc.childNodes[i].getAttribute("oheight"), xmlDoc.childNodes[i].getAttribute("caption"));
					curWidth = curWidth + parseInt(xmlDoc.childNodes[i].getAttribute("twidth")) + 14;
					if (curWidth >= rowMax)
					{
						$("#photos").append("<br />");
						curWidth = parseInt(xmlDoc.childNodes[i].getAttribute("twidth")) + 14;
					}
					var pstr = "" + i;
					var pad = "0000";
					imgid = "" + pad.substring(0, pad.length - pstr.length) + pstr;
					$("#photos").append(outputRow(imgid, xmlDoc.childNodes[i].getAttribute("src"), xmlDoc.childNodes[i].getAttribute("twidth"), th, xmlDoc.childNodes[i].getAttribute("caption"), 1));
					$("#" + imgid).bind('mouseover mouseout', function(event)
					{
						showBigPicture($(this), event);
					});
				}
				$("#photos").css({'display': '', 'text-align': 'center', 'width': (rowMax + 14) + 'px', 'margin-left': 'auto', 'margin-right': 'auto'});
			}
		}
		delete xmlDoc;
	}
};

function outputRow(iid, isrc, iwidth, iheight, icaption, thumb)
{
	var returnHtml = '<div class="imgdiv">';
	if (thumb == 1)
	{
		returnHtml += '<a id="' + isrc + '" title="' + icaption + '">';
	}
	returnHtml += '<img src="/photos_ajax.isam?a=3&amp;r=1&amp;w=' + iwidth + '&amp;h=' + iheight + '&amp;src=' + isrc + '" style="z-index: -1;" alt="' + icaption + '" title="' + icaption + '" width="' + iwidth + '" hspace="7" height="' + iheight + '" border="0" />';
	returnHtml += '<img src="/image/transparent_20x20.png" id="' + iid + '" style="position: absolute; right: 0px; bottom: 0px; z-index: 1;" alt="' + icaption + '" title="' + icaption + '" width="' + iwidth + '" hspace="7" height="' + iheight + '" border="0" />';
	if (thumb == 1)
	{
		returnHtml += '</a>';
	}
	returnHtml += '</div>';
	return returnHtml;
};

function showBigPicture(tid, evt)
{
	var bpArray = imgArray[parseInt(tid.attr('id'))];
	var bimgsrc = bpArray[0];
	var bimgow = parseInt(bpArray[1], 10);
	var bimgoh = parseInt(bpArray[2], 10);
	var bimgcaption = bpArray[3];
	delete bpArray;
	var bp = $("#big-picture").dialog(
	{
		width: bimgow + "px",
		height: bimgoh + "px",
		dialogClass: "cover",
		title: bimgcaption,
		open: function (e)
		{
			$("#big-picture").html(outputRow(tid.attr('id'), bimgsrc, bimgow, bimgoh, bimgcaption, 0));
		},
		close: function (e)
		{
			$("#big-picture").html();
			$("#big-picture").dialog('destroy');
		}
	});
	if (evt.type == 'mouseover')
	{
		bp.dialog("open");
		$("#big-picture").css({"border": "1px solid #2E83FF", "box-sizing": "border-box", "width": bimgow + "px", "height": bimgoh + "px", "position": "absolute", "left": "50%", "top": "50%", "margin": "-" + Math.round(bimgoh / 2) + "px 0 0 -" + Math.round(bimgow / 2) + "px", "width": "auto", "height": "auto", "margin": "0", "transform": "translateX(-50%) translateY(-50%)"});
	}
	else if (evt.type == 'mouseout')
	{
		bp.dialog("close");
	}
	delete bimgsrc;
	delete bimgow;
	delete bimgoh;
	delete bimgcaption;
};

$(document).ready( function() {
	getYears($("#CLASS").val());
	$("#CLASS").focus();
	$("#photofrm").bind("submit", function(e) {
		if (($("#CLASS").va() == null) || ($("#CLASS").val() == ""))
		{
			$("#big-picture").html();
			$("#big-picture").css('display', 'none');
			$("#photos").empty();
			$("#photos").css('display', 'none');
			$("#YEAR").empty();
			alert("Please select a catagory.");
			$("#CLASS").focus();
		}
		else if (($("#YEAR").val() == null) || ($("#YEAR").val() == ""))
		{
			$("#big-picture").html();
			$("#big-picture").css('display', 'none');
			$("#photos").empty();
			$("#photos").css('display', 'none');
			alert("Please select a year.");
			$("#YEAR").focus();
		}
		else
		{
			$("#big-picture").html();
			$("#big-picture").css('display', 'none');
			$("#photos").empty();
			$("#photos").css('display', 'none');
			getImages($("#CLASS").val(), $("#YEAR").val());
		}
	});
	$("#CLASS").bind("change", function(e) {
		if ($("#CLASS").val() != "")
		{
			getYears($("#CLASS").val());
		}
	});
	$("#YEAR").bind("change", function(e) {
		if ($("#YEAR").val() != "")
		{
			$("#big-picture").html();
			$("#big-picture").css('display', 'none');
			$("#photos").empty();
			$("#photos").css('display', 'none');
			getImages($("#CLASS").val(), $("#YEAR").val());
		}
	});
});