var Whiteboards = {
	whiteboardsSel: '#whiteboard-parents, #whiteboard-professionals',
	innerInnerSel: '.inner-inner',
	ctaLinkSel: '.cta',
	innerExpandedHeight: '185',
	innerContractedHeight: '180',
		
	init: function() {
		Global.addJsClass(this.whiteboardsSel);
		this.addHoverListeners();
	},
		
	addHoverListeners: function() {
		$$(this.whiteboardsSel).each(function(elm) {
			elm.observe('mouseover', Whiteboards.handleMouseOver);
			elm.observe('mouseout', Whiteboards.handleMouseOut);
			elm.observe('click', Whiteboards.handleClick);
		});
	},
	
	handleClick: function(e) {
		e.stop();
		var board = e.findElement(Whiteboards.whiteboardsSel);
		var href = board.down(Whiteboards.ctaLinkSel);
		window.location = href;
	},
		
	handleMouseOver: function(e) {
		e.stop();
		var board = e.findElement(Whiteboards.whiteboardsSel);
		var innerInner = board.down(Whiteboards.innerInnerSel);
		Whiteboards.expand(innerInner);
	},
		
	handleMouseOut: function(e) {
		e.stop();
		var board = e.findElement(Whiteboards.whiteboardsSel);
		var innerInner = board.down(Whiteboards.innerInnerSel);
		Whiteboards.contract(innerInner);			
	},
	
	expand: function(innerInner) {
		if (innerInner.getAttribute('animating') == 1 || innerInner.getHeight() == this.innerExpandedHeight) {
			return;
		}
		innerInner.style.height = this.innerExpandedHeight + 'px';
		new Effect.Morph(innerInner, {
			style: 'height:500px',
			afterFinish: function() {
			}
		});
	},
		
	contract: function(innerInner) {
		if (innerInner.getAttribute('animating') == 1 || innerInner.getHeight() == this.innerContractedHeight) {
			return;
		}
		innerInner.style.height = this.innerContractedHeight + 'px';
		new Effect.Morph(innerInner, {
			style: 'height:180px',
			afterFinish: function() {
			}
		});		
	}
};

var Home = {
	init: function() {
		Whiteboards.init();
	}
};

document.observe('dom:loaded', Home.init);