show outfit page

app/controllers/outfits_controller.rb

@@ -1,5 +1,5 @@
 class OutfitsController < ApplicationController
-  before_filter :find_outfit, :only => [:show, :update, :destroy]
+  before_filter :find_authorized_outfit, :only => [:update, :destroy]
   
   def create
     if user_signed_in?
@@ -31,7 +31,11 @@ class OutfitsController < ApplicationController
   end
   
   def show
-    render :json => @outfit
+    @outfit = Outfit.find(params[:id])
+    respond_to do |format|
+      format.html { render }
+      format.json { render :json => @outfit }
+    end
   end
   
   def update
@@ -48,7 +52,7 @@ class OutfitsController < ApplicationController
     end
   end
   
-  def find_outfit
+  def find_authorized_outfit
     raise ActiveRecord::RecordNotFound unless user_signed_in?
     @outfit = current_user.outfits.find(params[:id])
   end

app/models/outfit.rb

@@ -1,5 +1,8 @@
 class Outfit < ActiveRecord::Base
   has_many :item_outfit_relationships, :dependent => :destroy
+  has_many :worn_item_outfit_relationships, :class_name => 'ItemOutfitRelationship',
+    :conditions => {:is_worn => true}
+  has_many :worn_items, :through => :worn_item_outfit_relationships, :source => :item
   belongs_to :pet_state
   belongs_to :user
   
@@ -13,6 +16,10 @@ class Outfit < ActiveRecord::Base
       :methods => [:color_id, :species_id, :worn_and_unworn_item_ids]
   end
   
+  def closet_item_ids
+    item_outfit_relationships.map(&:item_id)
+  end
+  
   def color_id
     pet_state.pet_type.color_id
   end
@@ -21,6 +28,16 @@ class Outfit < ActiveRecord::Base
     pet_state.pet_type.species_id
   end
   
+  def to_query
+    {
+      :closet => closet_item_ids,
+      :color => color_id,
+      :objects => worn_item_ids,
+      :species => species_id,
+      :state => pet_state_id
+    }.to_query
+  end
+  
   def worn_and_unworn_item_ids
     {:worn => [], :unworn => []}.tap do |output|
       item_outfit_relationships.each do |rel|
@@ -43,4 +60,8 @@ class Outfit < ActiveRecord::Base
     end
     self.item_outfit_relationships = new_rels
   end
+  
+  def worn_item_ids
+    worn_and_unworn_item_ids[:worn]
+  end
 end

app/stylesheets/_layout.sass

@@ -67,7 +67,7 @@ $container_width: 800px
 
 #container
   margin: 1em auto
-  padding-top: 3em
+  padding-top: $container-top-padding
   position: relative
   width: $container_width
 

app/stylesheets/outfits/_show.sass

@@ -0,0 +1,29 @@
+body.outfits-show
+  #title
+    float: left
+  
+  #outfit-wardrobe-link
+    float: left
+    font-size: 85%
+    margin:
+      left: 2em
+      top: .75em
+  
+  #outfit-user
+    float: right
+    margin-top: 1em
+  
+  #preview-wrapper
+    clear: both
+    height: 400px
+    margin: 0 auto 1em
+    position: relative
+    width: 400px
+    
+    #preview-swf
+      left: 0
+      position: absolute
+      top: 0
+  
+  #outfit-items
+    text-align: center

app/stylesheets/partials/clean/_constants.sass

@@ -26,3 +26,5 @@ $object-img-size:  80px
 $object-width:     100px
 $object-padding:   6px
 $nc-icon-size:     16px
+
+$container-top-padding: 3em

app/stylesheets/screen.sass

@@ -12,6 +12,7 @@
 @import items/show
 @import outfits/edit
 @import outfits/new
+@import outfits/show
 @import pets/bulk
 @import static/terms
 @import users/top_contributors

app/views/outfits/edit.html.haml

@@ -95,7 +95,7 @@
     %button.outfit-delete ×
     .outfit-star
     %h4 ${name}
-  %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/FIXME'}
+  %input.outfit-url{:type => 'text', :value => "http://#{request.host}/outfits/${id}"}
   .outfit-delete-confirmation
     %span Delete forever?
     %a.outfit-delete-confirmation-yes{:href => '#'} yes

app/views/outfits/show.html.haml

@@ -0,0 +1,16 @@
+- title @outfit.name
+%a.button#outfit-wardrobe-link{:href => wardrobe_path(:anchor => @outfit.to_query)}
+  Edit a copy
+#outfit-user
+  Created by
+  == #{link_to @outfit.user.name, user_contributions_path(@outfit.user)},
+  %span{:title => @outfit.created_at}= time_ago_in_words @outfit.created_at
+  ago
+#preview-wrapper
+  #preview-swf
+#outfit-items= render @outfit.worn_items
+- content_for :javascripts do
+  :javascript
+    var INITIAL_OUTFIT_DATA = #{@outfit.to_json};
+  = include_javascript_libraries :jquery, :swfobject
+  = include_javascripts :show_outfit_package

config/assets.yml

@@ -13,3 +13,7 @@ javascripts:
   new_outfit_package:
     - public/javascripts/pet_query.js
     - public/javascripts/outfits/new.js
+  
+  show_outfit_package:
+    - public/javascripts/wardrobe.js
+    - public/javascripts/outfits/show.js

public/javascripts/outfits/show.js

@@ -0,0 +1,10 @@
+var main_wardrobe = new Wardrobe(), View = Wardrobe.getStandardView({
+  Preview: {
+    swf_url: '/swfs/preview.swf?v=0.12',
+    wrapper: $('#preview-wrapper'),
+    placeholder: $('#preview-swf')
+  }
+});
+main_wardrobe.registerViews(View);
+main_wardrobe.initialize();
+main_wardrobe.outfit.loadData(INITIAL_OUTFIT_DATA);

public/javascripts/wardrobe.js

@@ -705,9 +705,12 @@ function Wardrobe() {
     this.events = {};
     
     function fireEvent(event_name, subarguments) {
-      $.each(controller.events[event_name], function () {
+      var events = controller.events[event_name];
-        this.apply(controller, subarguments);
+      if(typeof events !== 'undefined') {
-      });
+        for(var i = 0; i < events.length; i++) {
+          events[i].apply(controller, subarguments);
+        }
+      }
     }
     
     this.bind = function (event, callback) {
@@ -739,6 +742,18 @@ function Wardrobe() {
     
     this.in_transaction = false;
     
+    function setFullOutfit(new_outfit) {
+      outfit = new_outfit;
+      controller.in_transaction = true;
+      controller.setPetTypeByColorAndSpecies(outfit.color_id, outfit.species_id);
+      controller.setPetStateById(outfit.pet_state_id);
+      controller.setClosetItemsByIds(outfit.getClosetItemIds());
+      controller.setWornItemsByIds(outfit.getWornItemIds());
+      controller.events.trigger('setOutfit', outfit);
+      controller.in_transaction = false;
+      controller.events.trigger('loadOutfit', outfit);
+    }
+    
     function setOutfitIdentity(new_outfit) {
       new_outfit.cloneAttributesFrom(outfit);
       outfit = new_outfit;
@@ -773,18 +788,14 @@ function Wardrobe() {
     
     this.load = function (new_outfit_id) {
       Outfit.find(new_outfit_id, function (new_outfit) {
-        outfit = new_outfit.clone();
+        setFullOutfit(new_outfit.clone());
-        controller.in_transaction = true;
-        controller.setPetTypeByColorAndSpecies(outfit.color_id, outfit.species_id);
-        controller.setPetStateById(outfit.pet_state_id);
-        controller.setClosetItemsByIds(outfit.getClosetItemIds());
-        controller.setWornItemsByIds(outfit.getWornItemIds());
-        controller.events.trigger('setOutfit', outfit);
-        controller.in_transaction = false;
-        controller.events.trigger('loadOutfit', outfit);
       });
     }
     
+    this.loadData = function (new_outfit_data) {
+      setFullOutfit(new Outfit(new_outfit_data));
+    }
+    
     this.create = function (attributes) {
       if(attributes) {
         outfit.starred = attributes.starred;

public/stylesheets/compiled/screen.css

@@ -1879,6 +1879,41 @@ body.outfits-new #tell-the-world img {
   width: 16px;
 }
 
+/* line 2, ../../../app/stylesheets/outfits/_show.sass */
+body.outfits-show #title {
+  float: left;
+}
+/* line 5, ../../../app/stylesheets/outfits/_show.sass */
+body.outfits-show #outfit-wardrobe-link {
+  float: left;
+  font-size: 85%;
+  margin-left: 2em;
+  margin-top: 0.75em;
+}
+/* line 12, ../../../app/stylesheets/outfits/_show.sass */
+body.outfits-show #outfit-user {
+  float: right;
+  margin-top: 1em;
+}
+/* line 16, ../../../app/stylesheets/outfits/_show.sass */
+body.outfits-show #preview-wrapper {
+  clear: both;
+  height: 400px;
+  margin: 0 auto 1em;
+  position: relative;
+  width: 400px;
+}
+/* line 23, ../../../app/stylesheets/outfits/_show.sass */
+body.outfits-show #preview-wrapper #preview-swf {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+/* line 28, ../../../app/stylesheets/outfits/_show.sass */
+body.outfits-show #outfit-items {
+  text-align: center;
+}
+
 /* line 1, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk {
   text-align: center;