function gadget(name, releasedate, image)
{
	this.name = name;
	this.releasedate = releasedate;
	// filename only, populateGadgets() prepends "../images/gadgets/"
	this.image = image;
}
function GadgetSet(gadgetarr, parentnode, nodeprefix, rowcount)
{
	// Array of gadget objects
	this.gadgets = gadgetarr;
	// ID of parent DOM node to populate (MUST match php)
	this.parentnodeID = parentnode;
	// ID prefix for gadget nodes (MUST be unique)
	this.nodeIDprefix = nodeprefix;
	// Number of gadgets per row
	if (rowcount)
		this.gadgetsperrow = rowcount;
	else
		this.gadgetsperrow = 5;
}
GadgetSet.prototype = {
	onPageLoad : function()
	{
		this.buildPage();
		this.sortGadgetsByName();
		document.sortform.reset();
	},
	buildPage : function()
	{
		var gadgets = this.gadgets;
		var prefix = this.nodeIDprefix;
		var rowmaxcount = this.gadgetsperrow;

		var rows = Math.floor(gadgets.length / rowmaxcount);
		var leftover = gadgets.length % rowmaxcount;
		var gadgetsgrid = document.getElementById(this.parentnodeID);

		var rowdiv = document.createElement("div");
		rowdiv.setAttribute("class", "gadgets-grid");
		var rowcounter = 0;
		var gadgetcount = 0;
		while (gadgetcount < gadgets.length)
		{
			if (rowcounter >= rowmaxcount)
			{
				// Append the row ...
				gadgetsgrid.appendChild(rowdiv);
				rowcounter = 0;

				// ... and start a new one
				rowdiv = document.createElement("div");
				rowdiv.setAttribute("class", "gadgets-grid");
			}

			// Create gadget container
			var coldiv = document.createElement("div");
			coldiv.setAttribute("id", prefix + "-" + gadgetcount);
			coldiv.setAttribute("class", "gadget-box");

			// Gadget image container
			var imgcontainer = document.createElement("div");
			imgcontainer.setAttribute("class", "gadget-img-box");
			var imgnode = document.createElement("img");
			imgnode.setAttribute("id", prefix + "-" + gadgetcount + "-img-node");
			imgcontainer.appendChild(imgnode);
			coldiv.appendChild(imgcontainer);

			// Gadget name container
			var txtnode = document.createElement("div");
			txtnode.setAttribute("id", prefix + "-" + gadgetcount + "-txt-box");
			txtnode.setAttribute("class", "gadget-txt-box");
			coldiv.appendChild(txtnode);

			// Append to row
			rowdiv.appendChild(coldiv);

			gadgetcount++;
			rowcounter++;
		}

		if (rowcounter > 0)
			gadgetsgrid.appendChild(rowdiv);
	},
	changeSort : function()
	{
		var sortindex = document.sortform.sortoptions.selectedIndex;
		var sortby = document.sortform.sortoptions.options[sortindex].value;
		
		switch(sortby)
		{
			case "byname":
				this.sortGadgetsByName();
				break;
			case "bydate":
				this.sortGadgetsByDate();
				break;
			default:
				// do nothing
				break;
		}
	},
	sortGadgetsByDate : function()
	{
		this.gadgets.sort(sortByDate);
		this.populateGadgets();
	},
	sortGadgetsByName : function()
	{
		this.gadgets.sort(sortByName);
		this.populateGadgets();
	},
	populateGadgets : function()
	{
		var gadgets = this.gadgets;
		var prefix = this.nodeIDprefix;

		var gadgetcount = 0;
		while (gadgetcount < gadgets.length)
		{
			var gadgetname = gadgets[gadgetcount].name;
			var gadgetdate = gadgets[gadgetcount].releasedate;
			var gadgetimage = gadgets[gadgetcount].image;

			// Set gadget image
			var imgnode = document.getElementById(prefix + "-"
							      + gadgetcount
							      + "-img-node");
			imgnode.setAttribute("src", "../images/gadgets/"
						    + gadgetimage);

			// Set gadget name
			var gadgetnamenode = document.getElementById(prefix
								     + "-"
								     + gadgetcount
								     + "-txt-box");
			gadgetnamenode.innerHTML = gadgetname;

			gadgetcount++;
		}
	},
}
function sortByName(a, b)
{
	var x = a.name.toLowerCase();
	var y = b.name.toLowerCase();
	return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function sortByDate(a, b)
{
	var x = a.releasedate;
	var y = b.releasedate;
	return ((x < y) ? 1 : ((x > y) ? -1 : 0));
}