zen 0.2.8 → 0.3b

data/lib/zen/public/admin/css/zen/window.css

@@ -1,9 +1,3 @@
-/**
- * Stylesheet used for the Javascript class Zen.Window.
- *
- * @author Yorick Peterse
- * @since  0.2.6
- */
 .window
 {
     background:  #fff;
@@ -34,7 +28,7 @@
 
     .window header
     {
-        background:    #ddd -webkit-gradient(linear, left bottom, left top, 
+        background:    #ddd -webkit-gradient(linear, left bottom, left top,
             from(#ddd), to(#eee));
         background:    #ddd -moz-linear-gradient(bottom, top, #ddd, #eee);
         border-top:    1px solid #fff;
@@ -56,7 +50,7 @@
 
         .window header .close
         {
-            background: url('../../images/zen/icons/close.png') no-repeat center left;
+            background: url('/admin/images/zen/icons/close.png') no-repeat center left;
             cursor:     pointer;
             float:      left;
             height:     16px;

data/lib/zen/public/admin/js/vendor/datepicker.js

@@ -1,3 +1,27 @@
+/*
+---
+name: Locale.nl-NL.DatePicker
+description: Dutch Language File for DatePicker
+authors: Arian Stolwijk
+requires: [More/Locale]
+provides: Locale.nl-NL.DatePicker
+...
+*/
+
+Locale.define('en-US', 'DatePicker', {
+    select_a_time: Zen.translations[
+        'zen_general.datepicker.select_a_time'],
+	use_mouse_wheel: Zen.translations[
+        'zen_general.datepicker.use_mouse_wheel'
+    ],
+	time_confirm_button: Zen.translations[
+        'zen_general.datepicker.time_confirm_button'
+    ],
+	apply_range: Zen.translations['zen_general.datepicker.apply_range'],
+	cancel     : Zen.translations['zen_general.datepicker.cancel'],
+	week       : Zen.translations['zen_general.datepicker.week']
+});
+
 /*
 ---
 name: Picker
@@ -8,6 +32,7 @@ provides: Picker
 ...
 */
 var Picker = new Class({
+
 	Implements: [Options, Events],
 
 	options: {/*
@@ -23,7 +48,9 @@ var Picker = new Class({
 		positionOffset: {x: 0, y: 0},
 		pickerPosition: 'bottom',
 		draggable: true,
-		showOnInit: true
+		showOnInit: true,
+		columns: 1,
+		footer: false
 	},
 
 	initialize: function(options){
@@ -44,6 +71,7 @@ var Picker = new Class({
 				opacity: 0
 			}
 		}).inject(options.inject || document.body);
+		picker.addClass('column_' + options.columns);
 
 		if (options.useFadeInOut){
 			picker.set('tween', {
@@ -55,16 +83,28 @@ var Picker = new Class({
 		// Build the header
 		var header = this.header = new Element('div.header').inject(picker);
 
-		this.closeButton = new Element('div.closeButton[text=x]')
+		var title = this.title = new Element('div.title').inject(header);
+		var titleID = this.titleID = 'pickertitle-' + String.uniqueID();
+		this.titleText = new Element('div', {
+			'role': 'heading',
+			'class': 'titleText',
+			'id': titleID,
+			'aria-live': 'assertive',
+			'aria-atomic': 'true'
+		}).inject(title);
+
+		this.closeButton = new Element('div.closeButton[text=x][role=button]')
 			.addEvent('click', this.close.pass(false, this))
 			.inject(header);
 
-		var title = this.title = new Element('div.title').inject(header);
-		this.titleText = new Element('div.titleText').inject(title);
-
 		// Build the body of the picker
 		var body = this.body = new Element('div.body').inject(picker);
 
+		if (options.footer){
+			this.footer = new Element('div.footer').inject(picker);
+			picker.addClass('footer');
+		}
+
 		// oldContents and newContents are used to slide from the old content to a new one.
 		var slider = this.slider = new Element('div.slider', {
 			styles: {
@@ -92,6 +132,9 @@ var Picker = new Class({
 			}
 		}).inject(slider);
 
+		this.originalColumns = options.columns;
+		this.setColumns(options.columns);
+
 		// IFrameShim for select fields in IE
 		var shim = this.shim = window['IframeShim'] ? new IframeShim(picker) : null;
 
@@ -102,29 +145,18 @@ var Picker = new Class({
 			} : null);
 			picker.setStyle('cursor', 'move');
 		}
-
-		this.addEvent('open', function(){
-			picker.setStyle('display', 'block');
-			if (shim) shim.show();
-		}, true);
-
-		this.addEvent('hide', function(){
-			picker.setStyle('display', 'none');
-			if (shim) shim.hide();
-		}, true);
-
 	},
 
 	open: function(noFx){
 		if (this.opened == true) return this;
 		this.opened = true;
+		var picker = this.picker.setStyle('display', 'block').set('aria-hidden', 'false')
+		if (this.shim) this.shim.show();
 		this.fireEvent('open');
 		if (this.options.useFadeInOut && !noFx){
-			this.picker.fade('in').get('tween').chain(function(){
-				this.fireEvent('show');
-			}.bind(this));
+			picker.fade('in').get('tween').chain(this.fireEvent.pass('show', this));
 		} else {
-			this.picker.setStyle('opacity', 1);
+			picker.setStyle('opacity', 1);
 			this.fireEvent('show');
 		}
 		return this;
@@ -138,13 +170,16 @@ var Picker = new Class({
 		if (this.opened == false) return this;
 		this.opened = false;
 		this.fireEvent('close');
+		var self = this, picker = this.picker, hide = function(){
+			picker.setStyle('display', 'none').set('aria-hidden', 'true');
+			if (self.shim) self.shim.hide();
+			self.fireEvent('hide');
+		};
 		if (this.options.useFadeInOut && !noFx){
-			this.picker.fade('out').get('tween').chain(function(){
-				this.fireEvent('hide');
-			}.bind(this));
+			picker.fade('out').get('tween').chain(hide);
 		} else {
-			this.picker.setStyle('opacity', 0);
-			this.fireEvent('hide');
+			picker.setStyle('opacity', 0);
+			hide();
 		}
 		return this;
 	},
@@ -200,6 +235,7 @@ var Picker = new Class({
 
 	setBodySize: function(){
 		var bodysize = this.bodysize = this.body.getSize();
+
 		this.slider.setStyles({
 			width: 2 * bodysize.x,
 			height: bodysize.y
@@ -215,11 +251,44 @@ var Picker = new Class({
 		});
 	},
 
-	setContent: function(){
-		var content = Array.from(arguments), fx;
+	setColumnContent: function(column, content){
+		var columnElement = this.columns[column];
+		if (!columnElement) return this;
 
-		if (['right', 'left', 'fade'].contains(content[1])) fx = content[1];
-		if (content.length == 1 || fx) content = content[0];
+		var type = typeOf(content);
+		if (['string', 'number'].contains(type)) columnElement.set('text', content);
+		else columnElement.empty().adopt(content);
+
+		return this;
+	},
+
+	setColumnsContent: function(content, fx){
+		var old = this.columns;
+		this.columns = this.newColumns;
+		this.newColumns = old;
+
+		content.forEach(function(_content, i){
+			this.setColumnContent(i, _content);
+		}, this);
+		return this.setContent(null, fx);
+	},
+
+	setColumns: function(columns){
+		var _columns = this.columns = new Elements, _newColumns = this.newColumns = new Elements;
+		for (var i = columns; i--;){
+			_columns.push(new Element('div.column').addClass('column_' + (columns - i)));
+			_newColumns.push(new Element('div.column').addClass('column_' + (columns - i)));
+		}
+
+		var oldClass = 'column_' + this.options.columns, newClass = 'column_' + columns;
+		this.picker.removeClass(oldClass).addClass(newClass);
+
+		this.options.columns = columns;
+		return this;
+	},
+
+	setContent: function(content, fx){
+		if (content) return this.setColumnsContent([content], fx);
 
 		// swap contents so we can fill the newContents again and animate
 		var old = this.oldContents;
@@ -227,9 +296,7 @@ var Picker = new Class({
 		this.newContents = old;
 		this.newContents.empty();
 
-		var type = typeOf(content);
-		if (['string', 'number'].contains(type)) this.newContents.set('text', content);
-		else this.newContents.adopt(content);
+		this.newContents.adopt(this.columns);
 
 		this.setBodySize();
 
@@ -273,8 +340,15 @@ var Picker = new Class({
 		return this.picker;
 	},
 
-	setTitle: function(text){
-		this.titleText.set('text', text);
+	setTitle: function(content, fn){
+		if (!fn) fn = Function.from;
+		this.titleText.empty().adopt(
+			Array.from(content).map(function(item, i){
+				return typeOf(item) == 'element'
+					? item
+					: new Element('div.column', {text: fn(item, this.options)}).addClass('column_' + (i + 1));
+			}, this)
+		);
 		return this;
 	},
 
@@ -297,14 +371,16 @@ provides: Picker.Attach
 ...
 */
 Picker.Attach = new Class({
+
 	Extends: Picker,
 
 	options: {/*
-		onAttachedEvent: function(event){},
+		onAttached: function(event){},
 
 		toggleElements: null, // deprecated
 		toggle: null, // When set it deactivate toggling by clicking on the input */
-		showOnInit: false
+		showOnInit: false, // overrides the Picker option
+		blockKeydown: true
 	},
 
 	initialize: function(attachTo, options){
@@ -316,7 +392,7 @@ Picker.Attach = new Class({
 		this.inputs = [];
 
 		var documentEvent = function(event){
-			if (this.attachedElements.contains(event.target)) return null;
+			if (this.attachedElements.contains(event.target)) return;
 			this.close();
 		}.bind(this);
 		var document = this.picker.getDocument().addEvent('click', documentEvent);
@@ -342,40 +418,63 @@ Picker.Attach = new Class({
 			allElements = [].append(elements).combine(toggles),
 			self = this;
 
-		var eventWrapper = function(fn, element){
+		var closeEvent = function(event){
+			var stopInput = self.options.blockKeydown
+					&& event.type == 'keydown'
+					&& !(['tab', 'esc'].contains(event.key)),
+				isCloseKey = event.type == 'keydown'
+					&& (['tab', 'esc'].contains(event.key)),
+				isA = event.target.get('tag') == 'a';
+
+			if (stopInput || isA) event.preventDefault();
+			if (isCloseKey || isA) self.close();
+		};
+
+		var getOpenEvent = function(element){
 			return function(event){
-				if (event.type == 'keydown' && ['tab', 'esc'].contains(event.key) == false) return false;
-				if (event.target.get('tag') == 'a') event.stop();
-				self.fireEvent('attachedEvent', [event, element]);
+				var tag = event.target.get('tag');
+				if (tag == 'input' && event.type == 'click' && !element.match(':focus') || (self.opened && self.input == element)) return;
+				if (tag == 'a') event.stop();
 				self.position(element);
-				fn();
+				self.open();
+				self.fireEvent('attached', [event, element]);
 			};
 		};
 
-		allElements.each(function(element, i){
+		var getToggleEvent = function(open, close){
+			return function(event){
+				if (self.opened) close(event);
+				else open(event);
+			};
+		};
+
+		allElements.each(function(element){
 
 			// The events are already attached!
-			if (self.attachedElements.contains(element)) return null;
+			if (self.attachedElements.contains(element)) return;
 
-			var tag = element.get('tag');
+			var events = {},
+				tag = element.get('tag'),
+				openEvent = getOpenEvent(element),
+				// closeEvent does not have a depency on element
+				toggleEvent = getToggleEvent(openEvent, closeEvent);
 
-			var events = {};
 			if (tag == 'input'){
 				// Fix in order to use togglers only
 				if (!toggles.length){
 					events = {
-						focus: eventWrapper(self.open.bind(self), element),
-						keydown: eventWrapper(self.close.bind(self), element),
-						click: eventWrapper(self.open.bind(self), element)
+						focus: openEvent,
+						click: openEvent,
+						keydown: closeEvent
 					};
 				}
 				self.inputs.push(element);
 			} else {
 				if (toggles.contains(element)){
 					self.toggles.push(element);
-					events.click = eventWrapper(self.toggle.bind(self), element);
+					events.click = toggleEvent
 				} else {
-					events.click = eventWrapper(self.open.bind(self), element);
+					events.click = openEvent;
 				}
 			}
 			element.addEvents(events);
@@ -398,7 +497,7 @@ Picker.Attach = new Class({
 
 		allElements.each(function(element){
 			var i = self.attachedElements.indexOf(element);
-			if (i < 0) return null;
+			if (i < 0) return;
 
 			var events = self.attachedEvents[i];
 			element.removeEvents(events);
@@ -410,33 +509,17 @@ Picker.Attach = new Class({
 
 			var inputIndex = self.inputs.indexOf(element);
 			if (toggleIndex != -1) delete self.inputs[inputIndex];
-
 		});
 		return this;
 	},
 
 	destroy: function(){
 		this.detach();
-		this.parent();
+		return this.parent();
 	}
 
 });
 
-/*
----
-name: Locale.en-US.DatePicker
-description: English Language File for DatePicker
-authors: Arian Stolwijk
-requires: [More/Locale]
-provides: Locale.en-US.DatePicker
-...
-*/
-Locale.define('en-US', 'DatePicker', {
-	select_a_time: 'Select a time',
-	use_mouse_wheel: 'Use the mouse wheel to quickly change value',
-	time_confirm_button: 'OK'
-});
-
 /*
 ---
 name: Picker.Date
@@ -458,6 +541,8 @@ this.DatePicker = Picker.Date = new Class({
 		minDate: new Date('3/4/2010'), // Date object or a string
 		maxDate: new Date('3/4/2011'), // same as minDate
 		availableDates: {}, //
+		invertAvailable: false,
+
 		format: null,*/
 
 		timePicker: false,
@@ -470,8 +555,12 @@ this.DatePicker = Picker.Date = new Class({
 		startDay: 1, // Sunday (0) through Saturday (6) - be aware that this may affect your layout, since the days on the right might have a different margin
 
 		startView: 'days', // allowed values: {time, days, months, years}
+		openLastView: false,
 		pickOnly: false, // 'years', 'months', 'days', 'time'
 		canAlwaysGoUp: ['months', 'days'],
+		updateAll : false, //whether or not to update all inputs when selecting a date
+
+		weeknumbers: false,
 
 		// if you like to use your own translations
 		months_abbr: null,
@@ -495,11 +584,15 @@ this.DatePicker = Picker.Date = new Class({
 		this.parent(attachTo, options);
 
 		this.setOptions(options);
-		var options = this.options;
+		options = this.options;
 
 		// If we only want to use one picker / backwards compatibility
 		['year', 'month', 'day', 'time'].some(function(what){
-			if (options[what + 'PickerOnly']) return options.pickOnly = what;
+			if (options[what + 'PickerOnly']){
+				options.pickOnly = what;
+				return true;
+			}
+			return false;
 		});
 		if (options.pickOnly){
 			options[options.pickOnly + 'Picker'] = true;
@@ -509,10 +602,7 @@ this.DatePicker = Picker.Date = new Class({
 		// backward compatibility for startView
 		var newViews = ['days', 'months', 'years'];
 		['month', 'year', 'decades'].some(function(what, i){
-			if (options.startView == what){
-				options.startView = newViews[i];
-				return true;
-			}
+			return (options.startView == what) && (options.startView = newViews[i]);
 		});
 
 		options.canAlwaysGoUp = options.canAlwaysGoUp ? Array.from(options.canAlwaysGoUp) : [];
@@ -532,42 +622,35 @@ this.DatePicker = Picker.Date = new Class({
 			if (options.timePicker) options.format = (options.format) + (options.format ? ' ' : '') + Locale.get('Date.shortTime');
 		}
 
-		// This is where we store the selected date
-		this.date = limitDate(new Date(), options.minDate, options.maxDate);
-
 		// Some link or input has fired an event!
-		this.addEvent('attachedEvent', function(event, element){
+		this.addEvent('attached', function(event, element){
+
+			// This is where we store the selected date
+			if (!this.currentView || !options.openLastView) this.currentView = options.startView;
+
+			this.date = limitDate(new Date(), options.minDate, options.maxDate);
 			var tag = element.get('tag'), input;
-			if (tag == 'input'){
-				input = element;
-			} else {
+			if (tag == 'input') input = element;
+			else {
 				var index = this.toggles.indexOf(element);
 				if (this.inputs[index]) input = this.inputs[index];
 			}
-			this.date = new Date()
-			if (input){
-				var date = Date.parse(input.get('value'));
-				if (date == null || !date.isValid()){
-					var storeDate = input.retrieve('datepicker:value');
-					if (storeDate) date = Date.parse(storeDate);
-				}
-				if (date != null && date.isValid()) this.date = date;
-			}
+			this.getInputDate(input);
 			this.input = input;
+			this.setColumns(this.originalColumns);
 		}.bind(this), true);
 
+	},
 
-		// Start rendering the default view.
-		this.currentView = options.startView;
-		this.addEvent('open', function(){
-			var view = this.currentView,
-				cap = view.capitalize();
-			if (this['render' + cap]){
-				this['render' + cap](this.date.clone());
-				this.currentView = view;
-			}
-		}.bind(this));
-
+	getInputDate: function(input){
+		this.date = new Date();
+		if (!input) return;
+		var date = Date.parse(input.get('value'));
+		if (date == null || !date.isValid()){
+			var storeDate = input.retrieve('datepicker:value');
+			if (storeDate) date = Date.parse(storeDate);
+		}
+		if (date != null && date.isValid()) this.date = date;
 	},
 
 	// Control the previous and next elements
@@ -579,18 +662,18 @@ this.DatePicker = Picker.Date = new Class({
 		this.next = new Element('div.next[html=&#187;]').inject(this.header);
 	},
 
-	hidePrevious: function($next, $show){
-		this[$next ? 'next' : 'previous'].setStyle('display', $show ? 'block' : 'none');
+	hidePrevious: function(_next, _show){
+		this[_next ? 'next' : 'previous'].setStyle('display', _show ? 'block' : 'none');
 		return this;
 	},
 
-	showPrevious: function($next){
-		return this.hidePrevious($next, true);
+	showPrevious: function(_next){
+		return this.hidePrevious(_next, true);
 	},
 
-	setPreviousEvent: function(fn, $next){
-		this[$next ? 'next' : 'previous'].removeEvents('click');
-		if (fn) this[$next ? 'next' : 'previous'].addEvent('click', fn);
+	setPreviousEvent: function(fn, _next){
+		this[_next ? 'next' : 'previous'].removeEvents('click');
+		if (fn) this[_next ? 'next' : 'previous'].addEvent('click', fn);
 		return this;
 	},
 
@@ -606,26 +689,48 @@ this.DatePicker = Picker.Date = new Class({
 		return this.setPreviousEvent(fn, true);
 	},
 
+	setColumns: function(columns, view, date, viewFx){
+		var ret = this.parent(columns), method;
+
+		if ((view || this.currentView)
+			&& (method = 'render' + (view || this.currentView).capitalize())
+			&& this[method]
+		) this[method](date || this.date.clone(), viewFx);
+
+		return ret;
+	},
+
 	// Render the Pickers
 
 	renderYears: function(date, fx){
-
-		var options = this.options;
+		var options = this.options, pages = options.columns, perPage = options.yearsPerPage,
+			_columns = [], _dates = [];
+		this.dateElements = [];
 
 		// start neatly at interval (eg. 1980 instead of 1987)
-		while (date.get('year') % options.yearsPerPage > 0) date.decrement('year', 1);
-
-		this.setTitle(options.years_title(date, options));
+		date = date.clone().decrement('year', date.get('year') % perPage);
+
+		var iterateDate = date.clone().decrement('year', Math.floor((pages - 1) / 2) * perPage);
+
+		for (var i = pages; i--;){
+			var _date = iterateDate.clone();
+			_dates.push(_date);
+			_columns.push(renderers.years(
+				timesSelectors.years(options, _date.clone()),
+				options,
+				this.date.clone(),
+				this.dateElements,
+				function(date){
+					if (options.pickOnly == 'years') this.select(date);
+					else this.renderMonths(date, 'fade');
+					this.date = date;
+				}.bind(this)
+			));
+			iterateDate.increment('year', perPage);
+		}
 
-		this.setContent(renderers.years(
-			options,
-			date.clone(),
-			this.date.clone(),
-			function(date){
-				if (options.pickOnly == 'years') this.select(date);
-				else this.renderMonths(date, 'fade');
-			}.bind(this)
-		), fx);
+		this.setColumnsContent(_columns, fx);
+		this.setTitle(_dates, options.years_title);
 
 		// Set limits
 		var limitLeft = (options.minDate && date.get('year') <= options.minDate.get('year')),
@@ -634,30 +739,43 @@ this.DatePicker = Picker.Date = new Class({
 		this[(limitRight ? 'hide' : 'show') + 'Next']();
 
 		this.setPreviousEvent(function(){
-			this.renderYears(date.decrement('year', options.yearsPerPage), 'left');
+			this.renderYears(date.decrement('year', perPage), 'left');
 		}.bind(this));
 
 		this.setNextEvent(function(){
-			this.renderYears(date.increment('year', options.yearsPerPage), 'right');
+			this.renderYears(date.increment('year', perPage), 'right');
 		}.bind(this));
 
 		// We can't go up!
 		this.setTitleEvent(null);
+
+		this.currentView = 'years';
 	},
 
 	renderMonths: function(date, fx){
-		var options = this.options;
-		this.setTitle(options.months_title(date, options));
+		var options = this.options, years = options.columns, _columns = [], _dates = [],
+			iterateDate = date.clone().decrement('year', Math.floor((years - 1) / 2));
+		this.dateElements = [];
+
+		for (var i = years; i--;){
+			var _date = iterateDate.clone();
+			_dates.push(_date);
+			_columns.push(renderers.months(
+				timesSelectors.months(options, _date.clone()),
+				options,
+				this.date.clone(),
+				this.dateElements,
+				function(date){
+					if (options.pickOnly == 'months') this.select(date);
+					else this.renderDays(date, 'fade');
+					this.date = date;
+				}.bind(this)
+			));
+			iterateDate.increment('year', 1);
+		}
 
-		this.setContent(renderers.months(
-			options,
-			date.clone(),
-			this.date.clone(),
-			function(date){
-				if (options.pickOnly == 'months') this.select(date);
-				else this.renderDays(date, 'fade');
-			}.bind(this)
-		), fx);
+		this.setColumnsContent(_columns, fx);
+		this.setTitle(_dates, options.months_title);
 
 		// Set limits
 		var year = date.get('year'),
@@ -667,11 +785,11 @@ this.DatePicker = Picker.Date = new Class({
 		this[(limitRight ? 'hide' : 'show') + 'Next']();
 
 		this.setPreviousEvent(function(){
-			this.renderMonths(date.decrement('year', 1), 'left');
+			this.renderMonths(date.decrement('year', years), 'left');
 		}.bind(this));
 
 		this.setNextEvent(function(){
-			this.renderMonths(date.increment('year', 1), 'right');
+			this.renderMonths(date.increment('year', years), 'right');
 		}.bind(this));
 
 		var canGoUp = options.yearPicker && (options.pickOnly != 'months' || options.canAlwaysGoUp.contains('months'));
@@ -679,21 +797,34 @@ this.DatePicker = Picker.Date = new Class({
 			this.renderYears(date, 'fade');
 		}.bind(this) : null;
 		this.setTitleEvent(titleEvent);
+
+		this.currentView = 'months';
 	},
 
 	renderDays: function(date, fx){
-		var options = this.options;
-		this.setTitle(options.days_title(date, options));
+		var options = this.options, months = options.columns, _columns = [], _dates = [],
+			iterateDate = date.clone().decrement('month', Math.floor((months - 1) / 2));
+		this.dateElements = [];
+
+		for (var i = months; i--;){
+			_date = iterateDate.clone();
+			_dates.push(_date);
+			_columns.push(renderers.days(
+				timesSelectors.days(options, _date.clone()),
+				options,
+				this.date.clone(),
+				this.dateElements,
+				function(date){
+					if (options.pickOnly == 'days' || !options.timePicker) this.select(date)
+					else this.renderTime(date, 'fade');
+					this.date = date;
+				}.bind(this)
+			));
+			iterateDate.increment('month', 1);
+		}
 
-		this.setContent(renderers.days(
-			options,
-			date.clone(),
-			this.date.clone(),
-			function(date){
-				if (options.pickOnly == 'days' || !options.timePicker) this.select(date)
-				else this.renderTime(date, 'fade');
-			}.bind(this)
-		), fx);
+		this.setColumnsContent(_columns, fx);
+		this.setTitle(_dates, options.days_title);
 
 		var yearmonth = date.format('%Y%m').toInt(),
 			limitLeft = (options.minDate && yearmonth <= options.minDate.format('%Y%m')),
@@ -702,11 +833,11 @@ this.DatePicker = Picker.Date = new Class({
 		this[(limitRight ? 'hide' : 'show') + 'Next']();
 
 		this.setPreviousEvent(function(){
-			this.renderDays(date.decrement('month', 1), 'left');
+			this.renderDays(date.decrement('month', months), 'left');
 		}.bind(this));
 
 		this.setNextEvent(function(){
-			this.renderDays(date.increment('month', 1), 'right');
+			this.renderDays(date.increment('month', months), 'right');
 		}.bind(this));
 
 		var canGoUp = options.pickOnly != 'days' || options.canAlwaysGoUp.contains('days');
@@ -714,16 +845,21 @@ this.DatePicker = Picker.Date = new Class({
 			this.renderMonths(date, 'fade');
 		}.bind(this) : null;
 		this.setTitleEvent(titleEvent);
+
+		this.currentView = 'days';
 	},
 
 	renderTime: function(date, fx){
 		var options = this.options;
-		this.setTitle(options.time_title(date, options));
+		this.setTitle(date, options.time_title);
+
+		var originalColumns = this.originalColumns = options.columns;
+		this.currentView = null; // otherwise you'd get crazy recursion
+		if (originalColumns != 1) this.setColumns(1);
 
 		this.setContent(renderers.time(
 			options,
 			date.clone(),
-			this.date.clone(),
 			function(date){
 				this.select(date);
 			}.bind(this)
@@ -737,129 +873,167 @@ this.DatePicker = Picker.Date = new Class({
 
 		var canGoUp = options.pickOnly != 'time' || options.canAlwaysGoUp.contains('time');
 		var titleEvent = (canGoUp) ? function(){
-			this.renderDays(date, 'fade');
+			this.setColumns(originalColumns, 'days', date, 'fade');
 		}.bind(this) : null;
 		this.setTitleEvent(titleEvent);
+
+		this.currentView = 'time';
 	},
 
-	select: function(date){
+	select: function(date, all){
 		this.date = date;
-		if (this.input){
-			this.input.set('value', date.format(this.options.format))
-				.store('datepicker:value', date.strftime())
-		}
-		this.fireEvent('select', date);
+		var formatted = date.format(this.options.format),
+			time = date.strftime(),
+			inputs = (!this.options.updateAll && !all && this.input) ? [this.input] : this.inputs;
+
+		inputs.each(function(input){
+			input.set('value', formatted).store('datepicker:value', time).fireEvent('change');
+		}, this);
+
+		this.fireEvent('select', [date].concat(inputs));
 		this.close();
+		return this;
 	}
 
 });
 
+
 // Renderers only output elements and calculate the limits!
 
+var timesSelectors = {
+
+	years: function(options, date){
+		var times = [];
+		for (var i = 0; i < options.yearsPerPage; i++){
+			times.push(+date);
+			date.increment('year', 1);
+		}
+		return times;
+	},
+
+	months: function(options, date){
+		var times = [];
+		date.set('month', 0);
+		for (var i = 0; i <= 11; i++){
+			times.push(+date);
+			date.increment('month', 1);
+		}
+		return times;
+	},
+
+	days: function(options, date){
+		var times = [];
+		date.set('date', 1);
+		while (date.get('day') != options.startDay) date.set('date', date.get('date') - 1);
+		for (var i = 0; i < 42; i++){
+			times.push(+date);
+			date.increment('day',  1);
+		}
+		return times;
+	}
+
+};
+
 var renderers = {
 
-	years: function(options, date, currentDate, fn){
-		var limit = {left: false, right: false},
-			container = new Element('div.years'),
-			today = new Date(),
-			year, element, classes;
+	years: function(years, options, currentDate, dateElements, fn){
+		var container = new Element('div.years'),
+			today = new Date(), element, classes;
 
-		for (var i = 0; i < options.yearsPerPage; i++){
-			year = date.get('year');
+		years.each(function(_year, i){
+			var date = new Date(_year), year = date.get('year');
 
 			classes = '.year.year' + i;
 			if (year == today.get('year')) classes += '.today';
 			if (year == currentDate.get('year')) classes += '.selected';
 			element = new Element('div' + classes, {text: year}).inject(container);
 
-			if (isUnavailable('year', date, options)) element.addClass('unavailable');
-			else element.addEvent('click', fn.pass(date.clone()));
+			dateElements.push({element: element, time: _year});
 
-			date.increment('year', 1);
-		}
+			if (isUnavailable('year', date, options)) element.addClass('unavailable');
+			else element.addEvent('click', fn.pass(date));
+		});
 
 		return container;
 	},
 
-	months: function(options, date, currentDate, fn){
+	months: function(months, options, currentDate, dateElements, fn){
 		var today = new Date(),
 			month = today.get('month'),
-			limit = {left: false, right: false},
-			thisyear = (date.get('year') == today.get('year')),
-			selectedyear = (date.get('year') == currentDate.get('year')),
+			thisyear = today.get('year'),
+			selectedyear = currentDate.get('year'),
 			container = new Element('div.months'),
-			months = options.months_abbr || Locale.get('Date.months_abbr'),
-			elelement, classes;
+			monthsAbbr = options.months_abbr || Locale.get('Date.months_abbr'),
+			element, classes;
 
-		date.set('month', 0);
-		if (options.minDate){
-			date.decrement('month', 1);
-			date.set('date', date.get('lastdayofmonth'));
-			date.increment('month', 1);
-		}
-
-		date.set('date', date.get('lastdayofmonth'));
-
-		for (var i = 0; i <= 11; i++){
+		months.each(function(_month, i){
+			var date = new Date(_month), year = date.get('year');
 
 			classes = '.month.month' + (i + 1);
-			if (i == month && thisyear) classes += '.today';
-			if (i == currentDate.get('month') && selectedyear) classes += '.selected';
-			element = new Element('div' + classes, {text: months[i]}).inject(container);
+			if (i == month && year == thisyear) classes += '.today';
+			if (i == currentDate.get('month') && year == selectedyear) classes += '.selected';
+			element = new Element('div' + classes, {text: monthsAbbr[i]}).inject(container);
 
-			if (isUnavailable('month', date, options)) element.addClass('unavailable');
-			else element.addEvent('click', fn.pass(date.clone()));
+			dateElements.push({element: element, time: _month});
 
-			date.increment('month', 1);
-			date.set('date', date.get('lastdayofmonth'));
-		}
+			if (isUnavailable('month', date, options)) element.addClass('unavailable');
+			else element.addEvent('click', fn.pass(date));
+		});
 
 		return container;
 	},
 
-	days: function(options, date, currentDate, fn){
-		var month = date.get('month'),
-			limit = {left: false, right: false},
+	days: function(days, options, currentDate, dateElements, fn){
+		var month = new Date(days[14]).get('month'),
 			todayString = new Date().toDateString(),
 			currentString = currentDate.toDateString(),
-			container = new Element('div.days'),
-			titles = new Element('div.titles').inject(container),
+			weeknumbers = options.weeknumbers,
+			container = new Element('table.days' + (weeknumbers ? '.weeknumbers' : ''), {
+				role: 'grid', 'aria-labelledby': this.titleID
+			}),
+			header = new Element('thead').inject(container),
+			body = new Element('tbody').inject(container),
+			titles = new Element('tr.titles').inject(header),
 			localeDaysShort = options.days_abbr || Locale.get('Date.days_abbr'),
 			day, classes, element, weekcontainer, dateString;
 
-		date.setDate(1);
-		while (date.getDay() != options.startDay) date.setDate(date.getDate() - 1);
-
+		if (weeknumbers) new Element('th.title.day.weeknumber', {
+			text: Locale.get('DatePicker.week')
+		}).inject(titles);
 		for (day = options.startDay; day < (options.startDay + 7); day++){
-			new Element('div.title.day.day' + (day % 7), {
-				text: localeDaysShort[(day % 7)]
+			new Element('th.title.day.day' + (day % 7), {
+				text: localeDaysShort[(day % 7)],
+				role: 'columnheader'
 			}).inject(titles);
 		}
 
-		for (var i = 0; i < 42; i++){
+		days.each(function(_date, i){
+			var date = new Date(_date);
 
 			if (i % 7 == 0){
-				weekcontainer = new Element('div.week.week' + (Math.floor(i / 7))).inject(container);
+				weekcontainer = new Element('tr.week.week' + (Math.floor(i / 7))).set('role', 'row').inject(body);
+				if (weeknumbers) new Element('td.day.weeknumber', {text: date.get('week')}).inject(weekcontainer);
 			}
 
 			dateString = date.toDateString();
 			classes = '.day.day' + date.get('day');
 			if (dateString == todayString) classes += '.today';
-			if (dateString == currentString) classes += '.selected';
 			if (date.get('month') != month) classes += '.otherMonth';
+			element = new Element('td' + classes, {text: date.getDate(), role: 'gridcell'}).inject(weekcontainer);
+
+			if (dateString == currentString) element.addClass('selected').set('aria-selected', 'true');
+			else element.set('aria-selected', 'false');
 
-			element = new Element('div' + classes, {text: date.getDate()}).inject(weekcontainer);
+			dateElements.push({element: element, time: _date});
 
 			if (isUnavailable('date', date, options)) element.addClass('unavailable');
 			else element.addEvent('click', fn.pass(date.clone()));
-
-			date.increment('day',  1);
-		}
+		});
 
 		return container;
 	},
 
-	time: function(options, date, currentDate, fn){
+	time: function(options, date, fn){
 		var container = new Element('div.time'),
 			// make sure that the minutes are timeWheelStep * k
 			initMinutes = (date.get('minutes') / options.timeWheelStep).round() * options.timeWheelStep
@@ -935,7 +1109,6 @@ Picker.Date.defineRenderer = function(name, fn){
 	return this;
 };
 
-
 var limitDate = function(date, min, max){
 	if (min && date < min) return min;
 	if (max && date > max) return max;
@@ -945,18 +1118,19 @@ var limitDate = function(date, min, max){
 var isUnavailable = function(type, date, options){
 	var minDate = options.minDate,
 		maxDate = options.maxDate,
-		availableDates = options.availableDates;
+		availableDates = options.availableDates,
+		year, month, day, ms;
 
 	if (!minDate && !maxDate && !availableDates) return false;
 	date.clearTime();
 
 	if (type == 'year'){
-		var year = date.get('year');
+		year = date.get('year');
 		return (
 			(minDate && year < minDate.get('year')) ||
 			(maxDate && year > maxDate.get('year')) ||
 			(
-				(availableDates != null) && (
+				(availableDates != null &&  !options.invertAvailable) && (
 					availableDates[year] == null ||
 					Object.getLength(availableDates[year]) == 0 ||
 					Object.getLength(
@@ -970,14 +1144,14 @@ var isUnavailable = function(type, date, options){
 	}
 
 	if (type == 'month'){
-		var year = date.get('year'),
-			month = date.get('month') + 1,
-			ms = date.format('%Y%m').toInt();
+		year = date.get('year');
+		month = date.get('month') + 1;
+		ms = date.format('%Y%m').toInt();
 		return (
 			(minDate && ms < minDate.format('%Y%m').toInt()) ||
 			(maxDate && ms > maxDate.format('%Y%m').toInt()) ||
 			(
-				(availableDates != null) && (
+				(availableDates != null && !options.invertAvailable) && (
 					availableDates[year] == null ||
 					availableDates[year][month] == null ||
 					availableDates[year][month].length == 0
@@ -987,26 +1161,152 @@ var isUnavailable = function(type, date, options){
 	}
 
 	// type == 'date'
-	var year = date.get('year'),
-		month = date.get('month') + 1,
-		day = date.get('date');
-	return (
-		(minDate && date < minDate) ||
-		(maxDate && date > maxDate) ||
-		(
-			(availableDates != null) && (
-				availableDates[year] == null ||
-				availableDates[year][month] == null ||
-				!availableDates[year][month].contains(day)
-			)
-		)
-	);
+	year = date.get('year');
+	month = date.get('month') + 1;
+	day = date.get('date');
+
+	var dateAllow = (minDate && date < minDate) || (minDate && date > maxDate);
+	if (availableDates != null){
+		dateAllow = dateAllow
+			|| availableDates[year] == null
+			|| availableDates[year][month] == null
+			|| !availableDates[year][month].contains(day);
+		if (options.invertAvailable) dateAllow = !dateAllow;
+	}
+
+	return dateAllow;
 };
 
+})();
+
+/*
+---
+name: Picker.Date.Range
+description: Select a Range of Dates
+authors: Arian Stolwijk
+requires: [Picker, Picker.Date]
+provides: Picker.Date.Range
+...
+*/
+Picker.Date.Range = new Class({
 
-// Parse times
-Date.defineParsers(
-	'%H:%M( ?%p)?' // "11:05pm", "11:05 am" and "11:05"
-);
+	Extends: Picker.Date,
 
-})();
+	options: {
+		getStartEndDate: function(input){
+			return input.get('value').split('-').map(function(date){
+				var parsed = Date.parse(date);
+				return Date.isValid(parsed) ? parsed : null;
+			}).clean();
+		},
+		setStartEndDate: function(input, dates){
+			input.set('value', dates.map(function(date){
+				return date.format(this.options.format);
+			}, this).join(' - '));
+		},
+		footer: true,
+		columns: 3
+	},
+
+	getInputDate: function(input){
+		if (!input) return;
+
+		var dates = input.retrieve('datepicker:value');
+		if (dates && dates.length) dates = dates.map(Date.parse);
+		if (!dates || !dates.length || dates.some(function(date){
+			return !Date.isValid(date);
+		})){
+			dates = this.options.getStartEndDate.call(this, input);
+			if (!dates.length || !dates.every(function(date){
+				return Date.isValid(date);
+			})) dates = [this.date];
+		}
+		if (dates.length == 1) this.date = this.startDate = this.endDate = dates[0];
+		else if (dates.length == 2){
+			this.date = this.startDate = dates[0];
+			this.endDate = dates[1];
+		}
+	},
+
+	constructPicker: function(){
+		this.parent();
+		var footer = this.footer, self = this;
+		if (!footer) return;
+
+		var events = {
+			click: function(){
+				this.focus();
+			},
+			blur: function(){
+				var date = Date.parse(this.get('value'));
+				if (date.isValid) self[(this == startInput ? 'start' : 'end') + 'Date'] = date;
+				self.updateRangeSelection();
+			},
+			keydown: function(event){
+				if (event.key == 'enter') self.selectRange();
+			}
+		};
+
+		var startInput = this.startInput = new Element('input', {events: events}).inject(footer);
+		new Element('span', {text: ' - '}).inject(footer);
+		var endInput = this.endInput = new Element('input', {events: events}).inject(footer);
+
+		this.applyButton = new Element('button.apply', {
+			text: Locale.get('DatePicker.apply_range'),
+			events: {click: self.selectRange.pass([], self)}
+		}).inject(footer);
+
+		this.cancelButton = new Element('button.cancel', {
+			text: Locale.get('DatePicker.cancel'),
+			events: {click: self.close.pass(false, self)}
+		}).inject(footer);
+	},
+
+	renderDays: function(){
+		this.parent.apply(this, arguments);
+		this.updateRangeSelection();
+	},
+
+	select: function(date){
+		if (this.startDate && (this.endDate == this.startDate || date > this.endDate) && date >= this.startDate) this.endDate = date;
+		else {
+			this.startDate = date;
+			this.endDate = date;
+		}
+		this.updateRangeSelection();
+	},
+
+	selectRange: function(){
+		this.date = this.startDate;
+		var dates = [this.startDate, this.endDate], input = this.input;
+
+		this.options.setStartEndDate.call(this, input, dates);
+		input.store('datepicker:value', dates.map(function(date){
+			return date.strftime();
+		})).fireEvent('change');
+
+		this.fireEvent('select', dates, input);
+		this.close();
+		return this;
+	},
+
+	updateRangeSelection: function(){
+		var start = this.startDate,
+			end = this.endDate || start;
+
+		if (this.dateElements) for (var i = this.dateElements.length; i--;){
+			var el = this.dateElements[i];
+			if (el.time >= start && el.time <= end) el.element.addClass('selected');
+			else el.element.removeClass('selected');
+		}
+
+		var formattedFirst = start.format(this.options.format)
+			formattedEnd = end.format(this.options.format);
+
+		this.startInput.set('value', formattedFirst);
+		this.endInput.set('value', formattedEnd);
+
+		return this;
+	}
+
+});