window.addEvent('domready', function(){
	if ($('sections')) {
		var animate = true;
		var height = 0;
		var selected_element = null;
		var selected_i = null;
		var elements = document.getElements('#sections .element');
		elements.each(function(element, i) {
			if (element.hasClass('selected')) {
				selected_element = element;
				selected_i = i;
			}
			element.setStyles({
				position: 'absolute',
				left: (i*214),
				width: 214,
				margin: 0,
				overflow: 'hidden'
			}).addEvent('mouseenter', function(e){
				if (animate) {
					elements.each(function(_element, _i) {
						if (element == _element) {
							if (_i > i) {
								_element.morph({
									'width': 320,
									'left': (_i*161)
								});
							} else {
								_element.morph({
									'width': 320,
									'left': (_i*161)
								});
							}
							_element.addClass('selected').getElements('p').tween('opacity', 1);
						} else {
							if (_i > i) {
								_element.morph({
									'width': 161,
									'left': (_i*161)+160
								});
							} else {
								_element.morph({
									'width': 161,
									'left': (_i*161)
								});
							}
							_element.removeClass('selected').getElements('p').tween('opacity', 0);
						}
					});
				}
			});
			element.getElement('h2').setStyle('width', 140);
			element.getElements('p').setStyle('opacity', 0).set('tween', {
				duration: 1000,
				transition: 'sine:out'
			});
			if (element.getSize().y > height) {
				height = element.getSize().y;
			}
			element.getElement('a').addEvent('click', function(){
				animate = false;
			});
		});
		$('sections').addEvent('mouseleave', function(){
			if (animate) {
				if (selected_element == null) {
					elements.each(function(element, i) {
						element.removeClass('selected').morph({
							left: (i*214),
							width: 214
						});
						element.getElements('p').tween('opacity', 0);
					});
				} else {
					elements.each(function(element, i) {
						if (element == selected_element) {
							if (i > selected_i) {
								element.morph({
									'width': 320,
									'left': (i*161)
								});
							} else {
								element.morph({
									'width': 320,
									'left': (i*161)
								});
							}
							element.addClass('selected').getElements('p').tween('opacity', 1);
						} else {
							if (i > selected_i) {
								element.morph({
									'width': 161,
									'left': (i*161)+160
								});
							} else {
								element.morph({
									'width': 161,
									'left': (i*161)
								});
							}
							element.removeClass('selected').getElements('p').tween('opacity', 0);
						}
					});
				}
			}
		});
		elements.setStyles({
			height: height
		}).set('morph', {
			duration: 1000,
			transition: 'sine:out'
		});
		document.getElement('#sections .container').setStyle('height', height);
		if (selected_element != null) {
			elements.each(function(element, i) {
				if (element == selected_element) {
					if (i > selected_i) {
						element.setStyles({
							'width': 320,
							'left': (i*161)
						});
					} else {
						element.setStyles({
							'width': 320,
							'left': (i*161)
						});
					}
					element.addClass('selected').getElements('p').setStyle('opacity', 1);
				} else {
					if (i > selected_i) {
						element.setStyles({
							'width': 161,
							'left': (i*161)+160
						});
					} else {
						element.setStyles({
							'width': 161,
							'left': (i*161)
						});
					}
					element.removeClass('selected').getElements('p').setStyle('opacity', 0);
				}
			});
		}
	}
});