bug:2848

jquery.mobile updated
photoswipe updated
menubar is now a right panel, with almost all the usual links
added comment, search, picture, about and tags pages

ToDo:
*bug correction of the link added to the photoswipe toolbar (link doesn't triggered)
*display the calculated size on the picture page
limitations: no calendar view

git-svn-id: http://piwigo.org/svn/trunk@23713 68402e56-0260-453c-a942-63ccdbb3a9ee

22 files changed, 493 insertions, 40 deletions

diff --git a/themes/smartpocket/template/about.tpl b/themes/smartpocket/template/about.tpl
new file mode 100644
index 000000000..847330d0f
--- /dev/null
+++ b/themes/smartpocket/template/about.tpl
@@ -0,0 +1,15 @@
+{include file='infos_errors.tpl'}
+<div data-role="content">
+  <ul data-role="listview" data-inset="true">
+    <li data-role="list-divider">{'About'|@translate}</li>
+    <li>{$ABOUT_MESSAGE}</li>
+    {if isset($THEME_ABOUT) }
+    <li>{$THEME_ABOUT}</li>
+    {/if}
+    {if not empty($about_msgs)}
+    {foreach from=$about_msgs item=elt}
+    <li>{$elt}</li>
+    {/foreach}
+    {/if}
+  </ul>
+</div>
diff --git a/themes/smartpocket/template/add_menu_on_public_pages.tpl b/themes/smartpocket/template/add_menu_on_public_pages.tpl
new file mode 100644
index 000000000..7a44575d2
--- /dev/null
+++ b/themes/smartpocket/template/add_menu_on_public_pages.tpl
@@ -0,0 +1,3 @@
+<div data-role="panel" id="menubar" data-position="right" data-display="overlay">

+  {$MENUBAR}

+</div>{assign var='MENUBAR' value=''}
\ No newline at end of file
diff --git a/themes/smartpocket/template/comment_list.tpl b/themes/smartpocket/template/comment_list.tpl
new file mode 100644
index 000000000..1434939bf
--- /dev/null
+++ b/themes/smartpocket/template/comment_list.tpl
@@ -0,0 +1,12 @@
+<ul data-role="listview" data-inset="true">
+  <li data-role="list-divider">{'User comments'|@translate}</li>
+{foreach from=$comments item=comment name=comment_loop}
+	<li>
+		{if !isset($from) or $from!="picture"}<a href="{$comment.U_PICTURE}">
+		<img src="{$pwg->derivative_url($thumbnail_derivative_params, $comment.src_image)}">{/if}
+    <h3>{$comment.AUTHOR}</h3>
+    <p>{$comment.CONTENT}</p>
+		{if !isset($from) or $from!="comment"}</a>{/if}
+  </li>
+{/foreach}
+</ul>
diff --git a/themes/smartpocket/template/comments.tpl b/themes/smartpocket/template/comments.tpl
new file mode 100644
index 000000000..82e772051
--- /dev/null
+++ b/themes/smartpocket/template/comments.tpl
@@ -0,0 +1,78 @@
+{include file='infos_errors.tpl'}
+<div data-role="content">
+{**{if isset($MENUBAR)}{$MENUBAR}{/if}
+<div id="content" class="content{if isset($MENUBAR)} contentWithMenu{/if}">
+
+<div class="titrePage">
+	<ul class="categoryActions">
+	</ul>
+	<h2><a href="{$U_HOME}">{'Home'|@translate}</a>{$LEVEL_SEPARATOR}{'User comments'|@translate}</h2>
+</div>
+
+{include file='infos_errors.tpl'}
+
+<form class="filter" action="{$F_ACTION}" method="get">
+
+  <fieldset>
+    <legend>{'Filter'|@translate}</legend>
+
+    <label>{'Keyword'|@translate}<input type="text" name="keyword" value="{$F_KEYWORD}"></label>
+
+    <label>{'Author'|@translate}<input type="text" name="author" value="{$F_AUTHOR}"></label>
+
+    <label>
+      {'Album'|@translate}
+      <select name="cat">
+        <option value="0">------------</option>
+        {html_options options=$categories selected=$categories_selected}
+      </select>
+    </label>
+
+    <label>
+      {'Since'|@translate}
+      <select name="since">
+        {html_options options=$since_options selected=$since_options_selected}
+      </select>
+    </label>
+
+  </fieldset>
+
+  <fieldset>
+
+    <legend>{'Display'|@translate}</legend>
+
+    <label>
+      {'Sort by'|@translate}
+      <select name="sort_by">
+        {html_options options=$sort_by_options selected=$sort_by_options_selected}
+      </select>
+    </label>
+
+    <label>
+      {'Sort order'|@translate}
+      <select name="sort_order">
+        {html_options options=$sort_order_options selected=$sort_order_options_selected}
+      </select>
+    </label>
+
+    <label>
+      {'Number of items'|@translate}
+      <select name="items_number">
+        {html_options options=$item_number_options selected=$item_number_options_selected}
+      </select>
+    </label>
+
+  </fieldset>
+
+  <p><input type="submit" value="{'Filter and display'|@translate}"></p>
+
+</form>
+
+{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}**}
+
+{if isset($comments)}
+	{include file='comment_list.tpl' comment_derivative_params=$derivative_params}
+{/if}
+
+</div> <!-- content -->
+
diff --git a/themes/smartpocket/template/footer.tpl b/themes/smartpocket/template/footer.tpl
index 27f3190c1..2ceefecf9 100644
--- a/themes/smartpocket/template/footer.tpl
+++ b/themes/smartpocket/template/footer.tpl
@@ -1,7 +1,9 @@
 {if !empty($thumb_navbar)}

 {include file='navigation_bar.tpl'|@get_extent:'navbar' navbar=$thumb_navbar}

+{elseif !empty($navbar) and !isset($ELEMENT_CONTENT)}

+{include file='navigation_bar.tpl'|@get_extent:'navbar'}

 {else}

-<div class="pwg_footer ui-bar-a">

+<div data-role="footer" class="pwg_footer">

   <h6>

 	{'Powered by'|@translate}	<a href="{$PHPWG_URL}" class="Piwigo">Piwigo</a>

 	{$VERSION}

diff --git a/themes/smartpocket/template/header.tpl b/themes/smartpocket/template/header.tpl
index 2723ad29e..8df97c3b3 100644
--- a/themes/smartpocket/template/header.tpl
+++ b/themes/smartpocket/template/header.tpl
@@ -38,7 +38,6 @@
 

 {get_combined_scripts load='header'}

 

-{combine_script id='jquery' path='themes/smartpocket/js/jquery-1.6.4.min.js'}

 {combine_script id='config' path='themes/smartpocket/js/config.js' require='jquery'}

 {combine_script id='jquery.mobile' path='themes/smartpocket/js/jquery.mobile.min.js' require='jquery,config'}

 

@@ -46,12 +45,14 @@
 

 <body>

 <div data-role="page" data-theme="a">

-

+{if isset($MENUBAR)}<div data-role="panel" id="menubar" data-position="right" data-display="overlay">

+  {$MENUBAR}

+</div>{/if}

 <div data-role="header">

   <div class="title">

     <a href="{$U_HOME}" class="home_button" data-icon="home" data-iconpos="notext" data-role="button"></a>

     {$GALLERY_TITLE}

-    <span class="menubar">{$MENUBAR}</span>

+    <a href="#menubar" data-icon="grid" data-iconpos="notext" data-role="button" style="float: right" >Menu</a>

   </div>

 </div>

 

diff --git a/themes/smartpocket/template/index.tpl b/themes/smartpocket/template/index.tpl
index 6793bc493..4e3159396 100644
--- a/themes/smartpocket/template/index.tpl
+++ b/themes/smartpocket/template/index.tpl
@@ -1,5 +1,11 @@
-<div data-role="content" data-theme="a">

+<div data-role="content">

 {if !empty($CATEGORIES)}{$CATEGORIES}{/if}

 {if !empty($THUMBNAILS)}{$THUMBNAILS}{/if}

+{if !empty($CONTENT_DESCRIPTION)}

+<div class="additional_info">

+	{$CONTENT_DESCRIPTION}

+</div>

+{/if}

+{if !empty($CONTENT)}{$CONTENT}{/if}

 </div>

 

diff --git a/themes/smartpocket/template/menubar.tpl b/themes/smartpocket/template/menubar.tpl
index 734ede2da..19b6b5481 100644
--- a/themes/smartpocket/template/menubar.tpl
+++ b/themes/smartpocket/template/menubar.tpl
@@ -1,33 +1,15 @@
-<select name="identification" id="identification" data-icon="grid" data-iconpos="notext" data-native-menu="false">
-
-  <option></option>
-  <optgroup label="{'Identification'|@translate}">
-
-	{if isset($U_REGISTER)}
-	<option value="{$U_REGISTER}">{'Register'|@translate}</option>
-	{/if}
-	{if isset($U_LOGIN)}
-	<option value="{$U_LOGIN}">{'Login'|@translate}</option>
-	{/if}
-	{if isset($U_LOGOUT)}
-	<option value="{$U_LOGOUT}">{'Logout'|@translate}</option>
-	{/if}
-	{if isset($U_PROFILE)}
-	<option value="{$U_PROFILE}">{'Customize'|@translate}</option>
-	{/if}
-	{if isset($U_ADMIN)}
-	<option value="{$U_ADMIN}">{'Administration'|@translate}</option>
-	{/if}
-
-  </optgroup>
-
-</select>
-
-{footer_script}{literal}
-$(document).ready(function() {
-  $('#identification').change(function() {
-    $(this).selectmenu('close');
-    window.location = this.value;
-  });
-});
-{/literal}{/footer_script}
+{if !empty($blocks) }
+<ul data-role="listview">
+  <li data-icon="delete"><a href="#menubar" data-rel="close">Close</a></li>
+</ul>
+	{foreach from=$blocks key=id item=block}
+		<div data-role="collapsible" data-inset="false" data-icon="false">
+		{if not empty($block->template)}
+		{include file=$block->template assign=the_block|@get_extent:$id}
+    {$the_block|replace:'dt':'h3'|replace:'<dd>':''|replace:'</dd>':''}
+		{else}
+		{$block->raw_content|replace:'dt':'h3'|replace:'<dd>':''|replace:'</dd>':''}
+		{/if}
+    </div>
+	{/foreach}
+{/if}
\ No newline at end of file
diff --git a/themes/smartpocket/template/menubar_categories.tpl b/themes/smartpocket/template/menubar_categories.tpl
new file mode 100644
index 000000000..1fc4332f6
--- /dev/null
+++ b/themes/smartpocket/template/menubar_categories.tpl
@@ -0,0 +1,8 @@
+<h3>{'Albums'|@translate}</h3>
+<ul data-role="listview">
+{foreach from=$block->data.MENU_CATEGORIES item=cat}
+  <li><a href="{$cat.URL}" {if $cat.IS_UPPERCAT}rel="up"{/if} title="{$cat.TITLE}">{$cat.NAME}</a>
+  {if $cat.count_images > 0}<span class="ui-li-count">{$cat.count_images}</span>{/if}
+  </li>
+{/foreach}
+</ul>
diff --git a/themes/smartpocket/template/menubar_identification.tpl b/themes/smartpocket/template/menubar_identification.tpl
new file mode 100644
index 000000000..47539c8bf
--- /dev/null
+++ b/themes/smartpocket/template/menubar_identification.tpl
@@ -0,0 +1,8 @@
+<h3>{'Identification'|@translate}</h3>
+<ul data-role="listview">
+  {if isset($U_REGISTER)}<li><a href="{$U_REGISTER}">{'Register'|@translate}</a></li>{/if}
+  {if isset($U_LOGIN)}<li><a href="{$U_LOGIN}">{'Logout'|@translate}</a></li>{/if}
+  {if isset($U_LOGOUT)}<li><a href="{$U_LOGOUT}">{'Logout'|@translate}</a></li>{/if}
+  {if isset($U_PROFILE)}<li><a href="{$U_PROFILE}">{'Customize'|@translate}</a></li>{/if}
+  {if isset($U_ADMIN)}<li><a href="{$U_ADMIN}">{'Administration'|@translate}</a></li>{/if}
+</ul>
diff --git a/themes/smartpocket/template/menubar_links.tpl b/themes/smartpocket/template/menubar_links.tpl
new file mode 100644
index 000000000..6bd110032
--- /dev/null
+++ b/themes/smartpocket/template/menubar_links.tpl
@@ -0,0 +1,11 @@
+<h3>{'Links'|@translate}</h3>
+<ul data-role="listview">{strip}
+		{foreach from=$block->data item=link}
+			<li>
+				<a href="{$link.URL}" class="external"{if isset($link.new_window)} onclick="window.open(this.href, '{$link.new_window.NAME}','{$link.new_window.FEATURES}'); return false;"{/if}>
+				{$link.LABEL}
+				</a>
+			</li>
+		{/foreach}
+	{/strip}
+</ul>
diff --git a/themes/smartpocket/template/menubar_menu.tpl b/themes/smartpocket/template/menubar_menu.tpl
new file mode 100644
index 000000000..a45c5e0c0
--- /dev/null
+++ b/themes/smartpocket/template/menubar_menu.tpl
@@ -0,0 +1,8 @@
+<h3>{'Menu'|@translate}</h3>
+<ul data-role="listview">
+  {foreach from=$block->data item=link}
+		{if is_array($link)}
+			<li><a href="{$link.URL}" title="{$link.TITLE}"{if isset($link.REL)} {$link.REL}{/if}>{$link.NAME}</a>{if isset($link.COUNTER)}<span class="ui-li-count">{$link.COUNTER}</span>{/if}</li>
+		{/if}
+	{/foreach}
+</ul>
\ No newline at end of file
diff --git a/themes/smartpocket/template/menubar_specials.tpl b/themes/smartpocket/template/menubar_specials.tpl
new file mode 100644
index 000000000..21bf18a7b
--- /dev/null
+++ b/themes/smartpocket/template/menubar_specials.tpl
@@ -0,0 +1,8 @@
+<h3>{'Specials'|@translate}</h3>
+<ul data-role="listview">
+		{foreach $block->data as $key=>$link}
+    {if in_array($key, array("favorites","most_visited","best_rated","recent_pics","recent_cats","random")) }
+		<li><a href="{$link.URL}" title="{$link.TITLE}"{if isset($link.REL)} {$link.REL}{/if}>{$link.NAME}</a></li>
+    {/if}
+		{/foreach}
+</ul>
diff --git a/themes/smartpocket/template/menubar_tags.tpl b/themes/smartpocket/template/menubar_tags.tpl
new file mode 100644
index 000000000..3f9680054
--- /dev/null
+++ b/themes/smartpocket/template/menubar_tags.tpl
@@ -0,0 +1,12 @@
+<h3>{'Related tags'|@translate}</h3>
+<ul data-role="listview">
+  {foreach from=$block->data item=tag}
+		<li><a class="tagLevel{$tag.level}" href=
+			{if isset($tag.U_ADD)}
+				"{$tag.U_ADD}" title="{$tag.counter|@translate_dec:'%d photo is also linked to current tags':'%d photos are also linked to current tags'}" rel="nofollow">+
+			{else}
+				"{$tag.URL}" title="{'display photos linked to this tag'|@translate}">
+			{/if}
+				{$tag.name}</a></li>
+		{/foreach}
+</ul>
diff --git a/themes/smartpocket/template/navigation_bar.tpl b/themes/smartpocket/template/navigation_bar.tpl
index 2dfbbe950..5347f6847 100644
--- a/themes/smartpocket/template/navigation_bar.tpl
+++ b/themes/smartpocket/template/navigation_bar.tpl
@@ -1,5 +1,5 @@
 {capture}{$navbar.pages|@end}{/capture}
-<div class="ui-bar ui-bar-a" style="text-align:center;">
+<div data-role="footer" class="ui-bar ui-bar-a" style="text-align:center;">
 <div data-role="controlgroup" data-type="horizontal">
 {strip}
   {if isset($navbar.URL_PREV)}
diff --git a/themes/smartpocket/template/notification.tpl b/themes/smartpocket/template/notification.tpl
new file mode 100644
index 000000000..b38aac8e6
--- /dev/null
+++ b/themes/smartpocket/template/notification.tpl
@@ -0,0 +1,13 @@
+{html_head} 
+<link rel="alternate" type="application/rss+xml" title="{'Photos only RSS feed'|@translate}" href="{$U_FEED_IMAGE_ONLY}"> 
+<link rel="alternate" type="application/rss+xml" title="{'Complete RSS feed (photos, comments)'|@translate}" href="{$U_FEED}"> 
+{/html_head}
+{include file='infos_errors.tpl'}
+<div data-role="content">
+  <ul data-role="listview" data-inset="true">
+    <li data-role="list-divider">{'Notification'|@translate}</li>
+    <li>{'The RSS notification feed provides notification on news from this website : new photos, updated albums, new comments. Use a RSS feed reader.'|@translate}</li>
+    <li><a href="{$U_FEED_IMAGE_ONLY}">{'Photos only RSS feed'|@translate}</a></li>
+    <li><a href="{$U_FEED}">{'Complete RSS feed (photos, comments)'|@translate}</a></li>
+  </ul>
+</div>
diff --git a/themes/smartpocket/template/picture.tpl b/themes/smartpocket/template/picture.tpl
new file mode 100644
index 000000000..d37c9b0fb
--- /dev/null
+++ b/themes/smartpocket/template/picture.tpl
@@ -0,0 +1,175 @@
+{if isset($errors) or not empty($infos)}
+{include file='infos_errors.tpl'}
+{/if}
+<div data-role="content">
+<ul data-role="listview" data-inset="true">
+	<li data-role="list-divider">{$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span>{$current.TITLE}</li>
+</ul>
+{$ELEMENT_CONTENT}
+
+{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
+
+{if isset($COMMENT_IMG)}
+<p class="imageComment">{$COMMENT_IMG}</p>
+{/if}
+
+<ul data-role="listview" data-inset="true" id="PictureInfo">
+{strip}
+	{if $display_info.author and isset($INFO_AUTHOR)}
+	<li id="Author" class="imageInfo">
+		<dt>{'Author'|@translate}</dt>
+		<dd>{$INFO_AUTHOR}</dd>
+	</li>
+	{/if}
+	{if $display_info.created_on and isset($INFO_CREATION_DATE)}
+	<li id="datecreate" class="imageInfo">
+		<dt>{'Created on'|@translate}</dt>
+		<dd>{$INFO_CREATION_DATE}</dd>
+	</li>
+	{/if}
+	{if $display_info.posted_on}
+	<li id="datepost" class="imageInfo">
+		<dt>{'Posted on'|@translate}</dt>
+		<dd>{$INFO_POSTED_DATE}</dd>
+	</li>
+	{/if}
+	{if $display_info.dimensions and isset($INFO_DIMENSIONS)}
+	<li id="Dimensions" class="imageInfo">
+		<dt>{'Dimensions'|@translate}</dt>
+		<dd>{$INFO_DIMENSIONS}</dd>
+	</li>
+	{/if}
+	{if $display_info.file}
+	<li id="File" class="imageInfo">
+		<dt>{'File'|@translate}</dt>
+		<dd>{$INFO_FILE}</dd>
+	</li>
+	{/if}
+	{if $display_info.filesize and isset($INFO_FILESIZE)}
+	<li id="Filesize" class="imageInfo">
+		<dt>{'Filesize'|@translate}</dt>
+		<dd>{$INFO_FILESIZE}</dd>
+	</li>
+	{/if}
+	{if $display_info.tags and isset($related_tags)}
+	<li id="Tags" class="imageInfo">
+		<dt>{'Tags'|@translate}</dt>
+		<dd>
+		{foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}<a href="{$tag.URL}">{$tag.name}</a>{/foreach}
+		</dd>
+	</li>
+	{/if}
+	{if $display_info.categories and isset($related_categories)}
+	<li id="Categories" class="imageInfo">
+		<dt>{'Albums'|@translate}</dt>
+		<dd>
+			<ul>
+				{foreach from=$related_categories item=cat}
+				<li>{$cat}</li>
+				{/foreach}
+			</ul>
+		</dd>
+	</li>
+	{/if}
+	{if $display_info.visits}
+	<li id="Visits" class="imageInfo">
+		<dt>{'Visits'|@translate}</dt>
+		<dd>{$INFO_VISITS}</dd>
+	</li>
+	{/if}
+
+{if $display_info.rating_score and isset($rate_summary)}
+	<li id="Average" class="imageInfo">
+		<dt>{'Rating score'|@translate}</dt>
+		<dd>
+		{if $rate_summary.count}
+			<span id="ratingScore">{$rate_summary.score}</span> <span id="ratingCount">({$rate_summary.count|@translate_dec:'%d rate':'%d rates'})</span>
+		{else}
+			<span id="ratingScore">{'no rate'|@translate}</span> <span id="ratingCount"></span>
+		{/if}
+		</dd>
+	</li>
+{/if}
+
+{if isset($rating)}
+	<li id="rating" class="imageInfo">
+		<dt>
+			<span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if}</span>
+		</dt>
+			<form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;">
+			<div data-role="controlgroup" data-type="horizontal" align="center">
+			{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}
+			</div>
+			</form>
+	</li>
+{/if}
+</ul>
+
+{if isset($metadata)}
+<ul data-role="listview" data-inset="true">
+{foreach from=$metadata item=meta}
+	<li><h3>{$meta.TITLE}</h3>
+	{foreach from=$meta.lines item=value key=label}
+		<div class="imageInfo">
+			<dt>{$label}</dt>
+			<dd>{$value}</dd>
+		</div>
+	{/foreach}</li>
+{/foreach}
+</dl>
+{/if}
+</ul>
+
+{if isset($COMMENT_COUNT)}
+<ul data-role="listview" data-inset="true">
+	<h3>{$COMMENT_COUNT|@translate_dec:'%d comment':'%d comments'}</h3>
+
+	<div id="pictureComments">
+		{if isset($comment_add)}
+		<div data-role="collapsible">
+			<h3>{'Add a comment'|@translate}</h3>
+			<form method="post" action="{$comment_add.F_ACTION}" id="addComment">
+				{if $comment_add.SHOW_AUTHOR}
+					<p><label for="author">{'Author'|@translate}{if $comment_add.AUTHOR_MANDATORY} ({'mandatory'|@translate}){/if} :</label></p>
+					<p><input type="text" name="author" id="author" value="{$comment_add.AUTHOR}"></p>
+				{/if}
+				{if $comment_add.SHOW_EMAIL}
+					<p><label for="email">{'Email address'|@translate}{if $comment_add.EMAIL_MANDATORY} ({'mandatory'|@translate}){/if} :</label></p>
+					<p><input type="text" name="email" id="email" value="{$comment_add.EMAIL}"></p>
+				{/if}
+				<p><label for="website_url">{'Website'|@translate} :</label></p>
+				<p><input type="text" name="website_url" id="website_url" value="{$comment_add.WEBSITE_URL}"></p>
+				<p><label for="contentid">{'Comment'|@translate} ({'mandatory'|@translate}) :</label></p>
+				<p><textarea name="content" id="contentid" rows="5" cols="50">{$comment_add.CONTENT}</textarea></p>
+				<p><input type="hidden" name="key" value="{$comment_add.KEY}">
+					<input type="submit" value="{'Submit'|@translate}"></p>
+			</form>
+		</div>
+		{/if}
+		{if isset($comments)}
+		<ul data-role="listview" data-inset="true">
+			{if (($COMMENT_COUNT > 2) || !empty($navbar))}
+				<div id="pictureCommentNavBar">
+					{if $COMMENT_COUNT > 2}
+						<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a>
+					{/if}
+					{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+				</div>
+			{/if}
+			{include file='comment_list.tpl' from="picture"}
+		</ul>
+		{/if}
+	</div>
+
+</ul>
+{/if}{*comments*}
+
+{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
+
+</div>
diff --git a/themes/smartpocket/template/picture_content.tpl b/themes/smartpocket/template/picture_content.tpl
new file mode 100644
index 000000000..8cc8e9362
--- /dev/null
+++ b/themes/smartpocket/template/picture_content.tpl
@@ -0,0 +1,18 @@
+<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}{/if}">
+
+
+{**
+<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}{/if}">
+
+{foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip}
+<map name="map{$derivative->get_type()}">
+{assign var='size' value=$derivative->get_size()}
+{if isset($previous)}
+<area shape=rect coords="0,0,{($size[0]/4)|@intval},{$size[1]}" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE|@escape}" alt="{$previous.TITLE|@escape}">
+{/if}
+<area shape=rect coords="{($size[0]/4)|@intval},0,{($size[0]/1.34)|@intval},{($size[1]/4)|@intval}" href="{$U_UP}" title="{'Thumbnails'|@translate}" alt="{'Thumbnails'|@translate}">
+{if isset($next)}
+<area shape=rect coords="{($size[0]/1.33)|@intval},0,{$size[0]},{$size[1]}" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE|@escape}" alt="{$next.TITLE|@escape}">
+{/if}
+</map>
+{/strip}{/foreach}**}
\ No newline at end of file
diff --git a/themes/smartpocket/template/picture_nav_buttons.tpl b/themes/smartpocket/template/picture_nav_buttons.tpl
new file mode 100644
index 000000000..035003a59
--- /dev/null
+++ b/themes/smartpocket/template/picture_nav_buttons.tpl
@@ -0,0 +1,13 @@
+<div data-role="controlgroup" data-type="horizontal" align="center">
+{strip}
+{if isset($previous)}
+	 <a href="{$previous.U_IMG}" rel="prev" data-role="button" data-icon="arrow-l"  data-iconpos="notext" data-inline="true">{'Previous'|@translate}</a>
+{/if}
+{if isset($U_UP) and !isset($slideshow)}
+	<a href="{$U_UP}" rel="prev" data-role="button" data-icon="arrow-u" data-inline="true">{'Thumbnails'|@translate}</a>
+{/if}
+{if isset($next)}
+	<a href="{$next.U_IMG}" rel="next" data-role="button" data-icon="arrow-r"  data-iconpos="notext" data-iconpos="right" data-inline="true">{'Next'|@translate}</a>
+{/if}
+{/strip}
+</div>
diff --git a/themes/smartpocket/template/search.tpl b/themes/smartpocket/template/search.tpl
new file mode 100644
index 000000000..7c648ab1a
--- /dev/null
+++ b/themes/smartpocket/template/search.tpl
@@ -0,0 +1,65 @@
+{include file='infos_errors.tpl'}
+<div data-role="content">
+  <ul data-role="listview" data-inset="true">
+      <li data-role="list-divider">{'Search'|@translate}</li>
+  </ul>
+
+
+<form class="filter" method="post" name="search" action="{$F_SEARCH_ACTION}">
+<fieldset data-role="controlgroup">
+  <legend>{'Filter'|@translate}</legend>
+  <div data-role="fieldcontain">
+    <label for="search_allwords">{'Search for words'|@translate}</label>
+    <input type="text" id="search_allwords" style="width: 300px" name="search_allwords" size="30">
+  </div>
+  
+  <input type="radio" name="mode" id="mode_and" value="AND" checked="checked">
+  <label for="mode_and">{'Search for all terms'|@translate}</label>
+  <input type="radio" name="mode" id="mode_or" value="OR">
+  <label for="mode_or">{'Search for any term'|@translate}</label>
+  <div data-role="fieldcontain">
+    <label for="search_author">{'Search for Author'|@translate}</label>
+    <input type="text" style="width: 300px" name="search_author" id="search_author" size="30">
+  </div>
+</fieldset>
+
+{if isset($TAG_SELECTION)}
+<fieldset data-role="controlgroup">
+  <legend>{'Search tags'|@translate}</legend>
+  {$TAG_SELECTION}
+</fieldset>
+
+<fieldset data-role="controlgroup">
+  <input type="radio" name="tag_mode" id="tag_mode_and" value="AND" checked="checked">
+  <label for="tag_mode_and">{'All tags'|@translate}</label>
+  <input type="radio" name="tag_mode" id="tag_mode_or" value="OR">
+  <label for="tag_mode_or">{'Any tag'|@translate}</label>
+</fieldset>
+{/if}
+
+<div data-role="fieldcontain">
+  <legend>{'Search in albums'|@translate}</legend>
+  <label for="categoryList">{'Albums'|@translate}
+    <select class="categoryList" id="categoryList" name="cat[]" multiple="multiple" data-native-menu="false">
+      {html_options options=$category_options selected=$category_options_selected}
+    </select>
+  </label>
+  <fieldset data-role="controlgroup">
+  <legend>{'Search in sub-albums'|@translate}</legend>
+    <input type="radio" name="subcats-included" value="1" id="subcats-included-yes" checked="checked">
+    <label for="subcats-included-yes">{'Yes'|@translate}</label>
+    <input type="radio" name="subcats-included" id="subcats-included-no" value="0">
+    <label for="subcats-included-no">{'No'|@translate}</label>
+  </fieldset>
+</div>
+<p>
+  <input class="submit" type="submit" name="submit" value="{'Submit'|@translate}">
+  <input class="submit" type="reset" value="{'Reset'|@translate}">
+</p>
+</form>
+
+<script type="text/javascript"><!--
+document.search.search_allwords.focus();
+//--></script>
+
+</div> <!-- content -->
diff --git a/themes/smartpocket/template/tags.tpl b/themes/smartpocket/template/tags.tpl
new file mode 100644
index 000000000..b9f5cef85
--- /dev/null
+++ b/themes/smartpocket/template/tags.tpl
@@ -0,0 +1,15 @@
+{include file='infos_errors.tpl'}
+<div data-role="content">{if isset($tags)}
+<ul data-role="listview" data-inset="true">
+	<li data-role="list-divider">{'Tags'|@translate}</li>
+  {foreach from=$tags item=tag}
+	<li><a href="{$tag.URL}" title="{$tag.counter|@translate_dec:'%d photo':'%d photos'}">{$tag.name}</a><span class="ui-li-count">{$tag.counter|@translate_dec:'%d photo':'%d photos'}</span></li>
+	{/foreach}
+</ul>
+{elseif isset($letters)}
+<ul data-role="listview" data-inset="true">
+	{foreach from=$letters item=letter}{foreach from=$letter.tags item=tag}
+	<li><a href="{$tag.URL}" title="{$tag.counter|@translate_dec:'%d photo':'%d photos'}">{$tag.name}</a><span class="ui-li-count">{$tag.counter|@translate_dec:'%d photo':'%d photos'}</span></li>
+	{/foreach}{/foreach}
+</ul>{/if}
+</div>
diff --git a/themes/smartpocket/template/thumbnails.tpl b/themes/smartpocket/template/thumbnails.tpl
index ed2737d8b..6c85dffa6 100644
--- a/themes/smartpocket/template/thumbnails.tpl
+++ b/themes/smartpocket/template/thumbnails.tpl
@@ -10,7 +10,7 @@
 {assign var=derivative value=$pwg->derivative($thumbnail_derivative_params, $thumbnail.src_image)}

 {if isset($page_selection[$thumbnail.id])}

   <li>

-    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external">

+    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">

      <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">

     </a>

   </li>