preview pet type selection, data loading

app/helpers/items_helper.rb

@@ -9,7 +9,7 @@ module ItemsHelper
       pet_type.species = species
       pet_type.color = color
       src = sprintf(StandardSpeciesImageFormat, pet_type.image_hash)
-      html + image_tag(src, 'data-color-id' => color.id, 'data-species-id' => species.id, 'data-species-name' => species.name)
+      html + link_to(image_tag(src), '#', 'data-color-id' => color.id, 'data-species-id' => species.id, 'data-species-name' => species.name)
     end)
   end
 end

app/stylesheets/items/_show.scss

@@ -19,17 +19,27 @@ body.show {
     margin-top: 1em;
   }
   
-  #item-preview div {
+  #item-preview {
+    div {
       float: left;
       width: 50%;
     }
     
+    a, img {
+      height: 50px;
+      width: 50px;
+    }
+    
+    a {
+      @include inline-block;
+      &.current {
+        background: $module_background_color;
+        outline: 1px solid $module_border_color;
+      }
+    }
+  }
+  
   #item-preview-swf {
     height: 50%;
   }
-  
-  #item-preview img {
-    height: 50px;
-    width: 50px;
-  }
 }

public/javascripts/items/show.js

@@ -1,12 +1,44 @@
-var PREVIEW_SWF_ID = 'item-preview-swf';
+var PREVIEW_SWF_ID = 'item-preview-swf',
+  speciesList = $('#item-preview a');
+
+function PetType() {}
+
+PetType.prototype.load = function () {
+  var url = '/species/' + this.species_id + '/color/' + this.color_id + '/pet_type.json';
+  $.getJSON(url, function (data) {
+    console.log(data);
+  });
+}
+
+PetType.prototype.setAsCurrent = function () {
+  PetType.current = this;
+  speciesList.filter('.current').removeClass('current');
+  this.link.addClass('current');
+  this.load();
+}
+
+PetType.create_from_link = function (link) {
+  var pet_type = new PetType();
+  pet_type.color_id = link.attr('data-color-id');
+  pet_type.species_id = link.attr('data-species-id');
+  pet_type.link = link;
+  return pet_type;
+}
 
 swfobject.embedSWF(
   'http://impress.openneo.net/assets/swf/preview.swf', // URL
   PREVIEW_SWF_ID, // ID
   400, // width
   400, // height
-  9, // required version
+  '9', // required version
   'http://impress.openneo.net/assets/js/swfobject/expressInstall.swf', // express install URL
   {'swf_assets_path': '/assets'}, // flashvars
   {'wmode': 'transparent'} // params
 )
+
+PetType.create_from_link(speciesList.eq(Math.floor(Math.random()*speciesList.length))).setAsCurrent();
+
+speciesList.click(function (e) {
+  e.preventDefault();
+  PetType.create_from_link($(this)).setAsCurrent();
+});

public/stylesheets/compiled/screen.css

@@ -567,17 +567,31 @@ body.show #item-name {
   *vertical-align: auto;
   margin-top: 1em;
 }
-/* line 22, ../../../app/stylesheets/items/_show.scss */
+/* line 23, ../../../app/stylesheets/items/_show.scss */
 body.show #item-preview div {
   float: left;
   width: 50%;
 }
-/* line 27, ../../../app/stylesheets/items/_show.scss */
-body.show #item-preview-swf {
-  height: 50%;
-}
-/* line 31, ../../../app/stylesheets/items/_show.scss */
-body.show #item-preview img {
+/* line 28, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview a, body.show #item-preview img {
   height: 50px;
   width: 50px;
 }
+/* line 33, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview a {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *display: inline;
+  *vertical-align: auto;
+}
+/* line 35, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview a.current {
+  background: #66a3d2;
+  outline: 1px solid #033e6b;
+}
+/* line 42, ../../../app/stylesheets/items/_show.scss */
+body.show #item-preview-swf {
+  height: 50%;
+}