added overlay...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

index.html

@@ -52,6 +52,46 @@
 }
 */
 
+/* overlay... */
+
+.overlay {
+	display: block;
+	position: fixed;
+	z-index: 999999;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+}
+.overlay > div:first-child {
+	position: absolute;
+	display: block;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+
+	opacity: 0.7;
+
+	cursor: hand;
+
+}
+.overlay > div:last-child {
+	position: absolute;
+	left: 0px;
+	top: 50%;
+	width: 100%;
+	height: 50%;
+	margin-top: -20%;
+
+	text-align: center;
+
+	opacity: 0.9;
+
+	box-shadow: 5px 5px 200px 30px black;
+}
+
+
 </style>
 
 <script src="ext-lib/jquery.js"></script>
@@ -85,6 +125,30 @@ CKEDITOR.disableAutoInline = true
 
 <script>
 
+function showInOverlay(text){
+	$('.overlay').remove()
+	var overlay = $('<div class="overlay"><div/><div/></div>')
+		.css({display: 'none'})
+	overlay.children().first().click(function(){
+		overlay.fadeOut()
+	})
+
+	overlay.children().last().append(text)
+
+	// add the overlay...
+	overlay
+		.appendTo($('.chrome'))
+		.fadeIn()
+}
+
+function showInfo(){
+	showInOverlay($(
+		'<div>'+
+			'<h1>Portable Mag</h1>'+
+			'<p>licence and copyright info goes here...</p>'+
+		'</div>'))
+}
+
 
 $(document).ready(function(){
 	// general window behavior...
@@ -95,6 +159,13 @@ $(document).ready(function(){
 	// keyboard...
 	$(document)
 		.keydown(makeKeyboardHandler({
+			'.overlay': {
+				Esc: function(){
+					$('.overlay').fadeOut() 
+					return false
+				},
+			},
+
 			// ignore all keys except Esc here...
 			'.inline-editor-mode': {
 				//ignore: '*'
@@ -281,7 +352,7 @@ $(document).ready(function(){
 			</a>
 		</div>
 		<div class="button info">
-			<a href="javascript:alert('not implemented yet...')">
+			<a href="javascript:showInfo()">
 				<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 				 <g>
 				  <title>Info</title>

magazine-themes.css

@@ -109,6 +109,14 @@
 	color: gray;
 }
 
+.overlay > div:first-child {
+	background: #555;
+}
+.overlay > div:last-child {
+	color: white;
+	background: #555;
+	box-shadow: 5px 5px 200px 30px #555;
+}
 
 
 
@@ -186,6 +194,14 @@
 	background: red;
 }
 
+.light-viewer .overlay > div:first-child {
+	background: white;
+}
+.light-viewer .overlay > div:last-child {
+	color: gray;
+	background: white;
+	box-shadow: 5px 5px 200px 30px #eee;
+}
 
 
 /***************************************************** dark viewer ***/
@@ -262,6 +278,14 @@
 	background: red;
 }
 
+.dark-viewer .overlay > div:first-child {
+	background: black;
+}
+.dark-viewer .overlay > div:last-child {
+	color: white;
+	background: black;
+	box-shadow: 5px 5px 200px 30px black;
+}
 
 
 /******************************************************* Magazine ****/