Do fullscreen properly.

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;

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">

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() {