From 7b5856ebf9cc6c4956910b3d5a9ac26bab8cdcae Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 17 Jul 2012 12:15:04 -0400
Subject: [PATCH] basic sharing

Sharing pane works, everything is great for guests. Logged in
users are on the way, since right now Share Outfit re-saves
anonymously rather than showing sharing data for the existing
outfit.
---
 app/controllers/outfits_controller.rb  |   9 +-
 app/models/outfit.rb                   |  44 ++++--
 app/models/outfit_image_uploader.rb    |   6 +-
 app/stylesheets/outfits/_edit.sass     |  29 +++-
 app/views/outfits/edit.html.haml       |  28 ++--
 public/javascripts/outfits/edit.js     |  48 ++++--
 public/javascripts/wardrobe.js         |  35 +++--
 public/stylesheets/compiled/screen.css | 209 +++++++++++++------------
 8 files changed, 245 insertions(+), 163 deletions(-)

diff --git a/app/controllers/outfits_controller.rb b/app/controllers/outfits_controller.rb
index 7a4685df..e4236f5b 100644
--- a/app/controllers/outfits_controller.rb
+++ b/app/controllers/outfits_controller.rb
@@ -2,18 +2,11 @@ class OutfitsController < ApplicationController
   before_filter :find_authorized_outfit, :only => [:update, :destroy]
 
   def create
-    Rails.logger.debug "Signed in?: #{user_signed_in?}"
-    Rails.logger.debug "User 1: #{current_user.inspect}"
     @outfit = Outfit.build_for_user(current_user, params[:outfit])
-    Rails.logger.debug "User 2: #{current_user.inspect}"
     if @outfit.save
-      Rails.logger.debug "User 3: #{current_user.inspect}"
-      render :json => @outfit.id
-      Rails.logger.debug "User 4: #{current_user.inspect}"
+      render :json => @outfit
     else
-      Rails.logger.debug "User 5: #{current_user.inspect}"
       render_outfit_errors
-      Rails.logger.debug "User 6: #{current_user.inspect}"
     end
   end
 
diff --git a/app/models/outfit.rb b/app/models/outfit.rb
index ef80f1ac..c7d6866a 100644
--- a/app/models/outfit.rb
+++ b/app/models/outfit.rb
@@ -19,7 +19,15 @@ class Outfit < ActiveRecord::Base
 
   def as_json(more_options={})
     serializable_hash :only => [:id, :name, :pet_state_id, :starred],
-      :methods => [:color_id, :species_id, :worn_and_unworn_item_ids]
+      :methods => [:color_id, :species_id, :worn_and_unworn_item_ids,
+                   :image_versions]
+  end
+  
+  def image_versions
+    {}.tap do |versions|
+      versions[:large] = image.url
+      image.versions.each { |name, version| versions[name] = version.url }
+    end
   end
 
   def closet_item_ids
@@ -122,22 +130,28 @@ class Outfit < ActiveRecord::Base
   # Creates a 600x600 PNG image of this outfit, writing to the given output
   # file.
   def create_image!(output)
-    base_layer = image_layers.first
-    above_layers = image_layers[1..-1]
-    write_temp_swf_asset_image! base_layer, output
-    output.close
+    unless image_layers.empty?
+      base_layer = image_layers.first
+      above_layers = image_layers[1..-1]
+      write_temp_swf_asset_image!(base_layer, output)
+      output.close
 
-    Tempfile.open(['outfit_overlay', '.png']) do |overlay|
-      above_layers.each do |layer|
-        overlay.open
-        write_temp_swf_asset_image! layer, overlay
-        overlay.close
-        
-        previous_image = MiniMagick::Image.open(output.path)
-        overlay_image = MiniMagick::Image.open(overlay.path)
-        output_image = previous_image.composite(overlay_image)
-        output_image.write output.path
+      unless above_layers.empty?
+        Tempfile.open(['outfit_overlay', '.png']) do |overlay|
+          above_layers.each do |layer|
+            overlay.open
+            write_temp_swf_asset_image! layer, overlay
+            overlay.close
+            
+            previous_image = MiniMagick::Image.open(output.path)
+            overlay_image = MiniMagick::Image.open(overlay.path)
+            output_image = previous_image.composite(overlay_image)
+            output_image.write output.path
+          end
+        end
       end
+    else
+      output.close
     end
   end
   
diff --git a/app/models/outfit_image_uploader.rb b/app/models/outfit_image_uploader.rb
index e10b80d2..bcfed59d 100644
--- a/app/models/outfit_image_uploader.rb
+++ b/app/models/outfit_image_uploader.rb
@@ -15,7 +15,7 @@ class OutfitImageUploader < CarrierWave::Uploader::Base
     process :resize_to_fill => [300, 300]
   end
   
-  version :small do
+  version :small, :from_version => :medium do
     process :resize_to_fill => [150, 150]
   end
   
@@ -28,8 +28,4 @@ class OutfitImageUploader < CarrierWave::Uploader::Base
     partition_dir = "%03d" % partition_id
     "outfits/#{partition_dir}/#{model.id}"
   end
-  
-  def default_url
-    "/images/outfits/" + [version_name, "default.png"].compact.join('_')
-  end
 end
diff --git a/app/stylesheets/outfits/_edit.sass b/app/stylesheets/outfits/_edit.sass
index fef2a109..93fa2352 100644
--- a/app/stylesheets/outfits/_edit.sass
+++ b/app/stylesheets/outfits/_edit.sass
@@ -265,12 +265,10 @@ body.outfits-edit
         display: none
       #preview-outfits
         display: block
-    &.viewing-saving-outfit
-      height: auto
-      max-height: 100%
+    &.sharing
       #preview-closet
         display: none
-      #preview-saving-outfit
+      #preview-sharing
         display: block
     .sidebar-view
       h2
@@ -474,6 +472,25 @@ body.outfits-edit
         +outfit
       &.loaded
         background: transparent
+  
+  #preview-sharing
+    display: none
+    
+    > ul
+      +sidebar-view-child
+    
+      li
+        display: block
+        padding: .25em 0
+        width: 100%
+        
+        label
+          display: block
+          font-weight: bold
+        
+        input
+          display: block
+          width: 100%
 
   .preview-sidebar-nav
     float: right
@@ -522,10 +539,6 @@ body.outfits-edit
     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
 
diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml
index 64105861..5f6580ec 100644
--- a/app/views/outfits/edit.html.haml
+++ b/app/views/outfits/edit.html.haml
@@ -73,19 +73,25 @@
           Images © 2000-2010 Neopets, Inc. All Rights Reserved.
           Used With Permission
       #preview-outfits.sidebar-view
-        %a#preview-sidebar-nav-closet.preview-sidebar-nav{:href => "#"} &larr; Back to Closet
+        %a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => "#"} &larr; Back to Closet
         %h2 Your outfits
         %ul
-      #preview-saving-outfit.sidebar-view
-        %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
+      #preview-sharing.sidebar-view
+        %a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => '#'} &larr; Back to Closet
+        %h2 Sharing
+        %ul
+          %li
+            %label{:for => 'preview-sharing-permalink-url'} Outfit page
+            %input#preview-sharing-permalink-url.outfit-url{:type => 'text'}
+          %li
+            %label{:for => 'preview-sharing-large-image-url'} Large image
+            %input#preview-sharing-large-image-url.outfit-url{:type => 'text'}
+          %li
+            %label{:for => 'preview-sharing-medium-image-url'} Medium image
+            %input#preview-sharing-medium-image-url.outfit-url{:type => 'text'}
+          %li
+            %label{:for => 'preview-sharing-small-image-url'} Small image
+            %input#preview-sharing-small-image-url.outfit-url{:type => 'text'}
   %form#preview-search-form
     %header
       %h2 Add an item
diff --git a/public/javascripts/outfits/edit.js b/public/javascripts/outfits/edit.js
index a10ebe82..359f2c4a 100644
--- a/public/javascripts/outfits/edit.js
+++ b/public/javascripts/outfits/edit.js
@@ -445,7 +445,13 @@ View.Outfits = function (wardrobe) {
     stars = $('#preview-outfits div.outfit-star'),
     sidebar_el = $('#preview-sidebar'),
     signed_in,
-    previously_viewing = '';
+    previously_viewing = '',
+    sharing_url_els = {
+      permalink: $('#preview-sharing-permalink-url'),
+      large_image: $('#preview-sharing-large-image-url'),
+      medium_image: $('#preview-sharing-medium-image-url'),
+      small_image: $('#preview-sharing-small-image-url'),
+    };
 
   function liForOutfit(outfit) {
     return $('li.outfit-' + outfit.id);
@@ -483,6 +489,10 @@ View.Outfits = function (wardrobe) {
     wardrobe.user.loadOutfits();
     navigateTo('viewing-outfits');
   }
+  
+  function showSharing() {
+    navigateTo('sharing');
+  }
 
   function showNewOutfitForm() {
     new_outfit_name_el.val('');
@@ -497,7 +507,7 @@ View.Outfits = function (wardrobe) {
 
   $('#preview-sidebar-nav-outfits').click(navLinkTo(showOutfits));
 
-  $('#preview-sidebar-nav-closet').click(navLinkTo(showCloset));
+  $('.preview-sidebar-nav-closet').click(navLinkTo(showCloset));
 
   $('#save-outfit, #save-outfit-copy').click(showNewOutfitForm);
 
@@ -592,11 +602,13 @@ View.Outfits = function (wardrobe) {
     el.closest('li').startLoading();
     wardrobe.user.toggleOutfitStar(el.tmplItem().data);
   });
+  
+  function generateOutfitPermalink(outfit) {
+    return pathToUrl("/outfits/" + outfit.id);
+  }
 
   function setOutfitPermalink(outfit, outfit_permalink_el, outfit_url_el) {
-    var url = document.location.protocol + "//" + document.location.host;
-    if(document.location.port) url += ":" + document.location.port;
-    url += "/outfits/" + outfit.id;
+    var url = generateOutfitPermalink(outfit);
     outfit_permalink_el.attr('href', url);
     if(outfit_url_el) outfit_url_el.val(url);
   }
@@ -608,6 +620,19 @@ View.Outfits = function (wardrobe) {
   function setSharedOutfitPermalink(outfit) {
     setOutfitPermalink(outfit, shared_outfit_permalink_el, shared_outfit_url_el);
   }
+  
+  function pathToUrl(path) {
+    var host = document.location.protocol + "//" + document.location.host;
+    if(document.location.port) host += ":" + document.location.port;
+    return host + path;
+  }
+  
+  function setSharingUrls(outfit) {
+    sharing_url_els.permalink.val(generateOutfitPermalink(outfit));
+    sharing_url_els.large_image.val(pathToUrl(outfit.image_versions.large));
+    sharing_url_els.medium_image.val(pathToUrl(outfit.image_versions.medium));
+    sharing_url_els.small_image.val(pathToUrl(outfit.image_versions.small));
+  }
 
   function setActiveOutfit(outfit) {
     outfits_list_el.find('li.active').removeClass('active');
@@ -646,7 +671,7 @@ View.Outfits = function (wardrobe) {
 
   $('#share-outfit').click(function () {
     save_outfit_wrapper_el.startLoading();
-    wardrobe.outfit.share();
+    wardrobe.outfit.saveAnonymously();
   });
 
   new_outfit_form_el.find('div.outfit-star').click(function () {
@@ -677,11 +702,16 @@ View.Outfits = function (wardrobe) {
   wardrobe.outfit.bind('updateSuccess', function (outfit) {
     wardrobe.user.updateOutfit(outfit);
   });
-
-  wardrobe.outfit.bind('shareSuccess', function (outfit) {
+  
+  function shareComplete(outfit) {
     save_outfit_wrapper_el.stopLoading().addClass('shared-outfit');
     setSharedOutfitPermalink(outfit);
-  });
+    setSharingUrls(outfit);
+    showSharing();
+  }
+
+  wardrobe.outfit.bind('shareSuccess', shareComplete);
+  wardrobe.outfit.bind('shareSkipped', shareComplete);
 
   function clearSharedOutfit() {
     save_outfit_wrapper_el.removeClass('shared-outfit');
diff --git a/public/javascripts/wardrobe.js b/public/javascripts/wardrobe.js
index 82aa6947..f309dc26 100644
--- a/public/javascripts/wardrobe.js
+++ b/public/javascripts/wardrobe.js
@@ -286,6 +286,7 @@ function Wardrobe() {
       this.pet_state_id = data.pet_state_id;
       this.starred = data.starred;
       this.species_id = data.species_id;
+      this.image_versions = data.image_versions;
       this.setWornAndUnwornItemIds(data.worn_and_unworn_item_ids);
       new_record = false;
     }
@@ -426,6 +427,14 @@ function Wardrobe() {
       });
       return visible_assets;
     }
+    
+    this.isIdenticalTo = function (other) {
+      return other && // other exists
+             this.constructor == other.constructor && // other is an outfit
+             this.getPetStateId() == other.getPetStateId() &&
+             arraysMatch(this.getWornItemIds(), other.getWornItemIds()) &&
+             arraysMatch(this.getClosetItemIds(), other.getClosetItemIds());
+    }
 
     this.rename = function (new_name, success, failure) {
       this.updateAttributes({name: new_name}, success, failure);
@@ -565,10 +574,12 @@ function Wardrobe() {
         url: '/outfits',
         type: 'post',
         data: {outfit: getAttributes()},
+        dataType: 'json',
         success: function (data) {
           new_record = false;
-          outfit.id = data;
-          Outfit.cache[data] = outfit;
+          outfit.id = data.id;
+          outfit.image_versions = data.image_versions;
+          Outfit.cache[outfit.id] = outfit;
           success(outfit);
         },
         error: function (xhr) {
@@ -800,7 +811,7 @@ function Wardrobe() {
   Controller.all = {};
 
   Controller.all.Outfit = function OutfitController() {
-    var controller = this, outfit = new Outfit;
+    var controller = this, outfit = new Outfit, last_saved_outfit = null;
 
     this.in_transaction = false;
 
@@ -930,13 +941,17 @@ function Wardrobe() {
       );
     }
 
-    this.share = function () {
-      var sharedOutfit = outfit.clone();
-      sharedOutfit.anonymous = true;
-      sharedOutfit.create(
-        controller.event('shareSuccess'),
-        controller.event('shareFailure')
-      );
+    this.saveAnonymously = function () {
+      if(!outfit.isIdenticalTo(last_saved_outfit)) {
+        last_saved_outfit = outfit.clone();
+        last_saved_outfit.anonymous = true;
+        last_saved_outfit.create(
+          controller.event('shareSuccess'),
+          controller.event('shareFailure')
+        );
+      } else {
+        controller.events.trigger('shareSkipped', last_saved_outfit);
+      }
     }
 
     this.unclosetItem = function (item) {
diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css
index a090de48..07014120 100644
--- a/public/stylesheets/compiled/screen.css
+++ b/public/stylesheets/compiled/screen.css
@@ -2351,65 +2351,60 @@ body.outfits-edit #preview-sidebar.viewing-outfits #preview-closet {
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-outfits {
   display: block;
 }
-/* line 268, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-sidebar.viewing-saving-outfit {
-  height: auto;
-  max-height: 100%;
-}
-/* line 271, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-sidebar.viewing-saving-outfit #preview-closet {
+/* line 269, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sidebar.sharing #preview-closet {
   display: none;
 }
-/* line 273, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-sidebar.viewing-saving-outfit #preview-saving-outfit {
+/* line 271, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sidebar.sharing #preview-sharing {
   display: block;
 }
-/* line 276, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 274, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar .sidebar-view h2 {
   margin-bottom: 0.25em;
   margin-left: 24px;
 }
-/* line 281, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 279, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet h2 {
   margin-bottom: 0;
 }
-/* line 283, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 281, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet ul {
   text-align: center;
 }
-/* line 285, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 283, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object {
   background: #eeffee;
 }
-/* line 287, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 285, ../../../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 289, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 287, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.worn {
   background: transparent;
 }
-/* line 291, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 289, ../../../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 293, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 291, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.no-assets {
   background: #fbe3e4;
   color: #8a1f11;
   padding-bottom: 1.25em;
 }
-/* line 297, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 295, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.no-assets .no-assets-message {
   display: block;
 }
-/* line 299, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 297, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .no-assets-message {
   background: #f3dbdc;
   bottom: 0;
@@ -2421,7 +2416,7 @@ body.outfits-edit .no-assets-message {
   position: absolute;
   width: 100%;
 }
-/* line 309, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 307, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #no-assets-full-message {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -2439,12 +2434,12 @@ body.outfits-edit #no-assets-full-message {
   top: -9999px;
   width: 30em;
 }
-/* line 320, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 318, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form {
   clear: both;
   text-align: left;
 }
-/* line 323, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 321, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form h2 {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2457,7 +2452,7 @@ body.outfits-edit #preview-search-form h2 {
 body.outfits-edit #preview-search-form h2 {
   *display: inline;
 }
-/* line 326, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 324, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form input {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2469,17 +2464,17 @@ body.outfits-edit #preview-search-form input {
 body.outfits-edit #preview-search-form input {
   *display: inline;
 }
-/* line 328, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 326, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form input[type=submit] {
   margin-right: 2em;
 }
-/* line 330, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 328, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .preview-search-form-your-items {
   display: none;
   font-size: 85%;
   margin-right: 1em;
 }
-/* line 334, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 332, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2491,53 +2486,53 @@ body.outfits-edit #preview-search-form-pagination {
 body.outfits-edit #preview-search-form-pagination {
   *display: inline;
 }
-/* line 336, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 334, ../../../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 338, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 336, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination .current {
   font-weight: bold;
 }
-/* line 340, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 338, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-clear {
   display: none;
   font-size: 87.5%;
   margin-left: 2em;
 }
-/* line 344, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 342, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-loading {
   display: none;
   font-size: 75%;
   font-style: italic;
   margin-left: 2em;
 }
-/* line 350, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 348, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-no-results {
   display: none;
 }
-/* line 352, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 350, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-help {
   font-size: 87.5%;
   margin-left: 2em;
 }
-/* line 355, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 353, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .search-helper {
   font-family: inherit;
 }
-/* line 357, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 355, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .possible-error {
   display: none;
 }
-/* line 360, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 358, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #fullscreen-copyright {
   display: none;
 }
-/* line 362, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 360, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen {
   height: 100%;
 }
-/* line 365, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 363, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #container {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -2550,19 +2545,19 @@ body.outfits-edit.fullscreen #container {
   position: relative;
   width: 80%;
 }
-/* line 373, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 371, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen h1 {
   display: none;
 }
-/* line 375, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 373, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #short-url-response {
   position: static;
 }
-/* line 377, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 375, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview {
   width: 100%;
 }
-/* line 379, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 377, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-sidebar {
   float: right;
   height: 100%;
@@ -2570,12 +2565,12 @@ body.outfits-edit.fullscreen #preview-sidebar {
   position: relative;
   width: 400px;
 }
-/* line 385, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 383, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-sidebar.viewing-saving-outfit {
   height: auto;
   max-height: 100%;
 }
-/* line 388, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 386, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-search-form {
   bottom: 1.5em;
   left: 0;
@@ -2584,7 +2579,7 @@ body.outfits-edit.fullscreen #preview-search-form {
   position: absolute;
   width: 100%;
 }
-/* line 396, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 394, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-search-form-help div {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2597,27 +2592,27 @@ body.outfits-edit.fullscreen #preview-search-form-help div {
 body.outfits-edit.fullscreen #preview-search-form-help div {
   *display: inline;
 }
-/* line 399, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 397, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer {
   bottom: 0;
   left: 0;
   position: absolute;
   width: 100%;
 }
-/* line 404, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 402, ../../../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 406, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 404, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer ul {
   margin-right: 2em;
 }
-/* line 409, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 407, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object {
   padding: 6px;
   position: relative;
 }
-/* line 412, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 410, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul {
   display: none;
   left: 0;
@@ -2625,11 +2620,11 @@ body.outfits-edit .object ul {
   position: absolute;
   top: 0;
 }
-/* line 418, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 416, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul li {
   margin-bottom: 0.25em;
 }
-/* line 420, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 418, ../../../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;
@@ -2674,11 +2669,11 @@ body.outfits-edit .object ul li a:active {
 body.outfits-edit .object ul li a:hover {
   background-color: #999999;
 }
-/* line 423, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 421, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object:hover ul, body.outfits-edit .object:hover .object-info {
   display: block;
 }
-/* line 430, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 428, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .nc-icon {
   background: url('/images/nc.png?1315327995') no-repeat;
   height: 16px;
@@ -2688,14 +2683,14 @@ body.outfits-edit .nc-icon {
   top: 64px;
   width: 16px;
 }
-/* line 438, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 436, ../../../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 441, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 439, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info {
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
@@ -2716,26 +2711,26 @@ body.outfits-edit .object-info {
   top: 0;
   width: 16px;
 }
-/* line 452, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 450, ../../../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 458, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 456, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info:hover {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 461, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 459, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits {
   display: none;
   text-align: left;
 }
-/* line 464, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 462, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul {
   margin-left: 24px;
   margin-right: 24px;
@@ -2746,7 +2741,7 @@ body.outfits-edit #preview-outfits > ul {
   margin-bottom: 1em;
   min-height: 16px;
 }
-/* line 473, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 471, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li {
   padding: 0.25em 0;
 }
@@ -2929,18 +2924,43 @@ body.outfits-edit #preview-outfits > ul > li.renaming:hover .outfit-rename-butto
 body.outfits-edit #preview-outfits > ul > li:hover .outfit-rename-button {
   display: inline;
 }
-/* line 475, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 473, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul.loaded {
   background: transparent;
 }
-/* line 478, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 476, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sharing {
+  display: none;
+}
+/* line 479, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sharing > ul {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+/* line 482, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sharing > ul li {
+  display: block;
+  padding: 0.25em 0;
+  width: 100%;
+}
+/* line 487, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sharing > ul li label {
+  display: block;
+  font-weight: bold;
+}
+/* line 491, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-sharing > ul li input {
+  display: block;
+  width: 100%;
+}
+/* line 495, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .preview-sidebar-nav {
   float: right;
   font-size: 85%;
   margin-right: 24px;
   margin-top: 1em;
 }
-/* line 485, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 502, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-success, body.outfits-edit #save-error, body.outfits-edit #outfit-not-found, body.outfits-edit #preview-sidebar-donation-request {
   margin-left: 24px;
   margin-right: 24px;
@@ -2948,7 +2968,7 @@ body.outfits-edit #save-success, body.outfits-edit #save-error, body.outfits-edi
   margin-top: 1em;
   text-align: center;
 }
-/* line 492, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 509, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-donation-request {
   background: #e6efc2;
   border: 1px solid #c6d880;
@@ -2956,23 +2976,23 @@ body.outfits-edit #preview-sidebar-donation-request {
   font-size: 85%;
   padding: 1em;
 }
-/* line 497, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 514, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-donation-request-no-thanks {
   margin-left: 1em;
 }
-/* line 500, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 517, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-success {
   background: #e6efc2;
   border: 1px solid #c6d880;
   color: #264409;
 }
-/* line 503, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 520, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-error, body.outfits-edit #outfit-not-found {
   background: #fbe3e4;
   border: 1px solid #fbc2c4;
   color: #8a1f11;
 }
-/* line 506, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 523, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #userbar-message {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
@@ -2980,7 +3000,7 @@ body.outfits-edit #userbar-message {
   -khtml-opacity: 0.5;
   display: none;
 }
-/* line 510, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 527, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #new-outfit {
   padding: 0.25em 0;
   margin-left: 24px;
@@ -3166,33 +3186,28 @@ body.outfits-edit #new-outfit.renaming:hover .outfit-rename-button {
 body.outfits-edit #new-outfit:hover .outfit-rename-button {
   display: inline;
 }
-/* line 514, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 531, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #new-outfit h4 {
   display: inline;
 }
-/* line 516, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 533, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #new-outfit h4:hover {
   text-decoration: none;
 }
-/* line 518, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 535, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #new-outfit .outfit-star {
   margin-top: 0.5em;
 }
-/* line 521, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 538, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #new-outfit-name {
   font: inherit;
   line-height: 1;
 }
-/* line 525, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-saving-outfit {
-  display: none;
-  padding-bottom: 1em;
-}
-/* line 529, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 542, ../../../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 532, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 545, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .control-overlay {
   height: 100%;
   left: 0;
@@ -3201,11 +3216,11 @@ body.outfits-edit .control-overlay {
   width: 100%;
   z-index: 5;
 }
-/* line 540, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 553, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-nav-outfits, body.outfits-edit #save-outfit-signed-in {
   display: none;
 }
-/* line 543, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 556, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit form#save-outfit-form {
   padding: 0.25em 0;
   display: none;
@@ -3391,7 +3406,7 @@ body.outfits-edit form#save-outfit-form.renaming:hover .outfit-rename-button {
 body.outfits-edit form#save-outfit-form:hover .outfit-rename-button {
   display: inline;
 }
-/* line 549, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 562, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#save-outfit-form input, body.outfits-edit form#save-outfit-form button {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -3405,50 +3420,50 @@ body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#sav
 body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#save-outfit-form input, body.outfits-edit form#save-outfit-form button {
   *display: inline;
 }
-/* line 554, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 567, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit form#save-outfit-form .outfit-star {
   margin-top: 0.25em;
 }
-/* line 557, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 570, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .outfit-url {
   font-size: 75%;
 }
-/* line 560, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 573, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-error {
   background: #fbe3e4;
   border: 1px solid #fbc2c4;
   color: #8a1f11;
   padding: 0.25em 0.5em;
 }
-/* line 565, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 578, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #preview-sidebar-nav-outfits {
   display: block;
 }
-/* line 567, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 580, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit {
   display: inline-block;
 }
-/* line 571, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 584, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-outfit {
   display: none;
 }
-/* line 573, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 586, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-current-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-outfit-copy {
   display: inline-block;
 }
-/* line 575, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 588, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #current-outfit-permalink {
   display: inline-block;
 }
-/* line 578, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 591, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit-form {
   display: block;
 }
-/* line 580, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 593, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-current-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit-copy, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #current-outfit-permalink, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #shared-outfit-permalink, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #share-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #shared-outfit-url {
   display: none;
 }
-/* line 582, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 595, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in .preview-search-form-your-items {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -3460,15 +3475,15 @@ body.outfits-edit.user-signed-in .preview-search-form-your-items {
 body.outfits-edit.user-signed-in .preview-search-form-your-items {
   *display: inline;
 }
-/* line 586, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 599, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-not-signed-in #save-outfit-not-signed-in {
   display: inline-block;
 }
-/* line 590, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 603, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper.shared-outfit #shared-outfit-permalink, body.outfits-edit #save-outfit-wrapper.shared-outfit #shared-outfit-url {
   display: inline-block;
 }
-/* line 592, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 605, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper.shared-outfit #current-outfit-permalink {
   display: none !important;
 }