diff --git a/README.md b/README.md
index 517da8c..9ffd1f0 100644
--- a/README.md
+++ b/README.md
@@ -223,7 +223,9 @@ GND -> Pin 9 (GND)
 You also need to tell your RPi3 to enable the I2C bus, start the `raspi-config` and go to submenu 5 (interfaces) and select I2C and enable it.
 
 Once all this is done, you have one more thing left to do before rebooting, you need to download the imagemagick script that will adjust the image,
-please visit http://www.fmwconcepts.com/imagemagick/colortemp/index.php and download and store it as `colortemp.sh` inside `/root/`.
+please visit http://www.fmwconcepts.com/imagemagick/colortemp/index.php and download and store it as `colortemp.sh` inside `/root/photoframe_config`.
+
+Don't forget to make it executable by `chmod +x /root/photoframe_config/colortemp.sh` or it will still not work.
 
 You're done! Reboot your RPi3 (So I2C gets enabled) and from now on, all images will get adjusted to match the ambient color temperature.
 
diff --git a/display-drivers/README.md b/display-drivers/README.md
new file mode 100644
index 0000000..0a2e9e3
--- /dev/null
+++ b/display-drivers/README.md
@@ -0,0 +1,93 @@
+# Display Drivers
+
+Photoframe now supports uploading and enabling of internal displays for the Raspberry Pi family,
+the only requirement is that it can be supported by the currently used kernel and modules.
+
+Since a lot of the smaller displays rely on the built-in fbtft driver, it means that in many
+cases, all you really need is a DeviceTree Overlay, essentially configuration files for the
+device driver so it knows how to talk to the new display.
+
+## What's included
+
+Today, only the waveshare 3.5" IPS (model B) is provided since that was my development system.
+But you can create and share these display "drivers" easily yourself.
+
+## How to write a display driver package
+
+Start with an empty folder, copy the necessary files for it to work, usually one or two files
+ending in `.dtb` or `.dtbo`.
+
+Next, create a file called `INSTALL` (yes, all caps, important) in the same folder. Open the
+file and create the following structure:
+
+```
+[install]
+
+[options]
+```
+
+### The install section
+This is a very simple `key/value` pair setup. First part (key) refers to the file included in the
+package. The path to the file is based on the location of the `INSTALL` file. You can use 
+sub-directories if you need to, but if you do so, they must adhere to the same rule.
+
+The value part refers to where the file should be copied when activated. Typically this is
+somewhere in `/boot/`.
+
+For example, in the waveshare case, this section looks like this:
+```
+[install]
+waveshare35b-overlay.dtb=/boot/overlays/waveshare35b.dtbo
+waveshare35b-overlay.dtb=/boot/overlays/waveshare35b-overlay.dtb
+```
+As you can see, the key here is used multiple times, this is because they place this file in two
+locations with different names (but it's the same file).
+
+NOTE! The installer will NOT create any directories when activating.
+
+### The options section
+
+This is also a `key/value` setup, but unlike the `install` section, here the key is UNIQUE. If you
+define a key multiple times, only the last definition will be used.
+
+At the very least, this section holds the key `dtoverlay` which is the `/boot/config.txt` keyword
+for pointing out an overlay to use. But you can add as many things as you'd like (some DPI displays
+require a multitude of key/value pairs).
+
+In the waveshare 3.5" display case, all it does is point out the overlay:
+```
+[options]
+dtoverlay=waveshare35b
+```
+
+## Saving the display driver package
+
+Once you have written your `INSTALL` file and added the needed files to the folder you
+created earlier, all you need to do now is create a zip file out of the contents and give
+the file a nice name (like, `waveshare35b.zip`) since that's the name used to identify
+the driver.
+
+## I updated my driver, now what?
+
+Simply upload it again. The old driver will be deleted and replaced with the new one.
+
+## This all seem complicated, do you have an example?
+
+Sure, just unzip the `waveshare35b.zip` and look at it for guidance.
+
+## What is `manifest.json` ?
+
+That's a generated file by photoframe which it creates upon installing a driver. You can
+create sub-directories in `display-drivers` with pre-processed drivers which will then be
+available by default when installing photoframe.
+
+Note that if you install a driver with the same name as one of the provided ones, the new
+driver will take priority
+
+## Known gotchas
+
+If you install a driver which you're already using, you need to switch to HDMI and back to
+force update the active driver (and no, no need to reboot when going to HDMI, only when
+you go back to your updated driver). 
+
+This will eventually be fixed.
\ No newline at end of file
diff --git a/display-drivers/waveshare35b.zip b/display-drivers/waveshare35b.zip
new file mode 100644
index 0000000..14d7c11
Binary files /dev/null and b/display-drivers/waveshare35b.zip differ
diff --git a/frame.py b/frame.py
index 8bbcb72..e416591 100755
--- a/frame.py
+++ b/frame.py
@@ -38,14 +38,26 @@
 from modules.oauth import OAuth
 from modules.slideshow import slideshow
 from modules.colormatch import colormatch
+from modules.drivers import drivers
 
 void = open(os.devnull, 'wb')
+# Supercritical, since we store all photoframe files in a subdirectory, make sure to create it
+if not os.path.exists('/root/photoframe_config'):
+	try:
+		os.mkdir('/root/photoframe_config')
+	except:
+		logging.exception('Unable to create configuration directory, cannot start')
+		sys.exit(255)
+elif not os.path.isdir('/root/photoframe_config'):
+	logging.error('/root/photoframe_config isn\'t a folder, cannot start')
+	sys.exit(255)
 
 import requests
 from requests_oauthlib import OAuth2Session
-from flask import Flask, request, redirect, session, url_for, abort
+from flask import Flask, request, redirect, session, url_for, abort, flash
 from flask.json import jsonify
 from flask_httpauth import HTTPBasicAuth
+from werkzeug.utils import secure_filename
 
 # used if we don't find authentication json
 class NoAuth:
@@ -74,8 +86,9 @@ def wrap(*args, **kwargs):
 logging.getLogger('urllib3').setLevel(logging.ERROR)
 
 app = Flask(__name__, static_url_path='')
+app.config['UPLOAD_FOLDER'] = '/tmp/'
 user = None
-userfiles = ['/boot/http-auth.json', '/root/http-auth.json']
+userfiles = ['/boot/http-auth.json', '/root/photoframe_config/http-auth.json']
 
 for userfile in userfiles:
 	if os.path.exists(userfile):
@@ -126,34 +139,31 @@ def cfg_keyvalue(key, value):
 			return
 
 	if request.method == 'PUT':
+		status = True
 		if key == "keywords":
 			# Keywords has its own API
 			abort(404)
 			return
 		settings.setUser(key, value)
 		settings.save()
-		if key in ['width', 'height', 'depth', 'tvservice']:
-			display.setConfiguration(settings.getUser('width'), settings.getUser('height'), settings.getUser('depth'), settings.getUser('tvservice'))
-			display.enable(True, True)
+		if key in ['display-driver']:
+			drv = settings.getUser('display-driver')
+			if drv == 'none':
+				drv = None
+			if not drivers.activate(drv):
+				settings.setUser('display-driver', 'none')
+				status = False
 		if key in ['timezone']:
 			# Make sure we convert + to /
 			settings.setUser('timezone', value.replace('+', '/'))
 			helper.timezoneSet(settings.getUser('timezone'))
-		if key in ['resolution']:
-			# This one needs some massaging, we essentially deduce all settings from a string (DMT/CEA CODE HDMI)
-			items = settings.getUser('resolution').split(' ')
-			logging.debug('Items: %s', repr(items))
-			resolutions = display.available()
-			for res in resolutions:
-				if res['code'] == int(items[1]) and res['mode'] == items[0]:
-					logging.debug('Found this item: %s', repr(res))
-					settings.setUser('width',  res['width'])
-					settings.setUser('height', res['height'])
-					settings.setUser('depth', 32)
-					settings.setUser('tvservice', value)
-					display.setConfiguration(settings.getUser('width'), settings.getUser('height'), settings.getUser('depth'), settings.getUser('tvservice'))
-					display.enable(True, True)
-					break
+		if key in ['resolution', 'tvservice']:
+			width, height, tvservice = display.setConfiguration(value)
+			settings.setUser('tvservice', tvservice)
+			settings.setUser('width',  width)
+			settings.setUser('height', height)
+			settings.save()
+			display.enable(True, True)
 		if key in ['display-on', 'display-off']:
 			timekeeper.setConfiguration(settings.getUser('display-on'), settings.getUser('display-off'))
 		if key in ['autooff-lux', 'autooff-time']:
@@ -163,7 +173,7 @@ def cfg_keyvalue(key, value):
 		if key in ['shutdown-pin']:
 			powermanagement.stopmonitor()
 			powermanagement = shutdown(settings.getUser('shutdown-pin'))
-		return jsonify({'status':True})
+		return jsonify({'status':status})
 
 	elif request.method == 'GET':
 		if key is None:
@@ -212,7 +222,7 @@ def cfg_oauth_info():
 		abort(500)
 	data = request.json['web']
 	oauth.setOAuth(data)
-	with open('/root/oauth.json', 'wb') as f:
+	with open('/root/photoframe_config/oauth.json', 'wb') as f:
 		json.dump(data, f);
 	return jsonify({'result' : True})
 
@@ -249,6 +259,9 @@ def cfg_details(about):
 		response = app.make_response(image)
 		response.headers.set('Content-Type', mime)
 		return response
+	elif about == 'drivers':
+		result = drivers.list().keys()
+		return jsonify(result)
 	elif about == 'timezone':
 		result = helper.timezoneList()
 		return jsonify(result)
@@ -263,6 +276,28 @@ def cfg_details(about):
 
 	abort(404)
 
+@app.route('/custom-driver', methods=['POST'])
+@auth.login_required
+def upload_driver():
+	if request.method == 'POST':
+		# check if the post request has the file part
+		if 'driver' not in request.files:
+			logging.error('No file part')
+			abort(405)
+		file = request.files['driver']
+		# if user does not select file, browser also
+		# submit an empty part without filename
+		if file.filename == '' or not file.filename.lower().endswith('.zip'):
+			logging.error('No filename or invalid filename')
+			abort(405)
+		filename = os.path.join('/tmp/', secure_filename(file.filename))
+		file.save(filename)
+		if drivers.install(filename):
+			return ''
+		else:
+			abort(500)
+	abort(405)
+
 @app.route("/link")
 @auth.login_required
 def oauth_step1():
@@ -295,20 +330,27 @@ def web_template(file):
 	return app.send_static_file('template/' + file)
 
 settings = settings()
+drivers = drivers()
+display = display()
+
 if not settings.load():
 	# First run, grab display settings from current mode
 	current = display.current()
-	logging.info('No display settings, using: %s' % repr(current))
-	settings.setUser('tvservice', '%s %s HDMI' % (current['mode'], current['code']))
-	settings.setUser('width', int(current['width']))
-	settings.setUser('height', int(current['height']))
-	settings.save()
-
+	if current is not None:
+		logging.info('No display settings, using: %s' % repr(current))
+		settings.setUser('tvservice', '%s %s HDMI' % (current['mode'], current['code']))
+		settings.save()
+	else:
+		logging.info('No display attached?')
 if settings.getUser('timezone') == '':
 	settings.setUser('timezone', helper.timezoneCurrent())
 	settings.save()
 
-display = display(settings.getUser('width'), settings.getUser('height'), settings.getUser('depth'), settings.getUser('tvservice'))
+width, height, tvservice = display.setConfiguration(settings.getUser('tvservice'))
+settings.setUser('tvservice', tvservice)
+settings.setUser('width',  width)
+settings.setUser('height', height)
+settings.save()
 
 # Force display to desired user setting
 display.enable(True, True)
@@ -333,8 +375,8 @@ def oauthSetToken(token):
 
 oauth = OAuth(settings.get('local-ip'), oauthSetToken, oauthGetToken)
 
-if os.path.exists('/root/oauth.json'):
-	with open('/root/oauth.json') as f:
+if os.path.exists('/root/photoframe_config/oauth.json'):
+	with open('/root/photoframe_config/oauth.json') as f:
 		data = json.load(f)
 	if 'web' in data: # if someone added it via command-line
 		data = data['web']
diff --git a/modules/colormatch.py b/modules/colormatch.py
index 527a007..f2407ed 100755
--- a/modules/colormatch.py
+++ b/modules/colormatch.py
@@ -133,7 +133,11 @@ def run(self):
 		# I2C address 0x29
 		# Register 0x12 has device ver.
 		# Register addresses must be OR'ed with 0x80
-		bus.write_byte(0x29,0x80|0x12)
+		try:
+			bus.write_byte(0x29,0x80|0x12)
+		except:
+			logging.info('ColorSensor not available')
+			return
 		ver = bus.read_byte(0x29)
 		# version # should be 0x44
 		if ver == 0x44:
diff --git a/modules/display.py b/modules/display.py
index dd025f8..b666576 100755
--- a/modules/display.py
+++ b/modules/display.py
@@ -21,16 +21,44 @@
 import json
 
 class display:
-	def __init__(self, width, height, depth, tvservice_params):
-		self.setConfiguration(width, height, depth, tvservice_params)
+	def __init__(self):
 		self.void = open(os.devnull, 'wb')
+		self.params = None
 
-	def setConfiguration(self, width, height, depth, tvservice_params):
-		self.width = width
-		self.height = height
+	def setConfiguration(self, tvservice_params):
 		self.enabled = True
-		self.depth = depth
-		self.params = tvservice_params
+
+		# Erase old picture
+		if self.params is not None:
+			self.clear()
+
+		result = display.validate(tvservice_params)
+		if result is None:
+			self.enabled = False
+			self.params = None
+			return (1280, 720, '')
+
+		self.width = result['width']
+		self.height = result['height']
+		self.depth = result['depth']
+		self.reverse = result['reverse']
+		self.params = result['tvservice']
+		if self.reverse:
+			self.format = 'bgr'
+		else:
+			self.format = 'rgb'
+		if self.depth == 32:
+			self.format += 'a'
+
+		return (self.width, self.height, self.params)
+
+	def getDevice(self):
+		if self.params and self.params.split(' ')[0] == 'INTERNAL':
+			return '/dev/fb1'
+		return '/dev/fb0'
+
+	def isHDMI(self):
+		return self.getDevice() == '/dev/fb0'
 
 	def get(self):
 		if self.enabled:
@@ -40,14 +68,14 @@ def get(self):
 			        '8',
 			        '-size',
 			        '%dx%d' % (self.width, self.height),
-			        'bgra:/dev/fb0[0]',
+			        '%s:-' % (self.format),
 			        'jpg:-'
 			]
 		else:
 			args = [
 				'convert',
 				'-size',
-				'%dx%d' % (self.width, self.height),
+				'%dx%d' % (640, 360),
 				'-background',
 				'black',
 				'-fill',
@@ -57,17 +85,51 @@ def get(self):
 				'-weight',
 				'700',
 				'-pointsize',
-				'64',
-				'label:%s' % "Powersave",
+				'32',
+				'label:%s' % "Display off",
 				'-depth',
 				'8',
 				'jpg:-'
 			]
 
-		result = subprocess.check_output(args, stderr=self.void)
+		if not self.enabled:
+			result = subprocess.check_output(args, stderr=self.void)
+		elif self.depth in [24, 32]:
+			with open(self.getDevice(), 'rb') as fb:
+				pip = subprocess.Popen(args, stdin=fb, stdout=subprocess.PIPE, stderr=self.void)
+				result = pip.communicate()[0]
+		elif self.depth == 16:
+			with open(self.getDevice(), 'rb') as fb:
+				src = subprocess.Popen(['/root/photoframe/rgb565/rgb565', 'reverse'], stdout=subprocess.PIPE, stdin=fb, stderr=self.void)
+				pip = subprocess.Popen(args, stdin=src.stdout, stdout=subprocess.PIPE)
+				src.stdout.close()
+				result = pip.communicate()[0]
+		else:
+			logging.error('Do not know how to grab this kind of framebuffer')
 		return (result, 'image/jpeg')
 
+	def _to_display(self, arguments):
+		if self.depth in [24, 32]:
+			logging.debug('Sending image directly to framebuffer')
+			with open(self.getDevice(), 'wb') as f:
+				ret = subprocess.call(arguments, stdout=f, stderr=self.void)
+		elif self.depth == 16: # Typically RGB565
+			logging.debug('Sending image via RGB565 conversion to framebuffer')
+			# For some odd reason, cannot pipe the output directly to the framebuffer, use temp file
+			with open(self.getDevice(), 'wb') as fb:
+				src = subprocess.Popen(arguments, stdout=subprocess.PIPE, stderr=self.void)
+				pip = subprocess.Popen(['/root/photoframe/rgb565/rgb565'], stdin=src.stdout, stdout=fb)
+				src.stdout.close()
+				pip.communicate()
+		else:
+			logging.error('Do not know how to render this, depth is %d', self.depth)
+
+
 	def message(self, message):
+		if not self.enabled:
+			logging.debug('Don\'t bother, display is off')
+			return
+
 		args = [
 			'convert',
 			'-size',
@@ -85,12 +147,15 @@ def message(self, message):
 			'label:%s' % message,
 			'-depth',
 			'8',
-			'bgra:-'
+			'%s:-' % self.format
 		]
-		with open('/dev/fb0', 'wb') as f:
-			ret = subprocess.call(args, stdout=f, stderr=self.void)
+		self._to_display(args)
 
 	def image(self, filename):
+		if not self.enabled:
+			logging.debug('Don\'t bother, display is off')
+			return
+
 		logging.debug('Showing image to user')
 		args = [
 			'convert',
@@ -105,63 +170,90 @@ def image(self, filename):
 			'%dx%d' % (self.width, self.height),
 			'-depth',
 			'8',
-			'bgra:-'
+			'%s:-' % self.format
 		]
-		with open('/dev/fb0', 'wb') as f:
-			ret = subprocess.call(args, stdout=f, stderr=self.void)
+		self._to_display(args)
 
 	def enable(self, enable, force=False):
 		if enable == self.enabled and not force:
 			return
 
+		# Do not do things if we don't know how to display
+		if self.params is None:
+			return
+
 		if enable:
-			if force: # Make sure display is ON and set to our preference
-				subprocess.call(['/opt/vc/bin/tvservice', '-e', self.params], stderr=self.void, stdout=self.void)
-				time.sleep(1)
-				subprocess.call(['/bin/fbset', '-depth', '8'], stderr=self.void)
-				subprocess.call(['/bin/fbset', '-depth', str(self.depth), '-xres', str(self.width), '-yres', str(self.height), '-vxres', str(self.width), '-vyres', str(self.height)], stderr=self.void)
-			else:
-				subprocess.call(['/usr/bin/vcgencmd', 'display_power', '1'], stderr=self.void)
+			if self.isHDMI():
+				if force: # Make sure display is ON and set to our preference
+					subprocess.call(['/opt/vc/bin/tvservice', '-e', self.params], stderr=self.void, stdout=self.void)
+					time.sleep(1)
+					subprocess.call(['/bin/fbset', '-fb', self.getDevice(), '-depth', '8'], stderr=self.void)
+					subprocess.call(['/bin/fbset', '-fb', self.getDevice(), '-depth', str(self.depth), '-xres', str(self.width), '-yres', str(self.height), '-vxres', str(self.width), '-vyres', str(self.height)], stderr=self.void)
+				else:
+					subprocess.call(['/usr/bin/vcgencmd', 'display_power', '1'], stderr=self.void)
 		else:
-			subprocess.call(['/usr/bin/vcgencmd', 'display_power', '0'], stderr=self.void)
+			self.clear()
+			if self.isHDMI():
+				subprocess.call(['/usr/bin/vcgencmd', 'display_power', '0'], stderr=self.void)
 		self.enabled = enable
 
 	def isEnabled(self):
 		return self.enabled
 
 	def clear(self):
-		with open('/dev/fb0', 'wb') as f:
+		with open(self.getDevice(), 'wb') as f:
 			subprocess.call(['cat' , '/dev/zero'], stdout=f, stderr=self.void)
 
 	@staticmethod
-	def current():
-		'''
-		output = subprocess.check_output(['/opt/vc/bin/tvservice', '-s'], stderr=subprocess.STDOUT)
-		print('"%s"' % (output))
-		# state 0x120006 [DVI DMT (82) RGB full 16:9], 1920x1080 @ 60.00Hz, progressive
-		m = re.search('state 0x[0-9a-f]* \[([A-Z]*) ([A-Z]*) \(([0-9]*)\) [^,]*, ([0-9]*)x([0-9]*)', output)
-		result = {
-		'group' : m.group(2),
-		'mode' : m.group(3),
-		'drive' : m.group(1),
-		'width' : m.group(4),
-		'height' : m.group(5)
-		}
-		return result
-		'''
-		output = subprocess.check_output(['/opt/vc/bin/tvservice', '-s'], stderr=subprocess.STDOUT)
-		# state 0x120006 [DVI DMT (82) RGB full 16:9], 1920x1080 @ 60.00Hz, progressive
-		m = re.search('state 0x[0-9a-f]* \[([A-Z]*) ([A-Z]*) \(([0-9]*)\) [^,]*, ([0-9]*)x([0-9]*) \@ ([0-9]*)\.[0-9]*Hz, (.)', output)
-		result = {
-			'mode' : m.group(2),
-			'code' : int(m.group(3)),
-			'width' : int(m.group(4)),
-			'height' : int(m.group(5)),
-			'rate' : int(m.group(6)),
-			'aspect_ratio' : '',
-			'scan' : m.group(7),
-			'3d_modes' : []
-		}
+	def _internaldisplay():
+		if os.path.exists('/dev/fb1'):
+			entry = {
+				'mode' : 'INTERNAL',
+				'code' : '0',
+				'width' : 0,
+				'height' : 0,
+				'rate' : 60,
+				'aspect_ratio' : '',
+				'scan' : '(internal)',
+				'3d_modes' : []
+			}
+			info = subprocess.check_output(['/bin/fbset', '-fb', '/dev/fb1'], stderr=subprocess.STDOUT).split('\n')
+			for line in info:
+				line = line.strip()
+				if line.startswith('geometry'):
+					parts = line.split(' ')
+					entry['width'] = int(parts[1])
+					entry['height'] = int(parts[2])
+					entry['depth'] = int(parts[5])
+					entry['reverse'] = False
+					entry['code'] = int(parts[5])
+			if entry['code'] != 0:
+				return entry
+		return None
+
+	def current(self):
+		result = None
+		if self.isHDMI():
+			output = subprocess.check_output(['/opt/vc/bin/tvservice', '-s'], stderr=subprocess.STDOUT)
+			# state 0x120006 [DVI DMT (82) RGB full 16:9], 1920x1080 @ 60.00Hz, progressive
+			m = re.search('state 0x[0-9a-f]* \[([A-Z]*) ([A-Z]*) \(([0-9]*)\) [^,]*, ([0-9]*)x([0-9]*) \@ ([0-9]*)\.[0-9]*Hz, (.)', output)
+			if m is None:
+				return None
+			result = {
+				'mode' : m.group(2),
+				'code' : int(m.group(3)),
+				'width' : int(m.group(4)),
+				'height' : int(m.group(5)),
+				'rate' : int(m.group(6)),
+				'aspect_ratio' : '',
+				'scan' : m.group(7),
+				'3d_modes' : [],
+				'depth':32,
+				'reverse':True,
+			}
+		else:
+			result = display._internaldisplay()
+
 		return result
 
 	@staticmethod
@@ -171,10 +263,42 @@ def available():
 		result = []
 		for entry in cea:
 			entry['mode'] = 'CEA'
+			entry['depth'] = 32
+			entry['reverse'] = True
 			result.append(entry)
 		for entry in dmt:
 			entry['mode'] = 'DMT'
+			entry['depth'] = 32
+			entry['reverse'] = True
 			result.append(entry)
 
+		internal = display._internaldisplay()
+		if internal:
+			result.append(internal)
+
 		# Finally, sort by pixelcount
-		return sorted(result, key=lambda k: k['width']*k['height'])
\ No newline at end of file
+		return sorted(result, key=lambda k: k['width']*k['height'])
+
+	@staticmethod
+	def validate(tvservice):
+		# Takes a string and returns valid width, height, depth and service
+		items = tvservice.split(' ')
+		resolutions = display.available()
+		if len(resolutions) == 0:
+			return None
+
+		res = resolutions[0]
+		if len(items) == 3:
+			for res in resolutions:
+				if res['code'] == int(items[1]) and res['mode'] == items[0]:
+					break
+		else:
+			logging.warning('Invalid tvservice data, using first available instead')
+
+		return {
+			'width':res['width'], 
+			'height':res['height'], 
+			'depth':res['depth'], 
+			'reverse':res['reverse'], 
+			'tvservice':'%s %s %s' % (res['mode'], res['code'], 'HDMI')
+		}
diff --git a/modules/drivers.py b/modules/drivers.py
new file mode 100644
index 0000000..9c86040
--- /dev/null
+++ b/modules/drivers.py
@@ -0,0 +1,246 @@
+# This file is part of photoframe (https://github.com/mrworf/photoframe).
+#
+# photoframe is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# photoframe is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with photoframe.  If not, see <http://www.gnu.org/licenses/>.
+#
+import time
+import os
+import subprocess
+import logging
+import tempfile
+import shutil
+import json
+
+class drivers:
+	BUILTIN = '/root/photoframe/display-drivers'
+	EXTERNAL = '/root/photoframe_config/display-drivers/'
+	MARKER = '### DO NOT EDIT BEYOND THIS COMMENT, IT\'S AUTOGENERATED BY PHOTOFRAME ###'
+
+	def __init__(self):
+		self.void = open(os.devnull, 'wb')
+		if not os.path.exists(drivers.EXTERNAL):
+			try:
+				os.mkdir(drivers.EXTERNAL)
+			except:
+				logging.exception('Unable to create "%s"', drivers.EXTERNAL)
+
+	def _list_dir(self, path):
+		result = {}
+		contents = os.listdir(path)
+		for entry in contents:
+			if not os.path.isdir(os.path.join(path, entry)):
+				continue
+			result[entry] = os.path.join(path, entry)
+		return result
+
+	def list(self):
+		result = {}
+		result = self._list_dir(drivers.BUILTIN)
+		# Any driver defined in external that has the same name as an internal one
+		# will replace the internal one.
+		result.update(self._list_dir(drivers.EXTERNAL))
+
+		return result
+
+	def _find(self, filename, basedir):
+		for root, dirnames, filenames in os.walk(basedir):
+			for filename in filenames:
+				if filename == 'INSTALL':
+					return os.path.join(root, filename)
+		return None
+
+	def _deletefolder(self, folder):
+		try:
+			shutil.rmtree(folder)
+		except:
+			logging.exception('Failed to delete "%s"', folder)
+
+	def _parse(self, installer):
+		root = os.path.dirname(installer)
+		config = {'driver' : os.path.basename(root), 'install' : [], 'options' : {}}
+		state = 0
+		lc = 0
+		try:
+			with open(installer, 'r') as f:
+				for line in f:
+					lc += 1
+					line = line.strip()
+					if line.startswith('#') or len(line) == 0:
+						continue
+					if line.lower() == '[install]':
+						state = 1
+						continue
+					if line.lower() == '[options]':
+						state = 2
+						continue
+					if state == 1:
+						src, dst = line.split('=', 1)
+						src = src.strip()
+						dst = dst.strip()
+						if dst == '' or src == '':
+							logging.error('Install section cannot have an empty source or destination filename (Line %d)', lc)
+							return None
+						if '..' in src or src.startswith('/'):
+							logging.error('Install section must use files within package (Line %d)', lc)
+							return None
+						src = os.path.join(root, src)
+						if not os.path.exists(src):
+							logging.error('INSTALL manifest points to non-existant file (Line %d)', lc)
+							return None
+						config['install'].append({'src':src, 'dst':dst})
+					elif state == 2:
+						key, value = line.split('=', 1)
+						key = key.strip()
+						value = value.strip()
+						if key == '' or value == '':
+							logging.error('Options section cannot have an empty key or value (Line %d)', lc)
+							return None
+						if key in config['options']:
+							logging.warning('Key "%s" will be overridden since it is defined multiple times (Line %d)', lc)
+						config['options'][key] = value
+		except:
+			logging.exception('Failed to read INSTALL manifest')
+			return None
+		return config
+
+	def install(self, file):
+		'''
+		Takes a zip file, extracts it and stores the necessary parts in a new
+		folder under EXTERNAL. Does NOT make it active.
+		'''
+		folder = tempfile.mkdtemp()
+		extra, _ = os.path.basename(file).rsplit('.', 1) # This is to make sure we have a foldername
+		try:
+			result = subprocess.check_call(['/usr/bin/unzip', file, '-d', os.path.join(folder, extra)], stdout=self.void, stderr=self.void)
+		except:
+			result = 255
+
+		if result != 0:
+			logging.error('Failed to extract files from zipfile')
+			self._deletefolder(folder)
+			return False
+
+		# Locate the meat of the file, ie, the INSTALL file
+		installer = self._find('INSTALL', folder)
+		if installer is None:
+			logging.error('No INSTALL manifest, abort driver installation')
+			self._deletefolder(folder)
+			return False
+
+		config = self._parse(installer)
+		if config is None:
+			logging.error('INSTALL manifest corrupt, abort driver installation')
+			self._deletefolder(folder)
+			return False
+
+		# First, make sure we erase existing driver
+		dstfolder = os.path.join(drivers.EXTERNAL, config['driver'])
+		if os.path.exists(dstfolder):
+			logging.info('"%s" already exists, delete before installing', dstfolder)
+			self._deletefolder(dstfolder)
+		os.mkdir(dstfolder)
+
+		# Copy all files as needed
+		files = []
+		for entry in config['install']:
+			src = entry['src']
+			dst = os.path.basename(entry['src']).replace('/', '_')
+			files.append({'src':dst, 'dst':entry['dst']})
+			try:
+				shutil.copyfile(os.path.join(folder, extra, src), os.path.join(dstfolder, dst))
+			except:
+				logging.exception('Failed to copy "%s" to "%s"', os.path.join(folder, extra, src), os.path.join(dstfolder, dst))
+				# Shitty, but we cannot leave this directory with partial files
+				self._deletefolder(dstfolder)
+				self._deletefolder(folder)
+				return False
+		config['install'] = files
+
+		# Just save our config, saving us time next time
+		with open(os.path.join(dstfolder, 'manifest.json'), 'w') as f:
+			json.dump(config, f)
+
+		self._deletefolder(folder)
+		return True
+
+	def activate(self, driver=None):
+		'''
+		Activates a driver, meaning it gets copied into the necessary places and
+		the config.txt is updated. Setting driver to None removes the active driver
+		'''
+		driverlist = self.list()
+		if driver is not None:
+			# Check that this driver exists
+			if driver not in driverlist:
+				logging.error('Tried to active non-existant driver "%s"', driver)
+				return False
+
+		config = {'name':'', 'install':[], 'options':{}}
+		root = ''
+		if driver:
+			try:
+				with open(os.path.join(driverlist[driver], 'manifest.json'), 'rb') as f:
+					config = json.load(f)
+				root = driverlist[driver]
+			except:
+				logging.exception('Failed to load manifest for %s', driver)
+				return False
+
+		# Copy the files into desired locations
+		for copy in config['install']:
+			try:
+				shutil.copyfile(os.path.join(root, copy['src']), copy['dst'])
+			except:
+				logging.exception('Failed to copy "%s" to "%s"', copy['src'], copy['dst'])
+				return False
+
+		# Next, load the config.txt and insert/replace our section
+		lines = []
+		try:
+			with open('/boot/config.txt', 'rb') as f:
+				for line in f:
+					line = line.strip()
+					if line == drivers.MARKER:
+						break
+					lines.append(line)
+		except:
+			logging.exception('Failed to read /boot/config.txt')
+			return False
+
+		# Add our options
+		if len(config['options']) > 0:
+			lines.append(drivers.MARKER)
+			for key in config['options']:
+				lines.append('%s=%s' % (key, config['options'][key]))
+
+		# Save the new file
+		try:
+			with open('/boot/config.txt.new', 'wb') as f:
+				for line in lines:
+					f.write('%s\n' % line)
+		except:
+			logging.exception('Failed to generate new config.txt')
+			return False
+
+		# On success, we rename and delete the old config
+		try:
+			os.rename('/boot/config.txt', '/boot/config.txt.old')
+			os.rename('/boot/config.txt.new', '/boot/config.txt')
+			# Keep the first version of the config.txt just-in-case
+			if os.path.exists('/boot/config.txt.original'):
+				os.unlink('/boot/config.txt.old')
+			else:
+				os.rename('/boot/config.txt.old', '/boot/config.txt.original')
+		except:
+			logging.exception('Failed to activate new config.txt, you may need to restore the config.txt')
+		return True
diff --git a/modules/helper.py b/modules/helper.py
index 319537a..0ff95de 100755
--- a/modules/helper.py
+++ b/modules/helper.py
@@ -84,11 +84,19 @@ def makeFullframe(filename, imageWidth, imageHeight):
 		if height < imageHeight:
 			border = '0x%d' % width_border
 			spacing = '0x%d' % width_spacing
-			logging.debug('Landscape image, reframing')
+			zoomed = ((imageHeight-height)/2-width_border)
+			logging.debug('Landscape image, reframing (visible zoomed is %d)' % zoomed)
+			if zoomed < 20:
+				logging.debug('That\'s less than 20px so skip reframing')
+				return False
 		elif height > imageHeight:
 			border = '%dx0' % width_border
 			spacing = '%dx0' % width_spacing
-			logging.debug('Portrait image, reframing')
+			zoomed = ((imageWidth-width)/2-width_border)
+			logging.debug('Portrait image, reframing (visible zoomed is %d)' % zoomed)
+			if zoomed < 20:
+				logging.debug('That\'s less than 20px so skip reframing')
+				return False
 		else:
 			logging.debug('Image is fullscreen, no reframing needed')
 			return False
diff --git a/modules/settings.py b/modules/settings.py
index 3d87ee2..1901762 100755
--- a/modules/settings.py
+++ b/modules/settings.py
@@ -19,7 +19,8 @@
 import random
 
 class settings:
-	CONFIGFILE = '/root/settings.json'
+	CONFIGFILE = '/root/photoframe_config/settings.json'
+	DEPRECATED_USER = ['resolution']
 
 	def __init__(self):
 		self.settings = {
@@ -28,7 +29,7 @@ def __init__(self):
 			'local-ip' : None,
 			'tempfolder' : '/tmp/',
 			'colortemp' : None,
-			'colortemp-script' : '/root/colortemp.sh',
+			'colortemp-script' : '/root/photoframe_config/colortemp.sh',
 			'cfg' : None
 		}
 		self.userDefaults()
@@ -39,7 +40,6 @@ def userDefaults(self):
 			'height' : 1080,
 			'depth' : 32,
 			'tvservice' : 'DMT 82 DVI',
-			'resolution' : '',					# Place holder, used to deduce correct resolution before setting TV service
 			'timezone' : '',
 			'interval' : 60,					# Delay in seconds between images (minimum)
 			'display-off' : 22,				# What hour (24h) to disable display and sleep
@@ -52,6 +52,7 @@ def userDefaults(self):
 			'autooff-time' : 0,
 			'powersave' : '',
 			'shutdown-pin' : 26,
+			'display-driver' : 'none',
 		}
 
 	def load(self):
@@ -66,6 +67,10 @@ def load(self):
 					self.settings['cfg'] = tmp
 					self.settings['cfg'].update(tmp2)
 
+					# Remove deprecated fields
+					for field in settings.DEPRECATED_USER:
+						self.settings['cfg'].pop(field, None)
+
 					# Also, we need to iterate the settings and make sure numbers and floats are
 					# that, and not strings (which the old version did)
 					for k in self.settings['cfg']:
@@ -73,7 +78,7 @@ def load(self):
 					# Lastly, correct the tvservice field, should be "TEXT NUMBER TEXT"
 					# This is a little bit of a cheat
 					parts = self.settings['cfg']['tvservice'].split(' ')
-					if type(self.convertToNative(parts[1])) != int and type(self.convertToNative(parts[2])) == int:
+					if len(parts) == 3 and type(self.convertToNative(parts[1])) != int and type(self.convertToNative(parts[2])) == int:
 						logging.debug('Reordering tvservice value due to old bug')
 						self.settings['cfg']['tvservice'] = "%s %s %s" % (parts[0], parts[2], parts[1])
 						self.save()
diff --git a/modules/slideshow.py b/modules/slideshow.py
index a0ffbbb..5fa2e99 100644
--- a/modules/slideshow.py
+++ b/modules/slideshow.py
@@ -102,6 +102,9 @@ def presentation(self):
 
 				keyword = self.settings.getKeyword(index)
 				imgs, cache = self.getImages(keyword)
+				if imgs is None:
+					# Try again!
+					continue
 
 				# If we've seen all images for this keyword, skip to next
 				if cache in seen:
diff --git a/modules/timekeeper.py b/modules/timekeeper.py
index 1fc6654..f2dd9f1 100644
--- a/modules/timekeeper.py
+++ b/modules/timekeeper.py
@@ -44,7 +44,7 @@ def setConfiguration(self, hourOn, hourOff):
 		logging.debug('hourOn = %s, hourOff = %s' % (repr(hourOn), repr(hourOff)))
 
 	def setPowermode(self, mode):
-		if mode == '':
+		if mode == '' or mode == 'none':
 			self.ignoreSensor = True
 			self.ignoreSchedule = True
 		elif mode == 'sensor':
diff --git a/rgb565/README.md b/rgb565/README.md
new file mode 100644
index 0000000..30d3cea
--- /dev/null
+++ b/rgb565/README.md
@@ -0,0 +1,3 @@
+Simple tool to convert between RGB888 and RGB565.
+
+It's used to support 16bit displays like the ones from WaveShare
diff --git a/rgb565/rgb565 b/rgb565/rgb565
new file mode 100755
index 0000000..c64e639
Binary files /dev/null and b/rgb565/rgb565 differ
diff --git a/rgb565/rgb565.c b/rgb565/rgb565.c
new file mode 100644
index 0000000..802fe19
--- /dev/null
+++ b/rgb565/rgb565.c
@@ -0,0 +1,95 @@
+/**
+ *
+ * Simple tool to convert between RGB888 and RGB565
+ *
+ * Copyright 2018 Henric Andersson (henric@sensenet.nu)
+ *
+ * This file is part of Photoframe.
+ *
+ * Photoframe is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * Photoframe is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with Photoframe.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#include <stdio.h>
+#include <stdlib.h>
+#include <unistd.h>
+#include <string.h>
+
+#define RGB888toRGB565(r,g,b) ((((r) >> 3) << 11) | (((g) >> 2) << 5) | ((b) >> 3))
+#define RGB565toR8(x) ((((x) >> 11) & 0x1F) * 255 / 31)
+#define RGB565toG8(x) ((((x) >>  5) & 0x3F) * 255 / 63)
+#define RGB565toB8(x) ((((x)      ) & 0x1F) * 255 / 31)
+
+#define RGB888_BUFSIZE (3*1024)
+#define RGB565_BUFSIZE (2*1024)
+
+void convert565to888(void) {
+    unsigned short* in_buffer = (unsigned short*)malloc(RGB565_BUFSIZE);
+    unsigned char* out_buffer = (unsigned char*)malloc(RGB888_BUFSIZE);
+    int i = 0;
+    int size = 0;
+    int remain = 0;
+    char buf[256];
+
+    while (1) {
+        size = read(0, in_buffer + remain, RGB565_BUFSIZE - remain);
+        if (size < 1 && remain == 0)
+            break;
+        size += remain;
+        remain = size - (size/2)*2;
+        for (i = 0; i < size/2; ++i) {
+            out_buffer[i*3+0] = RGB565toR8(in_buffer[i]);
+            out_buffer[i*3+1] = RGB565toG8(in_buffer[i]);
+            out_buffer[i*3+2] = RGB565toB8(in_buffer[i]);
+        }
+        write(1, out_buffer, (size/2)*3);
+        if (remain)
+            memcpy(in_buffer, in_buffer+(size-remain), remain);
+    }
+    free(in_buffer);
+    free(out_buffer);
+}
+
+void convert888to565(void) {
+    unsigned char* in_buffer = (unsigned char*)malloc(RGB888_BUFSIZE);
+    unsigned short* out_buffer = (unsigned short*)malloc(RGB565_BUFSIZE);
+    int i = 0;
+    int size = 0;
+    int remain = 0;
+    char buf[256];
+
+    while (1) {
+        size = read(0, in_buffer + remain, RGB888_BUFSIZE - remain);
+        if (size < 1 && remain == 0)
+            break;
+        size += remain;
+        remain = size - (size/3)*3;
+        for (i = 0; i < size/3; ++i)
+            out_buffer[i] = RGB888toRGB565(in_buffer[i*3], in_buffer[i*3+1], in_buffer[i*3+2]);
+
+        write(1, out_buffer, (size/3)*2);
+        if (remain)
+            memcpy(in_buffer, in_buffer+(size-remain), remain);
+    }
+    free(in_buffer);
+    free(out_buffer);
+}
+
+int main(int argc, char **argv)
+{
+    if (argc == 2) // Any argument will kick it into reverse
+        convert565to888();
+    else
+        convert888to565();
+    return 0;
+}
diff --git a/static/index.css b/static/css/index.css
similarity index 100%
rename from static/index.css
rename to static/css/index.css
diff --git a/static/index.html b/static/index.html
index 4600521..1d892fa 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,10 +1,13 @@
 <html>
 	<head>
 		<title>PhotoFrame</title>
-		<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
-		<script type="text/javascript" src="handlebars-v4.0.11.js"></script>
-		<script type="text/javascript" src="index.js"></script>
-		<link rel="stylesheet" type="text/css" href="index.css">
+		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
+		<script type="text/javascript" src="js/handlebars-v4.0.11.js"></script>
+		<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
+		<script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
+		<script type="text/javascript" src="js/jquery.fileupload.js"></script>
+		<script type="text/javascript" src="js/index.js"></script>
+		<link rel="stylesheet" type="text/css" href="css/index.css">
 	</head>
 	<body>
 		<script type="text/javascript">
diff --git a/static/handlebars-v4.0.11.js b/static/js/handlebars-v4.0.11.js
similarity index 100%
rename from static/handlebars-v4.0.11.js
rename to static/js/handlebars-v4.0.11.js
diff --git a/static/index.js b/static/js/index.js
similarity index 96%
rename from static/index.js
rename to static/js/index.js
index 8921ede..5730ff8 100644
--- a/static/index.js
+++ b/static/js/index.js
@@ -183,6 +183,15 @@ function loadTimezone(funcOk)
 	});
 }
 
+function loadDrivers(funcOk)
+{
+	$.ajax({
+		url:"/details/drivers"
+	}).done(function(data) {
+		funcOk(data);
+	});
+}
+
 function loadSettings(funcOk)
 {
 	$.ajax({
@@ -199,7 +208,10 @@ function loadSettings(funcOk)
 			result['resolution'] = data;
 			loadTimezone(function(data) {
 				result['timezones'] = data;
-				funcOk(result);
+				loadDrivers(function(data) {
+					result['drivers'] = data;
+					funcOk(result);
+				});
 			});
 		});
 	});
diff --git a/static/jquery-3.3.1.min.js b/static/js/jquery-3.3.1.min.js
similarity index 100%
rename from static/jquery-3.3.1.min.js
rename to static/js/jquery-3.3.1.min.js
diff --git a/static/js/jquery.fileupload.js b/static/js/jquery.fileupload.js
new file mode 100644
index 0000000..7929daa
--- /dev/null
+++ b/static/js/jquery.fileupload.js
@@ -0,0 +1,1486 @@
+/*
+ * jQuery File Upload Plugin
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2010, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ */
+
+/* jshint nomen:false */
+/* global define, require, window, document, location, Blob, FormData */
+
+;(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define([
+            'jquery',
+            'jquery-ui/ui/widget'
+        ], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS:
+        factory(
+            require('jquery'),
+            require('./vendor/jquery.ui.widget')
+        );
+    } else {
+        // Browser globals:
+        factory(window.jQuery);
+    }
+}(function ($) {
+    'use strict';
+
+    // Detect file input support, based on
+    // http://viljamis.com/blog/2012/file-upload-support-on-mobile/
+    $.support.fileInput = !(new RegExp(
+        // Handle devices which give false positives for the feature detection:
+        '(Android (1\\.[0156]|2\\.[01]))' +
+            '|(Windows Phone (OS 7|8\\.0))|(XBLWP)|(ZuneWP)|(WPDesktop)' +
+            '|(w(eb)?OSBrowser)|(webOS)' +
+            '|(Kindle/(1\\.0|2\\.[05]|3\\.0))'
+    ).test(window.navigator.userAgent) ||
+        // Feature detection for all other devices:
+        $('<input type="file"/>').prop('disabled'));
+
+    // The FileReader API is not actually used, but works as feature detection,
+    // as some Safari versions (5?) support XHR file uploads via the FormData API,
+    // but not non-multipart XHR file uploads.
+    // window.XMLHttpRequestUpload is not available on IE10, so we check for
+    // window.ProgressEvent instead to detect XHR2 file upload capability:
+    $.support.xhrFileUpload = !!(window.ProgressEvent && window.FileReader);
+    $.support.xhrFormDataFileUpload = !!window.FormData;
+
+    // Detect support for Blob slicing (required for chunked uploads):
+    $.support.blobSlice = window.Blob && (Blob.prototype.slice ||
+        Blob.prototype.webkitSlice || Blob.prototype.mozSlice);
+
+    // Helper function to create drag handlers for dragover/dragenter/dragleave:
+    function getDragHandler(type) {
+        var isDragOver = type === 'dragover';
+        return function (e) {
+            e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer;
+            var dataTransfer = e.dataTransfer;
+            if (dataTransfer && $.inArray('Files', dataTransfer.types) !== -1 &&
+                    this._trigger(
+                        type,
+                        $.Event(type, {delegatedEvent: e})
+                    ) !== false) {
+                e.preventDefault();
+                if (isDragOver) {
+                    dataTransfer.dropEffect = 'copy';
+                }
+            }
+        };
+    }
+
+    // The fileupload widget listens for change events on file input fields defined
+    // via fileInput setting and paste or drop events of the given dropZone.
+    // In addition to the default jQuery Widget methods, the fileupload widget
+    // exposes the "add" and "send" methods, to add or directly send files using
+    // the fileupload API.
+    // By default, files added via file input selection, paste, drag & drop or
+    // "add" method are uploaded immediately, but it is possible to override
+    // the "add" callback option to queue file uploads.
+    $.widget('blueimp.fileupload', {
+
+        options: {
+            // The drop target element(s), by the default the complete document.
+            // Set to null to disable drag & drop support:
+            dropZone: $(document),
+            // The paste target element(s), by the default undefined.
+            // Set to a DOM node or jQuery object to enable file pasting:
+            pasteZone: undefined,
+            // The file input field(s), that are listened to for change events.
+            // If undefined, it is set to the file input fields inside
+            // of the widget element on plugin initialization.
+            // Set to null to disable the change listener.
+            fileInput: undefined,
+            // By default, the file input field is replaced with a clone after
+            // each input field change event. This is required for iframe transport
+            // queues and allows change events to be fired for the same file
+            // selection, but can be disabled by setting the following option to false:
+            replaceFileInput: true,
+            // The parameter name for the file form data (the request argument name).
+            // If undefined or empty, the name property of the file input field is
+            // used, or "files[]" if the file input name property is also empty,
+            // can be a string or an array of strings:
+            paramName: undefined,
+            // By default, each file of a selection is uploaded using an individual
+            // request for XHR type uploads. Set to false to upload file
+            // selections in one request each:
+            singleFileUploads: true,
+            // To limit the number of files uploaded with one XHR request,
+            // set the following option to an integer greater than 0:
+            limitMultiFileUploads: undefined,
+            // The following option limits the number of files uploaded with one
+            // XHR request to keep the request size under or equal to the defined
+            // limit in bytes:
+            limitMultiFileUploadSize: undefined,
+            // Multipart file uploads add a number of bytes to each uploaded file,
+            // therefore the following option adds an overhead for each file used
+            // in the limitMultiFileUploadSize configuration:
+            limitMultiFileUploadSizeOverhead: 512,
+            // Set the following option to true to issue all file upload requests
+            // in a sequential order:
+            sequentialUploads: false,
+            // To limit the number of concurrent uploads,
+            // set the following option to an integer greater than 0:
+            limitConcurrentUploads: undefined,
+            // Set the following option to true to force iframe transport uploads:
+            forceIframeTransport: false,
+            // Set the following option to the location of a redirect url on the
+            // origin server, for cross-domain iframe transport uploads:
+            redirect: undefined,
+            // The parameter name for the redirect url, sent as part of the form
+            // data and set to 'redirect' if this option is empty:
+            redirectParamName: undefined,
+            // Set the following option to the location of a postMessage window,
+            // to enable postMessage transport uploads:
+            postMessage: undefined,
+            // By default, XHR file uploads are sent as multipart/form-data.
+            // The iframe transport is always using multipart/form-data.
+            // Set to false to enable non-multipart XHR uploads:
+            multipart: true,
+            // To upload large files in smaller chunks, set the following option
+            // to a preferred maximum chunk size. If set to 0, null or undefined,
+            // or the browser does not support the required Blob API, files will
+            // be uploaded as a whole.
+            maxChunkSize: undefined,
+            // When a non-multipart upload or a chunked multipart upload has been
+            // aborted, this option can be used to resume the upload by setting
+            // it to the size of the already uploaded bytes. This option is most
+            // useful when modifying the options object inside of the "add" or
+            // "send" callbacks, as the options are cloned for each file upload.
+            uploadedBytes: undefined,
+            // By default, failed (abort or error) file uploads are removed from the
+            // global progress calculation. Set the following option to false to
+            // prevent recalculating the global progress data:
+            recalculateProgress: true,
+            // Interval in milliseconds to calculate and trigger progress events:
+            progressInterval: 100,
+            // Interval in milliseconds to calculate progress bitrate:
+            bitrateInterval: 500,
+            // By default, uploads are started automatically when adding files:
+            autoUpload: true,
+
+            // Error and info messages:
+            messages: {
+                uploadedBytes: 'Uploaded bytes exceed file size'
+            },
+
+            // Translation function, gets the message key to be translated
+            // and an object with context specific data as arguments:
+            i18n: function (message, context) {
+                message = this.messages[message] || message.toString();
+                if (context) {
+                    $.each(context, function (key, value) {
+                        message = message.replace('{' + key + '}', value);
+                    });
+                }
+                return message;
+            },
+
+            // Additional form data to be sent along with the file uploads can be set
+            // using this option, which accepts an array of objects with name and
+            // value properties, a function returning such an array, a FormData
+            // object (for XHR file uploads), or a simple object.
+            // The form of the first fileInput is given as parameter to the function:
+            formData: function (form) {
+                return form.serializeArray();
+            },
+
+            // The add callback is invoked as soon as files are added to the fileupload
+            // widget (via file input selection, drag & drop, paste or add API call).
+            // If the singleFileUploads option is enabled, this callback will be
+            // called once for each file in the selection for XHR file uploads, else
+            // once for each file selection.
+            //
+            // The upload starts when the submit method is invoked on the data parameter.
+            // The data object contains a files property holding the added files
+            // and allows you to override plugin options as well as define ajax settings.
+            //
+            // Listeners for this callback can also be bound the following way:
+            // .bind('fileuploadadd', func);
+            //
+            // data.submit() returns a Promise object and allows to attach additional
+            // handlers using jQuery's Deferred callbacks:
+            // data.submit().done(func).fail(func).always(func);
+            add: function (e, data) {
+                if (e.isDefaultPrevented()) {
+                    return false;
+                }
+                if (data.autoUpload || (data.autoUpload !== false &&
+                        $(this).fileupload('option', 'autoUpload'))) {
+                    data.process().done(function () {
+                        data.submit();
+                    });
+                }
+            },
+
+            // Other callbacks:
+
+            // Callback for the submit event of each file upload:
+            // submit: function (e, data) {}, // .bind('fileuploadsubmit', func);
+
+            // Callback for the start of each file upload request:
+            // send: function (e, data) {}, // .bind('fileuploadsend', func);
+
+            // Callback for successful uploads:
+            // done: function (e, data) {}, // .bind('fileuploaddone', func);
+
+            // Callback for failed (abort or error) uploads:
+            // fail: function (e, data) {}, // .bind('fileuploadfail', func);
+
+            // Callback for completed (success, abort or error) requests:
+            // always: function (e, data) {}, // .bind('fileuploadalways', func);
+
+            // Callback for upload progress events:
+            // progress: function (e, data) {}, // .bind('fileuploadprogress', func);
+
+            // Callback for global upload progress events:
+            // progressall: function (e, data) {}, // .bind('fileuploadprogressall', func);
+
+            // Callback for uploads start, equivalent to the global ajaxStart event:
+            // start: function (e) {}, // .bind('fileuploadstart', func);
+
+            // Callback for uploads stop, equivalent to the global ajaxStop event:
+            // stop: function (e) {}, // .bind('fileuploadstop', func);
+
+            // Callback for change events of the fileInput(s):
+            // change: function (e, data) {}, // .bind('fileuploadchange', func);
+
+            // Callback for paste events to the pasteZone(s):
+            // paste: function (e, data) {}, // .bind('fileuploadpaste', func);
+
+            // Callback for drop events of the dropZone(s):
+            // drop: function (e, data) {}, // .bind('fileuploaddrop', func);
+
+            // Callback for dragover events of the dropZone(s):
+            // dragover: function (e) {}, // .bind('fileuploaddragover', func);
+
+            // Callback for the start of each chunk upload request:
+            // chunksend: function (e, data) {}, // .bind('fileuploadchunksend', func);
+
+            // Callback for successful chunk uploads:
+            // chunkdone: function (e, data) {}, // .bind('fileuploadchunkdone', func);
+
+            // Callback for failed (abort or error) chunk uploads:
+            // chunkfail: function (e, data) {}, // .bind('fileuploadchunkfail', func);
+
+            // Callback for completed (success, abort or error) chunk upload requests:
+            // chunkalways: function (e, data) {}, // .bind('fileuploadchunkalways', func);
+
+            // The plugin options are used as settings object for the ajax calls.
+            // The following are jQuery ajax settings required for the file uploads:
+            processData: false,
+            contentType: false,
+            cache: false,
+            timeout: 0
+        },
+
+        // A list of options that require reinitializing event listeners and/or
+        // special initialization code:
+        _specialOptions: [
+            'fileInput',
+            'dropZone',
+            'pasteZone',
+            'multipart',
+            'forceIframeTransport'
+        ],
+
+        _blobSlice: $.support.blobSlice && function () {
+            var slice = this.slice || this.webkitSlice || this.mozSlice;
+            return slice.apply(this, arguments);
+        },
+
+        _BitrateTimer: function () {
+            this.timestamp = ((Date.now) ? Date.now() : (new Date()).getTime());
+            this.loaded = 0;
+            this.bitrate = 0;
+            this.getBitrate = function (now, loaded, interval) {
+                var timeDiff = now - this.timestamp;
+                if (!this.bitrate || !interval || timeDiff > interval) {
+                    this.bitrate = (loaded - this.loaded) * (1000 / timeDiff) * 8;
+                    this.loaded = loaded;
+                    this.timestamp = now;
+                }
+                return this.bitrate;
+            };
+        },
+
+        _isXHRUpload: function (options) {
+            return !options.forceIframeTransport &&
+                ((!options.multipart && $.support.xhrFileUpload) ||
+                $.support.xhrFormDataFileUpload);
+        },
+
+        _getFormData: function (options) {
+            var formData;
+            if ($.type(options.formData) === 'function') {
+                return options.formData(options.form);
+            }
+            if ($.isArray(options.formData)) {
+                return options.formData;
+            }
+            if ($.type(options.formData) === 'object') {
+                formData = [];
+                $.each(options.formData, function (name, value) {
+                    formData.push({name: name, value: value});
+                });
+                return formData;
+            }
+            return [];
+        },
+
+        _getTotal: function (files) {
+            var total = 0;
+            $.each(files, function (index, file) {
+                total += file.size || 1;
+            });
+            return total;
+        },
+
+        _initProgressObject: function (obj) {
+            var progress = {
+                loaded: 0,
+                total: 0,
+                bitrate: 0
+            };
+            if (obj._progress) {
+                $.extend(obj._progress, progress);
+            } else {
+                obj._progress = progress;
+            }
+        },
+
+        _initResponseObject: function (obj) {
+            var prop;
+            if (obj._response) {
+                for (prop in obj._response) {
+                    if (obj._response.hasOwnProperty(prop)) {
+                        delete obj._response[prop];
+                    }
+                }
+            } else {
+                obj._response = {};
+            }
+        },
+
+        _onProgress: function (e, data) {
+            if (e.lengthComputable) {
+                var now = ((Date.now) ? Date.now() : (new Date()).getTime()),
+                    loaded;
+                if (data._time && data.progressInterval &&
+                        (now - data._time < data.progressInterval) &&
+                        e.loaded !== e.total) {
+                    return;
+                }
+                data._time = now;
+                loaded = Math.floor(
+                    e.loaded / e.total * (data.chunkSize || data._progress.total)
+                ) + (data.uploadedBytes || 0);
+                // Add the difference from the previously loaded state
+                // to the global loaded counter:
+                this._progress.loaded += (loaded - data._progress.loaded);
+                this._progress.bitrate = this._bitrateTimer.getBitrate(
+                    now,
+                    this._progress.loaded,
+                    data.bitrateInterval
+                );
+                data._progress.loaded = data.loaded = loaded;
+                data._progress.bitrate = data.bitrate = data._bitrateTimer.getBitrate(
+                    now,
+                    loaded,
+                    data.bitrateInterval
+                );
+                // Trigger a custom progress event with a total data property set
+                // to the file size(s) of the current upload and a loaded data
+                // property calculated accordingly:
+                this._trigger(
+                    'progress',
+                    $.Event('progress', {delegatedEvent: e}),
+                    data
+                );
+                // Trigger a global progress event for all current file uploads,
+                // including ajax calls queued for sequential file uploads:
+                this._trigger(
+                    'progressall',
+                    $.Event('progressall', {delegatedEvent: e}),
+                    this._progress
+                );
+            }
+        },
+
+        _initProgressListener: function (options) {
+            var that = this,
+                xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
+            // Accesss to the native XHR object is required to add event listeners
+            // for the upload progress event:
+            if (xhr.upload) {
+                $(xhr.upload).bind('progress', function (e) {
+                    var oe = e.originalEvent;
+                    // Make sure the progress event properties get copied over:
+                    e.lengthComputable = oe.lengthComputable;
+                    e.loaded = oe.loaded;
+                    e.total = oe.total;
+                    that._onProgress(e, options);
+                });
+                options.xhr = function () {
+                    return xhr;
+                };
+            }
+        },
+
+        _isInstanceOf: function (type, obj) {
+            // Cross-frame instanceof check
+            return Object.prototype.toString.call(obj) === '[object ' + type + ']';
+        },
+
+        _initXHRData: function (options) {
+            var that = this,
+                formData,
+                file = options.files[0],
+                // Ignore non-multipart setting if not supported:
+                multipart = options.multipart || !$.support.xhrFileUpload,
+                paramName = $.type(options.paramName) === 'array' ?
+                    options.paramName[0] : options.paramName;
+            options.headers = $.extend({}, options.headers);
+            if (options.contentRange) {
+                options.headers['Content-Range'] = options.contentRange;
+            }
+            if (!multipart || options.blob || !this._isInstanceOf('File', file)) {
+                options.headers['Content-Disposition'] = 'attachment; filename="' +
+                    encodeURI(file.uploadName || file.name) + '"';
+            }
+            if (!multipart) {
+                options.contentType = file.type || 'application/octet-stream';
+                options.data = options.blob || file;
+            } else if ($.support.xhrFormDataFileUpload) {
+                if (options.postMessage) {
+                    // window.postMessage does not allow sending FormData
+                    // objects, so we just add the File/Blob objects to
+                    // the formData array and let the postMessage window
+                    // create the FormData object out of this array:
+                    formData = this._getFormData(options);
+                    if (options.blob) {
+                        formData.push({
+                            name: paramName,
+                            value: options.blob
+                        });
+                    } else {
+                        $.each(options.files, function (index, file) {
+                            formData.push({
+                                name: ($.type(options.paramName) === 'array' &&
+                                    options.paramName[index]) || paramName,
+                                value: file
+                            });
+                        });
+                    }
+                } else {
+                    if (that._isInstanceOf('FormData', options.formData)) {
+                        formData = options.formData;
+                    } else {
+                        formData = new FormData();
+                        $.each(this._getFormData(options), function (index, field) {
+                            formData.append(field.name, field.value);
+                        });
+                    }
+                    if (options.blob) {
+                        formData.append(
+                            paramName,
+                            options.blob,
+                            file.uploadName || file.name
+                        );
+                    } else {
+                        $.each(options.files, function (index, file) {
+                            // This check allows the tests to run with
+                            // dummy objects:
+                            if (that._isInstanceOf('File', file) ||
+                                    that._isInstanceOf('Blob', file)) {
+                                formData.append(
+                                    ($.type(options.paramName) === 'array' &&
+                                        options.paramName[index]) || paramName,
+                                    file,
+                                    file.uploadName || file.name
+                                );
+                            }
+                        });
+                    }
+                }
+                options.data = formData;
+            }
+            // Blob reference is not needed anymore, free memory:
+            options.blob = null;
+        },
+
+        _initIframeSettings: function (options) {
+            var targetHost = $('<a></a>').prop('href', options.url).prop('host');
+            // Setting the dataType to iframe enables the iframe transport:
+            options.dataType = 'iframe ' + (options.dataType || '');
+            // The iframe transport accepts a serialized array as form data:
+            options.formData = this._getFormData(options);
+            // Add redirect url to form data on cross-domain uploads:
+            if (options.redirect && targetHost && targetHost !== location.host) {
+                options.formData.push({
+                    name: options.redirectParamName || 'redirect',
+                    value: options.redirect
+                });
+            }
+        },
+
+        _initDataSettings: function (options) {
+            if (this._isXHRUpload(options)) {
+                if (!this._chunkedUpload(options, true)) {
+                    if (!options.data) {
+                        this._initXHRData(options);
+                    }
+                    this._initProgressListener(options);
+                }
+                if (options.postMessage) {
+                    // Setting the dataType to postmessage enables the
+                    // postMessage transport:
+                    options.dataType = 'postmessage ' + (options.dataType || '');
+                }
+            } else {
+                this._initIframeSettings(options);
+            }
+        },
+
+        _getParamName: function (options) {
+            var fileInput = $(options.fileInput),
+                paramName = options.paramName;
+            if (!paramName) {
+                paramName = [];
+                fileInput.each(function () {
+                    var input = $(this),
+                        name = input.prop('name') || 'files[]',
+                        i = (input.prop('files') || [1]).length;
+                    while (i) {
+                        paramName.push(name);
+                        i -= 1;
+                    }
+                });
+                if (!paramName.length) {
+                    paramName = [fileInput.prop('name') || 'files[]'];
+                }
+            } else if (!$.isArray(paramName)) {
+                paramName = [paramName];
+            }
+            return paramName;
+        },
+
+        _initFormSettings: function (options) {
+            // Retrieve missing options from the input field and the
+            // associated form, if available:
+            if (!options.form || !options.form.length) {
+                options.form = $(options.fileInput.prop('form'));
+                // If the given file input doesn't have an associated form,
+                // use the default widget file input's form:
+                if (!options.form.length) {
+                    options.form = $(this.options.fileInput.prop('form'));
+                }
+            }
+            options.paramName = this._getParamName(options);
+            if (!options.url) {
+                options.url = options.form.prop('action') || location.href;
+            }
+            // The HTTP request method must be "POST" or "PUT":
+            options.type = (options.type ||
+                ($.type(options.form.prop('method')) === 'string' &&
+                    options.form.prop('method')) || ''
+                ).toUpperCase();
+            if (options.type !== 'POST' && options.type !== 'PUT' &&
+                    options.type !== 'PATCH') {
+                options.type = 'POST';
+            }
+            if (!options.formAcceptCharset) {
+                options.formAcceptCharset = options.form.attr('accept-charset');
+            }
+        },
+
+        _getAJAXSettings: function (data) {
+            var options = $.extend({}, this.options, data);
+            this._initFormSettings(options);
+            this._initDataSettings(options);
+            return options;
+        },
+
+        // jQuery 1.6 doesn't provide .state(),
+        // while jQuery 1.8+ removed .isRejected() and .isResolved():
+        _getDeferredState: function (deferred) {
+            if (deferred.state) {
+                return deferred.state();
+            }
+            if (deferred.isResolved()) {
+                return 'resolved';
+            }
+            if (deferred.isRejected()) {
+                return 'rejected';
+            }
+            return 'pending';
+        },
+
+        // Maps jqXHR callbacks to the equivalent
+        // methods of the given Promise object:
+        _enhancePromise: function (promise) {
+            promise.success = promise.done;
+            promise.error = promise.fail;
+            promise.complete = promise.always;
+            return promise;
+        },
+
+        // Creates and returns a Promise object enhanced with
+        // the jqXHR methods abort, success, error and complete:
+        _getXHRPromise: function (resolveOrReject, context, args) {
+            var dfd = $.Deferred(),
+                promise = dfd.promise();
+            context = context || this.options.context || promise;
+            if (resolveOrReject === true) {
+                dfd.resolveWith(context, args);
+            } else if (resolveOrReject === false) {
+                dfd.rejectWith(context, args);
+            }
+            promise.abort = dfd.promise;
+            return this._enhancePromise(promise);
+        },
+
+        // Adds convenience methods to the data callback argument:
+        _addConvenienceMethods: function (e, data) {
+            var that = this,
+                getPromise = function (args) {
+                    return $.Deferred().resolveWith(that, args).promise();
+                };
+            data.process = function (resolveFunc, rejectFunc) {
+                if (resolveFunc || rejectFunc) {
+                    data._processQueue = this._processQueue =
+                        (this._processQueue || getPromise([this])).then(
+                            function () {
+                                if (data.errorThrown) {
+                                    return $.Deferred()
+                                        .rejectWith(that, [data]).promise();
+                                }
+                                return getPromise(arguments);
+                            }
+                        ).then(resolveFunc, rejectFunc);
+                }
+                return this._processQueue || getPromise([this]);
+            };
+            data.submit = function () {
+                if (this.state() !== 'pending') {
+                    data.jqXHR = this.jqXHR =
+                        (that._trigger(
+                            'submit',
+                            $.Event('submit', {delegatedEvent: e}),
+                            this
+                        ) !== false) && that._onSend(e, this);
+                }
+                return this.jqXHR || that._getXHRPromise();
+            };
+            data.abort = function () {
+                if (this.jqXHR) {
+                    return this.jqXHR.abort();
+                }
+                this.errorThrown = 'abort';
+                that._trigger('fail', null, this);
+                return that._getXHRPromise(false);
+            };
+            data.state = function () {
+                if (this.jqXHR) {
+                    return that._getDeferredState(this.jqXHR);
+                }
+                if (this._processQueue) {
+                    return that._getDeferredState(this._processQueue);
+                }
+            };
+            data.processing = function () {
+                return !this.jqXHR && this._processQueue && that
+                    ._getDeferredState(this._processQueue) === 'pending';
+            };
+            data.progress = function () {
+                return this._progress;
+            };
+            data.response = function () {
+                return this._response;
+            };
+        },
+
+        // Parses the Range header from the server response
+        // and returns the uploaded bytes:
+        _getUploadedBytes: function (jqXHR) {
+            var range = jqXHR.getResponseHeader('Range'),
+                parts = range && range.split('-'),
+                upperBytesPos = parts && parts.length > 1 &&
+                    parseInt(parts[1], 10);
+            return upperBytesPos && upperBytesPos + 1;
+        },
+
+        // Uploads a file in multiple, sequential requests
+        // by splitting the file up in multiple blob chunks.
+        // If the second parameter is true, only tests if the file
+        // should be uploaded in chunks, but does not invoke any
+        // upload requests:
+        _chunkedUpload: function (options, testOnly) {
+            options.uploadedBytes = options.uploadedBytes || 0;
+            var that = this,
+                file = options.files[0],
+                fs = file.size,
+                ub = options.uploadedBytes,
+                mcs = options.maxChunkSize || fs,
+                slice = this._blobSlice,
+                dfd = $.Deferred(),
+                promise = dfd.promise(),
+                jqXHR,
+                upload;
+            if (!(this._isXHRUpload(options) && slice && (ub || ($.type(mcs) === 'function' ? mcs(options) : mcs) < fs)) ||
+                    options.data) {
+                return false;
+            }
+            if (testOnly) {
+                return true;
+            }
+            if (ub >= fs) {
+                file.error = options.i18n('uploadedBytes');
+                return this._getXHRPromise(
+                    false,
+                    options.context,
+                    [null, 'error', file.error]
+                );
+            }
+            // The chunk upload method:
+            upload = function () {
+                // Clone the options object for each chunk upload:
+                var o = $.extend({}, options),
+                    currentLoaded = o._progress.loaded;
+                o.blob = slice.call(
+                    file,
+                    ub,
+                    ub + ($.type(mcs) === 'function' ? mcs(o) : mcs),
+                    file.type
+                );
+                // Store the current chunk size, as the blob itself
+                // will be dereferenced after data processing:
+                o.chunkSize = o.blob.size;
+                // Expose the chunk bytes position range:
+                o.contentRange = 'bytes ' + ub + '-' +
+                    (ub + o.chunkSize - 1) + '/' + fs;
+                // Process the upload data (the blob and potential form data):
+                that._initXHRData(o);
+                // Add progress listeners for this chunk upload:
+                that._initProgressListener(o);
+                jqXHR = ((that._trigger('chunksend', null, o) !== false && $.ajax(o)) ||
+                        that._getXHRPromise(false, o.context))
+                    .done(function (result, textStatus, jqXHR) {
+                        ub = that._getUploadedBytes(jqXHR) ||
+                            (ub + o.chunkSize);
+                        // Create a progress event if no final progress event
+                        // with loaded equaling total has been triggered
+                        // for this chunk:
+                        if (currentLoaded + o.chunkSize - o._progress.loaded) {
+                            that._onProgress($.Event('progress', {
+                                lengthComputable: true,
+                                loaded: ub - o.uploadedBytes,
+                                total: ub - o.uploadedBytes
+                            }), o);
+                        }
+                        options.uploadedBytes = o.uploadedBytes = ub;
+                        o.result = result;
+                        o.textStatus = textStatus;
+                        o.jqXHR = jqXHR;
+                        that._trigger('chunkdone', null, o);
+                        that._trigger('chunkalways', null, o);
+                        if (ub < fs) {
+                            // File upload not yet complete,
+                            // continue with the next chunk:
+                            upload();
+                        } else {
+                            dfd.resolveWith(
+                                o.context,
+                                [result, textStatus, jqXHR]
+                            );
+                        }
+                    })
+                    .fail(function (jqXHR, textStatus, errorThrown) {
+                        o.jqXHR = jqXHR;
+                        o.textStatus = textStatus;
+                        o.errorThrown = errorThrown;
+                        that._trigger('chunkfail', null, o);
+                        that._trigger('chunkalways', null, o);
+                        dfd.rejectWith(
+                            o.context,
+                            [jqXHR, textStatus, errorThrown]
+                        );
+                    });
+            };
+            this._enhancePromise(promise);
+            promise.abort = function () {
+                return jqXHR.abort();
+            };
+            upload();
+            return promise;
+        },
+
+        _beforeSend: function (e, data) {
+            if (this._active === 0) {
+                // the start callback is triggered when an upload starts
+                // and no other uploads are currently running,
+                // equivalent to the global ajaxStart event:
+                this._trigger('start');
+                // Set timer for global bitrate progress calculation:
+                this._bitrateTimer = new this._BitrateTimer();
+                // Reset the global progress values:
+                this._progress.loaded = this._progress.total = 0;
+                this._progress.bitrate = 0;
+            }
+            // Make sure the container objects for the .response() and
+            // .progress() methods on the data object are available
+            // and reset to their initial state:
+            this._initResponseObject(data);
+            this._initProgressObject(data);
+            data._progress.loaded = data.loaded = data.uploadedBytes || 0;
+            data._progress.total = data.total = this._getTotal(data.files) || 1;
+            data._progress.bitrate = data.bitrate = 0;
+            this._active += 1;
+            // Initialize the global progress values:
+            this._progress.loaded += data.loaded;
+            this._progress.total += data.total;
+        },
+
+        _onDone: function (result, textStatus, jqXHR, options) {
+            var total = options._progress.total,
+                response = options._response;
+            if (options._progress.loaded < total) {
+                // Create a progress event if no final progress event
+                // with loaded equaling total has been triggered:
+                this._onProgress($.Event('progress', {
+                    lengthComputable: true,
+                    loaded: total,
+                    total: total
+                }), options);
+            }
+            response.result = options.result = result;
+            response.textStatus = options.textStatus = textStatus;
+            response.jqXHR = options.jqXHR = jqXHR;
+            this._trigger('done', null, options);
+        },
+
+        _onFail: function (jqXHR, textStatus, errorThrown, options) {
+            var response = options._response;
+            if (options.recalculateProgress) {
+                // Remove the failed (error or abort) file upload from
+                // the global progress calculation:
+                this._progress.loaded -= options._progress.loaded;
+                this._progress.total -= options._progress.total;
+            }
+            response.jqXHR = options.jqXHR = jqXHR;
+            response.textStatus = options.textStatus = textStatus;
+            response.errorThrown = options.errorThrown = errorThrown;
+            this._trigger('fail', null, options);
+        },
+
+        _onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) {
+            // jqXHRorResult, textStatus and jqXHRorError are added to the
+            // options object via done and fail callbacks
+            this._trigger('always', null, options);
+        },
+
+        _onSend: function (e, data) {
+            if (!data.submit) {
+                this._addConvenienceMethods(e, data);
+            }
+            var that = this,
+                jqXHR,
+                aborted,
+                slot,
+                pipe,
+                options = that._getAJAXSettings(data),
+                send = function () {
+                    that._sending += 1;
+                    // Set timer for bitrate progress calculation:
+                    options._bitrateTimer = new that._BitrateTimer();
+                    jqXHR = jqXHR || (
+                        ((aborted || that._trigger(
+                            'send',
+                            $.Event('send', {delegatedEvent: e}),
+                            options
+                        ) === false) &&
+                        that._getXHRPromise(false, options.context, aborted)) ||
+                        that._chunkedUpload(options) || $.ajax(options)
+                    ).done(function (result, textStatus, jqXHR) {
+                        that._onDone(result, textStatus, jqXHR, options);
+                    }).fail(function (jqXHR, textStatus, errorThrown) {
+                        that._onFail(jqXHR, textStatus, errorThrown, options);
+                    }).always(function (jqXHRorResult, textStatus, jqXHRorError) {
+                        that._onAlways(
+                            jqXHRorResult,
+                            textStatus,
+                            jqXHRorError,
+                            options
+                        );
+                        that._sending -= 1;
+                        that._active -= 1;
+                        if (options.limitConcurrentUploads &&
+                                options.limitConcurrentUploads > that._sending) {
+                            // Start the next queued upload,
+                            // that has not been aborted:
+                            var nextSlot = that._slots.shift();
+                            while (nextSlot) {
+                                if (that._getDeferredState(nextSlot) === 'pending') {
+                                    nextSlot.resolve();
+                                    break;
+                                }
+                                nextSlot = that._slots.shift();
+                            }
+                        }
+                        if (that._active === 0) {
+                            // The stop callback is triggered when all uploads have
+                            // been completed, equivalent to the global ajaxStop event:
+                            that._trigger('stop');
+                        }
+                    });
+                    return jqXHR;
+                };
+            this._beforeSend(e, options);
+            if (this.options.sequentialUploads ||
+                    (this.options.limitConcurrentUploads &&
+                    this.options.limitConcurrentUploads <= this._sending)) {
+                if (this.options.limitConcurrentUploads > 1) {
+                    slot = $.Deferred();
+                    this._slots.push(slot);
+                    pipe = slot.then(send);
+                } else {
+                    this._sequence = this._sequence.then(send, send);
+                    pipe = this._sequence;
+                }
+                // Return the piped Promise object, enhanced with an abort method,
+                // which is delegated to the jqXHR object of the current upload,
+                // and jqXHR callbacks mapped to the equivalent Promise methods:
+                pipe.abort = function () {
+                    aborted = [undefined, 'abort', 'abort'];
+                    if (!jqXHR) {
+                        if (slot) {
+                            slot.rejectWith(options.context, aborted);
+                        }
+                        return send();
+                    }
+                    return jqXHR.abort();
+                };
+                return this._enhancePromise(pipe);
+            }
+            return send();
+        },
+
+        _onAdd: function (e, data) {
+            var that = this,
+                result = true,
+                options = $.extend({}, this.options, data),
+                files = data.files,
+                filesLength = files.length,
+                limit = options.limitMultiFileUploads,
+                limitSize = options.limitMultiFileUploadSize,
+                overhead = options.limitMultiFileUploadSizeOverhead,
+                batchSize = 0,
+                paramName = this._getParamName(options),
+                paramNameSet,
+                paramNameSlice,
+                fileSet,
+                i,
+                j = 0;
+            if (!filesLength) {
+                return false;
+            }
+            if (limitSize && files[0].size === undefined) {
+                limitSize = undefined;
+            }
+            if (!(options.singleFileUploads || limit || limitSize) ||
+                    !this._isXHRUpload(options)) {
+                fileSet = [files];
+                paramNameSet = [paramName];
+            } else if (!(options.singleFileUploads || limitSize) && limit) {
+                fileSet = [];
+                paramNameSet = [];
+                for (i = 0; i < filesLength; i += limit) {
+                    fileSet.push(files.slice(i, i + limit));
+                    paramNameSlice = paramName.slice(i, i + limit);
+                    if (!paramNameSlice.length) {
+                        paramNameSlice = paramName;
+                    }
+                    paramNameSet.push(paramNameSlice);
+                }
+            } else if (!options.singleFileUploads && limitSize) {
+                fileSet = [];
+                paramNameSet = [];
+                for (i = 0; i < filesLength; i = i + 1) {
+                    batchSize += files[i].size + overhead;
+                    if (i + 1 === filesLength ||
+                            ((batchSize + files[i + 1].size + overhead) > limitSize) ||
+                            (limit && i + 1 - j >= limit)) {
+                        fileSet.push(files.slice(j, i + 1));
+                        paramNameSlice = paramName.slice(j, i + 1);
+                        if (!paramNameSlice.length) {
+                            paramNameSlice = paramName;
+                        }
+                        paramNameSet.push(paramNameSlice);
+                        j = i + 1;
+                        batchSize = 0;
+                    }
+                }
+            } else {
+                paramNameSet = paramName;
+            }
+            data.originalFiles = files;
+            $.each(fileSet || files, function (index, element) {
+                var newData = $.extend({}, data);
+                newData.files = fileSet ? element : [element];
+                newData.paramName = paramNameSet[index];
+                that._initResponseObject(newData);
+                that._initProgressObject(newData);
+                that._addConvenienceMethods(e, newData);
+                result = that._trigger(
+                    'add',
+                    $.Event('add', {delegatedEvent: e}),
+                    newData
+                );
+                return result;
+            });
+            return result;
+        },
+
+        _replaceFileInput: function (data) {
+            var input = data.fileInput,
+                inputClone = input.clone(true),
+                restoreFocus = input.is(document.activeElement);
+            // Add a reference for the new cloned file input to the data argument:
+            data.fileInputClone = inputClone;
+            $('<form></form>').append(inputClone)[0].reset();
+            // Detaching allows to insert the fileInput on another form
+            // without loosing the file input value:
+            input.after(inputClone).detach();
+            // If the fileInput had focus before it was detached,
+            // restore focus to the inputClone.
+            if (restoreFocus) {
+                inputClone.focus();
+            }
+            // Avoid memory leaks with the detached file input:
+            $.cleanData(input.unbind('remove'));
+            // Replace the original file input element in the fileInput
+            // elements set with the clone, which has been copied including
+            // event handlers:
+            this.options.fileInput = this.options.fileInput.map(function (i, el) {
+                if (el === input[0]) {
+                    return inputClone[0];
+                }
+                return el;
+            });
+            // If the widget has been initialized on the file input itself,
+            // override this.element with the file input clone:
+            if (input[0] === this.element[0]) {
+                this.element = inputClone;
+            }
+        },
+
+        _handleFileTreeEntry: function (entry, path) {
+            var that = this,
+                dfd = $.Deferred(),
+                entries = [],
+                dirReader,
+                errorHandler = function (e) {
+                    if (e && !e.entry) {
+                        e.entry = entry;
+                    }
+                    // Since $.when returns immediately if one
+                    // Deferred is rejected, we use resolve instead.
+                    // This allows valid files and invalid items
+                    // to be returned together in one set:
+                    dfd.resolve([e]);
+                },
+                successHandler = function (entries) {
+                    that._handleFileTreeEntries(
+                        entries,
+                        path + entry.name + '/'
+                    ).done(function (files) {
+                        dfd.resolve(files);
+                    }).fail(errorHandler);
+                },
+                readEntries = function () {
+                    dirReader.readEntries(function (results) {
+                        if (!results.length) {
+                            successHandler(entries);
+                        } else {
+                            entries = entries.concat(results);
+                            readEntries();
+                        }
+                    }, errorHandler);
+                };
+            path = path || '';
+            if (entry.isFile) {
+                if (entry._file) {
+                    // Workaround for Chrome bug #149735
+                    entry._file.relativePath = path;
+                    dfd.resolve(entry._file);
+                } else {
+                    entry.file(function (file) {
+                        file.relativePath = path;
+                        dfd.resolve(file);
+                    }, errorHandler);
+                }
+            } else if (entry.isDirectory) {
+                dirReader = entry.createReader();
+                readEntries();
+            } else {
+                // Return an empy list for file system items
+                // other than files or directories:
+                dfd.resolve([]);
+            }
+            return dfd.promise();
+        },
+
+        _handleFileTreeEntries: function (entries, path) {
+            var that = this;
+            return $.when.apply(
+                $,
+                $.map(entries, function (entry) {
+                    return that._handleFileTreeEntry(entry, path);
+                })
+            ).then(function () {
+                return Array.prototype.concat.apply(
+                    [],
+                    arguments
+                );
+            });
+        },
+
+        _getDroppedFiles: function (dataTransfer) {
+            dataTransfer = dataTransfer || {};
+            var items = dataTransfer.items;
+            if (items && items.length && (items[0].webkitGetAsEntry ||
+                    items[0].getAsEntry)) {
+                return this._handleFileTreeEntries(
+                    $.map(items, function (item) {
+                        var entry;
+                        if (item.webkitGetAsEntry) {
+                            entry = item.webkitGetAsEntry();
+                            if (entry) {
+                                // Workaround for Chrome bug #149735:
+                                entry._file = item.getAsFile();
+                            }
+                            return entry;
+                        }
+                        return item.getAsEntry();
+                    })
+                );
+            }
+            return $.Deferred().resolve(
+                $.makeArray(dataTransfer.files)
+            ).promise();
+        },
+
+        _getSingleFileInputFiles: function (fileInput) {
+            fileInput = $(fileInput);
+            var entries = fileInput.prop('webkitEntries') ||
+                    fileInput.prop('entries'),
+                files,
+                value;
+            if (entries && entries.length) {
+                return this._handleFileTreeEntries(entries);
+            }
+            files = $.makeArray(fileInput.prop('files'));
+            if (!files.length) {
+                value = fileInput.prop('value');
+                if (!value) {
+                    return $.Deferred().resolve([]).promise();
+                }
+                // If the files property is not available, the browser does not
+                // support the File API and we add a pseudo File object with
+                // the input value as name with path information removed:
+                files = [{name: value.replace(/^.*\\/, '')}];
+            } else if (files[0].name === undefined && files[0].fileName) {
+                // File normalization for Safari 4 and Firefox 3:
+                $.each(files, function (index, file) {
+                    file.name = file.fileName;
+                    file.size = file.fileSize;
+                });
+            }
+            return $.Deferred().resolve(files).promise();
+        },
+
+        _getFileInputFiles: function (fileInput) {
+            if (!(fileInput instanceof $) || fileInput.length === 1) {
+                return this._getSingleFileInputFiles(fileInput);
+            }
+            return $.when.apply(
+                $,
+                $.map(fileInput, this._getSingleFileInputFiles)
+            ).then(function () {
+                return Array.prototype.concat.apply(
+                    [],
+                    arguments
+                );
+            });
+        },
+
+        _onChange: function (e) {
+            var that = this,
+                data = {
+                    fileInput: $(e.target),
+                    form: $(e.target.form)
+                };
+            this._getFileInputFiles(data.fileInput).always(function (files) {
+                data.files = files;
+                if (that.options.replaceFileInput) {
+                    that._replaceFileInput(data);
+                }
+                if (that._trigger(
+                        'change',
+                        $.Event('change', {delegatedEvent: e}),
+                        data
+                    ) !== false) {
+                    that._onAdd(e, data);
+                }
+            });
+        },
+
+        _onPaste: function (e) {
+            var items = e.originalEvent && e.originalEvent.clipboardData &&
+                    e.originalEvent.clipboardData.items,
+                data = {files: []};
+            if (items && items.length) {
+                $.each(items, function (index, item) {
+                    var file = item.getAsFile && item.getAsFile();
+                    if (file) {
+                        data.files.push(file);
+                    }
+                });
+                if (this._trigger(
+                        'paste',
+                        $.Event('paste', {delegatedEvent: e}),
+                        data
+                    ) !== false) {
+                    this._onAdd(e, data);
+                }
+            }
+        },
+
+        _onDrop: function (e) {
+            e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer;
+            var that = this,
+                dataTransfer = e.dataTransfer,
+                data = {};
+            if (dataTransfer && dataTransfer.files && dataTransfer.files.length) {
+                e.preventDefault();
+                this._getDroppedFiles(dataTransfer).always(function (files) {
+                    data.files = files;
+                    if (that._trigger(
+                            'drop',
+                            $.Event('drop', {delegatedEvent: e}),
+                            data
+                        ) !== false) {
+                        that._onAdd(e, data);
+                    }
+                });
+            }
+        },
+
+        _onDragOver: getDragHandler('dragover'),
+
+        _onDragEnter: getDragHandler('dragenter'),
+
+        _onDragLeave: getDragHandler('dragleave'),
+
+        _initEventHandlers: function () {
+            if (this._isXHRUpload(this.options)) {
+                this._on(this.options.dropZone, {
+                    dragover: this._onDragOver,
+                    drop: this._onDrop,
+                    // event.preventDefault() on dragenter is required for IE10+:
+                    dragenter: this._onDragEnter,
+                    // dragleave is not required, but added for completeness:
+                    dragleave: this._onDragLeave
+                });
+                this._on(this.options.pasteZone, {
+                    paste: this._onPaste
+                });
+            }
+            if ($.support.fileInput) {
+                this._on(this.options.fileInput, {
+                    change: this._onChange
+                });
+            }
+        },
+
+        _destroyEventHandlers: function () {
+            this._off(this.options.dropZone, 'dragenter dragleave dragover drop');
+            this._off(this.options.pasteZone, 'paste');
+            this._off(this.options.fileInput, 'change');
+        },
+
+        _destroy: function () {
+            this._destroyEventHandlers();
+        },
+
+        _setOption: function (key, value) {
+            var reinit = $.inArray(key, this._specialOptions) !== -1;
+            if (reinit) {
+                this._destroyEventHandlers();
+            }
+            this._super(key, value);
+            if (reinit) {
+                this._initSpecialOptions();
+                this._initEventHandlers();
+            }
+        },
+
+        _initSpecialOptions: function () {
+            var options = this.options;
+            if (options.fileInput === undefined) {
+                options.fileInput = this.element.is('input[type="file"]') ?
+                        this.element : this.element.find('input[type="file"]');
+            } else if (!(options.fileInput instanceof $)) {
+                options.fileInput = $(options.fileInput);
+            }
+            if (!(options.dropZone instanceof $)) {
+                options.dropZone = $(options.dropZone);
+            }
+            if (!(options.pasteZone instanceof $)) {
+                options.pasteZone = $(options.pasteZone);
+            }
+        },
+
+        _getRegExp: function (str) {
+            var parts = str.split('/'),
+                modifiers = parts.pop();
+            parts.shift();
+            return new RegExp(parts.join('/'), modifiers);
+        },
+
+        _isRegExpOption: function (key, value) {
+            return key !== 'url' && $.type(value) === 'string' &&
+                /^\/.*\/[igm]{0,3}$/.test(value);
+        },
+
+        _initDataAttributes: function () {
+            var that = this,
+                options = this.options,
+                data = this.element.data();
+            // Initialize options set via HTML5 data-attributes:
+            $.each(
+                this.element[0].attributes,
+                function (index, attr) {
+                    var key = attr.name.toLowerCase(),
+                        value;
+                    if (/^data-/.test(key)) {
+                        // Convert hyphen-ated key to camelCase:
+                        key = key.slice(5).replace(/-[a-z]/g, function (str) {
+                            return str.charAt(1).toUpperCase();
+                        });
+                        value = data[key];
+                        if (that._isRegExpOption(key, value)) {
+                            value = that._getRegExp(value);
+                        }
+                        options[key] = value;
+                    }
+                }
+            );
+        },
+
+        _create: function () {
+            this._initDataAttributes();
+            this._initSpecialOptions();
+            this._slots = [];
+            this._sequence = this._getXHRPromise(true);
+            this._sending = this._active = 0;
+            this._initProgressObject(this);
+            this._initEventHandlers();
+        },
+
+        // This method is exposed to the widget API and allows to query
+        // the number of active uploads:
+        active: function () {
+            return this._active;
+        },
+
+        // This method is exposed to the widget API and allows to query
+        // the widget upload progress.
+        // It returns an object with loaded, total and bitrate properties
+        // for the running uploads:
+        progress: function () {
+            return this._progress;
+        },
+
+        // This method is exposed to the widget API and allows adding files
+        // using the fileupload API. The data parameter accepts an object which
+        // must have a files property and can contain additional options:
+        // .fileupload('add', {files: filesList});
+        add: function (data) {
+            var that = this;
+            if (!data || this.options.disabled) {
+                return;
+            }
+            if (data.fileInput && !data.files) {
+                this._getFileInputFiles(data.fileInput).always(function (files) {
+                    data.files = files;
+                    that._onAdd(null, data);
+                });
+            } else {
+                data.files = $.makeArray(data.files);
+                this._onAdd(null, data);
+            }
+        },
+
+        // This method is exposed to the widget API and allows sending files
+        // using the fileupload API. The data parameter accepts an object which
+        // must have a files or fileInput property and can contain additional options:
+        // .fileupload('send', {files: filesList});
+        // The method returns a Promise object for the file upload call.
+        send: function (data) {
+            if (data && !this.options.disabled) {
+                if (data.fileInput && !data.files) {
+                    var that = this,
+                        dfd = $.Deferred(),
+                        promise = dfd.promise(),
+                        jqXHR,
+                        aborted;
+                    promise.abort = function () {
+                        aborted = true;
+                        if (jqXHR) {
+                            return jqXHR.abort();
+                        }
+                        dfd.reject(null, 'abort', 'abort');
+                        return promise;
+                    };
+                    this._getFileInputFiles(data.fileInput).always(
+                        function (files) {
+                            if (aborted) {
+                                return;
+                            }
+                            if (!files.length) {
+                                dfd.reject();
+                                return;
+                            }
+                            data.files = files;
+                            jqXHR = that._onSend(null, data);
+                            jqXHR.then(
+                                function (result, textStatus, jqXHR) {
+                                    dfd.resolve(result, textStatus, jqXHR);
+                                },
+                                function (jqXHR, textStatus, errorThrown) {
+                                    dfd.reject(jqXHR, textStatus, errorThrown);
+                                }
+                            );
+                        }
+                    );
+                    return this._enhancePromise(promise);
+                }
+                data.files = $.makeArray(data.files);
+                if (data.files.length) {
+                    return this._onSend(null, data);
+                }
+            }
+            return this._getXHRPromise(false, data && data.context);
+        }
+
+    });
+
+}));
diff --git a/static/js/jquery.iframe-transport.js b/static/js/jquery.iframe-transport.js
new file mode 100644
index 0000000..8d25c46
--- /dev/null
+++ b/static/js/jquery.iframe-transport.js
@@ -0,0 +1,224 @@
+/*
+ * jQuery Iframe Transport Plugin
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ */
+
+/* global define, require, window, document, JSON */
+
+;(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS:
+        factory(require('jquery'));
+    } else {
+        // Browser globals:
+        factory(window.jQuery);
+    }
+}(function ($) {
+    'use strict';
+
+    // Helper variable to create unique names for the transport iframes:
+    var counter = 0,
+        jsonAPI = $,
+        jsonParse = 'parseJSON';
+
+    if ('JSON' in window && 'parse' in JSON) {
+      jsonAPI = JSON;
+      jsonParse = 'parse';
+    }
+
+    // The iframe transport accepts four additional options:
+    // options.fileInput: a jQuery collection of file input fields
+    // options.paramName: the parameter name for the file form data,
+    //  overrides the name property of the file input field(s),
+    //  can be a string or an array of strings.
+    // options.formData: an array of objects with name and value properties,
+    //  equivalent to the return data of .serializeArray(), e.g.:
+    //  [{name: 'a', value: 1}, {name: 'b', value: 2}]
+    // options.initialIframeSrc: the URL of the initial iframe src,
+    //  by default set to "javascript:false;"
+    $.ajaxTransport('iframe', function (options) {
+        if (options.async) {
+            // javascript:false as initial iframe src
+            // prevents warning popups on HTTPS in IE6:
+            /*jshint scripturl: true */
+            var initialIframeSrc = options.initialIframeSrc || 'javascript:false;',
+            /*jshint scripturl: false */
+                form,
+                iframe,
+                addParamChar;
+            return {
+                send: function (_, completeCallback) {
+                    form = $('<form style="display:none;"></form>');
+                    form.attr('accept-charset', options.formAcceptCharset);
+                    addParamChar = /\?/.test(options.url) ? '&' : '?';
+                    // XDomainRequest only supports GET and POST:
+                    if (options.type === 'DELETE') {
+                        options.url = options.url + addParamChar + '_method=DELETE';
+                        options.type = 'POST';
+                    } else if (options.type === 'PUT') {
+                        options.url = options.url + addParamChar + '_method=PUT';
+                        options.type = 'POST';
+                    } else if (options.type === 'PATCH') {
+                        options.url = options.url + addParamChar + '_method=PATCH';
+                        options.type = 'POST';
+                    }
+                    // IE versions below IE8 cannot set the name property of
+                    // elements that have already been added to the DOM,
+                    // so we set the name along with the iframe HTML markup:
+                    counter += 1;
+                    iframe = $(
+                        '<iframe src="' + initialIframeSrc +
+                            '" name="iframe-transport-' + counter + '"></iframe>'
+                    ).bind('load', function () {
+                        var fileInputClones,
+                            paramNames = $.isArray(options.paramName) ?
+                                    options.paramName : [options.paramName];
+                        iframe
+                            .unbind('load')
+                            .bind('load', function () {
+                                var response;
+                                // Wrap in a try/catch block to catch exceptions thrown
+                                // when trying to access cross-domain iframe contents:
+                                try {
+                                    response = iframe.contents();
+                                    // Google Chrome and Firefox do not throw an
+                                    // exception when calling iframe.contents() on
+                                    // cross-domain requests, so we unify the response:
+                                    if (!response.length || !response[0].firstChild) {
+                                        throw new Error();
+                                    }
+                                } catch (e) {
+                                    response = undefined;
+                                }
+                                // The complete callback returns the
+                                // iframe content document as response object:
+                                completeCallback(
+                                    200,
+                                    'success',
+                                    {'iframe': response}
+                                );
+                                // Fix for IE endless progress bar activity bug
+                                // (happens on form submits to iframe targets):
+                                $('<iframe src="' + initialIframeSrc + '"></iframe>')
+                                    .appendTo(form);
+                                window.setTimeout(function () {
+                                    // Removing the form in a setTimeout call
+                                    // allows Chrome's developer tools to display
+                                    // the response result
+                                    form.remove();
+                                }, 0);
+                            });
+                        form
+                            .prop('target', iframe.prop('name'))
+                            .prop('action', options.url)
+                            .prop('method', options.type);
+                        if (options.formData) {
+                            $.each(options.formData, function (index, field) {
+                                $('<input type="hidden"/>')
+                                    .prop('name', field.name)
+                                    .val(field.value)
+                                    .appendTo(form);
+                            });
+                        }
+                        if (options.fileInput && options.fileInput.length &&
+                                options.type === 'POST') {
+                            fileInputClones = options.fileInput.clone();
+                            // Insert a clone for each file input field:
+                            options.fileInput.after(function (index) {
+                                return fileInputClones[index];
+                            });
+                            if (options.paramName) {
+                                options.fileInput.each(function (index) {
+                                    $(this).prop(
+                                        'name',
+                                        paramNames[index] || options.paramName
+                                    );
+                                });
+                            }
+                            // Appending the file input fields to the hidden form
+                            // removes them from their original location:
+                            form
+                                .append(options.fileInput)
+                                .prop('enctype', 'multipart/form-data')
+                                // enctype must be set as encoding for IE:
+                                .prop('encoding', 'multipart/form-data');
+                            // Remove the HTML5 form attribute from the input(s):
+                            options.fileInput.removeAttr('form');
+                        }
+                        form.submit();
+                        // Insert the file input fields at their original location
+                        // by replacing the clones with the originals:
+                        if (fileInputClones && fileInputClones.length) {
+                            options.fileInput.each(function (index, input) {
+                                var clone = $(fileInputClones[index]);
+                                // Restore the original name and form properties:
+                                $(input)
+                                    .prop('name', clone.prop('name'))
+                                    .attr('form', clone.attr('form'));
+                                clone.replaceWith(input);
+                            });
+                        }
+                    });
+                    form.append(iframe).appendTo(document.body);
+                },
+                abort: function () {
+                    if (iframe) {
+                        // javascript:false as iframe src aborts the request
+                        // and prevents warning popups on HTTPS in IE6.
+                        // concat is used to avoid the "Script URL" JSLint error:
+                        iframe
+                            .unbind('load')
+                            .prop('src', initialIframeSrc);
+                    }
+                    if (form) {
+                        form.remove();
+                    }
+                }
+            };
+        }
+    });
+
+    // The iframe transport returns the iframe content document as response.
+    // The following adds converters from iframe to text, json, html, xml
+    // and script.
+    // Please note that the Content-Type for JSON responses has to be text/plain
+    // or text/html, if the browser doesn't include application/json in the
+    // Accept header, else IE will show a download dialog.
+    // The Content-Type for XML responses on the other hand has to be always
+    // application/xml or text/xml, so IE properly parses the XML response.
+    // See also
+    // https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation
+    $.ajaxSetup({
+        converters: {
+            'iframe text': function (iframe) {
+                return iframe && $(iframe[0].body).text();
+            },
+            'iframe json': function (iframe) {
+                return iframe && jsonAPI[jsonParse]($(iframe[0].body).text());
+            },
+            'iframe html': function (iframe) {
+                return iframe && $(iframe[0].body).html();
+            },
+            'iframe xml': function (iframe) {
+                var xmlDoc = iframe && iframe[0];
+                return xmlDoc && $.isXMLDoc(xmlDoc) ? xmlDoc :
+                        $.parseXML((xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml) ||
+                            $(xmlDoc.body).html());
+            },
+            'iframe script': function (iframe) {
+                return iframe && $.globalEval($(iframe[0].body).text());
+            }
+        }
+    });
+
+}));
diff --git a/static/js/jquery.ui.widget.js b/static/js/jquery.ui.widget.js
new file mode 100644
index 0000000..a4131b2
--- /dev/null
+++ b/static/js/jquery.ui.widget.js
@@ -0,0 +1,748 @@
+/*! jQuery UI - v1.12.1 - 2018-02-10
+ * http://jqueryui.com
+ * Includes: widget.js
+ * Copyright jQuery Foundation and other contributors; Licensed MIT */
+
+(function( factory ) {
+  if ( typeof define === "function" && define.amd ) {
+
+    // AMD. Register as an anonymous module.
+    define([ "jquery" ], factory );
+  } else {
+
+    // Browser globals
+    factory( jQuery );
+  }
+}(function( $ ) {
+
+  $.ui = $.ui || {};
+
+  var version = $.ui.version = "1.12.1";
+
+
+  /*!
+   * jQuery UI Widget 1.12.1
+   * http://jqueryui.com
+   *
+   * Copyright jQuery Foundation and other contributors
+   * Released under the MIT license.
+   * http://jquery.org/license
+   */
+
+  //>>label: Widget
+  //>>group: Core
+  //>>description: Provides a factory for creating stateful widgets with a common API.
+  //>>docs: http://api.jqueryui.com/jQuery.widget/
+  //>>demos: http://jqueryui.com/widget/
+
+
+
+  var widgetUuid = 0;
+  var widgetSlice = Array.prototype.slice;
+
+  $.cleanData = ( function( orig ) {
+    return function( elems ) {
+      var events, elem, i;
+      for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {
+        try {
+
+          // Only trigger remove when necessary to save time
+          events = $._data( elem, "events" );
+          if ( events && events.remove ) {
+            $( elem ).triggerHandler( "remove" );
+          }
+
+          // Http://bugs.jquery.com/ticket/8235
+        } catch ( e ) {}
+      }
+      orig( elems );
+    };
+  } )( $.cleanData );
+
+  $.widget = function( name, base, prototype ) {
+    var existingConstructor, constructor, basePrototype;
+
+    // ProxiedPrototype allows the provided prototype to remain unmodified
+    // so that it can be used as a mixin for multiple widgets (#8876)
+    var proxiedPrototype = {};
+
+    var namespace = name.split( "." )[ 0 ];
+    name = name.split( "." )[ 1 ];
+    var fullName = namespace + "-" + name;
+
+    if ( !prototype ) {
+      prototype = base;
+      base = $.Widget;
+    }
+
+    if ( $.isArray( prototype ) ) {
+      prototype = $.extend.apply( null, [ {} ].concat( prototype ) );
+    }
+
+    // Create selector for plugin
+    $.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
+      return !!$.data( elem, fullName );
+    };
+
+    $[ namespace ] = $[ namespace ] || {};
+    existingConstructor = $[ namespace ][ name ];
+    constructor = $[ namespace ][ name ] = function( options, element ) {
+
+      // Allow instantiation without "new" keyword
+      if ( !this._createWidget ) {
+        return new constructor( options, element );
+      }
+
+      // Allow instantiation without initializing for simple inheritance
+      // must use "new" keyword (the code above always passes args)
+      if ( arguments.length ) {
+        this._createWidget( options, element );
+      }
+    };
+
+    // Extend with the existing constructor to carry over any static properties
+    $.extend( constructor, existingConstructor, {
+      version: prototype.version,
+
+      // Copy the object used to create the prototype in case we need to
+      // redefine the widget later
+      _proto: $.extend( {}, prototype ),
+
+      // Track widgets that inherit from this widget in case this widget is
+      // redefined after a widget inherits from it
+      _childConstructors: []
+    } );
+
+    basePrototype = new base();
+
+    // We need to make the options hash a property directly on the new instance
+    // otherwise we'll modify the options hash on the prototype that we're
+    // inheriting from
+    basePrototype.options = $.widget.extend( {}, basePrototype.options );
+    $.each( prototype, function( prop, value ) {
+      if ( !$.isFunction( value ) ) {
+        proxiedPrototype[ prop ] = value;
+        return;
+      }
+      proxiedPrototype[ prop ] = ( function() {
+        function _super() {
+          return base.prototype[ prop ].apply( this, arguments );
+        }
+
+        function _superApply( args ) {
+          return base.prototype[ prop ].apply( this, args );
+        }
+
+        return function() {
+          var __super = this._super;
+          var __superApply = this._superApply;
+          var returnValue;
+
+          this._super = _super;
+          this._superApply = _superApply;
+
+          returnValue = value.apply( this, arguments );
+
+          this._super = __super;
+          this._superApply = __superApply;
+
+          return returnValue;
+        };
+      } )();
+    } );
+    constructor.prototype = $.widget.extend( basePrototype, {
+
+      // TODO: remove support for widgetEventPrefix
+      // always use the name + a colon as the prefix, e.g., draggable:start
+      // don't prefix for widgets that aren't DOM-based
+      widgetEventPrefix: existingConstructor ? ( basePrototype.widgetEventPrefix || name ) : name
+    }, proxiedPrototype, {
+      constructor: constructor,
+      namespace: namespace,
+      widgetName: name,
+      widgetFullName: fullName
+    } );
+
+    // If this widget is being redefined then we need to find all widgets that
+    // are inheriting from it and redefine all of them so that they inherit from
+    // the new version of this widget. We're essentially trying to replace one
+    // level in the prototype chain.
+    if ( existingConstructor ) {
+      $.each( existingConstructor._childConstructors, function( i, child ) {
+        var childPrototype = child.prototype;
+
+        // Redefine the child widget using the same prototype that was
+        // originally used, but inherit from the new version of the base
+        $.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor,
+          child._proto );
+      } );
+
+      // Remove the list of existing child constructors from the old constructor
+      // so the old child constructors can be garbage collected
+      delete existingConstructor._childConstructors;
+    } else {
+      base._childConstructors.push( constructor );
+    }
+
+    $.widget.bridge( name, constructor );
+
+    return constructor;
+  };
+
+  $.widget.extend = function( target ) {
+    var input = widgetSlice.call( arguments, 1 );
+    var inputIndex = 0;
+    var inputLength = input.length;
+    var key;
+    var value;
+
+    for ( ; inputIndex < inputLength; inputIndex++ ) {
+      for ( key in input[ inputIndex ] ) {
+        value = input[ inputIndex ][ key ];
+        if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
+
+          // Clone objects
+          if ( $.isPlainObject( value ) ) {
+            target[ key ] = $.isPlainObject( target[ key ] ) ?
+              $.widget.extend( {}, target[ key ], value ) :
+
+              // Don't extend strings, arrays, etc. with objects
+              $.widget.extend( {}, value );
+
+            // Copy everything else by reference
+          } else {
+            target[ key ] = value;
+          }
+        }
+      }
+    }
+    return target;
+  };
+
+  $.widget.bridge = function( name, object ) {
+    var fullName = object.prototype.widgetFullName || name;
+    $.fn[ name ] = function( options ) {
+      var isMethodCall = typeof options === "string";
+      var args = widgetSlice.call( arguments, 1 );
+      var returnValue = this;
+
+      if ( isMethodCall ) {
+
+        // If this is an empty collection, we need to have the instance method
+        // return undefined instead of the jQuery instance
+        if ( !this.length && options === "instance" ) {
+          returnValue = undefined;
+        } else {
+          this.each( function() {
+            var methodValue;
+            var instance = $.data( this, fullName );
+
+            if ( options === "instance" ) {
+              returnValue = instance;
+              return false;
+            }
+
+            if ( !instance ) {
+              return $.error( "cannot call methods on " + name +
+                " prior to initialization; " +
+                "attempted to call method '" + options + "'" );
+            }
+
+            if ( !$.isFunction( instance[ options ] ) || options.charAt( 0 ) === "_" ) {
+              return $.error( "no such method '" + options + "' for " + name +
+                " widget instance" );
+            }
+
+            methodValue = instance[ options ].apply( instance, args );
+
+            if ( methodValue !== instance && methodValue !== undefined ) {
+              returnValue = methodValue && methodValue.jquery ?
+                returnValue.pushStack( methodValue.get() ) :
+                methodValue;
+              return false;
+            }
+          } );
+        }
+      } else {
+
+        // Allow multiple hashes to be passed on init
+        if ( args.length ) {
+          options = $.widget.extend.apply( null, [ options ].concat( args ) );
+        }
+
+        this.each( function() {
+          var instance = $.data( this, fullName );
+          if ( instance ) {
+            instance.option( options || {} );
+            if ( instance._init ) {
+              instance._init();
+            }
+          } else {
+            $.data( this, fullName, new object( options, this ) );
+          }
+        } );
+      }
+
+      return returnValue;
+    };
+  };
+
+  $.Widget = function( /* options, element */ ) {};
+  $.Widget._childConstructors = [];
+
+  $.Widget.prototype = {
+    widgetName: "widget",
+    widgetEventPrefix: "",
+    defaultElement: "<div>",
+
+    options: {
+      classes: {},
+      disabled: false,
+
+      // Callbacks
+      create: null
+    },
+
+    _createWidget: function( options, element ) {
+      element = $( element || this.defaultElement || this )[ 0 ];
+      this.element = $( element );
+      this.uuid = widgetUuid++;
+      this.eventNamespace = "." + this.widgetName + this.uuid;
+
+      this.bindings = $();
+      this.hoverable = $();
+      this.focusable = $();
+      this.classesElementLookup = {};
+
+      if ( element !== this ) {
+        $.data( element, this.widgetFullName, this );
+        this._on( true, this.element, {
+          remove: function( event ) {
+            if ( event.target === element ) {
+              this.destroy();
+            }
+          }
+        } );
+        this.document = $( element.style ?
+
+          // Element within the document
+          element.ownerDocument :
+
+          // Element is window or document
+          element.document || element );
+        this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow );
+      }
+
+      this.options = $.widget.extend( {},
+        this.options,
+        this._getCreateOptions(),
+        options );
+
+      this._create();
+
+      if ( this.options.disabled ) {
+        this._setOptionDisabled( this.options.disabled );
+      }
+
+      this._trigger( "create", null, this._getCreateEventData() );
+      this._init();
+    },
+
+    _getCreateOptions: function() {
+      return {};
+    },
+
+    _getCreateEventData: $.noop,
+
+    _create: $.noop,
+
+    _init: $.noop,
+
+    destroy: function() {
+      var that = this;
+
+      this._destroy();
+      $.each( this.classesElementLookup, function( key, value ) {
+        that._removeClass( value, key );
+      } );
+
+      // We can probably remove the unbind calls in 2.0
+      // all event bindings should go through this._on()
+      this.element
+        .off( this.eventNamespace )
+        .removeData( this.widgetFullName );
+      this.widget()
+        .off( this.eventNamespace )
+        .removeAttr( "aria-disabled" );
+
+      // Clean up events and states
+      this.bindings.off( this.eventNamespace );
+    },
+
+    _destroy: $.noop,
+
+    widget: function() {
+      return this.element;
+    },
+
+    option: function( key, value ) {
+      var options = key;
+      var parts;
+      var curOption;
+      var i;
+
+      if ( arguments.length === 0 ) {
+
+        // Don't return a reference to the internal hash
+        return $.widget.extend( {}, this.options );
+      }
+
+      if ( typeof key === "string" ) {
+
+        // Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
+        options = {};
+        parts = key.split( "." );
+        key = parts.shift();
+        if ( parts.length ) {
+          curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
+          for ( i = 0; i < parts.length - 1; i++ ) {
+            curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
+            curOption = curOption[ parts[ i ] ];
+          }
+          key = parts.pop();
+          if ( arguments.length === 1 ) {
+            return curOption[ key ] === undefined ? null : curOption[ key ];
+          }
+          curOption[ key ] = value;
+        } else {
+          if ( arguments.length === 1 ) {
+            return this.options[ key ] === undefined ? null : this.options[ key ];
+          }
+          options[ key ] = value;
+        }
+      }
+
+      this._setOptions( options );
+
+      return this;
+    },
+
+    _setOptions: function( options ) {
+      var key;
+
+      for ( key in options ) {
+        this._setOption( key, options[ key ] );
+      }
+
+      return this;
+    },
+
+    _setOption: function( key, value ) {
+      if ( key === "classes" ) {
+        this._setOptionClasses( value );
+      }
+
+      this.options[ key ] = value;
+
+      if ( key === "disabled" ) {
+        this._setOptionDisabled( value );
+      }
+
+      return this;
+    },
+
+    _setOptionClasses: function( value ) {
+      var classKey, elements, currentElements;
+
+      for ( classKey in value ) {
+        currentElements = this.classesElementLookup[ classKey ];
+        if ( value[ classKey ] === this.options.classes[ classKey ] ||
+          !currentElements ||
+          !currentElements.length ) {
+          continue;
+        }
+
+        // We are doing this to create a new jQuery object because the _removeClass() call
+        // on the next line is going to destroy the reference to the current elements being
+        // tracked. We need to save a copy of this collection so that we can add the new classes
+        // below.
+        elements = $( currentElements.get() );
+        this._removeClass( currentElements, classKey );
+
+        // We don't use _addClass() here, because that uses this.options.classes
+        // for generating the string of classes. We want to use the value passed in from
+        // _setOption(), this is the new value of the classes option which was passed to
+        // _setOption(). We pass this value directly to _classes().
+        elements.addClass( this._classes( {
+          element: elements,
+          keys: classKey,
+          classes: value,
+          add: true
+        } ) );
+      }
+    },
+
+    _setOptionDisabled: function( value ) {
+      this._toggleClass( this.widget(), this.widgetFullName + "-disabled", null, !!value );
+
+      // If the widget is becoming disabled, then nothing is interactive
+      if ( value ) {
+        this._removeClass( this.hoverable, null, "ui-state-hover" );
+        this._removeClass( this.focusable, null, "ui-state-focus" );
+      }
+    },
+
+    enable: function() {
+      return this._setOptions( { disabled: false } );
+    },
+
+    disable: function() {
+      return this._setOptions( { disabled: true } );
+    },
+
+    _classes: function( options ) {
+      var full = [];
+      var that = this;
+
+      options = $.extend( {
+        element: this.element,
+        classes: this.options.classes || {}
+      }, options );
+
+      function processClassString( classes, checkOption ) {
+        var current, i;
+        for ( i = 0; i < classes.length; i++ ) {
+          current = that.classesElementLookup[ classes[ i ] ] || $();
+          if ( options.add ) {
+            current = $( $.unique( current.get().concat( options.element.get() ) ) );
+          } else {
+            current = $( current.not( options.element ).get() );
+          }
+          that.classesElementLookup[ classes[ i ] ] = current;
+          full.push( classes[ i ] );
+          if ( checkOption && options.classes[ classes[ i ] ] ) {
+            full.push( options.classes[ classes[ i ] ] );
+          }
+        }
+      }
+
+      this._on( options.element, {
+        "remove": "_untrackClassesElement"
+      } );
+
+      if ( options.keys ) {
+        processClassString( options.keys.match( /\S+/g ) || [], true );
+      }
+      if ( options.extra ) {
+        processClassString( options.extra.match( /\S+/g ) || [] );
+      }
+
+      return full.join( " " );
+    },
+
+    _untrackClassesElement: function( event ) {
+      var that = this;
+      $.each( that.classesElementLookup, function( key, value ) {
+        if ( $.inArray( event.target, value ) !== -1 ) {
+          that.classesElementLookup[ key ] = $( value.not( event.target ).get() );
+        }
+      } );
+    },
+
+    _removeClass: function( element, keys, extra ) {
+      return this._toggleClass( element, keys, extra, false );
+    },
+
+    _addClass: function( element, keys, extra ) {
+      return this._toggleClass( element, keys, extra, true );
+    },
+
+    _toggleClass: function( element, keys, extra, add ) {
+      add = ( typeof add === "boolean" ) ? add : extra;
+      var shift = ( typeof element === "string" || element === null ),
+        options = {
+          extra: shift ? keys : extra,
+          keys: shift ? element : keys,
+          element: shift ? this.element : element,
+          add: add
+        };
+      options.element.toggleClass( this._classes( options ), add );
+      return this;
+    },
+
+    _on: function( suppressDisabledCheck, element, handlers ) {
+      var delegateElement;
+      var instance = this;
+
+      // No suppressDisabledCheck flag, shuffle arguments
+      if ( typeof suppressDisabledCheck !== "boolean" ) {
+        handlers = element;
+        element = suppressDisabledCheck;
+        suppressDisabledCheck = false;
+      }
+
+      // No element argument, shuffle and use this.element
+      if ( !handlers ) {
+        handlers = element;
+        element = this.element;
+        delegateElement = this.widget();
+      } else {
+        element = delegateElement = $( element );
+        this.bindings = this.bindings.add( element );
+      }
+
+      $.each( handlers, function( event, handler ) {
+        function handlerProxy() {
+
+          // Allow widgets to customize the disabled handling
+          // - disabled as an array instead of boolean
+          // - disabled class as method for disabling individual parts
+          if ( !suppressDisabledCheck &&
+            ( instance.options.disabled === true ||
+              $( this ).hasClass( "ui-state-disabled" ) ) ) {
+            return;
+          }
+          return ( typeof handler === "string" ? instance[ handler ] : handler )
+            .apply( instance, arguments );
+        }
+
+        // Copy the guid so direct unbinding works
+        if ( typeof handler !== "string" ) {
+          handlerProxy.guid = handler.guid =
+            handler.guid || handlerProxy.guid || $.guid++;
+        }
+
+        var match = event.match( /^([\w:-]*)\s*(.*)$/ );
+        var eventName = match[ 1 ] + instance.eventNamespace;
+        var selector = match[ 2 ];
+
+        if ( selector ) {
+          delegateElement.on( eventName, selector, handlerProxy );
+        } else {
+          element.on( eventName, handlerProxy );
+        }
+      } );
+    },
+
+    _off: function( element, eventName ) {
+      eventName = ( eventName || "" ).split( " " ).join( this.eventNamespace + " " ) +
+        this.eventNamespace;
+      element.off( eventName ).off( eventName );
+
+      // Clear the stack to avoid memory leaks (#10056)
+      this.bindings = $( this.bindings.not( element ).get() );
+      this.focusable = $( this.focusable.not( element ).get() );
+      this.hoverable = $( this.hoverable.not( element ).get() );
+    },
+
+    _delay: function( handler, delay ) {
+      function handlerProxy() {
+        return ( typeof handler === "string" ? instance[ handler ] : handler )
+          .apply( instance, arguments );
+      }
+      var instance = this;
+      return setTimeout( handlerProxy, delay || 0 );
+    },
+
+    _hoverable: function( element ) {
+      this.hoverable = this.hoverable.add( element );
+      this._on( element, {
+        mouseenter: function( event ) {
+          this._addClass( $( event.currentTarget ), null, "ui-state-hover" );
+        },
+        mouseleave: function( event ) {
+          this._removeClass( $( event.currentTarget ), null, "ui-state-hover" );
+        }
+      } );
+    },
+
+    _focusable: function( element ) {
+      this.focusable = this.focusable.add( element );
+      this._on( element, {
+        focusin: function( event ) {
+          this._addClass( $( event.currentTarget ), null, "ui-state-focus" );
+        },
+        focusout: function( event ) {
+          this._removeClass( $( event.currentTarget ), null, "ui-state-focus" );
+        }
+      } );
+    },
+
+    _trigger: function( type, event, data ) {
+      var prop, orig;
+      var callback = this.options[ type ];
+
+      data = data || {};
+      event = $.Event( event );
+      event.type = ( type === this.widgetEventPrefix ?
+        type :
+        this.widgetEventPrefix + type ).toLowerCase();
+
+      // The original event may come from any element
+      // so we need to reset the target on the new event
+      event.target = this.element[ 0 ];
+
+      // Copy original event properties over to the new event
+      orig = event.originalEvent;
+      if ( orig ) {
+        for ( prop in orig ) {
+          if ( !( prop in event ) ) {
+            event[ prop ] = orig[ prop ];
+          }
+        }
+      }
+
+      this.element.trigger( event, data );
+      return !( $.isFunction( callback ) &&
+        callback.apply( this.element[ 0 ], [ event ].concat( data ) ) === false ||
+        event.isDefaultPrevented() );
+    }
+  };
+
+  $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+    $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+      if ( typeof options === "string" ) {
+        options = { effect: options };
+      }
+
+      var hasOptions;
+      var effectName = !options ?
+        method :
+        options === true || typeof options === "number" ?
+        defaultEffect :
+        options.effect || defaultEffect;
+
+      options = options || {};
+      if ( typeof options === "number" ) {
+        options = { duration: options };
+      }
+
+      hasOptions = !$.isEmptyObject( options );
+      options.complete = callback;
+
+      if ( options.delay ) {
+        element.delay( options.delay );
+      }
+
+      if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
+        element[ method ]( options );
+      } else if ( effectName !== method && element[ effectName ] ) {
+        element[ effectName ]( options.duration, options.easing, callback );
+      } else {
+        element.queue( function( next ) {
+          $( this )[ method ]();
+          if ( callback ) {
+            callback.call( element[ 0 ] );
+          }
+          next();
+        } );
+      }
+    };
+  } );
+
+  var widget = $.widget;
+
+
+
+
+}));
diff --git a/static/template/main.html b/static/template/main.html
index 09070d9..804a86f 100644
--- a/static/template/main.html
+++ b/static/template/main.html
@@ -5,6 +5,7 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 		Options
 	</div>
 	<div>
+		{{#if resolution.resolution}}
 		Resolution
 		<select name="tvservice">
 			{{#select tvservice}}
@@ -13,6 +14,20 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 			{{/each}}
 			{{/select}}
 		</select>
+		{{else}}
+			No display connected or detected 
+		{{/if}}
+		<br>
+		Select custom display
+		<select name="display-driver">
+			{{#select display-driver}}
+			<option value="none">Use HDMI only</option>
+			{{#each drivers}}
+				<option value="{{this}}">{{this}}</option>
+			{{/each}}
+			{{/select}}
+		</select>
+		<input style="position:absolute; top: -100px" type="file" data-url="custom-driver" id="driver" name="driver"><button id="driver-button">Upload new driver</button>
 		<br>
 		Time zone
 		<select name="timezone">
@@ -36,7 +51,7 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 		Power saving measures should 
 		<select name="powersave">
 			{{#select powersave}}
-			<option value="">not be used</option>
+			<option value="none">not be used</option>
 			<option value="schedule">use schedule</option>
 			<option value="sensor">use environment</option>
 			<option value="sensor+schedule">use schedule and environment</option>
@@ -86,6 +101,28 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 
 <script type="text/javascript">
 	// Refresh image every 30s
+	$('#driver').fileupload({
+        add: function (e, data) {
+        	$('#driver-button').prop('disabled', 'disabled');
+            data.submit();
+        },
+        done: function (e, data) {
+            alert("Upload complete, refreshing drivers");
+            location.reload();
+        },
+        fail: function (e, data) {
+        	alert('Failed to upload the driver');
+        },
+        always: function(e, data) {
+        	$('#driver-button').prop('disabled', '');
+        }
+    });
+
+	$("#driver-button").click(function() {
+		$('#driver').trigger('click');
+	});
+
+
 	function reloadScreen() {
 		$('#screen').attr('src', "/details/current?" + new Date().getTime())
 		setTimeout(reloadScreen, 30000);
@@ -137,7 +174,7 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 
 	$("select[name=tvservice]").change(function() {
 		$.ajax({
-			url:"/setting/resolution/" + encodeURIComponent($(this).val()),
+			url:"/setting/tvservice/" + encodeURIComponent($(this).val()),
 			type:"PUT"
 		}).done(function(){
 		});
@@ -151,6 +188,24 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 		});
 	});
 
+	$("select[name=display-driver]").change(function() {
+		$.ajax({
+			url:"/setting/display-driver/" + encodeURIComponent($(this).val()),
+			type:"PUT"
+		}).done(function(data){
+			if (data['status']) {
+				if(confirm('In order to fully enable this change, you must reboot the photoframe. Do you wish to do this now?')) {
+					$.ajax({
+						url:"/reboot"
+					});					
+					$(document.body).html('<h1>Rebooting</h1>')
+				}
+
+			}
+			console.log(data);
+		});
+	});
+
 	$("#reset").click(function() {
 		if (confirm("Are you sure? Link to photos will also be reset")) {
 			$.ajax({
@@ -165,11 +220,8 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 		if (confirm("Are you sure you want to REBOOT?")) {
 			$.ajax({
 				url:"/reboot"
-			}).done(function(){
-				var newDoc = document.open("text/html", "replace");
-				newDoc.write("<html><body><h1>Power off</h1></body></html>");
-				newDoc.close();
 			});
+			$(document.body).html('<h1>Rebooting</h1>')
 		}
 	});
 
@@ -177,31 +229,9 @@ <h1><a href="https://github.com/mrworf/photoframe">PhotoFrame Configuration</a><
 		if (confirm("Are you sure you want to POWER OFF the frame?")) {
 			$.ajax({
 				url:"/shutdown"
-			}).done(function(){
-				var newDoc = document.open("text/html", "replace");
-				newDoc.write("<html><body><h1>Power off</h1></body></html>");
-				newDoc.close();
 			});
+			$(document.body).html('<h1>Powering off</h1>')
 		}
 	});
-
-	$('#tv').click(function() {
-		$.ajax({
-			url:"/details/tvservice"
-		}).done(function(data) {
-			txt = "";
-			if (data['cea'].indexOf(' 0 ') === -1) {
-				txt += data['cea'];
-			}
-			if (data['dmt'].indexOf(' 0 ') === -1) {
-				txt += data['dmt'];
-			}
-			if (txt == "")
-				txt = "No modes found for connected monitor";
-			else
-				txt += "\nOption format: <DMT/CEA> <MODE NBR> <HDMI/DVI>"
-			alert(txt);
-		});
-	});
 	populateKeywords();
 </script>
diff --git a/update.sh b/update.sh
index c153e85..2bcfac3 100755
--- a/update.sh
+++ b/update.sh
@@ -39,6 +39,15 @@ if [ "$1" = "post" ]; then
 		echo "i2c-dev" >> /etc/modules-load.d/modules.conf
 		modprobe i2c-dev
 	fi
+
+	# Make sure all old files are moved into the new config folder
+	mkdir /root/photoframe_config >/dev/null 2>/dev/null
+	FILES="oauth.json settings.json http_auth.json colortemp.sh"
+	for FILE in ${FILES}; do
+		mv /root/${FILE} /root/photoframe_config/ >/dev/null 2>/dev/null
+	done
+
+	# Copy new service and reload systemd
 	cp frame.service /etc/systemd/system/
 	systemctl daemon-reload