Merge branch 'images'

Gemfile

@@ -23,6 +23,12 @@ gem 'addressable', :require => ['addressable/template', 'addressable/uri']
 
 gem 'whenever', '~> 0.6.2', :require => false
 
+gem 'swf_converter', '~> 0.0.3'
+
+gem 'resque', '~> 1.15.0'
+
+gem 'right_aws', '~> 2.1.0'
+
 group :development_async do
   # async wrappers
   gem 'eventmachine',     :git => 'git://github.com/eventmachine/eventmachine.git'
@@ -52,3 +58,4 @@ group :test do
   gem 'factory_girl_rails', '~> 1.0'
   gem 'rspec-rails', '~> 2.0.0.beta.22'
 end
+

Gemfile.lock

@@ -97,6 +97,7 @@ GEM
     jammit (0.5.4)
       closure-compiler (>= 0.1.0)
       yui-compressor (>= 0.9.1)
+    json (1.4.6)
     mail (2.2.15)
       activesupport (>= 2.3.6)
       i18n (>= 0.4.0)
@@ -130,6 +131,17 @@ GEM
       thor (~> 0.14.4)
     rake (0.8.7)
     rdiscount (1.6.8)
+    redis (2.2.0)
+    redis-namespace (0.10.0)
+      redis (< 3.0.0)
+    resque (1.15.0)
+      json (~> 1.4.6)
+      redis-namespace (>= 0.10.0)
+      sinatra (>= 0.9.2)
+      vegas (~> 0.1.2)
+    right_aws (2.1.0)
+      right_http_connection (>= 1.2.5)
+    right_http_connection (1.3.0)
     rspec (2.0.1)
       rspec-core (~> 2.0.1)
       rspec-expectations (~> 2.0.1)
@@ -143,14 +155,21 @@ GEM
     rspec-rails (2.0.1)
       rspec (~> 2.0.0)
     ruby-hmac (0.4.0)
+    sinatra (1.2.6)
+      rack (~> 1.1)
+      tilt (< 2.0, >= 1.2.2)
+    swf_converter (0.0.3)
     thin (1.2.7)
       daemons (>= 1.0.9)
       eventmachine (>= 0.12.6)
       rack (>= 1.0.0)
     thor (0.14.6)
+    tilt (1.3)
     treetop (1.4.9)
       polyglot (>= 0.3.1)
     tzinfo (0.3.24)
+    vegas (0.1.8)
+      rack (>= 1.0.0)
     warden (1.0.3)
       rack (>= 1.0.0)
     whenever (0.6.2)
@@ -183,7 +202,10 @@ DEPENDENCIES
   rack-fiber_pool
   rails (= 3.0.4)
   rdiscount (~> 1.6.5)
+  resque (~> 1.15.0)
+  right_aws (~> 2.1.0)
   rspec-rails (~> 2.0.0.beta.22)
+  swf_converter (~> 0.0.3)
   thin (~> 1.2.7)
   whenever (~> 0.6.2)
   will_paginate (~> 3.0.pre2)

Rakefile

@@ -8,3 +8,4 @@ require 'rake/testtask'
 require 'rake/rdoctask'
 
 OpenneoImpressItems::Application.load_tasks
+

app/controllers/swf_assets_controller.rb

@@ -26,9 +26,28 @@ class SwfAssetsController < ApplicationController
       json = @swf_assets.map { |a| a.as_json(:parent_id => pet_state_id, :for => 'wardrobe') }
     elsif params[:pet_type_id]
       @swf_assets = PetType.find(params[:pet_type_id]).pet_states.emotion_order.first.swf_assets
+    elsif params[:ids]
+      @swf_assets = []
+      if params[:ids][:biology]
+        @swf_assets += SwfAsset.biology_assets.where(:id => params[:ids][:biology]).all
+      end
+      if params[:ids][:object]
+        @swf_assets += SwfAsset.object_assets.where(:id => params[:ids][:object]).all
+      end
+    end
+    if @swf_assets
+      @swf_assets = @swf_assets.all unless @swf_assets.is_a? Array
+      @swf_assets.each(&:request_image_conversion!)
+      json = @swf_assets unless json
+    else
+      json = nil
     end
-    json ||= @swf_assets ? @swf_assets.all : nil
     render :json => json
   end
+
+  def show
+    @swf_asset = SwfAsset.find params[:id]
+    render :json => @swf_asset
+  end
 end
 

app/models/asset_image_conversion_request.rb

@@ -0,0 +1,13 @@
+class AssetImageConversionRequest
+  @queue = :requested_asset_images
+
+  def self.perform(asset_type, asset_id)
+    asset = SwfAsset.where(:type => asset_type).find(asset_id)
+    asset.convert_swf_if_not_converted!
+  end
+
+  class OnCreation < AssetImageConversionRequest
+    @queue = :requested_asset_images_on_creation
+  end
+end
+

app/models/swf_asset.rb

@@ -1,9 +1,88 @@
+require 'fileutils'
+require 'uri'
+
 class SwfAsset < ActiveRecord::Base
   PUBLIC_ASSET_DIR = File.join('swfs', 'outfit')
   LOCAL_ASSET_DIR = Rails.root.join('public', PUBLIC_ASSET_DIR)
+  IMAGE_BUCKET = IMPRESS_S3.bucket('impress-asset-images')
+  IMAGE_PERMISSION = 'public-read'
+  IMAGE_HEADERS = {
+    'Cache-Control' => 'max-age=315360000',
+    'Content-Type' => 'image/png'
+  }
   NEOPETS_ASSET_SERVER = 'http://images.neopets.com'
+
   set_inheritance_column 'inheritance_type'
 
+  include SwfConverter
+  converts_swfs :size => [600, 600], :output_sizes => [[150, 150], [300, 300], [600, 600]]
+
+  def local_swf_path
+    LOCAL_ASSET_DIR.join(local_path_within_outfit_swfs)
+  end
+
+  def swf_image_path(size)
+    Rails.root.join('tmp', 'asset_images_before_upload', self.id.to_s, "#{size.join 'x'}.png")
+  end
+
+  def after_swf_conversion(images)
+    images.each do |size, path|
+      key = s3_key(size)
+      print "Uploading #{key}..."
+      IMAGE_BUCKET.put(
+        key,
+        File.open(path),
+        {}, # meta headers
+        IMAGE_PERMISSION, # permission
+        IMAGE_HEADERS
+      )
+      puts "done."
+
+      FileUtils.rm path
+    end
+  end
+
+  def s3_key(size)
+    URI.encode("#{s3_path}/#{size.join 'x'}.png")
+  end
+
+  def s3_path
+    "#{type}/#{s3_partition_path}#{self.id}"
+  end
+
+  PARTITION_COUNT = 3
+  PARTITION_DIGITS = 3
+  PARTITION_ID_LENGTH = PARTITION_COUNT * PARTITION_DIGITS
+  def s3_partition_path
+    (id / 10**PARTITION_DIGITS).to_s.rjust(PARTITION_ID_LENGTH, '0').tap do |id_str|
+      PARTITION_COUNT.times do |n|
+        id_str.insert(PARTITION_ID_LENGTH - (n * PARTITION_DIGITS), '/')
+      end
+    end
+  end
+
+  def convert_swf_if_not_converted!
+    if has_image?
+      false
+    else
+      convert_swf!
+      self.has_image = true
+      save!
+      true
+    end
+  end
+
+  def request_image_conversion!
+    if image_requested?
+      false
+    else
+      Resque.enqueue(AssetImageConversionRequest, self.type, self.id)
+      self.image_requested = true
+      save!
+      true
+    end
+  end
+
   attr_accessor :item
 
   has_one :contribution, :as => :contributed
@@ -40,11 +119,14 @@ class SwfAsset < ActiveRecord::Base
   def as_json(options={})
     json = {
       :id => id,
+      :type => type,
       :depth => depth,
       :body_id => body_id,
       :zone_id => zone_id,
       :zones_restrict => zones_restrict,
-      :is_body_specific => body_specific?
+      :is_body_specific => body_specific?,
+      :has_image => has_image?,
+      :s3_path => s3_path
     }
     if options[:for] == 'wardrobe'
       json[:local_path] = local_url
@@ -117,6 +199,10 @@ class SwfAsset < ActiveRecord::Base
     self.body_id = 0 if !self.body_specific? || (!self.new_record? && self.body_id_changed?)
   end
 
+  after_commit :on => :create do
+    Resque.enqueue(AssetImageConversionRequest::OnCreation, self.type, self.id)
+  end
+
   class DownloadError < Exception;end
 
   private

app/stylesheets/outfits/_edit.sass

@@ -1,4 +1,5 @@
 @import ../shared/jquery.jgrowl
+@import partials/wardrobe
 
 @import icon
 @import star
@@ -156,6 +157,16 @@ body.outfits-edit
     margin-bottom: 1em
     position: relative
     width: $preview-dimension
+    &.swf-adapter
+      #preview-image-container
+        display: none
+    &.image-adapter
+      #preview-swf-container
+        display: none
+  #preview-image-container
+    +wardrobe-image-wrapper
+    margin: 1em auto
+    position: relative
   #preview-swf-overlay
     +opacity(0)
     background: black
@@ -164,6 +175,18 @@ body.outfits-edit
     position: absolute
     top: 0
     width: 100%
+  #preview-images-pending
+    background: black
+    background: rgba(0, 0, 0, 0.75)
+    bottom: 0
+    color: white
+    font-size: 75%
+    padding: .5em
+    position: absolute
+    right: 0
+    z-index: 1000
+    &.waiting-on-0
+      display: none
   #preview-sidebar
     +border-radius(10px)
     border: 1px solid $soft-border-color

app/stylesheets/partials/_wardrobe.sass

@@ -0,0 +1,6 @@
+=wardrobe-image-wrapper
+  img
+    left: 0
+    position: absolute
+    top: 0
+

app/views/outfits/edit.html.haml

@@ -35,6 +35,7 @@
       #preview-swf-container
         %p Flash and Javascript (but not Java!) are required to preview outfits.
         %p If this message stays after the page is done loading, check those first.
+      #preview-image-container
     #preview-sidebar
       #outfit-not-found Outfit not found
       #save-success Outfit successfully saved

config/.gitignore

@@ -1,3 +1,5 @@
+aws_s3.yml
 database.yml
 deploy.rb
 openneo_auth.yml
+

config/aws_s3.sample.yml

@@ -0,0 +1,3 @@
+access_key_id: ACCESS_KEY_ID
+secret_access_key: SECRET_ACCESS_KEY
+

config/initializers/aws_s3.rb

@@ -0,0 +1,8 @@
+require 'yaml'
+
+config = YAML.load_file Rails.root.join('config', 'aws_s3.yml')
+access_key_id = config.delete 'access_key_id'
+secret_access_key = config.delete 'secret_access_key'
+
+IMPRESS_S3 = RightAws::S3.new access_key_id, secret_access_key, config
+

config/routes.rb

@@ -22,6 +22,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
   end
   resources :outfits, :only => [:show, :create, :update, :destroy]
   resources :pet_attributes, :only => [:index]
+  resources :swf_assets, :only => [:index, :show]
 
   match '/users/current-user/outfits' => 'outfits#index', :as => :current_user_outfits
 

db/migrate/20110514145602_add_has_image_to_swf_assets.rb

@@ -0,0 +1,10 @@
+class AddHasImageToSwfAssets < ActiveRecord::Migration
+  def self.up
+    add_column :swf_assets, :has_image, :boolean, :null => false, :default => false
+  end
+
+  def self.down
+    remove_column :swf_assets, :has_image
+  end
+end
+

db/migrate/20110515134542_add_image_requested_to_swf_assets.rb

@@ -0,0 +1,10 @@
+class AddImageRequestedToSwfAssets < ActiveRecord::Migration
+  def self.up
+    add_column :swf_assets, :image_requested, :boolean, :null => false, :default => false
+  end
+
+  def self.down
+    remove_column :swf_assets, :image_requested
+  end
+end
+

db/schema.rb

@@ -10,13 +10,13 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20110210222230) do
+ActiveRecord::Schema.define(:version => 20110515134542) do
 
   create_table "auth_servers", :force => true do |t|
     t.string "short_name", :limit => 10,       :null => false
     t.string "name",       :limit => 40,       :null => false
-    t.text   "icon",                     :null => false
-    t.text   "gateway",                  :null => false
+    t.text   "icon",       :limit => 16777215, :null => false
+    t.text   "gateway",    :limit => 16777215, :null => false
     t.string "secret",     :limit => 64,       :null => false
   end
 
@@ -27,6 +27,14 @@ ActiveRecord::Schema.define(:version => 20110210222230) do
     t.datetime "created_at",                    :null => false
   end
 
+  create_table "forums", :force => true do |t|
+    t.string   "name"
+    t.text     "description"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+    t.integer  "sort_index"
+  end
+
   create_table "item_outfit_relationships", :force => true do |t|
     t.integer  "item_id"
     t.integer  "outfit_id"
@@ -45,17 +53,17 @@ ActiveRecord::Schema.define(:version => 20110210222230) do
   add_index "login_cookies", ["user_id"], :name => "login_cookies_user_id"
 
   create_table "objects", :force => true do |t|
-    t.text     "zones_restrict",      :limit => 255, :null => false
-    t.text     "thumbnail_url",                      :null => false
+    t.text     "zones_restrict",                          :null => false
+    t.text     "thumbnail_url",       :limit => 16777215, :null => false
     t.string   "name",                :limit => 100,      :null => false
-    t.text     "description",                        :null => false
+    t.text     "description",         :limit => 16777215, :null => false
     t.string   "category",            :limit => 50
     t.string   "type",                :limit => 50
     t.string   "rarity",              :limit => 25
     t.integer  "rarity_index",        :limit => 2
     t.integer  "price",               :limit => 3,        :null => false
     t.integer  "weight_lbs",          :limit => 2
-    t.text     "species_support_ids"
+    t.text     "species_support_ids", :limit => 16777215
     t.boolean  "sold_in_mall",                            :null => false
     t.datetime "last_spidered"
   end
@@ -84,13 +92,13 @@ ActiveRecord::Schema.define(:version => 20110210222230) do
 
   create_table "pet_loads", :force => true do |t|
     t.string   "pet_name",   :limit => 20,       :null => false
-    t.text     "amf",                      :null => false
+    t.text     "amf",        :limit => 16777215, :null => false
     t.datetime "created_at",                     :null => false
   end
 
   create_table "pet_states", :force => true do |t|
     t.integer "pet_type_id",   :limit => 3, :null => false
-    t.text    "swf_asset_ids", :limit => 255, :null => false
+    t.text    "swf_asset_ids",              :null => false
   end
 
   add_index "pet_states", ["pet_type_id"], :name => "pet_states_pet_type_id"
@@ -113,6 +121,14 @@ ActiveRecord::Schema.define(:version => 20110210222230) do
   add_index "pets", ["name"], :name => "pets_name", :unique => true
   add_index "pets", ["pet_type_id"], :name => "pets_pet_type_id"
 
+  create_table "posts", :force => true do |t|
+    t.integer  "topic_id"
+    t.integer  "user_id"
+    t.text     "body"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
   create_table "schema_info", :id => false, :force => true do |t|
     t.integer "version", :default => 0, :null => false
   end
@@ -120,17 +136,28 @@ ActiveRecord::Schema.define(:version => 20110210222230) do
   create_table "swf_assets", :id => false, :force => true do |t|
     t.string   "type",            :limit => 7,                           :null => false
     t.integer  "id",              :limit => 3,                           :null => false
-    t.text     "url",                           :null => false
+    t.text     "url",             :limit => 16777215,                    :null => false
     t.integer  "zone_id",         :limit => 1,                           :null => false
-    t.text     "zones_restrict", :limit => 255, :null => false
+    t.text     "zones_restrict",                                         :null => false
     t.datetime "created_at",                                             :null => false
     t.integer  "body_id",         :limit => 2,                           :null => false
+    t.boolean  "has_image",                           :default => false, :null => false
+    t.boolean  "image_requested",                     :default => false, :null => false
   end
 
   add_index "swf_assets", ["body_id"], :name => "swf_assets_body_id_and_object_id"
   add_index "swf_assets", ["type", "id"], :name => "swf_assets_type_and_id"
   add_index "swf_assets", ["zone_id"], :name => "idx_swf_assets_zone_id"
 
+  create_table "topics", :force => true do |t|
+    t.string   "title"
+    t.integer  "user_id"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+    t.integer  "forum_id"
+    t.integer  "original_post_id"
+  end
+
   create_table "users", :force => true do |t|
     t.string   "name",                :limit => 20,                    :null => false
     t.integer  "auth_server_id",      :limit => 1,                     :null => false
@@ -139,6 +166,8 @@ ActiveRecord::Schema.define(:version => 20110210222230) do
     t.boolean  "beta",                              :default => false, :null => false
     t.string   "remember_token"
     t.datetime "remember_created_at"
+    t.boolean  "forum_admin",                       :default => false, :null => false
+    t.boolean  "forum_moderator"
   end
 
   create_table "zones", :force => true do |t|

lib/tasks/resque.rake

@@ -0,0 +1,4 @@
+require 'resque/tasks'
+
+task "resque:setup" => :environment
+

public/images/outfit/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

public/javascripts/outfits/edit.js

@@ -25,8 +25,9 @@ var Partial = {}, main_wardrobe,
   View = Wardrobe.getStandardView({
     Preview: {
       swf_url: '/swfs/preview.swf?v=0.12',
-      wrapper: $('#preview'),
-      placeholder: $('#preview-swf-container')
+      wrapper: $('#preview-swf'),
+      placeholder: $('#preview-swf-container'),
+      image_container: '#preview-image-container'
     }
   });
 
@@ -223,18 +224,6 @@ View.Fullscreen = function (wardrobe) {
   wardrobe.item_zone_sets.bind('update', fitSoon);
   wardrobe.pet_attributes.bind('update', fitSoon);
   fit();
-
-  var Konami=function(){var a={addEvent:function(b,c,d,e){if(b.addEventListener)b.addEventListener(c,d,false);else if(b.attachEvent){b["e"+c+d]=d;b[c+d]=function(){b["e"+c+d](window.event,e)};b.attachEvent("on"+c,b[c+d])}},input:"",pattern:"3838404037393739666513",load:function(b){this.addEvent(document,"keydown",function(c,d){if(d)a=d;a.input+=c?c.keyCode:event.keyCode;if(a.input.indexOf(a.pattern)!=-1){a.code(b);a.input=""}},this);this.iphone.load(b)},code:function(b){window.location=b},iphone:{start_x:0,start_y:0,stop_x:0,stop_y:0,tap:false,capture:false,keys:["UP","UP","DOWN","DOWN","LEFT","RIGHT","LEFT","RIGHT","TAP","TAP","TAP"],code:function(b){a.code(b)},load:function(b){a.addEvent(document,"touchmove",function(c){if(c.touches.length==1&&a.iphone.capture==true){c=c.touches[0];a.iphone.stop_x=c.pageX;a.iphone.stop_y=c.pageY;a.iphone.tap=false;a.iphone.capture=false;a.iphone.check_direction()}});a.addEvent(document,"touchend",function(){a.iphone.tap==true&&a.iphone.check_direction(b)},false);a.addEvent(document,"touchstart",function(c){a.iphone.start_x=c.changedTouches[0].pageX;a.iphone.start_y=c.changedTouches[0].pageY;a.iphone.tap=true;a.iphone.capture=true})},check_direction:function(b){x_magnitude=Math.abs(this.start_x-this.stop_x);y_magnitude=Math.abs(this.start_y-this.stop_y);x=this.start_x-this.stop_x<0?"RIGHT":"LEFT";y=this.start_y-this.stop_y<0?"DOWN":"UP";result=x_magnitude>y_magnitude?x:y;result=this.tap==true?"TAP":result;if(result==this.keys[0])this.keys=this.keys.slice(1,this.keys.length);this.keys.length==0&&this.code(b)}}};return a};
-  konami = new Konami();
-  konami.code = function () {
-    overrideFull = true;
-    $(document.body).removeClass('fullscreen');
-    preview_swf.removeAttr('style').css('visibility', 'visible');
-    preview_el.removeAttr('style');
-    wardrobe.search.setItemsByQuery(wardrobe.search.request.query, {offset: wardrobe.search.request.offset});
-    full = false;
-  }
-  konami.load();
 }
 
 View.Hash = function (wardrobe) {
@@ -825,6 +814,16 @@ View.PetTypeForm = function (wardrobe) {
   });
 }
 
+View.PreviewAdapterForm = function (wardrobe) {
+  var preview = wardrobe.views.Preview;
+  var Konami=function(){var a={addEvent:function(b,c,d,e){if(b.addEventListener)b.addEventListener(c,d,false);else if(b.attachEvent){b["e"+c+d]=d;b[c+d]=function(){b["e"+c+d](window.event,e)};b.attachEvent("on"+c,b[c+d])}},input:"",pattern:"3838404037393739666513",load:function(b){this.addEvent(document,"keydown",function(c,d){if(d)a=d;a.input+=c?c.keyCode:event.keyCode;if(a.input.indexOf(a.pattern)!=-1){a.code(b);a.input=""}},this);this.iphone.load(b)},code:function(b){window.location=b},iphone:{start_x:0,start_y:0,stop_x:0,stop_y:0,tap:false,capture:false,keys:["UP","UP","DOWN","DOWN","LEFT","RIGHT","LEFT","RIGHT","TAP","TAP","TAP"],code:function(b){a.code(b)},load:function(b){a.addEvent(document,"touchmove",function(c){if(c.touches.length==1&&a.iphone.capture==true){c=c.touches[0];a.iphone.stop_x=c.pageX;a.iphone.stop_y=c.pageY;a.iphone.tap=false;a.iphone.capture=false;a.iphone.check_direction()}});a.addEvent(document,"touchend",function(){a.iphone.tap==true&&a.iphone.check_direction(b)},false);a.addEvent(document,"touchstart",function(c){a.iphone.start_x=c.changedTouches[0].pageX;a.iphone.start_y=c.changedTouches[0].pageY;a.iphone.tap=true;a.iphone.capture=true})},check_direction:function(b){x_magnitude=Math.abs(this.start_x-this.stop_x);y_magnitude=Math.abs(this.start_y-this.stop_y);x=this.start_x-this.stop_x<0?"RIGHT":"LEFT";y=this.start_y-this.stop_y<0?"DOWN":"UP";result=x_magnitude>y_magnitude?x:y;result=this.tap==true?"TAP":result;if(result==this.keys[0])this.keys=this.keys.slice(1,this.keys.length);this.keys.length==0&&this.code(b)}}};return a};
+  konami = new Konami();
+  konami.code = function () {
+    preview.toggleAdapter();
+  }
+  konami.load();
+}
+
 View.Search = function (wardrobe) {
   var form_selector = '#preview-search-form', form = $(form_selector),
     item_set = new Partial.ItemSet(wardrobe, form_selector + ' ul'),

public/javascripts/wardrobe.js

@@ -76,8 +76,14 @@ function Wardrobe() {
     }
   }
 
-  function Asset(data) {
+  function Asset(newData) {
     var asset = this;
+
+    this.imageURL = function (size) {
+      return Wardrobe.IMAGE_CONFIG.base_url + this.s3_path + "/" + size[0] + "x" + size[1] + ".png";
+    }
+
+    this.update = function (data) {
       for(var key in data) {
         if(data.hasOwnProperty(key)) {
           asset[key] = data[key];
@@ -85,6 +91,9 @@ function Wardrobe() {
       }
     }
 
+    this.update(newData);
+  }
+
   function BiologyAsset(data) {
     Asset.apply(this, [data]);
     determineRestrictedZones.apply(this);
@@ -282,7 +291,8 @@ function Wardrobe() {
       // note: may contain duplicates - loop through assets, not these, for
       // best performance
       var restricted_zones = [],
-        restrictors = outfit.worn_items.concat(outfit.pet_state.assets);
+        restrictors = outfit.worn_items;
+      if(outfit.pet_state) restrictors = restrictors.concat(outfit.pet_state.assets);
       $.each(restrictors, function () {
         restricted_zones = restricted_zones.concat(this.restricted_zones);
       });
@@ -377,8 +387,9 @@ function Wardrobe() {
     }
 
     this.getVisibleAssets = function () {
-      var assets = this.pet_state.assets, restricted_zones = getRestrictedZones(),
+      var assets, restricted_zones = getRestrictedZones(),
         visible_assets = [];
+      assets = this.pet_state ? this.pet_state.assets : [];
       for(var i = 0; i < outfit.worn_items.length; i++) {
         assets = assets.concat(outfit.worn_items[i].getAssetsFitting(outfit.pet_type));
       }
@@ -719,8 +730,6 @@ function Wardrobe() {
     return pet_type;
   }
 
-  function SwfAsset() {}
-
   /*
   *
   * Controllers
@@ -1127,6 +1136,15 @@ function Wardrobe() {
   }
 }
 
+Wardrobe.IMAGE_CONFIG = {
+  base_url: "https://s3.amazonaws.com/impress-asset-images/",
+  sizes: [
+    [600, 600],
+    [300, 300],
+    [150, 150]
+  ]
+}
+
 Wardrobe.StandardPreview = {
   views_by_swf_id: {}
 };
@@ -1176,12 +1194,17 @@ Wardrobe.getStandardView = function (options) {
   }
 
   StandardView.Preview = function (wardrobe) {
+    var preview = this;
     var preview_el = $(options.Preview.wrapper),
-      preview_swf_placeholder = $(options.Preview.placeholder),
-      preview_swf_id = preview_swf_placeholder.attr('id'),
+      preview_swf_placeholder = $(options.Preview.placeholder);
+
+    function SWFAdapter() {
+      var preview_swf_id = preview_swf_placeholder.attr('id'),
         preview_swf,
         update_pending_flash = false;
 
+      preview_el.removeClass('image-adapter').addClass('swf-adapter');
+
       swfobject.embedSWF(
         options.Preview.swf_url,
         preview_swf_id,
@@ -1199,11 +1222,11 @@ Wardrobe.getStandardView = function (options) {
         preview_swf = document.getElementById(preview_swf_id);
         if(update_pending_flash) {
           update_pending_flash = false;
-        updateAssets();
+          this.updateAssets();
         }
       }
 
-    function updateAssets() {
+      this.updateAssets = function () {
         var assets, assets_for_swf;
         if(update_pending_flash) return false;
         if(preview_swf && preview_swf.setAssets) {
@@ -1213,10 +1236,148 @@ Wardrobe.getStandardView = function (options) {
           update_pending_flash = true;
         }
       }
+    }
+
+    function ImageAdapter() {
+      var pendingAssets = {}, pendingAssetIds = [], pendingInterval,
+        pendingAssetsCount = 0,
+        pendingMessageEl = $('<span/>', {id: 'preview-images-pending'}),
+        previewImageContainer = $(options.Preview.image_container);
+
+      var ASSET_PING_RATE = 5000;
+
+      preview_el.removeClass('swf-adapter').addClass('image-adapter');
+      pendingMessageEl.appendTo(previewImageContainer);
+
+      this.updateAssets = function () {
+        var assets = wardrobe.outfit.getVisibleAssets(), asset,
+          availableAssets = [];
+        pendingAssets = {};
+        pendingAssetsCount = 0;
+        clearView();
+        for(var i in assets) {
+          if(!assets.hasOwnProperty(i)) continue;
+          asset = assets[i];
+          if(asset.has_image) {
+            addToView(asset);
+          } else {
+            pendingAssets[asset.id] = asset;
+            pendingAssetsCount++;
+          }
+        }
+        updatePendingStatus();
+      }
+
+      function addToView(asset) {
+        $(
+          '<img/>',
+          {
+            css: {
+              zIndex: asset.depth
+            },
+            src: asset.imageURL(bestSize())
+          }
+        ).appendTo(previewImageContainer);
+      }
+
+      // TODO: choose new best size on window resize
+      function bestSize() {
+        var sizes = Wardrobe.IMAGE_CONFIG.sizes,
+          width = preview_el.width(), height = preview_el.height();
+        for(var i in sizes) {
+          if(sizes[i][0] < width && sizes[i][1] < height) return sizes[i];
+        }
+        return sizes[sizes.length - 1];
+      }
+
+      function clearView() {
+        previewImageContainer.children('img').remove();
+      }
+
+      function loadPendingAssets() {
+        var pendingAssetIds = {
+          biology: [],
+          object: []
+        }, asset;
+        for(var i in pendingAssets) {
+          if(pendingAssets.hasOwnProperty(i)) {
+            pendingAssetIds[pendingAssets[i].type].push(pendingAssets[i].id);
+          }
+        }
+        $.getJSON(
+          '/swf_assets.json',
+          {
+            ids: pendingAssetIds
+          },
+          function (assetsData) {
+            var assetData, asset;
+            for(var i in assetsData) {
+              assetData = assetsData[i];
+              if(assetData.has_image && pendingAssets.hasOwnProperty(assetData.id)) {
+                asset = pendingAssets[assetData.id];
+                asset.update(assetData);
+                delete pendingAssets[assetData.id];
+                pendingAssetsCount--;
+                addToView(asset);
+              }
+            }
+            updatePendingStatus();
+          }
+        );
+      }
+
+      function updateContainerSize() {
+        var size = bestSize();
+        previewImageContainer.css({
+          height: size[1],
+          width: size[0]
+        });
+      }
+
+      function updatePendingInterval() {
+        if(pendingAssetsCount) {
+          if(pendingInterval == null) {
+            pendingInterval = setInterval(loadPendingAssets, ASSET_PING_RATE);
+          }
+        } else {
+          if(pendingInterval != null) {
+            clearInterval(pendingInterval);
+            pendingInterval = null;
+          }
+        }
+      }
+
+      function updatePendingMessage() {
+        pendingMessageEl.text("Waiting on " + pendingAssetsCount + " images").
+          attr("className", "waiting-on-" + pendingAssetsCount);
+      }
+
+      function updatePendingStatus() {
+        updatePendingInterval();
+        updatePendingMessage();
+      }
+
+      updateContainerSize();
+      $(window).resize(updateContainerSize);
+    }
+
+    this.adapter = new SWFAdapter();
+
+    function updateAssets() {
+      preview.adapter.updateAssets();
+    }
 
     wardrobe.outfit.bind('updateWornItems', updateAssets);
     wardrobe.outfit.bind('updateItemAssets', updateAssets);
     wardrobe.outfit.bind('updatePetState', updateAssets);
+
+    this.useSWFAdapter = function () { preview.adapter = new SWFAdapter(); updateAssets(); }
+    this.useImageAdapter = function () { preview.adapter = new ImageAdapter(); updateAssets(); }
+    this.toggleAdapter = function () {
+      var nextAdapter = preview.adapter.constructor == SWFAdapter ? ImageAdapter : SWFAdapter;
+      preview.adapter = new nextAdapter();
+      updateAssets();
+    }
   }
 
   window.previewSWFIsReady = function (id) {