feature 2564: redesign on photo administration screen.

* one screen with several tabs (for now: properties + coi)

* double select boxes for album associations and representation have been
  converted to simple multiple select boxes with jQuery Chosen

* more details about the photo in an introduction text


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

13 files changed, 339 insertions, 297 deletions

diff --git a/admin.php b/admin.php
index 74a88911d..4b914eae9 100644
--- a/admin.php
+++ b/admin.php
@@ -132,6 +132,18 @@ if (isset($_GET['page']) and preg_match('/^album-(\d+)(?:-(.*))?$/', $_GET['page
   }
 }
 
+// ?page=photo-1234-properties is an clean alias of
+// ?page=photo&image_id=1234&tab=properties
+if (isset($_GET['page']) and preg_match('/^photo-(\d+)(?:-(.*))?$/', $_GET['page'], $matches))
+{
+  $_GET['page'] = 'photo';
+  $_GET['image_id'] = $matches[1];
+  if (isset($matches[2]))
+  {
+    $_GET['tab'] = $matches[2];
+  }
+}
+
 if (isset($_GET['page'])
     and preg_match('/^[a-z_]*$/', $_GET['page'])
     and is_file(PHPWG_ROOT_PATH.'admin/'.$_GET['page'].'.php'))
@@ -236,6 +248,7 @@ if (
         'album',        // delete cat; public/private; lock/unlock, permissions
         'cat_move',     // ?only POST
         'cat_options',  // ?only POST; public/private; lock/unlock
+        'photo',
         'picture_modify', // ?only POST; associate/dissociate
         'user_perm',
         'group_perm',
diff --git a/admin/batch_manager_global.php b/admin/batch_manager_global.php
index a568cff96..a7c1a3284 100644
--- a/admin/batch_manager_global.php
+++ b/admin/batch_manager_global.php
@@ -179,20 +179,7 @@ DELETE
 
   if ('move' == $action)
   {
-    // let's first break links with all albums but their "storage album"
-    $query = '
-DELETE '.IMAGE_CATEGORY_TABLE.'.*
-  FROM '.IMAGE_CATEGORY_TABLE.'
-    JOIN '.IMAGES_TABLE.' ON image_id=id
-  WHERE id IN ('.implode(',', $collection).')
-    AND (storage_category_id IS NULL OR storage_category_id != category_id)
-;';
-    pwg_query($query);
-    
-    associate_images_to_categories(
-      $collection,
-      array($_POST['move'])
-      );
+    move_images_to_categories($collection, array($_POST['move']));
 
     $_SESSION['page_infos'] = array(
       l10n('Information data registered in database')
@@ -786,9 +773,7 @@ SELECT id,path,representative_ext,file,filesize,level,name
         'TITLE' => $title,
         'LEVEL' => $row['level'],
         'FILE_SRC' => $row['path'],
-        'U_EDIT' =>
-            PHPWG_ROOT_PATH.'admin.php?page=picture_modify'.
-            '&image_id='.$row['id'],
+        'U_EDIT' => get_root_url().'admin.php?page=photo-'.$row['id'],
         )
       );
   }
diff --git a/admin/batch_manager_unit.php b/admin/batch_manager_unit.php
index 02e1d487c..24ef9a47c 100644
--- a/admin/batch_manager_unit.php
+++ b/admin/batch_manager_unit.php
@@ -265,11 +265,8 @@ SELECT
         'ID' => $row['id'],
         'TN_SRC' => $src,
         'FILE_SRC' => $row['path'],
-        'LEGEND' => !empty($row['name']) ?
-            $row['name'] : get_name_from_file($row['file']),
-        'U_EDIT' =>
-            PHPWG_ROOT_PATH.'admin.php?page=picture_modify'.
-            '&image_id='.$row['id'],
+        'LEGEND' => render_element_name($row),
+        'U_EDIT' => get_root_url().'admin.php?page=photo-'.$row['id'],
         'NAME' => !empty($row['name'])?$row['name']:'',
         'AUTHOR' => !empty($row['author'])?htmlspecialchars($row['author']):'',
         'LEVEL' => !empty($row['level'])?$row['level']:'0',
diff --git a/admin/cat_modify.php b/admin/cat_modify.php
index a6399b4ee..08be98381 100644
--- a/admin/cat_modify.php
+++ b/admin/cat_modify.php
@@ -343,8 +343,7 @@ SELECT id,representative_ext,path
 ;';
     $row = pwg_db_fetch_assoc(pwg_query($query));
     $src = DerivativeImage::thumb_url($row);
-    $url = get_root_url().'admin.php?page=picture_modify';
-    $url.= '&image_id='.$category['representative_picture_id'];
+    $url = get_root_url().'admin.php?page=photo-'.$category['representative_picture_id'];
 
     $tpl_representant['picture'] =
       array(
diff --git a/admin/comments.php b/admin/comments.php
index 1c355331c..002ed9565 100644
--- a/admin/comments.php
+++ b/admin/comments.php
@@ -129,9 +129,7 @@ while ($row = pwg_db_fetch_assoc($result))
   $template->append(
     'comments',
     array(
-      'U_PICTURE' =>
-          PHPWG_ROOT_PATH.'admin.php?page=picture_modify'.
-          '&image_id='.$row['image_id'],
+      'U_PICTURE' => get_root_url().'admin.php?page=photo-'.$row['image_id'],
       'ID' => $row['id'],
       'TN_SRC' => $thumb,
       'AUTHOR' => trigger_event('render_comment_author', $author_name),
diff --git a/admin/include/functions.php b/admin/include/functions.php
index 9e6901f27..3afb705d0 100644
--- a/admin/include/functions.php
+++ b/admin/include/functions.php
@@ -1531,6 +1531,37 @@ DELETE
 }
 
 /**
+ * Disssociate images from all categories except their storage category and
+ * associate to new categories.
+ *
+ * @param array images
+ * @param array categories
+ * @return void
+ */
+function move_images_to_categories($images, $categories)
+{
+  if (count($images) == 0)
+  {
+    return false;
+  }
+  
+  // let's first break links with all albums but their "storage album"
+  $query = '
+DELETE '.IMAGE_CATEGORY_TABLE.'.*
+  FROM '.IMAGE_CATEGORY_TABLE.'
+    JOIN '.IMAGES_TABLE.' ON image_id=id
+  WHERE id IN ('.implode(',', $images).')
+    AND (storage_category_id IS NULL OR storage_category_id != category_id)
+;';
+  pwg_query($query);
+    
+  if (is_array($categories) and count($categories) > 0)
+  {
+    associate_images_to_categories($images, $categories);
+  }
+}
+
+/**
  * Associate images associated to a list of source categories to a list of
  * destination categories.
  *
@@ -1987,6 +2018,7 @@ function get_active_menu($menu_page)
 
   switch ($menu_page)
   {
+    case 'photo':
     case 'photos_add':
     case 'rating':
     case 'tags':
diff --git a/admin/include/photos_add_direct_process.inc.php b/admin/include/photos_add_direct_process.inc.php
index 59e37e891..100b61032 100644
--- a/admin/include/photos_add_direct_process.inc.php
+++ b/admin/include/photos_add_direct_process.inc.php
@@ -215,10 +215,7 @@ SELECT
     // function get_image_name($name, $file) would be better
     $thumbnail['title'] = get_name_from_file($image_infos['file']);
 
-    $thumbnail['link'] = PHPWG_ROOT_PATH.'admin.php?page=picture_modify'
-      .'&image_id='.$image_id
-      .'&cat_id='.$category_id
-      ;
+    $thumbnail['link'] = get_root_url().'admin.php?page=photo-'.$image_id.'&cat_id='.$category_id;
 
     array_push($page['thumbnails'], $thumbnail);
   }
diff --git a/admin/photo.php b/admin/photo.php
new file mode 100644
index 000000000..30d86624c
--- /dev/null
+++ b/admin/photo.php
@@ -0,0 +1,86 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | Piwigo - a PHP based photo gallery                                    |
+// +-----------------------------------------------------------------------+
+// | Copyright(C) 2008-2012 Piwigo Team                  http://piwigo.org |
+// | Copyright(C) 2003-2008 PhpWebGallery Team    http://phpwebgallery.net |
+// | Copyright(C) 2002-2003 Pierrick LE GALL   http://le-gall.net/pierrick |
+// +-----------------------------------------------------------------------+
+// | This program is free software; you can redistribute it and/or modify  |
+// | it under the terms of the GNU General Public License as published by  |
+// | the Free Software Foundation                                          |
+// |                                                                       |
+// | This program is distributed in the hope that it will be useful, but   |
+// | WITHOUT ANY WARRANTY; without even the implied warranty of            |
+// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU      |
+// | General Public License for more details.                              |
+// |                                                                       |
+// | You should have received a copy of the GNU General Public License     |
+// | along with this program; if not, write to the Free Software           |
+// | Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, |
+// | USA.                                                                  |
+// +-----------------------------------------------------------------------+
+
+if( !defined("PHPWG_ROOT_PATH") )
+{
+  die ("Hacking attempt!");
+}
+
+// +-----------------------------------------------------------------------+
+// | Basic checks                                                          |
+// +-----------------------------------------------------------------------+
+
+check_status(ACCESS_ADMINISTRATOR);
+
+check_input_parameter('cat_id', $_GET, false, PATTERN_ID);
+check_input_parameter('image_id', $_GET, false, PATTERN_ID);
+
+$admin_photo_base_url = get_root_url().'admin.php?page=photo-'.$_GET['image_id'];
+
+if (isset($_GET['cat_id']))
+{
+  $query = '
+SELECT *
+  FROM '.CATEGORIES_TABLE.'
+  WHERE id = '.$_GET['cat_id'].'
+;';
+  $category = pwg_db_fetch_assoc(pwg_query($query));
+}
+
+// +-----------------------------------------------------------------------+
+// | Tabs                                                                  |
+// +-----------------------------------------------------------------------+
+
+include_once(PHPWG_ROOT_PATH.'admin/include/tabsheet.class.php');
+
+$page['tab'] = 'properties';
+
+if (isset($_GET['tab']))
+{
+  $page['tab'] = $_GET['tab'];
+}
+
+$tabsheet = new tabsheet();
+$tabsheet->add('properties', l10n('Properties'), $admin_photo_base_url.'-properties');
+$tabsheet->add('coi', l10n('Center of interest'), $admin_photo_base_url.'-coi');
+
+$tabsheet->select($page['tab']);
+$tabsheet->assign();
+
+// +-----------------------------------------------------------------------+
+// | Load the tab                                                          |
+// +-----------------------------------------------------------------------+
+
+if ('properties' == $page['tab'])
+{
+  include(PHPWG_ROOT_PATH.'admin/picture_modify.php');
+}
+elseif ('coi' == $page['tab'])
+{
+  include(PHPWG_ROOT_PATH.'admin/picture_coi.php');
+}
+else
+{
+  include(PHPWG_ROOT_PATH.'admin/photo_'.$page['tab'].'.php');
+}
+?>
\ No newline at end of file
diff --git a/admin/picture_coi.php b/admin/picture_coi.php
index 9725d5294..9389a81d4 100644
--- a/admin/picture_coi.php
+++ b/admin/picture_coi.php
@@ -78,9 +78,9 @@ else
 }
 
 $tpl_var = array(
+  'TITLE' => render_element_name($row),
   'ALT' => $row['file'],
   'U_IMG' => DerivativeImage::url(IMG_LARGE, $row),
-  'U_EDIT' => get_root_url().'admin.php?page=picture_modify&amp;image_id='.$_GET['image_id'],
   );
 
 if (!empty($row['coi']))
diff --git a/admin/picture_modify.php b/admin/picture_modify.php
index 38b607cc7..cfd119bf4 100644
--- a/admin/picture_modify.php
+++ b/admin/picture_modify.php
@@ -36,6 +36,14 @@ check_status(ACCESS_ADMINISTRATOR);
 check_input_parameter('image_id', $_GET, false, PATTERN_ID);
 check_input_parameter('cat_id', $_GET, false, PATTERN_ID);
 
+// represent
+$query = '
+SELECT id
+  FROM '.CATEGORIES_TABLE.'
+  WHERE representative_picture_id = '.$_GET['image_id'].'
+;';
+$represent_options_selected = array_from_query($query, 'id');
+
 // +-----------------------------------------------------------------------+
 // |                             delete photo                              |
 // +-----------------------------------------------------------------------+
@@ -132,18 +140,16 @@ if (isset($_POST['submit']) and count($page['errors']) == 0)
     $data{'comment'} = strip_tags(@$_POST['description']);
   }
 
-  if (isset($_POST['date_creation_action']))
+  if (!empty($_POST['date_creation_year']))
   {
-    if ('set' == $_POST['date_creation_action'])
-    {
-      $data{'date_creation'} = $_POST['date_creation_year']
-                                 .'-'.$_POST['date_creation_month']
-                                 .'-'.$_POST['date_creation_day'];
-    }
-    else if ('unset' == $_POST['date_creation_action'])
-    {
-      $data{'date_creation'} = '';
-    }
+    $data{'date_creation'} =
+      $_POST['date_creation_year']
+      .'-'.$_POST['date_creation_month']
+      .'-'.$_POST['date_creation_day'];
+  }
+  else
+  {
+    $data{'date_creation'} = null;
   }
 
   mass_updates(
@@ -163,58 +169,35 @@ if (isset($_POST['submit']) and count($page['errors']) == 0)
   }
   set_tags($tag_ids, $_GET['image_id']);
 
-  array_push($page['infos'], l10n('Photo informations updated'));
-}
-// associate the element to other categories than its storage category
-if (isset($_POST['associate'])
-    and isset($_POST['cat_dissociated'])
-    and count($_POST['cat_dissociated']) > 0
-  )
-{
-  associate_images_to_categories(
-    array($_GET['image_id']),
-    $_POST['cat_dissociated']
-    );
-}
-// dissociate the element from categories (but not from its storage category)
-if (isset($_POST['dissociate'])
-    and isset($_POST['cat_associated'])
-    and count($_POST['cat_associated']) > 0
-  )
-{
-  $query = '
-DELETE FROM '.IMAGE_CATEGORY_TABLE.'
-  WHERE image_id = '.$_GET['image_id'].'
-    AND category_id IN ('.implode(',', $_POST['cat_associated']).')
-';
-  pwg_query($query);
+  // association to albums
+  move_images_to_categories(array($_GET['image_id']), $_POST['associate']);
 
-  update_category($_POST['cat_associated']);
-}
-// elect the element to represent the given categories
-if (isset($_POST['elect'])
-    and isset($_POST['cat_dismissed'])
-    and count($_POST['cat_dismissed']) > 0
-  )
-{
-  $datas = array();
-  foreach ($_POST['cat_dismissed'] as $category_id)
+  // thumbnail for albums
+  if (!isset($_POST['represent']))
   {
-    array_push($datas,
-               array('id' => $category_id,
-                     'representative_picture_id' => $_GET['image_id']));
+    $_POST['represent'] = array();
   }
-  $fields = array('primary' => array('id'),
-                  'update' => array('representative_picture_id'));
-  mass_updates(CATEGORIES_TABLE, $fields, $datas);
-}
-// dismiss the element as representant of the given categories
-if (isset($_POST['dismiss'])
-    and isset($_POST['cat_elected'])
-    and count($_POST['cat_elected']) > 0
-  )
-{
-  set_random_representant($_POST['cat_elected']);
+  
+  $no_longer_thumbnail_for = array_diff($represent_options_selected, $_POST['represent']);
+  if (count($no_longer_thumbnail_for) > 0)
+  {
+    set_random_representant($no_longer_thumbnail_for);
+  }
+
+  $new_thumbnail_for = array_diff($_POST['represent'], $represent_options_selected);
+  if (count($new_thumbnail_for) > 0)
+  {
+    $query = '
+UPDATE '.CATEGORIES_TABLE.'
+  SET representative_picture_id = '.$_GET['image_id'].'
+  WHERE id IN ('.implode(',', $new_thumbnail_for).')
+;';
+    pwg_query($query);
+  }
+
+  $represent_options_selected = $_POST['represent'];
+  
+  array_push($page['infos'], l10n('Photo informations updated'));
 }
 
 // tags
@@ -262,8 +245,7 @@ $template->set_filenames(
     )
   );
 
-$admin_url_start = get_root_url().'admin.php?page=picture_modify';
-$admin_url_start.= '&amp;image_id='.$_GET['image_id'];
+$admin_url_start = $admin_photo_base_url.'-properties';
 $admin_url_start.= isset($_GET['cat_id']) ? '&amp;cat_id='.$_GET['cat_id'] : '';
 
 $template->assign(
@@ -281,6 +263,8 @@ $template->assign(
       isset($_POST['name']) ?
         stripslashes($_POST['name']) : @$row['name'],
 
+    'TITLE' => render_element_name($row),
+
     'DIMENSIONS' => @$row['width'].' * '.@$row['height'],
 
     'FILESIZE' => @$row['filesize'].' KB',
@@ -303,6 +287,67 @@ $template->assign(
     )
   );
 
+$added_by = 'N/A';
+$query = '
+SELECT '.$conf['user_fields']['username'].' AS username
+  FROM '.USERS_TABLE.'
+  WHERE '.$conf['user_fields']['id'].' = '.$row['added_by'].'
+;';
+$result = pwg_query($query);
+while ($user_row = pwg_db_fetch_assoc($result))
+{
+  $added_by = $user_row['username'];
+}
+
+$intro = sprintf(
+  l10n('This photo was posted on %s by %s.'),
+  format_date($row['date_available']),
+  $added_by
+  );
+
+$intro.= ' ';
+
+$intro.= sprintf(
+  l10n('Original file is %s, %ux%u pixels, %.2fMB.'),
+  $row['file'],
+  $row['width'],
+  $row['height'],
+  $row['filesize']/1024
+  );
+
+$intro.= ' ';
+
+$intro.= sprintf(
+  l10n('%u visits'),
+  $row['hit']
+  );
+
+if ($conf['rate'] and !empty($row['rating_score']))
+{
+  $query = '
+SELECT
+    COUNT(*)
+  FROM '.RATE_TABLE.'
+  WHERE element_id = '.$_GET['image_id'].'
+;';
+  list($nb_rates) = pwg_db_fetch_row(pwg_query($query));
+  
+  $intro.= sprintf(
+    l10n(', %u rates, rating score %s'),
+    $nb_rates,
+    $row['rating_score']
+    );
+}
+
+$intro.= '. ';
+
+$intro.= sprintf(
+  l10n('Numeric identifier is %u.'),
+  $row['id']
+  );
+
+$template->assign('INTRO', $intro);
+
 if (in_array(get_extension($row['path']),$conf['picture_ext']))
 {
   $template->assign('U_COI', get_root_url().'admin.php?page=picture_coi&amp;image_id='.$_GET['image_id']);
@@ -432,53 +477,21 @@ if (isset($url_img))
   $template->assign( 'U_JUMPTO', $url_img );
 }
 
-// associate to another category ?
+// associate to albums
 $query = '
-SELECT id,name,uppercats,global_rank
+SELECT id
   FROM '.CATEGORIES_TABLE.'
     INNER JOIN '.IMAGE_CATEGORY_TABLE.' ON id = category_id
-  WHERE image_id = '.$_GET['image_id'];
-if (isset($storage_category_id))
-{
-  $query.= '
-    AND id != '.$storage_category_id;
-}
-$query.= '
-;';
-display_select_cat_wrapper($query, array(), 'associated_options');
-
-$result = pwg_query($query);
-$associateds = array(-1);
-if (isset($storage_category_id))
-{
-  array_push($associateds, $storage_category_id);
-}
-while ($row = pwg_db_fetch_assoc($result))
-{
-  array_push($associateds, $row['id']);
-}
-$query = '
-SELECT id,name,uppercats,global_rank
-  FROM '.CATEGORIES_TABLE.'
-  WHERE id NOT IN ('.implode(',', $associateds).')
-;';
-display_select_cat_wrapper($query, array(), 'dissociated_options');
-
-// representing
-$query = '
-SELECT id,name,uppercats,global_rank
-  FROM '.CATEGORIES_TABLE.'
-  WHERE representative_picture_id = '.$_GET['image_id'].'
+  WHERE image_id = '.$_GET['image_id'].'
 ;';
-display_select_cat_wrapper($query, array(), 'elected_options');
+$associate_options_selected = array_from_query($query, 'id');
 
 $query = '
 SELECT id,name,uppercats,global_rank
   FROM '.CATEGORIES_TABLE.'
-  WHERE representative_picture_id != '.$_GET['image_id'].'
-    OR representative_picture_id IS NULL
 ;';
-display_select_cat_wrapper($query, array(), 'dismissed_options');
+display_select_cat_wrapper($query, $associate_options_selected, 'associate_options');
+display_select_cat_wrapper($query, $represent_options_selected, 'represent_options');
 
 //----------------------------------------------------------- sending html code
 
diff --git a/admin/rating.php b/admin/rating.php
index 66dea07d8..2073ca64c 100644
--- a/admin/rating.php
+++ b/admin/rating.php
@@ -203,8 +203,7 @@ foreach ($images as $image)
 {
   $thumbnail_src = DerivativeImage::thumb_url($image);
 
-  $image_url = PHPWG_ROOT_PATH.'admin.php?page=picture_modify'.
-            '&amp;image_id='.$image['id'];
+  $image_url = get_root_url().'admin.php?page=photo-'.$image['id'];
 
   $query = 'SELECT *
 FROM '.RATE_TABLE.' AS r
diff --git a/admin/themes/default/template/picture_coi.tpl b/admin/themes/default/template/picture_coi.tpl
index 8465a5765..76d8ecc11 100644
--- a/admin/themes/default/template/picture_coi.tpl
+++ b/admin/themes/default/template/picture_coi.tpl
@@ -3,10 +3,7 @@
 {/html_head}
 {combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'}
 
-<h2>{'Center of interest'|@translate}</h2>
-<div>
-<a href="{$U_EDIT}">{'Edit photo information'|@translate}</a>
-</div>
+<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
 
 <form method="post">
 
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 28e6bfc76..11a0fcdb2 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -2,6 +2,15 @@
 {include file='include/dbselect.inc.tpl'}
 {include file='include/datepicker.inc.tpl'}
 
+{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
+{combine_css path="themes/default/js/plugins/chosen.css"}
+
+{footer_script}{literal}
+jQuery(document).ready(function() {
+  jQuery(".chzn-select").chosen();
+});
+{/literal}{/footer_script}
+
 {combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
 {footer_script require='jquery.tokeninput'}
 jQuery(document).ready(function() {ldelim}
@@ -24,22 +33,9 @@ jQuery(document).ready(function() {ldelim}
 pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
 {/footer_script}
 
-<h2>{'Edit photo information'|@translate}</h2>
+<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
 
-<img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
-
-<ul class="categoryActions">
-  {if isset($U_JUMPTO) }
-  <li><a href="{$U_JUMPTO}" title="{'jump to photo'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_jump-to.png" alt="{'jump to photo'|@translate}"></a></li>
-  {/if}
-  {if !url_is_remote($PATH)}
-  <li><a href="{$U_SYNC}" title="{'Synchronize'|@translate}"><img src="{$themeconf.admin_icon_dir}/sync_metadata.png" alt="{'Synchronize'|@translate}"></a></li>
-
-  <li><a href="{$U_DELETE}" title="{'delete photo'|@translate}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/category_delete.png" alt="{'delete photo'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"></a></li>
-  {/if}
-</ul>
-
-<form action="{$F_ACTION}" method="post" id="properties">
+<form action="{$F_ACTION}" method="post" id="catModify">
 
   <fieldset>
     <legend>{'Informations'|@translate}</legend>
@@ -47,48 +43,27 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
     <table>
 
       <tr>
-        <td><strong>{'Path'|@translate}</strong></td>
-        <td>{$PATH}</td>
-      </tr>
+        <td id="albumThumbnail">
+<img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
+        </td>
 
-      <tr>
-        <td><strong>{'Post date'|@translate}</strong></td>
-        <td>{$REGISTRATION_DATE}</td>
-      </tr>
+        <td id="albumLinks">
+<p style="text-align:left">{$INTRO}</p>
 
-      <tr>
-        <td><strong>{'Dimensions'|@translate}</strong></td>
-        <td>{$DIMENSIONS}</td>
-      </tr>
+<ul style="padding-left:15px;">
+{if isset($U_JUMPTO) }
+  <li><a href="{$U_JUMPTO}">{'jump to photo'|@translate} →</a></li>
+{/if}
 
-      <tr>
-        <td><strong>{'Filesize'|@translate}</strong></td>
-        <td>{$FILESIZE}</td>
-      </tr>
+{if !url_is_remote($PATH)}
+  <li><a href="{$U_SYNC}">{'Synchronize metadata'|@translate}</a></li>
 
-      <tr>
-        <td><strong>{'Storage album'|@translate}</strong></td>
-        <td>{$STORAGE_CATEGORY}</td>
-      </tr>
+  <li><a href="{$U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete photo'|@translate}</a></li>
+  {/if}
 
-      {if isset($related_categories) }
-      <tr>
-        <td><strong>{'Linked albums'|@translate}</strong></td>
-        <td>
-          <ul>
-            {foreach from=$related_categories item=name}
-            <li>{$name}</li>
-            {/foreach}
-          </ul>
+</ul>
         </td>
       </tr>
-      {/if}
-{if isset($U_COI)}
-      <tr>
-        <td></td>
-        <td><a href="{$U_COI}">{'Not cropped correctly?'|@translate}</a></td>
-      </tr>
-{/if}
     </table>
 
   </fieldset>
@@ -96,129 +71,80 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
   <fieldset>
     <legend>{'Properties'|@translate}</legend>
 
-    <table>
+    <p>
+      <strong>{'Title'|@translate}</strong>
+      <br>
+      <input type="text" class="large" name="name" value="{$NAME}">
+    </p>
 
-      <tr>
-        <td><strong>{'Name'|@translate}</strong></td>
-        <td><input type="text" class="large" name="name" value="{$NAME}"></td>
-      </tr>
+    <p>
+      <strong>{'Author'|@translate}</strong>
+      <br>
+      <input type="text" class="large" name="author" value="{$AUTHOR}">
+    </p>
 
-      <tr>
-        <td><strong>{'Author'|@translate}</strong></td>
-        <td><input type="text" class="large" name="author" value="{$AUTHOR}"></td>
-      </tr>
+    <p>
+      <strong>{'Creation date'|@translate}</strong>
+      <br>
+      <select id="date_creation_day" name="date_creation_day">
+        <option value="0">--</option>
+{section name=day start=1 loop=32}
+        <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
+{/section}
+      </select>
 
-      <tr>
-        <td><strong>{'Creation date'|@translate}</strong></td>
-        <td>
-          <label><input type="radio" name="date_creation_action" value="unset"> {'unset'|@translate}</label>
-          <input type="radio" name="date_creation_action" value="set" id="date_creation_action_set"> {'set to'|@translate}
-          <select id="date_creation_day" name="date_creation_day">
-            <option value="0">--</option>
-            {section name=day start=1 loop=32}
-              <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
-            {/section}
-          </select>
-          <select id="date_creation_month" name="date_creation_month">
-            {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
-          </select>
-          <input id="date_creation_year"
-                 name="date_creation_year"
-                 type="text"
-                 size="4"
-                 maxlength="4"
-                 value="{$DATE_CREATION_YEAR_VALUE}">
-          <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
-        </td>
-      </tr>
+      <select id="date_creation_month" name="date_creation_month">
+        {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
+      </select>
 
-      <tr>
-        <td><strong>{'Tags'|@translate}</strong></td>
-        <td>
+      <input id="date_creation_year" name="date_creation_year" type="text" size="4" maxlength="4" value="{$DATE_CREATION_YEAR_VALUE}">
+      <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
+    <a href="#" id="unset_date_creation" style="display:none">unset</a>
+    </p>
+
+    <p>
+      <strong>{'Linked albums'|@translate}</strong>
+      <br>
+      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="associate[]">
+        {html_options options=$associate_options selected=$associate_options_selected}
+      </select>
+    </p>
+
+    <p>
+      <strong>{'Representation of albums'|@translate}</strong>
+      <br>
+      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="represent[]">
+        {html_options options=$represent_options selected=$represent_options_selected}
+      </select>
+    </p>
+
+    <p>
+      <strong>{'Tags'|@translate}</strong>
+      <br>
 <select id="tags" name="tags">
 {foreach from=$tag_selection item=tag}
   <option value="{$tag.id}" class="selected">{$tag.name}</option>
 {/foreach}
 </select>
-        </td>
-      </tr>
-
+    </p>
 
-      <tr>
-        <td><strong>{'Description'|@translate}</strong></td>
-        <td><textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea></td>
-      </tr>
+    <p>
+      <strong>{'Description'|@translate}</strong>
+      <br>
+      <textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea>
+    </p>
 
-  <tr>
-    <td><strong>{'Who can see this photo?'|@translate}</strong></td>
-    <td>
+    <p>
+      <strong>{'Who can see this photo?'|@translate}</strong>
+      <br>
       <select name="level" size="1">
         {html_options options=$level_options selected=$level_options_selected}
       </select>
-    </td>
-  </tr>
-
-    </table>
-
-    <p style="text-align:center;">
-      <input class="submit" type="submit" value="{'Submit'|@translate}" name="submit">
-      <input class="submit" type="reset" value="{'Reset'|@translate}" name="reset">
-    </p>
-
-  </fieldset>
-
-</form>
+   </p>
 
-<form id="associations" method="post" action="{$F_ACTION}#associations">
-  <fieldset>
-    <legend>{'Linked albums'|@translate}</legend>
-
-    <table class="doubleSelect">
-      <tr>
-        <td>
-          <h3>{'Associated'|@translate}</h3>
-          <select class="categoryList" name="cat_associated[]" multiple="multiple" size="30">
-            {html_options options=$associated_options}
-          </select>
-          <p><input class="submit" type="submit" value="&raquo;" name="dissociate" style="font-size:15px;"></p>
-        </td>
-
-        <td>
-          <h3>{'Dissociated'|@translate}</h3>
-          <select class="categoryList" name="cat_dissociated[]" multiple="multiple" size="30">
-            {html_options options=$dissociated_options}
-          </select>
-          <p><input class="submit" type="submit" value="&laquo;" name="associate" style="font-size:15px;"></p>
-        </td>
-      </tr>
-    </table>
-
-  </fieldset>
-</form>
+  <p style="margin:40px 0 0 0">
+    <input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit">
+  </p>
+</fieldset>
 
-<form id="representation" method="post" action="{$F_ACTION}#representation">
-  <fieldset>
-    <legend>{'Representation of albums'|@translate}</legend>
-
-    <table class="doubleSelect">
-      <tr>
-        <td>
-          <h3>{'Represents'|@translate}</h3>
-          <select class="categoryList" name="cat_elected[]" multiple="multiple" size="30">
-            {html_options options=$elected_options}
-          </select>
-          <p><input class="submit" type="submit" value="&raquo;" name="dismiss" style="font-size:15px;"></p>
-        </td>
-
-        <td>
-          <h3>{'Does not represent'|@translate}</h3>
-          <select class="categoryList" name="cat_dismissed[]" multiple="multiple" size="30">
-            {html_options options=$dismissed_options}
-          </select>
-          <p><input class="submit" type="submit" value="&laquo;" name="elect" style="font-size:15px;"></p>
-        </td>
-      </tr>
-    </table>
-
-  </fieldset>
 </form>