From 1dd2ccb00b8a7dbd3491057094a35cec46097827 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 10 Nov 2010 16:59:54 -0500
Subject: [PATCH] lovely interface for saving outfits. still no reading them
 yet

---
 app/controllers/outfits_controller.rb         |  14 +
 app/controllers/sessions_controller.rb        |   2 +-
 app/helpers/application_helper.rb             |   8 +-
 app/models/item_outfit_relationship.rb        |   6 +
 app/models/outfit.rb                          |  36 +
 app/stylesheets/_layout.sass                  |  12 +-
 app/stylesheets/outfits/_edit.sass            | 257 ++++---
 app/stylesheets/partials/clean/_mixins.sass   |  15 +
 app/stylesheets/screen.sass                   |   2 +
 app/views/layouts/application.html.haml       |   3 +-
 app/views/outfits/edit.html.haml              |  81 ++-
 config/routes.rb                              |   1 +
 db/migrate/20101109021049_create_outfits.rb   |  14 +
 ...021147_create_item_outfit_relationships.rb |  15 +
 ...0213044_add_name_and_starred_to_outfits.rb |  11 +
 db/schema.rb                                  |  85 ++-
 public/javascripts/outfits/edit.js            | 253 ++++---
 public/javascripts/wardrobe.js                | 433 +++++++-----
 public/stylesheets/compiled/screen.css        | 640 +++++++++++++-----
 spec/models/item_outfit_relationship_spec.rb  |   5 +
 spec/models/outfit_spec.rb                    |   5 +
 21 files changed, 1286 insertions(+), 612 deletions(-)
 create mode 100644 app/models/item_outfit_relationship.rb
 create mode 100644 app/models/outfit.rb
 create mode 100644 db/migrate/20101109021049_create_outfits.rb
 create mode 100644 db/migrate/20101109021147_create_item_outfit_relationships.rb
 create mode 100644 db/migrate/20101110213044_add_name_and_starred_to_outfits.rb
 create mode 100644 spec/models/item_outfit_relationship_spec.rb
 create mode 100644 spec/models/outfit_spec.rb

diff --git a/app/controllers/outfits_controller.rb b/app/controllers/outfits_controller.rb
index 7f0aaddd..47dd0d30 100644
--- a/app/controllers/outfits_controller.rb
+++ b/app/controllers/outfits_controller.rb
@@ -1,4 +1,18 @@
 class OutfitsController < ApplicationController
+  def create
+    if user_signed_in?
+      outfit = Outfit.new params[:outfit]
+      outfit.user = current_user
+      if outfit.save
+        render :json => true
+      else
+        render :json => {:errors => outfit.errors}, :status => :bad_request
+      end
+    else
+      render :json => {:errors => {:user => ['not logged in']}}, :status => :forbidden
+    end
+  end
+  
   def new
     @colors = Color.all
     @species = Species.all
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index a6ffa60a..b1a2a6b1 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -18,7 +18,7 @@ class SessionsController < ApplicationController
   
   def destroy
     warden.logout
-    redirect_to root_path
+    redirect_to (params[:return_to] || root_path)
   end
   
   protected
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index b5836516..d574a3a5 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -29,7 +29,7 @@ module ApplicationHelper
     :addthis => 'http://s7.addthis.com/js/250/addthis_widget.js#username=openneo',
     :bitly => 'http://bit.ly/javascript-api.js?version=latest&login=openneo&apiKey=R_4d0438829b7a99860de1d3edf55d8dc8',
     :html5 => 'http://html5shim.googlecode.com/svn/trunk/html5.js',
-    :jquery => 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js',
+    :jquery => 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js',
     :swfobject => 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'
   }
   
@@ -40,7 +40,11 @@ module ApplicationHelper
   end
   
   def login_path_with_return_to
-    login_path :return_to => request.request_uri
+    login_path :return_to => request.fullpath
+  end
+  
+  def logout_path_with_return_to
+    logout_path :return_to => request.fullpath
   end
   
   def origin_tag(value)
diff --git a/app/models/item_outfit_relationship.rb b/app/models/item_outfit_relationship.rb
new file mode 100644
index 00000000..a5fc64cf
--- /dev/null
+++ b/app/models/item_outfit_relationship.rb
@@ -0,0 +1,6 @@
+class ItemOutfitRelationship < ActiveRecord::Base
+  belongs_to :item
+  belongs_to :outfit
+  
+  validates_presence_of :item
+end
diff --git a/app/models/outfit.rb b/app/models/outfit.rb
new file mode 100644
index 00000000..8c7d0543
--- /dev/null
+++ b/app/models/outfit.rb
@@ -0,0 +1,36 @@
+class Outfit < ActiveRecord::Base
+  has_many :item_outfit_relationships
+  belongs_to :pet_state
+  belongs_to :user
+  
+  validates :name, :presence => true
+  validates :pet_state, :presence => true
+  
+  attr_accessible :name, :pet_state_id, :starred, :unworn_item_ids, :worn_item_ids
+  
+  def worn_and_unworn_items
+    {:worn => [], :unworn => []}.tap do |output|
+      item_outfit_relationships.all(:include => :item).each do |rel|
+        key = rel.is_worn? ? :worn : :unworn
+        output[key] << rel.item
+      end
+    end
+  end
+  
+  def worn_item_ids=(item_ids)
+    add_relationships(item_ids, true)
+  end
+  
+  def unworn_item_ids=(item_ids)
+    add_relationships(item_ids, false)
+  end
+  
+  def add_relationships(item_ids, worn)
+    item_ids.each do |item_id|
+      rel = ItemOutfitRelationship.new
+      rel.item_id = item_id
+      rel.is_worn = worn
+      item_outfit_relationships << rel
+    end
+  end
+end
diff --git a/app/stylesheets/_layout.sass b/app/stylesheets/_layout.sass
index d3652195..253603a1 100644
--- a/app/stylesheets/_layout.sass
+++ b/app/stylesheets/_layout.sass
@@ -118,19 +118,13 @@ ul.buttons
   text-align: center
 
 .success
-  background: $notice-bg-color
-  border: 1px solid $notice-border-color
-  color: $notice-color
+  +notice
 
 .alert
-  background: $error-bg-color
-  border: 1px solid $error-border-color
-  color: $error-color
+  +error
 
 .warning
-  background: $warning-bg-color
-  border: 1px solid $warning-border-color
-  color: $warning-color
+  +warning
 
 #userbar
   +header-text
diff --git a/app/stylesheets/outfits/_edit.sass b/app/stylesheets/outfits/_edit.sass
index fed633f4..3e196d09 100644
--- a/app/stylesheets/outfits/_edit.sass
+++ b/app/stylesheets/outfits/_edit.sass
@@ -9,12 +9,98 @@ $sidebar-width: 400px
 $sidebar-unit-horizontal-padding: 24px
 $sidebar-unit-inner-width: $sidebar-width - $sidebar-unit-horizontal-padding * 2
 
+$outfit-thumbnail-size: 0
+$outfit-thumbnail-original-size: 100px
+$outfit-thumbnail-margin: 12px
+$outfit-header-padding: 24px
+$outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
+$outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
+
+=outfit
+  //+clearfix
+  margin-bottom: .5em
+  //.outfit-thumbnail
+    float: left
+    height: $outfit-thumbnail-size
+    margin-right: $outfit-thumbnail-margin
+    overflow: hidden
+    position: relative
+    width: $outfit-thumbnail-size
+  img
+    height: $outfit-thumbnail-original-size
+    left: -$outfit-thumbnail-original-size / 4
+    position: absolute
+    top: -$outfit-thumbnail-original-size / 4
+    width: $outfit-thumbnail-original-size
+  //> div
+    float: left
+    width: $outfit-content-width
+  .outfit-delete
+    +reset-awesome-button
+    +opacity(.5)
+    font-size: 150%
+    float: right
+    line-height: 1
+    margin-top: -.125em
+    padding: .125em .25em
+    &:hover
+      +opacity(1)
+      background: $module-bg-color
+  header
+    display: block
+    padding-left: $outfit-header-padding
+  .outfit-star
+    background:
+      image: url(/images/unstarred.png)
+      position: left top
+      repeat: no-repeat
+    bottom: -2px
+    /* margin-bottom doesn't work here
+    cursor: pointer
+    display: block
+    float: left
+    height: 16px
+    margin-left: -24px
+    /* makes it not take up inline space
+    position: relative
+    width: 16px
+  h4
+    cursor: pointer
+    font-size: 115%
+    &:hover
+      text-decoration: underline
+  .outfit-url
+    +opacity(.5)
+    border-color: $background-color
+    font-size: 75%
+    width: $outfit-content-inner-width
+    &:hover
+      +opacity(1)
+      border-color: $input-border-color
+  .outfit-delete-confirmation
+    display: none
+    font-size: 75%
+    span
+      color: red
+    a
+      margin: 0 .25em
+  &.confirming-deletion
+    .outfit-delete
+      visibility: hidden
+    .outfit-url
+      display: none
+    .outfit-delete-confirmation
+      display: block
+  &.starred
+    .outfit-star
+      background-image: url(/images/star.png)
+
 body.outfits-edit
   #preview-toolbar
     margin-bottom: .5em
     text-align: left
     form
-      display: inline
+      +inline-block
       margin-right: 2em
   #pet-info form
     display: inline
@@ -30,27 +116,12 @@ body.outfits-edit
       margin: 0 .25em
     li.selected label
       +awesome-button-color($marked_button_color)
-  #sharing
+    &.hidden
+      visibility: hidden
+  #save-outfit-wrapper
     float: right
-    position: relative
-  #short-url-response
-    font-size: 87.5%
-    display: none
-    position: absolute
-    right: 0
-    top: -2em
-    width: 20em
-  #share-button-wrapper
-    display: inline
-  #share-button
-    img
-      margin:
-        bottom: -0.25em
-        right: .25em
-      height: 16px
-      width: 16px
-    &:active
-      top: 1px
+    button
+      +loud-awesome-button-color
   #preview
     clear: both
   #preview-swf
@@ -78,6 +149,13 @@ body.outfits-edit
         display: none
       #preview-outfits
         display: block
+    &.viewing-saving-outfit
+      height: auto
+      max-height: 100%
+      #preview-closet
+        display: none
+      #preview-saving-outfit
+        display: block
   #preview-closet
     h2
       margin: 0
@@ -180,9 +258,14 @@ body.outfits-edit
       position: relative
       width: $sidebar-width
       > div
-        padding:
+        margin:
           left: $sidebar-unit-horizontal-padding
           right: $sidebar-unit-horizontal-padding
+        h2
+          margin-bottom: .25em
+      &.viewing-saving-outfit
+        height: auto
+        max-height: 100%
     #preview-search-form
       bottom: 1em
       left: 0
@@ -259,18 +342,9 @@ body.outfits-edit
     &:hover
       +opacity(1)
 
-  $outfit-thumbnail-size: 50px
-  $outfit-thumbnail-original-size: 100px
-  $outfit-thumbnail-margin: 12px
-  $outfit-header-padding: 24px
-  $outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
-  $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
-
   #preview-outfits
     display: none
     text-align: left
-    h2
-      margin-bottom: .25em
     h3
       margin-bottom: .5em
     > ul
@@ -279,84 +353,53 @@ body.outfits-edit
       list-style: none
       margin-bottom: 1em
       > li
-        +clearfix
-        font-size: 75%
-        margin-bottom: .5em
-        .outfit-thumbnail
-          float: left
-          height: $outfit-thumbnail-size
-          margin-right: $outfit-thumbnail-margin
-          overflow: hidden
-          position: relative
-          width: $outfit-thumbnail-size
-        img
-          height: $outfit-thumbnail-original-size
-          left: -$outfit-thumbnail-original-size / 4
-          position: absolute
-          top: -$outfit-thumbnail-original-size / 4
-          width: $outfit-thumbnail-original-size
-        > div
-          float: left
-          width: $outfit-content-width
-        button
-          +reset-awesome-button
-          +opacity(.5)
-          font-size: 150%
-          float: right
-          line-height: 1
-          margin-top: -.125em
-          padding: .125em .25em
-          &:hover
-            +opacity(1)
-            background: $module-bg-color
-        header
-          display: block
-          padding-left: $outfit-header-padding
-        .outfit-star
-          background:
-            image: url(/images/unstarred.png)
-            position: left top
-            repeat: no-repeat
-          bottom: -2px
-          /* margin-bottom doesn't work here
-          cursor: pointer
-          display: block
-          float: left
-          height: 16px
-          margin-left: -24px
-          /* makes it not take up inline space
-          position: relative
-          width: 16px
-        h4
-          cursor: pointer
-          font-size: 150%
-          &:hover
-            text-decoration: underline
-        input
-          +opacity(.5)
-          border-color: $background-color
-          width: $outfit-content-inner-width
-          &:hover
-            +opacity(1)
-            border-color: $input-border-color
-        .outfit-delete-confirmation
-          display: none
-          span
-            color: red
-          a
-            margin: 0 .25em
-        &.confirming-deletion
-          .outfit-delete
-            visibility: hidden
-          .outfit-url
-            display: none
-          .outfit-delete-confirmation
-            display: block
-        &.starred
-          .outfit-star
-            background-image: url(/images/star.png)
+        +outfit
 
   .preview-sidebar-nav
     float: right
     font-size: 85%
     margin-top: 1em
+  
+  #save-success, #save-error
+    display: none
+    margin-top: 1em
+    text-align: center
+  
+  #save-success
+    +notice
+  
+  #save-error
+    +error
+  
+  #userbar-message
+    +opacity(.5)
+    display: none
+  
+  #new-outfit
+    +outfit
+    display: none
+    h4
+      display: inline
+      &:hover
+        text-decoration: none
+    .outfit-star
+      margin-top: .5em
+  
+  #new-outfit-name
+    font: inherit
+    line-height: 1
+  
+  #preview-saving-outfit
+    display: none
+    padding-bottom: 1em
+  
+  #pet-type-form, #pet-state-form, #preview-swf, #preview-search-form
+    position: relative
+  
+  .control-overlay
+    height: 100%
+    left: 0
+    position: absolute
+    top: 0
+    width: 100%
+    z-index: 5
diff --git a/app/stylesheets/partials/clean/_mixins.sass b/app/stylesheets/partials/clean/_mixins.sass
index 7c051207..d4e65314 100644
--- a/app/stylesheets/partials/clean/_mixins.sass
+++ b/app/stylesheets/partials/clean/_mixins.sass
@@ -91,3 +91,18 @@
   background: $module-bg-color
   border: 1px solid $module-border-color
   padding: 1em
+  
+=notice
+  background: $notice-bg-color
+  border: 1px solid $notice-border-color
+  color: $notice-color
+  
+=error
+  background: $error-bg-color
+  border: 1px solid $error-border-color
+  color: $error-color
+
+=warning
+  background: $warning-bg-color
+  border: 1px solid $warning-border-color
+  color: $warning-color
diff --git a/app/stylesheets/screen.sass b/app/stylesheets/screen.sass
index 4171f728..92707640 100644
--- a/app/stylesheets/screen.sass
+++ b/app/stylesheets/screen.sass
@@ -4,6 +4,8 @@
 
 @import layout
 
+@import partials/jquery.jgrowl
+
 @import contributions/index
 @import items
 @import items/index
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index ea0fa037..ec7710f9 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -8,6 +8,7 @@
         = yield :title
     = stylesheet_link_tag "compiled/screen"
     = javascript_include_tag "http://#{RemoteImpressHost}/assets/js/analytics.js"
+    = csrf_meta_tag
   %body{:class => body_class}
     #container
       - if content_for? :title
@@ -31,7 +32,7 @@
           %span
             == Hey, #{link_to current_user.name, user_contributions_path(current_user)}!
             == You have #{current_user.points} points.
-          = link_to 'Log out', logout_path
+          = link_to 'Log out', logout_path_with_return_to
         - else
           = link_to login_path_with_return_to, :id => 'userbar-log-in' do
             = image_tag auth_server_icon_url
diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml
index 976a8c02..09fbbcba 100644
--- a/app/views/outfits/edit.html.haml
+++ b/app/views/outfits/edit.html.haml
@@ -13,21 +13,16 @@
   %form#pet-state-form
     Gender/Emotions:
     %ul
-  #sharing
-    %input#short-url-response{:type => "text", :value => "http://www.example.com/"}/
-    %button#short-url-button
-      Short URL
-    #share-button-wrapper
-      %button#share-button.addthis_button
-        %img{:src => "http://s7.addthis.com/static/t00/logo1414.gif"}/
-        Share
+  #save-outfit-wrapper
+    %button#save-outfit Save outfit
 #preview
   #preview-swf
     #preview-swf-container
       %p Flash and Javascript (but not Java!) are required to preview outfits.
       %p If this message stays after the page is done loading, check those first.
-    #preview-swf-overlay
   #preview-sidebar
+    #save-success Outfit successfully saved
+    #save-error
     #preview-closet
       %a#preview-sidebar-nav-outfits.preview-sidebar-nav{:href => '#'} Your outfits
       %h2 Closet
@@ -40,61 +35,63 @@
       %h2 Your outfits
       %ul
         %li.starred
-          %span.outfit-thumbnail
-            %img{:src => "http://pets.neopets.com/cp/qw2l4ocw/1/2.png"}/
           %div
             %header
               %button.outfit-delete &times;
               .outfit-star
               %h4 Pretty in Pink
-              %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
-              .outfit-delete-confirmation
-                %span Delete forever?
-                %a.outfit-delete-confirmation-yes{:href => '#'} yes
-                \/
-                %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
+            %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
+            .outfit-delete-confirmation
+              %span Delete forever?
+              %a.outfit-delete-confirmation-yes{:href => '#'} yes
+              \/
+              %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
         %li.starred
-          %span.outfit-thumbnail
-            %img{:src => "http://pets.neopets.com/cp/wgvw75n8/1/2.png"}/
           %div
             %header
               %button.outfit-delete &times;
               .outfit-star
               %h4 The Little Mermaid
-              %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
-              .outfit-delete-confirmation
-                %span Delete forever?
-                %a.outfit-delete-confirmation-yes{:href => '#'} yes
-                \/
-                %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
+            %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
+            .outfit-delete-confirmation
+              %span Delete forever?
+              %a.outfit-delete-confirmation-yes{:href => '#'} yes
+              \/
+              %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
         %li
-          %span.outfit-thumbnail
-            %img{:src => "http://pets.neopets.com/cp/qb98jrng/1/2.png"}/
           %div
             %header
               %button.outfit-delete &times;
               .outfit-star
               %h4 Autumn is Here
-              %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
-              .outfit-delete-confirmation
-                %span Delete forever?
-                %a.outfit-delete-confirmation-yes{:href => '#'} yes
-                \/
-                %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
+            %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
+            .outfit-delete-confirmation
+              %span Delete forever?
+              %a.outfit-delete-confirmation-yes{:href => '#'} yes
+              \/
+              %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
         %li
-          %span.outfit-thumbnail
-            %img{:src => "http://pets.neopets.com/cp/84l7xx9t/1/2.png"}/
           %div
             %header
               %button.outfit-delete &times;
               .outfit-star
               %h4 Super Mysterious Secret Agent
-              %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
-              .outfit-delete-confirmation
-                %span Delete forever?
-                %a.outfit-delete-confirmation-yes{:href => '#'} yes
-                \/
-                %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
+            %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'}
+            .outfit-delete-confirmation
+              %span Delete forever?
+              %a.outfit-delete-confirmation-yes{:href => '#'} yes
+              \/
+              %a.outfit-delete-confirmation-no{:href => '#'} no, thanks
+    #preview-saving-outfit
+      %a#preview-sidebar-nav-cancel-save.preview-sidebar-nav{:href => '#'} &larr; Cancel
+      %h2 Saving new outfit
+      #new-outfit
+        %form#new-outfit-form
+          %header
+            .outfit-star
+            %h4
+              %input#new-outfit-name{:type => 'text', :placeholder => 'Outfit name'}
+            %button{:type => 'submit'} Save
 %form#preview-search-form
   %header
     %h2 Add an item
@@ -139,5 +136,5 @@
 - content_for :javascripts do
   /[if IE]
     = include_javascript_libraries :html5
-  = include_javascript_libraries :jquery, :swfobject, :bitly, :addthis
+  = include_javascript_libraries :jquery, :swfobject
   = include_javascripts :edit_outfit_package
diff --git a/config/routes.rb b/config/routes.rb
index 2ae00245..c23ef8d1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -20,6 +20,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
       get :needed
     end
   end
+  resources :outfits, :only => [:create]
   resources :pet_attributes, :only => [:index]
   
   match '/pets/load' => 'pets#load', :method => :post, :as => :load_pet
diff --git a/db/migrate/20101109021049_create_outfits.rb b/db/migrate/20101109021049_create_outfits.rb
new file mode 100644
index 00000000..3d72d9e3
--- /dev/null
+++ b/db/migrate/20101109021049_create_outfits.rb
@@ -0,0 +1,14 @@
+class CreateOutfits < ActiveRecord::Migration
+  def self.up
+    create_table :outfits do |t|
+      t.integer :pet_state_id
+      t.integer :user_id
+
+      t.timestamps
+    end
+  end
+
+  def self.down
+    drop_table :outfits
+  end
+end
diff --git a/db/migrate/20101109021147_create_item_outfit_relationships.rb b/db/migrate/20101109021147_create_item_outfit_relationships.rb
new file mode 100644
index 00000000..5764d38b
--- /dev/null
+++ b/db/migrate/20101109021147_create_item_outfit_relationships.rb
@@ -0,0 +1,15 @@
+class CreateItemOutfitRelationships < ActiveRecord::Migration
+  def self.up
+    create_table :item_outfit_relationships do |t|
+      t.integer :item_id
+      t.integer :outfit_id
+      t.boolean :is_worn
+
+      t.timestamps
+    end
+  end
+
+  def self.down
+    drop_table :item_outfit_relationships
+  end
+end
diff --git a/db/migrate/20101110213044_add_name_and_starred_to_outfits.rb b/db/migrate/20101110213044_add_name_and_starred_to_outfits.rb
new file mode 100644
index 00000000..06f693c6
--- /dev/null
+++ b/db/migrate/20101110213044_add_name_and_starred_to_outfits.rb
@@ -0,0 +1,11 @@
+class AddNameAndStarredToOutfits < ActiveRecord::Migration
+  def self.up
+    add_column :outfits, :name, :string, :null => false
+    add_column :outfits, :starred, :boolean, :default => false, :null => false
+  end
+
+  def self.down
+    remove_column :outfits, :starred
+    remove_column :outfits, :name
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index ae854a73..74241b0a 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 0) do
+ActiveRecord::Schema.define(:version => 20101110213044) do
 
   create_table "auth_servers", :force => true do |t|
     t.string "short_name", :limit => 10, :null => false
@@ -21,10 +21,18 @@ ActiveRecord::Schema.define(:version => 0) do
   end
 
   create_table "contributions", :force => true do |t|
-    t.string    "contributed_type", :limit => 8, :null => false
-    t.integer   "contributed_id",                :null => false
-    t.integer   "user_id",                       :null => false
-    t.timestamp "created_at",                    :null => false
+    t.string   "contributed_type", :limit => 8, :null => false
+    t.integer  "contributed_id",                :null => false
+    t.integer  "user_id",                       :null => false
+    t.datetime "created_at",                    :null => false
+  end
+
+  create_table "item_outfit_relationships", :force => true do |t|
+    t.integer  "item_id"
+    t.integer  "outfit_id"
+    t.boolean  "is_worn"
+    t.datetime "created_at"
+    t.datetime "updated_at"
   end
 
   create_table "login_cookies", :force => true do |t|
@@ -37,38 +45,47 @@ ActiveRecord::Schema.define(:version => 0) do
   add_index "login_cookies", ["user_id"], :name => "login_cookies_user_id"
 
   create_table "objects", :force => true do |t|
-    t.text      "zones_restrict",      :limit => 255, :null => false
-    t.text      "thumbnail_url",                      :null => false
-    t.string    "name",                :limit => 100, :null => false
-    t.text      "description",                        :null => false
-    t.string    "category",            :limit => 50,  :null => false
-    t.string    "type",                :limit => 50,  :null => false
-    t.string    "rarity",              :limit => 25,  :null => false
-    t.integer   "rarity_index",        :limit => 2,   :null => false
-    t.integer   "price",               :limit => 3,   :null => false
-    t.integer   "weight_lbs",          :limit => 2,   :null => false
-    t.text      "species_support_ids"
-    t.integer   "sold_in_mall",        :limit => 1,   :null => false
-    t.timestamp "last_spidered"
+    t.text     "zones_restrict",      :limit => 255, :null => false
+    t.text     "thumbnail_url",                      :null => false
+    t.string   "name",                :limit => 100, :null => false
+    t.text     "description",                        :null => false
+    t.string   "category",            :limit => 50,  :null => false
+    t.string   "type",                :limit => 50,  :null => false
+    t.string   "rarity",              :limit => 25,  :null => false
+    t.integer  "rarity_index",        :limit => 2,   :null => false
+    t.integer  "price",               :limit => 3,   :null => false
+    t.integer  "weight_lbs",          :limit => 2,   :null => false
+    t.text     "species_support_ids"
+    t.integer  "sold_in_mall",        :limit => 1,   :null => false
+    t.datetime "last_spidered"
   end
 
   add_index "objects", ["last_spidered"], :name => "objects_last_spidered"
   add_index "objects", ["name"], :name => "name"
 
+  create_table "outfits", :force => true do |t|
+    t.integer  "pet_state_id"
+    t.integer  "user_id"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+    t.string   "name",                            :null => false
+    t.boolean  "starred",      :default => false, :null => false
+  end
+
   create_table "parents_swf_assets", :id => false, :force => true do |t|
     t.integer "parent_id",      :limit => 3, :null => false
     t.integer "swf_asset_id",   :limit => 3, :null => false
     t.string  "swf_asset_type", :limit => 7, :null => false
   end
 
+  add_index "parents_swf_assets", ["parent_id", "swf_asset_id", "swf_asset_type"], :name => "unique_parents_swf_assets", :unique => true
   add_index "parents_swf_assets", ["parent_id"], :name => "parent_swf_assets_parent_id"
   add_index "parents_swf_assets", ["swf_asset_id"], :name => "parents_swf_assets_swf_asset_id"
-  add_index "parents_swf_assets", ["parent_id", "swf_asset_id", "swf_asset_type"], :name => "unique_parents_swf_assets", :unique => true
 
   create_table "pet_loads", :force => true do |t|
-    t.string    "pet_name",   :limit => 20, :null => false
-    t.text      "amf",                      :null => false
-    t.timestamp "created_at",               :null => false
+    t.string   "pet_name",   :limit => 20, :null => false
+    t.text     "amf",                      :null => false
+    t.datetime "created_at",               :null => false
   end
 
   create_table "pet_states", :force => true do |t|
@@ -79,11 +96,11 @@ ActiveRecord::Schema.define(:version => 0) do
   add_index "pet_states", ["pet_type_id"], :name => "pet_states_pet_type_id"
 
   create_table "pet_types", :force => true do |t|
-    t.integer   "color_id",   :limit => 1, :null => false
-    t.integer   "species_id", :limit => 1, :null => false
-    t.timestamp "created_at",              :null => false
-    t.integer   "body_id",    :limit => 2, :null => false
-    t.string    "image_hash", :limit => 8
+    t.integer  "color_id",   :limit => 1, :null => false
+    t.integer  "species_id", :limit => 1, :null => false
+    t.datetime "created_at",              :null => false
+    t.integer  "body_id",    :limit => 2, :null => false
+    t.string   "image_hash", :limit => 8
   end
 
   add_index "pet_types", ["species_id", "color_id"], :name => "pet_types_species_color", :unique => true
@@ -101,13 +118,13 @@ ActiveRecord::Schema.define(:version => 0) do
   end
 
   create_table "swf_assets", :id => false, :force => true do |t|
-    t.string    "type",           :limit => 7,   :null => false
-    t.integer   "id",             :limit => 3,   :null => false
-    t.text      "url",                           :null => false
-    t.integer   "zone_id",        :limit => 1,   :null => false
-    t.text      "zones_restrict", :limit => 255, :null => false
-    t.timestamp "created_at",                    :null => false
-    t.integer   "body_id",        :limit => 2,   :null => false
+    t.string   "type",           :limit => 7,   :null => false
+    t.integer  "id",             :limit => 3,   :null => false
+    t.text     "url",                           :null => false
+    t.integer  "zone_id",        :limit => 1,   :null => false
+    t.text     "zones_restrict", :limit => 255, :null => false
+    t.datetime "created_at",                    :null => false
+    t.integer  "body_id",        :limit => 2,   :null => false
   end
 
   add_index "swf_assets", ["body_id"], :name => "swf_assets_body_id_and_object_id"
diff --git a/public/javascripts/outfits/edit.js b/public/javascripts/outfits/edit.js
index 087b47cc..0baab389 100644
--- a/public/javascripts/outfits/edit.js
+++ b/public/javascripts/outfits/edit.js
@@ -1,4 +1,28 @@
-// TODO: remove code associated with Short URL, Share
+// TODO: replace updateItems triggers, move references to wardrobe.closet to outfit controller
+
+(function () {
+  var csrf_param = $('meta[name=csrf-param]').attr('content'),
+    csrf_token = $('meta[name=csrf-token]').attr('content');
+  $.ajaxSetup({
+    data: {csrf_param: csrf_token}
+  });
+})();
+
+(function () {
+  var controlOverlay = $('<div/>', {'class': 'control-overlay'});
+  
+  $.fn.disableControl = function () {
+    this.prepend(controlOverlay.clone()).stop().fadeTo('slow', .35);
+  }
+
+  $.fn.enableControl = function () {
+    this.stop().fadeTo('fast', 1).children('div.control-overlay').remove();
+  }
+})();
+
+$.fn.notify = function () {
+  this.show('slow').delay(5000).hide('fast');
+}
 
 var Partial = {}, main_wardrobe,
   View = Wardrobe.getStandardView({
@@ -43,7 +67,7 @@ Partial.ItemSet = function ItemSet(wardrobe, selector) {
     var item, no_assets, li, no_assets_message;
     for(var i = 0, l = specific_items.length; i < l; i++) {
       item = specific_items[i];
-      no_assets = item.couldNotLoadAssetsFitting(wardrobe.outfit.pet_type);
+      no_assets = item.couldNotLoadAssetsFitting(wardrobe.outfit.getPetType());
       li = $('li.object-' + item.id).toggleClass('no-assets', no_assets);
       (function (li) {
         no_assets_message = li.find('span.no-assets-message');
@@ -82,8 +106,8 @@ Partial.ItemSet = function ItemSet(wardrobe, selector) {
       }
       li.append(img).append(controls).append(info_link).append(item.name).appendTo(ul);
     }
-    setClosetItems(wardrobe.closet.items);
-    setOutfitItems(wardrobe.outfit.items);
+    setClosetItems(wardrobe.outfit.getClosetItems());
+    setOutfitItems(wardrobe.outfit.getWornItems());
   }
   
   $('span.no-assets-message').live('mouseover', function () {
@@ -96,9 +120,9 @@ Partial.ItemSet = function ItemSet(wardrobe, selector) {
     no_assets_full_message.removeAttr('style');
   });
   
-  wardrobe.outfit.bind('updateItemAssets', function () { setHasAssets(wardrobe.outfit.items) });
-  wardrobe.outfit.bind('updateItems', setOutfitItems);
-  wardrobe.closet.bind('updateItems', setClosetItems);
+  wardrobe.outfit.bind('updateItemAssets', function () { setHasAssets(wardrobe.outfit.getWornItems()) });
+  wardrobe.outfit.bind('updateWornItems', setOutfitItems);
+  wardrobe.outfit.bind('updateClosetItems', setClosetItems);
 }
 
 Partial.ItemSet.CONTROL_SETS = {};
@@ -130,12 +154,12 @@ Partial.ItemSet.setWardrobe = function (wardrobe) {
   }
   
   toggle_fn.closeted = {};
-  toggle_fn.closeted[true] = $.proxy(wardrobe.closet, 'addItem');
-  toggle_fn.closeted[false] = function (item) { wardrobe.outfit.removeItem(item); wardrobe.closet.removeItem(item); }
+  toggle_fn.closeted[true] = $.proxy(wardrobe.outfit, 'closetItem');
+  toggle_fn.closeted[false] = $.proxy(wardrobe.outfit, 'unclosetItem');
 
   toggle_fn.worn = {};
-  toggle_fn.worn[true] = function (item) { wardrobe.closet.addItem(item); wardrobe.outfit.addItem(item); }
-  toggle_fn.worn[false] = $.proxy(wardrobe.outfit, 'removeItem');
+  toggle_fn.worn[true] = $.proxy(wardrobe.outfit, 'wearItem');
+  toggle_fn.worn[false] = $.proxy(wardrobe.outfit, 'unwearItem');
   
   Partial.ItemSet.setWardrobe = $.noop;
 }
@@ -143,7 +167,7 @@ Partial.ItemSet.setWardrobe = function (wardrobe) {
 View.Closet = function (wardrobe) {
   var item_set = new Partial.ItemSet(wardrobe, '#preview-closet ul');
   
-  wardrobe.closet.bind('updateItems', $.proxy(item_set, 'setItems'));
+  wardrobe.outfit.bind('updateClosetItems', $.proxy(item_set, 'setItems'));
 }
 
 View.Fullscreen = function (wardrobe) {
@@ -214,7 +238,7 @@ View.Hash = function (wardrobe) {
     search_offset: TYPES.INTEGER,
     species: TYPES.INTEGER,
     state: TYPES.INTEGER
-  }, onUpdateQuery;
+  }, links_with_return_to = $('a[href*=return_to]');
   
   function checkQuery() {
     var query = (document.location.hash || document.location.search).substr(1);
@@ -251,13 +275,13 @@ View.Hash = function (wardrobe) {
     }
     if(new_data.closet) {
       if(!arraysMatch(new_data.closet, data.closet)) {
-        wardrobe.closet.setItemsByIds(new_data.closet.slice(0));
+        wardrobe.outfit.setClosetItemsByIds(new_data.closet.slice(0));
       }
     } else if(!arraysMatch(new_data.objects, data.closet)) {
-      wardrobe.closet.setItemsByIds(new_data.objects.slice(0));
+      wardrobe.outfit.setClosetItemsByIds(new_data.objects.slice(0));
     }
     if(!arraysMatch(new_data.objects, data.objects)) {
-      wardrobe.outfit.setItemsByIds(new_data.objects.slice(0));
+      wardrobe.outfit.setWornItemsByIds(new_data.objects.slice(0));
     }
     if(new_data.name != data.name && new_data.name) {
       wardrobe.base_pet.setName(new_data.name);
@@ -270,6 +294,7 @@ View.Hash = function (wardrobe) {
     }
     data = new_data;
     parse_in_progress = false;
+    updateLinksWithReturnTo();
   }
   
   function changeQuery(changes) {
@@ -294,23 +319,33 @@ View.Hash = function (wardrobe) {
     new_query = $.param(data).replace(/%5B%5D/g, '[]');
     previous_query = new_query;
     document.location.hash = '#' + new_query;
-    onUpdateQuery();
+    updateLinksWithReturnTo();
+  }
+  
+  function updateLinksWithReturnTo() {
+    links_with_return_to.each(function () {
+      var new_return_to = 'return_to=' + encodeURIComponent(
+        document.location.pathname +
+        document.location.search +
+        document.location.hash
+      );
+      this.href = this.href.replace(/return_to=[^&]+/, new_return_to);
+    });
   }
   
   this.initialize = function () {
     checkQuery();
     setInterval(checkQuery, 100);
-    onUpdateQuery();
   }
   
-  wardrobe.closet.bind('updateItems', function (items) {
+  wardrobe.outfit.bind('updateClosetItems', function (items) {
     var item_ids = items.map('id');
     if(!arraysMatch(item_ids, data.closet)) {
       changeQuery({closet: item_ids});
     }
   });
   
-  wardrobe.outfit.bind('updateItems', function (items) {
+  wardrobe.outfit.bind('updateWornItems', function (items) {
     var item_ids = items.map('id'), changes = {};
     if(!arraysMatch(item_ids, data.objects)) {
       changes.objects = item_ids;
@@ -318,7 +353,7 @@ View.Hash = function (wardrobe) {
     if(arraysMatch(item_ids, data.closet) || arraysMatch(item_ids, data.objects)) {
       changes.closet = undefined;
     } else {
-      changes.closet = wardrobe.closet.items.map('id');
+      changes.closet = wardrobe.outfit.getClosetItems().map('id');
     }
     if(changes.objects || changes.closet) changeQuery(changes);
   });
@@ -338,7 +373,7 @@ View.Hash = function (wardrobe) {
   });
   
   wardrobe.outfit.bind('updatePetState', function (pet_state) {
-    var pet_type = wardrobe.outfit.pet_type;
+    var pet_type = wardrobe.outfit.getPetType();
     if(pet_state.id != data.state && pet_type && (data.state || pet_state.id != pet_type.pet_state_ids[0])) {
       changeQuery({state: pet_state.id});
     }
@@ -352,67 +387,65 @@ View.Hash = function (wardrobe) {
       });
     }
   });
-  
-  (function Share() {
-    var CALLBACK_NAME = 'shortenResponse',
-      button_id = '#share-button',
-      button = $(button_id),
-      wrapper = button.parent(),
-      shorten_el = $('#short-url-button'),
-      response_el = $('#short-url-response'),
-      current_url,
-      shortening = false,
-      shortened = false;
-    
-    onUpdateQuery = function () {
-      var l = window.location, hash = l.hash;
-      if(!hash) hash = '#' + l.search.substr(1);
-      current_url = l.protocol + '//' + l.host + l.pathname + hash;
-      setURL(current_url);
-      response_el.hide();
-      shortened = false;
-    }
-    
-    function setURL(url) {
-      if(typeof addthis_share != 'undefined') {
-        addthis_share.url = url;
-        button.replaceWith(button.clone());
-        addthis.button(button_id);
-      }
-    }
-    
-    BitlyCB[CALLBACK_NAME] = function (data) {
-      var url, key;
-      for(key in data.results) {
-        url = SHORT_URL_HOST + data.results[key].hash;
-        break;
-      }
-      setURL(url);
-      response_el.val(url).show();
-      shortening = false;
-      shortened = true;
-    }
-    
-    function startShorten() {
-      if(!shortening && !shortened) {
-        shortening = true;
-        BitlyClient.shorten(current_url, 'BitlyCB.' + CALLBACK_NAME);
-      }
-    }
-    
-    shorten_el.click(startShorten);
-    wrapper.mouseover(startShorten);
-    button.focus(startShorten);
-    
-    response_el.mouseover(function () {
-      response_el.focus().select();
-    });
-  })();
 }
 
 View.Outfits = function (wardrobe) {
   var outfits_el = $('#preview-outfits'), sidebar_el = $('#preview-sidebar'),
-    overlay_el = $('#preview-swf-overlay');
+    controls = $('#pet-type-form, #pet-state-form, #preview-swf, #preview-search-form'),
+    save_success_el = $('#save-success'), save_error_el = $('#save-error'),
+    new_outfit_el = $('#new-outfit'), new_outfit_form_el = $('#new-outfit-form'),
+    new_outfit_name_el = $('#new-outfit-name'),
+    outfits_list_el = outfits_el.children('ul'),
+    stars = $('div.outfit-star'),
+    previously_viewing = '';
+  
+  function navLinkTo(callback) {
+    return function (e) {
+      e.preventDefault();
+      callback();
+    }
+  }
+  
+  function navigateTo(will_be_viewing) {
+    var currently_viewing = sidebar_el.attr('class');
+    if(currently_viewing != will_be_viewing) previously_viewing = currently_viewing;
+    sidebar_el.attr('class', will_be_viewing);
+  }
+  
+  /* Nav */
+  
+  function showCloset() {
+    controls.enableControl('fast');
+    navigateTo('');
+  }
+  
+  function showOutfits() {
+    controls.enableControl('fast');
+    navigateTo('viewing-outfits');
+  }
+  
+  function showSavingOutfit() {
+    controls.disableControl('slow');
+    navigateTo('viewing-saving-outfit');
+    new_outfit_name_el.focus();
+  }
+  
+  $('#preview-sidebar-nav-outfits').click(navLinkTo(showOutfits));
+  
+  $('#preview-sidebar-nav-closet').click(navLinkTo(showCloset));
+  
+  $('#preview-sidebar-nav-cancel-save').click(function (e) {
+    e.preventDefault();
+    controls.enableControl('fast');
+    sidebar_el.attr('class', previously_viewing);
+  });
+  
+  $('#save-outfit').click(function () {
+    new_outfit_el.show().children('input').text('').removeClass('starred');
+    showSavingOutfit();
+  });
+  
+  /* Individual outfits */
   
   $('input.outfit-url').live('mouseover', function () {
     this.focus();
@@ -430,16 +463,45 @@ View.Outfits = function (wardrobe) {
     $(this).closest('li').removeClass('confirming-deletion');
   });
   
-  $('#preview-sidebar-nav-outfits').click(function (e) {
-    e.preventDefault();
-    sidebar_el.addClass('viewing-outfits');
-    overlay_el.fadeTo('slow', .75)
+  stars.live('click', function () {
+    $(this).closest('#new-outfit, li').toggleClass('starred');
   });
   
-  $('#preview-sidebar-nav-closet').click(function (e) {
+  /* Saving */
+  
+  new_outfit_form_el.submit(function (e) {
     e.preventDefault();
-    sidebar_el.removeClass('viewing-outfits');
-    overlay_el.fadeTo('fast', 0);
+    wardrobe.outfit.save(new_outfit_el.hasClass('starred'), new_outfit_name_el.val());
+  });
+  
+  var SAVE_ERRORS = {
+      'item_outfit_relationships': "Item not found. How odd. Pull some items out of your closet and try again.",
+      'pet_state': "Pet state not found. How odd. Try picking a new Gender/Emotion.",
+      'name': "Outfits must have a name",
+      'user': "You must be logged in to save outfits"
+    };
+  
+  function saveErrorMessage(text) {
+    save_error_el.text(text).notify();
+  }
+  
+  wardrobe.outfit.bind('saveSuccess', function () {
+    save_success_el.notify();
+    showOutfits();
+  });
+  
+  wardrobe.outfit.bind('saveFailure', function (response) {
+    var errors = response.errors;
+    if(typeof errors == 'undefined') {
+      saveErrorMessage("Whoops! The save failed, but the server didn't say why. Please try again.");
+    } else {
+      for(var key in SAVE_ERRORS) {
+        if(SAVE_ERRORS.hasOwnProperty(key) && typeof errors[key] != 'undefined') {
+          saveErrorMessage(SAVE_ERRORS[key]);
+          break;
+        }
+      }
+    }
   });
 }
 
@@ -464,9 +526,9 @@ View.PetStateForm = function (wardrobe) {
     var ids = pet_type.pet_state_ids, i, id, li, radio, label;
     ul.children().remove();
     if(ids.length == 1) {
-      form.hide();
+      form.addClass('hidden');
     } else {
-      form.show();
+      form.removeClass('hidden');
       for(var i = 0; i < ids.length; i++) {
         id = 'pet-state-radio-' + i;
         li = $('<li/>');
@@ -527,7 +589,7 @@ View.PetTypeForm = function (wardrobe) {
       });
     });
     loaded = true;
-    updatePetType(wardrobe.outfit.pet_type);
+    updatePetType(wardrobe.outfit.getPetType());
   });
   
   wardrobe.outfit.bind('updatePetType', updatePetType);
@@ -757,6 +819,19 @@ View.Title = function (wardrobe) {
   });
 }
 
+var userbar_sessions_link = $('#userbar a:last'),
+  userbar_message_verb = userbar_sessions_link.text() == 'Log out' ? 'logged out' : 'sent to the login page',
+  userbar_message_el = $('<span/>', {
+    id: 'userbar-message',
+    text: "You will be " + userbar_message_verb + ", then brought back to this exact outfit you've made."
+  }).prependTo('#userbar');
+
+userbar_sessions_link.hover(function () {
+  userbar_message_el.stop().fadeTo('normal', .5);
+}, function () {
+  userbar_message_el.stop().fadeOut('fast');
+});
+
 $.ajaxSetup({
   error: function (xhr) {
     $.jGrowl("There was an error loading that last resource. Oops. Please try again!");
diff --git a/public/javascripts/wardrobe.js b/public/javascripts/wardrobe.js
index 75e99cc1..a7e895f0 100644
--- a/public/javascripts/wardrobe.js
+++ b/public/javascripts/wardrobe.js
@@ -1,5 +1,3 @@
-var SHORT_URL_HOST = 'http://bit.ly/';
-
 window.log = window.SWFLog = $.noop;
 
 function arraysMatch(array1, array2) {
@@ -220,6 +218,201 @@ function Wardrobe() {
   
   ItemZoneSet.all = [];
   
+  function Outfit() {
+    var outfit = this, previous_pet_type, worn_item_ids = [];
+    
+    this.closet_items = [];
+    this.worn_items = [];
+    
+    function getRestrictedZones() {
+      // note: may contain duplicates - loop through assets, not these, for
+      // best performance
+      var restricted_zones = [],
+        restrictors = outfit.worn_items.concat(outfit.pet_state.assets);
+      $.each(restrictors, function () {
+        restricted_zones = restricted_zones.concat(this.restricted_zones);
+      });
+      return restricted_zones;
+    }
+    
+    function hasItemInCloset(item) {
+      return $.inArray(item, outfit.closet_items) != -1;
+    }
+    
+    function isWearingItem(item) {
+      return $.inArray(item, outfit.worn_items) != -1;
+    }
+    
+    function itemAssetsOnLoad(added_item, updateItemsCallback, updateItemAssetsCallback) {
+      var item_zones, item_zones_length, existing_item, existing_item_zones, passed,
+        new_items = [], new_worn_item_ids = [];
+      if(added_item) {
+        // now that we've loaded, check for conflicts on the added item
+        item_zones = added_item.getAssetsFitting(outfit.pet_type).map('zone_id');
+        item_zones_length = item_zones.length;
+        for(var i = 0; i < outfit.worn_items.length; i++) {
+          existing_item = outfit.worn_items[i];
+          existing_item_zones = existing_item.getAssetsFitting(outfit.pet_type).map('zone_id');
+          passed = true;
+          if(existing_item != added_item) {
+            for(var j = 0; j < item_zones_length; j++) {
+              if($.inArray(item_zones[j], existing_item_zones) != -1) {
+                passed = false;
+                break;
+              }
+            }
+          }
+          if(passed) {
+            new_items.push(existing_item);
+            new_worn_item_ids.push(existing_item.id);
+          }
+        }
+        outfit.worn_items = new_items;
+        worn_item_ids = new_worn_item_ids;
+        updateItemsCallback(outfit.worn_items);
+      }
+      updateItemAssetsCallback();
+    }
+    
+    function petTypeOnLoad(pet_type, petTypeLoadedCallback, updatePetStateCallback, updateItemsCallback, updateItemAssetsCallback) {
+      if(!outfit.pet_state || !pet_type.ownsPetState(outfit.pet_state)) {
+        outfit.setPetStateById(null, updatePetStateCallback);
+      }
+      petTypeLoadedCallback(pet_type);
+      updateItemAssets(null, updateItemsCallback, updateItemAssetsCallback);
+    }
+    
+    function updateItemAssets(added_item, updateItemsCallback, updateItemAssetsCallback) {
+      if(outfit.pet_type && outfit.pet_type.loaded && worn_item_ids.length) {
+        outfit.pet_type.loadItemAssets(worn_item_ids, function () {
+          itemAssetsOnLoad(added_item, updateItemsCallback, updateItemAssetsCallback)
+        });
+      }
+    }
+    
+    this.closetItem = function (item, updateClosetItemsCallback) {
+      if(!hasItemInCloset(item)) {
+        this.closet_items.push(item);
+        closet_item_ids.push(item.id);
+        updateClosetItemsCallback(this.closet_items);
+      }
+    }
+    
+    this.getVisibleAssets = function () {
+      var assets = this.pet_state.assets, restricted_zones = getRestrictedZones(),
+        visible_assets = [];
+      for(var i = 0; i < outfit.worn_items.length; i++) {
+        assets = assets.concat(outfit.worn_items[i].getAssetsFitting(outfit.pet_type));
+      }
+      $.each(assets, function () {
+        if($.inArray(this.zone_id, restricted_zones) == -1) {
+          visible_assets.push(this);
+        }
+      });
+      return visible_assets;
+    }
+    
+    this.setClosetItemsByIds = function (ids, updateItemsCallback) {
+      if(ids) closet_item_ids = ids;
+      if(ids && ids.length) {
+        this.closet_items = Item.loadByIds(ids, updateItemsCallback);
+      } else {
+        this.closet_items = [];
+        updateItemsCallback(this.closet_items);
+      }
+    }
+    
+    this.setPetStateById = function (id, petStateOnLoad) {
+      if(!id && this.pet_type) {
+        id = this.pet_type.pet_state_ids[0];
+      }
+      if(id) {
+        this.pet_state = PetState.find(id);
+        this.pet_state.loadAssets(petStateOnLoad);
+      }
+    }
+    
+    this.setPetTypeByColorAndSpecies = function (color_id, species_id, updatePetTypeCallback, petTypeLoadedCallback, petTypeNotFoundCallback, updatePetStateCallback, updateItemsCallback, updateItemAssetsCallback) {
+      this.pet_type = PetType.findOrCreateByColorAndSpecies(color_id, species_id);
+      updatePetTypeCallback(this.pet_type);
+      this.pet_type.load(function (pet_type) { petTypeOnLoad(pet_type, petTypeLoadedCallback, updatePetStateCallback, updateItemsCallback, updateItemAssetsCallback) }, petTypeNotFoundCallback);
+    }
+    
+    this.setWornItemsByIds = function (ids, updateItemsCallback, updateItemAssetsCallback) {
+      if(ids) worn_item_ids = ids;
+      if(ids && ids.length) {
+        this.worn_items = Item.loadByIds(ids, updateItemsCallback);
+      } else {
+        this.worn_items = [];
+        updateItemsCallback(this.worn_items);
+      }
+      updateItemAssets(null, updateItemsCallback, updateItemAssetsCallback);
+    }
+    
+    this.unclosetItem = function (item, updateClosetItemsCallback, updateWornItemsCallback) {
+      var i = $.inArray(item, this.closet_items), id_i;
+      if(i != -1) {
+        this.closet_items.splice(i, 1);
+        id_i = $.inArray(item.id, closet_item_ids);
+        closet_item_ids.splice(id_i, 1);
+        updateClosetItemsCallback(this.closet_items);
+        this.unwearItem(item, updateWornItemsCallback);
+      }
+    }
+    
+    this.unwearItem = function (item, updateWornItemsCallback) {
+      var i = $.inArray(item, this.worn_items), id_i;
+      if(i != -1) {
+        this.worn_items.splice(i, 1);
+        id_i = $.inArray(item.id, worn_item_ids);
+        worn_item_ids.splice(id_i, 1);
+        updateWornItemsCallback(this.worn_items);
+      }
+    }
+    
+    this.wearItem = function (item, updateWornItemsCallback, updateClosetItemsCallback, updateItemAssetsCallback) {
+      if(!isWearingItem(item)) {
+        this.worn_items.push(item);
+        worn_item_ids.push(item.id);
+        this.closetItem(item, updateClosetItemsCallback);
+        if(updateItemAssetsCallback) {
+          updateItemAssets(item, updateWornItemsCallback, updateItemAssetsCallback);
+        }
+        updateWornItemsCallback(this.worn_items);
+      }
+    }
+    
+    function sortWornUnworn() {
+      var unworn_item_ids = [], id;
+      for(var i in outfit.closet_items) {
+        id = outfit.closet_items[i].id;
+        if(outfit.closet_items.hasOwnProperty(i)) {
+          if($.inArray(id, worn_item_ids) === -1) {
+            unworn_item_ids.push(id);
+          }
+        }
+      }
+      return {worn_item_ids: worn_item_ids, unworn_item_ids: unworn_item_ids};
+    }
+    
+    this.save = function (starred, name, success, error) {
+      // TODO: put starred and name on the actual objects, for updating
+      var outfit_data = sortWornUnworn();
+      outfit_data.name = name;
+      outfit_data.starred = starred;
+      outfit_data.pet_state_id = outfit.pet_state.id;
+      $.ajax({
+        url: '/outfits',
+        type: 'post',
+        data: {outfit: outfit_data},
+        success: success,
+        error: function (xhr) {
+          error($.parseJSON(xhr.responseText));
+        }
+      });
+    }
+  }
+  
   function PetAttribute() {}
   
   PetAttribute.loadAll = function (success) {
@@ -373,199 +566,110 @@ function Wardrobe() {
       this.events[event].push(callback);
     }
     
-    this.events.trigger = function (event) {
-      var subarguments;
-      if(controller.events[event]) {
-        subarguments = Array.prototype.slice.apply(arguments, [1]);
-        $.each(controller.events[event], function () {
+    this.event = function (event_name) {
+      return function () {
+        var subarguments = arguments;
+        $.each(controller.events[event_name], function () {
           this.apply(controller, subarguments);
         });
       }
     }
+    
+    this.events.trigger = function (event_name) {
+      var subarguments, event;
+      if(controller.events[event_name]) {
+        subarguments = Array.prototype.slice.apply(arguments, [1]);
+        controller.event(event_name).apply(controller, subarguments);
+      }
+    }
   }
   
   Controller.all = {};
   
   Controller.all.Outfit = function OutfitController() {
-    var outfit = this, previous_pet_type, item_ids = [];
+    var controller = this, outfit = new Outfit;
     
-    this.items = [];
-    
-    function getRestrictedZones() {
-      // note: may contain duplicates - loop through assets, not these, for
-      // best performance
-      var restricted_zones = [],
-        restrictors = outfit.items.concat(outfit.pet_state.assets);
-      $.each(restrictors, function () {
-        restricted_zones = restricted_zones.concat(this.restricted_zones);
-      });
-      return restricted_zones;
+    this.closetItem = function (item) {
+      outfit.closetItem(
+        item,
+        controller.event('updateClosetItems')
+      );
     }
     
-    function hasItem(item) {
-      return $.inArray(item, outfit.items) != -1;
+    this.getClosetItems = function () {
+      return outfit.closet_items;
     }
     
-    function itemAssetsOnLoad(added_item) {
-      var item_zones, item_zones_length, existing_item, existing_item_zones, passed,
-        new_items = [], new_item_ids = [];
-      if(added_item) {
-        // now that we've loaded, check for conflicts on the added item
-        item_zones = added_item.getAssetsFitting(outfit.pet_type).map('zone_id');
-        item_zones_length = item_zones.length;
-        for(var i = 0; i < outfit.items.length; i++) {
-          existing_item = outfit.items[i];
-          existing_item_zones = existing_item.getAssetsFitting(outfit.pet_type).map('zone_id');
-          passed = true;
-          if(existing_item != added_item) {
-            for(var j = 0; j < item_zones_length; j++) {
-              if($.inArray(item_zones[j], existing_item_zones) != -1) {
-                passed = false;
-                break;
-              }
-            }
-          }
-          if(passed) {
-            new_items.push(existing_item);
-            new_item_ids.push(existing_item.id);
-          }
-        }
-        outfit.items = new_items;
-        item_ids = new_item_ids;
-        outfit.events.trigger('updateItems', outfit.items);
-      }
-      outfit.events.trigger('updateItemAssets');
-    }
-    
-    function itemsOnLoad(items) {
-      outfit.events.trigger('updateItems', items);
-    }
-    
-    function petStateOnLoad(pet_state) {
-      outfit.events.trigger('updatePetState', pet_state);
-    }
-    
-    function petTypeOnLoad(pet_type) {
-      if(!outfit.pet_state || !pet_type.ownsPetState(outfit.pet_state)) {
-        outfit.setPetStateById();
-      }
-      outfit.events.trigger('petTypeLoaded', pet_type);
-      updateItemAssets();
-    }
-    
-    function petTypeOnError(pet_type) {
-      outfit.events.trigger('petTypeNotFound', pet_type);
-    }
-    
-    function updateItemAssets(added_item) {
-      if(outfit.pet_type && outfit.pet_type.loaded && item_ids.length) {
-        outfit.pet_type.loadItemAssets(item_ids, function () {
-          itemAssetsOnLoad(added_item)
-        });
-      }
-    }
-    
-    this.addItem = function (item) {
-      if(!hasItem(item)) {
-        this.items.push(item);
-        item_ids.push(item.id);
-        updateItemAssets(item);
-        outfit.events.trigger('updateItems', this.items);
-      }
+    this.getPetType = function () {
+      return outfit.pet_type;
     }
     
     this.getVisibleAssets = function () {
-      var assets = this.pet_state.assets, restricted_zones = getRestrictedZones(),
-        visible_assets = [];
-      for(var i = 0; i < outfit.items.length; i++) {
-        assets = assets.concat(outfit.items[i].getAssetsFitting(outfit.pet_type));
-      }
-      $.each(assets, function () {
-        if($.inArray(this.zone_id, restricted_zones) == -1) {
-          visible_assets.push(this);
-        }
-      });
-      return visible_assets;
+      return outfit.getVisibleAssets();
     }
     
-    this.removeItem = function (item) {
-      var i = $.inArray(item, this.items), id_i;
-      if(i != -1) {
-        this.items.splice(i, 1);
-        id_i = $.inArray(item.id, item_ids);
-        item_ids.splice(id_i, 1);
-        outfit.events.trigger('updateItems', this.items);
-      }
+    this.getWornItems = function () {
+      return outfit.worn_items;
     }
     
-    this.setPetStateById = function (id) {
-      if(!id && this.pet_type) {
-        id = this.pet_type.pet_state_ids[0];
-      }
-      if(id) {
-        this.pet_state = PetState.find(id);
-        this.pet_state.loadAssets(petStateOnLoad);
-      }
+    this.save = function (starred, name) {
+      outfit.save(
+        starred,
+        name,
+        controller.event('saveSuccess'),
+        controller.event('saveFailure')
+      );
     }
     
-    this.setPetTypeByColorAndSpecies = function (color_id, species_id) {
-      this.pet_type = PetType.findOrCreateByColorAndSpecies(color_id, species_id);
-      outfit.events.trigger('updatePetType', this.pet_type);
-      this.pet_type.load(petTypeOnLoad, petTypeOnError);
+    this.setClosetItemsByIds = function (item_ids) {
+      outfit.setClosetItemsByIds(
+        item_ids,
+        controller.event('updateClosetItems')
+      );
     }
     
-    this.setItemsByIds = function (ids) {
-      if(ids) item_ids = ids;
-      if(ids && ids.length) {
-        this.items = Item.loadByIds(ids, itemsOnLoad);
-      } else {
-        this.items = [];
-        itemsOnLoad(this.items);
-      }
-      updateItemAssets();
-    }
-  }
-  
-  Controller.all.Closet = function ClosetController() {
-    // FIXME: a lot of duplication from outfit controller
-    var closet = this, item_ids = [];
-    this.items = [];
-    
-    function hasItem(item) {
-      return $.inArray(item, closet.items) != -1;
+    this.setPetStateById = function (pet_state_id) {
+      outfit.setPetStateById(pet_state_id, controller.event('updatePetState'));
     }
     
-    function itemsOnLoad(items) {
-      closet.events.trigger('updateItems', items);
+    this.setPetTypeByColorAndSpecies = function(color_id, species_id) {
+      outfit.setPetTypeByColorAndSpecies(color_id, species_id,
+        controller.event('updatePetType'),
+        controller.event('petTypeLoaded'),
+        controller.event('petTypeNotFound'),
+        controller.event('updatePetState'),
+        controller.event('updateWornItems'),
+        controller.event('updateItemAssets')
+      );
     }
     
-    this.addItem = function (item) {
-      if(!hasItem(item)) {
-        this.items.push(item);
-        item_ids.push(item.id);
-        closet.events.trigger('updateItems', this.items);
-      }
+    this.setWornItemsByIds = function (item_ids) {
+      outfit.setWornItemsByIds(
+        item_ids,
+        controller.event('updateWornItems'),
+        controller.event('updateItemAssets')
+      );
     }
     
-    this.removeItem = function (item) {
-      var i = $.inArray(item, this.items), id_i;
-      if(i != -1) {
-        this.items.splice(i, 1);
-        id_i = $.inArray(item.id, item_ids);
-        item_ids.splice(id_i, 1);
-        closet.events.trigger('updateItems', this.items);
-      }
+    this.unclosetItem = function (item) {
+      outfit.unclosetItem(
+        item,
+        controller.event('updateClosetItems'),
+        controller.event('updateWornItems')
+      );
     }
     
-    this.setItemsByIds = function (ids) {
-      if(ids && ids.length) {
-        item_ids = ids;
-        this.items = Item.loadByIds(ids, itemsOnLoad);
-      } else {
-        item_ids = ids;
-        this.items = [];
-        itemsOnLoad(this.items);
-      }
+    this.unwearItem = function (item) {
+      outfit.unwearItem(item, controller.event('updateWornItems'));
+    }
+    
+    this.wearItem = function (item) {
+      outfit.wearItem(
+        item,
+        controller.event('updateWornItems'),
+        controller.event('updateClosetItems'),
+        controller.event('updateItemAssets')
+      );
     }
   }
   
@@ -703,7 +807,7 @@ Wardrobe.getStandardView = function (options) {
         log('Welcome to the Wardrobe!');
       }
       
-      var outfit_events = ['updateItems', 'updateItemAssets', 'updatePetType', 'updatePetState'];
+      var outfit_events = ['updateWornItems', 'updateClosetItems', 'updateItemAssets', 'updatePetType', 'updatePetState'];
       for(var i = 0; i < outfit_events.length; i++) {
         (function (event) {
           wardrobe.outfit.bind(event, function (obj) {
@@ -737,7 +841,6 @@ Wardrobe.getStandardView = function (options) {
     );
     
     Wardrobe.StandardPreview.views_by_swf_id[preview_swf_id] = this;
-    console.log(Wardrobe.StandardPreview.views_by_swf_id);
     
     this.previewSWFIsReady = function () {
       preview_swf = document.getElementById(preview_swf_id);
@@ -758,7 +861,7 @@ Wardrobe.getStandardView = function (options) {
       }
     }
     
-    wardrobe.outfit.bind('updateItems', updateAssets);
+    wardrobe.outfit.bind('updateWornItems', updateAssets);
     wardrobe.outfit.bind('updateItemAssets', updateAssets);
     wardrobe.outfit.bind('updatePetState', updateAssets);
   }
diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css
index ec600c5f..4107a971 100644
--- a/public/stylesheets/compiled/screen.css
+++ b/public/stylesheets/compiled/screen.css
@@ -203,52 +203,52 @@ ul.buttons li, ul.buttons li form {
   color: #264409;
 }
 
-/* line 125, ../../../app/stylesheets/_layout.sass */
+/* line 123, ../../../app/stylesheets/_layout.sass */
 .alert {
   background: #fbe3e4;
   border: 1px solid #fbc2c4;
   color: #8a1f11;
 }
 
-/* line 130, ../../../app/stylesheets/_layout.sass */
+/* line 126, ../../../app/stylesheets/_layout.sass */
 .warning {
   background: #fff6bf;
   border: 1px solid #ffd324;
   color: #514721;
 }
 
-/* line 135, ../../../app/stylesheets/_layout.sass */
+/* line 129, ../../../app/stylesheets/_layout.sass */
 #userbar {
   font-family: Delicious, Helvetica, Arial, Verdana, sans-serif;
   position: absolute;
   right: 0;
   top: 0;
 }
-/* line 140, ../../../app/stylesheets/_layout.sass */
+/* line 134, ../../../app/stylesheets/_layout.sass */
 #userbar > * {
   display: inline;
   margin: 0 0.25em;
 }
 
-/* line 144, ../../../app/stylesheets/_layout.sass */
+/* line 138, ../../../app/stylesheets/_layout.sass */
 #userbar-log-in {
   text-decoration: none;
 }
-/* line 146, ../../../app/stylesheets/_layout.sass */
+/* line 140, ../../../app/stylesheets/_layout.sass */
 #userbar-log-in img {
   margin-bottom: -4px;
   margin-right: 0.25em;
 }
-/* line 150, ../../../app/stylesheets/_layout.sass */
+/* line 144, ../../../app/stylesheets/_layout.sass */
 #userbar-log-in span {
   text-decoration: underline;
 }
-/* line 152, ../../../app/stylesheets/_layout.sass */
+/* line 146, ../../../app/stylesheets/_layout.sass */
 #userbar-log-in:hover span {
   text-decoration: none;
 }
 
-/* line 155, ../../../app/stylesheets/_layout.sass */
+/* line 149, ../../../app/stylesheets/_layout.sass */
 .object {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -262,25 +262,25 @@ ul.buttons li, ul.buttons li form {
   vertical-align: top;
   width: 100px;
 }
-/* line 162, ../../../app/stylesheets/_layout.sass */
+/* line 156, ../../../app/stylesheets/_layout.sass */
 .object a {
   text-decoration: none;
 }
-/* line 164, ../../../app/stylesheets/_layout.sass */
+/* line 158, ../../../app/stylesheets/_layout.sass */
 .object a img {
   -moz-opacity: 0.75;
   -webkit-opacity: 0.75;
   -o-opacity: 0.75;
   -khtml-opacity: 0.75;
 }
-/* line 166, ../../../app/stylesheets/_layout.sass */
+/* line 160, ../../../app/stylesheets/_layout.sass */
 .object a:hover img {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 168, ../../../app/stylesheets/_layout.sass */
+/* line 162, ../../../app/stylesheets/_layout.sass */
 .object img {
   display: block;
   height: 80px;
@@ -288,17 +288,17 @@ ul.buttons li, ul.buttons li form {
   width: 80px;
 }
 
-/* line 174, ../../../app/stylesheets/_layout.sass */
+/* line 168, ../../../app/stylesheets/_layout.sass */
 dt {
   font-weight: bold;
 }
 
-/* line 177, ../../../app/stylesheets/_layout.sass */
+/* line 171, ../../../app/stylesheets/_layout.sass */
 dd {
   margin: 0 0 1.5em 1em;
 }
 
-/* line 180, ../../../app/stylesheets/_layout.sass */
+/* line 174, ../../../app/stylesheets/_layout.sass */
 #home-link {
   font-family: Delicious, Helvetica, Arial, Verdana, sans-serif;
   font-size: 175%;
@@ -309,26 +309,26 @@ dd {
   position: absolute;
   top: 0;
 }
-/* line 190, ../../../app/stylesheets/_layout.sass */
+/* line 184, ../../../app/stylesheets/_layout.sass */
 #home-link:hover {
   background: #eeffee;
   text-decoration: none;
 }
-/* line 193, ../../../app/stylesheets/_layout.sass */
+/* line 187, ../../../app/stylesheets/_layout.sass */
 #home-link span:before {
   content: "<< ";
 }
 
-/* line 197, ../../../app/stylesheets/_layout.sass */
+/* line 191, ../../../app/stylesheets/_layout.sass */
 .pagination a, .pagination span {
   margin: 0 0.5em;
 }
-/* line 199, ../../../app/stylesheets/_layout.sass */
+/* line 193, ../../../app/stylesheets/_layout.sass */
 .pagination .current {
   font-weight: bold;
 }
 
-/* line 202, ../../../app/stylesheets/_layout.sass */
+/* line 196, ../../../app/stylesheets/_layout.sass */
 .object .nc-icon {
   height: 16px;
   position: absolute;
@@ -336,7 +336,7 @@ dd {
   top: 64px;
   width: 16px;
 }
-/* line 208, ../../../app/stylesheets/_layout.sass */
+/* line 202, ../../../app/stylesheets/_layout.sass */
 .object .nc-icon:hover {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
@@ -384,6 +384,138 @@ dd {
   src: local("Droid Sans"), url("http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g") format("truetype");
 }
 
+/* line 2, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.jGrowl {
+  padding: 10px;
+  z-index: 9999;
+  color: white;
+  font-size: 12px;
+}
+/* line 7, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.ie6 {
+  position: absolute;
+}
+/* line 9, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.ie6.top-right {
+  right: auto;
+  bottom: auto;
+  left: expression(( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+  top: expression(( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+/* line 14, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.ie6.top-left {
+  left: expression(( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+  top: expression(( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+/* line 17, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.ie6.bottom-right {
+  left: expression(( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+  top: expression(( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+/* line 20, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.ie6.bottom-left {
+  left: expression(( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+  top: expression(( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+/* line 23, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.ie6.center {
+  left: expression(( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+  top: expression(( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+  width: 100%;
+}
+
+/*Special IE6 Style Positioning */
+/*Normal Style Positions */
+/* line 32, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+body > div.jGrowl {
+  position: fixed;
+}
+/* line 34, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+body > div.jGrowl.top-left {
+  left: 0px;
+  top: 0px;
+}
+/* line 37, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+body > div.jGrowl.top-right {
+  right: 0px;
+  top: 0px;
+}
+/* line 40, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+body > div.jGrowl.bottom-left {
+  left: 0px;
+  bottom: 0px;
+}
+/* line 43, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+body > div.jGrowl.bottom-right {
+  right: 0px;
+  bottom: 0px;
+}
+/* line 46, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+body > div.jGrowl.center {
+  top: 0px;
+  width: 50%;
+  left: 25%;
+}
+
+/*Cross Browser Styling */
+/* line 55, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.center div.jGrowl-notification, div.center div.jGrowl-closer {
+  margin-left: auto;
+  margin-right: auto;
+}
+/* line 59, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
+  background-color: black;
+  opacity: 0.85;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
+  zoom: 1;
+  width: 235px;
+  padding: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-family: Tahoma, Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  text-align: left;
+  display: none;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+}
+/* line 75, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.jGrowl div.jGrowl-notification {
+  min-height: 40px;
+}
+/* line 78, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.jGrowl div.jGrowl-notification div.header {
+  font-weight: bold;
+  font-size: 0.85em;
+}
+/* line 81, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.jGrowl div.jGrowl-notification div.close {
+  z-index: 99;
+  float: right;
+  font-weight: bold;
+  font-size: 1em;
+  cursor: pointer;
+}
+/* line 87, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+div.jGrowl div.jGrowl-closer {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  cursor: pointer;
+  font-size: 0.9em;
+  font-weight: bold;
+  text-align: center;
+}
+
+/*Hide jGrowl when printing */
+@media print {
+  /* line 97, ../../../app/stylesheets/partials/_jquery.jgrowl.sass */
+  div.jGrowl {
+    display: none;
+  }
+}
+
 /* line 1, ../../../app/stylesheets/contributions/_index.sass */
 body.contributions-index {
   text-align: center;
@@ -628,33 +760,38 @@ body.items-show .nc-icon {
 }
 
 @import url(../shared/jquery.jgrowl.css);
-/* line 13, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 99, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-toolbar {
   margin-bottom: 0.5em;
   text-align: left;
 }
-/* line 16, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 102, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-toolbar form {
-  display: inline;
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *display: inline;
+  *vertical-align: auto;
   margin-right: 2em;
 }
-/* line 19, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 105, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-info form {
   display: inline;
 }
-/* line 22, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 108, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form ul {
   list-style: none;
 }
-/* line 24, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 110, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form ul, body.outfits-edit #pet-state-form ul li {
   display: inline;
 }
-/* line 26, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 112, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form input {
   display: none;
 }
-/* line 28, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 114, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form label {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -686,7 +823,7 @@ body.outfits-edit #pet-state-form label:hover {
 body.outfits-edit #pet-state-form label:active {
   top: 1px;
 }
-/* line 31, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 117, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form li.selected label {
   background: #0b61a4 url(/images/alert-overlay.png) repeat-x;
 }
@@ -694,40 +831,27 @@ body.outfits-edit #pet-state-form li.selected label {
 body.outfits-edit #pet-state-form li.selected label:hover {
   background-color: #005093;
 }
-/* line 33, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #sharing {
+/* line 119, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #pet-state-form.hidden {
+  visibility: hidden;
+}
+/* line 121, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #save-outfit-wrapper {
   float: right;
-  position: relative;
 }
-/* line 36, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #short-url-response {
-  font-size: 87.5%;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: -2em;
-  width: 20em;
+/* line 123, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #save-outfit-wrapper button {
+  background: #ff5c00 url(/images/alert-overlay.png) repeat-x;
 }
-/* line 43, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #share-button-wrapper {
-  display: inline;
+/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.outfits-edit #save-outfit-wrapper button:hover {
+  background-color: #ee4b00;
 }
-/* line 46, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #share-button img {
-  margin-bottom: -0.25em;
-  margin-right: 0.25em;
-  height: 16px;
-  width: 16px;
-}
-/* line 52, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #share-button:active {
-  top: 1px;
-}
-/* line 54, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 125, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview {
   clear: both;
 }
-/* line 56, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 127, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-swf {
   float: left;
   height: 400px;
@@ -735,7 +859,7 @@ body.outfits-edit #preview-swf {
   position: relative;
   width: 400px;
 }
-/* line 62, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 133, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-swf-overlay {
   -moz-opacity: 0;
   -webkit-opacity: 0;
@@ -748,7 +872,7 @@ body.outfits-edit #preview-swf-overlay {
   top: 0;
   width: 100%;
 }
-/* line 70, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 141, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar {
   float: left;
   height: 400px;
@@ -756,51 +880,64 @@ body.outfits-edit #preview-sidebar {
   margin-bottom: 1em;
   width: 380px;
 }
-/* line 77, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 148, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-closet {
   display: none;
 }
-/* line 79, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 150, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-outfits {
   display: block;
 }
-/* line 82, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 152, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sidebar.viewing-saving-outfit {
+  height: auto;
+  max-height: 100%;
+}
+/* line 155, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sidebar.viewing-saving-outfit #preview-closet {
+  display: none;
+}
+/* line 157, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sidebar.viewing-saving-outfit #preview-saving-outfit {
+  display: block;
+}
+/* line 160, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet h2 {
   margin: 0;
 }
-/* line 84, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 162, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object {
   background: #eeffee;
 }
-/* line 86, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 164, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object img {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   -o-opacity: 0.5;
   -khtml-opacity: 0.5;
 }
-/* line 88, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 166, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.worn {
   background: transparent;
 }
-/* line 90, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 168, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.worn img {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 92, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 170, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.no-assets {
   background: #fbe3e4;
   color: #8a1f11;
   padding-bottom: 1.25em;
 }
-/* line 96, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 174, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.no-assets .no-assets-message {
   display: block;
 }
-/* line 98, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 176, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .no-assets-message {
   background: #f3dbdc;
   bottom: 0;
@@ -812,7 +949,7 @@ body.outfits-edit .no-assets-message {
   position: absolute;
   width: 100%;
 }
-/* line 108, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 186, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #no-assets-full-message {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -826,12 +963,12 @@ body.outfits-edit #no-assets-full-message {
   top: -9999px;
   width: 30em;
 }
-/* line 119, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 197, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form {
   clear: both;
   text-align: left;
 }
-/* line 122, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 200, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form h2 {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -841,7 +978,7 @@ body.outfits-edit #preview-search-form h2 {
   *vertical-align: auto;
   margin: 0 1em 0 0;
 }
-/* line 125, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 203, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form input {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -850,7 +987,7 @@ body.outfits-edit #preview-search-form input {
   *display: inline;
   *vertical-align: auto;
 }
-/* line 127, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 205, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -860,53 +997,53 @@ body.outfits-edit #preview-search-form-pagination {
   *vertical-align: auto;
   margin-left: 2em;
 }
-/* line 130, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 208, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination a, body.outfits-edit #preview-search-form-pagination span {
   margin: 0 0.25em;
 }
-/* line 132, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 210, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination .current {
   font-weight: bold;
 }
-/* line 134, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 212, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-clear {
   display: none;
   font-size: 87.5%;
   margin-left: 2em;
 }
-/* line 138, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 216, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-loading {
   display: none;
   font-size: 75%;
   font-style: italic;
   margin-left: 2em;
 }
-/* line 144, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 222, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-no-results {
   display: none;
 }
-/* line 146, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 224, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-help {
   font-size: 87.5%;
   margin-left: 2em;
 }
-/* line 149, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 227, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .search-helper {
   font-family: inherit;
 }
-/* line 151, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 229, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .possible-error {
   display: none;
 }
-/* line 154, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 232, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #fullscreen-copyright {
   display: none;
 }
-/* line 156, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 234, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen {
   height: 100%;
 }
-/* line 159, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 237, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #container {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -919,19 +1056,19 @@ body.outfits-edit.fullscreen #container {
   position: relative;
   width: 80%;
 }
-/* line 167, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 245, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen h1 {
   display: none;
 }
-/* line 169, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 247, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #short-url-response {
   position: static;
 }
-/* line 171, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 249, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview {
   width: 100%;
 }
-/* line 173, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 251, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-sidebar {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
@@ -943,12 +1080,21 @@ body.outfits-edit.fullscreen #preview-sidebar {
   position: relative;
   width: 400px;
 }
-/* line 182, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 260, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-sidebar > div {
-  padding-left: 24px;
-  padding-right: 24px;
+  margin-left: 24px;
+  margin-right: 24px;
 }
-/* line 186, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 264, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit.fullscreen #preview-sidebar > div h2 {
+  margin-bottom: 0.25em;
+}
+/* line 266, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit.fullscreen #preview-sidebar.viewing-saving-outfit {
+  height: auto;
+  max-height: 100%;
+}
+/* line 269, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-search-form {
   bottom: 1em;
   left: 0;
@@ -957,7 +1103,7 @@ body.outfits-edit.fullscreen #preview-search-form {
   position: absolute;
   width: 100%;
 }
-/* line 194, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 277, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-search-form-help div {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -967,27 +1113,27 @@ body.outfits-edit.fullscreen #preview-search-form-help div {
   *vertical-align: auto;
   width: 48%;
 }
-/* line 197, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 280, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer {
   bottom: 0;
   left: 0;
   position: absolute;
   width: 100%;
 }
-/* line 202, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 285, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer ul, body.outfits-edit.fullscreen #footer p, body.outfits-edit.fullscreen #footer li {
   display: inline;
 }
-/* line 204, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 287, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer ul {
   margin-right: 2em;
 }
-/* line 207, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 290, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object {
   padding: 6px;
   position: relative;
 }
-/* line 210, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 293, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul {
   display: none;
   left: 0;
@@ -995,11 +1141,11 @@ body.outfits-edit .object ul {
   position: absolute;
   top: 0;
 }
-/* line 216, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 299, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul li {
   margin-bottom: 0.25em;
 }
-/* line 218, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 301, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul li a {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -1040,11 +1186,11 @@ body.outfits-edit .object ul li a:active {
 body.outfits-edit .object ul li a:hover {
   background-color: #999999;
 }
-/* line 224, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 307, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object:hover ul, body.outfits-edit .object:hover .object-info {
   display: block;
 }
-/* line 231, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 314, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .nc-icon {
   background: url(/assets/images/nc.png) no-repeat;
   height: 16px;
@@ -1054,14 +1200,14 @@ body.outfits-edit .nc-icon {
   top: 64px;
   width: 16px;
 }
-/* line 239, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 322, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .nc-icon:hover {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   -o-opacity: 0.5;
   -khtml-opacity: 0.5;
 }
-/* line 242, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 325, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info {
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
@@ -1078,61 +1224,41 @@ body.outfits-edit .object-info {
   top: 0;
   width: 16px;
 }
-/* line 253, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 336, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info span {
   font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   position: relative;
   top: -2px;
 }
-/* line 259, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 342, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info:hover {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 269, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 345, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits {
   display: none;
   text-align: left;
 }
-/* line 272, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits h2 {
-  margin-bottom: 0.25em;
-}
-/* line 274, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 348, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits h3 {
   margin-bottom: 0.5em;
 }
-/* line 276, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 350, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul {
   display: block;
   font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
   list-style: none;
   margin-bottom: 1em;
 }
-/* line 281, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 355, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li {
-  overflow: hidden;
-  display: inline-block;
-  font-size: 75%;
   margin-bottom: 0.5em;
 }
-/* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.outfits-edit #preview-outfits > ul > li {
-  display: block;
-}
-/* line 285, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li .outfit-thumbnail {
-  float: left;
-  height: 50px;
-  margin-right: 12px;
-  overflow: hidden;
-  position: relative;
-  width: 50px;
-}
-/* line 292, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 29, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li img {
   height: 100px;
   left: -25px;
@@ -1140,13 +1266,8 @@ body.outfits-edit #preview-outfits > ul > li img {
   top: -25px;
   width: 100px;
 }
-/* line 298, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li > div {
-  float: left;
-  width: 258px;
-}
-/* line 301, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li button {
+/* line 38, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul > li .outfit-delete {
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: transparent;
@@ -1171,28 +1292,28 @@ body.outfits-edit #preview-outfits > ul > li button {
   padding: 0.125em 0.25em;
 }
 /* line 72, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.outfits-edit #preview-outfits > ul > li button:hover {
+body.outfits-edit #preview-outfits > ul > li .outfit-delete:hover {
   background: transparent;
   color: inherit;
 }
 /* line 75, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.outfits-edit #preview-outfits > ul > li button:active {
+body.outfits-edit #preview-outfits > ul > li .outfit-delete:active {
   top: auto;
 }
-/* line 309, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li button:hover {
+/* line 46, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul > li .outfit-delete:hover {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
   background: #eeffee;
 }
-/* line 312, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 49, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li header {
   display: block;
   padding-left: 24px;
 }
-/* line 315, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 52, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-star {
   background-image: url(/images/unstarred.png);
   background-position: left top;
@@ -1208,66 +1329,261 @@ body.outfits-edit #preview-outfits > ul > li .outfit-star {
   position: relative;
   width: 16px;
 }
-/* line 330, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 67, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li h4 {
   cursor: pointer;
-  font-size: 150%;
+  font-size: 115%;
 }
-/* line 333, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 70, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li h4:hover {
   text-decoration: underline;
 }
-/* line 335, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li input {
+/* line 72, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul > li .outfit-url {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   -o-opacity: 0.5;
   -khtml-opacity: 0.5;
   border-color: white;
-  width: 234px;
+  font-size: 75%;
+  width: 284px;
 }
-/* line 339, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li input:hover {
+/* line 77, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul > li .outfit-url:hover {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
   border-color: #cceecc;
 }
-/* line 342, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 80, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation {
   display: none;
+  font-size: 75%;
 }
-/* line 344, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 83, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation span {
   color: red;
 }
-/* line 346, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 85, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation a {
   margin: 0 0.25em;
 }
-/* line 349, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 88, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-delete {
   visibility: hidden;
 }
-/* line 351, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 90, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-url {
   display: none;
 }
-/* line 353, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 92, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-delete-confirmation {
   display: block;
 }
-/* line 356, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 95, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.starred .outfit-star {
   background-image: url(/images/star.png);
 }
-/* line 359, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 358, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .preview-sidebar-nav {
   float: right;
   font-size: 85%;
   margin-top: 1em;
 }
+/* line 363, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #save-success, body.outfits-edit #save-error {
+  display: none;
+  margin-top: 1em;
+  text-align: center;
+}
+/* line 368, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #save-success {
+  background: #e6efc2;
+  border: 1px solid #c6d880;
+  color: #264409;
+}
+/* line 371, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #save-error {
+  background: #fbe3e4;
+  border: 1px solid #fbc2c4;
+  color: #8a1f11;
+}
+/* line 374, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #userbar-message {
+  -moz-opacity: 0.5;
+  -webkit-opacity: 0.5;
+  -o-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  display: none;
+}
+/* line 378, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit {
+  margin-bottom: 0.5em;
+  display: none;
+}
+/* line 29, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit img {
+  height: 100px;
+  left: -25px;
+  position: absolute;
+  top: -25px;
+  width: 100px;
+}
+/* line 38, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-delete {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  background: transparent;
+  display: inline;
+  padding: 0;
+  color: inherit;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  text-shadow: none;
+  border-bottom: 0;
+  position: static;
+  font-weight: normal;
+  line-height: inherit;
+  -moz-opacity: 0.5;
+  -webkit-opacity: 0.5;
+  -o-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  font-size: 150%;
+  float: right;
+  line-height: 1;
+  margin-top: -0.125em;
+  padding: 0.125em 0.25em;
+}
+/* line 72, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.outfits-edit #new-outfit .outfit-delete:hover {
+  background: transparent;
+  color: inherit;
+}
+/* line 75, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.outfits-edit #new-outfit .outfit-delete:active {
+  top: auto;
+}
+/* line 46, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-delete:hover {
+  -moz-opacity: 1;
+  -webkit-opacity: 1;
+  -o-opacity: 1;
+  -khtml-opacity: 1;
+  background: #eeffee;
+}
+/* line 49, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit header {
+  display: block;
+  padding-left: 24px;
+}
+/* line 52, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-star {
+  background-image: url(/images/unstarred.png);
+  background-position: left top;
+  background-repeat: no-repeat;
+  bottom: -2px;
+  /* margin-bottom doesn't work here */
+  cursor: pointer;
+  display: block;
+  float: left;
+  height: 16px;
+  margin-left: -24px;
+  /* makes it not take up inline space */
+  position: relative;
+  width: 16px;
+}
+/* line 67, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit h4 {
+  cursor: pointer;
+  font-size: 115%;
+}
+/* line 70, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit h4:hover {
+  text-decoration: underline;
+}
+/* line 72, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-url {
+  -moz-opacity: 0.5;
+  -webkit-opacity: 0.5;
+  -o-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  border-color: white;
+  font-size: 75%;
+  width: 284px;
+}
+/* line 77, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-url:hover {
+  -moz-opacity: 1;
+  -webkit-opacity: 1;
+  -o-opacity: 1;
+  -khtml-opacity: 1;
+  border-color: #cceecc;
+}
+/* line 80, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-delete-confirmation {
+  display: none;
+  font-size: 75%;
+}
+/* line 83, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-delete-confirmation span {
+  color: red;
+}
+/* line 85, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-delete-confirmation a {
+  margin: 0 0.25em;
+}
+/* line 88, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit.confirming-deletion .outfit-delete {
+  visibility: hidden;
+}
+/* line 90, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit.confirming-deletion .outfit-url {
+  display: none;
+}
+/* line 92, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit.confirming-deletion .outfit-delete-confirmation {
+  display: block;
+}
+/* line 95, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit.starred .outfit-star {
+  background-image: url(/images/star.png);
+}
+/* line 381, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit h4 {
+  display: inline;
+}
+/* line 383, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit h4:hover {
+  text-decoration: none;
+}
+/* line 385, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit .outfit-star {
+  margin-top: 0.5em;
+}
+/* line 388, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #new-outfit-name {
+  font: inherit;
+  line-height: 1;
+}
+/* line 392, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-saving-outfit {
+  display: none;
+  padding-bottom: 1em;
+}
+/* line 396, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #pet-type-form, body.outfits-edit #pet-state-form, body.outfits-edit #preview-swf, body.outfits-edit #preview-search-form {
+  position: relative;
+}
+/* line 399, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit .control-overlay {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 5;
+}
 
 /* line 2, ../../../app/stylesheets/outfits/_new.sass */
 body.outfits-new #outfit-forms {
diff --git a/spec/models/item_outfit_relationship_spec.rb b/spec/models/item_outfit_relationship_spec.rb
new file mode 100644
index 00000000..f081b4b8
--- /dev/null
+++ b/spec/models/item_outfit_relationship_spec.rb
@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe ItemOutfitRelationship do
+  pending "add some examples to (or delete) #{__FILE__}"
+end
diff --git a/spec/models/outfit_spec.rb b/spec/models/outfit_spec.rb
new file mode 100644
index 00000000..f7567238
--- /dev/null
+++ b/spec/models/outfit_spec.rb
@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe Outfit do
+  pending "add some examples to (or delete) #{__FILE__}"
+end