var thumbWidth = 150;
var thumbHeight = 132;
var hoverWidth = 298;
var hoverHeight = 262;
var finalWidth = 320;
var finalHeight = 280;
var preloadImages = [];


function mosaicMenu(id, zoomedImgBase, nameOffset) {
	document.getElements('#'+id+' img').each(function(el) {
		el.addEvents({
			'mouseenter': function(item) {
				var img = item.target || el;
				var link = img.getParent().getParent();
				var imgCoords = img.getCoordinates();
				var sectionCoords = $(id).getCoordinates();
				var footerCoords = $('footer').getCoordinates();
				var imgBaseName = img.src.substring(img.src.lastIndexOf('/')+1);
				var hoverImgLeft = (imgCoords.left-(hoverWidth-thumbWidth)/2);
				if(hoverImgLeft<sectionCoords.left) {
					hoverImgLeft = sectionCoords.left;
				}
				if(hoverImgLeft+hoverWidth>sectionCoords.right) {
					hoverImgLeft = sectionCoords.right-hoverWidth;
				}
				var hoverImgTop = (imgCoords.top-(hoverHeight-thumbHeight)/2);
				if(hoverImgTop<sectionCoords.top) {
					hoverImgTop = sectionCoords.top-20;
				}
				if(hoverImgTop+hoverHeight>footerCoords.top) {
					hoverImgTop = footerCoords.top-hoverHeight;
				}
				var zoomedImg = 'assets/images/'+zoomedImgBase+'/'+imgBaseName;
				preloadImages.push(zoomedImg);
				var hoverImg = new Element( 'img', { 
					'src' : zoomedImg, 
					'styles' : {
						'position': 'absolute',
						'top' : hoverImgTop+'px',
						'left' : hoverImgLeft+'px',
						'width' : hoverWidth+'px',
						'height' : hoverHeight+'px',
						'border' : '5px solid black',
						'z-index' : 10,
						'cursor' : 'pointer'
					},
					'events' : {
						'mouseleave': function() {
							hoverImg.dispose();
						},
						'click': function() {
							var sectionPage = img.src.substring(img.src.lastIndexOf('/')+nameOffset);
							sectionPage = sectionPage.replace(/.jpg/, ".html");
							
							document.location=link.href;							
						}
					}
				});
				hoverImg.injectBefore($('content'));
			}
		})
		
	}.bind(this));
}

function displayDiv(id) {
	$(id).setStyle('display', 'block');
	$(id+'_overlay').setOpacity(0.9);
}

function hideDiv(id) {
	$(id).setStyle('display', 'none');
	$(id+'_overlay').setOpacity(0);
}

function addHref(el, href) {
	if(el) {
		el.addEvents({
			'click': function() {
				document.location=href;
			}
		});
	}
}

function setup() {
	addHref($('logo'), 'index.html');
	addHref($('european'), 'european.html');
	addHref($('asian'), 'asian.html');
	addHref($('australian'), 'australian.html');
	addHref($('african'), 'african.html');
	addHref($('middle_eastern'), 'middle_eastern.html');
	addHref($('north_american'), 'north_american.html');
	addHref($('latin_american'), 'latin_american.html');
	
	document.getElements('.map_overlay').each(function(el) {
		el.setOpacity(0);
		el.setStyle('display', 'block');
	});
	
	mosaicMenu('subsections','covers',0);
	
	Array.each.delay(3000,this,[
		preloadImages,
		function(src) {
			var img = new Image();
			img.src = src;
		}
	]);
}

window.addEvent('domready', setup);