Finishing photo capabilities (except delete)

Add vote features
Added stats and chart library for generating google chart image url
pagination
memcacheing of thumbnails
basic hall of fame
added a couple of images for things
added a minimized version of prototype + scriptaculous
first version of favorites added
customized error messages
added photo browser with pagination

app/controllers/application.rb

@@ -1,9 +1,48 @@
 class Application < Merb::Controller
+  def index
+    redirect '/'
+  end
+  
   def current_user
-    (@user ||= User.find(session[:user_id]))
+    if session[:user_id]
+      (@user ||= User.find(session[:user_id]))
+    else
+      (cookies[:session_id] ||= session[:session_id])
+    end
+  end
+  
+  def logged_in?
+    !session[:user_id].nil?
+  end
+  
+  def administrator?
+    logged_in? and current_user and current_user.administrator?
   end
   
   def reset_session
     session[:user_id] = nil
   end
+  
+  def get_photo_version(width, height)
+    key = "photo_#{@photo.id}_#{width}_#{height}"
+    img = Cache.get(key)
+    
+    File.open("#{@photo.base_directory}/#{@photo.filename}", "r") do |f|
+      img = Magick::Image.from_blob(f.read).first.resize_to_fit(width, height)
+      Cache.put(key, img)
+    end if img.nil?
+    
+    img
+  end
+  
+  def fetch_allowed_user
+    @user = if administrator?
+      User.find_by_user_name params[:id]
+    elsif logged_in? and params[:id] != current_user.user_name
+      raise NotAllowed
+    else
+      current_user
+    end
+    raise NotFound if @user.nil?
+  end
 end

app/controllers/exceptions.rb

@@ -2,12 +2,22 @@ class Exceptions < Application
   
   # handle NotFound exceptions (404)
   def not_found
-    render :format => :html
+    do_your_render_thing
   end
 
   # handle NotAcceptable exceptions (406)
   def not_acceptable
-    render :format => :html
+    do_your_render_thing
+  end
+  
+  private
+  
+  def do_your_render_thing
+    if request.xhr?
+      render :format => :html, :layout => false
+    else
+      render :format => :html
+    end
   end
 
 end

app/controllers/favorites.rb

@@ -1,9 +1,32 @@
 class Favorites < Application
-
+  before :logged_in?
-  # ...and remember, everything returned from an action
+  before :fetch_allowed_user, :only => [ :show ]
-  # goes to the client...
+  only_provides :xml
-  def index
+  
+  def show
+    only_provides :html
+    @photos = @user.favorite_photos
     render
   end
   
+  def create
+    raise NotAllowed unless request.xhr?
+    @photo = Photo.find params[:id]
+    pf = PhotoFavorite.new :photo_id => @photo.id, :user_id => current_user.id
+    if pf.save
+      render '', :status => 200
+    else
+      render '', :status => 403
+    end
+  end
+  
+  def delete
+    raise NotAllowed unless request.xhr?
+    pf = PhotoFavorite.find params[:id], :include => :user
+    if pf.user == current_user and pf.destroy
+      render '', :status => 200
+    else
+      render '', :status => 403
+    end
+  end
 end

app/controllers/home.rb

@@ -6,4 +6,8 @@ class Home < Application
   def acceptable_use
     render
   end
+  
+  def hall_of_fame
+    render
+  end
 end

app/controllers/photos.rb

@@ -1,9 +1,68 @@
 class Photos < Application
-
+  before :logged_in?, :only => [ :new, :create, :delete ]
-  # ...and remember, everything returned from an action
+  before :administrator?, :only => [ :delete ]
-  # goes to the client...
+  before :make_photo, :only => [ :new, :create ]
+  before :fetch_photo, :only => [ :show, :delete, :thumbnail ]
+  
   def index
+    @page = params[:page].to_i
+    per_page = 24
+    @page_count = (Photo.count(:id).to_f / per_page.to_f).ceil
+    @photos = Photo.find :all, :order => 'id DESC', :limit => per_page, :offset => (per_page * @page)
+    if request.xhr?
+      partial 'photos/photo_browser'
+    else
+      render
+    end
+  end
+  
+  def show
     render
   end
   
+  def new
+    render
+  end
+  
+  def create
+    if @photo.save
+      flash[:notice] = 'Great success'
+      redirect url(:photo, @photo)
+    else
+      render :new
+    end
+  end
+  
+  def delete
+    raise NotAllowed unless request.xhr?
+    if current_user and current_user.administrator?
+      render
+    else
+      redirect '/'
+    end
+  end
+  
+  def thumbnail
+    if @photo.exist?
+      w = params[:width].to_i
+      w = @photo.width if w == 0 or w > @photo.width
+      h = params[:height].to_i
+      h = @photo.height if h == 0 or h > @photo.height
+      w = h if h > w
+      send_data get_photo_version(w, w).to_blob, :filename => @photo.filename, :disposition => 'inline', :type => @photo.content_type
+    else
+      send_file Merb.root + '/public/images/image-missing.png', :disposition => 'inline'
+    end
+  end
+  
+  protected
+  
+  def make_photo
+    @photo = Photo.new params[:photo]
+  end
+  
+  def fetch_photo
+    @photo = Photo.find params[:id]
+    raise NotFound unless @photo
+  end
 end

app/controllers/sessions.rb

@@ -9,19 +9,31 @@ class Sessions < Application
   
   def create
     user = User.find_by_user_name params[:user_name]
-    if user.authenticated_against?(params[:password])
+    if user and user.authenticated_against?(params[:password])
       session[:user_id] = user.id
-      flash[:notice] = 'Great success!'
+      if request.xhr?
-      redirect '/'
+        render '', :status => 200
+      else
+        flash[:notice] = 'Great success!'
+        redirect '/'
+      end
     else
-      flash[:error] = 'Login failed'
+      if request.xhr?
-      render :new
+        render '', :status => 401
+      else
+        flash.now[:error] = 'Login failed'
+        render :new
+      end
     end
   end
   
   def delete
     reset_session
-    flash[:notice] = 'Goodbye!'
+    if request.xhr?
-    redirect '/'
+      render '', :status => 200
+    else
+      flash[:notice] = 'Goodbye!'
+      redirect '/'
+    end
   end
 end

app/controllers/stats.rb

@@ -1,9 +0,0 @@
-class Stats < Application
-
-  # ...and remember, everything returned from an action
-  # goes to the client...
-  def index
-    render
-  end
-  
-end

app/controllers/users.rb

@@ -1,4 +1,5 @@
 class Users < Application
+  before :fetch_allowed_user, :only => [ :show, :edit, :update, :delete ]
   before :prepare_user, :only => [ :show, :edit, :update, :delete ]
   
   include Ambethia::ReCaptcha::Controller
@@ -59,13 +60,6 @@ class Users < Application
   protected
   
   def prepare_user
-    @user = if current_user.administrator?
-      User.find_by_user_name params[:id]
-    else
-      current_user
-    end
-    raise NotFound if @user.nil?
     @user.attributes = params[:user] if params[:user] and request.post?
-    true
   end
 end

app/controllers/votes.rb

@@ -1,9 +1,48 @@
 class Votes < Application
-
+  before :fetch_allowed_user, :only => [ :show ]
-  # ...and remember, everything returned from an action
+  
-  # goes to the client...
+  def show
-  def index
+    @page = params[:page].to_i
+    per_page = 4
+    @votes = @user.votes.find :all, :limit => 4, :offset => (@page * 4)
+    @page_count = (@user.votes.size.to_f / per_page.to_f).ceil
+    if request.xhr?
+      partial 'votes/stats_for_user'
+    else
+      render
+    end
+  end
+  
+  def new
+    get_mah_fohtoh
     render
   end
   
+  def create
+    raise NotAllowed unless request.xhr?
+    @photo = Photo.find params[:photo_id] rescue nil
+    @vote = Vote.new :photo_id => (@photo.id rescue true), :vote => (params[:one].to_s == 'true')
+    if logged_in?
+      @vote.user = current_user
+    else
+      @vote.session_id = current_user
+    end
+    if @vote.save
+      get_mah_fohtoh
+      partial 'votes/voting'
+    else
+      emsg = "The vote failed: "
+      @vote.errors.each_full { |e| emsg += e + ' ' }
+      render emsg, :status => 401
+    end
+  end
+  
+  private
+  
+  def get_mah_fohtoh
+    # just a simple check to not allow you to vote on a photo twice. model
+    # business logic will fail this, too, but just to make sure you don't...
+    @photo = Photo.find params[:photo_id] if params[:photo_id]
+    @photo = Photo.next_available_votable_photo current_user if @photo.nil? or (logged_in? and current_user.voted_for?(@photo))
+  end
 end

app/helpers/global_helpers.rb

@@ -1,9 +1,5 @@
 module Merb
   module GlobalHelpers
-    def logged_in?
-      !session[:user_id].nil?
-    end
-    
     def error_messages(obj)
       if obj.errors.empty?
         nil
@@ -11,5 +7,41 @@ module Merb
         "<div id='model_errors'><ul>#{obj.errors.each_full { |msg| "<li>#{msg}</li>" }}</ul></div>"
       end
     end
+    
+    def photo_url(photo, w = nil, h = nil)
+      w = photo.width if w.nil? or w > photo.width
+      h = photo.height if h.nil? or h > photo.height
+      url :controller => 'photos', :action => 'thumbnail', :width => w, :height => h, :id => photo.id
+    end
+    
+    def indicator
+      "<img src='/images/ajax-loader.gif' id='indicator' style='display: none; vertical-align: middle' />"
+    end
+    
+    def menu_items
+      if @menu_items.nil?
+        @menu_items = [
+          { :img => '/images/face-monkey.png', :name => 'Hall of fame', :title => 'B.A. Hall of famers -- The oneest of the ones!', :href => '/hall_of_fame' },
+          { :img => '/images/vote.png', :name => 'Vote', :title => 'Vote on new photos', :href => url(:new_vote) },
+          { :img => '/images/image-x-generic.png', :name => 'Photos', :title => 'Browse the oneness!', :href => url(:photos) }
+        ]
+        if logged_in?
+          @menu_items << { :img => '/images/utilities-system-monitor.png', :name => 'Stats', :title => 'Check your voting record against popular opinion', :href => url(:vote, :id => current_user.user_name) }
+          @menu_items << { :img => '/images/camera-photo.png', :name => 'Upload', :title => 'Upload photos', :href => url(:new_photo) }
+          @menu_items << { :img => '/images/emblem-favorite.png', :name => 'Favorites', :title => 'Check your favorites', :href => url(:favorite, :id => current_user.user_name) }
+          @menu_items << { :img => '/images/system-lock-screen.png', :name => 'Settings', :title => 'Change your password', :href => url(:edit_user, :id => current_user.user_name) }
+        else
+          @menu_items << { :img => '/images/system-users.png', :name => 'Sign up', :title => 'Sign up for an account', :href => url(:new_user) }
+          @menu_items << { :img => '/images/system-lock-screen.png', :name => 'Log in', :title => 'Log in with your account', :href => url(:new_session) }
+        end
+      end
+      @menu_items
+    end
+    
+    def pagination(block_name, base_url)
+      @pagination_block = block_name
+      @base_pagination_url = base_url
+      partial 'home/pagination_script'
+    end
   end
 end

app/helpers/photos_helper.rb

@@ -1,5 +1,14 @@
 module Merb
   module PhotosHelper
-
+    def vote_count(photo)
+      curl = Gchart.pie(
+        :size => '400x200',
+        :title => "Oneable Results",
+        :legend => [ 'Not One', 'One' ],
+        :data => [ photo.zero_votes, photo.one_votes ],
+        :theme => :pastel
+      )
+      "<img src='#{curl}' alt='Chart Results' />"
+    end
   end
-end # Merb
+end # Merb

app/helpers/stats_helper.rb

@@ -1,5 +0,0 @@
-module Merb
-  module StatsHelper
-
-  end
-end # Merb

app/helpers/votes_helper.rb

@@ -1,5 +1,14 @@
 module Merb
   module VotesHelper
-
+    def stat_chart
+      curl = Gchart.pie(
+        :size => '300x200',
+        :title => "Voting results for #{@user.votes.size} photos",
+        :legend => [ 'Not One', 'One' ],
+        :data => [ @user.votes.select { |v| v.zero? }.size, @user.votes.select { |v| v.one? }.size ],
+        :theme => :pastel
+      )
+      "<img src='#{curl}' alt='Chart Results' />"
+    end
   end
 end # Merb

app/models/photo.rb

@@ -1,8 +1,165 @@
 class Photo < ActiveRecord::Base
-  #property :id, Integer, :serial => true
+  attr_accessor :email
-  #property :filename, String
+  attr_accessor :file
-  #property :email_hash, String
+  attr_protected :email_hash
-  #property :created_at, DateTime
+  
-  validates_presence_of :filename
   has_many :votes, :dependent => :destroy
+  
+  before_create :validate_image_sanity
+  before_create :hashify_email
+  
+  after_create :create_directories
+  before_destroy :destroy_directories
+  
+  ##
+  # Returns the biggest dimension of this model.
+  #
+  def max_dimension
+    if self.width > self.height
+      self.width
+    else
+      self.height
+    end
+  end
+  
+  ##
+  # Determines how 'oneable' this photo is. Should be cached in model later.
+  #
+  def oneness
+    os = one_votes
+    "%.1f%%" % (os.to_f / self.votes.size.to_f * 100.0)
+  end
+  
+  ##
+  # Abstraction to determine the number of positive votes on this photo. Should
+  # be replaced with a cached counter variable.
+  #
+  def one_votes
+    self.votes.count :id, :conditions => [ 'vote = ?', true ]
+  end
+  
+  ##
+  # Abstraction to determine the number of negative votes on this photo. Should
+  # be replaced with a cached counter variable.
+  #
+  def zero_votes
+    self.votes.size - self.one_votes
+  end
+  
+  ##
+  # Returns the path of the image relative to Merb's root.
+  #
+  def relative_directory
+    fkey = id.to_s[0,2]
+    skey = id.to_s[0,4]
+    "/photos/#{fkey}/#{skey}/#{id}"
+  end
+  
+  ##
+  # Determines the base directory for all files in this model.
+  #
+  def base_directory
+    "#{Merb.root}/public#{self.relative_directory}"
+  end
+  
+  ##
+  # Checks to see if the file is found on the filesystem.
+  #
+  def exist?
+    File.exist? "#{self.base_directory}/#{self.filename}"
+  end
+  
+  ##
+  # Returns the full path to the file suitable for an image source.
+  #
+  def pathname
+    "#{self.relative_directory}/#{self.filename}"
+  end
+  
+  def self.next_available_votable_photo(user)
+    pids = Vote.voted_photo_ids(user)
+    c = if pids.empty?
+      nil
+    else
+      "photos.id NOT IN (#{pids.join(',')})"
+    end
+    self.find :first, :conditions => c, :order => 'id ASC'
+  end
+  
+  protected
+  
+  ##
+  # Checks to make sure that the file exists and is an image.
+  #
+  def validate_image_sanity
+    if self.file.empty? or self.file[:tempfile].nil?
+      self.errors.add(:file, 'is not a file')
+    elsif self.file[:content_type] !~ /image\/\w+/
+      self.errors.add(:file, 'is not a supported type')
+    elsif self.file[:size] and self.file[:size] > 3.megabytes
+      self.errors.add(:file, 'is too big (3MB max)')
+    end
+    self.content_type = self.file[:content_type]
+    
+    begin
+      @fstr = self.file[:tempfile].read
+      iary = Magick::Image.from_blob(@fstr)
+      self.filename = File.basename(self.file[:filename]).gsub(/[^\w._-]/, '')
+      if iary.inspect.to_s =~ /(\d+)x(\d+)/
+        self.width = $1
+        self.height = $2
+      end
+      # resize to fit on the screen if it's too big... 600x600
+      if self.width > 600 or self.height > 600
+        iary.first.resize_to_fit!(600, 600)
+        if iary.inspect.to_s =~ /(\d+)x(\d+)\+\d+\+\d+/
+          self.width = $1
+          self.height = $2
+        end
+        @fstr = iary.first.to_blob
+      end
+    rescue
+      Merb.logger.error("Caught an exception saving an image:")
+      Merb.logger.error("* #{$!}")
+      self.errors.add(:file, 'File could not be read as an image')
+    end if self.errors.empty?
+    
+    if self.errors.empty?
+      true
+    else
+      false
+    end
+  end
+  
+  ##
+  # Makes the directories and writes the file to disk.
+  #
+  def create_directories
+    File.umask(0022)
+    FileUtils.mkdir_p(base_directory) unless File.exist?(base_directory)
+    File.open("#{base_directory}/#{self.filename}", "w") do |f|
+      f.puts(@fstr)
+    end
+    File.chmod(0644, "#{base_directory}/#{self.filename}")
+  end
+  
+  ##
+  # Removes the directories and files associated with this model on destroy.
+  #
+  def destroy_directories
+    return unless File.exists?(base_directory)
+    Dir.foreach(base_directory) do |file|
+      next if file =~ /^\.\.?$/
+      File.delete(base_directory + '/' + file)
+    end
+    Dir.delete(base_directory)
+  end
+  
+  ##
+  # Renders the email into a hashed string for later retrieval.
+  #
+  def hashify_email
+    email_hash = User.salted_string(email) unless email.to_s.empty?
+    true
+  end
 end

app/models/photo_favorite.rb

@@ -0,0 +1,4 @@
+class PhotoFavorite < ActiveRecord::Base
+  belongs_to :user
+  belongs_to :photo
+end

app/models/user.rb

@@ -9,7 +9,10 @@ class User < ActiveRecord::Base
   validates_uniqueness_of :user_name
   validates_format_of :user_name, :with => /[\w_-]+/
   
-  has_many :votes, :dependent => :destroy
+  has_many :votes, :dependent => :destroy, :order => 'votes.photo_id ASC'
+  has_many :photos, :dependent => :destroy, :through => :votes
+  has_many :photo_favorites, :dependent => :destroy
+  has_many :favorite_photos, :through => :photo_favorites, :class_name => 'Photo', :source => :photo
   
   before_validation :saltify_password
   
@@ -26,6 +29,11 @@ class User < ActiveRecord::Base
     Digest::SHA1.hexdigest("#{Merb::Config[:session_secret_key]}--#{str}--")
   end
   
+  def voted_for?(photo)
+    pid = photo.respond_to?('id') ? photo.id : photo
+    self.votes.detect { |v| v.photo_id == pid }
+  end
+  
   protected
   
   def saltify_password

app/models/vote.rb

@@ -2,7 +2,11 @@ class Vote < ActiveRecord::Base
   belongs_to :photo
   belongs_to :user
   
-  validates_presence_of :vote
+  validate :unique_for_user
+  validates_presence_of :photo_id
+  
+  attr_protected :user_id
+  attr_protected :session_id
   
   ##
   # Checks if this vote is anonymous, or not an authenticated User vote.
@@ -31,4 +35,44 @@ class Vote < ActiveRecord::Base
   def one?
     self.to_i == 1
   end
+  
+  ##
+  # Checks if a user has voted for a Photo. If you pass a User for user it will
+  # check for an authenticated user, else it will look for an anonymous vote.
+  #
+  def self.voted_for?(photo, user)
+    c = [ 'photo_id = :pid' ]
+    v = { :pid => (photo.respond_to?('id') ? photo.id : photo) }
+    if user.respond_to?('id')
+      c << 'user_id = :uid'
+      v[:uid] = user.id
+    else
+      c << 'session_id = :uid'
+      v[:uid] = user
+    end
+    self.find :first, :conditions => [ c.join(' AND '), v ]
+  end
+  
+  ##
+  # Does a quick find and collect on the cast votes so you can find a
+  def self.voted_photo_ids(user)
+    c = if user.respond_to?('id')
+      "votes.user_id = #{user.id}"
+    else
+      "votes.session_id = '#{user}'"
+    end
+    self.find(:all, :conditions => c, :select => 'photo_id').collect { |v| v.photo_id }
+  end
+  
+  protected
+  
+  def unique_for_user
+    if self.user.to_s.empty? and self.session_id.empty?
+      self.errors.add(:vote, 'must have an owner')
+    elsif self.user and Vote.voted_for?(self.photo, self.user)
+      self.errors.add(:vote, 'has already been collected for this photo')
+    elsif self.session_id and Vote.voted_for?(self.photo, self.session_id)
+      self.errors.add(:anonymous, 'vote has already been collected')
+    end
+  end
 end

app/views/exceptions/not_found.html.erb

@@ -1,47 +0,0 @@
-<div id="container">
-  <div id="header-container">
-    <img src="/images/merb.jpg" />
-    <!-- <h1>Mongrel + Erb</h1> -->
-    <h2>pocket rocket web framework</h2>
-    <hr />
-  </div>
-
-  <div id="left-container">
-    <h3>Exception:</h3>
-    <p><%= params[:exception] %></p>
-  </div>
-
-  <div id="main-container">
-    <h3>Welcome to Merb!</h3>
-    <p>Merb is a light-weight MVC framework written in Ruby.  We hope you enjoy it.</p>
-    
-    <h3>Where can I find help?</h3>
-    <p>If you have any questions or if you can't figure something out, please take a
-      look at our <a href="http://merbivore.com/"> project page</a>,
-      feel free to come chat at irc.freenode.net, channel #merb,
-      or post to <a href="http://groups.google.com/group/merb">merb mailing list</a>
-      on Google Groups.</p>
-      
-    <h3>What if I've found a bug?</h3>
-    <p>If you want to file a bug or make your own contribution to Merb,
-      feel free to register and create a ticket at our
-      <a href="http://merb.lighthouseapp.com/">project development page</a>
-      on Lighthouse.</p>
-
-    <h3>How do I edit this page?</h3>
-    <p>You're seeing this page because you need to edit the following files:
-      <ul>
-        <li>config/router.rb <strong><em>(recommended)</em></strong></li>
-        <li>app/views/exceptions/not_found.html.erb <strong><em>(recommended)</em></strong></li>
-        <li>app/views/layout/application.html.erb <strong><em>(change this layout)</em></strong></li>
-      </ul>
-    </p>
-  </div>
-
-  <div id="footer-container">
-    <hr />
-    <div class="left"></div>
-    <div class="right">&copy; 2007 the merb dev team</div>
-    <p>&nbsp;</p>
-  </div>
-</div>

app/views/exceptions/not_found.html.haml

@@ -0,0 +1,5 @@
+%h1
+  %img{ :src => '/images/image-missing.png' }
+  404 :: Not Found
+
+%p Sorry, the resource you were looking for could not be found. Check your URL and try again.

app/views/favorites/index.html.haml

@@ -1 +0,0 @@
-You're in index of the Favorites controller.

app/views/favorites/show.html.haml

@@ -0,0 +1,3 @@
+%h1 Your favorite photos
+
+= partial 'photos/photo_browser'

app/views/home/_pagination_navigation.html.haml

@@ -0,0 +1,11 @@
+#pagination_navigation
+  %p
+    %a{ :href => '#', :onclick => "scroll_box(0); return false;", :title => 'First page' }
+      %img{ :src => '/images/go-first.png' }
+    %a{ :href => '#', :onclick => "scroll_box(page - 1); return false;", :title => 'Previous page' }
+      %img{ :src => '/images/go-previous.png' }
+    == <span id="pagenum">#{@page + 1}</span> / #{@page_count}
+    %a{ :href => '#', :onclick => "scroll_box(page + 1); return false;", :title => 'Next page' }
+      %img{ :src => '/images/go-next.png' }
+    %a{ :href => '#', :onclick => "scroll_box(page_count - 1); return false;", :title => 'Next page' }
+      %img{ :src => '/images/go-last.png' }

app/views/home/_pagination_script.html.haml

@@ -0,0 +1,20 @@
+:javascript
+  page = #{@page};
+  page_count = #{@page_count};
+  function scroll_box(newpage)
+  {
+    np = parseInt(newpage);
+    if(np < 0)
+      np = 0;
+    if(np >= page_count)
+      np = page_count - 1;
+    if(np == page)
+      return;
+    setTimeout("update_scroll_box(" + np + ");", 800);
+    new Effect.DropOut($('inner_#{@pagination_block}'));
+  }
+  function update_scroll_box(newpage)
+  {
+    page = newpage;
+    new Ajax.Updater('#{@pagination_block}', '#{@base_pagination_url}#{@base_pagination_url =~ /\?/ ? '&' : '?'}page=' + page, { method: 'get', onComplete: function(){ new Effect.Appear($('inner_#{@pagination_block}')); }, onSuccess: function(){ $('pagenum').innerHTML = parseInt(page) + 1; } });
+  }

app/views/home/hall_of_fame.html.haml

@@ -0,0 +1,2 @@
+%h1 Hall of famers!
+

app/views/home/index.html.haml

@@ -11,8 +11,21 @@
         :border-left 1px solid #d4d4d4
         em
           :margin-left 20px
-      h1
+      ul
-        :text-align center
+        :width 400px
+      li
+        :padding 3px 10px 3px 10px
+        :border 1px solid #c17d11
+        :background-color #e9b96e
+        :margin 10px
+        img
+          :vertical-align middle
+        a
+          :font-weight bold
+          :text-decoration none
+          :color #8f5902
+          &:hover
+            :color #5e3a01
 
 %span#front_page
   %h1 What this is all about
@@ -29,33 +42,9 @@
   
   %h1 Getting started
   
-  %ul.no_list_style
+  %ul.no_list_style.centered
-    - if logged_in?
+    - menu_items.each do |menu_item|
       %li
-        %a{ :href => url(:edit_user, :id => current_user.user_name) }
+        %a{ :href => menu_item[:href], :title => menu_item[:name] }
-          %img{ :src => '/images/system-lock-screen.png' }
+          %img{ :src => menu_item[:img] }
-          Change your password
+          = menu_item[:title]
-      %li
-        %a{ :href => url(:favorite, :id => current_user.user_name) }
-          %img{ :src => '/images/emblem-favorite.png' }
-          Check your favorites
-      %li
-        %a{ :href => url(:new_photo) }
-          %img{ :src => '/images/camera-photo.png' }
-          Upload photos
-      %li
-        %a{ :href => url(:votes) }
-          %img{ :src => '/images/vote.png' }
-          Vote on new photos
-      %li
-        %a{ :href => url(:stat, :id => current_user.user_name) }
-          %img{ :src => '/images/utilities-system-monitor.png' }
-          Check stats on photos of yourself
-    - else
-      %li <img src='/images/system-users.png' /> Sign up for an account
-      %li <img src='/images/system-lock-screen.png' /> Log in if you have one
-      %li <img src='/images/emblem-favorite.png' /> Check your favorites
-      %li <img src='/images/camera-photo.png' /> Upload photos
-      %li <img src='/images/vote.png' /> Vote on new photos
-      %li <img src='/images/utilities-system-monitor.png' /> Check stats on photos of yourself
-

app/views/layout/application.html.haml

@@ -4,9 +4,7 @@
     %title Binary Attraction
     %meta{ 'http-equiv' => "content-type", :content => "text/html; charset=utf8" }
     %link{ :href => "/stylesheets/ba.css", :rel => "stylesheet", :type => "text/css", :media => "screen", :charset => "utf-8" }
-    %script{ :src => "/javascripts/prototype.js", :type => "text/javascript" }
+    %script{ :src => "/javascripts/prototype_and_effects_minimized.js", :type => "text/javascript" }
-    %script{ :src => "/javascripts/effects.js", :type => "text/javascript" }
-    %script{ :src => "/javascripts/dragdrop.js", :type => "text/javascript" }
     %script{ :src => "/javascripts/application.js", :type => "text/javascript" }
     - unless flash.keys.empty?
       :javascript
@@ -17,39 +15,20 @@
         #flash_container
           - flash.keys.each do |key|
             %div{ :class => key }= flash[key]
-      #header
+      #header_image
-        %span#header_image
+        %a{ :href => '/', :title => 'B.A. Home' }
-          %a{ :href => '/', :title => 'B.A. Home' }
+          %img{ :src => '/images/binaryattraction.png', :alt => 'Binary Attraction' }
-            %img{ :src => '/images/binaryattraction.png', :alt => 'Binary Attraction' }
+      #tool_bar
-        #tool_bar
+        - menu_items.each do |menu_item|
-          - if logged_in?
+          %a{ :href => menu_item[:href], :title => menu_item[:title] }
-            %a{ :href => url(:new_vote), :title => 'Vote' }
+            %img{ :src => menu_item[:img] }
-              %img{ :src => '/images/vote.png' }
+            = menu_item[:name]
-              Vote
+          - if menu_item != menu_items.last
             |
-            %a{ :href => url(:new_photo), :title => 'Upload a photo' }
+        - if logged_in?
-              %img{ :src => '/images/camera-photo.png' }
+          |
-              Upload a photo
+          %a{ :href => url(:delete_session, :id => session[:user_id]), :title => 'Log out of B.A.' }
-            |
+            %img{ :src => '/images/system-log-out.png' }
-            %a{ :href => url(:favorite, :id => session[:user_id]), :title => 'Favorites' }
-              %img{ :src => '/images/emblem-favorite.png' }
-              Favorites
-            |
-            %a{ :href => url(:stats), :title => 'Stats' }
-              %img{ :src => '/images/utilities-system-monitor.png' }
-              Check Stats
-            |
-            %a{ :href => url(:delete_session, :id => session[:user_id]), :title => 'Log out' }
-              %img{ :src => '/images/system-log-out.png' }
-              Log out
-          - else
-            %a{ :href => url(:new_user), :title => 'Sign Up' }
-              %img{ :src => '/images/system-users.png' }
-              Sign Up
-            |
-            %a{ :href => url(:new_session), :title => 'Log In' }
-              %img{ :src => '/images/system-lock-screen.png' }
-              Log In
       #content
         = catch_content :for_layout
       #footer

app/views/photos/_photo.html.haml

@@ -0,0 +1,5 @@
+%div.centered{ :style => "width: #{@photo.width rescue 50}px" }
+  - if @photo and @photo.exist?
+    %img{ :src => @photo.pathname, :alt => @photo.filename, :width => @photo.width, :height => @photo.height }
+  - else
+    %img{ :src => '/images/image-missing.png', :alt => 'Missing File' }

app/views/photos/_photo_browser.html.haml

@@ -0,0 +1,8 @@
+#inner_photo_browser{ :style => (request.xhr? ? 'display: none;' : '') }
+- if @photos.nil? or @photos.empty?
+  %h3 None!
+- else
+  - @photos.each_with_index do |photo, index|
+    %div.photo_browser_box
+      %a{ :href => url(:photo, photo) }
+        %img{ :src => photo_url(photo, 100, 100) }

app/views/photos/index.html.haml

@@ -1 +1,8 @@
-You're in index of the Photos controller.
+%h1 Photos of oneness
+
+= pagination 'photo_browser', url(:photos)
+
+#browser_container.centered
+  = partial 'home/pagination_navigation'
+  #photo_browser
+    = partial 'photos/photo_browser'

app/views/photos/new.html.haml

@@ -0,0 +1,15 @@
+= error_messages @photo
+
+= form_for @photo do
+  %fieldset
+    %legend Upload A Photo
+    %p
+      %label{ :for => 'photo[email]' } Email
+      = text_field :name => 'photo[email]', :id => 'photo[email]'
+      %small Optional
+    %p
+      %label{ :for => 'photo[file]' } Image
+      = file_field :name => 'photo[file]', :id => 'photo[file]'
+      %small 3MB limit, JPG, PNG, GIF, etc.
+    = submit 'Save', :onclick => "$('indicator').show()"
+    = indicator

app/views/photos/show.html.haml

@@ -0,0 +1,63 @@
+#main_photo_container
+  = partial 'photos/photo'
+
+  - v = Vote.voted_for? @photo, current_user
+  - if v
+    #mini_container.centered
+      %div.stat_box
+        %p
+          %strong You voted
+          %br
+          %tt= v.to_i
+      
+      %div.stat_box
+        %p
+          %strong Total <tt>0</tt>
+          %br
+          = @photo.zero_votes
+      
+      %div.stat_box
+        %p
+          %strong Total <tt>1</tt>
+          %br
+          %tt= @photo.one_votes
+      
+      %div.stat_box
+        %p
+          %strong Total Votes
+          %br
+          %tt= @photo.votes.size
+      
+      %div.stat_box
+        %p
+          %strong Oneness
+          %br
+          %tt= @photo.oneness
+    
+    %br{ :style => 'clear: both' }
+    
+    %div.centered{ :style => "width: 400px;"}
+      = vote_count @photo
+    
+  - else
+    %style{ :type => 'text/css' }
+      :sass
+        #outer_vote_container
+          :height 30px
+    
+    #outer_vote_container
+      %div{ :style => 'display: none', :id => 'to_be_voted' }
+        = partial 'votes/vote_controls'
+      #to_be_unvoted
+        %p
+          %a{ :href => '#', :onclick => "transition_out_controls(); return false;" } Vote on this photo now!
+        :javascript
+          function transition_out_controls()
+          {
+            new Effect.DropOut($('to_be_unvoted'));
+            setTimeout('transition_in_controls()', 1000);
+          }
+          function transition_in_controls()
+          {
+            new Effect.Appear($('to_be_voted'));
+          }

app/views/sessions/new.html.haml

@@ -1,5 +1,23 @@
-= form :action => url(:sessions) do
+:javascript
-  %fieldset
+  function login()
+  {
+    new Ajax.Request($('login_form').action,
+    {
+      parameters: Form.serialize($('login_form')),
+      onCreate: function(){ $('indicator').show(); },
+      onComplete: function(){ $('indicator').hide(); },
+      onSuccess: function(){ window.location.href = '/'; },
+      onFailure: function(){
+        new Effect.Shake($('fieldset'));
+        $('password').value = '';
+        $('password').focus();
+      }
+    });
+  }
+
+= form :action => url(:sessions), :id => 'login_form', :onsubmit => "login(); return false;" do
+  %fieldset#fieldset{ :style => "width: 250px;" }
+    %legend Papers, comrade?
     %p
       %label{ :for => 'user_name' }
         User Name
@@ -9,4 +27,4 @@
         Password
         = password_field :name => 'password', :id => 'password'
     = submit 'Login'
-
+    = indicator

app/views/stats/index.html.haml

@@ -1 +0,0 @@
-You're in index of the Stats controller.

app/views/votes/_stats_for_user.html.haml

@@ -0,0 +1,25 @@
+- dim = 100
+#inner_scrolling_photo_block{ :style => (request.xhr? ? 'display: none;' : '') }
+  %table{ :cellspacing => 0, :cellpadding => 0 }
+    %tr
+      %td{ :style => "width: 140px; height: 150px;" }
+        - if @votes[0]
+          %a{ :href => url(:photo, @votes[0].photo), :onclick => 'window.open(this.href);return false;' }
+            %img{ :src => photo_url(@votes[0].photo, dim, dim) }
+          %p== <tt>#{@votes[0].to_i} / #{@votes[0].photo.oneness}</tt>
+      %td{ :style => "width: 140px; height: 150px;" }
+        - if @votes[1]
+          %a{ :href => url(:photo, @votes[1].photo), :onclick => 'window.open(this.href);return false;' }
+            %img{ :src => photo_url(@votes[1].photo, dim, dim) }
+          %p== <tt>#{@votes[1].to_i} / #{@votes[1].photo.oneness}</tt>
+    %tr
+      %td{ :style => "width: 140px; height: 150px;" }
+        - if @votes[2]
+          %a{ :href => url(:photo, @votes[2].photo), :onclick => 'window.open(this.href);return false;' }
+            %img{ :src => photo_url(@votes[2].photo, dim, dim) }
+          %p== <tt>#{@votes[2].to_i} / #{@votes[2].photo.oneness}</tt>
+      %td{ :style => "width: 140px; height: 150px;" }
+        - if @votes[3]
+          %a{ :href => url(:photo, @votes[3].photo), :onclick => 'window.open(this.href);return false;' }
+            %img{ :src => photo_url(@votes[3].photo, dim, dim) }
+          %p== <tt>#{@votes[3].to_i} / #{@votes[3].photo.oneness}</tt>

app/views/votes/_vote_controls.html.haml

@@ -0,0 +1,9 @@
+- unless @photo.nil? or !@photo.exist?
+  #vote_error.error.centered{ :style => "display: none" }
+  #vote_controls.centered
+    %a{ :href => '#', :onclick => "vote('#{url(:votes, :method => :post, :photo_id => @photo.id, :one => false)}'); return false;", :title => '0-able' }
+      %img{ :src => '/images/0.png' }
+    %a{ :href => '#', :onclick => "vote('#{url(:votes, :method => :post, :photo_id => @photo.id, :one => true)}'); return false;", :title => '1-able' }
+      %img{ :src => '/images/1.png' }
+- else
+  %p Either you are the master of voting or there are no photos to be voted upon.

app/views/votes/_voting.html.haml

@@ -0,0 +1,2 @@
+= partial 'photos/photo'
+= partial 'votes/vote_controls'

app/views/votes/new.html.haml

@@ -0,0 +1,2 @@
+#main_photo_container
+  = partial 'votes/voting'

app/views/votes/show.html.haml

@@ -0,0 +1,22 @@
+= pagination 'scrolling_photo_block', url(:vote, :id => @user.user_name)
+
+#scrolling_photo_block_container
+  = partial 'home/pagination_navigation'
+  #scrolling_photo_block
+    = partial 'votes/stats_for_user'
+
+- if @user == current_user
+  %h1 Your voting record
+- else
+  %h1== #{@user.user_name}'s Voting record
+
+%div.user_stat_chart
+  = stat_chart
+
+%p== <strong>Zero:</strong> <tt>#{@user.votes.select { |v| v.zero? }.size}</tt>
+
+%p== <strong>One:</strong> <tt>#{@user.votes.select { |v| v.one? }.size}</tt>
+
+%p== <strong>Oneness:</strong> <tt>#{"%.1f%%" % (@user.votes.select { |v| v.one? }.size.to_f / @user.votes.size.to_f * 100.0)}</tt>
+
+%br{ :style => 'clear: both' }

config/init.rb

@@ -1,11 +1,25 @@
 Gem.clear_paths
 Gem.path.unshift(Merb.root / "gems")
 $LOAD_PATH.unshift(Merb.root / "lib")
-# Merb.push_path(:lib, Merb.root / "lib") # uses **/*.rb as path glob
 
-dependencies 'haml', 'sass', 'merb_helpers', 'merb_has_flash', 'digest/sha1', 'recaptcha'
+dependencies 'haml', 'sass', 'merb_helpers', 'merb_has_flash', 'digest/sha1', 'merb-mailer', 'recaptcha'
+require 'RMagick'
+require 'memcache'
+require 'memcache_util'
+require 'gchart'
 
 Merb::BootLoader.after_app_loads do
+  config_path = File.join(Merb.root, 'config', 'memcache.yml')
+  if File.file?(config_path) and File.readable?(config_path)
+    memcache_connection_str = YAML.load(File.read(config_path))
+  else
+    memcache_connection_str = 'localhost:11211'
+  end
+  CACHE = MemCache.new memcache_connection_str
+  
+  Merb::Mailer.config = { :sendmail_path => '/usr/sbin/sendmail' }
+  Merb::Mailer.delivery_method = :sendmail
+  
   recaptcha_path = File.join(Merb.root, 'config', 'recaptcha.yml')
   if File.file?(recaptcha_path) and File.readable?(recaptcha_path)
     rc = YAML::load_file(recaptcha_path)

config/router.rb

@@ -1,13 +1,14 @@
 Merb.logger.info("Compiling routes...")
 Merb::Router.prepare do |r|
+  r.match('/').to( :controller => 'home', :action => 'index' )
+  r.match('/acceptable_use').to( :controller => 'home', :action => 'acceptable_use' )
+  r.match('/hall_of_fame').to(:controller => 'home', :action => 'hall_of_fame')
+  
   r.resources :sessions
   r.resources :users
   r.resources :people
   r.resources :votes
-  r.resources :photos
   r.resources :favorites
-  r.resources :stats
+  r.match('/photos/thumbnail/:id').to(:controller => 'photos', :action => 'thumbnail')
-  # r.default_routes
+  r.resources :photos
-  r.match('/').to( :controller => 'home', :action => 'index' )
-  r.match('/acceptable_use').to( :controller => 'home', :action => 'acceptable_use' )
 end

public/javascripts/application.js

@@ -26,3 +26,28 @@ function hide_flashes_timer()
 {
   new Effect.DropOut($('flash_container'));
 }
+
+function vote(url)
+{
+  new Ajax.Updater(
+    {success: 'main_photo_container', failure: 'vote_error'},
+    url,
+    {
+      synchronous: true,
+      onCreate: function()
+      {
+        if($('vote_error').style.display != 'none')
+          new Effect.Fade($('vote_error'));
+      },
+      onFailure: function()
+      {
+        new Effect.Appear($('vote_error'));
+      },
+      onSuccess: function()
+      {
+        if($('vote_error').style.display != 'none')
+          new Effect.Fade($('vote_error'));
+      }
+    }
+  );
+}

public/javascripts/dragdrop.js

@@ -1,974 +0,0 @@
-// script.aculo.us dragdrop.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
-
-// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
-//           (c) 2005-2007 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
-// 
-// script.aculo.us is freely distributable under the terms of an MIT-style license.
-// For details, see the script.aculo.us web site: http://script.aculo.us/
-
-if(Object.isUndefined(Effect))
-  throw("dragdrop.js requires including script.aculo.us' effects.js library");
-
-var Droppables = {
-  drops: [],
-
-  remove: function(element) {
-    this.drops = this.drops.reject(function(d) { return d.element==$(element) });
-  },
-
-  add: function(element) {
-    element = $(element);
-    var options = Object.extend({
-      greedy:     true,
-      hoverclass: null,
-      tree:       false
-    }, arguments[1] || { });
-
-    // cache containers
-    if(options.containment) {
-      options._containers = [];
-      var containment = options.containment;
-      if(Object.isArray(containment)) {
-        containment.each( function(c) { options._containers.push($(c)) });
-      } else {
-        options._containers.push($(containment));
-      }
-    }
-    
-    if(options.accept) options.accept = [options.accept].flatten();
-
-    Element.makePositioned(element); // fix IE
-    options.element = element;
-
-    this.drops.push(options);
-  },
-  
-  findDeepestChild: function(drops) {
-    deepest = drops[0];
-      
-    for (i = 1; i < drops.length; ++i)
-      if (Element.isParent(drops[i].element, deepest.element))
-        deepest = drops[i];
-    
-    return deepest;
-  },
-
-  isContained: function(element, drop) {
-    var containmentNode;
-    if(drop.tree) {
-      containmentNode = element.treeNode; 
-    } else {
-      containmentNode = element.parentNode;
-    }
-    return drop._containers.detect(function(c) { return containmentNode == c });
-  },
-  
-  isAffected: function(point, element, drop) {
-    return (
-      (drop.element!=element) &&
-      ((!drop._containers) ||
-        this.isContained(element, drop)) &&
-      ((!drop.accept) ||
-        (Element.classNames(element).detect( 
-          function(v) { return drop.accept.include(v) } ) )) &&
-      Position.within(drop.element, point[0], point[1]) );
-  },
-
-  deactivate: function(drop) {
-    if(drop.hoverclass)
-      Element.removeClassName(drop.element, drop.hoverclass);
-    this.last_active = null;
-  },
-
-  activate: function(drop) {
-    if(drop.hoverclass)
-      Element.addClassName(drop.element, drop.hoverclass);
-    this.last_active = drop;
-  },
-
-  show: function(point, element) {
-    if(!this.drops.length) return;
-    var drop, affected = [];
-    
-    this.drops.each( function(drop) {
-      if(Droppables.isAffected(point, element, drop))
-        affected.push(drop);
-    });
-        
-    if(affected.length>0)
-      drop = Droppables.findDeepestChild(affected);
-
-    if(this.last_active && this.last_active != drop) this.deactivate(this.last_active);
-    if (drop) {
-      Position.within(drop.element, point[0], point[1]);
-      if(drop.onHover)
-        drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
-      
-      if (drop != this.last_active) Droppables.activate(drop);
-    }
-  },
-
-  fire: function(event, element) {
-    if(!this.last_active) return;
-    Position.prepare();
-
-    if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
-      if (this.last_active.onDrop) {
-        this.last_active.onDrop(element, this.last_active.element, event); 
-        return true; 
-      }
-  },
-
-  reset: function() {
-    if(this.last_active)
-      this.deactivate(this.last_active);
-  }
-}
-
-var Draggables = {
-  drags: [],
-  observers: [],
-  
-  register: function(draggable) {
-    if(this.drags.length == 0) {
-      this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
-      this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
-      this.eventKeypress  = this.keyPress.bindAsEventListener(this);
-      
-      Event.observe(document, "mouseup", this.eventMouseUp);
-      Event.observe(document, "mousemove", this.eventMouseMove);
-      Event.observe(document, "keypress", this.eventKeypress);
-    }
-    this.drags.push(draggable);
-  },
-  
-  unregister: function(draggable) {
-    this.drags = this.drags.reject(function(d) { return d==draggable });
-    if(this.drags.length == 0) {
-      Event.stopObserving(document, "mouseup", this.eventMouseUp);
-      Event.stopObserving(document, "mousemove", this.eventMouseMove);
-      Event.stopObserving(document, "keypress", this.eventKeypress);
-    }
-  },
-  
-  activate: function(draggable) {
-    if(draggable.options.delay) { 
-      this._timeout = setTimeout(function() { 
-        Draggables._timeout = null; 
-        window.focus(); 
-        Draggables.activeDraggable = draggable; 
-      }.bind(this), draggable.options.delay); 
-    } else {
-      window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
-      this.activeDraggable = draggable;
-    }
-  },
-  
-  deactivate: function() {
-    this.activeDraggable = null;
-  },
-  
-  updateDrag: function(event) {
-    if(!this.activeDraggable) return;
-    var pointer = [Event.pointerX(event), Event.pointerY(event)];
-    // Mozilla-based browsers fire successive mousemove events with
-    // the same coordinates, prevent needless redrawing (moz bug?)
-    if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
-    this._lastPointer = pointer;
-    
-    this.activeDraggable.updateDrag(event, pointer);
-  },
-  
-  endDrag: function(event) {
-    if(this._timeout) { 
-      clearTimeout(this._timeout); 
-      this._timeout = null; 
-    }
-    if(!this.activeDraggable) return;
-    this._lastPointer = null;
-    this.activeDraggable.endDrag(event);
-    this.activeDraggable = null;
-  },
-  
-  keyPress: function(event) {
-    if(this.activeDraggable)
-      this.activeDraggable.keyPress(event);
-  },
-  
-  addObserver: function(observer) {
-    this.observers.push(observer);
-    this._cacheObserverCallbacks();
-  },
-  
-  removeObserver: function(element) {  // element instead of observer fixes mem leaks
-    this.observers = this.observers.reject( function(o) { return o.element==element });
-    this._cacheObserverCallbacks();
-  },
-  
-  notify: function(eventName, draggable, event) {  // 'onStart', 'onEnd', 'onDrag'
-    if(this[eventName+'Count'] > 0)
-      this.observers.each( function(o) {
-        if(o[eventName]) o[eventName](eventName, draggable, event);
-      });
-    if(draggable.options[eventName]) draggable.options[eventName](draggable, event);
-  },
-  
-  _cacheObserverCallbacks: function() {
-    ['onStart','onEnd','onDrag'].each( function(eventName) {
-      Draggables[eventName+'Count'] = Draggables.observers.select(
-        function(o) { return o[eventName]; }
-      ).length;
-    });
-  }
-}
-
-/*--------------------------------------------------------------------------*/
-
-var Draggable = Class.create({
-  initialize: function(element) {
-    var defaults = {
-      handle: false,
-      reverteffect: function(element, top_offset, left_offset) {
-        var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
-        new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur,
-          queue: {scope:'_draggable', position:'end'}
-        });
-      },
-      endeffect: function(element) {
-        var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
-        new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity, 
-          queue: {scope:'_draggable', position:'end'},
-          afterFinish: function(){ 
-            Draggable._dragging[element] = false 
-          }
-        }); 
-      },
-      zindex: 1000,
-      revert: false,
-      quiet: false,
-      scroll: false,
-      scrollSensitivity: 20,
-      scrollSpeed: 15,
-      snap: false,  // false, or xy or [x,y] or function(x,y){ return [x,y] }
-      delay: 0
-    };
-    
-    if(!arguments[1] || Object.isUndefined(arguments[1].endeffect))
-      Object.extend(defaults, {
-        starteffect: function(element) {
-          element._opacity = Element.getOpacity(element);
-          Draggable._dragging[element] = true;
-          new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7}); 
-        }
-      });
-    
-    var options = Object.extend(defaults, arguments[1] || { });
-
-    this.element = $(element);
-    
-    if(options.handle && Object.isString(options.handle))
-      this.handle = this.element.down('.'+options.handle, 0);
-    
-    if(!this.handle) this.handle = $(options.handle);
-    if(!this.handle) this.handle = this.element;
-    
-    if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
-      options.scroll = $(options.scroll);
-      this._isScrollChild = Element.childOf(this.element, options.scroll);
-    }
-
-    Element.makePositioned(this.element); // fix IE    
-
-    this.options  = options;
-    this.dragging = false;   
-
-    this.eventMouseDown = this.initDrag.bindAsEventListener(this);
-    Event.observe(this.handle, "mousedown", this.eventMouseDown);
-    
-    Draggables.register(this);
-  },
-  
-  destroy: function() {
-    Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
-    Draggables.unregister(this);
-  },
-  
-  currentDelta: function() {
-    return([
-      parseInt(Element.getStyle(this.element,'left') || '0'),
-      parseInt(Element.getStyle(this.element,'top') || '0')]);
-  },
-  
-  initDrag: function(event) {
-    if(!Object.isUndefined(Draggable._dragging[this.element]) &&
-      Draggable._dragging[this.element]) return;
-    if(Event.isLeftClick(event)) {    
-      // abort on form elements, fixes a Firefox issue
-      var src = Event.element(event);
-      if((tag_name = src.tagName.toUpperCase()) && (
-        tag_name=='INPUT' ||
-        tag_name=='SELECT' ||
-        tag_name=='OPTION' ||
-        tag_name=='BUTTON' ||
-        tag_name=='TEXTAREA')) return;
-        
-      var pointer = [Event.pointerX(event), Event.pointerY(event)];
-      var pos     = Position.cumulativeOffset(this.element);
-      this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
-      
-      Draggables.activate(this);
-      Event.stop(event);
-    }
-  },
-  
-  startDrag: function(event) {
-    this.dragging = true;
-    if(!this.delta)
-      this.delta = this.currentDelta();
-    
-    if(this.options.zindex) {
-      this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
-      this.element.style.zIndex = this.options.zindex;
-    }
-    
-    if(this.options.ghosting) {
-      this._clone = this.element.cloneNode(true);
-      this.element._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
-      if (!this.element._originallyAbsolute)
-        Position.absolutize(this.element);
-      this.element.parentNode.insertBefore(this._clone, this.element);
-    }
-    
-    if(this.options.scroll) {
-      if (this.options.scroll == window) {
-        var where = this._getWindowScroll(this.options.scroll);
-        this.originalScrollLeft = where.left;
-        this.originalScrollTop = where.top;
-      } else {
-        this.originalScrollLeft = this.options.scroll.scrollLeft;
-        this.originalScrollTop = this.options.scroll.scrollTop;
-      }
-    }
-    
-    Draggables.notify('onStart', this, event);
-        
-    if(this.options.starteffect) this.options.starteffect(this.element);
-  },
-  
-  updateDrag: function(event, pointer) {
-    if(!this.dragging) this.startDrag(event);
-    
-    if(!this.options.quiet){
-      Position.prepare();
-      Droppables.show(pointer, this.element);
-    }
-    
-    Draggables.notify('onDrag', this, event);
-    
-    this.draw(pointer);
-    if(this.options.change) this.options.change(this);
-    
-    if(this.options.scroll) {
-      this.stopScrolling();
-      
-      var p;
-      if (this.options.scroll == window) {
-        with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
-      } else {
-        p = Position.page(this.options.scroll);
-        p[0] += this.options.scroll.scrollLeft + Position.deltaX;
-        p[1] += this.options.scroll.scrollTop + Position.deltaY;
-        p.push(p[0]+this.options.scroll.offsetWidth);
-        p.push(p[1]+this.options.scroll.offsetHeight);
-      }
-      var speed = [0,0];
-      if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
-      if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
-      if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
-      if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
-      this.startScrolling(speed);
-    }
-    
-    // fix AppleWebKit rendering
-    if(Prototype.Browser.WebKit) window.scrollBy(0,0);
-    
-    Event.stop(event);
-  },
-  
-  finishDrag: function(event, success) {
-    this.dragging = false;
-    
-    if(this.options.quiet){
-      Position.prepare();
-      var pointer = [Event.pointerX(event), Event.pointerY(event)];
-      Droppables.show(pointer, this.element);
-    }
-
-    if(this.options.ghosting) {
-      if (!this.element._originallyAbsolute)
-        Position.relativize(this.element);
-      delete this.element._originallyAbsolute;
-      Element.remove(this._clone);
-      this._clone = null;
-    }
-
-    var dropped = false; 
-    if(success) { 
-      dropped = Droppables.fire(event, this.element); 
-      if (!dropped) dropped = false; 
-    }
-    if(dropped && this.options.onDropped) this.options.onDropped(this.element);
-    Draggables.notify('onEnd', this, event);
-
-    var revert = this.options.revert;
-    if(revert && Object.isFunction(revert)) revert = revert(this.element);
-    
-    var d = this.currentDelta();
-    if(revert && this.options.reverteffect) {
-      if (dropped == 0 || revert != 'failure')
-        this.options.reverteffect(this.element,
-          d[1]-this.delta[1], d[0]-this.delta[0]);
-    } else {
-      this.delta = d;
-    }
-
-    if(this.options.zindex)
-      this.element.style.zIndex = this.originalZ;
-
-    if(this.options.endeffect) 
-      this.options.endeffect(this.element);
-      
-    Draggables.deactivate(this);
-    Droppables.reset();
-  },
-  
-  keyPress: function(event) {
-    if(event.keyCode!=Event.KEY_ESC) return;
-    this.finishDrag(event, false);
-    Event.stop(event);
-  },
-  
-  endDrag: function(event) {
-    if(!this.dragging) return;
-    this.stopScrolling();
-    this.finishDrag(event, true);
-    Event.stop(event);
-  },
-  
-  draw: function(point) {
-    var pos = Position.cumulativeOffset(this.element);
-    if(this.options.ghosting) {
-      var r   = Position.realOffset(this.element);
-      pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
-    }
-    
-    var d = this.currentDelta();
-    pos[0] -= d[0]; pos[1] -= d[1];
-    
-    if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
-      pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
-      pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
-    }
-    
-    var p = [0,1].map(function(i){ 
-      return (point[i]-pos[i]-this.offset[i]) 
-    }.bind(this));
-    
-    if(this.options.snap) {
-      if(Object.isFunction(this.options.snap)) {
-        p = this.options.snap(p[0],p[1],this);
-      } else {
-      if(Object.isArray(this.options.snap)) {
-        p = p.map( function(v, i) {
-          return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this))
-      } else {
-        p = p.map( function(v) {
-          return (v/this.options.snap).round()*this.options.snap }.bind(this))
-      }
-    }}
-    
-    var style = this.element.style;
-    if((!this.options.constraint) || (this.options.constraint=='horizontal'))
-      style.left = p[0] + "px";
-    if((!this.options.constraint) || (this.options.constraint=='vertical'))
-      style.top  = p[1] + "px";
-    
-    if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
-  },
-  
-  stopScrolling: function() {
-    if(this.scrollInterval) {
-      clearInterval(this.scrollInterval);
-      this.scrollInterval = null;
-      Draggables._lastScrollPointer = null;
-    }
-  },
-  
-  startScrolling: function(speed) {
-    if(!(speed[0] || speed[1])) return;
-    this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed];
-    this.lastScrolled = new Date();
-    this.scrollInterval = setInterval(this.scroll.bind(this), 10);
-  },
-  
-  scroll: function() {
-    var current = new Date();
-    var delta = current - this.lastScrolled;
-    this.lastScrolled = current;
-    if(this.options.scroll == window) {
-      with (this._getWindowScroll(this.options.scroll)) {
-        if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
-          var d = delta / 1000;
-          this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] );
-        }
-      }
-    } else {
-      this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
-      this.options.scroll.scrollTop  += this.scrollSpeed[1] * delta / 1000;
-    }
-    
-    Position.prepare();
-    Droppables.show(Draggables._lastPointer, this.element);
-    Draggables.notify('onDrag', this);
-    if (this._isScrollChild) {
-      Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer);
-      Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000;
-      Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000;
-      if (Draggables._lastScrollPointer[0] < 0)
-        Draggables._lastScrollPointer[0] = 0;
-      if (Draggables._lastScrollPointer[1] < 0)
-        Draggables._lastScrollPointer[1] = 0;
-      this.draw(Draggables._lastScrollPointer);
-    }
-    
-    if(this.options.change) this.options.change(this);
-  },
-  
-  _getWindowScroll: function(w) {
-    var T, L, W, H;
-    with (w.document) {
-      if (w.document.documentElement && documentElement.scrollTop) {
-        T = documentElement.scrollTop;
-        L = documentElement.scrollLeft;
-      } else if (w.document.body) {
-        T = body.scrollTop;
-        L = body.scrollLeft;
-      }
-      if (w.innerWidth) {
-        W = w.innerWidth;
-        H = w.innerHeight;
-      } else if (w.document.documentElement && documentElement.clientWidth) {
-        W = documentElement.clientWidth;
-        H = documentElement.clientHeight;
-      } else {
-        W = body.offsetWidth;
-        H = body.offsetHeight
-      }
-    }
-    return { top: T, left: L, width: W, height: H };
-  }
-});
-
-Draggable._dragging = { };
-
-/*--------------------------------------------------------------------------*/
-
-var SortableObserver = Class.create({
-  initialize: function(element, observer) {
-    this.element   = $(element);
-    this.observer  = observer;
-    this.lastValue = Sortable.serialize(this.element);
-  },
-  
-  onStart: function() {
-    this.lastValue = Sortable.serialize(this.element);
-  },
-  
-  onEnd: function() {
-    Sortable.unmark();
-    if(this.lastValue != Sortable.serialize(this.element))
-      this.observer(this.element)
-  }
-});
-
-var Sortable = {
-  SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
-  
-  sortables: { },
-  
-  _findRootElement: function(element) {
-    while (element.tagName.toUpperCase() != "BODY") {  
-      if(element.id && Sortable.sortables[element.id]) return element;
-      element = element.parentNode;
-    }
-  },
-
-  options: function(element) {
-    element = Sortable._findRootElement($(element));
-    if(!element) return;
-    return Sortable.sortables[element.id];
-  },
-  
-  destroy: function(element){
-    var s = Sortable.options(element);
-    
-    if(s) {
-      Draggables.removeObserver(s.element);
-      s.droppables.each(function(d){ Droppables.remove(d) });
-      s.draggables.invoke('destroy');
-      
-      delete Sortable.sortables[s.element.id];
-    }
-  },
-
-  create: function(element) {
-    element = $(element);
-    var options = Object.extend({ 
-      element:     element,
-      tag:         'li',       // assumes li children, override with tag: 'tagname'
-      dropOnEmpty: false,
-      tree:        false,
-      treeTag:     'ul',
-      overlap:     'vertical', // one of 'vertical', 'horizontal'
-      constraint:  'vertical', // one of 'vertical', 'horizontal', false
-      containment: element,    // also takes array of elements (or id's); or false
-      handle:      false,      // or a CSS class
-      only:        false,
-      delay:       0,
-      hoverclass:  null,
-      ghosting:    false,
-      quiet:       false, 
-      scroll:      false,
-      scrollSensitivity: 20,
-      scrollSpeed: 15,
-      format:      this.SERIALIZE_RULE,
-      
-      // these take arrays of elements or ids and can be 
-      // used for better initialization performance
-      elements:    false,
-      handles:     false,
-      
-      onChange:    Prototype.emptyFunction,
-      onUpdate:    Prototype.emptyFunction
-    }, arguments[1] || { });
-
-    // clear any old sortable with same element
-    this.destroy(element);
-
-    // build options for the draggables
-    var options_for_draggable = {
-      revert:      true,
-      quiet:       options.quiet,
-      scroll:      options.scroll,
-      scrollSpeed: options.scrollSpeed,
-      scrollSensitivity: options.scrollSensitivity,
-      delay:       options.delay,
-      ghosting:    options.ghosting,
-      constraint:  options.constraint,
-      handle:      options.handle };
-
-    if(options.starteffect)
-      options_for_draggable.starteffect = options.starteffect;
-
-    if(options.reverteffect)
-      options_for_draggable.reverteffect = options.reverteffect;
-    else
-      if(options.ghosting) options_for_draggable.reverteffect = function(element) {
-        element.style.top  = 0;
-        element.style.left = 0;
-      };
-
-    if(options.endeffect)
-      options_for_draggable.endeffect = options.endeffect;
-
-    if(options.zindex)
-      options_for_draggable.zindex = options.zindex;
-
-    // build options for the droppables  
-    var options_for_droppable = {
-      overlap:     options.overlap,
-      containment: options.containment,
-      tree:        options.tree,
-      hoverclass:  options.hoverclass,
-      onHover:     Sortable.onHover
-    }
-    
-    var options_for_tree = {
-      onHover:      Sortable.onEmptyHover,
-      overlap:      options.overlap,
-      containment:  options.containment,
-      hoverclass:   options.hoverclass
-    }
-
-    // fix for gecko engine
-    Element.cleanWhitespace(element); 
-
-    options.draggables = [];
-    options.droppables = [];
-
-    // drop on empty handling
-    if(options.dropOnEmpty || options.tree) {
-      Droppables.add(element, options_for_tree);
-      options.droppables.push(element);
-    }
-
-    (options.elements || this.findElements(element, options) || []).each( function(e,i) {
-      var handle = options.handles ? $(options.handles[i]) :
-        (options.handle ? $(e).select('.' + options.handle)[0] : e); 
-      options.draggables.push(
-        new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
-      Droppables.add(e, options_for_droppable);
-      if(options.tree) e.treeNode = element;
-      options.droppables.push(e);      
-    });
-    
-    if(options.tree) {
-      (Sortable.findTreeElements(element, options) || []).each( function(e) {
-        Droppables.add(e, options_for_tree);
-        e.treeNode = element;
-        options.droppables.push(e);
-      });
-    }
-
-    // keep reference
-    this.sortables[element.id] = options;
-
-    // for onupdate
-    Draggables.addObserver(new SortableObserver(element, options.onUpdate));
-
-  },
-
-  // return all suitable-for-sortable elements in a guaranteed order
-  findElements: function(element, options) {
-    return Element.findChildren(
-      element, options.only, options.tree ? true : false, options.tag);
-  },
-  
-  findTreeElements: function(element, options) {
-    return Element.findChildren(
-      element, options.only, options.tree ? true : false, options.treeTag);
-  },
-
-  onHover: function(element, dropon, overlap) {
-    if(Element.isParent(dropon, element)) return;
-
-    if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
-      return;
-    } else if(overlap>0.5) {
-      Sortable.mark(dropon, 'before');
-      if(dropon.previousSibling != element) {
-        var oldParentNode = element.parentNode;
-        element.style.visibility = "hidden"; // fix gecko rendering
-        dropon.parentNode.insertBefore(element, dropon);
-        if(dropon.parentNode!=oldParentNode) 
-          Sortable.options(oldParentNode).onChange(element);
-        Sortable.options(dropon.parentNode).onChange(element);
-      }
-    } else {
-      Sortable.mark(dropon, 'after');
-      var nextElement = dropon.nextSibling || null;
-      if(nextElement != element) {
-        var oldParentNode = element.parentNode;
-        element.style.visibility = "hidden"; // fix gecko rendering
-        dropon.parentNode.insertBefore(element, nextElement);
-        if(dropon.parentNode!=oldParentNode) 
-          Sortable.options(oldParentNode).onChange(element);
-        Sortable.options(dropon.parentNode).onChange(element);
-      }
-    }
-  },
-  
-  onEmptyHover: function(element, dropon, overlap) {
-    var oldParentNode = element.parentNode;
-    var droponOptions = Sortable.options(dropon);
-        
-    if(!Element.isParent(dropon, element)) {
-      var index;
-      
-      var children = Sortable.findElements(dropon, {tag: droponOptions.tag, only: droponOptions.only});
-      var child = null;
-            
-      if(children) {
-        var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap);
-        
-        for (index = 0; index < children.length; index += 1) {
-          if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) {
-            offset -= Element.offsetSize (children[index], droponOptions.overlap);
-          } else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) {
-            child = index + 1 < children.length ? children[index + 1] : null;
-            break;
-          } else {
-            child = children[index];
-            break;
-          }
-        }
-      }
-      
-      dropon.insertBefore(element, child);
-      
-      Sortable.options(oldParentNode).onChange(element);
-      droponOptions.onChange(element);
-    }
-  },
-
-  unmark: function() {
-    if(Sortable._marker) Sortable._marker.hide();
-  },
-
-  mark: function(dropon, position) {
-    // mark on ghosting only
-    var sortable = Sortable.options(dropon.parentNode);
-    if(sortable && !sortable.ghosting) return; 
-
-    if(!Sortable._marker) {
-      Sortable._marker = 
-        ($('dropmarker') || Element.extend(document.createElement('DIV'))).
-          hide().addClassName('dropmarker').setStyle({position:'absolute'});
-      document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
-    }    
-    var offsets = Position.cumulativeOffset(dropon);
-    Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'});
-    
-    if(position=='after')
-      if(sortable.overlap == 'horizontal') 
-        Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'});
-      else
-        Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'});
-    
-    Sortable._marker.show();
-  },
-  
-  _tree: function(element, options, parent) {
-    var children = Sortable.findElements(element, options) || [];
-  
-    for (var i = 0; i < children.length; ++i) {
-      var match = children[i].id.match(options.format);
-
-      if (!match) continue;
-      
-      var child = {
-        id: encodeURIComponent(match ? match[1] : null),
-        element: element,
-        parent: parent,
-        children: [],
-        position: parent.children.length,
-        container: $(children[i]).down(options.treeTag)
-      }
-      
-      /* Get the element containing the children and recurse over it */
-      if (child.container)
-        this._tree(child.container, options, child)
-      
-      parent.children.push (child);
-    }
-
-    return parent; 
-  },
-
-  tree: function(element) {
-    element = $(element);
-    var sortableOptions = this.options(element);
-    var options = Object.extend({
-      tag: sortableOptions.tag,
-      treeTag: sortableOptions.treeTag,
-      only: sortableOptions.only,
-      name: element.id,
-      format: sortableOptions.format
-    }, arguments[1] || { });
-    
-    var root = {
-      id: null,
-      parent: null,
-      children: [],
-      container: element,
-      position: 0
-    }
-    
-    return Sortable._tree(element, options, root);
-  },
-
-  /* Construct a [i] index for a particular node */
-  _constructIndex: function(node) {
-    var index = '';
-    do {
-      if (node.id) index = '[' + node.position + ']' + index;
-    } while ((node = node.parent) != null);
-    return index;
-  },
-
-  sequence: function(element) {
-    element = $(element);
-    var options = Object.extend(this.options(element), arguments[1] || { });
-    
-    return $(this.findElements(element, options) || []).map( function(item) {
-      return item.id.match(options.format) ? item.id.match(options.format)[1] : '';
-    });
-  },
-
-  setSequence: function(element, new_sequence) {
-    element = $(element);
-    var options = Object.extend(this.options(element), arguments[2] || { });
-    
-    var nodeMap = { };
-    this.findElements(element, options).each( function(n) {
-        if (n.id.match(options.format))
-            nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
-        n.parentNode.removeChild(n);
-    });
-   
-    new_sequence.each(function(ident) {
-      var n = nodeMap[ident];
-      if (n) {
-        n[1].appendChild(n[0]);
-        delete nodeMap[ident];
-      }
-    });
-  },
-  
-  serialize: function(element) {
-    element = $(element);
-    var options = Object.extend(Sortable.options(element), arguments[1] || { });
-    var name = encodeURIComponent(
-      (arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
-    
-    if (options.tree) {
-      return Sortable.tree(element, arguments[1]).children.map( function (item) {
-        return [name + Sortable._constructIndex(item) + "[id]=" + 
-                encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
-      }).flatten().join('&');
-    } else {
-      return Sortable.sequence(element, arguments[1]).map( function(item) {
-        return name + "[]=" + encodeURIComponent(item);
-      }).join('&');
-    }
-  }
-}
-
-// Returns true if child is contained within element
-Element.isParent = function(child, element) {
-  if (!child.parentNode || child == element) return false;
-  if (child.parentNode == element) return true;
-  return Element.isParent(child.parentNode, element);
-}
-
-Element.findChildren = function(element, only, recursive, tagName) {   
-  if(!element.hasChildNodes()) return null;
-  tagName = tagName.toUpperCase();
-  if(only) only = [only].flatten();
-  var elements = [];
-  $A(element.childNodes).each( function(e) {
-    if(e.tagName && e.tagName.toUpperCase()==tagName &&
-      (!only || (Element.classNames(e).detect(function(v) { return only.include(v) }))))
-        elements.push(e);
-    if(recursive) {
-      var grandchildren = Element.findChildren(e, only, recursive, tagName);
-      if(grandchildren) elements.push(grandchildren);
-    }
-  });
-
-  return (elements.length>0 ? elements.flatten() : []);
-}
-
-Element.offsetSize = function (element, type) {
-  return element['offset' + ((type=='vertical' || type=='height') ? 'Height' : 'Width')];
-}

public/stylesheets/ba.css

@@ -22,16 +22,24 @@ a, a:visited, a:hover {
 
 fieldset {
   width: 500px;
-  margin-left: 25px;
+  margin: 15px auto 15px auto;
 }
 
 label {
   margin-right: 5px;
 }
 
+h1 {
+  text-align: center;
+}
+
+h1 img {
+  vertical-align: middle;
+}
+
 #container {
   margin: 0 auto;
-  width: 750px;
+  width: 775px;
   position: relative;
   background: #ffffff;
   padding: 0px;
@@ -59,17 +67,15 @@ label {
   border-bottom: 1px solid #a40000;
 }
 
-#header {
-  height: 120px;
-  padding-top: 10px;
-}
-
 #header_image {
-  margin-left: 30px;
+  width: 446px;
+  margin: 0px auto;
+  padding: 10px 0px;
 }
 
 #tool_bar {
   margin-top: 7px;
+  margin-bottom: 10x;
   padding: 3px 10px 3px 10px;
   border-top: 1px solid #c17d11;
   border-bottom: 1px solid #c17d11;
@@ -119,3 +125,129 @@ label {
 
 #recaptcha_container {
   margin: 10px 0px 10px 0px;
+}
+
+.centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#mini_container {
+  width: 650px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  min-height: 35px;
+}
+
+#photo_browser {
+  height: 460px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.stat_box {
+  width: 105px;
+  float: left;
+  margin-left: 20px;
+  min-height: 30px;
+  border: 1px solid #555753;
+  background-color: #babdb6;
+}
+
+.stat_box img {
+  display: block;
+  margin: 3px auto 3px auto;
+}
+
+.stat_box p {
+  text-align: center;
+  margin: 3px;
+  padding: 0px;
+}
+
+.photo_browser_box {
+  width: 105px;
+  height: 105px;
+  float: left;
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+
+.photo_browser_box img {
+  display: block;
+  margin: auto;
+  vertical-align: middle;
+}
+
+#vote_error {
+  width: 400px;
+  padding: 3px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+#main_photo_container p {
+  text-align: center;
+}
+
+#vote_controls {
+  border: 1px solid #c17d11;
+  background-color: #e9b96e;
+  width: 66px;
+  height: 32px;
+}
+
+#vote_controls img {
+  padding: 5px;
+  width: 22px;
+  height: 22px;
+  float: left;
+}
+
+.user_stat_chart {
+  float: left;
+  width: 300px;
+  height: 200px;
+  margin: 0px 10px 5px 25px;
+  border: 1px solid #8f5902;
+}
+
+#scrolling_photo_block_container {
+  margin-right: 5px;
+  margin-bottom: 5px;
+  float: right;
+  width: 282px;
+  height: 336px;
+}
+
+#pagination_navigation {
+  width: 250px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#pagination_navigation p {
+  text-align: center;
+}
+
+#pagination_navigation img {
+  display: inline;
+  vertical-align: middle;
+}
+
+#scrolling_photo_block_container p {
+  text-align: center;
+  margin: 5px;
+}
+
+#scrolling_photo_block img {
+  display: block;
+  margin: 5px auto 5px auto;
+  padding: 0px;
+}
+
+#scrolling_photo_block td, #scrolling_photo_block table {
+  border: 1px solid #8f5902;
+  padding: 0px;
+  margin: 0px;
+}

schema/migrations/002_create_photos_migration.rb

@@ -1,13 +1,12 @@
 class CreatePhotosMigration < ActiveRecord::Migration
   def self.up
     create_table :photos do |t|
-      t.string :filename
+      t.string :filename, :content_type, :email_hash
-      t.integer :user_id
+      t.integer :width, :height
-      t.string :owner_token
       t.datetime :created_at
+      t.boolean :approved
     end
-    add_index :photos, :user_id
+    add_index :photos, :email_hash
-    add_index :photos, :owner_token
   end
 
   def self.down

schema/migrations/003_create_votes_migration.rb

@@ -2,10 +2,12 @@ class CreateVotesMigration < ActiveRecord::Migration
   def self.up
     create_table :votes do |t|
       t.integer :photo_id, :user_id
+      t.string :session_id
       t.boolean :vote
     end
     add_index :votes, :photo_id
     add_index :votes, :user_id
+    add_index :votes, :session_id
   end
 
   def self.down

schema/migrations/005_photo_favorite_migration.rb

@@ -0,0 +1,13 @@
+class PhotoFavoriteMigration < ActiveRecord::Migration
+  def self.up
+    create_table :photo_favorites do |t|
+      t.integer :photo_id, :user_id
+    end
+    add_index :photo_favorites, :photo_id
+    add_index :photo_favorites, :user_id
+  end
+
+  def self.down
+    drop_table :photo_favorites
+  end
+end

schema/schema.rb

@@ -9,17 +9,27 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 4) do
+ActiveRecord::Schema.define(:version => 5) do
+
+  create_table "photo_favorites", :force => true do |t|
+    t.integer "photo_id"
+    t.integer "user_id"
+  end
+
+  add_index "photo_favorites", ["user_id"], :name => "index_photo_favorites_on_user_id"
+  add_index "photo_favorites", ["photo_id"], :name => "index_photo_favorites_on_photo_id"
 
   create_table "photos", :force => true do |t|
     t.string   "filename"
-    t.integer  "user_id"
+    t.string   "content_type"
-    t.string   "owner_token"
+    t.string   "email_hash"
+    t.integer  "width"
+    t.integer  "height"
     t.datetime "created_at"
+    t.boolean  "approved"
   end
 
-  add_index "photos", ["owner_token"], :name => "index_photos_on_owner_token"
+  add_index "photos", ["email_hash"], :name => "index_photos_on_email_hash"
-  add_index "photos", ["user_id"], :name => "index_photos_on_user_id"
 
   create_table "sessions", :force => true do |t|
     t.string   "session_id"
@@ -41,9 +51,11 @@ ActiveRecord::Schema.define(:version => 4) do
   create_table "votes", :force => true do |t|
     t.integer "photo_id"
     t.integer "user_id"
+    t.string  "session_id"
     t.boolean "vote"
   end
 
+  add_index "votes", ["session_id"], :name => "index_votes_on_session_id"
   add_index "votes", ["user_id"], :name => "index_votes_on_user_id"
   add_index "votes", ["photo_id"], :name => "index_votes_on_photo_id"
 

spec/controllers/stats_spec.rb

@@ -1,7 +0,0 @@
-require File.join(File.dirname(__FILE__), '..', 'spec_helper.rb')
-
-describe Stats, "index action" do
-  before(:each) do
-    dispatch_to(Stats, :index)
-  end
-end

spec/helpers/stats_helper_spec.rb

@@ -1,5 +0,0 @@
-require File.join(File.dirname(__FILE__), '..', 'spec_helper.rb')
-
-describe Merb::StatsHelper do
-
-end

spec/models/photo_favorite_spec.rb

@@ -0,0 +1,7 @@
+require File.join( File.dirname(__FILE__), '..', "spec_helper" )
+
+describe PhotoFavorite do
+
+  it "should have specs"
+
+end