var highlightcolor = "#f59f1a";
var defaultcolor = "#FFFFFF";
var counter = 0;

function preloadImgs(preloadArray) {
	var i = 0;
	// load images from the preload array
	var loader = new Asset.images(preloadArray, {
		onComplete: function () {
			// once all images are loaded, clear out the div and replace it with the
			// new images with the right ids, and add the right thumbnail location
			$('mainspace').erase('html');
			preloadArray.each(function (im) {
				new Element('img', {
					src: "" + im + "",
					id: "galleryimg" + counter
				}).inject($('mainspace'));
				counter++;
			});
			// create the new array of images and hide everything except the
			// first one, which will always be galleryimg0
			var layers = $$('#mainspace img');
			layers.fade('hide');
			$$("#mainspace img#galleryimg0").fade('show');
			// start the gallery rotation proper
			var galleryrotate = setInterval(function () {
				// find the thumbnail to be dimmed and dim it
				var tobedimmed = layers[i].id.replace("galleryimg", "gallerythumb");
				$(tobedimmed).morph({ 'border-color': defaultcolor });
				// fade the current layer out
				layers[i].fade('out');
				// move to the next layer, and if there isn't one, reset to 0
				i = (i == layers.length - 1) ? 0 : i + 1;
				// find the thumbnail to be highlighted, and do it
				var tobehighlighted = layers[i].id.replace("galleryimg", "gallerythumb");
				$(tobehighlighted).morph({ 'border-color': highlightcolor });
				// fade in the next layer
				layers[i].fade('in');
			}, 5000);
			// re-add the mouseover / mouseout events to the thumbnails in case
			// they've been cleared in the next step
			$('imageblocks').getElements('a').addEvents({
				'mouseover': function () {
					this.morph({ 'border-color': highlightcolor });
				},
				'mouseout': function () {
					this.morph({ 'border-color': defaultcolor });
				},
				// add the events for click, which removes the mouseout events for this link, hides
				// all big images, and fades in the one which matches the clicked thumbnail
				'click': function (listID) {
					$$("#mainspace img").fade('out');
					var searchid = this.id.replace("gallerythumb", "galleryimg");
					$$("#mainspace img#" + searchid).fade('in');
					$('imageblocks').getElements('a').morph({ 'border-color': defaultcolor });
					$('imageblocks').getElements('a').addEvent('mouseout', function () { this.morph({ 'border-color': defaultcolor }) });
					this.removeEvents('mouseout');
					this.morph({ 'border-color': highlightcolor });
					// and stops the rotation altogether
					clearInterval(galleryrotate);
					// and then returns false so the user doesn't get bumped to the top of the screen
					return false;
				}
			});
		}
	});
}

window.addEvent('load', function () {
	if (document.getElementById("mainspace")) {
		preloadImgs(plA);
	}
});

window.addEvent('domready', function () {
	$('toplinks').getElements('a:not([id="jigBar"])').addEvents({
		'mouseover': function () {
			this.morph({ 'color': '#f05023' });
		},
		'mouseout': function () {
			this.morph({ 'color': '#000000' });
		}
	});
	if (document.getElementById("mainspace")) {
		$$("#imageblocks a#gallerythumb0").morph({ 'border-color': highlightcolor });
	};
});