/* fancy stuff */

var favicons = new Array(																			// instantiating the images in JS prevents them from holding up the
	'favicons/barbariangroup.gif',															// page load and making everything visible before it's supposed to be
	'favicons/meerkatmedia.gif',
	'favicons/flickr.gif',
	'favicons/facebook.gif',
	'favicons/twitter.gif',
	'favicons/youtube.gif',
	'favicons/vimeo.gif',
	'favicons/ffffound.gif',
	'favicons/delicious.gif',
	'favicons/lastfm.gif',
	'favicons/digg.gif',
	'favicons/netflix.gif',
	'favicons/geocaching.gif',
	'favicons/livejournal.gif',
	'favicons/goodreads.gif',
	'favicons/upcoming.gif'
);

function addMouseOverEvents(links) {													// add onmouseover and onmouseout events to each of the icon links
	links.each(function(l, index) { 														// get each of the children of the links list, which are list items
		var iconlink = Element.down(l);														// then get the link within that list item
		var iconimage = new Image();															// make a new image object
		iconimage.src = favicons[index];													// give it the proper image URL
		iconimage.alt = iconlink.title;														// and the proper title
		iconlink.update(iconimage);																// insert it into the link
		Element.setOpacity(iconlink, 0.3);												// make it semi-transparent
		iconlink.onmouseover = function() { 											// set onmouseover function
			if(iconlink.title != null) {														// if there's such a thing as a title,
				$('link-desc').update(iconlink.title); 					      // make it into a text element and put it in the link description
			}
			new Effect.Opacity(iconlink, { from: 0.3, to: 1.0, duration: 0.2});		  // then make it opaque
		};
		iconlink.onmouseout = function() {												// set onmouseout function
			new Effect.Opacity(iconlink, { from: 1.0, to: 0.3, duration: 0.2});		  // make it semi-transparent again,
			$('link-desc').update('');												    	// and clear the link description field
		}
	});
}

function init() {
	Element.hide('title');                                      // first, hide everything
	Element.hide('name');
	Element.hide('description');
	
	var links = Element.childElements($('links'));							// create an array of the link icons
	links.each(function(ll) {
		Element.hide(ll);																					// and hide each of them individually
	});
	
	$('links').setStyle({ width: (links.length*20)+'px' });
	addMouseOverEvents(links);																	// then add the mouseover events to them

	Effect.Appear('title', { duration: 3.0 });                  // then fade in the main stuff
	Effect.Appear('name', { duration: 8.0 });
	Effect.Appear('description', { duration: 10.0 });

	var step = 0;
	var delay = 15;																						  // wait until after the title has loaded
	new PeriodicalExecuter(function(pe) {												// then fade in the icons one at a time
		var currenticon = step - delay;														// make the step match the index of the array
		if(currenticon >= links.length) {													// and if it's higher than the length of the array,
			pe.stop();																							// get out;
		} else if(step >= delay) {																// otherwise,
			Effect.Appear(links[currenticon], { duration: 2.0 });		// fade that puppy in
		}
		step++;																										// step up to the next iteration
	}, 0.2);																										// do this every fifth of a second until it's time to get out
}

function trace(message) {																			// comes in handy when testing new features
	if(debug) {
		$('debug').innerHTML = message + "<br/>" + $('debug').innerHTML;
	}
}

Event.observe(window, 'load', init);								    			// new hotness