var Portfolio = Class.create();
Portfolio.prototype =
{
	initialize: function (name)
	{
		this.Name = name;
		this.ItemsPerRow = 8;
		this.Categories = new Array();
		
		this.CurrentCategory = 0;
		this.CurrentItem = 0;
		
		this.CategoryPreload = new Array();
		this.ItemPreload = null;
	},
	
	AddCategory: function (name)
	{
		this.Categories[this.Categories.length] = new Array(name, new Array());
	},
	
	AddItem: function (imageName, description)
	{
		this.Categories[this.Categories.length - 1][1][this.Categories[this.Categories.length - 1][1].length] = new Array(imageName, description);
	},
	
	Output: function ()
	{
		var output = "<ul>\r\n";
		
		for (var i = 0; i < this.Categories.length; i++)
		{
			output += "<li";
			
			if (i == this.CurrentCategory)
			{
				output += " class=\"active\"";
			}
			
			output += "><a href=\"javascript:void(" + this.Name + ".SelectCategory(" + i + "));\">" + this.Categories[i][0] + "</a></li>\r\n";
		}
		
		output += "</ul>\r\n";
		
		$("portfolio-nav").innerHTML = output;
		
		this.OutputItems();
	},
	
	SelectCategory: function (index)
	{
		this.CurrentCategory = index;
		
		var currentIndex = 0;
		
		$$("#portfolio-nav ul li").each(function (obj)
		{
			if (currentIndex == index)
			{
				obj.addClassName("active");
			}
			else
			{
				obj.removeClassName("active");
			}
			
			currentIndex++;
		});
		
		this.OutputItems();
	},
	
	OutputItems: function ()
	{
		var array = this.Categories[this.CurrentCategory][1];
		
		$("portfolio-thumbs").style.height = 95 + (69 * Math.ceil(array.length / this.ItemsPerRow)) + "px";
		
		var output = "<table cellspacing=\"0\">\r\n";
		
		for (var i = 0; i < array.length; i++)
		{
			if (i == 0 || (i + 1) % this.ItemsPerRow + 1 == 0)
			{
				output += "<tr>\r\n";
			}
			
			output += "<td><div onclick=\"javascript:void(" + this.Name + ".SelectItem(" + i + "));\" id=\"" + array[i][0] + "\"></div></td>\r\n";
			
			if (i == array.length - 1 || (i + 1) % this.ItemsPerRow == 0)
			{
				output += "</tr>\r\n";
			}
			
			this.CategoryPreload[i] = new PhotoPreloader(this.Name + ".CategoryPreload[" + i + "]", array[i][0], "/_img/portfolio/" + array[i][0] + "_thumb.jpg");
		}
		
		var colSpan = (array.length > this.ItemsPerRow) ? this.ItemsPerRow : array.length;
		
		output += "<tr>\r\n" +
			"<td colspan=\"" + colSpan + "\" id=\"portfolio-caption\"></td>\r\n" +
			"</tr>\r\n" +
			"</table>\r\n";
		
		$("portfolio-thumbs").innerHTML = output;
		
		this.PreloadItems();
		this.SelectItem(0);
	},
	
	PreloadItems: function ()
	{
		for (var i = 0; i < this.CategoryPreload.length; i++)
		{
			this.CategoryPreload[i].StartPreload();
		}
	},
	
	SelectItem: function (index)
	{
		var array = this.Categories[this.CurrentCategory][1][index];
		var currentIndex = 0;
		
		$$("#portfolio-thumbs table td div").each(function (obj)
		{
			if (index == currentIndex)
			{
				obj.addClassName("active");
			}
			else
			{
				obj.removeClassName("active");
			}
			
			currentIndex++;
		});
		
		$("portfolio-caption").innerHTML = array[1];
			
		this.ItemPreload = new PhotoPreloader(this.Name + ".ItemPreload", "portfolio-image", "/_img/portfolio/" + array[0] + ".jpg");
		this.ItemPreload.StartPreload();
	}
};

var PhotoPreloader = Class.create();
PhotoPreloader.prototype =
{
	initialize: function (name, layer, photo)
	{
		this.Name = name;
		
		this.Photo = photo;
		this.PhotoObject = new Image();
		this.Layer = layer;
		
		this.Loader = new Image();
		this.Loader.src = "/_img/portfolio/loader.gif";
	},
	
	StartPreload: function ()
	{
		var layer = $(this.Layer);
		
		if (layer != null)
		{
			layer.style.backgroundImage = "url(" + this.Loader.src + ")";
			this.PhotoObject.src = this.Photo;
			this.CheckPreload();
		}
		else
		{
			var timeout = setTimeout(this.Name + ".StartPreload()", 10);
		}
	},
	
	CheckPreload: function ()
	{
		if (this.PhotoObject.complete)
		{
			$(this.Layer).style.backgroundImage = "url(" + this.PhotoObject.src + ")";
		}
		else
		{
			var timeout = setTimeout(this.Name + ".CheckPreload()", 10);
		}
	}
};