$(document).ready(function()
{
	//check if mouse is inside the preview
	var mouse_in_preview = false;
	$('.preview').hover(function()
	{ 
		mouse_in_preview=true; 
	}, function(){ 
		mouse_in_preview=false; 
	});
	
	//check if mouse is on a lower menu button
	var mouse_on_button = false;
	$('.lowerMenuButton').hover(function()
	{ 
		mouse_on_button=true; 
	}, function(){ 
		mouse_on_button=false; 
	});
	
	// if the mouse is clicked when not in the preview, close the preview and change the lower menu button background
	$("body").mouseup(function()
	{ 
		if(! mouse_in_preview) 
		{
			if(mouse_on_button==true){$('.preview').hide();}
			else{$('.preview').hide(500);}
			$(".lowerMenuButton").addClass('lowerMenuButton').removeClass('lowerMenuButtonSelected');
			$('#previewMask').hide();
		}
	});
	
	// change lower menu button background when clicked
	$('.lowerMenuButton').click(function()
	{
		$(this).addClass('lowerMenuButtonSelected');
	});
	
	//when close button is clicked
	$('.preview .closeButton').click(function()
	{
		$('#previewMask').hide(1); //for some reason this does not work here if the hide() parameters alre left blank
		$('.preview').hide(500);
		$(".lowerMenuButton").addClass('lowerMenuButton').removeClass('lowerMenuButtonSelected');
	});
});

function openPreview(id)
{
	document.getElementById(id).style.display = 'block'; 
	document.getElementById('previewMask').style.display = 'block';
}