From 99b3118cce77484c007bf78c16afb04f7bbeb73e Mon Sep 17 00:00:00 2001
From: "Jason A. Donenfeld" <Jason@zx2c4.com>
Date: Thu, 19 Apr 2012 20:52:41 +0200
Subject: [PATCH] Do fullscreen properly.

---
 web/css/000-controls.css | 14 +++-----------
 web/index.html           |  3 +--
 web/js/011-display.js    | 14 ++++++++------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/web/css/000-controls.css b/web/css/000-controls.css
index b0efcdc..a57e1d7 100644
--- a/web/css/000-controls.css
+++ b/web/css/000-controls.css
@@ -77,17 +77,6 @@ a:hover {
 #next {
 	right: 0.1em;
 }
-#fullscreen {
-	display: none;
-	position: absolute;
-	opacity: 0.50;
-	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	margin-top: -0.25em;
-	margin-left: -1em;
-	font-size: 2em;
-	cursor: pointer;
-}
 #photo {
 	border: 0;
 	left: 0;
@@ -159,6 +148,9 @@ a:hover {
 	width: 100%;
 	text-align: center;
 }
+#fullscreen, #fullscreen-divider {
+	display: none;
+}
 .photo-view-container {
 	position: absolute;
 	height: 150px;
diff --git a/web/index.html b/web/index.html
index 1ec2661..22ce1be 100644
--- a/web/index.html
+++ b/web/index.html
@@ -16,7 +16,7 @@
 		<a id="next-photo"><img id="photo" /></a>
 		<div id="photo-bar">
 			<div id="photo-links">
-				<a id="metadata-link" href="javascript:void(0)">show metadata</a> | <a id="original-link" target="_blank">download original</a>
+				<a id="metadata-link" href="javascript:void(0)">show metadata</a> | <a id="original-link" target="_blank">download original</a><span id="fullscreen-divider"> | </span><a id="fullscreen" href="javascript:void(0)">fullscreen</a>
 			</div>
 			<div id="metadata"></div>
 		</div>
@@ -24,7 +24,6 @@
 	
 	<a id="back">&lsaquo;</a>
 	<a id="next">&rsaquo;</a>
-	<a id="fullscreen">&#x2922;</a>
 </div>
 <div id="album-view">
 	<div id="thumbs">
diff --git a/web/js/011-display.js b/web/js/011-display.js
index b7966e9..ab56562 100644
--- a/web/js/011-display.js
+++ b/web/js/011-display.js
@@ -27,6 +27,7 @@ $(document).ready(function() {
 	var previousPhoto = null;
 	var originalTitle = document.title;
 	var photoFloat = new PhotoFloat();
+	var maxSize = 800;
 	
 	
 	/* Displays */
@@ -152,8 +153,7 @@ $(document).ready(function() {
 			image.css("height", "100%").css("width", "auto").css("position", "").css("bottom", "");
 	}
 	function showPhoto() {
-		var maxSize, width, height, photoSrc, previousPhoto, nextPhoto, nextLink, text;
-		maxSize = 1024;
+		var width, height, photoSrc, previousPhoto, nextPhoto, nextLink, text;
 		width = currentPhoto.size[0];
 		height = currentPhoto.size[1];
 		if (width > height) {
@@ -288,17 +288,19 @@ $(document).ready(function() {
 	$("#photo-box").mouseleave(function() {
 		$("#photo-links").stop().fadeOut("slow");
 	});
-	$("#next, #back, #fullscreen").mouseenter(function() {
+	$("#next, #back").mouseenter(function() {
 		$(this).stop().fadeTo("slow", 1);
 	});
 	$("#next, #back").mouseleave(function() {
 		$(this).stop().fadeTo("slow", 0.35);
 	});
 	if ($.support.fullscreen) {
+		$("#fullscreen-divider").show();
 		$("#fullscreen").show().click(function() {
-			$("#photo").fullScreen();
-		}).mouseleave(function() {
-			$(this).stop().fadeTo("slow", 0.50);
+			$("#photo").fullScreen({callback: function(isFullscreen) {
+				maxSize = isFullscreen ? 1024 : 800;
+				showPhoto();
+			}});
 		});
 	}
 	$("#metadata-link").click(function() {