Home = {
	activeColumn: null,
	activeColumnHideTimers: [],
	activeColumnShowTimers: [],
	columnShrunk: [],
	init: function() {
		var preloadTextBG = new Element('img', { 'src': 'images/home/clean/text-bg-trans.png' });
		var column1 = $('column1');
		var column1CloseButton = $('column1CloseButton');
		this.columnShrunk[column1.id] = true;
		column1CloseButton.observe('click', function(event) {
			Event.stop(event);
			this.shrinkColumn(event, column1, { amount: 31, center: false, delay: 0 });
		}.bindAsEventListener(this));
		
		var detailsButtons = $$('.detailsButton');
		var detailsButtonLinks = $$('.detailsButton a');
		var detailsSections = $$('.detailsSection');
		detailsButtonLinks.each(function (detailLink) {
			detailLink.observe('click', function(event) {
				Event.stop(event);
				var element = Event.element(event);
				var buttonSpan = element.up('.detailsButton');
				var idToHighlight = buttonSpan.id;
				var idToShow = element.href.replace(/^.*#/, '');
				
				if (!Home.columnShrunk[column1.id] && $(idToShow).visible()) {
					Home.shrinkColumn(event, column1, { amount: 31, center: false, delay: 0 });
				} else {
					Home.growColumn(event, column1, { amount: 300, center: false, delay: 0 });
					detailsButtons.each(function (detailsButton) {
						if (detailsButton.id == idToHighlight) {
							detailsButton.addClassNameOnce('highlightDetailsButton');
						} else {
							detailsButton.removeClassName('highlightDetailsButton');
						}
					});
					detailsSections.findAll(function(s) { return (s.id != idToShow && s.visible()); }).invoke('fadeOut');
					detailsSections.findAll(function(s) { return (s.id == idToShow && !s.visible()); }).invoke('fadeIn');
				}
			}.bind(this));
		});
	},
	growColumn: function(event, thing, settings) {
		var doTheGrow = function() {
			this.activeColumnShowTimers[thing.id] = null;
			if (this.activeColumn != thing) {
				thing.addClassNameOnce('activeHover');
				this.columnShrunk[thing.id] = false;
				new Effect.Scale(thing, settings.amount, { scaleFromCenter: settings.center, scaleY: false, scaleContent: false, duration: .5, scaleMode: { originalWidth: 320 }});
			}
			this.activeColumn = thing;		
		}.bind(this);
		doTheGrow();
	},
	shrinkColumn: function(event, thing, settings) {
		var doTheShrink = function () {
			if (!this.columnShrunk[thing.id]) {
				this.columnShrunk[thing.id] = true;
				new Effect.Scale(thing, settings.amount, { scaleFromCenter: settings.center, scaleY: false, scaleContent: false, duration: .2, afterFinish: function() {
					thing.removeClassName('activeHover');
				}});
				if (this.activeColumn == thing) {
					this.activeColumn = null;
				}
			}
		}.bind(this);
		doTheShrink();
	}
}

Event.observe(window, 'load', Home.init.bind(Home));

Element.addMethods({
	addClassNameOnce: function(element, className) {
		if (element.hasClassName(className)) return;
		element.addClassName(className);
	},
	fadeIn: function(element, settings) {
		if (!settings) {
			settings = {};
		}
		if (!settings.duration) {
			settings.duration = .4;
		}
		if (!settings.queue) {
			settings.queue = 'end';
		}
		new Effect.Appear(element, settings);	
	},
	fadeOut: function(element, settings) {
		if (!settings) {
			settings = {};
		}
		if (!settings.duration) {
			settings.duration = .2;
		}
		if (!settings.queue) {
			settings.queue = 'end';
		}
		new Effect.Fade(element, settings);
	}
});