Event.observe(window, 'load', function(e){

		if(!($('thumbs') && $('nav'))){
			return;
		}

		var extensionImageDivs = $('thumbs').getElementsBySelector('div.thumb');
		
		for(var i = 0; i < extensionImageDivs.length; i++){

			var extensionImageDiv = extensionImageDivs[i];

			// make mouse over div
			var image = extensionImageDiv.down('img');
			var imageDimensions = image.getDimensions();
			var numberDiv = document.createElement('div');
			numberDiv.className = 'number';
			numberDiv.style.width = imageDimensions.width + 'px';
			var extensionImageDivHeight = image.getHeight();
			numberDiv.style.height = extensionImageDivHeight + 'px';
			numberDiv.style.display = 'none';
			var extensionNumber = image.className.substr(10);
			var text = document.createTextNode('#' + extensionNumber);
			numberDiv.appendChild(text);
			extensionImageDiv.appendChild(numberDiv);

			extensionImageDiv.style.width = imageDimensions.width + 'px';

			Event.observe(
				extensionImageDiv,
				'click',
				function(e){
					var href = $(Event.element(e)).up('div.thumb').down('a').href;
					window.location.href = href;
					Event.stop(e);
				}
			);
			Event.observe(
				image,
				'mouseover',
				function(e){
					unhighlightAllExtensionImages();
					var extensionClassName = $(Event.findElement(e, 'img')).className;
					toggleExtensionNavItem(extensionClassName, true);
					toggleExtensionImages(extensionClassName, true);
					Event.stop(e);
				}
			);
			Event.observe(
				extensionImageDiv,
				'mouseout',
				function(e){
					var source = Event.element(e);
					if(source.className == 'number'){
						var extensionClassName = source.up('div.thumb').down('img').className;
						toggleExtensionNavItem(extensionClassName, false);
						toggleExtensionImages(extensionClassName, false);
					}
					Event.stop(e);
				}
			);

		}

		var lis = $('nav').getElementsByTagName('li');
		for(var i = 0; i < lis.length; i++){
			var li = lis[i];
			Event.observe(
				li,
				'mouseover',
				function(e){
					unhighlightAllExtensionImages();
					var extensionId = $(Event.findElement(e, 'a')).id;
					toggleExtensionImages(extensionId, true);
				}
			);
			Event.observe(
				li,
				'mouseout',
				function(e){
					var extensionId = $(Event.findElement(e, 'a')).id;
					toggleExtensionImages(extensionId, false);
				}
			);
		}

	}
);


function toggleExtensionNavItem(extensionId, highlight){
	if($(extensionId)){
		if(highlight){
			$(extensionId).addClassName('selected');
		} else {
			$(extensionId).removeClassName('selected');
		}
	}
}

function toggleExtensionImages(extensionClassName, highlight){
	var images = $('thumbs').getElementsByClassName(extensionClassName);
	for(var i = 0; i < images.length; i++){
		var image = images[i];
		var imageLink = image.up('a');
		var numberDiv = image.up('div.thumb').down('div.number');
		if(highlight){
			imageLink.hide();
			numberDiv.show();
		} else {
			imageLink.show();
			numberDiv.hide();
		}
	}
}

function unhighlightAllExtensionImages(){
	var links = $('nav').getElementsBySelector('a.selected');
	for(var i = 0; i < links.length; i++){
			links[i].removeClassName('selected');
	}
	var images = $('thumbs').getElementsBySelector('div.thumb img');
	for(var i = 0; i < images.length; i++){
		var image = images[i];
		var imageLink = image.up('a');
		var numberDiv = image.up('div.thumb').down('div.number');
		imageLink.show();
		numberDiv.hide();
	}
}