From b6d2ac9be5edf78d2e226cad4ac3f7beb9bb7ce2 Mon Sep 17 00:00:00 2001
From: Fredrik Erlandsson <fredrik.e@gmail.com>
Date: Wed, 25 May 2011 15:12:03 +0200
Subject: [PATCH] View mode buttons fixes, support for hoverView.

---
 icons/pear.css           |  4 +++-
 js/pear.js               | 44 +++++++++++++++-------------------------
 views/album.html.php     |  4 ++--
 views/hoverView.html.php | 23 +++++++++++++++++++++
 views/page.html.php      | 16 +++++++--------
 5 files changed, 52 insertions(+), 39 deletions(-)
 create mode 100644 views/hoverView.html.php

diff --git a/icons/pear.css b/icons/pear.css
index 4ecb4aeb..a3a613be 100644
--- a/icons/pear.css
+++ b/icons/pear.css
@@ -335,7 +335,9 @@ cursor: hand; /* for IE 5.x */
 #viewControls .viewSwitcher:hover, #viewControls .sel-with-viewSwitcher, #viewControls .hover-with-viewSwitcher {
 color: #ffffff;
 }
-
+#viewControls .sel-with-viewSwitcher {
+	cursor: default;
+}
 #viewControls #grid {
 background: url('grid.png') center left no-repeat;
 						text-indent: 20px;
diff --git a/js/pear.js b/js/pear.js
index 9cf66033..80479a0b 100644
--- a/js/pear.js
+++ b/js/pear.js
@@ -254,6 +254,7 @@ $(function() {
 	$('#next_detail').click(function(){ swatchImg(currentImg+1); });
 	
 	if(!slideshowImages.length) opt=1;
+	opt=1;
 	switch (opt) {
 		case 1:
 			switchToGrid();
@@ -273,9 +274,9 @@ $(function() {
 function switchToGrid()
 {
 	toggleReflex(true);
-	if($('pearImageFlow')) $('pearImageFlow').hide();
-	$('ContentAlbum').show();
-	if(!$('mosaicGridContainer')) return;
+	$('#pearImageFlow').hide();
+	$('#ContentAlbum').show();
+	if(!$('#mosaicGridContainer').length) return;
 	mosaicView=false;
 	maxSize=225;
 	checkCookie();
@@ -290,9 +291,9 @@ function switchToGrid()
 function switchToMosaic()
 {
 	toggleReflex(false);
-	if($('pearImageFlow')) $('pearImageFlow').hide(); //.hide(); 
-	$('ContentAlbum').show();
-	if(!$('mosaicGridContainer')){return;}
+	$('#pearImageFlow').hide(); //.hide(); 
+	$('#ContentAlbum').show();
+	if(!$('#mosaicGridContainer').length) return;
 	mosaicView=true;
 	maxSize=125;
 	checkCookie();
@@ -344,16 +345,16 @@ function togglePlayPause()
 function focusImage(id)
 {
 	currentImg=id;
-	$('imageTitleLabel').update("<h2>"+slideshowImages[id][4]+"</h2>");
-	$('play_detail').hide();
-	$('pause_detail').hide();
+	$('#imageTitleLabel').html("<h2>"+slideshowImages[id][4]+"</h2>");
+	$('#play_detail').hide();
+	$('#pause_detail').hide();
 	swatchImg(id);
-	new Effect.Appear('detailView', { duration: 1.0 });
+	$('#detailView').fadeIn('slow');
 	hideHoverV = setTimeout("hideHoverView()",3000);
 	//Image count.
 	detailViewMode=true;
 	updateHash();
-	new Ajax.Request(slideshowImages[currentImg][1], { method:'get' });
+	$.get(slideshowImages[currentImg][1]);
 }
 
 function startImageFlow()
@@ -419,31 +420,18 @@ function setKeys()
 }
 function showHoverView(){
 	if(hideHoverV != null) clearTimeout(hideHoverV);
-	$('hoverView').show();
+	$('#hoverView').show();
 	hideHoverV = setTimeout("hideHoverView()",3000);
 }
 function hideHoverView(){
-	if(!hovering) $('hoverView').fade();
+	if(!hovering) $('#hoverView').fadeOut();
 	hideHoverV = null;
 }
 var hideHoverV=null;
 var hovering=false;
 function switchMode(mode){
-	$('mosaic').className="viewSwitcher mosaic mosaic-with-viewSwitcher";
-	$('grid').className="viewSwitcher grid grid-with-viewSwitcher";
-	$('carousel').className="viewSwitcher carousel carousel-with-viewSwitcher";
-
-	switch(mode){
-		case 'grid':
-			$('grid').className="sel grid viewSwitcher grid-with-sel grid-with-viewSwitcher sel-with-viewSwitcher grid-with-sel-with-viewSwitcher";
-			break;
-		case 'mosaic':
-			$('mosaic').className="mosaic viewSwitcher sel mosaic-with-viewSwitcher sel-with-viewSwitcher mosaic-with-sel mosaic-with-sel-with-viewSwitcher";
-			break;
-		case 'carousel':
-			$('carousel').className="sel carousel viewSwitcher carousel-with-sel carousel-with-viewSwitcher sel-with-viewSwitcher carousel-with-sel-with-viewSeitcher";
-			break;
-	}
+	$('#mosaic,#grid,#carousel').removeClass("sel sel-with-viewSwitcher");
+	$('#'+mode).addClass("sel sel-with-viewSwitcher");
 }
 
 function preFetch()
diff --git a/views/album.html.php b/views/album.html.php
index 59e0837a..2ff1699e 100644
--- a/views/album.html.php
+++ b/views/album.html.php
@@ -18,13 +18,13 @@
   <? foreach ($children as $i => $child): ?>
     <? $item_class = "g-photo"; ?>
     <? if ($child->is_album()): ?>
-      <? $item_class = "g-album\" \"onclick=\"window.location='".$child->url()."/'+getAlbumHash(skimimg);"; ?>
+      <? $item_class = "g-album\" onclick=\"window.location='".$child->url()."/'+getAlbumHash(skimimg);"; ?>
     <? endif ?>
     <? $img_class = "g-thumbnail"; ?>
     <? if ($child->is_photo()): ?>
       <? $img_class = "g-thumbnail p-photo"; ?>
     <? endif ?>
-  <div id="g-thumb-id-<?= $child->id ?>" class="gallery-thumb <?= $item_class ?>">
+  <div id="g-thumb-id-<?= $child->id ?>" class="g-item gallery-thumb <?= $item_class ?>">
     <?= $theme->thumb_top($child) ?>
     <? if ($child->is_album()): ?>
 		<div class="gallery-thumb-round" style="height: 200px; width: 200px;"></div>
diff --git a/views/hoverView.html.php b/views/hoverView.html.php
new file mode 100644
index 00000000..418ba664
--- /dev/null
+++ b/views/hoverView.html.php
@@ -0,0 +1,23 @@
+<?php defined("SYSPATH") or die("No direct script access.") ?>
+<div id="detailView" style="display: none; z-index:99997;" onmousemove="showHoverView();">
+	<div class="overlay"> </div>
+	<div class="content">
+		<div class="imageContainer">
+			<div id="backToAlbumLink" class="dark_theme">
+				<button id="backToAlbumButton" class="large push large-with-push" title="Back to Album" onclick="hideDetailView();"> <div class="outer"> <div id="backToAlbumButtonLabel" class="label">Back to Album</div> </div> </button>
+			</div>
+			<div id="detailImageView" class=""> <img style="visibility: visible;" src="" alt="" id="img_detail"/> </div>
+			<div class="titleLabel" id="imageTitleLabel" style="bottom: width: 624px;"></div>
+		</div>
+		<div id="hoverView" class="" onmouseover="hovering=true;" onmouseout="hovering=false;">
+			<div id="hoverViewMenu">
+				<div id="download_detail" title="Download this photo" class="download_detail" onclick="document.location=slideshowImages[currentImg][5]"> </div>
+				<div id="prev_detail" title="(P)revious" class="prev_detail"> </div>
+				<div id="pause_detail" style="display: none;" title="Pause" class="pause_detail" onclick="togglePlayPause();"> </div>
+				<div id="play_detail" style="display: none;" title="Play" class="play_detail" onclick="togglePlayPause();"> </div>
+				<div id="next_detail" title="(N)ext" class="next_detail"> </div>
+				<div id="info_detail" title="Show more information about this photo" class="info_detail" onclick="document.location=slideshowImages[currentImg][1]"> </div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/views/page.html.php b/views/page.html.php
index 66a48181..b65d45c3 100644
--- a/views/page.html.php
+++ b/views/page.html.php
@@ -80,11 +80,12 @@
     <?= $theme->get_combined("css") ?>
 		<link rel="stylesheet" type="text/css" href="<?= $theme->url("css/pear.css") ?>" media="screen,print,projection" />
 		<link rel="stylesheet" type="text/css" href="<?= $theme->url("icons/pear.css") ?>" media="screen,print,projection" />
-		<script type="text/javascript" src="<?= $theme->url("js/pear.js") ?>" />
+		<script type="text/javascript" src="<?= $theme->url("js/pear.js"); ?>"></script>
   </head>
 
-  <body <?= $theme->body_attributes() ?> onload="bodyLoad(1);">
-    <?= $theme->page_top() ?>
+  <body <?= $theme->body_attributes() ?>>
+     <?= new View("hoverView.html") ?>
+		 <?= $theme->page_top() ?>
       <?= $theme->site_status() ?>
       <div id="g-header" class="ui-helper-clearfix" style="display: none;">
         <div id="g-banner">
@@ -112,7 +113,7 @@
 		<span class="count">(<?//$theme->item()->children;?>)</span>
 	</div>
 	<div class="rNavBar">
-		<button class="large push large-with-push" onclick="$('#g-header').css('display', 'block');toggleSidebar('ContentAlbum','sidebar'); return false;"> <div class="outer"> <div class="label" id="sidebarButton">Show Options</div></div></button>
+		<button class="large push large-with-push" onclick="$('#g-header').slideToggle('normal', function(){$('#g-header').is(':hidden') ? $('#sidebarButton').text('Show Options') : $('#sidebarButton').text('Hide Options')});//);toggleSidebar('ContentAlbum','sidebar'); return false;"> <div class="outer"> <div class="label" id="sidebarButton">Show Options</div></div></button>
 	</div>
 </div>
 
@@ -136,15 +137,14 @@
 	</div>
 
 	<div class="" style="" id="viewControls">
-		<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher grid-with-sel grid-with-viewSwitcher sel-with-viewSwitcher grid-with-sel-with-viewSwitcher" onclick="switchToGrid();"><!--the extra class names, i.e. grid, mosaic, carousel, and slideshow, are for IE6, because it won't do #id.classname sometimes. Flaky. -->
-		<!-- <div style="margin-top:-2px;margin-left:-2px;"> -->
+		<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher" onclick="switchToGrid();">
 			<div class="label">Grid</div>
 		</div>
-		<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic mosaic-with-viewSwitcher" onclick="switchToMosaic();">
+		<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic" onclick="switchToMosaic();">
 			<!-- <div style="margin-top:-2px;margin-left:-4px;"> -->
 			<div class="label">Mosaic</div>
 		</div>
-		<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher carousel-with-viewSwitcher" onclick="startImageFlow();">
+		<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher" onclick="startImageFlow();">
 			<!-- <div style="margin-top:-2px;"> -->
 			<div class="label">Carousel</div>
 		</div>