feature 2587: theme elegant, new version

git-svn-id: http://piwigo.org/svn/trunk@13730 68402e56-0260-453c-a942-63ccdbb3a9ee
2026-03-28 17:43:07 +01:00 · 2012-03-25 19:23:03 +00:00
parent 186186a028
commit 2b005db9f7
11 changed files with 840 additions and 252 deletions
--- a/icon/arrows_ccc.png
+++ b/icon/arrows_ccc.png
--- a/icon/arrows_fff.png
+++ b/icon/arrows_fff.png
--- a/icon/img_next.png
+++ b/icon/img_next.png
--- a/icon/img_prev.png
+++ b/icon/img_prev.png
--- a/icon/none.png
+++ b/icon/none.png
--- a/icon/rating-stars.png
+++ b/icon/rating-stars.png
--- a/local_head.tpl
+++ b/local_head.tpl
@@ -1 +1,5 @@
-{combine_script id='elegant.scripts' require='jquery' path='themes/elegant/scripts.js'}
+{if $BODY_ID=='thePicturePage'}
+	{combine_script id='elegant.scripts_pp' load='header' require='jquery' path='themes/elegant/scripts_pp.js'}
+{else}
+	{combine_script id='elegant.scripts' load='header' require='jquery' path='themes/elegant/scripts.js'}
+{/if}
--- a/scripts.js
+++ b/scripts.js
@@ -1,102 +1,4 @@
-jQuery("document").ready(function(jQuery){
-
-	var menubar=jQuery("#menubar");
-	var content=jQuery("#content");
-
-	if ( (menubar.length == 1) && (content.length ==1)) {
-		menubar.after("<div id=\"menuswitcher\">«</div>");
-	
-		jQuery("#menuswitcher").click(function(){
-			if (jQuery("#menubar").is(":hidden")) {
-				showMenu(0);
-				return false;
-			} else {
-				hideMenu(0);
-				return false;
-			}
-		});
-
-		// creates a variable with the contents of the cookie side-menu
-		var sidemenu = jQuery.cookie('side-menu');
-		
-		// if cookie says the menu is hiding, keep it hidden!
-		if (sidemenu == 'hiding') {
-			hideMenu(0);
-		} else {
-			showMenu(0);
-		}
-
-	}
-	
-	var comments=jQuery("#thePicturePage #comments");
-	if (comments.length == 1) {
-		var comments_button=jQuery("#comments h3");
-
-		if (comments_button.length == 0) {
-			jQuery("#addComment").before("<h3>Comments</h3>");
-			comments_button=jQuery("#comments h3");
-		}
-	
-		if (jQuery.cookie('comments') == 'visible') {
-			comments_button.addClass("comments_toggle").addClass("comments_toggle_off");
-		} else {
-			comments.addClass("comments_hidden");
-			comments_button.addClass("comments_toggle").addClass("comments_toggle_on");
-		}
-		
-		comments_button.click(function() {
-
-			var comments=jQuery("#thePicturePage #comments");
-			if (comments.hasClass("comments_hidden")) {
-					comments.removeClass("comments_hidden");
-					comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");;
-					jQuery.cookie('comments', 'visible', {path: "/"});
-				} else {
-					comments.addClass("comments_hidden");
-					comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");;
-					jQuery.cookie('comments', 'hidden', {path: "/"});
-				}
-			
-		});
-	
-	}
-	
-	
-});
-
-function hideMenu(delay) {
-
-	var menubar=jQuery("#menubar");
-	var menuswitcher=jQuery("#menuswitcher");
-	var content=jQuery("#the_page > .content");
-	var pcontent=jQuery("#content");
-	
-	menubar.hide(delay);
-	menuswitcher.addClass("menuhidden").removeClass("menushown");
-	menuswitcher.text("»");
-	content.addClass("menuhidden").removeClass("menushown");
-	pcontent.addClass("menuhidden").removeClass("menushown");
-	jQuery.cookie('side-menu', 'hiding', {path: "/"});
-	
-}
-
-function showMenu(delay) {
-
-	var menubar=jQuery("#menubar");
-	var menuswitcher=jQuery("#menuswitcher");
-	var content=jQuery("#the_page > .content");
-	var pcontent=jQuery("#content");
-
-	menubar.show(delay);
-	menuswitcher.addClass("menushown").removeClass("menuhidden");
-	menuswitcher.text("«");
-	content.addClass("menushown").removeClass("menuhidden");
-	pcontent.addClass("menushown").removeClass("menuhidden");
-	jQuery.cookie('side-menu', 'showing', {path: "/"});
-	
-}
-
-/**
+/**
 * Cookie plugin
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
@@ -107,3 +9,70 @@ expires='; expires='+date.toUTCString();}
 var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
 return cookieValue;}};

+if (jQuery.cookie('page-menu') == 'hidden') {
+	jQuery("head").append("<style type=\"text/css\">#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}</style>");
+} else {
+	jQuery("head").append("<style type=\"text/css\">#content.contentWithMenu, #the_page > .content {margin-left:240px;}</style>");
+}
+
+function hideMenu(delay) {
+	var menubar=jQuery("#menubar");
+	var menuswitcher=jQuery("#menuSwitcher");
+	var content=jQuery("#the_page > .content");
+	var pcontent=jQuery("#content");
+	
+	menubar.hide(delay);
+	menuswitcher.addClass("menuhidden").removeClass("menushown");
+	content.addClass("menuhidden").removeClass("menushown");
+	pcontent.addClass("menuhidden").removeClass("menushown");
+	jQuery.cookie('page-menu', 'hidden', {path: "/"});
+	
+}
+
+function showMenu(delay) {
+
+	var menubar=jQuery("#menubar");
+	var menuswitcher=jQuery("#menuSwitcher");
+	var content=jQuery("#the_page > .content");
+	var pcontent=jQuery("#content");
+
+	menubar.show(delay);
+	menuswitcher.addClass("menushown").removeClass("menuhidden");
+	content.addClass("menushown").removeClass("menuhidden");
+	pcontent.addClass("menushown").removeClass("menuhidden");
+	jQuery.cookie('page-menu', 'visible', {path: "/"});
+	
+}
+
+jQuery("document").ready(function(jQuery){
+
+	var sidemenu = jQuery.cookie('page-menu');
+	var menubar=jQuery("#menubar");
+
+	if (menubar.length == 1) {
+
+		jQuery("#menuSwitcher").html("<div class=\"switchArrow\">&nbsp;</div>");
+
+		// if cookie says the menu is hiding, keep it hidden!
+		if (sidemenu == 'hidden') {
+			hideMenu(0);
+		} else {
+			showMenu(0);
+		}
+	
+		jQuery("#menuSwitcher").click(function(){
+			if (jQuery("#menubar").is(":hidden")) {
+				showMenu(0);
+				return false;
+			} else {
+				hideMenu(0);
+				return false;
+			}
+		});
+
+
+	}	
+	
+});
+
+
--- a/scripts_pp.js
+++ b/scripts_pp.js
@@ -0,0 +1,176 @@
+/**
+ * Cookie plugin
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ */
+jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;}
+var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}
+expires='; expires='+date.toUTCString();}
+var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
+return cookieValue;}};
+
+if (jQuery.cookie('picture-menu') == 'visible') {
+	jQuery("head").append("<style type=\"text/css\">#content.contentWithMenu, #the_page > .content {margin-left:240px;}</style>");
+} else {
+	jQuery("head").append("<style type=\"text/css\">#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}</style>");
+}
+
+function hideMenu(delay) {
+	var menubar=jQuery("#menubar");
+	var menuswitcher=jQuery("#menuSwitcher");
+	var content=jQuery("#the_page > .content");
+	var pcontent=jQuery("#content");
+	
+	menubar.hide(delay);
+	menuswitcher.addClass("menuhidden").removeClass("menushown");
+	content.addClass("menuhidden").removeClass("menushown");
+	pcontent.addClass("menuhidden").removeClass("menushown");
+	jQuery.cookie('picture-menu', 'hidden', {path: "/"});
+	
+}
+
+function showMenu(delay) {
+
+	var menubar=jQuery("#menubar");
+	var menuswitcher=jQuery("#menuSwitcher");
+	var content=jQuery("#the_page > .content");
+	var pcontent=jQuery("#content");
+
+	menubar.show(delay);
+	menuswitcher.addClass("menushown").removeClass("menuhidden");
+	content.addClass("menushown").removeClass("menuhidden");
+	pcontent.addClass("menushown").removeClass("menuhidden");
+	jQuery.cookie('picture-menu', 'visible', {path: "/"});
+	
+}
+
+function hideInfo(delay) {
+
+	var imageInfos=jQuery("#imageInfos");
+	var infoswitcher=jQuery("#infoSwitcher");
+	var theImage=jQuery("#theImage");
+	
+	imageInfos.hide(delay);
+	infoswitcher.addClass("infohidden").removeClass("infoshown");
+	theImage.addClass("infohidden").removeClass("infoshown");
+	jQuery.cookie('side-info', 'hidden', {path: "/"});
+
+}
+
+function showInfo(delay) {
+
+	var imageInfos=jQuery("#imageInfos");
+	var infoswitcher=jQuery("#infoSwitcher");
+	var theImage=jQuery("#theImage");
+	
+	imageInfos.show(delay);
+	infoswitcher.addClass("infoshown").removeClass("infohidden");
+	theImage.addClass("infoshown").removeClass("infohidden");
+	jQuery.cookie('side-info', 'visible', {path: "/"});
+
+}
+
+jQuery("document").ready(function(jQuery){
+	
+	// side-menu show/hide
+
+	var sidemenu = jQuery.cookie('picture-menu');
+	var menubar=jQuery("#menubar");
+
+	if (menubar.length == 1) {
+
+		jQuery("#menuSwitcher").html("<div class=\"switchArrow\">&nbsp;</div>");
+
+		// if cookie says the menu is hiding, keep it hidden!
+		if (sidemenu == 'visible') {
+			showMenu(0);
+		} else {
+			hideMenu(0);
+		}
+	
+		jQuery("#menuSwitcher").click(function(){
+			if (jQuery("#menubar").is(":hidden")) {
+				showMenu(0);
+				return false;
+			} else {
+				hideMenu(0);
+				return false;
+			}
+		});
+	
+	}
+
+	// info show/hide
+	
+	var sideinfo = jQuery.cookie('side-info');
+	var imageInfos=jQuery("#imageInfos");
+
+	if (imageInfos.length == 1) {
+
+		jQuery("#infoSwitcher").html("<div class=\"switchArrow\">&nbsp;</div>");
+
+		// if cookie says the menu is hiding, keep it hidden!
+		if (sideinfo == 'hidden') {
+			hideInfo(0);
+		} else {
+			showInfo(0);
+		}
+	
+		jQuery("#infoSwitcher").click(function(){
+			if (jQuery("#imageInfos").is(":hidden")) {
+				showInfo(0);
+				return false;
+			} else {
+				hideInfo(0);
+				return false;
+			}
+		});
+	
+	}
+
+	// comments show/hide
+
+	var commentsswicther=jQuery("#commentsSwitcher");
+	var comments=jQuery("#thePicturePage #comments");
+	
+	commentsswicther.html("<div class=\"switchArrow\">&nbsp;</div>");
+	
+	if (comments.length == 1) {
+		var comments_button=jQuery("#comments h3");
+
+		if (comments_button.length == 0) {
+			jQuery("#addComment").before("<h3>Comments</h3>");
+			comments_button=jQuery("#comments h3");
+		}
+	
+		if (jQuery.cookie('comments') == 'visible') {
+			comments.addClass("commentsshown");
+			comments_button.addClass("comments_toggle").addClass("comments_toggle_off");
+		} else {
+			comments.addClass("commentshidden");
+			comments_button.addClass("comments_toggle").addClass("comments_toggle_on");
+		}
+		
+		comments_button.click(function() { commentsToggle() });
+		commentsswicther.click(function() { commentsToggle() });
+	
+	}
+	
+	
+});
+
+function commentsToggle() {
+	var comments=jQuery("#thePicturePage #comments");
+	var comments_button=jQuery("#comments h3");
+
+	if (comments.hasClass("commentshidden")) {
+			comments.removeClass("commentshidden").addClass("commentsshown");
+			comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");;
+			jQuery.cookie('comments', 'visible', {path: "/"});
+		} else {
+			comments.addClass("commentshidden").removeClass("commentsshown");
+			comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");;
+			jQuery.cookie('comments', 'hidden', {path: "/"});
+		}
+
+}
--- a/template/picture.tpl
+++ b/template/picture.tpl
@@ -0,0 +1,385 @@
+{* Example of resizeable
+{include file='include/autosize.inc.tpl'}
+*}
+{if isset($MENUBAR)}{$MENUBAR}{/if}
+<div id="content" {if isset($MENUBAR)}class="contentWithMenu"{/if}>
+{if isset($errors) or not empty($infos)}
+{include file='infos_errors.tpl'}
+{/if}
+{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if}
+
+<div id="imageHeaderBar">
+	<div class="browsePath">
+		{$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2>
+	</div>
+</div>
+
+<div id="imageToolBar">
+<div class="imageNumber">{$PHOTO}</div>
+<div class="actionButtons">
+
+{if count($current.unique_derivatives)>1}
+{footer_script}{literal}
+function changeImgSrc(url,typeSave,typeMap)
+{
+	var theImg = document.getElementById("theMainImage");
+	if (theImg)
+	{
+		theImg.removeAttribute("width");theImg.removeAttribute("height");
+		theImg.src = url;
+		theImg.useMap = "#map"+typeMap;
+	}
+  jQuery('.derivativeChecked').hide();
+  jQuery('#derivativeChecked'+typeSave).show();
+  jQuery('#derivativeSwitchBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected');
+  jQuery('#derivativeName'+typeSave).addClass('switchSelected').removeClass('switchUnselected');
+	document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
+}
+
+function toggleDerivativeSwitchBox()
+{
+	var elt = document.getElementById("derivativeSwitchBox"),
+		ePos = document.getElementById("derivativeSwitchLink");
+	if (elt.style.display==="none")
+	{
+		elt.style.position = "absolute";
+		elt.style.left = (ePos.offsetLeft)+"px";
+		elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
+		elt.style.display="";
+	}
+	else
+		elt.style.display="none";
+}
+{/literal}{/footer_script}
+{strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+<span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a>
+<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleDerivativeSwitchBox()">
+<div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
+{foreach from=$current.unique_derivatives item=derivative key=derivative_type}
+<span class="derivativeChecked switchCheck"
+ id="derivativeChecked{$derivative_type}" {if $derivative->get_type() ne $current.selected_derivative->get_type()}style="display:none"{/if}>&#x2714; </span> 
+<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')"
+ id="derivativeName{$derivative_type}"
+ class="{if $derivative->get_type() == $current.selected_derivative->get_type()}switchSelected{else}switchUnselected{/if}">
+	{$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span>
+</a><br>
+{/foreach}
+{if isset($U_ORIGINAL)}
+<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a>
+{/if}
+</div>
+{/strip}{/if}
+
+
+{strip}{if isset($U_SLIDESHOW_START)}
+	<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-slideshow"> </span><span class="pwg-button-text">{'slideshow'|@translate}</span>
+	</a>
+{/if}{/strip}
+{strip}{if isset($U_METADATA)}
+	<a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-camera-info"> </span><span class="pwg-button-text">{'Show file metadata'|@translate}</span>
+	</a>
+{/if}{/strip}
+{strip}{if isset($current.U_DOWNLOAD)}
+	<a href="{$current.U_DOWNLOAD}" title="{'Download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-save"> </span><span class="pwg-button-text">{'Download'|@translate}</span>
+	</a>
+{/if}{/strip}
+{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
+{strip}{if isset($favorite)}
+	<a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this photo from your favorites'|@translate}{else}{'add this photo to your favorites'|@translate}{/if}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-favorite-{if $favorite.IS_FAVORITE}del{else}add{/if}"> </span><span class="pwg-button-text">{'Favorites'|@translate}</span>
+	</a>
+{/if}{/strip}
+{strip}{if isset($U_SET_AS_REPRESENTATIVE)}
+	<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as album representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-representative"> </span><span class="pwg-button-text">{'representative'|@translate}</span>
+	</a>
+{/if}{/strip}
+{strip}{if isset($U_ADMIN)}
+	<a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-edit"> </span><span class="pwg-button-text">{'Edit'|@translate}</span>
+	</a>
+{/if}{/strip}
+{strip}{if isset($U_CADDIE)}{*caddie management BEGIN*}
+{footer_script}
+{literal}function addToCadie(aElement, rootUrl, id)
+{
+if (aElement.disabled) return;
+aElement.disabled=true;
+var y = new PwgWS(rootUrl);
+y.callService(
+	"pwg.caddie.add", {image_id: id} ,
+	{
+		onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
+		onSuccess: function(result) { aElement.disabled = false; }
+	}
+	);
+}{/literal}
+{/footer_script}
+	<a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL}', {$current.id}); return false;" title="{'Add to caddie'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+		<span class="pwg-icon pwg-icon-caddie-add"> </span><span class="pwg-button-text">{'Caddie'|@translate}</span>
+	</a>
+{/if}{/strip}{*caddie management END*}
+</div>
+
+	{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
+</div>{*<!-- imageToolBar -->*}
+
+<div id="theImageAndInfos">
+<div id="theImage">
+{$ELEMENT_CONTENT}
+
+{if isset($COMMENT_IMG)}
+<p class="imageComment">{$COMMENT_IMG}</p>
+{/if}
+
+{if isset($U_SLIDESHOW_STOP)}
+<p>
+	[ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|@translate}</a> ]
+</p>
+{/if}
+
+</div><!--
+
+--><div id="infoSwitcher"></div><!--
+--><div id="imageInfos">
+{if $DISPLAY_NAV_THUMB}
+	<div class="navThumbs">
+		{if isset($previous)}
+			<a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev">
+				<span class="thumbHover prevThumbHover">&nbsp;</span>
+				<img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE}">
+			</a>
+		{/if}
+		{if isset($next)}
+			<a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next">
+				<span class="thumbHover nextThumbHover">&nbsp;</span>
+				<img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE}">
+			</a>
+		{/if}
+	</div>
+{/if}
+
+<dl id="standard" class="infoTable">
+{strip}
+	{if $display_info.author}
+	<div id="Author">
+		<dt>{'Author'|@translate}</dt>
+		<dd>{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</dd>
+	</div>
+	{/if}
+	{if $display_info.created_on}
+	<div id="datecreate">
+		<dt>{'Created on'|@translate}</dt>
+		<dd>{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}</dd>
+	</div>
+	{/if}
+	{if $display_info.posted_on}
+	<div id="datepost">
+		<dt>{'Posted on'|@translate}</dt>
+		<dd>{$INFO_POSTED_DATE}</dd>
+	</div>
+	{/if}
+	{if $display_info.dimensions}
+	<div id="Dimensions">
+		<dt>{'Dimensions'|@translate}</dt>
+		<dd>{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</dd>
+	</div>
+	{/if}
+	{if $display_info.file}
+	<div id="File">
+		<dt>{'File'|@translate}</dt>
+		<dd>{$INFO_FILE}</dd>
+	</div>
+	{/if}
+	{if $display_info.filesize}
+	<div id="Filesize">
+		<dt>{'Filesize'|@translate}</dt>
+		<dd>{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</dd>
+	</div>
+	{/if}
+	{if $display_info.tags }
+	<div id="Tags">
+		<dt>{'Tags'|@translate}</dt>
+		<dd>
+			{if isset($related_tags)}
+				{foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}<a href="{$tag.URL}">{$tag.name}</a>{/foreach}
+			{else}&nbsp;
+			{/if}
+		</dd>
+	</div>
+	{/if}
+	{if $display_info.categories}
+<!--	<div id="Categories">-->
+		<dt>{'Albums'|@translate}</dt>
+		<dd>
+			{if isset($related_categories)}
+			<ul>
+				{foreach from=$related_categories item=cat}
+				<li>{$cat}</li>
+				{/foreach}
+			</ul>
+			{/if}
+		</dd>
+<!--	</div>-->
+	{/if}
+	{if $display_info.visits}
+	<div id="Visits">
+		<dt>{'Visits'|@translate}</dt>
+		<dd>{$INFO_VISITS}</dd>
+	</div>
+	{/if}
+
+{if $display_info.rating_score and isset($rate_summary)}
+	<div id="Average">
+		<dt>{'Rating score'|@translate}</dt>
+		<dd>
+		{if $rate_summary.count}
+			<span id="ratingScore">{$rate_summary.score}</span> <span id="ratingCount">({assign var='rate_text' value='%d rates'|@translate}{$pwg->sprintf($rate_text, $rate_summary.count)})</span>
+		{else}
+			<span id="ratingScore">{'no rate'|@translate}</span> <span id="ratingCount"></span>
+		{/if}
+		</dd>
+	</div>
+{/if}
+
+{if isset($rating)}
+	<div id="rating">
+		<dt>
+			<span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if}</span>
+		</dt>
+		<dd>
+			<form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;">
+			<div>
+			{foreach from=$rating.marks item=mark name=rate_loop}
+			{if isset($rating.USER_RATE) && $mark==$rating.USER_RATE}
+				<input type="button" name="rate" value="{$mark}" class="rateButtonSelected" title="{$mark}">
+			{else}
+				<input type="submit" name="rate" value="{$mark}" class="rateButton" title="{$mark}">
+			{/if}
+			{/foreach}
+			{strip}{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
+			{combine_script id='rating' load='async' require='core.scripts' path='themes/default/js/rating.js'}
+			{footer_script}
+				var _pwgRatingAutoQueue = _pwgRatingAutoQueue||[];
+				_pwgRatingAutoQueue.push( {ldelim}rootUrl: '{$ROOT_URL}', image_id: {$current.id},
+					onSuccess : function(rating) {ldelim}
+						var e = document.getElementById("updateRate");
+						if (e) e.innerHTML = "{'Update your rating'|@translate|@escape:'javascript'}";
+						e = document.getElementById("ratingScore");
+						if (e) e.innerHTML = rating.score;
+						e = document.getElementById("ratingCount");
+						if (e) e.innerHTML = "({'%d rates'|@translate|@escape:'javascript'})".replace( "%d", rating.count);
+					{rdelim}{rdelim} );
+			{/footer_script}
+			{/strip}
+			</div>
+			</form>
+		</dd>
+	</div>
+{/if}
+
+{if $display_info.privacy_level and isset($available_permission_levels)}
+	<div id="Privacy">
+		<dt><a id="privacyLevelLink" href="javascript:togglePrivacyLevelBox()">{'Who can see this photo?'|@translate}</a></dt>
+		<dd>
+{combine_script id='core.scripts' require='jquery' load='async' path='themes/default/js/scripts.js'}
+{footer_script}
+{literal}function setPrivacyLevel(rootUrl, id, level)
+{
+var y = new PwgWS(rootUrl);
+y.callService(
+	"pwg.images.setPrivacyLevel", {image_id: id, level:level} ,
+	{
+		method: "POST",
+		onFailure: function(num, text) { alert(num + " " + text); },
+		onSuccess: function(result) {
+			  jQuery('.levelCheck').hide();
+			  jQuery('#levelCheck'+level).show();
+			  jQuery('#privacyLevelBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected');
+			  jQuery('#switchLevel'+level).addClass('switchSelected').removeClass('switchUnselected');
+		}
+	}
+	);
+}
+function togglePrivacyLevelBox()
+{
+	var elt = document.getElementById("privacyLevelBox"),
+		ePos = document.getElementById("privacyLevelLink");
+	if (elt.style.display == "none")
+	{
+		elt.style.position = "absolute";
+		elt.style.left = (ePos.offsetLeft)+"px";
+		elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
+		elt.style.display="";
+	}
+	else
+		elt.style.display="none";
+}
+{/literal}
+{/footer_script}
+	
+			<div id="privacyLevelBox" class="switchBox" onclick="togglePrivacyLevelBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||togglePrivacyLevelBox()">
+				{foreach from=$available_permission_levels item=label key=level}
+					<span id="levelCheck{$level}" class="levelCheck switchCheck" {if $level != $current.level}style="display:none;"{/if}>&#x2714; </span>
+					<a id="switchLevel{$level}" {if $level == $current.level}class="switchSelected"{else}class="switchUnselected"{/if} href="javascript:setPrivacyLevel('{$ROOT_URL}', {$current.id}, {$level})">{$label}</a><br>
+				{/foreach}
+			</div>
+
+		</dd>
+	</div>
+{/if}
+{/strip}
+</dl>
+
+{if isset($metadata)}
+<dl id="Metadata" class="infoTable2">
+{foreach from=$metadata item=meta}
+	<h3>{$meta.TITLE}</h3>
+	{foreach from=$meta.lines item=value key=label}
+		<dt>{$label}</dt>
+		<dd>{$value}</dd>
+	{/foreach}
+{/foreach}
+</dl>
+{/if}
+</div>
+</div>
+
+{if isset($COMMENT_COUNT)}
+<div id="comments" {if (!isset($comment_add) && ($COMMENT_COUNT == 0))}class="noCommentContent"{else}class="commentContent"{/if}><div id="commentsSwitcher"></div>
+	{if $COMMENT_COUNT > 0}
+		<h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
+		{if $COMMENT_COUNT > 2}
+			<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a>
+		{/if}
+	{else}
+		<h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
+	{/if}
+	{if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+
+	{if isset($comments)}
+		{include file='comment_list.tpl'}
+	{/if}
+
+	{if isset($comment_add)}
+	<form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment">
+	<fieldset>
+		<legend>{'Add a comment'|@translate}</legend>
+		{if $comment_add.SHOW_AUTHOR}
+		<label>{'Author'|@translate}<input type="text" name="author"></label>
+		{/if}
+		<label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label>
+		<input type="hidden" name="key" value="{$comment_add.KEY}">
+		<input type="submit" value="{'Submit'|@translate}">
+	</fieldset>
+	</form>
+	{/if}
+</div>
+{/if}{*comments*}
+
+{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if}
+
+</div>
--- a/theme.css
+++ b/theme.css
@@ -1,183 +1,237 @@
-/* colors & backgrounds */
+/* backgorunds */

-html, body {background-color:#111;}
+html, body									{ background-color: #111;}

-body {margin: 5px 0;}
+#content, .content 							{ background-color: #222;}
+.content .titrePage 							{ background-color: #111;}

-a:hover {border-bottom:none;}
+#menubar, #the_page #menuSwitcher.menuhidden	{ background-color: #222;}

-#menuswitcher {
-	display:block;
-	font-size:200%;
-	text-align:center;
-	float:left;
-	height:33px;
-	cursor:pointer;
-	margin: 28px 0 0 -35px;
-}
+#thePicturePage, #imageHeaderBar			{ background-color: #111;}
+#imageInfos, #infoSwitcher.infohidden 		{ background-color: #333;}
+#thePicturePage #comments 					{ background-color: #333;}

-#menubar,
-#menuswitcher.menuhidden {
-	border-radius : 0 10px 10px 0;
-	background-color: #222;
-	border: solid 1px #333;
-	border-width: 2px 2px 2px 0;
-}
+.switchBox, .header_notes 					{ background-color: #555;}
+.thumbnailCategory, .commentElement 			{ background-color: #333;}
+.message									{ background-color: #666;}
+
+INPUT[type="text"], INPUT[type="password"],
+INPUT[type="button"], INPUT[type="submit"],
+INPUT[type="reset"], INPUT[type="file"]		{ background-color: #999;}
+INPUT:focus, SELECT:focus, TEXTAREA:focus	{ background-color: #ccc;}
+
+
+/* font colors */
+
+body, legend									{ color: #aaa;}
+a											{ color: #ccc;}
+a:hover 										{ color: #fff;}
+INPUT.rateButton							{ color: #fff;}
+H1, H3, INPUT.rateButtonSelected 			{ color: #ccc;}
+.message									{ color: #fff;}
+.commentContent .comments_toggle:hover		{ color: #fff;}
+
+
+/* borders */
+
+#content,.content, .content .titrePage		{ border-bottom: 2px solid #444;}
+#imageHeaderBar 								{ border: solid 0 #444; border-bottom-width:2px;}
+#copyright								 	{ border-top-width:2px;}
+.switchBox 									{ border: 1px solid #000;}
+.switchBoxTitle 								{ border-bottom: 1px solid #444;}
+FIELDSET, INPUT, SELECT, TEXTAREA 			{ border: 1px solid #999;}
+
+
+/* icons */ 
+
+.pwg-icon									{ background-image: url(../default/s26/outline_808080.png);}
+A:hover .pwg-icon 							{ background-image: url(../default/s26/outline_ffffff.png);}
+
+
+/* general rules */
+
+body 		{ margin: 5px 0;}
+a:hover 		{ border-bottom: none;}
+#copyright	{ padding:0 4px 0 0; text-align:right;}

-#menuswitcher.menuhidden {
-	width:25px;
-	margin-left:0;
-}

 /* content */

-#content.menushown, #the_page > .content.menushown { margin-left:240px;}
-#content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;}
-#content, #the_page > .content { margin-right:0;}
-
-#content,.content {
-	background-color: #222;
-	border-bottom: 2px solid #444;
-	margin-bottom: 4px;
-	padding-bottom: 4px;
-}
-
-#thePicturePage #content {padding-bottom:0;}
-
-.content .titrePage {
-	background-color: #111;
-	border-bottom: 2px solid #444;
-	padding:0;
-	margin-bottom:4px;
-}
-
-.content .titrePage H2 {
-	line-height: 20px;
-	margin: 0;
-	padding: 8px 0 0 2px;
-}
-
-
-body { color: #999;}
-a { color: #ccc;}
-a:hover { color: #fff;}
+#the_page  #content.menushown, #the_page > .content.menushown, .contentWithMenu 	{ margin-left: 240px;}
+#the_page  #content.menuhidden, #the_page > .content.menuhidden 					{ margin-left: 35px;}
+#the_page  #content, #the_page > .content											{ margin-right: 0;}

+#content,.content 			{ margin-bottom: 4px; padding-bottom: 4px;}
+#thePicturePage #content 	{ padding-bottom: 0;}
+.content .titrePage 			{ padding:0; margin-bottom:4px;}
+.content .titrePage H2 		{ line-height: 20px; margin: 0; padding: 8px 0 0 2px;}


 /* menubar */

-#menubar {
-	float: left;
-	margin: 28px 13px 10px 0;
-	padding: 0;
+#menubar  {
 	display: inline;
-	width: 225px;
+	width: 230px;
+	float: left;
+	margin: 28px 8px 10px 0;
+	padding: 0;
 }
-
-#menubar DT { color: #999; text-align:left;}
-#menubar DT a { color: #ccc;}
-#menubar DT a:hover { color: #fff;}
-#menubar dd { padding: 0 0 1em 1em;}
-
-/* text color */
-BODY, H1, H3,
-INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
-	color:#d0d0d0;
-}
-
-#menubar .pwg-icon-filter {display:none;}
+#menubar DT				{ text-align: left;}
+#menubar dd 				{ padding: 0 0 1em 1em;}
+#menubar .pwg-icon-filter { display: none;}


+/* switchers */

-
-/* backgrounds */
-
-
-#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
-	background-color: #505050;
-}
-
-#imageHeaderBar H2 {
-	background-image: none;
-}
-
-#imageHeaderBar {
-	border-top: 1px solid #000;
-}
-
-/* borders */
-#derivativeSwitchBox, #sortOrderBox {
-	border: 2px solid #444;
-}
-
-.switchBoxTitle {
-  border-bottom:2px solid #444;
-}
-
-.derivativeSizeDetails {display:none}
-
-FIELDSET, INPUT, SELECT, TEXTAREA {
-	border: 1px solid gray;
+#menuSwitcher {
+	display: block;
+	text-align: center;
+	height: 32px;
+	cursor: pointer;
+	float: left;
+	margin: 28px 0 0 -34px;
 }


-.thumbnails IMG {margin-bottom:0; vertical-align:middle;}
-.thumbnailCategory DIV.illustration, .commentElement DIV.illustration {margin: 2px; text-align:center;}
+#imageInfos, #infoSwitcher.infohidden 		{ border-radius: 10px 0 0 10px;}
+#menubar, #the_page #menuSwitcher.menuhidden	{ border-radius: 0 10px 10px 0;}
+#the_page #menuSwitcher.menuhidden 			{ width: 25px; margin-left: 0;}
+
+#infoSwitcher {
+	display: block;
+	text-align: center;
+	height: 32px;
+	cursor: pointer;
+	position:absolute;
+	left:75%;
+	top:0;
+	margin: 10px 0 0 7px;
+	z-index:99;
+}
+
+#infoSwitcher.infohidden {
+	width:25px;
+	top:10px;
+	right:0;
+	left:auto;
+	margin:0;
+}
+
+#theImage.infohidden 		{ width: 100%;}
+
+#commentsSwitcher 					{ float: left; margin:3px 0; cursor:pointer;}
+.noCommentContent #commentsSwitcher	{ display: none;}
+
+.switchArrow				{ width: 16px; height: 16px; margin: 8px 5px 8px 4px;}
+.switchArrow				{ background: transparent url("icon/arrows_ccc.png");}
+.switchArrow:hover 			{ background: transparent url("icon/arrows_fff.png");}
+.menuhidden .switchArrow		{ background-position: 0 0;}
+.menushown   .switchArrow		{ background-position: -16px 0;}
+.infohidden .switchArrow		{ background-position: -16px 0;}
+.infoshown   .switchArrow		{ background-position: 0 0;}
+.commentshidden .switchArrow	{ background-position: -48px 0;}
+.commentsshown   .switchArrow	{ background-position: -32px 0;}
+
+
+/* switchboxes */
+
+.switchBox {
+    border-radius: 4px 4px 4px 4px;
+    padding: 0.5em 10px;
+    text-align: left;
+    z-index: 100;
+}
+.switchBox .switchCheck 				{ width: 18px; text-align: left; display: inline-block; line-height:17px;}
+.switchBox .switchUnselected 		{ margin-left: 18px; line-height:17px;}
+
+
+/* thumbnails */
+
+#thumbnails  						{ padding-top: 5px;}
+.thumbnails IMG 						{ margin-bottom: 0; vertical-align: middle;}
+.thumbnailCategory DIV.illustration,
+.commentElement DIV.illustration 		{ margin: 2px; text-align: center;}
+

 /* picture page */
-#thePicturePage {background-color:#111;}
-#imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;}
-.contentWithMenu #imageHeaderBar {padding:0;}
-#copyright {border-top-width:2px;}
-#imageHeaderBar {border-bottom-width:2px; width:auto; background:#111}
-#imageToolBar 	{background:none;}
-#imageToolBar {margin-top: -28px; margin-bottom:0;}
-#theImage {padding-top:10px;}
-#imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;}
-#imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;}
-#imageHeaderBar .imageNumber:before {content:'['}
-#imageHeaderBar .imageNumber:after {content:']'}
-#imageHeaderBar h2 {font-size:100%;}
-#thePicturePage .pwg-button {width:26px;}
-#thePicturePage .actionButtons {margin-right: 26px;}
-#imageToolBar {float:right;}

-#thePicturePage #comments {padding-top:12px; padding-bottom:12px;}
-#thePicturePage #comments h3 {margin-top:10px; margin-bottom:10px;}
-#thePicturePage #comments form { margin-bottom:10px;}
-#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;}
-.noCommentText {display:block;}
-#copyright {padding:4px 4px 0 0; text-align:right;}
+.contentWithMenu #imageHeaderBar 	{ padding: 0;}
+#imageHeaderBar 						{ padding: 0 0 0 10px;}
+#imageHeaderBar 						{ width: auto;}
+#imageHeaderBar h2 					{ font-size: 100%; font-weight: inherit;}
+#imageHeaderBar .browsePath {
+	display:inline-block;
+	float:none;
+	font-size:120%;
+	line-height:20px;
+	padding: 8px 0 0 2px;
+	font-weight:bold;
+	margin:0;
+}
+.imageNumber 						{ display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;}
+#imageToolBar 						{ margin-top: -28px; margin-bottom: 0; float: right;}
+#thePicturePage .pwg-button 			{ width: 26px;}
+#thePicturePage .actionButtons 		{ margin-right: 26px;}

-#thePicturePage .comments_toggle_on:before {content:'(+) '}
-#thePicturePage .comments_toggle_off:before {content:'(-) '}
-
-.comments_hidden ul, .comments_hidden form {display:none;}
-.thumbnailCategory, .commentElement {background-color: #333;}
-.comments_toggle {cursor: pointer;}
-.comments_toggle:hover {color:#fff;}
-
-#the_page .content .stuffs {margin:0!important}
-
-#thumbnails  {padding-top: 5px;}
-
-INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;}
-INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;}
-
-/* links */
-INPUT.rateButton {
-	color: #fff;
+#theImageAndInfos {
+	display: block;
+	width: 100%;
+	position: relative;
+}
+#theImage {
+	display: inline-block;
+	width: 75%;
+	vertical-align: top;
+	overflow: auto;
+	padding: 10px 0 5px 0;
 }

-.pwg-icon {
-	background-image: url(../default/s26/outline_808080.png);
+.rateButtonStarFull 					{ background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;}
+.rateButtonStarEmpty 				{ background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;}
+
+
+/* image infos */
+
+#imageInfos {
+	display: inline-block;
+	width: 24.5%;
+	vertical-align: top;
+	padding-top: 35px;
+	padding-bottom: 5px;
+	margin: 10px 0 10px 0.5%;
+	word-wrap:break-word;
 }

-A:hover .pwg-icon {
-	background-image: url(../default/s26/outline_ffffff.png);
-}
+#imageInfos .navThumbs 				{ width: 250px; height: 130px; margin: auto; padding: 0 5px;}
+#imageInfos .navThumb 				{ position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;}
+#imageInfos #linkPrev 				{ float: left;}
+#imageInfos #linkNext				{ float: right;} 
+#imageInfos .thumbHover 				{ position: absolute; width: 100%; height: 100%;}
+#imageInfos .prevThumbHover 			{ background: transparent url(icon/none.png) no-repeat center center;}
+#imageInfos .prevThumbHover:hover 	{ background: transparent url(icon/img_prev.png) no-repeat center center;}
+#imageInfos .nextThumbHover 			{ background: transparent url(icon/none.png) no-repeat center center;}
+#imageInfos .nextThumbHover:hover 	{ background: transparent url(icon/img_next.png) no-repeat center center;}

-.message {
-  color:white;
-  background-color:#666;
-}
+#imageInfos dl 						{ padding: 0 15px;}
+#imageInfos dt 						{ font-weight: bold;}
+#imageInfos dd						{ margin: 0 0 5px 20px;}
+#imageInfos h3						{ margin: 20px 0 10px;}
+
+
+/* image comments */
+
+#thePicturePage #comments 			{ padding: 2px 5px;}
+#thePicturePage #comments h3 			{ margin: 10px 0;}
+#thePicturePage #comments form 		{ margin-bottom: 10px;}
+#thePicturePage #comments fieldset		{ margin: 0 1em;}
+
+.noCommentText						{ display:block;}
+.commentshidden ul,
+.commentshidden form 					{display:none;}
+.commentContent .comments_toggle 	{cursor: pointer;}
+
+
+/* plugins */
+
+#the_page .content .stuffs 		{ margin: 0!important}
+.categoryActions .theme_menuf 	{ display: none;}