var small_image_y_offset = 100;

if (typeof(site_id) == "undefined") {
	site_id = 1;
}
if (site_id && site_id==2) {
	small_image_y_offset = 70;
}

function getEventX(event){
	return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function getEventY(event){
	return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}

/**
 * Returns the HTML element (div) that is used to display the small images for the cards
 * Creates the element if it had not been created yet
 */
function getSmallCardViewer(){
	var card_viewer = document.getElementById('card_viewer');
	if (!card_viewer) {
		// Use the main page content div as anchor for the card viewer!
		var viewer_anchor = document.getElementById('main_content');
		if (viewer_anchor) {
			card_viewer = document.createElement('div');
			var card_viewer_image = document.createElement('img');
			card_viewer.appendChild(card_viewer_image);
			card_viewer.id = 'card_viewer';
			Element.setStyle(card_viewer, {position: 'absolute', top: 0, left: 0, width: '80px', height: '100px', "z-index": 1000});
			viewer_anchor.appendChild(card_viewer);
		}
	}
	return card_viewer;
}

/**
 * Hides the display for the small card images
 */
function hideSmallImage(){
	var card_viewer = document.getElementById('card_viewer');
	if (card_viewer) {
		var viewer_image = card_viewer.childNodes[0];
		if (viewer_image) {
			viewer_image.src = '/img/empty.gif';
		}
		Element.setStyle(card_viewer, {display: 'none'});
	}
}

/**
 * Displays a card small image next to the cursor
 * @param string image_path URL of the image to display
 * @param Event event Event that caused this action
 */
function showSmallImage(image_path, event){
	if (image_path) {
		event = (event || window.event);
		var card_viewer = getSmallCardViewer();
		var viewer_image = null;
		if (card_viewer) {
			viewer_image = card_viewer.childNodes[0];
		}
		if (viewer_image) {
			viewer_image.src = image_path;
		}
		var viewer_top = getEventY(event);
		viewer_top -= small_image_y_offset;
		if (viewer_top<0) {
			viewer_top = 0;
		}
		var viewer_left = getEventX(event);
		viewer_left += 10;
		Element.setStyle(card_viewer, {display: 'block'});
		Element.setStyle(card_viewer, {position: 'absolute', top: viewer_top, left: viewer_left});
	}
}