/**
 * Copyright (c) 2008, Joeri Bekker
 * STUDIO ACHT Scripts
 */
Event.observe(window, 'load', 
	init
);

function init() {
	var icons = $$('img.project');
	var wait = 0;

	// Hook icon mouse-overs and animate their initial appearance.
	icons.each(function(icon) {
		//Effect.Appear(icon, {duration: 2.0});
		// Shows each icon with an interval of 'wait' ms. This statement is 
		// executed outside the function scope and can not use its variables.
		setTimeout(('Effect.Appear( $(\''+icon.identify()+'\'), {duration: 0.5});'), wait);
		icon.addClassName('all');

		// Cache the hover icon.
		new Image().src = (icon.src).replace('_active.', '_hover.');

		// Hook events.
		icon.observe('mouseover', function(event) {
			icon.src = (icon.src).replace('_active.', '_hover.');
		});
		icon.observe('mouseout', function(event) {
			icon.src = (icon.src).replace('_hover.', '_active.');
		});

		// The interval between icon appearances..
		wait += 250;
	});

	// Hook categories to icons.
	categories = $$('div#categories a').each(function(category) {
		category.observe('click', function(event) {
			$$('img.project').each(function(icon) {
				if( icon.hasClassName( (category.id).substring(4) ) ) {
					icon.setStyle({ opacity: 1.0 });
				}
				else {
					icon.setStyle({ opacity: 0.33 });
				}
			});
			category.addClassName('active');

			tmpCategories = $$('div#categories a').each(function(tmpCategory) {
				if( tmpCategory != category )
					tmpCategory.removeClassName('active');
			});
		});
		category.observe('mouseover', function(event) {
			category.addClassName('hover');
		});
		category.observe('mouseout', function(event) {
			category.removeClassName('hover');
		});
	});
}