outfit loading, yaay

public/javascripts/outfits/edit.js

@@ -277,12 +277,18 @@ View.Hash = function (wardrobe) {
       if(!arraysMatch(new_data.closet, data.closet)) {
         wardrobe.outfit.setClosetItemsByIds(new_data.closet.slice(0));
       }
-    } else if(!arraysMatch(new_data.objects, data.closet)) {
+    } else if(new_data.objects && !arraysMatch(new_data.objects, data.closet)) {
       wardrobe.outfit.setClosetItemsByIds(new_data.objects.slice(0));
+    } else {
+      wardrobe.outfit.setClosetItemsByIds([]);
     }
+    if(new_data.objects) {
       if(!arraysMatch(new_data.objects, data.objects)) {
         wardrobe.outfit.setWornItemsByIds(new_data.objects.slice(0));
       }
+    } else {
+      wardrobe.outfit.setWornItemsByIds([]);
+    }
     if(new_data.name != data.name && new_data.name) {
       wardrobe.base_pet.setName(new_data.name);
     }
@@ -338,14 +344,20 @@ View.Hash = function (wardrobe) {
     setInterval(checkQuery, 100);
   }
   
-  wardrobe.outfit.bind('updateClosetItems', function (items) {
+  function singleOutfitResponse(event_name, response) {
+    wardrobe.outfit.bind(event_name, function () {
+      if(!wardrobe.outfit.in_transaction) response.apply(this, arguments);
+    });
+  }
+  
+  singleOutfitResponse('updateClosetItems', function (items) {
     var item_ids = items.map('id');
     if(!arraysMatch(item_ids, data.closet)) {
       changeQuery({closet: item_ids});
     }
   });
   
-  wardrobe.outfit.bind('updateWornItems', function (items) {
+  singleOutfitResponse('updateWornItems', function (items) {
     var item_ids = items.map('id'), changes = {};
     if(!arraysMatch(item_ids, data.objects)) {
       changes.objects = item_ids;
@@ -358,7 +370,7 @@ View.Hash = function (wardrobe) {
     if(changes.objects || changes.closet) changeQuery(changes);
   });
   
-  wardrobe.outfit.bind('updatePetType', function (pet_type) {
+  singleOutfitResponse('updatePetType', function (pet_type) {
     if(pet_type.color_id != data.color || pet_type.species_id != data.species) {
       changeQuery({
         color: pet_type.color_id,
@@ -368,17 +380,27 @@ View.Hash = function (wardrobe) {
     }
   });
   
-  wardrobe.outfit.bind('petTypeNotFound', function () {
+  singleOutfitResponse('petTypeNotFound', function () {
     window.history.back();
   });
   
-  wardrobe.outfit.bind('updatePetState', function (pet_state) {
+  singleOutfitResponse('updatePetState', function (pet_state) {
     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});
     }
   });
   
+  wardrobe.outfit.bind('setOutfit', function (outfit) {
+    changeQuery({
+      closet: outfit.getClosetItemIds(),
+      color: outfit.pet_type.color_id,
+      objects: outfit.getWornItemIds(),
+      species: outfit.pet_type.species_id,
+      state: outfit.pet_state.id
+    });
+  });
+  
   wardrobe.search.bind('updateRequest', function (request) {
     if(request.offset != data.search_offset || request.query != data.search) {
       changeQuery({
@@ -482,6 +504,10 @@ View.Outfits = function (wardrobe) {
     outfit_el.addClass('hiding').hide('normal', function () { outfit_el.remove() });
   });
   
+  $('#preview-outfits h4').live('click', function () {
+    wardrobe.outfit.load($(this).tmplItem().data.clone());
+  });
+  
   $('input.outfit-url').live('mouseover', function () {
     this.focus();
   }).live('mouseout', function () {

public/javascripts/wardrobe.js

@@ -223,15 +223,30 @@ function Wardrobe() {
       new_record = true;
     
     if(typeof data != 'undefined') {
+      this.color_id = data.color_id;
       this.id = data.id;
       this.name = data.name;
+      this.pet_state_id = data.pet_state_id;
       this.starred = data.starred;
+      this.species_id = data.species_id;
+      this.worn_and_unworn_item_ids = data.worn_and_unworn_item_ids;
+      worn_item_ids = this.worn_and_unworn_item_ids.worn;
+      closet_item_ids = this.worn_and_unworn_item_ids.unworn.
+        concat(this.worn_and_unworn_item_ids.worn);
       new_record = false;
     }
     
     this.closet_items = [];
     this.worn_items = [];
     
+    this.getWornItemIds = function () { // TODO just expose the worn_item_ids
+      return worn_item_ids;
+    }
+    
+    this.getClosetItemIds = function () { // TODO just expose the closet_item_ids
+      return closet_item_ids;
+    }
+    
     function getRestrictedZones() {
       // note: may contain duplicates - loop through assets, not these, for
       // best performance
@@ -323,7 +338,10 @@ function Wardrobe() {
     this.setClosetItemsByIds = function (ids, updateItemsCallback) {
       if(ids) closet_item_ids = ids;
       if(ids && ids.length) {
-        this.closet_items = Item.loadByIds(ids, updateItemsCallback);
+        Item.loadByIds(ids, function (items) {
+          outfit.closet_items = items;
+          updateItemsCallback(items);
+        });
       } else {
         this.closet_items = [];
         updateItemsCallback(this.closet_items);
@@ -408,6 +426,21 @@ function Wardrobe() {
       return {worn_item_ids: worn_item_ids, unworn_item_ids: unworn_item_ids};
     }
     
+    this.clone = function () {
+      return new Outfit({
+        color_id: outfit.color_id,
+        id: outfit.id,
+        name: outfit.name,
+        species_id: outfit.species_id,
+        starred: outfit.starred,
+        pet_state_id: outfit.pet_state_id,
+        worn_and_unworn_item_ids: {
+          worn: outfit.worn_and_unworn_item_ids.worn.slice(0),
+          unworn: outfit.worn_and_unworn_item_ids.unworn.slice(0)
+        }
+      });
+    }
+    
     this.destroy = function (success) {
       $.ajax({
         url: '/outfits/' + outfit.id + '.json',
@@ -615,6 +648,12 @@ function Wardrobe() {
     var controller = this;
     this.events = {};
     
+    function fireEvent(event_name, subarguments) {
+      $.each(controller.events[event_name], function () {
+        this.apply(controller, subarguments);
+      });
+    }
+    
     this.bind = function (event, callback) {
       if(typeof this.events[event] == 'undefined') {
         this.events[event] = [];
@@ -624,10 +663,7 @@ function Wardrobe() {
     
     this.event = function (event_name) {
       return function () {
-        var subarguments = arguments;
+        fireEvent(event_name, arguments);
-        $.each(controller.events[event_name], function () {
-          this.apply(controller, subarguments);
-        });
       }
     }
     
@@ -635,7 +671,7 @@ function Wardrobe() {
       var subarguments, event;
       if(controller.events[event_name]) {
         subarguments = Array.prototype.slice.apply(arguments, [1]);
-        controller.event(event_name).apply(controller, subarguments);
+        fireEvent(event_name, subarguments);
       }
     }
   }
@@ -645,6 +681,8 @@ function Wardrobe() {
   Controller.all.Outfit = function OutfitController() {
     var controller = this, outfit = new Outfit;
     
+    this.in_transaction = false;
+    
     this.closetItem = function (item) {
       outfit.closetItem(
         item,
@@ -668,6 +706,17 @@ function Wardrobe() {
       return outfit.worn_items;
     }
     
+    this.load = function (new_outfit) {
+      outfit = new_outfit;
+      this.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());
+      this.in_transaction = false;
+      controller.events.trigger('setOutfit', outfit);
+    }
+    
     this.save = function (starred, name) {
       outfit.starred = starred;
       outfit.name = name;