$(function() {
	function modal(w, h, s) {
		var $i = $('<iframe>');
		$i.attr('src', s);
		$i.attr('border', 0);
		$i.css({
			'width': w,
			'height': h,
			'border': 'none',
			'frameBorder': 0
		});
		var $d = $('<div>');
		$d.css({
			'background': 'white',
			'border-radius': '5px',
			'position': $.browser.msie ? 'absolute' : 'fixed',
			'top': $(window).height() / 2 - h / 2,
			'left': $(window).width() / 2 - w / 2,
			'padding': '4px 4px 0 4px'
		});
		$d.append($i);
		
		var $div = $('<div>');
		$div.css({
			'position': 'absolute',
			'top': 0,
			'left': 0,
			'width': '100%',
			'height': $(document).height(),
			'background': 'black',
			'opacity': '0.8'
		});
		
		var $close = $('<div>Close</div>').css({
			'font-size': '12px',
			'background': '#eee',
			'color': 'black',
			'padding': '4px',
			'cursor': 'pointer',
			'border-radius': '5px',
			'line-height': '12px',
			'height': '12px',
			'font-size': '12px',
			'border': '2px solid #eee',
			'position': 'absolute',
			'top': $(window).height() / 2 - h / 2 + h + 16,
			'right': $(window).width() / 2 - w / 2 - 7
		}).hover(function() {
			$(this).css('background', '#fff');
			$(this).css('border-color', '#e58b34');
		}, function() {
			$(this).css('background', '#eee');
			$(this).css('border-color', '#eee');
		}).click(function() {
			close();
		});
		
		$div.click(function() {
			close();
		});
		
		function close() {
			$div.fadeOut(400, function() { $(this).remove(); });
			$d.fadeOut(400, function() { $(this).remove(); });
			$close.fadeOut(400, function() { $(this).remove(); });
		}
		$('body').append($div.fadeIn(600));
		$('body').append($d.fadeIn(600));
		$('body').append($close.fadeIn(600));
		$d.fadeIn(600);
	}
	
	$('#launchdemo').click(function() {
		modal(940, 500, '/demo');
		return false;
	});
});