started my own theme

need to clean this up, some code should perhaps go into main, other should stay in my theme

13 files changed, 934 insertions, 0 deletions

diff --git a/themes/arun/stylesheet.css b/themes/arun/stylesheet.css
new file mode 100644
index 0000000..14b52b9
--- /dev/null
+++ b/themes/arun/stylesheet.css
@@ -0,0 +1,342 @@
+body {
+   color:                  #000;
+   font-family:            sans-serif;
+   font-style:             normal;
+   margin:                 0px;
+   padding:                0px;
+}
+
+body.slideshow {
+   color:                  #000;
+   font-family:            sans-serif;
+   font-style:             normal;
+   border:                 none;
+   padding:                10px;
+   text-align:             center;
+}
+
+table, tr, td {
+   border-collapse:        collapse;
+   padding:                0px;
+   empty-cells:            show;
+   vertical-align:         top;
+}
+
+/* left column containg search and tag-selection */
+.options {
+   position:               absolute;
+   left:                   0px;
+   top:                    40px;
+   width:                  265px;
+   max-width:              265px;
+   min-width:              265px;
+   padding-top:            8px;
+   padding-bottom:         10px;
+   padding-left:           5px;
+   padding-right:          10px;
+   border-right:           solid 1px #000000;
+}
+
+/* main cell containing photo content */
+.content {
+   margin-top:             40px;
+   margin-left:            280px;
+   margin-right:           0px;
+   padding:                0px;
+}
+
+div.searchfor {
+   padding-top:            10px;
+   padding-right:          10px;
+   padding-bottom:          10px;
+   line-height:            21px;
+   font-size:              12px;
+   vertical-align:         middle;
+   border-bottom:          solid 1px #000000;
+}
+
+div.searchfor td.nowrap {
+   white-space:            nowrap;
+}
+
+.menu {
+   position:               absolute;
+   left:                   0px;
+   top:                    0px;
+   height:                 30px;
+   width:                  100%;
+   margin:                 0px;
+   padding:                5px 0px;
+   border-bottom:          solid 1px #000000;
+}
+
+.icons {
+   float:                  left;
+}
+
+/* logo 'text' */
+.logo {
+   background-color:       #fff;
+   font-size:              larger;
+   font-size:              larger;
+   font-weight:            bolder;
+   text-align:             center;
+}
+
+div.header {
+   background-color:       #fff;
+   padding:                10px;
+   vertical-align:         middle;
+   white-space:            nowrap;
+   text-align:             left;
+   height:                 2em;
+}
+
+div.header_title {
+   white-space:            nowrap;
+   text-align:             left;
+   float:                  left;
+}
+
+div.header_menu {
+   text-align:             right;
+}
+
+div.tagresult{
+   height:                 1px;
+   background-color:       #ffffff;
+}
+
+div.tagresulttags{
+   padding:                5px 0px 5px 10px;
+   background-color:       #eeeeec;
+   vertical-align:         middle;
+}
+
+div.tagresulttag{
+   padding:                0 0 0 5px;
+   background-color:       #eeeeec;
+   display:                inline;
+}
+
+div.photo{
+   text-align:             left;
+   margin-top:             20px;
+   margin-left:            20px;
+}
+
+div.photonavigation{
+   margin-left:            20px;
+}
+
+div.indexnavigation{
+   width:                  100%;
+   margin-top:             20px;
+}
+
+div.indexnavigationright{
+   float:                  right;
+   width:                  40px;
+   margin-right:           0px;
+   padding-right:          10px;
+}
+
+div.indexnavigationleft{
+   float:                  left;
+   margin:                 0px;
+   padding-left:           10px;
+   width:                  40px;
+}
+
+div.indexnavigationcenter{
+   text-align:             center;
+}
+
+div.welcome {
+   padding:                10px;
+   margin-left:            10px;
+   margin-right:           10px;
+}
+
+div.welcome  span {
+   float:                  left;
+   padding-right:          10px;
+   width:                  150px;
+   text-align:             center;
+}
+
+img {
+   border:                none;
+}
+
+a {
+   font-size:              14px;
+   color:                  #e9b96e;
+   text-decoration:        none;
+}
+
+a:hover {
+   color:                  #729fcf;
+}
+
+a.tag {
+   color:                  #000000;
+   text-decoration:        underline;
+}
+
+a.tag:hover {
+   color:                  #729fcf;
+}
+
+a.smalltag {
+   font-size:              12px;
+   color:                  #000000;
+   text-decoration:        underline;
+   font-style:             italic;
+}
+
+a.smalltag:hover {
+   color:                  #729fcf;
+}
+
+div.thumb {
+   text-align:             center;
+   vertical-align:         top;
+   -moz-border-radius:     3px;
+   border-radius:          3px;
+   margin:                 10px 0px 0px 10px;
+   background-color:       #eeeeec;
+   padding:                10px;
+   float:                  left;
+}
+div.thumb:hover {
+   background-color:       #729fcf;
+}
+
+div.thumb img.thumb {
+   border:                 0px;
+   padding:                0px;
+   margin:                 0px;
+}
+
+div.thumb a.thumblink {
+   font-size:              12px;
+   border:                 0px;
+}
+
+div.thumb a.thumblink:hover {
+   color:                  #eeeeec;
+}
+
+.cb {
+   clear:                  both;
+}
+
+#photo_details {
+   width:                  150px;
+   font-size:              12px;
+   padding:                10px;
+   -moz-border-radius:     1em;
+   border-radius:          1em;
+   z-index:                100;
+   float:                  right;
+   margin-top:             20px;
+   margin-right:           20px;
+}
+
+#HTML_AJAX_LOADING {
+   position:               fixed;
+   z-index:                1000;
+   top:                    10px;
+   right:                  10px;
+   background-color:       #e9b96e;
+   padding:                10px;
+   -moz-border-radius:     1em;
+   border-radius:          1em;
+}
+
+#available_tags,#selected_tags {
+   clip:                   auto;
+   overflow:               auto;
+   border-bottom:          solid 1px #000000;
+   padding-top:            10px;
+   padding-bottom:         10px;
+   padding-right:          10px;
+   line-height:            21px;
+}
+
+span.tags {
+   vertical-align:         middle;
+   text-decoration:        underline;
+}
+
+div.credits{
+   margin-top:             10px;
+   margin-left:            10px;
+}
+
+/*
+ * calendar layer
+ */
+
+a.calendar {
+   font-size:              14px;
+}
+
+table.calendar tr td {
+   border:                 solid 1px #00aa00;
+   padding:                1px;
+   text-align:             center;
+   font-size:              14px;
+}
+
+.prevMonth {
+   font-size:              14px;
+   text-align:             left;
+}
+.nextMonth {
+   font-size:              14px;
+   text-align:             right;
+}
+
+#calendar {
+   position:               absolute;
+   background-color:       #ffffff;
+   visibility:             hidden;
+   z-index:                1000;
+   border:                 solid 3px #aaaaaa;
+}
+
+#slide_navigation {
+   text-align:             center;
+   padding:                5px;
+   -moz-border-radius:     5px;
+   border-radius:          5px;
+   vertical-align:         middle;
+}
+
+#slide_close {
+   margin:                 0 auto;
+   padding:                10px;
+}
+
+#slide_close img {
+   padding:                15px;
+   background-color:       #000000;
+}
+
+input.submit,input.checkbox {
+   background-color:       transparent;
+   border:                 0px;
+}
+
+input, select, textarea {
+   background-color:       #eeeeee;
+   color:                  #333333;
+   border:                 1px solid #888888;
+   border-collapse:        collapse;
+}
+
+#slider-1{
+   margin:                 0 auto;
+}
diff --git a/themes/arun/templates/calendar.tpl b/themes/arun/templates/calendar.tpl
new file mode 100644
index 0000000..8c1d27e
--- /dev/null
+++ b/themes/arun/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 isset($matrix[row][col]) }
+    {$matrix[row][col]}
+   {/if}
+  {/section}
+ {/section}
+ <!-- /matrix -->
+</table>
+
diff --git a/themes/arun/templates/credits.tpl b/themes/arun/templates/credits.tpl
new file mode 100644
index 0000000..2bc7b28
--- /dev/null
+++ b/themes/arun/templates/credits.tpl
@@ -0,0 +1,20 @@
+<div class="header">
+ <b>{$product} {$version}</b><br />
+</div>
+<div class="credits">
+ by Andreas Unterkircher<br />
+ Licensed under GPLv3, <a href="http://oss.netshadow.at/oss/phpfspot/Project" target="_blank">phpfspot</a>
+ <hr />
+ Some extensions:<br /><br />
+ <a href="http://wiki.bluga.net/HTML_AJAX/HomePage">HTML_AJAX</a> - AJAX communication with the server
+ <br />
+ <a href="http://prism-perfect.net/archive/php-tag-cloud-tutorial/">Jenny Ferenc</a> - PHP tag-cloud code
+ <br />
+ <a href="http://www.silvestre.com.ar/">Silvestre Herrera's</a> - the most icons are from the Nuovo icon kit.
+ <br />
+ <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox2</a> - photo preview
+ <br />
+ <a href="http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.html">Ajax Auto Suggest</a> - Auto-Completion
+ <hr />
+ F-Spot database version: {$db_version}
+</div>
diff --git a/themes/arun/templates/export.tpl b/themes/arun/templates/export.tpl
new file mode 100644
index 0000000..d7443de
--- /dev/null
+++ b/themes/arun/templates/export.tpl
@@ -0,0 +1,14 @@
+{include file="header.tpl"}
+ <body>
+  <div id="frame">
+  <form action="javascript:#" onsubmit="setViewMode('{$web_path}', 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>
+    <option value="MoinMoinList">MoinMoin Wiki List</option>
+   </select>
+   <input type="image" src="{$web_path}/resources/doit.png" alt="Switch View" />
+  </form>
+  <div id="output"></div>
+ </body>
+{include file="footer.tpl"}
diff --git a/themes/arun/templates/footer.tpl b/themes/arun/templates/footer.tpl
new file mode 100644
index 0000000..70723d9
--- /dev/null
+++ b/themes/arun/templates/footer.tpl
@@ -0,0 +1,2 @@
+ </body>
+</html>
diff --git a/themes/arun/templates/header.tpl b/themes/arun/templates/header.tpl
new file mode 100644
index 0000000..9e6fce5
--- /dev/null
+++ b/themes/arun/templates/header.tpl
@@ -0,0 +1,21 @@
+<!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="{$web_path}/{$template_path}/stylesheet.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="{$web_path}/rpc.php?mode=init&amp;client=all"></script>
+  <script type="text/javascript" src="{$web_path}/phpfspot.js"></script>
+  <link rel="shortcut icon" href="{$web_path}/resources/gpl_16.png" type="image/png" />
+  <link rel="icon" href="{$web_path}/resources/gpl_16.png" type="image/png" />
+  { if isset($use_lightbox) }
+  <script type="text/javascript" src="{$web_path}/lightbox2/js/prototype.js"></script>
+  <script type="text/javascript" src="{$web_path}/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
+  <script type="text/javascript" src="{$web_path}/lightbox2/js/lightbox.js"></script>
+  <link rel="stylesheet" href="{$web_path}/lightbox2/css/lightbox.css" type="text/css" media="screen" />
+  { /if }
+  { if isset($use_autocomplete) }
+  <script type="text/javascript" src="{$web_path}/autosuggest/js/bsn.AutoSuggest_2.1.3_comp.js"></script>
+  <link rel="stylesheet" href="{$web_path}/autosuggest/css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
+  { /if }
+ </head>
diff --git a/themes/arun/templates/index.tpl b/themes/arun/templates/index.tpl
new file mode 100644
index 0000000..c4378b2
--- /dev/null
+++ b/themes/arun/templates/index.tpl
@@ -0,0 +1,46 @@
+{include file="header.tpl"}
+ <body onload="init_phpfspot('{$web_path}');">
+
+  <!-- loading -->
+
+  <div id="HTML_AJAX_LOADING">
+   <img src="{$web_path}/resources/loading.gif" style="vertical-align: middle;" alt="Loading..." />&nbsp;&nbsp;Loading...
+  </div>
+
+  <!-- top menu -->
+
+  <div class="menu">
+   <div class="icons">
+    <a href="javascript:showPhotoIndex();" onclick="click(this);" title="Show Photo Index (CTRL+ALT+i)">
+photo index
+    </a>
+    <a href="javascript:resetAll();" onclick="click(this);" title="Reset selected-tags and search results (CTRL+ALT+r)">
+reset tags
+    </a>
+    <a href="javascript:showCredits();" onclick="click(this);" title="Show's a little credit page">
+about
+    </a>
+   </div>
+   <div class="logo">&nbsp;{$page_title}</div>
+  </div>
+  <!-- /top menu -->
+
+  <div style="clear: both;">
+  <!-- option column -->
+  <div class="options" style="float: left;">
+   <div>
+    {include file="search.tpl"}
+   </div>
+   <div id="tags">
+    {include file="tags.tpl"}
+   </div>
+  </div>
+  <!-- /option column -->
+
+  <!-- content column -->
+  <div id="content" class="content">
+   { $initial_content }
+  </div>
+  </div>
+
+{include file="footer.tpl"}
diff --git a/themes/arun/templates/photo_index.tpl b/themes/arun/templates/photo_index.tpl
new file mode 100644
index 0000000..9e4fbb0
--- /dev/null
+++ b/themes/arun/templates/photo_index.tpl
@@ -0,0 +1,179 @@
+<!-- Photo Index -->
+
+<!-- Header - displays count of matched photos and some link's -->
+
+<div class="header">
+ <div class="header_title">
+  <b>Photo Index</b>
+  {if isset($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 isset($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 isset($from_date) && isset($to_date) }
+   <br />
+   Results are limited to a date within {$from_date} to {$to_date}.
+  {/if}
+ </div>
+ <div class="header_menu">
+  {if isset($rss_link) }
+   <a href="{$rss_link}" target="_blank" title="RSS feed"><img src="{$web_path}/resources/rss.png" /></a>
+  {/if}
+ </div>
+</div>
+
+<!-- if result of a tag-search is displayed, show the selected tags
+     with some small pictures in a bar. -->
+
+{ if isset($tag_result) }
+<!-- seperator -->
+ <div class="tagresult"></div>
+ <!-- /seperator -->
+ <div class="tagresulttags" style="float: left;">
+  Tags:
+ </div>
+ <div class="tagresulttags">
+  { $selected_tags }
+ </div>
+{ /if }
+
+<!-- the photo matrix itself -->
+
+<div id="index">
+
+ {section name="thumb" loop=$thumbs step=1}
+
+  {if isset($images[thumb]) }
+
+   <div class="thumb" style="width: { $thumb_container_width }px; height: { $thumb_container_height }px;">
+    { if isset($user_friendly_url) }
+    <a href="{$web_path}/photoview/{$images[thumb]}" onclick="showPhoto({$images[thumb]}, 'scrollup'); return false;" id="thumblink{$images[thumb]}" name="image{$img_id[thumb]}" class="thumblink" onfocus="click(this);" title="{$img_title[thumb]}">
+    { else }
+    <a href="{$web_path}/index.php?mode=showp&amp;id={$images[thumb]}" onclick="showPhoto({$images[thumb]}, 'scrollup'); return false;" id="thumblink{$images[thumb]}" name="image{$img_id[thumb]}" class="thumblink" onfocus="click(this);" title="{$img_title[thumb]}">
+    { /if }
+     <img class="thumb" id="thumbimg{$images[thumb]}" width="{$img_width[thumb]}" height="{$img_height[thumb]}" src="{$web_path}/phpfspot_img.php?idx={$images[thumb]}&width={$width}" />
+     <br />
+    {$img_name[thumb]}
+    </a>
+    <!-- show lightbox eyes, if enabled -->
+    { if isset($use_lightbox) }
+    <a href="{$web_path}/phpfspot_img.php?idx={$images[thumb]}&amp;width={$preview_width}" alt="thumb_{$images[thumb]}" rel="lightbox[photoidx]" title="Preview of {$img_fullname[thumb]}"><img src="{$web_path}/resources/eyes.png" /></a>
+    { /if }
+    <!-- show F-Spot photo rating value, if available -->
+    { if isset($img_rating[thumb]) }
+     <br />
+     {section name="rating" loop=$img_rating[thumb] step=1}
+      <img src="{$web_path}/resources/star.png" />
+     {/section}
+    { /if }
+   </div>
+
+  {/if}
+
+ {/section}
+
+</div>
+<br class="cb" />
+<div class="indexnavigation">
+
+ <!-- the right nav arrow -->
+ <div class="indexnavigationright">
+ { if !isset($next_url) || $next_url == "" }
+  { if $count != 0 }
+   <img src="{$web_path}/resources/arrow_right_gray.png" alt="last page reached" />
+  { /if }
+ { else }
+  <a href="{$next_url}" id="next_link" title="click for the next page (right cursor)">
+   <img src="{$web_path}/resources/arrow_right.png" alt="next photo" />
+  </a>
+ { /if}
+ </div>
+
+ <!-- the left nav arrow -->
+ <div class="indexnavigationleft">
+ { if !isset($previous_url) || $previous_url == "" }
+  { if $count != 0 }
+   <img src="{$web_path}/resources/arrow_left_gray.png" alt="first page reached" />
+  { /if }
+ { else }
+  <a href="{$previous_url}" id="prev_link" title="click for the previous page (left cursor)">
+  <img src="{$web_path}/resources/arrow_left.png" alt="previous photo" />
+  </a>
+ { /if }
+ </div>
+
+ <!-- the middle page selector -->
+ <div class="indexnavigationcenter">
+ { if isset($page_selector) && $page_selector != "" }
+  {$page_selector}
+ { /if}
+ </div>
+</div>
+<br class="cb" />
+<script type="text/javascript" language="JavaScript">
+<!--
+   // image preloading
+   //
+   // these few javascript lines will try to speed up loading all the photo
+   // thumbnails. An array of all photos to display will be built written
+   // by the smarty-template. The js-code will then loop through this array
+   // and invoke loading of each photo. Sadly this does not work good on all
+   // browsers.
+   { counter start=-1 }
+
+   var current;
+   var image_urls = new Array();
+   var last_thumb;
+
+   {section name="thumb" loop=$thumbs step=1}
+      {if isset($images[thumb]) }
+         image_urls[{counter}] = '{$web_path}/phpfspot_img.php?idx={$images[thumb]}&width={$width}';
+         last_thumb = {$images[thumb]};
+      {/if}
+   {/section}
+
+   preloadPhotos(image_urls);
+
+   // auto-scroll
+   //
+   // if browser is to far down the page, that he can't see the photo at all
+   // scroll it up so that at least the last photo becomes visisble.
+   { literal }
+
+   var ywnd = 0;
+   var yimg = 0;
+   // check where we are with the browser
+   if (window.pageYOffset) {
+      ywnd = window.pageYOffset;
+   } else if (document.body && document.body.scrollTop) {
+      ywnd = document.body.scrollTop;
+   }
+   // check the y-pos of the last thumbnail
+   if(thumbimg = document.getElementById('thumbimg' + last_thumb)) {
+      yimg = findPos(thumbimg,'top');
+   }
+   // if the browser-window is scrolled further then the last_thumb, scroll back
+   if(ywnd > yimg) {
+      window.scrollTo(0, yimg-100);
+   }
+
+   { /literal }
+   // auto-scroll
+
+-->
+</script>
+<!-- /Photo Index -->
diff --git a/themes/arun/templates/search.tpl b/themes/arun/templates/search.tpl
new file mode 100644
index 0000000..acbcf3d
--- /dev/null
+++ b/themes/arun/templates/search.tpl
@@ -0,0 +1,72 @@
+<span class="tags">
+Search:
+</span>
+<form action="" onsubmit="startSearch(); return false;">
+<div class="searchfor">
+<table>
+ <tr>
+  <td>Tag:</td>
+  <td>
+   { if isset($use_autocomplete) }
+   <input type="text" name="searchfor_tag" id="searchfor_tag" value="{$searchfor_tag}" size="15" acdropdown="true" autocomplete_list="url:rpc.php?action=getxmltaglist&search=[S]&length=10" />
+   { literal }
+   <script type="text/javascript">
+      var options = {
+         script: "rpc.php?action=getxmltaglist&",
+         varname: "search",
+         json: false,
+         maxresults: 15
+      };
+      var as = new bsn.AutoSuggest('searchfor_tag', options);
+   </script>
+   { /literal }
+   { else }
+   <input type="text" name="searchfor_tag" value="{ if isset($searchfor_tag) }{$searchfor_tag}{ /if }" size="15" />
+   { /if }
+  </td>
+  <td>
+   <input type="image" class="submit" src="{$web_path}/resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+  </td>
+ </tr>
+ <tr>
+  <td>Date:</td>
+  <td class="nowarp">
+   { if ! isset($date_search_enabled) }
+    <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();" />
+   { else }
+    <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();" checked="checked" />
+   { /if }
+   consider date-range
+  </td>
+  <td>&nbsp;</td>
+ </tr>
+ <tr>
+  <td>&nbsp;</td>
+  <td>{$search_from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="frompic" alt="from" /></a></td>
+ </tr>
+ <tr>
+  <td>&nbsp;</td>
+  <td>{$search_to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="topic" alt="to" /></a></td>
+  <td>
+   <input type="image" class="submit" src="{$web_path}/resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+  </td>
+ </tr>
+ { if isset($has_rating) }
+ { /if }
+ <tr>
+  <td>
+   Sort-Order:&nbsp;
+  </td>
+  <td>
+   <select name="sort_order" onchange="update_sort_order(this);">
+    { sort_select_list }
+   </select>
+  </td>
+  <td>
+   &nbsp;
+  </td>
+ </tr>
+</table>
+</div>
+</form>
+<div id='calendar'></div>
diff --git a/themes/arun/templates/single_photo.tpl b/themes/arun/templates/single_photo.tpl
new file mode 100644
index 0000000..25235df
--- /dev/null
+++ b/themes/arun/templates/single_photo.tpl
@@ -0,0 +1,135 @@
+<!-- Single photo -->
+<div class="header">
+ <div class="header_title">
+  <b>Photo {$image_name}</b><br />
+  {if $photo_count > 0}
+   {$photo_number} of {$photo_count}
+   {if $photo_count == 1}
+    Photo
+   {else}
+    Photos
+   {/if}
+   {if isset($description) && $description != "" }
+    -&nbsp;{$description}<br />
+   {/if}
+  {/if}
+ </div>
+ <div class="header_menu">
+  <a href="javascript:zoom(-10);" title="zoom_out" onclick="click(this);"><img src="{$web_path}/resources/zoom-out.png" /></a>
+  <a href="javascript:zoom(0);" title="zoom_100" onclick="click(this);"><img src="{$web_path}/resources/zoom-100.png" /></a>
+  <a href="javascript:zoom(10);" title="zoom_in" onclick="click(this);"><img src="{$web_path}/resources/zoom-in.png" /></a>
+  <a href="javascript:startAutoBrowse();" title="auto browsing"><img id="autobrowse_ico" src="{$web_path}/resources/16_play.png" />&nbsp;Auto-Browse</a>
+  {if isset($extern_link) }
+   <a href="{$extern_link}" title="Use this link to return to the current view"><img src="{$web_path}/resources/link.png" />&nbsp;External Link</a>
+  {/if}
+  <a href="{$image_url_full}" title="orig_image" target="_blank" onclick="click(this);"><img src="{$web_path}/resources/original.png" alt="original resolution" />&nbsp;Fullsize</a>
+ </div>
+</div>
+
+<p class="cb">
+
+ <div id="photo_details">
+   { if isset($ExifMadeWith) }
+   <u><img src="{$web_path}/resources/camera.png" alt="camera icon" />&nbsp;Image taken with:</u><br />
+   {$ExifMadeWith}<br />
+   { /if }
+   { if isset($ExifMadeOn) }
+   <u><img src="{$web_path}/resources/date.png" alt="calendar icon" />&nbsp;Image made on:</u><br />
+   {$ExifMadeOn}<br />
+   { /if }
+   { if isset($ExifOrigResolution) }
+   <u><img src="{$web_path}/resources/image.png" alt="resolution icon" />&nbsp;Original resolution:</u><br />
+   {$ExifOrigResolution}px<br />
+   { /if }
+   <u>Size:</u>&nbsp;{$ExifFileSize}<br />
+   { if isset($image_rating) && $image_rating > 0 }
+    <u><img src="{$web_path}/resources/rating.png" alt="rating" />&nbsp;Rating:</u><br />
+    {section name="rating" loop=$image_rating step=1}
+     <img src="{$web_path}/resources/star.png" />
+    {/section}
+    <br />
+   { /if }
+   { if isset($has_versions) }
+    <br />
+    Versions:<br />
+    <select onchange="update_photo_version(this, {$photo});">
+    { photo_version_select_list photo=$photo current=$version }
+    </select>
+    <br />
+   { /if }
+   { if isset($tags) }
+    <br />
+    <u><img src="{$web_path}/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}');" onfocus="click(this);">{$name}</a><br />
+    { /foreach }
+   { /if }
+   <hr>
+   { if isset($prev_img) && isset($previous_url) }
+    <u><img src="{$web_path}/resources/photo.png" alt="photo icon" />&nbsp;Previous:</u><br />
+    <a href="{$previous_url}" onfocus="click(this);" id="prev_link">
+     <img src="{$web_path}/phpfspot_img.php?idx={$prev_img}&amp;width={$mini_width}" /><br />
+    </a>
+   { /if}
+   { if isset($next_img) && isset($next_url) }
+    <u><img src="{$web_path}/resources/photo.png" alt="photo icon" />&nbsp;Next:</u><br />
+    <a href="{$next_url}" onfocus="click(this);" id="next_link">
+     <img src="{$web_path}/phpfspot_img.php?idx={$next_img}&amp;width={$mini_width}" /><br />
+    </a>
+   { /if}
+ </div>
+
+ <!-- the photo itself -->
+
+ <div class="photo">
+ { if !isset($next_url) || $next_url == "" }
+  <a href="{$image_url}" onclick="showPhotoIndex(); return false;" onfocus="click(this);" name="photo">
+ { else }
+  <a href="{$image_url}" onclick="{$next_url}; return false;" onfocus="click(this);" title="click for the next photo" name="photo">
+ { /if }
+   <img src="{$image_url}" width="{$width}" height="{$height}" alt="{$image_filename}" name="photo" id="photo" />
+  </a>
+ </div>
+
+ <!-- navigation arrows -->
+
+ <div class="photonavigation">
+
+  <!-- previous -->
+  { if !isset($previous_url) || $previous_url == "" }
+   <img src="{$web_path}/resources/arrow_left_gray.png" alt="first photo reached" />
+  { else }
+   <a href="{$previous_url}" onfocus="click(this);" title="click for the previous photo (left cursor)">
+    <img src="{$web_path}/resources/arrow_left.png" alt="previous photo" />
+   </a>
+  { /if }
+
+  <!-- back to index -->
+   <a href="javascript:showPhotoIndex({$current_page}, {$current_img});" onfocus="click(this);" title="click to go back to the index">
+    <img src="{$web_path}/resources/arrow_up.png" alt="photo index" />
+   </a>
+
+  <!-- next -->
+  { if !isset($next_url) || $next_url == "" }
+   <img src="{$web_path}/resources/arrow_right_gray.png" alt="last photo reached" />
+  { else }
+   <a href="{$next_url}" onfocus="click(this);" title="click for the next photo (right cursor)">
+    <img src="{$web_path}/resources/arrow_right.png" alt="next photo" />
+   </a>
+  { /if}
+ </div>
+</p>
+<script type="text/javascript">
+<!--
+   if(autobrowse && document.getElementById("autobrowse_ico"))
+      document.getElementById("autobrowse_ico").src = '{$web_path}/resources/16_pause.png';
+
+   /* lets preload to previous and the next image to speedup */
+   var image_next = new Image();
+   image_next.src = "{$web_path}/phpfspot_img.php?idx={$next_img}&width={$photo_width}";
+   var image_prev = new Image();
+   image_prev.src = "{$web_path}/phpfspot_img.php?idx={$prev_img}&width={$photo_width}";
+
+-->
+</script>
+<!-- /Single photo -->
diff --git a/themes/arun/templates/slideshow.tpl b/themes/arun/templates/slideshow.tpl
new file mode 100644
index 0000000..1e64dbc
--- /dev/null
+++ b/themes/arun/templates/slideshow.tpl
@@ -0,0 +1,28 @@
+{include file="header.tpl"}
+ <script type="text/javascript" src="{$web_path}/slider/js/range.js"></script>
+ <script type="text/javascript" src="{$web_path}/slider/js/timer.js"></script>
+ <script type="text/javascript" src="{$web_path}/slider/js/slider.js"></script>
+ <link type="text/css" rel="StyleSheet" href="{$web_path}/slider/css/bluecurve/bluecurve.css" />
+ <body onload="startSlideShow('{$web_path}');" class="slideshow">
+  <div id="slide_navigation">
+   <a href="javascript:prevSlide();" onclick="click(this);" title="slive to previous photo"><img id="rew_ico" src="{$web_path}/resources/32_rew.png" /></a>
+   <a href="javascript:pauseSlideShow();" onclick="click(this);"><img id="pause_ico" src="{$web_path}/resources/32_pause.png" /></a>
+   <a href="javascript:startSlideShow();" onclick="click(this);" title="stop and revert slideshow"><img id="stop_ico" src="{$web_path}/resources/32_stop.png" /></a>
+   <a href="javascript:nextSlide();" onclick="click(this);" title="slide to next photo"><img id="fwd_ico" src="{$web_path}/resources/32_fwd.png" /></a>
+  </div>
+  <div id="slide_close">
+   <a href="javascript:window.close();" title="click to close slideshow">
+    <img id="slide_img" alt="slideshow_img" />
+   </a>
+  </div>
+  <form>
+   <div id="slider-1" tabIndex="1" onclick="if(this.blur)this.blur();">
+   <input id="slider-input-1" name="slider-input-1" onclick="if(this.blur)this.blur();" />
+   </div>
+  </form>
+  <div id="current_slide_time"></div>
+  <script type="text/javascript">
+   initSlider();
+  </script>
+ </body>
+{include file="footer.tpl"}
diff --git a/themes/arun/templates/tags.tpl b/themes/arun/templates/tags.tpl
new file mode 100644
index 0000000..e36ddda
--- /dev/null
+++ b/themes/arun/templates/tags.tpl
@@ -0,0 +1,15 @@
+<span class="tags selectedtags">
+Selected Tags:
+</span>
+ &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;
+{ if isset($preset_selected_tags) }
+ <div id="selected_tags">{ $preset_selected_tags }</div>
+{ else }
+ <div id="selected_tags">no tags selected</div>
+{ /if }
+<span class="tags availabletags">
+Available Tags:
+</span>
+<div id="available_tags">{ $preset_available_tags }</div>
diff --git a/themes/arun/templates/welcome.tpl b/themes/arun/templates/welcome.tpl
new file mode 100644
index 0000000..b169343
--- /dev/null
+++ b/themes/arun/templates/welcome.tpl
@@ -0,0 +1,32 @@
+<!-- welcome -->
+<div class="header">
+Welcome, these are some of my pictures.
+</div>
+<div class="welcome">
+
+
+ <p>
+ <span>
+   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=1" alt="random image" />
+ </span>
+ <span>
+   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=2" alt="random image" />
+ </span>
+ <span>
+   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=3" alt="random image" />
+ </span>
+ <span>
+   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=4" alt="random image" />
+ </span>
+ <span>
+   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=5" alt="random image" />
+ </span>
+ <span>
+   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=6" alt="random image" />
+ </span>
+</p>
+ <p>
+ <a href="javascript:showPhotoIndex();"> Index of all photos.</a>
+ </p>
+</div>
+<!-- /welcome -->