From: Andreas Unterkircher <unki@netshadow.at>
Date: Sun, 11 May 2008 07:42:36 +0000 (+0200)
Subject: fix conflicts during merge of Arun's tree
X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=phpfspot.git;a=commitdiff_plain;h=d97a057346bebb98be293d903a86987273cbee3e;hp=-c

fix conflicts during merge of Arun's tree

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

d97a057346bebb98be293d903a86987273cbee3e
diff --combined phpfspot.class.php
index 49d0c7d,eba23ca..1e07ccc
--- a/phpfspot.class.php
+++ b/phpfspot.class.php
@@@ -201,8 -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();
  
@@@ -246,11 -244,6 +246,11 @@@
        $this->tmpl->assign('current_condition', $_SESSION['tag_condition']);
        $this->tmpl->assign('template_path', 'themes/'. $this->cfg->theme_name);
  
 +      /* parse URL */
 +      if($this->is_user_friendly_url()) {
 +         $content = $this->parse_user_friendly_url($_SERVER['REQUEST_URI']);
 +      }
 +
        if(isset($_GET['mode'])) {
  
           $_SESSION['start_action'] = $_GET['mode'];
@@@ -313,19 -306,7 +313,19 @@@
        $this->tmpl->register_function("sort_select_list", array(&$this, "smarty_sort_select_list"), false);
        $this->tmpl->assign('from_date', $this->get_calendar('from'));
        $this->tmpl->assign('to_date', $this->get_calendar('to'));
 -      $this->tmpl->assign('content_page', 'welcome.tpl');
 +
 +      $this->tmpl->assign('preset_selected_tags', $this->getSelectedTags());
 +      $this->tmpl->assign('preset_available_tags', $this->getAvailableTags());
 +
 +      if(!isset($content)) {
 +         if(isset($_SESSION['selected_tags']) && !empty($_SESSION['selected_tags']))
 +            $this->tmpl->assign('initial_content', $this->showPhotoIndex());
 +         else
 +            $this->tmpl->assign('initial_content', $this->tmpl->fetch('welcome.tpl'));
 +      }
 +      else
 +         $this->tmpl->assign('initial_content', $content);
 +
        $this->tmpl->show("index.tpl");
  
     } // show()
@@@ -628,15 -609,8 +628,15 @@@
        $this->tmpl->assign('ExifOrigResolution', $meta_res);
        $this->tmpl->assign('ExifFileSize', $meta_size);
   
 -      $this->tmpl->assign('image_url', 'phpfspot_img.php?idx='. $photo ."&amp;width=". $this->cfg->photo_width);
 -      $this->tmpl->assign('image_url_full', 'phpfspot_img.php?idx='. $photo);
 +      if($this->is_user_friendly_url()) {
 +         $this->tmpl->assign('image_url', '/photo/'. $photo ."/". $this->cfg->photo_width);
 +         $this->tmpl->assign('image_url_full', '/photo/'. $photo);
 +      }
 +      else {
 +         $this->tmpl->assign('image_url', 'phpfspot_img.php?idx='. $photo ."&amp;width=". $this->cfg->photo_width);
 +         $this->tmpl->assign('image_url_full', 'phpfspot_img.php?idx='. $photo);
 +      }
 +
        $this->tmpl->assign('image_filename', $this->parse_uri($details['uri'], 'filename'));
  
        $this->tmpl->assign('tags', $this->get_photo_tags($photo));
@@@ -657,7 -631,7 +657,7 @@@
        $this->tmpl->assign('photo_number', $i);
        $this->tmpl->assign('photo_count', count($all_photos));
  
 -      $this->tmpl->show("single_photo.tpl");
 +      return $this->tmpl->fetch("single_photo.tpl");
  
     } // showPhoto()
  
@@@ -734,15 -708,13 +734,15 @@@
           $b = '88';
  
           if(isset($this->tags[$key])) {
 -            $output.= "<a href=\"javascript:Tags('add', ". $key .");\" class=\"tag\" style=\"font-size: ". $size ."%; color: #". $r.$g.$b .";\">". $this->tags[$key] ."</a>, ";
 +            if($this->is_user_friendly_url())
 +               $output.= "<a href=\"". $this->cfg->web_path ."/tag/". $key ."\" onclick=\"Tags('add', ". $key ."); return false;\" class=\"tag\" style=\"font-size: ". $size ."%; color: #". $r.$g.$b .";\">". $this->tags[$key] ."</a>, ";
 +            else
 +               $output.= "<a href=\"". $this->cfg->web_path ."/index.php?mode=showpi\" onclick=\"Tags('add', ". $key ."); return false;\" class=\"tag\" style=\"font-size: ". $size ."%; color: #". $r.$g.$b .";\">". $this->tags[$key] ."</a>, ";
           }
 -
        }
  
        $output = substr($output, 0, strlen($output)-2);
 -      print $output;
 +      return $output;
  
     } // getAvailableTags()
  
@@@ -1182,7 -1154,6 +1182,7 @@@
      *
      * this function provides all the necessary information
      * for the photo index template.
 +    * @return string
      */
     public function showPhotoIndex()
     {
@@@ -1368,19 -1339,17 +1368,19 @@@
        $this->tmpl->assign('thumbs', $thumbs);
        $this->tmpl->assign('selected_tags', $this->getSelectedTags('img'));
  
 -      $this->tmpl->show("photo_index.tpl");
 +      $result = $this->tmpl->fetch("photo_index.tpl");
  
        /* if we are returning to photo index from an photo-view,
           scroll the window to the last shown photo-thumbnail.
           after this, unset the last_photo session variable.
        */
        if(isset($_SESSION['last_photo'])) {
 -         print "<script language=\"JavaScript\">moveToThumb(". $_SESSION['last_photo'] .");</script>\n";
 +         $result.= "<script language=\"JavaScript\">moveToThumb(". $_SESSION['last_photo'] .");</script>\n";
           unset($_SESSION['last_photo']);
        }
  
 +      return $result;
 +
     } // showPhotoIndex()
  
     /**
@@@ -1641,7 -1610,7 +1641,7 @@@
      */
     public function get_meta_informations($file)
     {
-       return exif_read_data($file);
+       return @exif_read_data($file);
  
     } // get_meta_informations()
  
@@@ -2294,7 -2263,7 +2294,7 @@@
  
        foreach($pictures as $picture) {
  
 -         $orig_url = $this->get_phpfspot_url() ."index.php?mode=showp&id=". $picture;
 +         $orig_url = $this->get_phpfspot_url() ."/index.php?mode=showp&id=". $picture;
           if($current_tags != "") {
              $orig_url.= "&tags=". $current_tags;
           } 
@@@ -2302,12 -2271,7 +2302,12 @@@
              $orig_url.= "&from_date=". $_SESSION['from_date'] ."&to_date=". $_SESSION['to_date'];
           }
  
 -         $thumb_url = $this->get_phpfspot_url() ."phpfspot_img.php?idx=". $picture ."&width=". $this->cfg->thumb_width;
 +         if($this->is_user_friendly_url()) {
 +            $thumb_url = $this->get_phpfspot_url() ."/photo/". $picture ."/". $this->cfg->thumb_width;
 +         }
 +         else {
 +            $thumb_url = $this->get_phpfspot_url() ."/phpfspot_img.php?idx=". $picture ."&width=". $this->cfg->thumb_width;
 +         }
  
           switch($mode) {
  
@@@ -2356,7 -2320,7 +2356,7 @@@
  
        foreach($pictures as $picture) {
  
 -         $orig_url = $this->get_phpfspot_url() ."index.php?mode=showp&id=". $picture;
 +         $orig_url = $this->get_phpfspot_url() ."/index.php?mode=showp&id=". $picture;
           if($current_tags != "") {
              $orig_url.= "&tags=". $current_tags;
           } 
@@@ -2366,13 -2330,7 +2366,13 @@@
  
           $details = $this->get_photo_details($picture);
  
 -         $thumb_url = $this->get_phpfspot_url() ."phpfspot_img.php?idx=". $picture ."&width=". $this->cfg->thumb_width;
 +         if($this->is_user_friendly_url()) {
 +            $thumb_url = $this->get_phpfspot_url() ."/photo/". $picture ."/". $this->cfg->thumb_width;
 +         }
 +         else {
 +            $thumb_url = $this->get_phpfspot_url() ."/phpfspot_img.php?idx=". $picture ."&width=". $this->cfg->thumb_width;
 +         }
 +
           $thumb_html = htmlspecialchars("
  <a href=\"". $orig_url ."\"><img src=\"". $thumb_url ."\" /></a>
  <br>
@@@ -2449,6 -2407,7 +2449,6 @@@
     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";
@@@ -2457,6 -2416,8 +2457,6 @@@
           return "showpi";
        }
  
 -      return "nothing special";
 -
     } // whatToDo()
  
     /**
@@@ -2552,11 -2513,7 +2552,11 @@@
        else
           $_SESSION['slideshow_img']++;
  
 -      return $this->get_phpfspot_url() ."phpfspot_img.php?idx=". $all_photos[$_SESSION['slideshow_img']] ."&width=". $this->cfg->photo_width;
 +      if($this->is_user_friendly_url()) {
 +         return $this->get_phpfspot_url() ."/photo/". $all_photos[$_SESSION['slideshow_img']] ."/". $this->cfg->photo_width;
 +      }
 +
 +      return $this->get_phpfspot_url() ."/phpfspot_img.php?idx=". $all_photos[$_SESSION['slideshow_img']] ."&width=". $this->cfg->photo_width;
  
     } // getNextSlideShowImage()
  
@@@ -2576,11 -2533,7 +2576,11 @@@
        else
           $_SESSION['slideshow_img']--;
  
 -      return $this->get_phpfspot_url() ."phpfspot_img.php?idx=". $all_photos[$_SESSION['slideshow_img']] ."&width=". $this->cfg->photo_width;
 +      if($this->is_user_friendly_url()) {
 +         return $this->get_phpfspot_url() ."/photo/". $all_photos[$_SESSION['slideshow_img']] ."/". $this->cfg->photo_width;
 +      }
 +
 +      return $this->get_phpfspot_url() ."/phpfspot_img.php?idx=". $all_photos[$_SESSION['slideshow_img']] ."&width=". $this->cfg->photo_width;
  
     } // getPrevSlideShowImage()
  
@@@ -2781,7 -2734,6 +2781,7 @@@
     private function get_phpfspot_url()
     {
        return $this->get_web_protocol() ."://". $this->get_server_name() . $this->cfg->web_path;
 +
     } // get_phpfspot_url()
  
     /**
@@@ -2974,11 -2926,9 +2974,11 @@@
  
        }
  
 -      /* 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;
  
@@@ -3095,67 -3045,6 +3095,67 @@@
        
     } // 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)) {
 +
 +         unset($_SESSION['start_action']);
 +         unset($_SESSION['selected_tags']);
 +
 +         $options = explode('/', $request_uri);
 +
 +         switch($options[1]) {
 +            case 'photoview':
 +               if(is_numeric($options[2])) {
 +                  $_GET['mode'] = 'showp';
 +                  return $this->showPhoto($options[2]);
 +               }
 +               break;
 +            case 'photo':
 +               if(is_numeric($options[2])) {
 +                  require_once "phpfspot_img.php";
 +                  $img = new PHPFSPOT_IMG;
 +                  if(isset($options[3]) && is_numeric($options[3]))
 +                     $img->showImg($options[2], $options[3]);
 +                  else
 +                     $img->showImg($options[2]);
 +               }
 +               exit;
 +               break;
 +            case 'tag':
 +               if(is_numeric($options[2])) {
 +                  $_GET['tags'] = $options[2];
 +                  $_SESSION['selected_tags'] = Array($options[2]);
 +                  return $this->showPhotoIndex();
 +               }
 +               break;
 +         }
 +      }
 +
 +   } // parse_user_friendly_url()
 +
 +   /**
 +    * check if user-friendly-urls are enabled
 +    *
 +    * this function will return true, if the config option
 +    * $user_friendly_url has been set. Otherwise false.
 +    * @return boolean
 +    */
 +   private function is_user_friendly_url()
 +   {
 +      if(isset($this->cfg->user_friendly_url) && $this->cfg->user_friendly_url)
 +         return true;
 +
 +      return false;
 +
 +   } // is_user_friendly_url()
 +
 +
  } // class PHPFSPOT
  
  ?>
diff --combined themes/default/stylesheet.css
index d67f3ac,9fe2c4e..93e56b7
--- a/themes/default/stylesheet.css
+++ b/themes/default/stylesheet.css
@@@ -55,6 -55,10 +55,10 @@@ div.searchfor 
     border-bottom:          solid 1px #000000;
  }
  
+ div.searchfor td.nowrap { 
+    white-space:            nowrap;
+ }
+ 
  .menu {
     position:               absolute;
     left:                   0px;
@@@ -81,6 -85,7 +85,7 @@@ div.header 
     padding:                10px;
     vertical-align:         middle;
     white-space:            nowrap;
+    text-align:             left;
  }
  
  div.subheader {
@@@ -88,6 -93,68 +93,68 @@@
     padding:                5px 10px 5px 10px;
     vertical-align:         middle;
     white-space:            nowrap;
+    text-align:             left; 
+    float:                  left;
+ }
+ 
+ div.tagresult{ 
+    height:                 1px; 
+    background-color:       #ffffff;
+ }
+ 
+ div.tagresulttags{
+    display:                table-cell; 
+    vertical-align:         middle;
+ }
+ 
+ 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.textright { 
+    text-align:             right;
+ }
+ 
+ div.welcome { 
+    padding:                10px; 
+    margin-left:            10px;  
+    margin-right:           10px;
+ }
+ 
+ div.welcome  span { 
+    float:                  left; 
+    padding-right:          10px;
+    width:                  150px; 
+    text-align:             center;
  }
  
  img {
@@@ -192,6 -259,16 +259,16 @@@ div.thumb a.thumblink:hover 
     line-height:            21px;
  }
  
+ span.tags {
+    vertical-align:         middle; 
+    text-decoration:        underline;
+ }
+ 
+ div.credits{
+    margin-top:             10px; 
+    margin-left:            10px;
+ }
+ 
  table.calendar tr td {
     border:                 solid 1px #ffffff;
     padding:                1px;
@@@ -225,13 -302,14 +302,14 @@@
     vertical-align:         middle;
  }
  
- #whiteline {
-    height:                 1px;
-    background-color:       #ffffff;
+ #slide_close { 
+    margin:                 0 auto; 
+    padding:                10px;
  }
  
- #index {
-    margin-top:             5px;
+ #slide_close img { 
+    padding:                15px; 
+    background-color:       #000000;
  }
  
  input.submit,input.checkbox {
@@@ -245,3 -323,7 +323,7 @@@ input, select, textarea 
     border:                 1px solid #888888;
     border-collapse:        collapse;
  }
+ 
+ #slider-1{ 
+    margin:                 0 auto;
 -}
++}
diff --combined themes/default/templates/header.tpl
index 1cd9cb4,39b42ca..c1d7a0c
--- a/themes/default/templates/header.tpl
+++ b/themes/default/templates/header.tpl
@@@ -3,19 -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="{$web_path}/autosuggest/js/bsn.AutoSuggest_2.1.3_comp.js"></script>
 -  <script type="text/javascript" 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 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 --combined themes/default/templates/index.tpl
index 46effe2,87c58b9..694f86a
--- a/themes/default/templates/index.tpl
+++ b/themes/default/templates/index.tpl
@@@ -1,10 -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="{$web_path}/resources/loading.gif" style="vertical-align: middle;" />&nbsp;&nbsp;Loading...
 -   <img src="resources/loading.gif" style="vertical-align: middle;" alt="Loading..." />&nbsp;&nbsp;Loading...
++   <img src="{$web_path}/resources/loading.gif" style="vertical-align: middle;" alt="Loading..." />&nbsp;&nbsp;Loading...
    </div>
  
    <!-- top menu -->
@@@ -12,20 -12,20 +12,20 @@@
    <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>
    </div>
    <!-- /top menu -->
  
-   <span style="clear: both;">
+   <div style="clear: both;">
    <!-- option column -->
    <div class="options" style="float: left;">
     <div>
@@@ -39,8 -39,8 +39,8 @@@
  
    <!-- content column -->
    <div id="content" class="content">
 -   {include file="welcome.tpl"}
 +   { $initial_content }
    </div>
-   </span>
+   </div>
  
  {include file="footer.tpl"}
diff --combined themes/default/templates/photo_index.tpl
index 2c1b6ac,413ec26..2dedf86
--- a/themes/default/templates/photo_index.tpl
+++ b/themes/default/templates/photo_index.tpl
@@@ -1,9 -1,6 +1,9 @@@
  <!-- Photo Index -->
 +
 +<!-- Header - displays count of matched photos and some link's -->
 +
  <div class="header">
-  <div style="float: left;">
+  <div class="subheader">
    <b>Photo Index</b>
    {if $searchfor }
     {if $count == 1}
@@@ -29,37 -26,31 +29,37 @@@
     Results are limited to a date within {$from_date} to {$to_date}.
    {/if}
   </div>
-  <div style="text-align: right">
+ <div class="textright">
    {if $slideshow_link }
 -   <a href="{$slideshow_link}" title="Slideshow" target="_blank"><img src="resources/slideshow.png" /></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" /></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" /></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" /></a>
 +   <a href="{$rss_link}" target="_blank" title="RSS feed"><img src="{$web_path}/resources/rss.png" />&nbsp;RSS-Feed</a>
    {/if}
   </div>
  </div>
 +
 +<!-- if result of a tag-search is displayed, show the selected tags
 +     with some small pictures in a bar. -->
 +
  { if $tag_result }
- <div id="whiteline" /></div>
+ <div class="tagresult"></div>
  <div class="subheader">
-  <div style="display: table-cell; vertical-align: middle;">
+  <div class="tagresulttags">
   Tags:
   </div>
   { $selected_tags }
  </div>
  { /if }
  
 +<!-- the photo matrix itself -->
 +
  <div id="index">
  
   {section name="thumb" loop=$thumbs step=1}
@@@ -73,7 -64,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>
  
@@@ -83,36 -74,36 +83,36 @@@
  
  </div>
  <br class="clearboth" />
- <div style="width: 100%; margin-top: 20px;">
+ <div class="indexnavigation">
  
   <!-- the right nav arrow -->
-  <div style="float: right; width: 40px; margin-right: 0px; padding-right: 10px;">
+  <div class="indexnavigationright">
   { 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>
  
   <!-- the left nav arrow -->
-  <div style="float: left; margin: 0px; padding-left: 10px; width: 40px;">
+  <div class="indexnavigationleft">
   { 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>
  
   <!-- the middle page selector -->
-  <div style="text-align: center;">
+  <div class="indexnavigationcenter">
   { if $page_selector != "" }
    {$page_selector}
   { /if}
@@@ -130,7 -121,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 --combined themes/default/templates/search.tpl
index ca7042e,77ed7ad..401d9af
--- a/themes/default/templates/search.tpl
+++ b/themes/default/templates/search.tpl
@@@ -1,5 -1,5 +1,5 @@@
- <span style="vertical-align: middle; text-decoration: underline;">
+ <span class="tags">
 - <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">
@@@ -12,7 -12,7 +12,7 @@@
     { literal }
     <script type="text/javascript">
        var options = {
-          script: "rpc.php?action=getxmltaglist&",
+          script: "rpc.php?action=getxmltaglist&amp;",
           varname: "search",
           json: false,
           maxresults: 15
@@@ -25,7 -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,16 -34,16 +34,16 @@@
     <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>
    <td>Date:</td>
-   <td style="white-space: nowrap;">
+   <td class="nowarp">
     { if ! $date_search_enabled }
-     <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();">
+     <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">
+     <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();" checked="checked" />
     { /if }
     consider date-range
    </td>
@@@ -51,15 -51,15 +51,15 @@@
   </tr>
   <tr>
    <td>&nbsp;</td>
-   <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="frompic"/></a></td>
 -  <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="resources/date.png" id="frompic" alt="from" /></a></td>
++  <td>{$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>
-    {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="{$web_path}/resources/date.png" id="topic" /></a>
 -   {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="resources/date.png" id="topic" alt="to" /></a>
++   {$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="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 --combined themes/default/templates/single_photo.tpl
index bf3051c,b6cdecb..571b524
--- a/themes/default/templates/single_photo.tpl
+++ b/themes/default/templates/single_photo.tpl
@@@ -1,6 -1,6 +1,6 @@@
  <!-- Single photo -->
  <div class="header">
-  <div style="text-align: left; float: left;">
+  <div class="subheader">
    <b>Photo {$image_name}</b><br />
    {if $photo_count > 0}
     {$photo_number} of {$photo_count}
@@@ -14,13 -14,13 +14,13 @@@
     {/if}
    {/if}
   </div>
-  <div style="text-align: right;">
+  <div class="textright"">
    <a href="javascript:zoom(-10);" title="zoom_out" onclick="click(this);"><img src="resources/zoom-out.png" /></a>
    <a href="javascript:zoom(0);" title="zoom_100" onclick="click(this);"><img src="resources/zoom-100.png" /></a>
    <a href="javascript:zoom(10);" title="zoom_in" onclick="click(this);"><img src="resources/zoom-in.png" /></a>
    <a href="javascript:startAutoBrowse();" title="auto browsing"><img id="autobrowse_ico" src="resources/32_play.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>
 +   <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="resources/original.png" alt="original resolution" />
@@@ -29,49 -29,49 +29,49 @@@
  </div>
  
  <div>
-  <div id="photo_details" style="float: right; margin-top: 20px; margin-right: 20px;">
+  <div id="photo_details">
     { 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}');" onclick="click(this);" onclick="click(this);">{$name}</a><br />
 +    <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 />
 -    <a href="{$previous_url}" onclick="click(this);" id="prev_link">
 -     <img src="phpfspot_img.php?idx={$prev_img}&amp;width={$mini_width}" /><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="{$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 />
 -    <a href="{$next_url}" onclick="click(this);" id="next_link">
 -     <img src="phpfspot_img.php?idx={$next_img}&amp;width={$mini_width}" /><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="{$web_path}/phpfspot_img.php?idx={$next_img}&amp;width={$mini_width}" /><br />
      </a>
     { /if}
   </div>
  
   <!-- the photo itself -->
  
-  <div style="text-align: left; margin-top: 20px; margin-left: 20px;">
+  <div class="photo">
   { if $next_url == "" }
 -  <a href="javascript:showPhotoIndex();" onclick="click(this);" name="photo">
 +  <a href="{$image_url}" onclick="showPhotoIndex(); return false;" onfocus="click(this);" name="photo">
   { else }
 -  <a href="{$next_url}" onclick="click(this);" title="click for the next photo" name="photo">
 +  <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>
@@@ -79,22 -79,22 +79,22 @@@
  
   <!-- navigation arrows -->
  
-  <div style="margin-left: 20px;">
+  <div class="photonavigation">
    { 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}" onclick="click(this);" title="click for the previous photo (left cursor)">
 -    <img src="resources/arrow_left.png" alt="previous photo" />
 +   <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 }
 -   <a href="javascript:showPhotoIndex({$current_page}, {$current_img});" onclick="click(this);" title="click to go back to the index">
 -    <img src="resources/arrow_up.png" alt="photo 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>
    { 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}" onclick="click(this);" title="click for the next photo (right cursor)"> 
 -    <img src="resources/arrow_right.png" alt="next photo" />
 +   <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>
@@@ -106,9 -106,9 +106,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 --combined themes/default/templates/slideshow.tpl
index 84b6a6b,22c86a8..9a8f1fe
--- a/themes/default/templates/slideshow.tpl
+++ b/themes/default/templates/slideshow.tpl
@@@ -1,22 -1,22 +1,22 @@@
  {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;">
+   <div id="slide_close">
     <a href="javascript:window.close();" title="click to close slideshow">
-     <img id="slide_img" alt="slideshow_img" style="padding: 15px; background-color: #000000;" />
+     <img id="slide_img" alt="slideshow_img" />
     </a>
    </div>
    <form>
-    <div id="slider-1" tabIndex="1" style="margin: 0 auto;" onclick="if(this.blur)this.blur();">
+    <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>
diff --combined themes/default/templates/tags.tpl
index f0e3a47,e4b04a8..817cfbc
--- a/themes/default/templates/tags.tpl
+++ b/themes/default/templates/tags.tpl
@@@ -1,15 -1,11 +1,15 @@@
- <span style="vertical-align: middle; text-decoration: underline;">
+ <span class="tags">
 - <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>
 +<div id="available_tags">{ $preset_available_tags }</div>
- <span style="vertical-align: middle; text-decoration: underline;">
+ <span class="tags">
 - <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" />||
   <input type="radio" name="condition" value="and" onclick="Tags('condition', this);" {if $current_condition == "and" } checked="checked" { /if } title="AND condition" />&amp;&amp;
 -<div id="selected_tags">no tags selected</div>
 +{ if $preset_selected_tags }
 + <div id="selected_tags">{ $preset_selected_tags }</div>
 +{ else }
 + <div id="selected_tags">no tags selected</div>
 +{ /if }
diff --combined themes/default/templates/welcome.tpl
index 6e6613c,fbb21a1..073af00
--- a/themes/default/templates/welcome.tpl
+++ b/themes/default/templates/welcome.tpl
@@@ -1,35 -1,35 +1,35 @@@
  <!-- welcome -->
- <div class="header" style="text-align: left;">
+ <div class="header">
   phpfspot welcomes you to a dynamic photo gallery for <a href="http://f-spot.org" target="_blank">F-Spot</a><br />
  </div>
- <div style="padding: 10px; margin-left: 10px; margin-right: 10px;">
+ <div class="welcome">
  
-  <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-   <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=1">
-  </div>
-  <div>
+  <p>
+  <span>
 -   <img src="phpfspot_img.php?idx=rand&amp;width=150&amp;i=1" alt="random image" />
++   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=1" alt="random image" />
+  </span>
    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
-  </div>
+  </p>
  
-  <br class="clearboth">
+  <br class="clearboth" />
  
-  <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-   <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=2">
-  </div>
-  <div>
+  <p>
+  <span>
 -   <img src="phpfspot_img.php?idx=rand&amp;width=150&amp;i=2" alt="random image" />
++   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=2" alt="random image" />
+  </span>
    You can adapt this welcome page in the file "welcome.tpl" in the template<br />
    directory of your current theme.
-  </div>
+  </p>
  
-  <br class="clearboth">
+  <br class="clearboth" />
  
-  <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-   <img src="{$web_path}/phpfspot_img.php?idx=rand&width=150&i=3">
-  </div>
-  <div>
+  <p>
+  <span>
 -   <img src="phpfspot_img.php?idx=rand&amp;width=150&amp;i=3" alt="random image" />
++   <img src="{$web_path}/phpfspot_img.php?idx=rand&amp;width=150&amp;i=3" alt="random image" />
+  </span>
   <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>
-  </div>
+  </p>
  </div>
  <!-- /welcome -->