set everywhere the correct path to scripts, stylesheets, images, ...

Signed-off-by: Andreas Unterkircher <unki@netshadow.at>

11 files changed, 124 insertions, 110 deletions

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 99b0d7b..8305ba5 100644
--- a/phpfspot.class.php
+++ b/phpfspot.class.php
@@ -201,6 +201,8 @@ class PHPFSPOT {
       require_once "phpfspot_tmpl.php";
       $this->tmpl = new PHPFSPOT_TMPL();
 
+      $this->tmpl->assign('web_path', $this->cfg->web_path);
+
       /* check if all necessary indices exist */
       $this->checkDbIndices();
 
@@ -2437,7 +2439,6 @@ class PHPFSPOT {
    public function whatToDo()
    {
       if(isset($_SESSION['current_photo']) && $_SESSION['start_action'] == 'showp') {
-         return "show_photo";
       }
       elseif(isset($_SESSION['selected_tags']) && !empty($_SESSION['selected_tags'])) {
          return "showpi_tags";
@@ -2446,8 +2447,6 @@ class PHPFSPOT {
          return "showpi";
       }
 
-      return "nothing special";
-
    } // whatToDo()
 
    /**
@@ -2771,15 +2770,7 @@ class PHPFSPOT {
     */
    private function get_phpfspot_url()
    {
-      if($this->cfg->web_path == "/")
-         $web_path = "";
-      /* remove trailing slash */
-      elseif(preg_match('/\/$/', $this->cfg->web_path))
-         $web_path = preg_replace('/\/$/', '', $this->cfg->web_path);
-      else
-         $web_path = $this->cfg->web_path;
-
-      return $this->get_web_protocol() ."://". $this->get_server_name() . $web_path;
+      return $this->get_web_protocol() ."://". $this->get_server_name() . $this->cfg->web_path;
 
    } // get_phpfspot_url()
 
@@ -2973,9 +2964,11 @@ class PHPFSPOT {
 
       }
 
-      /* check for pending slash on web_path */
-      if(!preg_match("/\/$/", $this->cfg->web_path))
-         $this->cfg->web_path.= "/";
+      /* remove trailing slash, if set */
+      if($this->cfg->web_path == "/")
+         $this->cfg->web_path = "";
+      elseif(preg_match('/\/$/', $this->cfg->web_path))
+         $this->cfg->web_path = preg_replace('/\/$/', '', $this->cfg->web_path);
 
       return $this->runtime_error;
 
@@ -3092,7 +3085,11 @@ class PHPFSPOT {
       
    } // get_tag_name()
 
-
+   /**
+    * parse user friendly url which got rewritten by the websever
+    * @param string $request_uri
+    * @return string
+    */
    private function parse_user_friendly_url($request_uri)
    {
       if(preg_match('/\/photoview\/|\/photo\/|\/tag\//', $request_uri)) {
@@ -3105,6 +3102,7 @@ class PHPFSPOT {
          switch($options[1]) {
             case 'photoview':
                if(is_numeric($options[2])) {
+                  $_GET['mode'] = 'showp';
                   return $this->showPhoto($options[2]);
                }
                break;
diff --git a/phpfspot.js b/phpfspot.js
index 47ebe32..7dfdcc8 100644
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -42,7 +42,7 @@ function showImage(id, scrollup)
    }
 
    /* fetch single-photo view from server */
-   HTML_AJAX.replace(content, encodeURI('rpc.php?action=showphoto&id=' + id));
+   HTML_AJAX.replace(content, encodeURI(web_path + '/rpc.php?action=showphoto&id=' + id));
 
    /* scroll the window up to the top */
    if(scrollup != undefined) {
@@ -101,7 +101,7 @@ function findPos(obj, direction) {
 function showCredits()
 {
    var credits = document.getElementById("content");
-   credits.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=showcredits'));
+   credits.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=showcredits'));
 
 } // showCredits()
 
@@ -136,7 +136,7 @@ function Tags(mode, id)
       objTemp['mode'] = id.value;
    }
 
-   var retr = HTML_AJAX.post('rpc.php', objTemp);
+   var retr = HTML_AJAX.post(web_path + '/rpc.php', objTemp);
    if(retr == "ok") {
       refreshAvailableTags();
       refreshSelectedTags();
@@ -159,8 +159,10 @@ function refreshAvailableTags()
 {
    // update available tags
    var avail_tags = document.getElementById('available_tags');
-   avail_tags.innerHTML = "Loading...";
-   avail_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_available_tags'));
+   if(avail_tags != undefined) {
+      avail_tags.innerHTML = "Loading...";
+      avail_tags.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=show_available_tags'));
+   }
 
 } // refreshAvailableTags()
 
@@ -174,8 +176,10 @@ function refreshSelectedTags()
 {
    // update selected tags
    var selected_tags = document.getElementById("selected_tags");
-   selected_tags.innerHTML = "Loading...";
-   selected_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_selected_tags'));
+   if(selected_tags != undefined) {
+      selected_tags.innerHTML = "Loading...";
+      selected_tags.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=show_selected_tags'));
+   }
 
 } // refreshSelectedTags()
 
@@ -188,7 +192,7 @@ function refreshSelectedTags()
  */
 function showPhotoIndex(begin_with, last_photo)
 {
-   var url = "rpc.php?action=show_photo_index";
+   var url = web_path + "/rpc.php?action=show_photo_index";
    if(begin_with != undefined)
       url = url + '&begin_with=' + begin_with;
    if(last_photo != undefined)
@@ -284,7 +288,7 @@ function startSearch()
       objTemp['to'] = to;
    }
 
-   var retr = HTML_AJAX.post('rpc.php', objTemp);
+   var retr = HTML_AJAX.post(web_path + '/rpc.php', objTemp);
    if(retr == "ok") {
       refreshAvailableTags();
       refreshSelectedTags();
@@ -329,7 +333,7 @@ function setViewMode(mode)
 {
    var exprt = document.getElementById('output');
    exprt.innerHTML = "Loading...";
-   exprt.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_export&mode=' + mode));
+   exprt.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_export&mode=' + mode));
 
 } // setViewMode()
 
@@ -354,7 +358,8 @@ function clearSearch()
  */
 function AskServerWhatToDo()
 {
-   return HTML_AJAX.grab(encodeURI('rpc.php?action=what_to_do'));
+   return HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=what_to_do'));
+
 } // AskServerWhatToDo()
 
 /**
@@ -364,9 +369,19 @@ function AskServerWhatToDo()
  * the first time. It will fetch the tag-lists and will then
  * switch to the right view, which the browser got told from
  * the server (maybe someone hit the refresh button...).
+ *
+ * as parameter the server can set the correct webpath.
+ * espacialley when using user-friendly url's, the browser
+ * does not know the correct URLs to address images, stylesheets,
+ * ... then.
  */
-function init_phpfspot(mode)
+function init_phpfspot(srv_webpath)
 {
+   if(srv_webpath != undefined)
+      web_path = srv_webpath;
+   else
+      web_path = '';
+
    /* always load list of available tags */
    refreshAvailableTags();
 
@@ -415,7 +430,7 @@ function setBackGrdColor(item, color)
  */
 function getPhotoToShow()
 {
-   var photo_to_show = HTML_AJAX.grab(encodeURI('rpc.php?action=get_photo_to_show'));
+   var photo_to_show = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_photo_to_show'));
 
    // if no image needs to be shown, return false from here
    if(photo_to_show == "")
@@ -525,7 +540,7 @@ function showCalendar(date_box, click_obj)
    if(calendar.style.visibility == "" || calendar.style.visibility == 'hidden') {
       calendar.style.visibility = 'visible';
       calendar.innerHTML = "Loading...";
-      calendar.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_calendar_matrix&year=' + year + '&month=' + month));
+      calendar.innerHTML = HTML_AJAX.grab(encodeURI(web_path +'/rpc.php?action=get_calendar_matrix&year=' + year + '&month=' + month));
       calendar_shown = 1;
    }
    else {
@@ -553,7 +568,7 @@ function setMonth(year, month, day)
 {
    var calendar = document.getElementById('calendar');
    calendar.innerHTML = "Loading...";
-   calendar.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=get_calendar_matrix&year='+ year +'&month='+ month +'&day='+ day));
+   calendar.innerHTML = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_calendar_matrix&year='+ year +'&month='+ month +'&day='+ day));
 }
 
 /**
@@ -574,7 +589,7 @@ function setCalendarDate(year, month, day)
  */
 function resetAll()
 {
-   HTML_AJAX.grab(encodeURI('rpc.php?action=reset'));
+   HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=reset'));
    clearSearch();
    refreshAvailableTags();
    refreshSelectedTags();
@@ -652,15 +667,15 @@ function noop() {}
 function startSlideShow()
 {
    if(!sliding) {
-      HTML_AJAX.grab(encodeURI('rpc.php?action=reset_slideshow'));
+      HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=reset_slideshow'));
       nextSlide();
       sliding = setInterval("nextSlide()", sliding_time*1000);
-      document.getElementById('stop_ico').src = "resources/32_stop.png";
+      document.getElementById('stop_ico').src = web_path + "/resources/32_stop.png";
    }
    else {
       clearInterval(sliding);
       sliding = 0;
-      document.getElementById('stop_ico').src = "resources/32_play.png";
+      document.getElementById('stop_ico').src = web_path + "/resources/32_play.png";
    }
 
 } // startSlideShow()
@@ -670,7 +685,7 @@ function startSlideShow()
  */
 function nextSlide()
 {
-   var next_img = HTML_AJAX.grab(encodeURI('rpc.php?action=get_next_slideshow_img'));
+   var next_img = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_next_slideshow_img'));
    document.getElementById('slide_img').src = next_img;
 
 } // nextSlide()
@@ -680,7 +695,7 @@ function nextSlide()
  */
 function prevSlide()
 {
-   var prev_img = HTML_AJAX.grab(encodeURI('rpc.php?action=get_prev_slideshow_img'));
+   var prev_img = HTML_AJAX.grab(encodeURI(web_path + '/rpc.php?action=get_prev_slideshow_img'));
    document.getElementById('slide_img').src = prev_img;
 
 } // prevSlide()
@@ -693,12 +708,12 @@ function pauseSlideShow()
    if(!sliding_paused) {
       sliding_paused = 1;
       clearInterval(sliding);
-      document.getElementById('pause_ico').src = "resources/32_play.png";
+      document.getElementById('pause_ico').src = web_path + "/resources/32_play.png";
    }
    else {
       sliding_paused = 0;
       sliding = setInterval("nextSlide()", sliding_time*1000);
-      document.getElementById('pause_ico').src = "resources/32_pause.png";
+      document.getElementById('pause_ico').src = web_path + "/resources/32_pause.png";
    }
 
 } // pauseSlideShow()
@@ -715,7 +730,7 @@ function startAutoBrowse()
    else {
       clearInterval(autobrowse);
       autobrowse = 0;
-      document.getElementById('autobrowse_ico').src = "resources/32_play.png";
+      document.getElementById('autobrowse_ico').src = web_path + "/resources/32_play.png";
    }
 
 } // startAutoBrowser()
@@ -728,12 +743,12 @@ function autoBrowse()
    if(document.getElementById('next_link')) {
       var next_link = document.getElementById('next_link').href;
       window.location.href = next_link;
-      document.getElementById('autobrowse_ico').src = "resources/32_pause.png";
+      document.getElementById('autobrowse_ico').src = web_path + "/resources/32_pause.png";
    }
    /* we have reached the last photo */
    else {
       if(ab_ico = document.getElementById('autobrowse_ico'))
-         ab_ico.src = "resources/32_play.png";
+         ab_ico.src = web_path + "/resources/32_play.png";
       clearInterval(autobrowse);
    }
 
@@ -774,7 +789,7 @@ function update_sort_order(obj)
    var objTemp = new Object();
    objTemp['value'] = obj.options[obj.selectedIndex].value;
 
-   var retr = HTML_AJAX.post('rpc.php?action=update_sort_order', objTemp);
+   var retr = HTML_AJAX.post(web_path + '/rpc.php?action=update_sort_order', objTemp);
 
    if(retr == "ok") {
       showPhotoIndex();
@@ -843,3 +858,4 @@ var origHeight;
 var origWidth;
 // position of the last shown photo in photo-index
 var photo_details_pos;
+var web_path;
diff --git a/themes/default/templates/export.tpl b/themes/default/templates/export.tpl
index 3647863..7f6f2de 100644
--- a/themes/default/templates/export.tpl
+++ b/themes/default/templates/export.tpl
@@ -7,7 +7,7 @@
     <option value="MoinMoin">MoinMoin Wiki</option>
     <option value="MoinMoinList">MoinMoin Wiki List</option>
    </select>
-   <input type="image" src="resources/doit.png" alt="Switch View" />
+   <input type="image" src="{$web_path}/resources/doit.png" alt="Switch View" />
   </form>
   <div id="output"></div>
  </body>
diff --git a/themes/default/templates/header.tpl b/themes/default/templates/header.tpl
index e946a5b..1cd9cb4 100644
--- a/themes/default/templates/header.tpl
+++ b/themes/default/templates/header.tpl
@@ -3,19 +3,19 @@
  <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" />
+  <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 $use_lightbox }
-  <script type="text/javascript" src="lightbox2/js/prototype.js"></script>
-  <script type="text/javascript" src="lightbox2/js/scriptaculous.js?load=effects,builder"></script>
-  <script type="text/javascript" src="lightbox2/js/lightbox.js"></script>
-  <link rel="stylesheet" href="lightbox2/css/lightbox.css" type="text/css" media="screen" />
+  <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 $use_autocomplete }
-  <script src="autosuggest/js/bsn.AutoSuggest_2.1.3_comp.js"></script>
-  <link rel="stylesheet" href="autosuggest/css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
+  <script 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/default/templates/index.tpl b/themes/default/templates/index.tpl
index 59b4b56..468239a 100644
--- a/themes/default/templates/index.tpl
+++ b/themes/default/templates/index.tpl
@@ -1,10 +1,10 @@
 {include file="header.tpl"}
- <body onload="init_phpfspot();">
+ <body onload="init_phpfspot('{$web_path}');">
  
   <!-- loading -->
 
   <div id="HTML_AJAX_LOADING">
-   <img src="resources/loading.gif" style="vertical-align: middle;" />&nbsp;&nbsp;Loading...
+   <img src="{$web_path}/resources/loading.gif" style="vertical-align: middle;" />&nbsp;&nbsp;Loading...
   </div>
 
   <!-- top menu -->
@@ -12,13 +12,13 @@
   <div class="menu">
    <div class="icons">
     <a href="javascript:showPhotoIndex();" onclick="click(this);" title="Show Photo Index (CTRL+ALT+i)">
-     <img src="resources/photo_index.png" alt="photo index" />
+     <img src="{$web_path}/resources/photo_index.png" alt="photo index" />
     </a>
     <a href="javascript:resetAll();" onclick="click(this);" title="Reset selected-tags and search results (CTRL+ALT+r)">
-     <img src="resources/reload.png" alt="reset tags" />
+     <img src="{$web_path}/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" />
+     <img src="{$web_path}/resources/credits.png" alt="show credits" />
     </a>
    </div>
    <div class="logo">&nbsp;{$page_title}</div>
diff --git a/themes/default/templates/photo_index.tpl b/themes/default/templates/photo_index.tpl
index 4a30a46..2c1b6ac 100644
--- a/themes/default/templates/photo_index.tpl
+++ b/themes/default/templates/photo_index.tpl
@@ -31,16 +31,16 @@
  </div>
  <div style="text-align: right">
   {if $slideshow_link }
-   <a href="{$slideshow_link}" title="Slideshow" target="_blank"><img src="resources/slideshow.png" />&nbsp;Slideshow</a>
+   <a href="{$slideshow_link}" title="Slideshow" target="_blank"><img src="{$web_path}/resources/slideshow.png" />&nbsp;Slideshow</a>
   {/if}
   {if $extern_link }
-   <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" />&nbsp;External Link</a>
+   <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} 
   {if $export_link }
-   <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" />&nbsp;Export</a>
+   <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="{$web_path}/resources/export.png" />&nbsp;Export</a>
   {/if}
   {if $rss_link }
-   <a href="{$rss_link}" target="_blank" title="RSS feed"><img src="resources/rss.png" />&nbsp;RSS-Feed</a>
+   <a href="{$rss_link}" target="_blank" title="RSS feed"><img src="{$web_path}/resources/rss.png" />&nbsp;RSS-Feed</a>
   {/if}
  </div>
 </div>
@@ -73,7 +73,7 @@
     {$img_name[thumb]}
     </a>
     { if $use_lightbox }
-    <a href="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="resources/eyes.png" /></a>
+    <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 }
    </div>
 
@@ -89,11 +89,11 @@
  <div style="float: right; width: 40px; margin-right: 0px; padding-right: 10px;">
  { if $next_url == "" }
   { if $count != 0 }
-   <img src="resources/arrow_right_gray.png" alt="last page reached" />
+   <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="resources/arrow_right.png" alt="next photo" />
+   <img src="{$web_path}/resources/arrow_right.png" alt="next photo" />
   </a>
  { /if}
  </div>
@@ -102,11 +102,11 @@
  <div style="float: left; margin: 0px; padding-left: 10px; width: 40px;">
  { if $previous_url == "" }
   { if $count != 0 }
-   <img src="resources/arrow_left_gray.png" alt="first page reached" />
+   <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="resources/arrow_left.png" alt="previous photo" />
+  <img src="{$web_path}/resources/arrow_left.png" alt="previous photo" />
   </a>
  { /if }
  </div>
@@ -130,7 +130,7 @@
 
    {section name="thumb" loop=$thumbs step=1}
       {if $images[thumb] }
-         image_urls[{counter}] = 'phpfspot_img.php?idx={$images[thumb]}&width={$width}';
+         image_urls[{counter}] = '{$web_path}/phpfspot_img.php?idx={$images[thumb]}&width={$width}';
          last_thumb = {$images[thumb]};
       {/if}
    {/section}
diff --git a/themes/default/templates/search.tpl b/themes/default/templates/search.tpl
index f983c40..ca7042e 100644
--- a/themes/default/templates/search.tpl
+++ b/themes/default/templates/search.tpl
@@ -1,5 +1,5 @@
 <span style="vertical-align: middle; text-decoration: underline;">
- <img src="resources/loupe.png" alt="loupe" />Search:
+ <img src="{$web_path}/resources/loupe.png" alt="loupe" />Search:
 </span>
 <form action="" onsubmit="startSearch(); return false;">
 <div class="searchfor">
@@ -25,7 +25,7 @@
    { /if }
   </td>
   <td>
-   <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+   <input type="image" class="submit" src="{$web_path}/resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
   </td>
  </tr>
  <tr>
@@ -34,7 +34,7 @@
    <input type="text" name="searchfor_name" value="{$searchfor_name}" size="15" />
   </td>
   <td>
-   <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+   <input type="image" class="submit" src="{$web_path}/resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
   </td>
  </tr>
  <tr>
@@ -51,15 +51,15 @@
  </tr>
  <tr>
   <td>&nbsp;</td>
-  <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="resources/date.png" id="frompic"/></a></td>
+  <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="frompic"/></a></td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>
-   {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="resources/date.png" id="topic" /></a>
+   {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="topic" /></a>
   </td>
   <td>
-   <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+   <input type="image" class="submit" src="{$web_path}/resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
   </td>
  </tr>
  <tr>
diff --git a/themes/default/templates/single_photo.tpl b/themes/default/templates/single_photo.tpl
index 8526053..a9ecec4 100644
--- a/themes/default/templates/single_photo.tpl
+++ b/themes/default/templates/single_photo.tpl
@@ -15,50 +15,50 @@
   {/if}
  </div>
  <div style="text-align: right;">
-  <a href="javascript:zoom(-10);" title="zoom_out" onfocus="click(this);"><img src="resources/zoom-out.png" /></a>
-  <a href="javascript:zoom(0);" title="zoom_100" onfocus="click(this);"><img src="resources/zoom-100.png" /></a>
-  <a href="javascript:zoom(10);" title="zoom_in" onfocus="click(this);"><img src="resources/zoom-in.png" /></a>
- <a href="javascript:startAutoBrowse();" title="auto browsing"><img id="autobrowse_ico" src="resources/16_play.png" />&nbsp;Auto-Browse</a>
+  <a href="javascript:zoom(-10);" title="zoom_out" onfocus="click(this);"><img src="{$web_path}/resources/zoom-out.png" /></a>
+  <a href="javascript:zoom(0);" title="zoom_100" onfocus="click(this);"><img src="{$web_path}/resources/zoom-100.png" /></a>
+  <a href="javascript:zoom(10);" title="zoom_in" onfocus="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 $extern_link }
-   <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" />&nbsp;External Link</a>
+   <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" onfocus="click(this);"><img src="resources/original.png" alt="original resolution" />&nbsp;Fullsize</a>
+  <a href="{$image_url_full}" title="orig_image" target="_blank" onfocus="click(this);"><img src="{$web_path}/resources/original.png" alt="original resolution" />&nbsp;Fullsize</a>
  </div>
 </div>
 
 <div>
  <div id="photo_details" style="float: right; margin-top: 20px; margin-right: 20px;">
    { if $ExifMadeWith }
-   <u><img src="resources/camera.png" alt="camera icon" />&nbsp;Image taken with:</u><br />
+   <u><img src="{$web_path}/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 />
+   <u><img src="{$web_path}/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 />
+   <u><img src="{$web_path}/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 />
+    <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 $prev_img }
-    <u><img src="resources/photo.png" alt="photo icon" />&nbsp;Previous:</u><br />
+    <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="phpfspot_img.php?idx={$prev_img}&amp;width={$mini_width}" /><br />
+     <img src="{$web_path}/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 />
+    <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="phpfspot_img.php?idx={$next_img}&amp;width={$mini_width}" /><br />
+     <img src="{$web_path}/phpfspot_img.php?idx={$next_img}&amp;width={$mini_width}" /><br />
     </a>
    { /if}
  </div>
@@ -79,20 +79,20 @@
 
  <div style="margin-left: 20px;">
   { if $previous_url == "" }
-   <img src="resources/arrow_left_gray.png" alt="first photo reached" />
+   <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="resources/arrow_left.png" alt="previous photo" />
+    <img src="{$web_path}/resources/arrow_left.png" alt="previous photo" />
    </a>
   { /if }
    <a href="javascript:showPhotoIndex({$current_page}, {$current_img});" onfocus="click(this);" title="click to go back to the index">
-    <img src="resources/arrow_up.png" alt="photo index" />
+    <img src="{$web_path}/resources/arrow_up.png" alt="photo index" />
    </a>
   { if $next_url == "" }
-   <img src="resources/arrow_right_gray.png" alt="last photo reached" />
+   <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="resources/arrow_right.png" alt="next photo" />
+    <img src="{$web_path}/resources/arrow_right.png" alt="next photo" />
    </a>
   { /if}
  </div>
@@ -104,9 +104,9 @@
 
    /* lets preload to previous and the next image to speedup */
    var image_next = new Image();
-   image_next.src = "phpfspot_img.php?idx={$next_img}&width={$photo_width}";
+   image_next.src = "{$web_path}/phpfspot_img.php?idx={$next_img}&width={$photo_width}";
    var image_prev = new Image();
-   image_prev.src = "phpfspot_img.php?idx={$prev_img}&width={$photo_width}";
+   image_prev.src = "{$web_path}/phpfspot_img.php?idx={$prev_img}&width={$photo_width}";
 
 -->
 </script>
diff --git a/themes/default/templates/slideshow.tpl b/themes/default/templates/slideshow.tpl
index c5e8ba5..84b6a6b 100644
--- a/themes/default/templates/slideshow.tpl
+++ b/themes/default/templates/slideshow.tpl
@@ -1,14 +1,14 @@
 {include file="header.tpl"}
- <script type="text/javascript" src="slider/js/range.js"></script>
- <script type="text/javascript" src="slider/js/timer.js"></script>
- <script type="text/javascript" src="slider/js/slider.js"></script>
- <link type="text/css" rel="StyleSheet" href="slider/css/bluecurve/bluecurve.css" />
+ <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();" class="slideshow">
   <div id="slide_navigation">
-   <a href="javascript:prevSlide();" onclick="click(this);" title="slive to previous photo"><img id="rew_ico" src="resources/32_rew.png" /></a>
-   <a href="javascript:pauseSlideShow();" onclick="click(this);"><img id="pause_ico" src="resources/32_pause.png" /></a>
-   <a href="javascript:startSlideShow();" onclick="click(this);" title="stop and revert slideshow"><img id="stop_ico" src="resources/32_stop.png" /></a>
-   <a href="javascript:nextSlide();" onclick="click(this);" title="slide to next photo"><img id="fwd_ico" src="resources/32_fwd.png" /></a>
+   <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 style="margin: 0 auto; padding: 10px;">
    <a href="javascript:window.close();" title="click to close slideshow">
diff --git a/themes/default/templates/tags.tpl b/themes/default/templates/tags.tpl
index 42a20ff..a4b1e0a 100644
--- a/themes/default/templates/tags.tpl
+++ b/themes/default/templates/tags.tpl
@@ -1,9 +1,9 @@
 <span style="vertical-align: middle; text-decoration: underline;">
- <img src="resources/available_tags.png" alt="available tags" />Available Tags:
+ <img src="{$web_path}/resources/available_tags.png" alt="available tags" />Available Tags:
 </span>
 <div id="available_tags"></div>
 <span style="vertical-align: middle; text-decoration: underline;">
- <img src="resources/selected_tags.png" alt="selected tags" />Selected Tags:
+ <img src="{$web_path}/resources/selected_tags.png" alt="selected tags" />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" />||
diff --git a/themes/default/templates/welcome.tpl b/themes/default/templates/welcome.tpl
index 4629fda..6e6613c 100644
--- a/themes/default/templates/welcome.tpl
+++ b/themes/default/templates/welcome.tpl
@@ -5,7 +5,7 @@
 <div style="padding: 10px; margin-left: 10px; margin-right: 10px;">
 
  <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-  <img src="phpfspot_img.php?idx=rand&width=150&i=1">
+  <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=1">
  </div>
  <div>
   This application targets to provide an easy way, to presentate your F-Spot<br />
@@ -16,7 +16,7 @@
  <br class="clearboth">
 
  <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-  <img src="phpfspot_img.php?idx=rand&width=150&i=2">
+  <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=2">
  </div>
  <div>
   You can adapt this welcome page in the file "welcome.tpl" in the template<br />
@@ -26,7 +26,7 @@
  <br class="clearboth">
 
  <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-  <img src="phpfspot_img.php?idx=rand&width=150&i=3">
+  <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=3">
  </div>
  <div>
  <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>