issue61, theme support

git-svn-id: file:///var/lib/svn/phpfspot/trunk@237 fa6a889d-dae6-447d-9e79-4ba9a3039384

13 files changed, 678 insertions, 0 deletions

diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css
new file mode 100644
index 0000000..33ef1bf
--- /dev/null
+++ b/themes/default/stylesheet.css
@@ -0,0 +1,199 @@
+body {

+   background-color:       #000000;

+   color:                  rgb(26,151,15);

+   font-family:            sans-serif;

+   font-style:             normal;

+   border:                 solid 1px #ffffff;

+   border-color:           rgb(15,15,15);

+   padding:                10px;

+}

+

+table, tr, td {

+   border-collapse:        collapse;

+   padding:                0px;

+   empty-cells:            show;

+   vertical-align:         top;

+}

+

+td.options {

+   width:                  250px;

+   max-width:              250px;

+   min-width:              250px;

+   padding:                2px;

+   padding-top:            8px;

+   border-top:             solid 1px #000000;

+   border-right:           solid 1px #000000;

+}

+

+td.available_tags,td.selected_tags {

+   border-bottom:          solid 1px #000000;

+   padding-top:            10px;

+   padding-bottom:         10px;

+   padding-right:          10px;

+   line-height:            21px;

+}

+

+td.searchfor {

+   border-bottom:          solid 1px #000000;

+   padding-top:            10px;

+   padding-bottom:         10px;

+   padding-right:          10px;

+   line-height:            21px;

+   font-size:              12px;

+   vertical-align:         middle;

+}

+

+td.logo {

+   font-weight:            bolder;

+   height:                 40px;

+   border-bottom:          solid 1px #000000;

+}

+

+td.content {

+   border-top:             solid 1px #000000;

+}

+

+td.menu {

+   padding-top:            5px;

+   padding-bottom:         5px;

+}

+

+td.index_header {

+   background-color:       #eeeeee;

+   padding:                10px;

+   vertical-align:         middle;

+   white-space:            nowrap;

+}

+

+td.content_title {

+   background-color:       #eeeeee;

+   padding:                10px;

+   vertical-align:         middle;

+}

+

+

+img {

+   border:                none;

+}

+

+img.thumb {

+}

+

+a {

+   font-size:              14px;

+   color:                  #008200;

+   text-decoration:        none;

+}

+

+a:hover {

+   color:                  #00aa44;

+}

+

+a.tag {

+   color:                  #000000;

+   text-decoration:        underline;

+}

+

+a.tag:hover {

+   color:                  #00aa44;

+}

+

+a.smalltag {

+   font-size:              12px;

+   color:                  #000000;

+   text-decoration:        underline;

+   font-style:             italic;

+}

+

+a.smalltag:hover {

+   color:                  #00aa44;

+}

+

+a.thumblink {

+   font-size:              12px;

+}

+

+a.calendar {

+   font-size:              10px;

+}

+

+a.thumblink:hover {

+   color:                  #4761ab;

+}

+

+#single {

+   padding:                10px;

+   display:                table;

+   margin-left:            10px;

+   margin-right:           10px;

+   table-layout:           fixed;

+   border:                 hidden;

+   border-spacing:         10px;

+   border-collapse:        separate;

+}

+

+table.matrix {

+   padding:                10px;

+   display:                table;

+   margin-left:            5px;

+   margin-right:           10px;

+   table-layout:           fixed;

+   border-style:           hidden;

+   border-spacing:         10px;

+   border-collapse:        separate;

+}

+

+td.thumb {

+   text-align:             center;

+   display:                table-cell;

+   vertical-align:         top;

+   -moz-border-radius:     3px;

+   border-radius:          3px;

+   border:                 dashed 1px #888888;

+   margin:                 5px;

+   background-color:       #eeeeee;

+   padding:                10px;

+}

+

+#photo_details {

+   width:                  150px;

+   font-size:              12px;

+   padding:                10px;

+   -moz-border-radius:     1em;

+   border-radius:          1em;

+   border:                 dashed 1px #888888;

+}

+

+#frame {

+   padding:                10px;

+   background-color:       #ffffff;

+}

+

+#available_tags {

+   clip:                   auto;

+   overflow:               auto;

+}

+

+table.calendar tr td {

+   border:                 solid 1px #ffffff;

+   padding:                1px;

+   text-align:             center;

+   font-size:              10px;

+}

+

+.prevMonth {

+    font-size: 10px;

+    text-align: left;

+}

+.nextMonth {

+    font-size: 10px;

+    text-align: right;

+}

+#calendar {

+   position: absolute;

+   width: 140px;

+   height: 200px;

+   background-color: #000000;

+   visibility: hidden;

+   z-index: 1000;

+}

diff --git a/themes/default/templates/calendar.tpl b/themes/default/templates/calendar.tpl
new file mode 100644
index 0000000..1f52732
--- /dev/null
+++ b/themes/default/templates/calendar.tpl
@@ -0,0 +1,28 @@
+<table class="calendar">
+ <tr>
+  <td><a href="{$prev_month}" class="prevMonth">&lt;&lt;</a></td>
+  <td colspan="5">
+   {$current_month}
+  </td>
+  <td><a href="{$next_month}" class="nextMonth">&gt;&gt;</a></td>
+ </tr>
+ <tr>
+  <td>M</td>
+  <td>T</td>
+  <td>W</td>
+  <td>T</td>
+  <td>F</td>
+  <td>S</td>
+  <td>S</td>
+ </tr>
+ <!-- matrix -->
+ {section name="row" loop=$rows step=1}
+  {section name="col" loop=8 step=1}
+   {if $matrix[row][col] }
+    {$matrix[row][col]}
+   {/if}
+  {/section}
+ {/section}
+ <!-- /matrix -->
+</table>
+
diff --git a/themes/default/templates/credits.tpl b/themes/default/templates/credits.tpl
new file mode 100644
index 0000000..44c4800
--- /dev/null
+++ b/themes/default/templates/credits.tpl
@@ -0,0 +1,27 @@
+<!-- Single photo -->
+<table>
+ <tr>
+  <td class="index_header">
+   <b>{$product} {$version}</b><br />
+  </td>
+ </tr>
+ <tr>
+  <td>
+   <div id='matrix'>
+   <table>
+    <tr>
+     <td>
+      by Andreas Unterkircher<br />
+      {mailto address="unki@netshadow.at"}
+      <hr />
+      <a href="http://wiki.bluga.net/HTML_AJAX/HomePage">HTML_AJAX</a>
+      <hr />
+      PHP tag-cloud code by <a href="http://prism-perfect.net/archive/php-tag-cloud-tutorial/">Jenny Ferenc</a>.
+     </td>
+    </tr>
+   </table>
+   </div>
+  </td>
+ </tr>
+</table>
+<!-- /Single photo -->
diff --git a/themes/default/templates/export.tpl b/themes/default/templates/export.tpl
new file mode 100644
index 0000000..a3e5641
--- /dev/null
+++ b/themes/default/templates/export.tpl
@@ -0,0 +1,20 @@
+{include file="header.tpl"}
+ <body>
+  <div id="frame">
+  <table>
+   <tr>
+    <td>
+     <form action="javascript:#" onsubmit="setViewMode(document.getElementsByName('format')[0].options[document.getElementsByName('format')[0].selectedIndex].value); return false;">
+      <select name="format">
+       <option value="HTML">HTML</option>
+       <option value="MoinMoin">MoinMoin Wiki</option>
+      </select>
+      <input type="image" src="resources/doit.png" alt="Switch View" />
+     </form>
+     <div id="output"></div>
+    </td>
+   </tr>
+  </table>
+  </div>
+ </body>
+{include file="footer.tpl"}
diff --git a/themes/default/templates/footer.tpl b/themes/default/templates/footer.tpl
new file mode 100644
index 0000000..5f85cab
--- /dev/null
+++ b/themes/default/templates/footer.tpl
@@ -0,0 +1 @@
+</html>
diff --git a/themes/default/templates/header.tpl b/themes/default/templates/header.tpl
new file mode 100644
index 0000000..5d66f2d
--- /dev/null
+++ b/themes/default/templates/header.tpl
@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+ <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>{$page_title}</title>
+  <link href="{$template_path}/stylesheet.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="rpc.php?mode=init&amp;client=all"></script>
+  <script type="text/javascript" src="phpfspot.js"></script>
+  <link rel="shortcut icon" href="resources/gpl_16.png" type="image/png" />
+  <link rel="icon" href="resources/gpl_16.png" type="image/png" />
+ </head>                                                                                                      
diff --git a/themes/default/templates/index.tpl b/themes/default/templates/index.tpl
new file mode 100644
index 0000000..f42a124
--- /dev/null
+++ b/themes/default/templates/index.tpl
@@ -0,0 +1,52 @@
+{include file="header.tpl"}
+ <body onload="init_phpfspot();">
+  <div id="frame">
+  <table>
+   <tr>
+    <td class="logo" colspan="2">
+     {$page_title}
+    </td>
+   </tr>
+   <tr>
+    <td colspan="2" class="menu">
+     <a href="javascript:showPhotoIndex();" onclick="click(this);" title="Show Photo Index">
+      <img src="resources/photo_index.png" alt="photo index" />
+     </a>
+     <a href="javascript:resetAll();" onclick="click(this);" title="Reset selected-tags and search results">
+      <img src="resources/reload.png" alt="reset tags" />
+     </a>
+     <a href="javascript:showCredits();" onclick="click(this);" title="Show's a little credit page">
+      <img src="resources/credits.png" alt="show credits" />
+     </a>
+    </td>
+   </tr>
+   <tr>
+    <td class="options">
+     <table>
+      <tr>
+       <td>
+        {include file="search.tpl"}
+       </td>
+      </tr>
+      <tr>
+       <td>
+        <div id="tags">
+         {include file="tags.tpl"}
+        </div>
+       </td>
+      </tr>
+     </table>
+    </td>
+    <td class="content">
+     <div id="content">
+      {include file="welcome.tpl"}
+     </div>
+    </td>
+   </tr>
+  </table>
+  </div>
+  <div style="text-align: right; font-size: 10px; color: #ffffff">
+   Licensed under GPLv3, <a href="http://oss.netshadow.at/oss/phpfspot/Project" style="font-size: 10px; color: #ffffff">phpfspot</a>
+  </div>
+ </body>
+{include file="footer.tpl"}
diff --git a/themes/default/templates/photo_index.tpl b/themes/default/templates/photo_index.tpl
new file mode 100644
index 0000000..08c8999
--- /dev/null
+++ b/themes/default/templates/photo_index.tpl
@@ -0,0 +1,106 @@
+<!-- Photo Index -->
+<table>
+ <tr>
+  <td colspan="3">
+   <table style="width: 100%;">
+    <tr>
+     <td class="content_title">
+      <b>Photo Index</b>
+      {if $searchfor }
+       {if $count == 1}
+        {$count} image is the result for your search about "{$searchfor}".
+       {else}
+        {$count} images are the result for your search about "{$searchfor}".
+       {/if}
+      {elseif $tag_result}
+       {if $count == 1}
+        {$count} image has been found for the selected tags.
+       {else}
+        {$count} images have been found for the selected tags.
+       {/if}
+      {else}
+       {if $count == 1}
+        {$count} image has been found.
+       {else}
+        {$count} images have been found.
+       {/if}
+      {/if}
+      {if $from_date && $to_date }
+       Results are limited to a date within {$from_date} to {$to_date}.
+      {/if}
+     </td>
+     <td class="index_header" style="text-align: right">
+      {if $slideshow_link }
+       <a href="{$slideshow_link}" title="Slideshow" target="_blank"><img src="resources/slideshow.png" /></a>
+      {/if}
+      {if $extern_link }
+       <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" /></a>
+      {/if} 
+      <a href="{$export_link}" target="_blank" title="this will open a new browser window where you can export this page in several formats"><img src="resources/export.png" /></a>
+     </td>
+    </tr>
+   </table>
+  </td>
+ </tr>
+ <tr>
+  <td colspan="3">
+   <div id="adinfo"></div>
+   <table class="matrix" id="matrix">
+   {section name="row" loop=$rows step=1}
+    <tr>
+    {section name="col" loop=$columns step=1}
+      {if $images[row][col] }
+      <td class="thumb" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');">
+       <a href="javascript:showImage({$images[row][col]});" id="{$images[row][col]}" name="image{$img_id[row][col]}" class="thumblink" onclick="click(this);" title="{$img_title[row][col]}">
+        <img class="thumb" id="{$images[row][col]}" src="phpfspot_img.php?idx={$images[row][col]}&amp;width={$width}" alt="thumb_{$images[row][col]}" width="{$img_width[row][col]}" height="{$img_height[row][col]}" />
+        <br />
+        {$img_name[row][col]}
+       </a>
+      </div>
+      {else}
+       <td>&nbsp;</td>
+      {/if}
+    {/section}
+    </tr>
+   {/section} 
+   </table>
+  </td>
+ </tr>
+ <tr>
+  <td style="text-align: left; width: 33%;">
+  { if $previous_url == "" }
+   { if $count != 0 }
+    <img src="resources/arrow_left_gray.png" alt="first page reached" />
+   { /if }
+  { else }
+   <a href="{$previous_url}">
+    <img src="resources/arrow_left.png" alt="previous photo" />
+   </a>
+  { /if }
+  </td>
+  <td style="text-align: center; width: 33%;">
+  { if $page_selector == "" }
+   &nbsp;
+  { else }
+   {$page_selector}
+  { /if}
+  </td>
+  <td style="text-align: right; width: 33%;">
+  { if $next_url == "" }
+   { if $count != 0 }
+    <img src="resources/arrow_right_gray.png" alt="last page reached" />
+   { /if }
+  { else }
+   <a href="{$next_url}">
+    <img src="resources/arrow_right.png" alt="next photo" />
+   </a>
+  { /if}
+  </td>
+ </tr>
+</table>
+<script type="text/javascript">
+<!--
+   preloadPhotos();
+-->
+</script>
+<!-- /Photo Index -->
diff --git a/themes/default/templates/search.tpl b/themes/default/templates/search.tpl
new file mode 100644
index 0000000..1498e70
--- /dev/null
+++ b/themes/default/templates/search.tpl
@@ -0,0 +1,50 @@
+<table style="width: 100%;">
+ <tr>
+  <td style="vertical-align: middle; text-decoration: underline;">
+   <img src="resources/loupe.png" alt="loupe" />Search:
+  </td>
+ </tr>
+ <tr>
+  <td class="searchfor">
+   <table>
+    <form action="" onsubmit="startSearch(); return false;">
+    <tr>
+     <td>Tag:</td>
+     <td>
+      <input type="text" name="searchfor" value="{$searchfor}" size="15" />
+     </td>
+     <td>
+      <input type="image" src="resources/doit.png" alt="Tag-Search" />
+     </td>
+    </tr>
+    <tr>
+     <td>Date:</td>
+     <td><input type="checkbox" name="consider_date" value="Y" onclick="datesearch();">consider date-search
+    </tr>
+    <tr>
+     <td>&nbsp;</td>
+     <td>{$from_date} <a href="javascript:showCalendar('from');"><img src="resources/date.png" id="frompic"/></a></td>
+    </tr>
+    <tr>
+     <td>&nbsp;</td>
+     <td>
+      {$to_date} <a href="javascript:showCalendar('to');"><img src="resources/date.png" id="topic" /></a>
+     </td>
+     <td>
+      <input type="image" src="resources/doit.png" alt="Tag-Search" />
+     </td>
+    </tr>
+    <tr>
+     <td>
+      Sort-Order:
+     </td>
+     <td>
+      {$sort_field}
+     </td>
+    </tr>
+    </form>
+   </table>
+   <div id='calendar'></div>
+  </td>
+ </tr>
+</table>
diff --git a/themes/default/templates/single_photo.tpl b/themes/default/templates/single_photo.tpl
new file mode 100644
index 0000000..bb8c917
--- /dev/null
+++ b/themes/default/templates/single_photo.tpl
@@ -0,0 +1,110 @@
+<!-- Single photo -->
+<table>
+ <tr>
+  <td class="content_title" style="text-align: left;">
+   <b>Photo {$image_name}</b><br />
+   {if $photo_count > 0}
+    {$photo_number} of {$photo_count}
+    {if $photo_count == 1}
+     Photo
+    {else}
+     Photos
+    {/if}
+    {if $description}
+     &nbsp;{$description}<br />
+    {/if}
+   {/if}
+  </td>
+  <td class="index_header" style="text-align: right;">
+   <a href="javascript:autoBrowse();"><img src="resources/slideshow.png" /></a>
+   {if $extern_link }
+    <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" /></a>
+   {/if}
+   <a href="{$image_url_full}" target="_blank" onclick="click(this);">
+    <img src="resources/original.png" alt="original resolution" />
+   </a>
+  </td>
+ </tr>
+ <tr>
+  <td>
+   <div id='single'>
+   <table>
+    <tr>
+     <td colspan="3">
+     { if $next_url == "" }
+      <a href="javascript:showPhotoIndex();" onclick="click(this);">
+     { else }
+      <a href="{$next_url}" onclick="click(this);"> 
+     { /if }
+       <img src="{$image_url}" width="{$width}" height="{$height}" alt="photo" />
+      </a>
+     </td>
+    </tr>
+    <tr>
+     <td style="text-align: left; width: 33%;">
+      { if $previous_url == "" }
+       <img src="resources/arrow_left_gray.png" alt="first photo reached" />
+      { else }
+      <a href="{$previous_url}" onclick="click(this);">
+       <img src="resources/arrow_left.png" alt="previous photo" />
+      </a>
+      { /if }
+     </td>
+     <td style="text-align: center; width: 33%;">
+      <a href="javascript:showPhotoIndex({$current});" onclick="click(this);">
+       <img src="resources/arrow_up.png" alt="photo index" />
+      </a>
+     </td>
+     <td style="text-align: right; width: 33%;">
+      { if $next_url == "" }
+       <img src="resources/arrow_right_gray.png" alt="last photo reached" />
+      { else }
+      <a href="{$next_url}" onclick="click(this);" id="next_img" > 
+       <img src="resources/arrow_right.png" alt="next photo" />
+      </a>
+      { /if}
+     </td>
+    </tr>
+   </table>
+   </div>
+  </td>
+  <td style="width: 150px; padding-top: 20px;">
+   <div id="photo_details">
+   { if $ExifMadeWith }
+   <u><img src="resources/camera.png" alt="camera icon" />&nbsp;Image taken with:</u><br />
+   {$ExifMadeWith}<br />
+   { /if }
+   { if $ExifMadeOn }
+   <u><img src="resources/date.png" alt="calendar icon" />&nbsp;Image made on:</u><br />
+   {$ExifMadeOn}<br />
+   { /if }
+   { if $ExifOrigResolution }
+   <u><img src="resources/image.png" alt="resolution icon" />&nbsp;Original resolution:</u><br />
+   {$ExifOrigResolution}<br />
+   { /if }
+   <u>Size:</u>&nbsp;{$ExifFileSize}<br />
+   { if $tags }
+    <br />
+    <u><img src="resources/small_available_tags.png" alt="available tags" />&nbsp;Tagged with:</u><br />
+    { foreach from=$tags key=id item=name }
+    <a class="smalltag" href="javascript:Tags('add', '{$id}');" onclick="click(this);" onclick="click(this);">{$name}</a><br />
+    { /foreach }
+   { /if }
+   <hr>
+   { if $prev_img }
+    <u><img src="resources/photo.png" alt="photo icon" />&nbsp;Previous:</u><br />
+    <a href="{$previous_url}" onclick="click(this);">
+     <img src="phpfspot_img.php?idx={$prev_img}&amp;width={$mini_width}" /><br />
+    </a>
+   { /if}
+   { if $next_img }
+    <u><img src="resources/photo.png" alt="photo icon" />&nbsp;Next:</u><br />
+    <a href="{$next_url}" onclick="click(this);" id="next_link">
+     <img src="phpfspot_img.php?idx={$next_img}&amp;width={$mini_width}" /><br />
+    </a>
+   { /if}
+   </div>
+  </td>
+ </tr>
+</table>
+<!-- /Single photo -->
diff --git a/themes/default/templates/slideshow.tpl b/themes/default/templates/slideshow.tpl
new file mode 100644
index 0000000..bba5cd2
--- /dev/null
+++ b/themes/default/templates/slideshow.tpl
@@ -0,0 +1,9 @@
+{include file="header.tpl"}
+ <body onload="startSlideShow();" style="text-align: center;">
+  <div style="margin: 0 auto; padding: 10px;">
+   <a href="javascript:window.close();" title="click to close slideshow">
+    <img id="slide_img" alt="slideshow_img" />
+   </a>
+  </div>
+ </body>
+{include file="footer.tpl"}
diff --git a/themes/default/templates/tags.tpl b/themes/default/templates/tags.tpl
new file mode 100644
index 0000000..4f32ad0
--- /dev/null
+++ b/themes/default/templates/tags.tpl
@@ -0,0 +1,36 @@
+<table>
+ <tr>
+  <td style="vertical-align: middle; text-decoration: underline;">
+   <img src="resources/available_tags.png" alt="available tags" />Available Tags:
+  </td>
+ </tr>
+ <tr>
+  <td class="available_tags">
+   <div id="available_tags"></div>
+  </td>
+ </tr>
+ <tr>
+  <td>
+   <table style="width: 100%;">
+    <tr>
+     <td style="vertical-align: bottom; text-decoration: underline;">
+      <img src="resources/selected_tags.png" alt="selected tags" />Selected Tags:
+     </td>
+     <td style="vertical-align: bottom; white-space: nowrap;">
+      &nbsp;
+      <input type="radio" name="condition" value="or" onclick="Tags('condition', this);" {if $current_condition == "or" } checked="checked" { /if } title="OR condition" />||
+      <input type="radio" name="condition" value="and" onclick="Tags('condition', this);" {if $current_condition == "and" } checked="checked" { /if } title="AND condition" />&amp;&amp;
+     </td>
+    </tr>
+   </table>
+  </td>
+ </tr>
+ <tr>
+  <td class="selected_tags">
+   <div id="selected_tags"></div>
+  </td>
+ </tr>
+ <tr>
+  <td>&nbsp;</td>
+ </tr>
+</table>
diff --git a/themes/default/templates/welcome.tpl b/themes/default/templates/welcome.tpl
new file mode 100644
index 0000000..9845755
--- /dev/null
+++ b/themes/default/templates/welcome.tpl
@@ -0,0 +1,29 @@
+<!-- welcome -->
+<table>
+ <tr>
+  <td class="index_header" style="text-align: left;">
+   phpfspot welcomes you to a dynamic photo gallery for <a href="http://f-spot.org" target="_blank">F-Spot</a><br />
+  </td>
+ </tr>
+ <tr>
+  <td>
+   <div id='single'>
+   <table>
+    <tr>
+     <td>
+This application targets to provide an easy way, to presentate your F-Spot<br />
+pictures in the web, in a way where you do not need any of the current<br />
+web2.0 providers or setup complex apps like gallery<br />
+<br />
+You can addept this welcome page in the file "welcome.tpl" in the template<br />
+directory. ;)
+<br /><br />
+<a href="javascript:showPhotoIndex();">[ Click here to take a look at your photo index or select a tag from the list on the left ]</a>
+     </td>
+    </tr>
+   </table>
+   </div>
+  </td>
+ </tr>
+</table>
+<!-- /welcome -->