if (!window.projects) projects = {};
TH = {
	// @private
	datePattern : /(\d{4})-(\d{1,2})(?:-(\d{1,2}))?/,

	// @private
	months : ['January', 'February', 'March', 'April', 'May', 'June', 'July',
					'August', 'September', 'October', 'November', 'December'],

	// @private
	ContentFormat : '<span class="title">{title}</span> ' +
							'<a class="permalink" href="#{id}" ' +
							'title="Permalink to this project">&para;</a><br />' +
							'<span class="date">{date}</span><br />' +
							'<img alt="{title}" title="{title}" src="{src}" /><br />',

	// @private
	ProjectFormat : '<a href="{src}" target="_blank">{title} Project Page</a><br />',

	// @private
	$ : {},

	// @private
	init : function() {
		var self = TH;
		var hash = window.location.hash.slice(1);

		// @private
		self.modal = new JSUtils.ui.Modal(document.body, {paddingTop:30,
			OnShow : function(modal) {
				modal.reposition();
		}});

		self.modal.dialog.className += ' content';

		for (var i in projects)
			self.$[i] = $('#' + i).click(self.createFormat(i));

		if (hash != '') {
			try {
				self.formatContentAndShow(hash);
				setTimeout(function() { self.modal.reposition() }, 300);
			} catch (e) {
				// bad anchor
			}
		}
	},

	// @private
	createFormat : function(i) {
		return function() { TH.formatContentAndShow(i); };
	},

	// @private
	formatContent : function(key) {
		var self = TH;
		var content = projects[key];
		var projDate = self.datePattern.exec(content.date);

		var result = self.ContentFormat.format({title:content.title, id:key,
											date:self.months[parseInt(projDate[2])-1] + 
													' ' + projDate[1],
											src:content.folder + '/' + content.image});
	

		if (content.projectpage) {
			result += self.ProjectFormat.format({title:content.title,
										src:content.folder + '/' + content.projectpage});
		}

		if (typeof content.description == "string" || 
				content.description instanceof String) {
			result += '<div class="description">' + content.description + '</div><br />';

		}

		return result;
	},

	// @private
	formatContentAndShow : function(key) {
		var self = TH;
		self.modal.setContent($('<span>Loading Project Information...</span>')[0]).resize().show();

		var proj = projects[key];
		var content = self.formatContent(key);

		new AJAXRequestor(proj.folder + '/' + proj.image,
												'GET', '', {OnSuccess : function() {
			self.modal.setContent($('<div>' + content + '</div>')[0]);
			setTimeout(function() {self.modal.resize();}, 100);
		}});

		return false;
	}
}

$(TH.init);