//id of current overlay
var currentOverlay = false;

// Mouse is in the overlay
var inOverlay = false;

// function to figure out what callout to show
function findCallout(element) {
	var parent_div_id = element.up('div.coolBooksListing').id;
	var callout_id = parent_div_id.substring(parent_div_id.length-1, parent_div_id.length);
	var overlayName = 'coolBooksInfo'+callout_id;
	return overlayName;
}

// The event listeners
function mouseOverListener(event) {
	var useDefer = false;
	var element = event.element();
	var overlayName = findCallout(element);
	if (currentOverlay && (currentOverlay != overlayName)) {
		inOverlay = false;
		hideBookInfo();
		useDefer = true;
	}
	
	currentOverlay = overlayName;
	if (useDefer) {
		showBookInfo.defer(element);
	} else {
		showBookInfo(element);
	}
}

function mouseOutListener(event) {
	var element = event.element();
	hideBookInfo.defer();
}

// show the callout div
function showBookInfo(element) {
	$('coolBooks').style.zIndex = 30000;
	if ($(currentOverlay).style.display == 'none') {
		$(currentOverlay).clonePosition(element, {
			setWidth: false,
			setHeight: false,
			offsetLeft: 70,
			offsetTop: 100
		}).absolutize();
		$(currentOverlay).show();
	}
}

// hide the callout div
function hideBookInfo() {
	$('coolBooks').style.zIndex = 1;
	if (inOverlay) return;
	$(currentOverlay).hide();
}

// Attach everything once the page has loaded
function attachCallouts() {
	$$('#coolBooksListContent .coolBooksListing a img').each(
		function (element) {
			element.observe('mouseover', mouseOverListener);
			element.observe('mouseout', mouseOutListener);
		}
	);
	
	$$('.coolBooksInfoCallout').each(
		function (el) {
			el.observe('mouseover', function () {inOverlay = true;});
			el.observe('mouseout', function () {inOverlay = false;hideBookInfo.defer();});
		}
	);	
}

// deselect highlight nav tab
function clearNavTabs() {
	$$('#coolBooksNav li a.coolBooksNavOn').each(
		function (el) {
			el.removeClassName('coolBooksNavOn');
		}
	);
}

Event.observe(window, 'load', function () {
	attachCallouts();
	
	// Attach nav tab clicks
	$$('#coolBooksNav li a').each(
		function (el) {
			el.observe('click', function () {
				clearNavTabs();
				el.addClassName('coolBooksNavOn');
			});
		}
	);
});