plupload-rails 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4edc4a0e6b78a167279855c9048c01f6f5bb29ca
-  data.tar.gz: 1474250f54c612c5f2802262119812cc8482cb3e
+  metadata.gz: f0a4b034445c763d70d1ac0ed530bd21f3847bca
+  data.tar.gz: 4183a59bcb2e0edd678057a3852c7c12418379ca
 SHA512:
-  metadata.gz: 7b2178e38ff94c99e6cdb75bb3b93ca37e292388ca8b2b47716e32344c2f4a0af42ad904881d7668316ed46557644fa748e841ccd02a003f0fd9481e5c3faf5b
-  data.tar.gz: f4693bd8457cb245978b2376eeb5962f61aca930567525224675966fae25bf2d98780b016ab2c07c7415e76ca8c75a707ecb7e909ae4c856c23312c95f0ae351
+  metadata.gz: 2dadab599c2c00f1fb5a5ff0fabf8dda446011e9ad939eb4b69144ddbfa31f0a5f0b4ac3407bf1e926860cf516b05b9ed3b89b9bcac626a846fa64128e99a623
+  data.tar.gz: 35557515d0e32c73fdcc0c662d226fb0faa66b6735fcc91df8a8d9771445bab23dcd2c1c10b9d001f9e5ed3ce968f642b7fff1189adb749d7bd2975c63ec9489

data/README.md

@@ -9,9 +9,9 @@ Install
 
 Just add it got your Gemfile:
 
-
-    gem 'plupload-rails'
-
+```ruby
+gem 'plupload-rails'
+```
 
 Quick Start
 --
@@ -31,45 +31,44 @@ Add to your application.js:
     //= require jquery.plupload.queue
 
 
-Add to your application.scss:
-
-    @import "jquery.plupload.queue";
+Add to your application stylesheet:
 
+    //= require jquery.plupload.queue
 
-Alternatively (if you're not using SASS or SCSS), add the require to your application.css:
-
-    = require jquery.plupload.queue
 
 Simple example Haml for your views:
 
-    div#uploader
-    :javascript
-      $(function(){
-        $("#uploader").pluploadQueue({
-          runtimes: 'gears,flash,silverlight,browserplus,html5',
-          url: '#{images_path}',
-          multipart_params: {
-            '#{request_forgery_protection_token}': '#{form_authenticity_token}',
-            '#{Rails.application.config.session_options[:key]}': '#{request.session_options[:id]}'
-          }
-        });
-      });
+```haml
+div#uploader
+:javascript
+  $(function(){
+    $("#uploader").pluploadQueue({
+      runtimes: 'gears,flash,silverlight,browserplus,html5',
+      url: '#{images_path}',
+      multipart_params: {
+        '#{request_forgery_protection_token}': '#{form_authenticity_token}',
+        '#{Rails.application.config.session_options[:key]}': '#{request.session_options[:id]}'
+      }
+    });
+  });
+```
 
 And the same in ERB:
 
-    <script>
-      $(function(){
-        $("#uploader").pluploadQueue({
-          runtimes: 'html5,flash,silverlight',
-          url: '<%= sink_hole_path %>',
-          multipart_params: {
-            '<%= request_forgery_protection_token %>': '<%= form_authenticity_token %>',
-            '<%= Rails.application.config.session_options[:key] %>': '<%= request.session_options[:id] %>'
-          }
-        });
-      });
-    </script>
-
+```erb
+<script>
+  $(function(){
+    $("#uploader").pluploadQueue({
+      runtimes: 'html5,flash,silverlight',
+      url: '<%= sink_hole_path %>',
+      multipart_params: {
+        '<%= request_forgery_protection_token %>': '<%= form_authenticity_token %>',
+        '<%= Rails.application.config.session_options[:key] %>': '<%= request.session_options[:id] %>'
+      }
+    });
+  });
+</script>
+```
 
 Updating
 --
@@ -81,4 +80,4 @@ License
 
 Dual licensed under the [GPLv2 license](GPL-LICENSE.txt) and the [MIT license](MIT-LICENSE.txt). Plupload itself (including the JS, CSS, images, the Silverlight and Flash components) is licensed under GPLv2, unless you have acquired a [commercial license](http://plupload.com/license.php).
 
-Copyright © 2011-2013 Corin Langosch and contributors
+Copyright © 2011-2013 [Corin Langosch](http://www.corinlangosch.com) and contributors

data/lib/plupload/rails/version.rb

@@ -1,6 +1,6 @@
 module Plupload
-  VERSION = "2.0.0"
+  VERSION = "2.1.1"
   module Rails
-    VERSION = "1.1.0"
+    VERSION = "1.2.0"
   end
 end

data/vendor/assets/javascripts/jquery.plupload.queue.js

@@ -39,7 +39,7 @@ used as it is.
 	var uploader = $('#uploader').pluploadQueue();
 
 	uploader.bind('FilesAdded', function() {
-
+		
 		// Autostart
 		setTimeout(uploader.start, 1); // "detach" from the main thread
 	});
@@ -73,7 +73,7 @@ used as it is.
 	@param {Boolean} [settings.rename=false] Enable ability to rename files in the queue.
 	@param {Boolean} [settings.multiple_queues=true] Re-activate the widget after each upload procedure.
 */
-(function($) {
+(function($, o) {
 	var uploaders = {};
 
 	function _(str) {
@@ -154,11 +154,18 @@ used as it is.
 				contents_bak = target.html();
 				renderUI(id, target);
 
-				uploader = new plupload.Uploader($.extend({
+				settings = $.extend({
 					dragdrop : true,
 					browse_button : id + '_browse',
 					container : id
-				}, settings));
+				}, settings);
+
+				// Enable drag/drop (see PostInit handler as well)
+				if (settings.dragdrop) {
+					settings.drop_element = id + '_filelist';
+				}
+
+				uploader = new plupload.Uploader(settings);
 
 				uploaders[id] = uploader;
 
@@ -183,7 +190,7 @@ used as it is.
 
 					var icon = $('#' + file.id).attr('class', actionClass).find('a').css('display', 'block');
 					if (file.hint) {
-						icon.attr('title', file.hint);
+						icon.attr('title', file.hint);	
 					}
 				}
 
@@ -191,7 +198,7 @@ used as it is.
 					$('span.plupload_total_status', target).html(uploader.total.percent + '%');
 					$('div.plupload_progress_bar', target).css('width', uploader.total.percent + '%');
 					$('span.plupload_upload_status', target).html(
-						_('Uploaded %d/%d files').replace(/%d\/%d/, uploader.total.uploaded+'/'+uploader.files.length)
+						o.sprintf(_('Uploaded %d/%d files'), uploader.total.uploaded, uploader.files.length)
 					);
 				}
 
@@ -208,7 +215,7 @@ used as it is.
 
 							inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_name" value="' + plupload.xmlEncode(file.name) + '" />';
 							inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_status" value="' + (file.status == plupload.DONE ? 'done' : 'failed') + '" />';
-
+	
 							inputCount++;
 
 							$('#' + id + '_count').val(inputCount);
@@ -240,7 +247,7 @@ used as it is.
 					if (uploader.total.queued === 0) {
 						$('span.plupload_add_text', target).html(_('Add Files'));
 					} else {
-						$('span.plupload_add_text', target).html(_('%d files queued').replace(/%d/, uploader.total.queued));
+						$('span.plupload_add_text', target).html(o.sprintf(_('%d files queued'), uploader.total.queued));
 					}
 
 					$('a.plupload_start', target).toggleClass('plupload_disabled', uploader.files.length == (uploader.total.uploaded + uploader.total.failed));
@@ -301,12 +308,6 @@ used as it is.
 						});
 					}
 
-
-					// Enable drag/drop (see PostInit handler as well)
-					if (up.settings.dragdrop) {
-						up.settings.drop_element = id + '_filelist';
-					}
-
 					$('#' + id + '_container').attr('title', 'Using runtime: ' + res.runtime);
 
 					$('a.plupload_start', target).click(function(e) {
@@ -342,7 +343,7 @@ used as it is.
 						if (err.code == plupload.FILE_EXTENSION_ERROR) {
 							alert(_("Error: Invalid file extension:") + " " + file.name);
 						}
-
+						
 						file.hint = message;
 						$('#' + file.id).attr('class', 'plupload_failed').find('a').css('display', 'block').attr('title', message);
 					}
@@ -385,7 +386,16 @@ used as it is.
 					}
 				});
 
-				uploader.bind('QueueChanged', updateList);
+				uploader.bind('FilesAdded', updateList);
+
+				uploader.bind('FilesRemoved', function() {
+					// since the whole file list is redrawn for every change in the queue
+					// we need to scroll back to the file removal point to avoid annoying
+					// scrolling to the bottom bug (see #926)
+					var scrollTop = $('#' + id + '_filelist').scrollTop();
+					updateList();
+					$('#' + id + '_filelist').scrollTop(scrollTop);
+				});
 
 				uploader.bind('FileUploaded', function(up, file) {
 					handleStatus(file);
@@ -411,4 +421,4 @@ used as it is.
 			return uploaders[$(this[0]).attr('id')];
 		}
 	};
-})(jQuery);
+})(jQuery, mOxie);

data/vendor/assets/javascripts/jquery.ui.plupload.js

@@ -12,7 +12,7 @@
  *	jquery.ui.widget.js
  *	jquery.ui.button.js
  *	jquery.ui.progressbar.js
- *
+ *	
  * Optionally:
  *	jquery.ui.sortable.js
  */
@@ -22,11 +22,11 @@
 /**
 jQuery UI based implementation of the Plupload API - multi-runtime file uploading API.
 
-To use the widget you must include _jQuery_ and _jQuery UI_ bundle (including `ui.core`, `ui.widget`, `ui.button`,
+To use the widget you must include _jQuery_ and _jQuery UI_ bundle (including `ui.core`, `ui.widget`, `ui.button`, 
 `ui.progressbar` and `ui.sortable`).
 
-In general the widget is designed the way that you do not usually need to do anything to it after you instantiate it.
-But! You still can intervenue, to some extent, in case you need to. Although, due to the fact that widget is based on
+In general the widget is designed the way that you do not usually need to do anything to it after you instantiate it. 
+But! You still can intervenue, to some extent, in case you need to. Although, due to the fact that widget is based on 
 _jQuery UI_ widget factory, there are some specifics. See examples below for more details.
 
 @example
@@ -58,7 +58,7 @@ _jQuery UI_ widget factory, there are some specifics. See examples below for mor
 @example
 	// Subscribing to the events...
 	// ... on initialization:
-	$('#uploader').plupload({
+	$('#uploader').plupload({ 
 		...
 		viewchanged: function(event, args) {
 			// stuff ...
@@ -98,10 +98,10 @@ _jQuery UI_ widget factory, there are some specifics. See examples below for mor
 	@param {Boolean} [settings.dragdrop=true] Enable ability to add file to the queue by drag'n'dropping them from the desktop.
 	@param {Boolean} [settings.rename=false] Enable ability to rename files in the queue.
 	@param {Boolean} [settings.sortable=false] Enable ability to sort files in the queue, changing their uploading priority.
-	@param {Object} [settings.buttons] Control the visibility of functional buttons.
+	@param {Object} [settings.buttons] Control the visibility of functional buttons. 
 		@param {Boolean} [settings.buttons.browse=true] Display browse button.
 		@param {Boolean} [settings.buttons.start=true] Display start button.
-		@param {Boolean} [settings.buttons.stop=true] Display stop button.
+		@param {Boolean} [settings.buttons.stop=true] Display stop button. 
 	@param {Object} [settings.views] Control various views of the file queue.
 		@param {Boolean} [settings.views.list=true] Enable list view.
 		@param {Boolean} [settings.views.thumbs=false] Enable thumbs view.
@@ -110,7 +110,7 @@ _jQuery UI_ widget factory, there are some specifics. See examples below for mor
 	@param {Boolean} [settings.multiple_queues=true] Re-activate the widget after each upload procedure.
 	@param {Number} [settings.max_file_count=0] Limit the number of files user is able to upload in one go, autosets _multiple_queues_ to _false_ (default is 0 - no limit).
 */
-(function(window, document, plupload, $) {
+(function(window, document, plupload, o, $) {
 
 /**
 Dispatched when the widget is initialized and ready.
@@ -195,13 +195,13 @@ Dispatched when error of some kind is detected.
 	@param {Enum} status Status constant matching the plupload states QUEUED, UPLOADING, FAILED, DONE.
 */
 
-var uploaders = {};
-
+var uploaders = {};	
+	
 function _(str) {
 	return plupload.translate(str) || str;
 }
 
-function renderUI(obj) {
+function renderUI(obj) {		
 	obj.id = obj.attr('id');
 
 	obj.html(
@@ -213,8 +213,8 @@ function renderUI(obj) {
 						'<div class="plupload_header_title">' + _('Select files') + '</div>' +
 						'<div class="plupload_header_text">' + _('Add files to the upload queue and click the start button.') + '</div>' +
 						'<div class="plupload_view_switch">' +
-							'<input type="radio" id="'+obj.id+'_view_list" name="view_mode_'+obj.id+'" checked="checked" /> <label class="plupload_button" for="'+obj.id+'_view_list" data-view="list">' + _('List') + '</label>' +
-							'<input type="radio" id="'+obj.id+'_view_thumbs" name="view_mode_'+obj.id+'" /> <label class="plupload_button"  for="'+obj.id+'_view_thumbs" data-view="thumbs">' + _('Thumbnails') + '</label>' +
+							'<input type="radio" id="'+obj.id+'_view_list" name="view_mode_'+obj.id+'" checked="checked" /><label class="plupload_button" for="'+obj.id+'_view_list" data-view="list">' + _('List') + '</label>' +
+							'<input type="radio" id="'+obj.id+'_view_thumbs" name="view_mode_'+obj.id+'" /><label class="plupload_button"  for="'+obj.id+'_view_thumbs" data-view="thumbs">' + _('Thumbnails') + '</label>' +
 						'</div>' +
 					'</div>' +
 				'</div>' +
@@ -233,7 +233,7 @@ function renderUI(obj) {
 					'<ul class="plupload_filelist_content"> </ul>' +
 					'<div class="plupload_clearer">&nbsp;</div>' +
 				'</div>' +
-
+					
 				'<table class="plupload_filelist plupload_filelist_footer ui-widget-header">' +
 				'<tr>' +
 					'<td class="plupload_cell plupload_file_name">' +
@@ -269,22 +269,20 @@ function renderUI(obj) {
 $.widget("ui.plupload", {
 
 	widgetEventPrefix: '',
-
-	imgs: {},
-
+	
 	contents_bak: '',
-
+		
 	options: {
 		browse_button_hover: 'ui-state-hover',
 		browse_button_active: 'ui-state-active',
-
+		
 		// widget specific
-		dragdrop : true,
+		dragdrop : true, 
 		multiple_queues: true, // re-use widget by default
 		buttons: {
 			browse: true,
 			start: true,
-			stop: true
+			stop: true	
 		},
 		views: {
 			list: true,
@@ -297,9 +295,9 @@ $.widget("ui.plupload", {
 		rename: false,
 		max_file_count: 0 // unlimited
 	},
-
+	
 	FILE_COUNT_ERROR: -9001,
-
+	
 	_create: function() {
 		var id = this.element.attr('id');
 		if (!id) {
@@ -307,30 +305,30 @@ $.widget("ui.plupload", {
 			this.element.attr('id', id);
 		}
 		this.id = id;
-
+				
 		// backup the elements initial state
 		this.contents_bak = this.element.html();
 		renderUI(this.element);
-
+		
 		// container, just in case
-		this.container = $('.plupload_container', this.element).attr('id', id + '_container');
+		this.container = $('.plupload_container', this.element).attr('id', id + '_container');	
 
 		this.content = $('.plupload_content', this.element);
-
+		
 		if ($.fn.resizable) {
-			this.container.resizable({
+			this.container.resizable({ 
 				handles: 's',
 				minHeight: 300
 			});
 		}
-
+		
 		// list of files, may become sortable
 		this.filelist = $('.plupload_filelist_content', this.container)
 			.attr({
 				id: id + '_filelist',
 				unselectable: 'on'
 			});
-
+		
 
 		// buttons
 		this.browse_button = $('.plupload_add', this.container).attr('id', id + '_browse');
@@ -338,22 +336,22 @@ $.widget("ui.plupload", {
 		this.stop_button = $('.plupload_stop', this.container).attr('id', id + '_stop');
 		this.thumbs_switcher = $('#' + id + '_view_thumbs');
 		this.list_switcher = $('#' + id + '_view_list');
-
+		
 		if ($.ui.button) {
 			this.browse_button.button({
 				icons: { primary: 'ui-icon-circle-plus' },
 				disabled: true
 			});
-
+			
 			this.start_button.button({
 				icons: { primary: 'ui-icon-circle-arrow-e' },
 				disabled: true
 			});
-
+			
 			this.stop_button.button({
 				icons: { primary: 'ui-icon-circle-close' }
 			});
-
+      
 			this.list_switcher.button({
 				text: false,
 				icons: { secondary: "ui-icon-grip-dotted-horizontal" }
@@ -364,21 +362,21 @@ $.widget("ui.plupload", {
 				icons: { secondary: "ui-icon-image" }
 			});
 		}
-
+		
 		// progressbar
-		this.progressbar = $('.plupload_progress_container', this.container);
-
+		this.progressbar = $('.plupload_progress_container', this.container);		
+		
 		if ($.ui.progressbar) {
 			this.progressbar.progressbar();
 		}
-
+		
 		// counter
 		this.counter = $('.plupload_count', this.element)
 			.attr({
 				id: id + '_count',
 				name: id + '_count'
 			});
-
+					
 		// initialize uploader instance
 		this._initUploader();
 	},
@@ -387,7 +385,7 @@ $.widget("ui.plupload", {
 		var self = this
 		, id = this.id
 		, uploader
-		, options = {
+		, options = { 
 			container: id + '_buttons',
 			browse_button: id + '_browse'
 		}
@@ -400,51 +398,48 @@ $.widget("ui.plupload", {
 			options.drop_element = this.id + '_dropbox';
 		}
 
+		uploader = this.uploader = uploaders[id] = new plupload.Uploader($.extend(this.options, options));
+
 		if (self.options.views.thumbs) {
-			if (o.typeOf(self.options.required_features) === 'string') {
-				self.options.required_features += ",display_media";
-			} else {
-				self.options.required_features = "display_media";
-			}
+			uploader.settings.required_features.display_media = true;
 		}
 
-		uploader = this.uploader = uploaders[id] = new plupload.Uploader($.extend(this.options, options));
 
-		uploader.bind('Error', function(up, err) {
+		uploader.bind('Error', function(up, err) {			
 			var message, details = "";
 
 			message = '<strong>' + err.message + '</strong>';
-
+				
 			switch (err.code) {
 				case plupload.FILE_EXTENSION_ERROR:
 					details = o.sprintf(_("File: %s"), err.file.name);
 					break;
-
+				
 				case plupload.FILE_SIZE_ERROR:
-					details = o.sprintf(_("File: %f, size: %s, max file size: %m"), err.file.name, err.file.size, plupload.parseSize(self.options.max_file_size));
+					details = o.sprintf(_("File: %s, size: %d, max file size: %d"), err.file.name, err.file.size, plupload.parseSize(self.options.max_file_size));
 					break;
 
 				case plupload.FILE_DUPLICATE_ERROR:
 					details = o.sprintf(_("%s already present in the queue."), err.file.name);
 					break;
-
+					
 				case self.FILE_COUNT_ERROR:
 					details = o.sprintf(_("Upload element accepts only %d file(s) at a time. Extra files were stripped."), self.options.max_file_count);
 					break;
-
+				
 				case plupload.IMAGE_FORMAT_ERROR :
 					details = _("Image format either wrong or not supported.");
-					break;
-
+					break;	
+				
 				case plupload.IMAGE_MEMORY_ERROR :
 					details = _("Runtime ran out of available memory.");
 					break;
-
+				
 				/* // This needs a review
 				case plupload.IMAGE_DIMENSIONS_ERROR :
 					details = o.sprintf(_('Resoultion out of boundaries! <b>%s</b> runtime supports images only up to %wx%hpx.'), up.runtime, up.features.maxWidth, up.features.maxHeight);
 					break;	*/
-
+											
 				case plupload.HTTP_ERROR:
 					details = _("Upload URL might be wrong or doesn't exist.");
 					break;
@@ -464,8 +459,8 @@ $.widget("ui.plupload", {
 			}
 		});
 
-
-		uploader.bind('PostInit', function(up) {
+		
+		uploader.bind('PostInit', function(up) {	
 			// all buttons are optional, so they can be disabled and hidden
 			if (!self.options.buttons.browse) {
 				self.browse_button.button('disable').hide();
@@ -473,17 +468,17 @@ $.widget("ui.plupload", {
 			} else {
 				self.browse_button.button('enable');
 			}
-
+			
 			if (!self.options.buttons.start) {
 				self.start_button.button('disable').hide();
-			}
-
+			} 
+			
 			if (!self.options.buttons.stop) {
 				self.stop_button.button('disable').hide();
 			}
-
+				
 			if (!self.options.unique_names && self.options.rename) {
-				self._enableRenaming();
+				self._enableRenaming();	
 			}
 
 			if (self.options.dragdrop && up.features.dragdrop) {
@@ -491,7 +486,7 @@ $.widget("ui.plupload", {
 			}
 
 			self._enableViewSwitcher();
-
+			
 			self.start_button.click(function(e) {
 				if (!$(this).button('option', 'disabled')) {
 					self.start();
@@ -506,8 +501,8 @@ $.widget("ui.plupload", {
 
 			self._trigger('ready', null, { up: up });
 		});
-
-
+		
+		
 		// check if file count doesn't exceed the limit
 		if (self.options.max_file_count) {
 			self.options.multiple_queues = false; // one go only
@@ -516,10 +511,10 @@ $.widget("ui.plupload", {
 				var selectedCount = selectedFiles.length
 				, extraCount = up.files.length + selectedCount - self.options.max_file_count
 				;
-
+				
 				if (extraCount > 0) {
 					selectedFiles.splice(selectedCount - extraCount, extraCount);
-
+					
 					up.trigger('Error', {
 						code : self.FILE_COUNT_ERROR,
 						message : _('File count error.')
@@ -527,14 +522,24 @@ $.widget("ui.plupload", {
 				}
 			});
 		}
-
-		// uploader internal events must run first
+		
+		// uploader internal events must run first 
 		uploader.init();
 
+		uploader.bind('FileFiltered', function(up, file) {
+			self._addFiles(file);
+		});
+		
 		uploader.bind('FilesAdded', function(up, files) {
-			self._addFiles(files);
 			self._trigger('selected', null, { up: up, files: files } );
 
+			// re-enable sortable
+			if (self.options.sortable && $.ui.sortable) {
+				self._enableSortingList();	
+			}
+
+			self._trigger('updatelist', null, { filelist: self.filelist });
+			
 			if (self.options.autostart) {
 				// set a little delay to make sure that QueueChanged triggered by the core has time to complete
 				setTimeout(function() {
@@ -542,48 +547,43 @@ $.widget("ui.plupload", {
 				}, 10);
 			}
 		});
-
+		
 		uploader.bind('FilesRemoved', function(up, files) {
 			self._trigger('removed', null, { up: up, files: files } );
 		});
-
-		uploader.bind('QueueChanged', function() {
-			self._handleState();
-			self._updateTotalProgress();
-		});
-
-		uploader.bind('StateChanged', function() {
+		
+		uploader.bind('QueueChanged StateChanged', function() {
 			self._handleState();
 		});
-
+		
 		uploader.bind('UploadFile', function(up, file) {
 			self._handleFileStatus(file);
 		});
-
+		
 		uploader.bind('FileUploaded', function(up, file) {
 			self._handleFileStatus(file);
 			self._trigger('uploaded', null, { up: up, file: file } );
 		});
-
+		
 		uploader.bind('UploadProgress', function(up, file) {
 			self._handleFileStatus(file);
 			self._updateTotalProgress();
 			self._trigger('progress', null, { up: up, file: file } );
 		});
-
+		
 		uploader.bind('UploadComplete', function(up, files) {
-			self._addFormFields();
+			self._addFormFields();		
 			self._trigger('complete', null, { up: up, files: files } );
 		});
 	},
 
-
+	
 	_setOption: function(key, value) {
 		var self = this;
 
-		if (key == 'buttons' && typeof(value) == 'object') {
+		if (key == 'buttons' && typeof(value) == 'object') {	
 			value = $.extend(self.options.buttons, value);
-
+			
 			if (!value.browse) {
 				self.browse_button.button('disable').hide();
 				self.uploader.disableBrowse(true);
@@ -591,24 +591,24 @@ $.widget("ui.plupload", {
 				self.browse_button.button('enable').show();
 				self.uploader.disableBrowse(false);
 			}
-
+			
 			if (!value.start) {
 				self.start_button.button('disable').hide();
 			} else {
 				self.start_button.button('enable').show();
 			}
-
+			
 			if (!value.stop) {
 				self.stop_button.button('disable').hide();
 			} else {
-				self.start_button.button('enable').show();
+				self.start_button.button('enable').show();	
 			}
 		}
-
-		self.uploader.settings[key] = value;
+		
+		self.uploader.settings[key] = value;	
 	},
 
-
+	
 	/**
 	Start upload. Triggers `start` event.
 
@@ -619,7 +619,7 @@ $.widget("ui.plupload", {
 		this._trigger('start', null, { up: this.uploader });
 	},
 
-
+	
 	/**
 	Stop upload. Triggers `stop` event.
 
@@ -652,7 +652,7 @@ $.widget("ui.plupload", {
 		this.uploader.disableBrowse(true);
 	},
 
-
+	
 	/**
 	Retrieve file by it's unique id.
 
@@ -662,18 +662,18 @@ $.widget("ui.plupload", {
 	*/
 	getFile: function(id) {
 		var file;
-
+		
 		if (typeof id === 'number') {
-			file = this.uploader.files[id];
+			file = this.uploader.files[id];	
 		} else {
-			file = this.uploader.getFile(id);
+			file = this.uploader.getFile(id);	
 		}
 		return file;
 	},
 
 	/**
 	Return array of files currently in the queue.
-
+	
 	@method getFiles
 	@return {Array} Array of files in the queue represented by plupload.File objects
 	*/
@@ -681,7 +681,7 @@ $.widget("ui.plupload", {
 		return this.uploader.files;
 	},
 
-
+	
 	/**
 	Remove the file from the queue.
 
@@ -695,7 +695,7 @@ $.widget("ui.plupload", {
 		this._removeFiles(file);
 	},
 
-
+	
 	/**
 	Clear the file queue.
 
@@ -739,12 +739,12 @@ $.widget("ui.plupload", {
 	*/
 	notify: function(type, message) {
 		var popup = $(
-			'<div class="plupload_message">' +
+			'<div class="plupload_message">' + 
 				'<span class="plupload_message_close ui-icon ui-icon-circle-close" title="'+_('Close')+'"></span>' +
 				'<p><span class="ui-icon"></span>' + message + '</p>' +
 			'</div>'
 		);
-
+					
 		popup
 			.addClass('ui-state-' + (type === 'error' ? 'error' : 'highlight'))
 			.find('p .ui-icon')
@@ -752,14 +752,14 @@ $.widget("ui.plupload", {
 				.end()
 			.find('.plupload_message_close')
 				.click(function() {
-					popup.remove();
+					popup.remove();	
 				})
 				.end();
-
+		
 		$('.plupload_header', this.container).append(popup);
 	},
 
-
+	
 	/**
 	Destroy the widget, the uploader, free associated resources and bring back original html.
 
@@ -767,29 +767,29 @@ $.widget("ui.plupload", {
 	*/
 	destroy: function() {
 		this._removeFiles([].slice.call(this.uploader.files));
-
+		
 		// destroy uploader instance
 		this.uploader.destroy();
 
 		// unbind all button events
 		$('.plupload_button', this.element).unbind();
-
+		
 		// destroy buttons
 		if ($.ui.button) {
 			$('.plupload_add, .plupload_start, .plupload_stop', this.container)
 				.button('destroy');
 		}
-
+		
 		// destroy progressbar
 		if ($.ui.progressbar) {
-			this.progressbar.progressbar('destroy');
+			this.progressbar.progressbar('destroy');	
 		}
-
+		
 		// destroy sortable behavior
 		if ($.ui.sortable && this.options.sortable) {
 			$('tbody', this.filelist).sortable('destroy');
 		}
-
+		
 		// restore the elements initial state
 		this.element
 			.empty()
@@ -798,19 +798,19 @@ $.widget("ui.plupload", {
 
 		$.Widget.prototype.destroy.apply(this);
 	},
-
-
+	
+	
 	_handleState: function() {
 		var up = this.uploader;
-
+						
 		if (up.state === plupload.STARTED) {
 			$(this.start_button).button('disable');
-
+								
 			$([])
 				.add(this.stop_button)
 				.add('.plupload_started')
 					.removeClass('plupload_hidden');
-
+							
 			$('.plupload_upload_status', this.element).html(o.sprintf(_('Uploaded %d/%d files'), up.total.uploaded, up.files.length));
 			$('.plupload_header_content', this.element).addClass('plupload_header_content_bw');
 		} else if (up.state === plupload.STOPPED) {
@@ -818,7 +818,7 @@ $.widget("ui.plupload", {
 				.add(this.stop_button)
 				.add('.plupload_started')
 					.addClass('plupload_hidden');
-
+			
 			if (this.options.multiple_queues) {
 				$('.plupload_header_content', this.element).removeClass('plupload_header_content_bw');
 			} else {
@@ -847,22 +847,22 @@ $.widget("ui.plupload", {
 
 		up.refresh();
 	},
-
-
+	
+	
 	_handleFileStatus: function(file) {
 		var self = this, actionClass, iconClass;
-
+		
 		// since this method might be called asynchronously, file row might not yet be rendered
 		if (!$('#' + file.id).length) {
-			return;
+			return;	
 		}
 
 		switch (file.status) {
-			case plupload.DONE:
+			case plupload.DONE: 
 				actionClass = 'plupload_done';
 				iconClass = 'ui-icon ui-icon-circle-check';
 				break;
-
+			
 			case plupload.FAILED:
 				actionClass = 'ui-state-error plupload_failed';
 				iconClass = 'ui-icon ui-icon-alert';
@@ -876,17 +876,17 @@ $.widget("ui.plupload", {
 			case plupload.UPLOADING:
 				actionClass = 'ui-state-highlight plupload_uploading';
 				iconClass = 'ui-icon ui-icon-circle-arrow-w';
-
+				
 				// scroll uploading file into the view if its bottom boundary is out of it
 				var scroller = $('.plupload_scroll', this.container)
 				, scrollTop = scroller.scrollTop()
 				, scrollerHeight = scroller.height()
 				, rowOffset = $('#' + file.id).position().top + $('#' + file.id).height()
 				;
-
+					
 				if (scrollerHeight < rowOffset) {
 					scroller.scrollTop(scrollTop + rowOffset - scrollerHeight);
-				}
+				}		
 
 				// Set file specific progress
 				$('#' + file.id)
@@ -897,7 +897,7 @@ $.widget("ui.plupload", {
 						.css('width', file.percent + '%')
 						.end()
 					.find('.plupload_file_size')
-						.html(plupload.formatSize(file.size));
+						.html(plupload.formatSize(file.size));			
 				break;
 		}
 		actionClass += ' ui-state-default plupload_file';
@@ -914,16 +914,16 @@ $.widget("ui.plupload", {
 						e.preventDefault();
 					});
 	},
-
-
+	
+	
 	_updateTotalProgress: function() {
 		var up = this.uploader;
 
 		// Scroll to end of file list
 		this.filelist[0].scrollTop = this.filelist[0].scrollHeight;
-
+		
 		this.progressbar.progressbar('value', up.total.percent);
-
+		
 		this.element
 			.find('.plupload_total_status')
 				.html(up.total.percent + '%')
@@ -936,14 +936,145 @@ $.widget("ui.plupload", {
 	},
 
 
+	_displayThumbs: function() {
+		var self = this
+		, tw, th // thumb width/height
+		, cols
+		, num = 0 // number of simultaneously visible thumbs
+		, thumbs = [] // array of thumbs to preload at any given moment
+		, loading = false
+		;
+
+		if (!this.options.views.thumbs) {
+			return;
+		}
+
+
+		function onLast(el, eventName, cb) {
+			var timer;
+			
+			el.on(eventName, function() {
+				clearTimeout(timer);
+				timer = setTimeout(function() {
+					clearTimeout(timer);
+					cb();
+				}, 300);
+			});
+		}
+
+
+		// calculate number of simultaneously visible thumbs
+		function measure() {
+			if (!tw || !th) {
+				var wrapper = $('.plupload_file:eq(0)', self.filelist);
+				tw = wrapper.outerWidth(true);
+				th = wrapper.outerHeight(true);
+			}
+
+			var aw = self.content.width(), ah = self.content.height();
+			cols = Math.floor(aw / tw);
+			num =  cols * (Math.ceil(ah / th) + 1);
+		}
+
+
+		function pickThumbsToLoad() {
+			// calculate index of virst visible thumb
+			var startIdx = Math.floor(self.content.scrollTop() / th) * cols;
+			// get potentially visible thumbs that are not yet visible
+			thumbs = $('.plupload_file', self.filelist)
+				.slice(startIdx, startIdx + num)
+				.filter(':not(.plupload_file_thumb_loaded)')
+				.get();
+		}
+		
+
+		function init() {
+			function mpl() {
+				if (self.view_mode !== 'thumbs') {
+					return;
+				}
+				measure();
+				pickThumbsToLoad();
+				lazyLoad();
+			}
+
+			if ($.fn.resizable) {
+				onLast(self.container, 'resize', mpl);
+			}
+
+			onLast(self.window, 'resize', mpl);
+			onLast(self.content, 'scroll',  mpl);
+
+			self.element.on('viewchanged selected', mpl);
+
+			mpl();
+		}
+
+
+		function preloadThumb(file, cb) {
+			var img = new o.Image();
+
+			img.onload = function() {
+				var thumb = $('#' + file.id + ' .plupload_file_thumb', self.filelist).html('');
+				this.embed(thumb[0], { 
+					width: 100, 
+					height: 60, 
+					crop: true,
+					swf_url: o.resolveUrl(self.options.flash_swf_url),
+					xap_url: o.resolveUrl(self.options.silverlight_xap_url)
+				});
+			};
+
+			img.bind("embedded error", function() {
+				$('#' + file.id, self.filelist).addClass('plupload_file_thumb_loaded');
+				this.destroy();
+				setTimeout(cb, 1); // detach, otherwise ui might hang (in SilverLight for example)
+			});
+
+			img.load(file.getSource());
+		}
+
+
+		function lazyLoad() {
+			if (self.view_mode !== 'thumbs' || loading) {
+				return;
+			}	
+
+			pickThumbsToLoad();
+			if (!thumbs.length) {
+				return;
+			}
+
+			loading = true;
+
+			preloadThumb(self.getFile($(thumbs.shift()).attr('id')), function() {
+				loading = false;
+				lazyLoad();
+			});
+		}
+
+		// this has to run only once to measure structures and bind listeners
+		this.element.on('selected', function onselected() {
+			self.element.off('selected', onselected);
+			init();
+		});
+	},
+
+
 	_addFiles: function(files) {
-		var self = this, file_html, queue = [];
+		var self = this, file_html;
 
 		file_html = '<li class="plupload_file ui-state-default" id="%id%">' +
-			'<div class="plupload_file_thumb"> </div>' +
-			'<div class="plupload_file_name" title="%name%"><span class="plupload_file_namespan">%name%</span></div>' +
+			'<div class="plupload_file_thumb">' +
+				'<div class="plupload_file_dummy ui-widget-content"><span class="ui-state-disabled">%ext%</span></div>' +
+			'</div>' +
+			'<div class="plupload_file_name" title="%name%"><span class="plupload_file_namespan">%name%</span></div>' +						
 			'<div class="plupload_file_action"><div class="ui-icon"> </div></div>' +
 			'<div class="plupload_file_size">%size% </div>' +
+			'<div class="plupload_file_status">' +
+				'<div class="plupload_file_progress ui-widget-header" style="width: 0%"> </div>' + 
+				'<span class="plupload_file_percent">%percent% </span>' +
+			'</div>' +
 			'<div class="plupload_file_fields"> </div>' +
 		'</li>';
 
@@ -951,66 +1082,21 @@ $.widget("ui.plupload", {
 			files = [files];
 		}
 
-		// destroy sortable if enabled
-		if ($.ui.sortable && this.options.sortable) {
-			$('tbody', self.filelist).sortable('destroy');
-		}
-
-		// loop over files to add
 		$.each(files, function(i, file) {
+			var ext = o.Mime.getFileExtension(file.name) || 'none';
 
 			self.filelist.append(file_html.replace(/%(\w+)%/g, function($0, $1) {
 				if ('size' === $1) {
 					return plupload.formatSize(file.size);
+				} else if ('ext' === $1) {
+					return ext;
 				} else {
 					return file[$1] || '';
 				}
 			}));
 
-			if (self.options.views.thumbs) {
-				queue.push(function(cb) {
-					var img = new o.Image();
-
-					img.onload = function() {
-						this.embed($('#' + file.id + ' .plupload_file_thumb', self.filelist)[0], {
-							width: 100,
-							height: 60,
-							crop: true,
-							swf_url: mOxie.resolveUrl(self.options.flash_swf_url),
-							xap_url: mOxie.resolveUrl(self.options.silverlight_xap_url)
-						});
-					};
-
-					img.onembedded = function() {
-						$('#' + file.id + ' .plupload_file_thumb', self.filelist).addClass('plupload_file_thumb_loaded');
-						this.destroy();
-						setTimeout(cb, 1); // detach, otherwise ui might hang (in SilverLight for example)
-					};
-
-					img.onerror = function() {
-						var ext = file.name.match(/\.([^\.]{1,7})$/);
-						$('#' + file.id + ' .plupload_file_thumb', self.filelist)
-							.html('<div class="plupload_file_dummy ui-widget-content"><span class="ui-state-disabled">' + (ext ? ext[1] : 'none') + '</span></div>');
-						this.destroy();
-						setTimeout(cb, 1);
-					};
-					img.load(file.getSource());
-				});
-			}
-
 			self._handleFileStatus(file);
 		});
-
-		if (queue.length) {
-			o.inSeries(queue);
-		}
-
-		// re-enable sortable
-		if (this.options.sortable && $.ui.sortable) {
-			this._enableSortingList();
-		}
-
-		this._trigger('updatelist', null, { filelist: this.filelist });
 	},
 
 
@@ -1023,25 +1109,21 @@ $.widget("ui.plupload", {
 
 		// destroy sortable if enabled
 		if ($.ui.sortable && this.options.sortable) {
-			$('tbody', self.filelist).sortable('destroy');
+			$('tbody', self.filelist).sortable('destroy');	
 		}
 
 		$.each(files, function(i, file) {
-			if (file.imgs && file.imgs.length) {
-				$.each(file.imgs, function(ii, img) {
-					img.destroy();
-				});
-				file.imgs = [];
-			}
-			$('#' + file.id).remove();
+			$('#' + file.id).toggle("highlight", function() {
+				this.remove();
+			});
 			up.removeFile(file);
 		});
 
-
+		
 		if (up.files.length) {
 			// re-initialize sortable
 			if (this.options.sortable && $.ui.sortable) {
-				this._enableSortingList();
+				this._enableSortingList();	
 			}
 		}
 
@@ -1071,20 +1153,20 @@ $.widget("ui.plupload", {
 
 		this.counter.val(this.uploader.files.length);
 	},
-
+	
 
 	_viewChanged: function(view) {
 		// update or write a new cookie
 		if (this.options.views.remember && $.cookie) {
 			$.cookie('plupload_ui_view', view, { expires: 7, path: '/' });
-		}
-
+		} 
+	
 		// ugly fix for IE6 - make content area stretchable
-		if (mOxie.Env.browser === 'IE' && mOxie.Env.version < 7) {
+		if (o.Env.browser === 'IE' && o.Env.version < 7) {
 			this.content.attr('style', 'height:expression(document.getElementById("' + this.id + '_container' + '").clientHeight - ' + (view === 'list' ? 133 : 103) + ');');
 		}
 
-		this.container.removeClass('plupload_view_list plupload_view_thumbs').addClass('plupload_view_' + view);
+		this.container.removeClass('plupload_view_list plupload_view_thumbs').addClass('plupload_view_' + view); 
 		this.view_mode = view;
 		this._trigger('viewchanged', null, { view: view });
 	},
@@ -1140,9 +1222,14 @@ $.widget("ui.plupload", {
 			switcher.show();
 			this._viewChanged(this.options.views.active);
 		}
-	},
-
 
+		// initialize thumb viewer if requested
+		if (this.options.views.thumbs) {
+			this._displayThumbs();
+		}
+	},
+	
+	
 	_enableRenaming: function() {
 		var self = this;
 
@@ -1152,7 +1239,7 @@ $.widget("ui.plupload", {
 			if (!nameSpan.hasClass('plupload_file_namespan')) {
 				return;
 			}
-
+		
 			// Get file name and split out name and extension
 			file = self.uploader.getFile(nameSpan.closest('.plupload_file')[0].id);
 			name = file.name;
@@ -1182,35 +1269,39 @@ $.widget("ui.plupload", {
 			})[0].focus();
 		});
 	},
-
-
+	
+	
 	_enableSortingList: function() {
-		var self = this, filelist = $('.plupload_filelist_content', this.element);
-
-		if ($('.plupload_file', filelist).length < 2) {
-			return;
+		var self = this;
+		
+		if ($('.plupload_file', this.filelist).length < 2) {
+			return;	
 		}
 
-		filelist.sortable({
+		// destroy sortable if enabled
+		$('tbody', this.filelist).sortable('destroy');	
+		
+		// enable		
+		this.filelist.sortable({
 			items: '.plupload_delete',
-
+			
 			cancel: 'object, .plupload_clearer',
 
 			stop: function() {
 				var files = [];
-
+				
 				$.each($(this).sortable('toArray'), function(i, id) {
 					files[files.length] = self.uploader.getFile(id);
-				});
-
+				});				
+				
 				files.unshift(files.length);
 				files.unshift(0);
-
-				// re-populate files array
-				Array.prototype.splice.apply(self.uploader.files, files);
+				
+				// re-populate files array				
+				Array.prototype.splice.apply(self.uploader.files, files);	
 			}
-		});
+		});		
 	}
 });
 
-} (window, document, plupload, jQuery));
+} (window, document, plupload, mOxie, jQuery));