put id, body id, etc in HTML

app/helpers/items_helper.rb

@@ -2,22 +2,26 @@ module ItemsHelper
   StandardSpeciesImageFormat = 'http://pets.neopets.com/cp/%s/1/1.png'
   
   def standard_species_images(species_list)
-    colors = Color::Basic
-    pet_type = PetType.new
-    raw(species_list.inject('') do |html, species|
-      color = colors[rand(colors.size)]
-      pet_type.species = species
-      pet_type.color = color
+    pet_types = PetType.random_basic_per_species(species_list.map(&:id))
+    raw(pet_types.inject('') do |html, pet_type|
       src = sprintf(StandardSpeciesImageFormat, pet_type.image_hash)
-      human_name = species.name.humanize
+      human_name = pet_type.species.name.humanize
       image = image_tag(src, :alt => human_name, :title => human_name)
+      attributes = {
+        'data-id' => pet_type.id,
+        'data-body-id' => pet_type.body_id
+      }
+      [:color, :species].each do |pet_type_attribute_name|
+        pet_type_attribute = pet_type.send(pet_type_attribute_name)
+        [:id, :name].each do |subattribute_name|
+          attributes["data-#{pet_type_attribute_name}-#{subattribute_name}"] =
+            pet_type_attribute.send(subattribute_name)
+        end
+      end
       html + link_to(
         image,
         '#',
-        'data-color-id' => color.id,
-        'data-color-name' => color.name,
-        'data-species-id' => species.id,
-        'data-species-name' => species.name
+        attributes
       )
     end)
   end

app/models/pet_type.rb

@@ -3,6 +3,18 @@ class PetType < ActiveRecord::Base
   
   BasicHashes = YAML::load_file(Rails.root.join('config', 'basic_type_hashes.yml'))
   
+  scope :random_basic_per_species, lambda { |species_ids|
+    conditions = nil
+    species_ids.each do |species_id|
+      color_id = Color::Basic[rand(Color::Basic.size)].id
+      condition = arel_table[:species_id].eq(species_id).and(
+        arel_table[:color_id].eq(color_id)
+      )
+      conditions = conditions ? conditions.or(condition) : condition
+    end
+    where(conditions).order(:species_id)
+  }
+  
   def as_json(options={})
     {:id => id, :body_id => body_id}
   end

public/javascripts/items/show.js

@@ -1,3 +1,5 @@
+// TODO: zones_restrict
+
 var PREVIEW_SWF_ID = 'item-preview-swf',
   PREVIEW_SWF = document.getElementById(PREVIEW_SWF_ID),
   IMPRESS_HOST = PREVIEW_SWF.getAttribute('data-impress-host'),
@@ -59,26 +61,8 @@ function PetType() {
   }
   
   this.load = function () {
-    var url = '/species/' + this.species_id + '/color/' + this.color_id + '/pet_type.json',
-      pet_type = this;
-    function onComplete() { Item.current.load(pet_type); loadAssets(); }
-    if(loaded_data) {
-      onComplete();
-    } else {
-      $.ajax({
-        url: url,
-        dataType: 'json',
-        success: function (data) {
-          pet_type.id = data.id;
-          pet_type.body_id = data.body_id;
-          loaded_data = true;
-          onComplete();
-        },
-        error: function () {
-          pet_type.deactivate(PetType.LOAD_ERROR);
-        }
-      });
-    }
+    Item.current.load(this);
+    loadAssets();
   }
 
   this.setAsCurrent = function () {
@@ -113,13 +97,15 @@ function PetType() {
 PetType.all = [];
 
 PetType.LOAD_ERROR = new LoadError("$color_article $color $species");
+PetType.DASH_REGEX = /-/g;
 
 PetType.createFromLink = function (link) {
   var pet_type = new PetType();
-  pet_type.color_id = link.attr('data-color-id');
-  pet_type.color_name = link.attr('data-color-name');
-  pet_type.species_id = link.attr('data-species-id');
-  pet_type.species_name = link.attr('data-species-name');
+  $.each(link.get(0).attributes, function () {
+    if(this.name.substr(0, 5) == 'data-') {
+      pet_type[this.name.substr(5).replace(PetType.DASH_REGEX, '_')] = this.value;
+    }
+  });
   pet_type.link = link;
   PetType.all.push(pet_type);
   return pet_type;
@@ -218,11 +204,11 @@ Preview = new function Preview() {
 
 Preview.embed(PREVIEW_SWF_ID);
 
-PetType.createFromLink(speciesList.eq(Math.floor(Math.random()*speciesList.length))).setAsCurrent();
-
 Item.createFromLocation().setAsCurrent();
 Item.current.name = $('#item-name').text();
 
+PetType.createFromLink(speciesList.eq(Math.floor(Math.random()*speciesList.length))).setAsCurrent();
+
 speciesList.each(function () {
   var pet_type = PetType.createFromLink($(this));
   $(this).click(function (e) {
@@ -232,9 +218,3 @@ speciesList.each(function () {
 });
 
 MainWardrobe = { View: { Outfit: Preview } };
-
-/*setTimeout(function () {
-  $.each(PetType.all, function () {
-    this.load();
-  });
-}, 5000);*/