/**
 * Draw the document when it's loaded
 */
document.observe("dom:loaded",
	function () {
		DrawWord('palo verde','paloverde');
		
		function HighlightRandomPixel() {
			var thePixels = $$("#paloverde .on");
			var rand = Math.floor(Math.random()*(thePixels.length+1));
			
			var thePixel = thePixels[rand];
			if (!thePixel) return;
			
			if (thePixel.hasClassName("highlighted")) {
				thePixel.removeClassName("highlighted");
			} else {
				thePixel.addClassName('highlighted');
			}
		}
		
		function HighlightRandomLetter() {
			$$(".letter.highlighted").each(function (el){el.removeClassName('highlighted');});
		
			var topLevelDivs = $$('#paloverde div.letter');
			
			var rand = Math.floor(Math.random()*(topLevelDivs.length+1));
			var aLetter = topLevelDivs[rand];
			if (!aLetter) return;
			
			aLetter.addClassName('highlighted');
		};
		
		function HighlightNextLetter() {
			var letters = $$("#paloverde div.letter");
			var current = false;
			letters.each( function (el) {
				if (el.hasClassName("highlighted")) {
					el.removeClassName("highlighted");
					current = el;
				}
			});
			if (Object.isUndefined(current.previous(".letter"))) {
				letters.last().addClassName("highlighted");
			} else {
				current.previous(".letter").addClassName("highlighted");
			}
		}
		
		$$("#paloverde div.letter").first().addClassName("highlighted");
		
		var periodicCallback = HighlightNextLetter;
		periodicCallback();	
		new PeriodicalExecuter(periodicCallback, 1);
	}
);