trying to get the photo album plugin to display in a nice grid.

app/controllers/admin/page_plugins_controller.rb

@@ -1,7 +1,7 @@
 class Admin::PagePluginsController < Admin::BaseController
   before_filter :load_page, :only => [:new, :create]
   before_filter :load_new_page_plugin, :only => [:new, :create]
-  before_filter :load_page_plugin, :only => [:edit, :destroy]
+  before_filter :load_page_plugin, :only => [:edit, :destroy, :move_up, :move_down]
 
   protected
   def load_page
@@ -44,4 +44,16 @@ def destroy
     flash[:notice] = "Plugin was removed from the page."
     redirect_to edit_admin_page_path(@page)
   end
+
+  def move_up
+    @page_plugin.move_higher
+    flash[:notice] = "Plugin was moved up by one"
+    redirect_to edit_admin_page_path @page_plugin.page
+  end
+
+  def move_down
+    @page_plugin.move_lower
+    flash[:notice] = "Plugin was moved down by one"
+    redirect_to edit_admin_page_path @page_plugin.page
+  end
 end

app/models/page.rb

@@ -23,7 +23,7 @@ class Page < ActiveRecord::Base
   acts_as_tree   :order => 'page_order'
   attr_protected :page_number, :pages 
 
-  has_many       :page_plugins
+  has_many       :page_plugins, :order => 'position ASC'
   has_one        :page_metadata
 
   before_save    :check_page_type, :check_page_order

app/models/page_plugin.rb

@@ -1,4 +1,6 @@
 class PagePlugin < ActiveRecord::Base
+  acts_as_list :scope => :page_id
+
   belongs_to :page
   after_create :create_module
 

app/views/admin/pages/edit.html.erb

@@ -21,11 +21,12 @@
     <% @page.page_plugins.each do |plugin| -%>
       <li>
         <%= link_to(plugin.module_type, edit_admin_page_plugin_path(plugin), :class => 'edit_page_plugin') -%> 
+        <%= link_to("[up]",   move_up_admin_page_plugin_path(plugin)) %>
+        <%= link_to("[down]", move_down_admin_page_plugin_path(plugin)) %>
         <%= link_to("[x]", admin_page_plugin_path(plugin), :confirm => 'Are you sure you want to remove this plugin from the page?', :method => :delete) -%> 
       </li>
     <% end -%>
   </ul>
-  <%= link_to "Add Plugin", new_admin_page_plugin_path(:page_id => @page.id) -%>
 <% end -%>
 
 <% if @page.display_title %>

config/routes.rb

@@ -16,7 +16,7 @@
   # <admin routes>
   map.namespace :admin do |admin|
     admin.resources :pages, :member => [:shift_order], :has_one => [:page_metadata]
-    admin.resources :page_plugins
+    admin.resources :page_plugins, :member => [:move_up, :move_down]
     admin.resources :plugins
     admin.resources :tags
     admin.resources :roles

db/migrate/20081116204546_add_position_to_page_plugins.rb

@@ -0,0 +1,9 @@
+class AddPositionToPagePlugins < ActiveRecord::Migration
+  def self.up
+    add_column :page_plugins, :position, :integer
+  end
+
+  def self.down
+    remove_column :page_plugins, :position
+  end
+end

public/stylesheets/grid-lists.css

@@ -0,0 +1,96 @@
+/* from http://www.hedgerwow.com/360/dhtml/css-inline-block-layout.php */
+ul.item-list{
+ width:80%;
+ padding:12px;
+ margin:0 auto;
+ padding:0;
+ list-style-type:none;
+ text-align:left;
+ font-size:0;/*eliminate the extra white-space between .item-list*/
+}
+
+ul.item-list li{
+
+ width:240px;
+ margin:0 0 12px 0;
+ text-align:left;
+ vertical-align:text-bottom;
+ font-size:medium;
+
+ display:-moz-inline-stack;/*Firefox need this to simulate display:inline-block*/
+
+ display:inline-block; /*IE does not apply this to Block Element, and Firefox does not render this, too*/
+
+
+
+ _overflow:hidden;/*fix IE6 to expanded content*/
+ zoom:1;/*trigger hasLayout*/
+ *display:inline;/*once hasLayout is true, set display:inline to block element will make display:inline behave like display:inline-block*/
+}
+
+ul.item-list li div.bd{
+ font-size:75%;
+ position:relative;/*firefox need this unless contents within are not clickable or selectable*/
+ margin:2px 6px 1px 6px;
+ padding:12px;
+
+ zoom:1;/*Ie need this to get the border renderred*/
+}
+
+
+/*
+customized theme style
+*/
+ul.item-list li div.bd{
+ background:url(http://us.i1.yimg.com/us.yimg.com/i/us/sp/ed/mod-thin-btm.png) -12px 100% no-repeat;
+}
+
+ul.item-list li div.bd h5{
+ font:normal normal bold 1.4em/normal Georgia;
+ color:#222;
+ text-align:center;
+ margin:0 0 6px 0;
+}
+
+
+ul.item-list li div.bd p,
+ul.item-list li div.bd em,
+ul.item-list li div.bd strong{
+ display:block;
+ margin:0 0 6px 0;
+ text-decoration:none;
+ font-style:normal;
+}
+
+ul.item-list li div.bd em{
+ margin:0;
+ text-align:center;
+ font-size:90%;
+ font-family:Tahoma;
+ padding:12px 0 16px 0;
+}
+
+ul.item-list li div.bd em a{
+ color:#3366FF;
+ text-decoration:none;
+}
+
+ul.item-list li div.bd em a:hover{
+ color:#FF0099;
+ text-decoration:underline;
+}
+
+
+ul.item-list li div.bd strong a{
+ text-decoration:none;
+ display:block;
+ text-align:center;
+ zoom:1;
+}
+
+ul.item-list li div.bd strong a img{
+
+ display:block;
+ margin:auto;
+ border:solid 2px #222;
+

vendor/plugins/ansuz_photo_album/app/views/photo_albums/_photo_album.html.erb

@@ -1,4 +1,4 @@
-<ul class='photos'>
+<ul class='photos item-list'>
   <% plugin_module.photos.each do |photo| -%>
     <li>
       <%= link_to image_tag(photo.photo_album_photo_image.url(:thumb)),