var List = {};
var currentBucket = '';

document.observe("dom:loaded", function()
{
	if ($('buckets')) {
		$('buckets').setStyle({
			'height': '180px'
		})
	}
});

Event.observe(window, "load", function()
{
	document.observe('mousemove', function(event)
	{
		if ($('buckets') && event.element().descendantOf($('buckets'))) {

			var elem = event.element();
			while (elem.up() != $('buckets')) {
				elem = elem.up();
			}

			currentBucket = elem.identify();

			var bucketList = elem.down('.bucket');
			var bucketListTitle = elem.down('h2');

			List[elem.identify()].height = (100 / bucketList.scrollHeight * 1);

			if (List[elem.identify()].open == 'close' && List[elem.identify()].fading == 'gone') {
				List[elem.identify()].open = 'opening'
				openBucket(bucketList, bucketListTitle, elem);
			}
		} else {
			currentBucket = '';
		}
		$('buckets').childElements().each(function(elem)
		{
			if (List[elem.identify()].open == 'open' && !event.element().descendantOf(elem) && event.element() != elem && List[elem.identify()].fading == 'visible') {
				List[elem.identify()].open = 'closing';
				var bucketList = elem.down('.bucket');
				var bucketListTitle = elem.down('h2');
				closeBucket(bucketList, bucketListTitle, elem);
			}
		});

	});

	$('buckets').childElements().each(function(elem){

		var bucketList = elem.down('.bucket');

		if (!List[elem.identify()]) {
			List[elem.identify()] = {};
		}

		List[elem.identify()].height = (100 / bucketList.scrollHeight * 1);
		List[elem.identify()].open = 'closing';
		new Effect.Morph(bucketList, {
			'style': 'opacity: 0',
			'duration': '1.5',
			'afterFinish': function() {List[elem.identify()].fading = 'gone';}.bind(List, elem)
		});

		new Effect.Scale(bucketList, List[elem.identify()].height, {
			'scaleContent': false,
			'scaleX': false,
			'scaleMode': {
				'originalHeight': bucketList.scrollHeight,
				'originalWidth': bucketList.scrollWidth
			},
			'scaleFrom': 100,
			'duration': 0.8,
			'delay': 0.5,
			'transition': Effect.Transitions.sinoidal,
			'afterFinish': function() {List[elem.identify()].open = 'close';}.bind(List, elem)
		});
	})
});

function openBucket(bucketList, bucketListTitle, elem) {
	new Effect.Scale(bucketList, 100, {
		'scaleContent': false,
		'scaleX': false,
		'scaleMode': {
			'originalHeight': bucketList.scrollHeight,
			'originalWidth': bucketList.scrollWidth
		},
		'scaleFrom': List[elem.identify()].height,
		'duration': 0.3,
		'transition': Effect.Transitions.sinoidal,
		'afterFinish': function() {
			List[elem.identify()].open = 'open';
		}.bind(List, elem)
	});
	new Effect.Morph(bucketList, {
		'style': 'opacity: 1',
		'duration': '0.6',
		'afterFinish': function() {
			if (currentBucket != elem.identify()) {
				closeBucket(bucketList, bucketListTitle, elem);
			} else {
				List[elem.identify()].fading = 'visible';
			}
		}.bind(List, elem)
	});
	new Effect.Morph(bucketListTitle, {
		style: 'color: #6eb32a',
		duration: '0.3'
	});
}

function closeBucket(bucketList, bucketListTitle, elem) {
	new Effect.Morph(bucketListTitle, {
		style: 'color: #000',
		duration: '0.3'
	});
	new Effect.Morph(bucketList, {
		'style': 'opacity: 0',
		'duration': '0.4',
		'afterFinish': function() {
			List[elem.identify()].fading = 'gone';
		}.bind(List, elem)
	});
	new Effect.Scale(bucketList, List[elem.identify()].height, {
		'scaleContent': false,
		'scaleX': false,
		'scaleMode': {
			'originalHeight': bucketList.scrollHeight,
			'originalWidth': bucketList.scrollWidth
		},
		'scaleFrom': 100,
		'duration': 0.5,
		'delay': 0,
		'transition': Effect.Transitions.sinoidal,
		'afterFinish': function() {
			if (currentBucket == elem.identify()) {
				openBucket(bucketList, bucketListTitle, elem);
			} else {
				List[elem.identify()].open = 'close';
			}
		}.bind(List, elem)
	});
}