specify size on image download

app/stylesheets/outfits/_edit.sass

@@ -230,8 +230,15 @@ body.outfits-edit
         border-top: 0
   #preview-download-image
     display: none
-    font-size: 85%
+    margin: 1em auto
-    margin: 0 auto
+    h3
+      font-size: 125%
+      margin-bottom: .5em
+    ul
+      list-style: none
+    button
+      font-size: 75%
+      width: 100%
   #preview-mode-note, #report-broken-image
     display: block
     font-size: 75%

app/views/outfits/edit.html.haml

@@ -42,11 +42,19 @@
           - if can_use_image_mode?
             %li#preview-mode-image Image
         - if can_use_image_mode?
-          %button#preview-download-image Download
           = link_to 'Image mode FAQ', image_mode_path,
             :id => 'preview-mode-note', :target => '_blank'
           = link_to 'Broken image?', '#', :id => 'report-broken-image',
             :target => '_blank', 'data-base-url' => new_broken_image_report_path
+          #preview-download-image
+            %h3 Download
+            %ul
+              %li
+                %button{'data-download-size' => 'small'} Small
+              %li
+                %button{'data-download-size' => 'medium'} Medium
+              %li
+                %button{'data-download-size' => 'large'} Large
         - else
           = link_to(donate_path, :id => 'preview-mode-note', :target => '_blank') do
             %strong Image mode

public/javascripts/outfits/edit.js

@@ -851,8 +851,15 @@ View.PreviewAdapterForm = function (wardrobe) {
     activate(imageToggle, 'image', 'flash');
   }
 
-  $('#preview-download-image').click(function () {
+  var DOWNLOAD_SIZES = {
-    preview.adapter.saveImage();
+    'small': [150, 150],
+    'medium': [300, 300],
+    'large': [600, 600]
+  };
+  
+  $('#preview-download-image button').click(function () {
+    var size = DOWNLOAD_SIZES[this.getAttribute('data-download-size')];
+    preview.adapter.saveImage(size);
   });
 
   if(document.createElement('canvas').getContext) {

public/javascripts/wardrobe.js

@@ -1285,7 +1285,7 @@ Wardrobe.getStandardView = function (options) {
         ).appendTo(document.body);
       }
 
-      this.saveImage = function () {
+      this.saveImage = function (size) {
         /*
           Since browser security policy denies access to canvas image data
           if we include assets from other domains, and our assets are on S3,
@@ -1298,15 +1298,21 @@ Wardrobe.getStandardView = function (options) {
           It then prompts the user to download a WIDTHxHEIGHT image of the
           IMAGEURLs layered in order.
         */
-        var size = bestSize();
         
         var url = Wardrobe.IMAGE_CONFIG.base_url + "preview_export.html?" +
           size[0] + "," + size[1];        
           
-        previewImageContainer.children('img').each(function () {
+        // Get a copy of the visible assets, then sort them in ascending zone
-          url += "," + encodeURIComponent(this.src);
+        // order.
+        var assets = wardrobe.outfit.getVisibleAssets().slice(0);
+        assets.sort(function (a, b) {
+          return a.zone_id - b.zone_id;
         });
 
+        for(var i = 0; i < assets.length; i++) {
+          url += "," + encodeURIComponent(assets[i].imageURL(size));
+        }
+
         exportIframe.attr('src', url);
       }