function initModal(){
	//alert("init modal");
	$('#modal_mask').css('height', $(document).height());
	$('#modal_mask').css('width', $(document).width());
	var newImg = '<img src="/includes/images/close.png" id="modal_close" alt="close" />';
	$('#modal_content').html( newImg + $('.problem').html() + $('.solution').html()  );
	//alert('height: ' + $('#modal_content').height());
	var contentW = $('#modal_content').width();
	var contentH = $('#modal_content').height();
	var topPos = ($(window).height()-contentH)/2;
	var leftPos = ($(window).width()-contentW)/2;
	$('#modal_content').css('left', String(leftPos) + 'px');
	$('#modal_content').css('top', String(topPos) + 'px');
	
	$('#modal_close').css('right', String(10) + 'px');
	$('#modal_close').css('top', String(10) + 'px');
	$('#modal_close').css('position', 'absolute');
}

function showModal(){	
	//alert('showing');
	$('#modal_mask').fadeTo(200, 0.4);
	$('#modal_content').fadeTo(200, 1);
	$('#modal_close').click(hideModal);
}

function hideModal(){
	//alert('hiding modal');
	$('#modal_mask').hide();
	$('#modal_content').hide();
	
}

function addMouseOver(name){
	$(name).hover(function() { 
		$(this).css('cursor','pointer'); 
		}, function() { 
			$(this).css('cursor','auto'); 
	});
}



$(document).ready(function(){
	initModal();
	$('.modalLink').click(showModal);
	$(window).resize(initModal);
	$('#modal_mask').click(hideModal);

	addMouseOver('#modal_close');
	addMouseOver('.modalLink');
});