/*
 * Home
 * Services
 * Portfolio
 * Contacts Us
 */

var allSectionIds = new Array('home', 'services', 'portfolio', 'contacts');
var sectionIds = new Array('services', 'portfolio', 'contacts');

/*
 * Add visual effects for displaying links at the bottom (image rollovers)
 * Add handlers for more visual effects later on when user clicks on a link 
 */
window.onload = function()
{
	
	sectionIds.each(function(sectionId) 
	{
		Rollover.attachRollover(sectionId, "/images/main/" + sectionId + "_oj.jpg");
	});

	Effect.Appear('aaa', { duration: 1.0 });
	Effect.Appear('bbb', { duration: 1.5 });
	Effect.Appear('ccc', { duration: 2.0 });
	Effect.Appear('ddd', { duration: 2.5 });

	sectionIds.each(function(sectionId) {
		var imgObj = $(sectionId);
		var aObj = imgObj.parentNode;
		
		var clickHandler = function(evt) {
			hideOthers(aObj, imgObj);
			EventObject.stopEvent(evt);
		};		

		EventObject.attachEvent(aObj, 'click', clickHandler);
	})	
};

/* 
 * Do a delayed window.href to allow for the special effect to happen on the
 * other images before allowing the browser to jump to the clicked link's URL 
 */
function hideOthers(clickedLink, clickedImage)
{
	var imgId = clickedImage.getAttribute('id');
	var others = allSectionIds.without(imgId);
	others.each(function(sectionId) {
		Effect.Fade(sectionId, { duration: 1.0 });
	});
	window.setTimeout(function(){window.location=clickedLink.href;}, 900);
	return false;
}