$(document).ready(function(){
	$('#quicktip_content').css('display', 'none');
	$('a[@rel*=modalPanel]').click(function() {
		closeModal();
		var href = $(this).attr('href');
		var id = href.substring(1);
		var content = $('div#'+id).html();
		innerDiv = $("<div></div>");
		innerDiv.html("<div class='modal_content'><span class='modal_close'>[x]</span>" + content + "</div>");
		var modalWindow = $("<div class='modal' id='modal_up'></div>").html(innerDiv).prependTo('body');
		var modalHeight = modalWindow.outerHeight();
		modalWindow.css('display', 'none');
		
		var offset = $(this).offset();
		var height = $(this).outerHeight();
		var windowHeight = $(window).height();
		var scrollTop = $(window).scrollTop();
		
		var topSpace = offset.top - scrollTop;
		var bottomSpace = windowHeight - topSpace - height;
		
		var left = offset.left - 90;
		
		
		var idName = 'modal_down';
		var top = offset.top + height + 5;
		
		if ((topSpace > bottomSpace) && (topSpace > modalHeight)) {
			idName = 'modal_up';
			top = offset.top - modalHeight - 5;
		}
		
		modalWindow.attr('id', idName).css({'top': top, 'left': left}).fadeIn("slow");
		$('span.modal_close').bind('click', closeModal);
		$(document).click(function(event) {
			filterModal(event);
		});
		return false;
	});
	
	function closeModal() {
		$('div.modal').fadeOut("slow").remove();
	}
	
	function filterModal(e){
		 if (!e) {
			var e = window.event;
		};  
		if (!$(e.target).parents().andSelf().filter('.modal').length) {
			closeModal();
			$(document).unbind('click', filterModal);
		}
	};

});