function home_onLoad()
{
	home_onResize();

	if (window.attachEvent)
		window.attachEvent('onresize', home_onResize);
	else
		window.addEventListener('resize', home_onResize, false);
}

function work_onLoad()
{
	work_onResize();

	if (window.attachEvent)
		window.attachEvent('onresize', work_onResize);
	else
		window.addEventListener('resize', work_onResize, false);

	var handler = new PortfolioHandler();
	handler.init();
}

function home_onResize() { window_onResize(document.getElementById('home')); }
function work_onResize() { window_onResize(document.getElementById('content')); }

function window_onResize(elem)
{
	var topper = document.documentElement;
	var clientWidth = (window.innerWidth) ? window.innerWidth : topper.clientWidth;
	var clientHeight = (window.innerHeight) ? window.innerHeight : topper.clientHeight;

	elem.style.marginLeft = ((clientWidth - elem.clientWidth) / 2) + 'px';
	elem.style.marginTop = ((clientHeight - elem.clientHeight) / 2) + 'px';
}

function Link(id, caption, extra)
{
	this.id = id;
	this.caption = caption;
	this.extra = extra;
}

function CssLink(id, css, title)
{
	this.id = id;
	this.css = css;
	this.title = title;
}

function Project(id, caption, count)
{
	this.id = id;
	this.caption = caption;
	this.count = count;
}

function PortfolioHandler() {}

PortfolioHandler.prototype.CSS_ALL_PROJECTS = 'allProjects';
PortfolioHandler.prototype.CSS_SELECTED = 'selected';
PortfolioHandler.prototype.CAPTION_LOADER_MESSAGE = 'Loading ...';

PortfolioHandler.ANNUAL_REPORTS = [new Project('diversity03', 'Annual report for a corporate diversity program', 4),
	new Project('foundation04', 'Annual report for a corporate foundation', 6),
	new Project('atrion', 'Annual report for a medical device manufacturer', 5),
	new Project('foundation06', 'Annual report for a corporate foundation', 5),
	new Project('diversity06', 'Annual report for a corporate diversity program', 4),
	new Project('foundation02', 'Annual report for a corporate foundation', 3),
	new Project('diversity05', 'Annual report for a corporate diversity program', 4),
	new Project('foundation05', 'Annual report for a corporate foundation', 5)];
PortfolioHandler.COLLATERAL = [new Project('balance', 'Brochure for widows, divorcees and caregivers featuring the paintings of Paul Jenkins', 4),
	new Project('thriving_biz', 'Brochure for small business owners', 3),
	new Project('trust', 'Brochure for affluent families', 5),
	new Project('young_investor', 'Workbook and dry-erase poster for a young investor program', 5),
	new Project('zen', 'Folder and brochure for a Zen approach to investing', 5),
	new Project('be_ready', 'Capabilities brochure for a financial advisory firm', 5),
	new Project('numbers', 'Promotional piece for a document services department', 2),
	new Project('kchoice', 'Folder, brochure, financial advisor guide and postcards for a retirement plan sponsor program', 7),
	new Project('women', 'Brochure to launch a membership program that addresses women\'s financial needs', 4),
	new Project('parent', 'Parents guide for a young investor program', 4)];
PortfolioHandler.IDENTITY = [new Project('bodywise', 'Logo and identity for a wellness coach and yoga teacher', 3),
	new Project('greenlit', 'Logo and identity for a copywriting firm specializing in financial literature', 2),
	new Project('hobokenbootcamps', 'Logo for a fitness bootcamp', 1),
	new Project('rj', 'Logo for a website that helps runners track their fitness goals and progress', 1),
	new Project('mirimcdonald', 'Logo and identity for an organization behavior and change management consultant', 1),
	new Project('aquila', 'Logo for a real estate trust', 1),
	new Project('kchoice', 'Logo for a retirement plan sponsor program', 1),
	new Project('barnraisers', 'Logo and identity for a marketing firm that builds online and offline brand communities', 3),
	new Project('honestlywell', 'Logo for a tea company\'s employee wellness program', 1)];
PortfolioHandler.GREETINGS = [new Project('stern', 'Beach wedding', 4),
	new Project('mcdonald', 'Jazz brunch wedding', 4),
	new Project('demarco', 'Preppy wedding', 3),
	new Project('newyear', 'New Year\'s e-card', 1)];

PortfolioHandler.prototype.TOP_NAV = [new Link('doWork', 'Work'), new Link('doAbout', 'About'), new Link('doContact', 'Contact')];
PortfolioHandler.prototype.WORK_NAV = [new Link('annualReports', 'Annual Reports', PortfolioHandler.ANNUAL_REPORTS),
	new Link('collateral', 'Collateral', PortfolioHandler.COLLATERAL),
	new Link('identity', 'Identity', PortfolioHandler.IDENTITY),
	new Link('greetings', 'Greetings', PortfolioHandler.GREETINGS)];
PortfolioHandler.prototype.ABOUT_NAV = [new Link('doBackground', 'Background'), new Link('doClients', 'Clients'), new Link('doAwards', 'Awards'),
	new Link('doTestimonials', 'Testimonials')];
PortfolioHandler.prototype.PAGER = [new CssLink('doPrevious', 'previous', 'Previous Project'),
	new CssLink('doListAll', 'listAll', 'List All Projects'), new CssLink('doNext', 'next', 'Next Project')];
PortfolioHandler.prototype.MORE = new Link('doMoreImages', 'More Images');

PortfolioHandler.prototype.CLIENTS = ['Atrion Corporation', 'BarnRaisers Group', 'Bodywise Wellness', 'Brecker & Merryman', 'Brierley Associates', 'Chief Executive Group', 'Citigroup', 'Citigroup Foundation', 
	'Citi Mortgage', 'Control Group', 'East Coast Spine, Joint & Sports Medicine', 'Exit 151', 'Greenlit Communications', 'Hoboken Bootcamps', 'Langton Cherubino', 'Legg Mason', 
	'Linger & Larkin', 'Marymount Manhattan College', 'McPherson College', 'MicroStrategy', 'New York City Public Advocate', 'Ogilvy Public Relations',  
	'Primerica Financial Services', 'Running-Journal.com', 'Seedco', 'Seedco Financial', 'Smith Barney', 'Viva Productions', 'The Whelan Group', 'You Lucky Dog' ];

PortfolioHandler.prototype.init = function()
{
	var value = {};
	value.topNav = document.getElementById('topNav');
	value.bottomNav = document.getElementById('bottomNav');
	value.pager = document.getElementById('pager');
	value.more = document.getElementById('more');
	value.pictureBox = document.getElementById('pictureBox');
	value.thumbnails = document.getElementById('thumbnails');
	value.pictureTitle = document.getElementById('pictureTitle');
	value.message = document.getElementById('message');
	value.currentWork = this.WORK_NAV[0];

	this.generate(value, this);
	this.doBottomNav(value);
}

PortfolioHandler.prototype.generate = function(value, callback)
{
	var elem, a;

	value.topNav.appendChild(elem = this.genLinks(value, callback, this.TOP_NAV, this.handleTopNav));
	value.topNavSelected = elem.mySelected;
	value.bottomNav.appendChild(elem = this.genLinks(value, callback, this.WORK_NAV, this.handleWorkNav));
	value.bottomNavSelected = elem.mySelected;
	value.pager.appendChild(this.genLinks(value, callback, this.PAGER, this.handlePager));

	a = this.genAnchor(value, this, this.MORE, this.handleMoreImages);
	a.appendChild(document.createTextNode(' '));
	a.appendChild(elem = document.createElement('span'));
	elem.appendChild(document.createTextNode('+'));

	value.more.appendChild(a);
}

PortfolioHandler.prototype.genLinks = function(value, callback, links, onClick)
{
	var a, li, output = document.createElement('ul');

	for (var i = 0; i < links.length; i++)
	{
		var link = links[i];
		output.appendChild(li = document.createElement('li'));
		li.appendChild(a = this.genAnchor(value, callback, link, onClick, i));

		if (0 == i)
			output.mySelected = a;
	}

	return output;
}

PortfolioHandler.prototype.genAnchor = function(value, callback, link, onClick, i)
{
	var a = document.createElement('a');
	a.href = 'javascript:void(null)';
	a.myValue = value;
	a.myCallback = callback;
	a.myRecord = link;
	a.onclick = onClick;

	if (undefined != link.caption)
		a.appendChild(document.createTextNode(link.caption));
	if (undefined != link.title)
		a.title = link.title;
	if (undefined != link.css)
		a.className = link.css;
	else if (0 == i)
		a.className = this.CSS_SELECTED;

	return a;
}

PortfolioHandler.prototype.handleTopNav = function(ev)
{
	var me = this.myCallback;
	var value = this.myValue;

	value.topNavSelected.className = '';
	this.className = me.CSS_SELECTED;
	value.topNavSelected = this;
	value.currentWork = me.WORK_NAV[0];

	me[this.myRecord.id](value);

	return false;
}

PortfolioHandler.prototype.handleWorkNav = function(ev)
{
	var me = this.myCallback;
	var value = this.myValue;
	var record = this.myRecord;

	value.bottomNavSelected.className = '';
	this.className = me.CSS_SELECTED;
	value.bottomNavSelected = this;
	value.currentWork = record;

	me.doBottomNav(value);

	return false;
}

PortfolioHandler.prototype.handleAboutNav = function(ev)
{
	var me = this.myCallback;
	var value = this.myValue;
	var record = this.myRecord;

	value.bottomNavSelected.className = '';
	this.className = me.CSS_SELECTED;
	value.bottomNavSelected = this;

	me[record.id](value);
}

PortfolioHandler.prototype.handlePager = function(ev)
{
	this.myCallback[this.myRecord.id](this.myValue);

	return false;
}

PortfolioHandler.prototype.handleMoreImages = function(ev)
{
	var me = this.myCallback;
	var value = this.myValue;

	if (undefined == value.currentWork)
		return false;

	var project = value.currentProject;

	if (0 == project.count)
		return false;

	var newIndex = value.currentImageIndex + 1;

	// Start over when past the last one.
	if (newIndex > project.count)
		newIndex = 1;

	me.setCurrentImage(value, project, newIndex);

	return false;
}

PortfolioHandler.prototype.popBottomNav = function(value, list, onClick)
{
	var elem;

	value.bottomNav.innerHTML = '';
	value.bottomNav.appendChild(elem = this.genLinks(value, this, list, onClick));
	value.bottomNavSelected = elem.mySelected;
}

PortfolioHandler.prototype.doWork = function(value)
{
	this.popBottomNav(value, this.WORK_NAV, this.handleWorkNav);

	this.doBottomNav(value);
}

PortfolioHandler.prototype.doAbout = function(value)
{
	value.pictureBox.innerHTML = this.getText('bioText');
	this.hideImageStuff(value, true);
	this.decorateAnchors(value.pictureBox, value);

	this.popBottomNav(value, this.ABOUT_NAV, this.handleAboutNav);
}

PortfolioHandler.prototype.doBackground = function(value)
{
	value.pictureBox.innerHTML = this.getText('bioText');
	this.hideImageStuff(value, true);
	this.decorateAnchors(value.pictureBox, value);
}

PortfolioHandler.prototype.doAwards = function(value)
{
	value.pictureBox.innerHTML = this.getText('awardsText');
	this.hideImageStuff(value, true);
	this.decorateAnchors(value.pictureBox, value);
}

PortfolioHandler.prototype.doClients = function(value)
{
	var row, rows = 0, table, cell, elem, output = document.createElement('div');
	output.className = 'about clients';
	output.appendChild(elem = document.createElement('h2'));
	elem.innerHTML = 'Client List';
	output.appendChild(table = document.createElement('table'));

	var next, half = Math.ceil(this.CLIENTS.length / 2);

	for (var i = 0; i < half; i++)
	{
		row = table.insertRow(rows++);
		row.insertCell(0).appendChild(document.createTextNode(this.CLIENTS[i]));

		cell = row.insertCell(1);
		next = i + half;
		if (next < this.CLIENTS.length)
			cell.appendChild(document.createTextNode(this.CLIENTS[next]));
	}

	// Complete the row if necessary.
	if (1 == row.cells.length)
		row.cells[0].colSpan = 2;

	value.pictureBox.innerHTML = '';
	value.pictureBox.appendChild(output);
	this.hideImageStuff(value, true);
}

PortfolioHandler.prototype.doTestimonials = function(value)
{
	value.pictureBox.innerHTML = this.getText('testimonialsText');
	this.hideImageStuff(value, true);
}

PortfolioHandler.prototype.doWorkingTogether = function(value)
{
	window.location.href = 'mailto:candice@candicestern.com?subject=Contact Me';
}

PortfolioHandler.prototype.doContact = function(value)
{
	value.pictureBox.innerHTML = this.getText('contactText');
	this.hideImageStuff(value);
}

PortfolioHandler.prototype.decorateAnchors = function(elem, value)
{
	var items = elem.getElementsByTagName('a');
	for (var i = 0; i < items.length; i++)
	{
		items[i].myValue = value;
		items[i].myCallback = this;
		items[i].onclick = function(ev) { this.myCallback[this.className](this.myValue); return false; };
	}
}

PortfolioHandler.prototype.hideImageStuff = function(value, showBottomNav)
{
	value.pager.style.visibility = 'hidden';
	value.bottomNav.style.visibility = showBottomNav ? 'visible' : 'hidden';
	value.thumbnails.style.visibility = 'hidden';
	value.pictureTitle.style.visibility = 'hidden';
	value.more.style.visibility = 'hidden';
}

PortfolioHandler.prototype.showImageStuff = function(value)
{
	value.pager.style.visibility = 'visible';
	value.bottomNav.style.visibility = 'visible';
	value.thumbnails.style.visibility = 'visible';
	value.pictureTitle.style.visibility = 'visible';
	value.more.style.visibility = 'visible';
}

PortfolioHandler.prototype.doBottomNav = function(value)
{
	this.setCurrentProject(value, 0);
}

PortfolioHandler.prototype.setCurrentProject = function(value, index)
{
	var currentWork = value.currentWork;
	value.currentProjectIndex = index;
	var project = value.currentProject = currentWork.extra[index];

	value.pictureTitle.innerHTML = project.caption;
	this.showImageStuff(value);

	if (0 == project.count)
		return;

	this.setCurrentImage(value, project, 1);

	value.thumbnails.innerHTML = '';
	for (var i = 1; i <= project.count; i++)
	{
		var img = document.createElement('img');
		img.src = 'images/thumb/' + value.currentWork.id + '/' + project.id + '/' + project.id + '_' + i + '.jpg';
		img.myValue = value;
		img.myProject = project;
		img.myCallback = this;
		img.myIndex = i;
		img.onmouseover = function(ev) { this.myCallback.setCurrentImage(this.myValue, this.myProject, this.myIndex); }; 
		value.thumbnails.appendChild(img);
	}
}

PortfolioHandler.prototype.setCurrentImage = function(value, project, index)
{
	value.currentImageIndex = index;
	this.startLoaderMessage(value);

	var me = this;
	var img = document.createElement('img');

	// Add to parent before setting the SRC because the onload is called
	// then and the parent is needed to center.
	value.pictureBox.innerHTML = '';
	value.pictureBox.appendChild(img);

	// Needed because "vertica-align: middle" doesn't work on DIVs.
	img.onload = function(ev)
	{
		me.stopLoaderMessage(value);
		var parent = this.parentNode;

		this.style.top = ((parent.offsetHeight - this.offsetHeight) / 2) + 'px';
		this.style.left = ((parent.offsetWidth - this.offsetWidth) / 2) + 'px';
	};
	img.src = 'images/work/' + value.currentWork.id + '/' + project.id + '/' + project.id + '_' + value.currentImageIndex + '.jpg';
}

PortfolioHandler.prototype.doPrevious = function(value) { this.changeProject(value, -1); return false; }

PortfolioHandler.prototype.doListAll = function(value)
{
	// Just in case.
	this.stopLoaderMessage(value);

	var a, li, elem, output = document.createElement('div');
	output.className = this.CSS_ALL_PROJECTS;
	for (var i = 0; i < this.WORK_NAV.length; i++)
	{
		var category = this.WORK_NAV[i];
		output.appendChild(elem = document.createElement('h2'));
		elem.innerHTML = category.caption;

		output.appendChild(elem = document.createElement('ul'));
		for (var j = 0; j < category.extra.length; j++)
		{
			var project = category.extra[j];
			elem.appendChild(li = document.createElement('li'));
			li.appendChild(a = document.createElement('a'));
			a.href = 'javascript:void(null);';
			a.myValue = value;
			a.myCallback = this;
			a.myCategory = category;
			a.myIndex = j;
			a.innerHTML = project.caption;
			a.onclick = function(ev)
				{
					var val = this.myValue;
					val.currentWork = this.myCategory;
					this.myCallback.setCurrentProject(val, this.myIndex);
				};
		}
	}

	value.pictureBox.innerHTML = '';
	value.pictureBox.appendChild(output);
	this.hideImageStuff(value);

	return false;
}

PortfolioHandler.prototype.doNext = function(value) { this.changeProject(value, 1); return false; }

PortfolioHandler.prototype.changeProject = function(value, dir)
{
	if (undefined == value.currentWork)
		return;

	var newIndex = value.currentProjectIndex + dir;
	if (0 > newIndex)
		newIndex = value.currentWork.extra.length - 1;
	else if (newIndex >= value.currentWork.extra.length)
		newIndex = 0;

	this.setCurrentProject(value, newIndex);
}

PortfolioHandler.prototype.startLoaderMessage = function(value)
{
	// Stop an existing message.
	this.stopLoaderMessage(value);

	value.loaderCount = 0;
	value.message.innerHTML = this.CAPTION_LOADER_MESSAGE;
	value.message.style.display = 'block';
	value.loaderIntervalId = window.setInterval(
		function()
		{
			value.loaderCount++;

			// DO NOT call stopLoaderMessage. Want to leave up the message,
			// but not expand it further.
			if (30 <= value.loaderCount)
				return;

			value.message.appendChild(document.createTextNode('.'));
		}, 2000);
}

PortfolioHandler.prototype.stopLoaderMessage = function(value)
{
	if (undefined != value.loaderIntervalId)
	{
		window.clearInterval(value.loaderIntervalId);
		value.loaderIntervalId = undefined;
		value.message.style.display = 'none';
	}
}

PortfolioHandler.prototype.getText = function(id)
{
	var e = document.getElementById(id);
	if (e)
		return e.innerHTML;

	return '';
}