cal-heatmap.js

/*! cal-heatmap v3.6.0 (Sun Apr 24 2016 19:19:35)
 *  ---------------------------------------------
 *  Cal-Heatmap is a javascript module to create calendar heatmap to visualize time series data
 *  https://github.com/wa0x6e/cal-heatmap
 *  Licensed under the MIT license
 *  Copyright 2014 Wan Qi Chen
 */

var d3 = typeof require === "function" ? require("d3") : window.d3;

var CalHeatMap = function() {
	"use strict";

	var self = this;

	this.allowedDataType = ["json", "csv", "tsv", "txt"];

	// Default settings
	this.options = {
		// selector string of the container to append the graph to
		// Accept any string value accepted by document.querySelector or CSS3
		// or an Element object
		itemSelector: "#cal-heatmap",

		// Whether to paint the calendar on init()
		// Used by testsuite to reduce testing time
		paintOnLoad: true,

		// ================================================
		// DOMAIN
		// ================================================

		// Number of domain to display on the graph
		range: 12,

		// Size of each cell, in pixel
		cellSize: 10,

		// Padding between each cell, in pixel
		cellPadding: 2,

		// For rounded subdomain rectangles, in pixels
		cellRadius: 0,

		domainGutter: 2,

		domainMargin: [0, 0, 0, 0],

		domain: "hour",

		subDomain: "min",

		// Number of columns to split the subDomains to
		// If not null, will takes precedence over rowLimit
		colLimit: null,

		// Number of rows to split the subDomains to
		// Will be ignored if colLimit is not null
		rowLimit: null,

		// First day of the week is Monday
		// 0 to start the week on Sunday
		weekStartOnMonday: true,

		// Start date of the graph
		// @default now
		start: new Date(),

		minDate: null,

		maxDate: null,

		// ================================================
		// DATA
		// ================================================

		// Data source
		// URL, where to fetch the original datas
		data: "",

		// Data type
		// Default: json
		dataType: this.allowedDataType[0],

		// Payload sent when using POST http method
		// Leave to null (default) for GET request
		// Expect a string, formatted like "a=b;c=d"
		dataPostPayload: null,

		// Whether to consider missing date:value from the datasource
		// as equal to 0, or just leave them as missing
		considerMissingDataAsZero: false,

		// Load remote data on calendar creation
		// When false, the calendar will be left empty
		loadOnInit: true,

		// Calendar orientation
		// false: display domains side by side
		// true : display domains one under the other
		verticalOrientation: false,

		// Domain dynamic width/height
		// The width on a domain depends on the number of
		domainDynamicDimension: true,

		// Domain Label properties
		label: {
			// valid: top, right, bottom, left
			position: "bottom",

			// Valid: left, center, right
			// Also valid are the direct svg values: start, middle, end
			align: "center",

			// By default, there is no margin/padding around the label
			offset: {
				x: 0,
				y: 0
			},

			rotate: null,

			// Used only on vertical orientation
			width: 100,

			// Used only on horizontal orientation
			height: null
		},

		// ================================================
		// LEGEND
		// ================================================

		// Threshold for the legend
		legend: [10, 20, 30, 40],

		// Whether to display the legend
		displayLegend: true,

		legendCellSize: 10,

		legendCellPadding: 2,

		legendMargin: [0, 0, 0, 0],

		// Legend vertical position
		// top: place legend above calendar
		// bottom: place legend below the calendar
		legendVerticalPosition: "bottom",

		// Legend horizontal position
		// accepted values: left, center, right
		legendHorizontalPosition: "left",

		// Legend rotation
		// accepted values: horizontal, vertical
		legendOrientation: "horizontal",

		// Objects holding all the heatmap different colors
		// null to disable, and use the default css styles
		//
		// Examples:
		// legendColors: {
		//		min: "green",
		//		max: "red",
		//		empty: "#ffffff",
		//		base: "grey",
		//		overflow: "red"
		// }
		legendColors: null,

		// ================================================
		// HIGHLIGHT
		// ================================================

		// List of dates to highlight
		// Valid values:
		// - []: don't highlight anything
		// - "now": highlight the current date
		// - an array of Date objects: highlight the specified dates
		highlight: [],

		// ================================================
		// TEXT FORMATTING / i18n
		// ================================================

		// Name of the items to represent in the calendar
		itemName: ["item", "items"],

		// Formatting of the domain label
		// @default: null, will use the formatting according to domain type
		// Accept a string used as specifier by d3.time.format()
		// or a function
		//
		// Refer to https://github.com/mbostock/d3/wiki/Time-Formatting
		// for accepted date formatting used by d3.time.format()
		domainLabelFormat: null,

		// Formatting of the title displayed when hovering a subDomain cell
		subDomainTitleFormat: {
			empty: "{date}",
			filled: "{count} {name} {connector} {date}"
		},

		// Formatting of the {date} used in subDomainTitleFormat
		// @default: null, will use the formatting according to subDomain type
		// Accept a string used as specifier by d3.time.format()
		// or a function
		//
		// Refer to https://github.com/mbostock/d3/wiki/Time-Formatting
		// for accepted date formatting used by d3.time.format()
		subDomainDateFormat: null,

		// Formatting of the text inside each subDomain cell
		// @default: null, no text
		// Accept a string used as specifier by d3.time.format()
		// or a function
		//
		// Refer to https://github.com/mbostock/d3/wiki/Time-Formatting
		// for accepted date formatting used by d3.time.format()
		subDomainTextFormat: null,

		// Formatting of the title displayed when hovering a legend cell
		legendTitleFormat: {
			lower: "less than {min} {name}",
			inner: "between {down} and {up} {name}",
			upper: "more than {max} {name}"
		},

		// Animation duration, in ms
		animationDuration: 500,

		nextSelector: false,

		previousSelector: false,

		itemNamespace: "cal-heatmap",

		tooltip: false,

		// ================================================
		// EVENTS CALLBACK
		// ================================================

		// Callback when clicking on a time block
		onClick: null,

		// Callback after painting the empty calendar
		// Can be used to trigger an API call, once the calendar is ready to be filled
		afterLoad: null,

		// Callback after loading the next domain in the calendar
		afterLoadNextDomain: null,

		// Callback after loading the previous domain in the calendar
		afterLoadPreviousDomain: null,

		// Callback after finishing all actions on the calendar
		onComplete: null,

		// Callback after fetching the datas, but before applying them to the calendar
		// Used mainly to convert the datas if they're not formatted like expected
		// Takes the fetched "data" object as argument, must return a json object
		// formatted like {timestamp:count, timestamp2:count2},
		afterLoadData: function(data) { return data; },

		// Callback triggered after calling next().
		// The `status` argument is equal to true if there is no
		// more next domain to load
		//
		// This callback is also executed once, after calling previous(),
		// only when the max domain is reached
		onMaxDomainReached: null,

		// Callback triggered after calling previous().
		// The `status` argument is equal to true if there is no
		// more previous domain to load
		//
		// This callback is also executed once, after calling next(),
		// only when the min domain is reached
		onMinDomainReached: null
	};

	this._domainType = {
		"min": {
			name: "minute",
			level: 10,
			maxItemNumber: 60,
			defaultRowNumber: 10,
			defaultColumnNumber: 6,
			row: function(d) { return self.getSubDomainRowNumber(d); },
			column: function(d) { return self.getSubDomainColumnNumber(d); },
			position: {
				x: function(d) { return Math.floor(d.getMinutes() / self._domainType.min.row(d)); },
				y: function(d) { return d.getMinutes() % self._domainType.min.row(d); }
			},
			format: {
				date: "%H:%M, %A %B %-e, %Y",
				legend: "",
				connector: "at"
			},
			extractUnit: function(d) {
				return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()).getTime();
			}
		},
		"hour": {
			name: "hour",
			level: 20,
			maxItemNumber: function(d) {
				switch(self.options.domain) {
				case "day":
					return 24;
				case "week":
					return 24 * 7;
				case "month":
					return 24 * (self.options.domainDynamicDimension ? self.getDayCountInMonth(d): 31);
				}
			},
			defaultRowNumber: 6,
			defaultColumnNumber: function(d) {
				switch(self.options.domain) {
				case "day":
					return 4;
				case "week":
					return 28;
				case "month":
					return self.options.domainDynamicDimension ? self.getDayCountInMonth(d): 31;
				}
			},
			row: function(d) { return self.getSubDomainRowNumber(d); },
			column: function(d) { return self.getSubDomainColumnNumber(d); },
			position: {
				x: function(d) {
					if (self.options.domain === "month") {
						if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
							return Math.floor((d.getHours() + (d.getDate()-1)*24) / self._domainType.hour.row(d));
						}
						return Math.floor(d.getHours() / self._domainType.hour.row(d)) + (d.getDate()-1)*4;
					} else if (self.options.domain === "week") {
						if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
							return Math.floor((d.getHours() + self.getWeekDay(d)*24) / self._domainType.hour.row(d));
						}
						return Math.floor(d.getHours() / self._domainType.hour.row(d)) + self.getWeekDay(d)*4;
					}
					return Math.floor(d.getHours() / self._domainType.hour.row(d));
				},
				y: function(d) {
					var p = d.getHours();
					if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
						switch(self.options.domain) {
						case "month":
							p += (d.getDate()-1) * 24;
							break;
						case "week":
							p += self.getWeekDay(d) * 24;
							break;
						}
					}
					return Math.floor(p % self._domainType.hour.row(d));
				}
			},
			format: {
				date: "%Hh, %A %B %-e, %Y",
				legend: "%H:00",
				connector: "at"
			},
			extractUnit: function(d) {
				return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours()).getTime();
			}
		},
		"day": {
			name: "day",
			level: 30,
			maxItemNumber: function(d) {
				switch(self.options.domain) {
				case "week":
					return 7;
				case "month":
					return self.options.domainDynamicDimension ? self.getDayCountInMonth(d) : 31;
				case "year":
					return self.options.domainDynamicDimension ? self.getDayCountInYear(d) : 366;
				}
			},
			defaultColumnNumber: function(d) {
				d = new Date(d);
				switch(self.options.domain) {
				case "week":
					return 1;
				case "month":
					return (self.options.domainDynamicDimension && !self.options.verticalOrientation) ? (self.getWeekNumber(new Date(d.getFullYear(), d.getMonth()+1, 0)) - self.getWeekNumber(d) + 1): 6;
				case "year":
					return (self.options.domainDynamicDimension ? (self.getWeekNumber(new Date(d.getFullYear(), 11, 31)) - self.getWeekNumber(new Date(d.getFullYear(), 0)) + 1): 54);
				}
			},
			defaultRowNumber: 7,
			row: function(d) { return self.getSubDomainRowNumber(d); },
			column: function(d) { return self.getSubDomainColumnNumber(d); },
			position: {
				x: function(d) {
					switch(self.options.domain) {
					case "week":
						return Math.floor(self.getWeekDay(d) / self._domainType.day.row(d));
					case "month":
						if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
							return Math.floor((d.getDate() - 1)/ self._domainType.day.row(d));
						}
						return self.getWeekNumber(d) - self.getWeekNumber(new Date(d.getFullYear(), d.getMonth()));
					case "year":
						if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
							return Math.floor((self.getDayOfYear(d) - 1) / self._domainType.day.row(d));
						}
						return self.getWeekNumber(d);
					}
				},
				y: function(d) {
					var p = self.getWeekDay(d);
					if (self.options.colLimit > 0 || self.options.rowLimit > 0) {
						switch(self.options.domain) {
						case "year":
							p = self.getDayOfYear(d) - 1;
							break;
						case "week":
							p = self.getWeekDay(d);
							break;
						case "month":
							p = d.getDate() - 1;
							break;
						}
					}
					return Math.floor(p % self._domainType.day.row(d));
				}
			},
			format: {
				date: "%A %B %-e, %Y",
				legend: "%e %b",
				connector: "on"
			},
			extractUnit: function(d) {
				return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
			}
		},
		"week": {
			name: "week",
			level: 40,
			maxItemNumber: 54,
			defaultColumnNumber: function(d) {
				d = new Date(d);
				switch(self.options.domain) {
				case "year":
					return self._domainType.week.maxItemNumber;
				case "month":
					return self.options.domainDynamicDimension ? self.getWeekNumber(new Date(d.getFullYear(), d.getMonth()+1, 0)) - self.getWeekNumber(d) : 5;
				}
			},
			defaultRowNumber: 1,
			row: function(d) { return self.getSubDomainRowNumber(d); },
			column: function(d) { return self.getSubDomainColumnNumber(d); },
			position: {
				x: function(d) {
					switch(self.options.domain) {
					case "year":
						return Math.floor(self.getWeekNumber(d) / self._domainType.week.row(d));
					case "month":
						return Math.floor(self.getMonthWeekNumber(d) / self._domainType.week.row(d));
					}
				},
				y: function(d) {
					return self.getWeekNumber(d) % self._domainType.week.row(d);
				}
			},
			format: {
				date: "%B Week #%W",
				legend: "%B Week #%W",
				connector: "in"
			},
			extractUnit: function(d) {
				var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate());
				// According to ISO-8601, week number computation are based on week starting on Monday
				var weekDay = dt.getDay()-1;
				if (weekDay < 0) {
					weekDay = 6;
				}
				dt.setDate(dt.getDate() - weekDay);
				return dt.getTime();
			}
		},
		"month": {
			name: "month",
			level: 50,
			maxItemNumber: 12,
			defaultColumnNumber: 12,
			defaultRowNumber: 1,
			row: function() { return self.getSubDomainRowNumber(); },
			column: function() { return self.getSubDomainColumnNumber(); },
			position: {
				x: function(d) { return Math.floor(d.getMonth() / self._domainType.month.row(d)); },
				y: function(d) { return d.getMonth() % self._domainType.month.row(d); }
			},
			format: {
				date: "%B %Y",
				legend: "%B",
				connector: "in"
			},
			extractUnit: function(d) {
				return new Date(d.getFullYear(), d.getMonth()).getTime();
			}
		},
		"year": {
			name: "year",
			level: 60,
			row: function() { return self.options.rowLimit || 1; },
			column: function() { return self.options.colLimit || 1; },
			position: {
				x: function() { return 1; },
				y: function() { return 1; }
			},
			format: {
				date: "%Y",
				legend: "%Y",
				connector: "in"
			},
			extractUnit: function(d) {
				return new Date(d.getFullYear()).getTime();
			}
		}
	};

	for (var type in this._domainType) {
		if (this._domainType.hasOwnProperty(type)) {
			var d = this._domainType[type];
			this._domainType["x_" + type] = {
				name: "x_" + type,
				level: d.type,
				maxItemNumber: d.maxItemNumber,
				defaultRowNumber: d.defaultRowNumber,
				defaultColumnNumber: d.defaultColumnNumber,
				row: d.column,
				column: d.row,
				position: {
					x: d.position.y,
					y: d.position.x
				},
				format: d.format,
				extractUnit: d.extractUnit
			};
		}
	}

	// Record the address of the last inserted domain when browsing
	this.lastInsertedSvg = null;

	this._completed = false;

	// Record all the valid domains
	// Each domain value is a timestamp in milliseconds
	this._domains = d3.map();

	this.graphDim = {
		width: 0,
		height: 0
	};

	this.legendDim = {
		width: 0,
		height: 0
	};

	this.NAVIGATE_LEFT = 1;
	this.NAVIGATE_RIGHT = 2;

	// Various update mode when using the update() API
	this.RESET_ALL_ON_UPDATE = 0;
	this.RESET_SINGLE_ON_UPDATE = 1;
	this.APPEND_ON_UPDATE = 2;

	this.DEFAULT_LEGEND_MARGIN = 10;

	this.root = null;
	this.tooltip = null;

	this._maxDomainReached = false;
	this._minDomainReached = false;

	this.domainPosition = new DomainPosition();
	this.Legend = null;
	this.legendScale = null;

	// List of domains that are skipped because of DST
	// All times belonging to these domains should be re-assigned to the previous domain
	this.DSTDomain = [];

	/**
	 * Display the graph for the first time
	 * @return bool True if the calendar is created
	 */
	this._init = function() {

		self.getDomain(self.options.start).map(function(d) { return d.getTime(); }).map(function(d) {
			self._domains.set(d, self.getSubDomain(d).map(function(d) { return {t: self._domainType[self.options.subDomain].extractUnit(d), v: null}; }));
		});

		self.root = d3.select(self.options.itemSelector).append("svg").attr("class", "cal-heatmap-container");

		self.tooltip = d3.select(self.options.itemSelector)
			.attr("style", function() {
				var current = d3.select(self.options.itemSelector).attr("style");
				return (current !== null ? current : "") + "position:relative;";
			})
			.append("div")
			.attr("class", "ch-tooltip")
		;

		self.root.attr("x", 0).attr("y", 0).append("svg").attr("class", "graph");

		self.Legend = new Legend(self);

		if (self.options.paintOnLoad) {
			_initCalendar();
		}

		return true;
	};

	function _initCalendar() {
		self.verticalDomainLabel = (self.options.label.position === "top" || self.options.label.position === "bottom");

		self.domainVerticalLabelHeight = self.options.label.height === null ? Math.max(25, self.options.cellSize*2): self.options.label.height;
		self.domainHorizontalLabelWidth = 0;

		if (self.options.domainLabelFormat === "" && self.options.label.height === null) {
			self.domainVerticalLabelHeight = 0;
		}

		if (!self.verticalDomainLabel) {
			self.domainVerticalLabelHeight = 0;
			self.domainHorizontalLabelWidth = self.options.label.width;
		}

		self.paint();

		// =========================================================================//
		// ATTACHING DOMAIN NAVIGATION EVENT										//
		// =========================================================================//
		if (self.options.nextSelector !== false) {
			d3.select(self.options.nextSelector).on("click." + self.options.itemNamespace, function() {
				d3.event.preventDefault();
				return self.loadNextDomain(1);
			});
		}

		if (self.options.previousSelector !== false) {
			d3.select(self.options.previousSelector).on("click." + self.options.itemNamespace, function() {
				d3.event.preventDefault();
				return self.loadPreviousDomain(1);
			});
		}

		self.Legend.redraw(self.graphDim.width - self.options.domainGutter - self.options.cellPadding);
		self.afterLoad();

		var domains = self.getDomainKeys();

		// Fill the graph with some datas
		if (self.options.loadOnInit) {
			self.getDatas(
				self.options.data,
				new Date(domains[0]),
				self.getSubDomain(domains[domains.length-1]).pop(),
				function() {
					self.fill();
					self.onComplete();
				}
			);
		} else {
			self.onComplete();
		}

		self.checkIfMinDomainIsReached(domains[0]);
		self.checkIfMaxDomainIsReached(self.getNextDomain().getTime());
	}

	// Return the width of the domain block, without the domain gutter
	// @param int d Domain start timestamp
	function w(d, outer) {
		var width = self.options.cellSize*self._domainType[self.options.subDomain].column(d) + self.options.cellPadding*self._domainType[self.options.subDomain].column(d);
		if (arguments.length === 2 && outer === true) {
			return width += self.domainHorizontalLabelWidth + self.options.domainGutter + self.options.domainMargin[1] + self.options.domainMargin[3];
		}
		return width;
	}

	// Return the height of the domain block, without the domain gutter
	function h(d, outer) {
		var height = self.options.cellSize*self._domainType[self.options.subDomain].row(d) + self.options.cellPadding*self._domainType[self.options.subDomain].row(d);
		if (arguments.length === 2 && outer === true) {
			height += self.options.domainGutter + self.domainVerticalLabelHeight + self.options.domainMargin[0] + self.options.domainMargin[2];
		}
		return height;
	}

	/**
	 *
	 *
	 * @param int navigationDir
	 */
	this.paint = function(navigationDir) {

		var options = self.options;

		if (arguments.length === 0) {
			navigationDir = false;
		}

		// Painting all the domains
		var domainSvg = self.root.select(".graph")
			.selectAll(".graph-domain")
			.data(
				function() {
					var data = self.getDomainKeys();
					return navigationDir === self.NAVIGATE_LEFT ? data.reverse(): data;
				},
				function(d) { return d; }
			)
		;

		var enteringDomainDim = 0;
		var exitingDomainDim = 0;

		// =========================================================================//
		// PAINTING DOMAIN															//
		// =========================================================================//

		var svg = domainSvg
			.enter()
			.append("svg")
			.attr("width", function(d) {
				return w(d, true);
			})
			.attr("height", function(d) {
				return h(d, true);
			})
			.attr("x", function(d) {
				if (options.verticalOrientation) {
					self.graphDim.width = Math.max(self.graphDim.width, w(d, true));
					return 0;
				} else {
					return getDomainPosition(d, self.graphDim, "width", w(d, true));
				}
			})
			.attr("y", function(d) {
				if (options.verticalOrientation) {
					return getDomainPosition(d, self.graphDim, "height", h(d, true));
				} else {
					self.graphDim.height = Math.max(self.graphDim.height, h(d, true));
					return 0;
				}
			})
			.attr("class", function(d) {
				var classname = "graph-domain";
				var date = new Date(d);
				switch(options.domain) {
				case "hour":
					classname += " h_" + date.getHours();
					/* falls through */
				case "day":
					classname += " d_" + date.getDate() + " dy_" + date.getDay();
					/* falls through */
				case "week":
					classname += " w_" + self.getWeekNumber(date);
					/* falls through */
				case "month":
					classname += " m_" + (date.getMonth() + 1);
					/* falls through */
				case "year":
					classname += " y_" + date.getFullYear();
				}
				return classname;
			})
		;

		self.lastInsertedSvg = svg;

		function getDomainPosition(domainIndex, graphDim, axis, domainDim) {
			var tmp = 0;
			switch(navigationDir) {
			case false:
				tmp = graphDim[axis];

				graphDim[axis] += domainDim;
				self.domainPosition.setPosition(domainIndex, tmp);
				return tmp;

			case self.NAVIGATE_RIGHT:
				self.domainPosition.setPosition(domainIndex, graphDim[axis]);

				enteringDomainDim = domainDim;
				exitingDomainDim = self.domainPosition.getPositionFromIndex(1);

				self.domainPosition.shiftRightBy(exitingDomainDim);
				return graphDim[axis];

			case self.NAVIGATE_LEFT:
				tmp = -domainDim;

				enteringDomainDim = -tmp;
				exitingDomainDim = graphDim[axis] - self.domainPosition.getLast();

				self.domainPosition.setPosition(domainIndex, tmp);
				self.domainPosition.shiftLeftBy(enteringDomainDim);
				return tmp;
			}
		}

		svg.append("rect")
			.attr("width", function(d) { return w(d, true) - options.domainGutter - options.cellPadding; })
			.attr("height", function(d) { return h(d, true) - options.domainGutter - options.cellPadding; })
			.attr("class", "domain-background")
		;

		// =========================================================================//
		// PAINTING SUBDOMAINS														//
		// =========================================================================//
		var subDomainSvgGroup = svg.append("svg")
			.attr("x", function() {
				if (options.label.position === "left") {
					return self.domainHorizontalLabelWidth + options.domainMargin[3];
				} else {
					return options.domainMargin[3];
				}
			})
			.attr("y", function() {
				if (options.label.position === "top") {
					return self.domainVerticalLabelHeight + options.domainMargin[0];
				} else {
					return options.domainMargin[0];
				}
			})
			.attr("class", "graph-subdomain-group")
		;

		var rect = subDomainSvgGroup
			.selectAll("g")
			.data(function(d) { return self._domains.get(d); })
			.enter()
			.append("g")
		;

		rect
			.append("rect")
			.attr("class", function(d) {
				return "graph-rect" + self.getHighlightClassName(d.t) + (options.onClick !== null ? " hover_cursor": "");
			})
			.attr("width", options.cellSize)
			.attr("height", options.cellSize)
			.attr("x", function(d) { return self.positionSubDomainX(d.t); })
			.attr("y", function(d) { return self.positionSubDomainY(d.t); })
			.on("click", function(d) {
				if (options.onClick !== null) {
					return self.onClick(new Date(d.t), d.v);
				}
			})
			.call(function(selection) {
				if (options.cellRadius > 0) {
					selection
						.attr("rx", options.cellRadius)
						.attr("ry", options.cellRadius)
					;
				}

				if (self.legendScale !== null && options.legendColors !== null && options.legendColors.hasOwnProperty("base")) {
					selection.attr("fill", options.legendColors.base);
				}

				if (options.tooltip) {
					selection.on("mouseover", function(d) {
						var domainNode = this.parentNode.parentNode;

						self.tooltip
						.html(self.getSubDomainTitle(d))
						.attr("style", "display: block;")
						;

						var tooltipPositionX = self.positionSubDomainX(d.t) - self.tooltip[0][0].offsetWidth/2 + options.cellSize/2;
						var tooltipPositionY = self.positionSubDomainY(d.t) - self.tooltip[0][0].offsetHeight - options.cellSize/2;

						// Offset by the domain position
						tooltipPositionX += parseInt(domainNode.getAttribute("x"), 10);
						tooltipPositionY += parseInt(domainNode.getAttribute("y"), 10);

						// Offset by the calendar position (when legend is left/top)
						tooltipPositionX += parseInt(self.root.select(".graph").attr("x"), 10);
						tooltipPositionY += parseInt(self.root.select(".graph").attr("y"), 10);

						// Offset by the inside domain position (when label is left/top)
						tooltipPositionX += parseInt(domainNode.parentNode.getAttribute("x"), 10);
						tooltipPositionY += parseInt(domainNode.parentNode.getAttribute("y"), 10);

						self.tooltip.attr("style",
						"display: block; " +
						"left: " + tooltipPositionX + "px; " +
						"top: " + tooltipPositionY + "px;")
						;
					});

					selection.on("mouseout", function() {
						self.tooltip
						.attr("style", "display:none")
						.html("");
					});
				}
			})
		;

		// Appending a title to each subdomain
		if (!options.tooltip) {
			rect.append("title").text(function(d){ return self.formatDate(new Date(d.t), options.subDomainDateFormat); });
		}

		// =========================================================================//
		// PAINTING LABEL															//
		// =========================================================================//
		if (options.domainLabelFormat !== "") {
			svg.append("text")
				.attr("class", "graph-label")
				.attr("y", function(d) {
					var y = options.domainMargin[0];
					switch(options.label.position) {
					case "top":
						y += self.domainVerticalLabelHeight/2;
						break;
					case "bottom":
						y += h(d) + self.domainVerticalLabelHeight/2;
					}

					return y + options.label.offset.y *
					(
						((options.label.rotate === "right" && options.label.position === "right") ||
						(options.label.rotate === "left" && options.label.position === "left")) ?
						-1: 1
					);
				})
				.attr("x", function(d){
					var x = options.domainMargin[3];
					switch(options.label.position) {
					case "right":
						x += w(d);
						break;
					case "bottom":
					case "top":
						x += w(d)/2;
					}

					if (options.label.align === "right") {
						return x + self.domainHorizontalLabelWidth - options.label.offset.x *
						(options.label.rotate === "right" ? -1: 1);
					}
					return x + options.label.offset.x;

				})
				.attr("text-anchor", function() {
					switch(options.label.align) {
					case "start":
					case "left":
						return "start";
					case "end":
					case "right":
						return "end";
					default:
						return "middle";
					}
				})
				.attr("dominant-baseline", function() { return self.verticalDomainLabel ? "middle": "top"; })
				.text(function(d) { return self.formatDate(new Date(d), options.domainLabelFormat); })
				.call(domainRotate)
			;
		}

		function domainRotate(selection) {
			switch (options.label.rotate) {
			case "right":
				selection
				.attr("transform", function(d) {
					var s = "rotate(90), ";
					switch(options.label.position) {
					case "right":
						s += "translate(-" + w(d) + " , -" + w(d) + ")";
						break;
					case "left":
						s += "translate(0, -" + self.domainHorizontalLabelWidth + ")";
						break;
					}

					return s;
				});
				break;
			case "left":
				selection
				.attr("transform", function(d) {
					var s = "rotate(270), ";
					switch(options.label.position) {
					case "right":
						s += "translate(-" + (w(d) + self.domainHorizontalLabelWidth) + " , " + w(d) + ")";
						break;
					case "left":
						s += "translate(-" + (self.domainHorizontalLabelWidth) + " , " + self.domainHorizontalLabelWidth + ")";
						break;
					}

					return s;
				});
				break;
			}
		}

		// =========================================================================//
		// PAINTING DOMAIN SUBDOMAIN CONTENT										//
		// =========================================================================//
		if (options.subDomainTextFormat !== null) {
			rect
				.append("text")
				.attr("class", function(d) { return "subdomain-text" + self.getHighlightClassName(d.t); })
				.attr("x", function(d) { return self.positionSubDomainX(d.t) + options.cellSize/2; })
				.attr("y", function(d) { return self.positionSubDomainY(d.t) + options.cellSize/2; })
				.attr("text-anchor", "middle")
				.attr("dominant-baseline", "central")
				.text(function(d){
					return self.formatDate(new Date(d.t), options.subDomainTextFormat);
				})
			;
		}

		// =========================================================================//
		// ANIMATION																//
		// =========================================================================//

		if (navigationDir !== false) {
			domainSvg.transition().duration(options.animationDuration)
				.attr("x", function(d){
					return options.verticalOrientation ? 0: self.domainPosition.getPosition(d);
				})
				.attr("y", function(d){
					return options.verticalOrientation? self.domainPosition.getPosition(d): 0;
				})
			;
		}

		var tempWidth = self.graphDim.width;
		var tempHeight = self.graphDim.height;

		if (options.verticalOrientation) {
			self.graphDim.height += enteringDomainDim - exitingDomainDim;
		} else {
			self.graphDim.width += enteringDomainDim - exitingDomainDim;
		}

		// At the time of exit, domainsWidth and domainsHeight already automatically shifted
		domainSvg.exit().transition().duration(options.animationDuration)
			.attr("x", function(d){
				if (options.verticalOrientation) {
					return 0;
				} else {
					switch(navigationDir) {
					case self.NAVIGATE_LEFT:
						return Math.min(self.graphDim.width, tempWidth);
					case self.NAVIGATE_RIGHT:
						return -w(d, true);
					}
				}
			})
			.attr("y", function(d){
				if (options.verticalOrientation) {
					switch(navigationDir) {
					case self.NAVIGATE_LEFT:
						return Math.min(self.graphDim.height, tempHeight);
					case self.NAVIGATE_RIGHT:
						return -h(d, true);
					}
				} else {
					return 0;
				}
			})
			.remove()
		;

		// Resize the root container
		self.resize();
	};
};

CalHeatMap.prototype = {

	/**
	 * Validate and merge user settings with default settings
	 *
	 * @param  {object} settings User settings
	 * @return {bool} False if settings contains error
	 */
	/* jshint maxstatements:false */
	init: function(settings) {
		"use strict";

		var parent = this;

		var options = parent.options = mergeRecursive(parent.options, settings);

		// Fatal errors
		// Stop script execution on error
		validateDomainType();
		validateSelector(options.itemSelector, false, "itemSelector");

		if (parent.allowedDataType.indexOf(options.dataType) === -1) {
			throw new Error("The data type '" + options.dataType + "' is not valid data type");
		}

		if (d3.select(options.itemSelector)[0][0] === null) {
			throw new Error("The node '" + options.itemSelector + "' specified in itemSelector does not exists");
		}

		try {
			validateSelector(options.nextSelector, true, "nextSelector");
			validateSelector(options.previousSelector, true, "previousSelector");
		} catch(error) {
			console.log(error.message);
			return false;
		}

		// If other settings contains error, will fallback to default

		if (!settings.hasOwnProperty("subDomain")) {
			this.options.subDomain = getOptimalSubDomain(settings.domain);
		}

		if (typeof options.itemNamespace !== "string" || options.itemNamespace === "") {
			console.log("itemNamespace can not be empty, falling back to cal-heatmap");
			options.itemNamespace = "cal-heatmap";
		}

		// Don't touch these settings
		var s = ["data", "onComplete", "onClick", "afterLoad", "afterLoadData", "afterLoadPreviousDomain", "afterLoadNextDomain"];

		for (var k in s) {
			if (settings.hasOwnProperty(s[k])) {
				options[s[k]] = settings[s[k]];
			}
		}

		options.subDomainDateFormat = (typeof options.subDomainDateFormat === "string" || typeof options.subDomainDateFormat === "function" ? options.subDomainDateFormat : this._domainType[options.subDomain].format.date);
		options.domainLabelFormat = (typeof options.domainLabelFormat === "string" || typeof options.domainLabelFormat === "function" ? options.domainLabelFormat : this._domainType[options.domain].format.legend);
		options.subDomainTextFormat = ((typeof options.subDomainTextFormat === "string" && options.subDomainTextFormat !== "") || typeof options.subDomainTextFormat === "function" ? options.subDomainTextFormat : null);
		options.domainMargin = expandMarginSetting(options.domainMargin);
		options.legendMargin = expandMarginSetting(options.legendMargin);
		options.highlight = parent.expandDateSetting(options.highlight);
		options.itemName = expandItemName(options.itemName);
		options.colLimit = parseColLimit(options.colLimit);
		options.rowLimit = parseRowLimit(options.rowLimit);
		if (!settings.hasOwnProperty("legendMargin")) {
			autoAddLegendMargin();
		}
		autoAlignLabel();

		/**
		 * Validate that a queryString is valid
		 *
		 * @param  {Element|string|bool} selector   The queryString to test
		 * @param  {bool}	canBeFalse	Whether false is an accepted and valid value
		 * @param  {string} name		Name of the tested selector
		 * @throws {Error}				If the selector is not valid
		 * @return {bool}				True if the selector is a valid queryString
		 */
		function validateSelector(selector, canBeFalse, name) {
			if (((canBeFalse && selector === false) || selector instanceof Element || typeof selector === "string") && selector !== "") {
				return true;
			}
			throw new Error("The " + name + " is not valid");
		}

		/**
		 * Return the optimal subDomain for the specified domain
		 *
		 * @param  {string} domain a domain name
		 * @return {string}        the subDomain name
		 */
		function getOptimalSubDomain(domain) {
			switch(domain) {
			case "year":
				return "month";
			case "month":
				return "day";
			case "week":
				return "day";
			case "day":
				return "hour";
			default:
				return "min";
			}
		}

		/**
		 * Ensure that the domain and subdomain are valid
		 *
		 * @throw {Error} when domain or subdomain are not valid
		 * @return {bool} True if domain and subdomain are valid and compatible
		 */
		function validateDomainType() {
			if (!parent._domainType.hasOwnProperty(options.domain) || options.domain === "min" || options.domain.substring(0, 2) === "x_") {
				throw new Error("The domain '" + options.domain + "' is not valid");
			}

			if (!parent._domainType.hasOwnProperty(options.subDomain) || options.subDomain === "year") {
				throw new Error("The subDomain '" + options.subDomain + "' is not valid");
			}

			if (parent._domainType[options.domain].level <= parent._domainType[options.subDomain].level) {
				throw new Error("'" + options.subDomain + "' is not a valid subDomain to '" + options.domain +  "'");
			}

			return true;
		}

		/**
		 * Fine-tune the label alignement depending on its position
		 *
		 * @return void
		 */
		function autoAlignLabel() {
			// Auto-align label, depending on it's position
			if (!settings.hasOwnProperty("label") || (settings.hasOwnProperty("label") && !settings.label.hasOwnProperty("align"))) {
				switch(options.label.position) {
				case "left":
					options.label.align = "right";
					break;
				case "right":
					options.label.align = "left";
					break;
				default:
					options.label.align = "center";
				}

				if (options.label.rotate === "left") {
					options.label.align = "right";
				} else if (options.label.rotate === "right") {
					options.label.align = "left";
				}
			}

			if (!settings.hasOwnProperty("label") || (settings.hasOwnProperty("label") && !settings.label.hasOwnProperty("offset"))) {
				if (options.label.position === "left" || options.label.position === "right") {
					options.label.offset = {
						x: 10,
						y: 15
					};
				}
			}
		}

		/**
		 * If not specified, add some margin around the legend depending on its position
		 *
		 * @return void
		 */
		function autoAddLegendMargin() {
			switch(options.legendVerticalPosition) {
			case "top":
				options.legendMargin[2] = parent.DEFAULT_LEGEND_MARGIN;
				break;
			case "bottom":
				options.legendMargin[0] = parent.DEFAULT_LEGEND_MARGIN;
				break;
			case "middle":
			case "center":
				options.legendMargin[options.legendHorizontalPosition === "right" ? 3 : 1] = parent.DEFAULT_LEGEND_MARGIN;
			}
		}

		/**
		 * Expand a number of an array of numbers to an usable 4 values array
		 *
		 * @param  {integer|array} value
		 * @return {array}        array
		 */
		function expandMarginSetting(value) {
			if (typeof value === "number") {
				value = [value];
			}

			if (!Array.isArray(value)) {
				console.log("Margin only takes an integer or an array of integers");
				value = [0];
			}

			switch(value.length) {
			case 1:
				return [value[0], value[0], value[0], value[0]];
			case 2:
				return [value[0], value[1], value[0], value[1]];
			case 3:
				return [value[0], value[1], value[2], value[1]];
			case 4:
				return value;
			default:
				return value.slice(0, 4);
			}
		}

		/**
		 * Convert a string to an array like [singular-form, plural-form]
		 *
		 * @param  {string|array} value Date to convert
		 * @return {array}       An array like [singular-form, plural-form]
		 */
		function expandItemName(value) {
			if (typeof value === "string") {
				return [value, value + (value !== "" ? "s" : "")];
			}

			if (Array.isArray(value)) {
				if (value.length === 1) {
					return [value[0], value[0] + "s"];
				} else if (value.length > 2) {
					return value.slice(0, 2);
				}

				return value;
			}

			return ["item", "items"];
		}

		function parseColLimit(value) {
			return value > 0 ? value : null;
		}

		function parseRowLimit(value) {
			if (value > 0 && options.colLimit > 0) {
				console.log("colLimit and rowLimit are mutually exclusive, rowLimit will be ignored");
				return null;
			}
			return value > 0 ? value : null;
		}

		return this._init();

	},

	/**
	 * Convert a keyword or an array of keyword/date to an array of date objects
	 *
	 * @param  {string|array|Date} value Data to convert
	 * @return {array}       An array of Dates
	 */
	expandDateSetting: function(value) {
		"use strict";

		if (!Array.isArray(value)) {
			value = [value];
		}

		return value.map(function(data) {
			if (data === "now") {
				return new Date();
			}
			if (data instanceof Date) {
				return data;
			}
			return false;
		}).filter(function(d) { return d !== false; });
	},

	/**
	 * Fill the calendar by coloring the cells
	 *
	 * @param array svg An array of html node to apply the transformation to (optional)
	 *                  It's used to limit the painting to only a subset of the calendar
	 * @return void
	 */
	fill: function(svg) {
		"use strict";

		var parent = this;
		var options = parent.options;

		if (arguments.length === 0) {
			svg = parent.root.selectAll(".graph-domain");
		}

		var rect = svg
			.selectAll("svg").selectAll("g")
			.data(function(d) { return parent._domains.get(d); })
		;

		/**
		 * Colorize the cell via a style attribute if enabled
		 */
		function addStyle(element) {
			if (parent.legendScale === null) {
				return false;
			}

			element.attr("fill", function(d) {
				if (d.v === null && (options.hasOwnProperty("considerMissingDataAsZero") && !options.considerMissingDataAsZero)) {
					if (options.legendColors.hasOwnProperty("base")) {
						return options.legendColors.base;
					}
				}

				if (options.legendColors !== null && options.legendColors.hasOwnProperty("empty") &&
					(d.v === 0 || (d.v === null && options.hasOwnProperty("considerMissingDataAsZero") && options.considerMissingDataAsZero))
				) {
					return options.legendColors.empty;
				}

				if (d.v < 0 && options.legend[0] > 0 && options.legendColors !== null && options.legendColors.hasOwnProperty("overflow")) {
					return options.legendColors.overflow;
				}

				return parent.legendScale(Math.min(d.v, options.legend[options.legend.length-1]));
			});
		}

		rect.transition().duration(options.animationDuration).select("rect")
			.attr("class", function(d) {

				var htmlClass = parent.getHighlightClassName(d.t).trim().split(" ");
				var pastDate = parent.dateIsLessThan(d.t, new Date());
        var sameDate = parent.dateIsEqual(d.t, new Date());

				if (parent.legendScale === null ||
					(d.v === null && (options.hasOwnProperty("considerMissingDataAsZero") && !options.considerMissingDataAsZero) &&!options.legendColors.hasOwnProperty("base"))
				) {
					htmlClass.push("graph-rect");
				}

        if (sameDate) {
          htmlClass.push("now");
        } else if (!pastDate) {
          htmlClass.push("future");
        }

				if (d.v !== null) {
					htmlClass.push(parent.Legend.getClass(d.v, (parent.legendScale === null)));
				} else if (options.considerMissingDataAsZero && pastDate) {
					htmlClass.push(parent.Legend.getClass(0, (parent.legendScale === null)));
				}

				if (options.onClick !== null) {
					htmlClass.push("hover_cursor");
				}

				return htmlClass.join(" ");
			})
			.call(addStyle)
		;

		rect.transition().duration(options.animationDuration).select("title")
			.text(function(d) { return parent.getSubDomainTitle(d); })
		;

		function formatSubDomainText(element) {
			if (typeof options.subDomainTextFormat === "function") {
				element.text(function(d) { return options.subDomainTextFormat(d.t, d.v); });
			}
		}

		/**
		 * Change the subDomainText class if necessary
		 * Also change the text, e.g when text is representing the value
		 * instead of the date
		 */
		rect.transition().duration(options.animationDuration).select("text")
			.attr("class", function(d) { return "subdomain-text" + parent.getHighlightClassName(d.t); })
			.call(formatSubDomainText)
		;
	},

	// =========================================================================//
	// EVENTS CALLBACK															//
	// =========================================================================//

	/**
	 * Helper method for triggering event callback
	 *
	 * @param  string	eventName       Name of the event to trigger
	 * @param  array	successArgs     List of argument to pass to the callback
	 * @param  boolean  skip			Whether to skip the event triggering
	 * @return mixed	True when the triggering was skipped, false on error, else the callback function
	 */
	triggerEvent: function(eventName, successArgs, skip) {
		"use strict";

		if ((arguments.length === 3 && skip) || this.options[eventName] === null) {
			return true;
		}

		if (typeof this.options[eventName] === "function") {
			if (typeof successArgs === "function") {
				successArgs = successArgs();
			}
			return this.options[eventName].apply(this, successArgs);
		} else {
			console.log("Provided callback for " + eventName + " is not a function.");
			return false;
		}
	},

	/**
	 * Event triggered on a mouse click on a subDomain cell
	 *
	 * @param  Date		d		Date of the subdomain block
	 * @param  int		itemNb	Number of items in that date
	 */
	onClick: function(d, itemNb) {
		"use strict";

		return this.triggerEvent("onClick", [d, itemNb]);
	},

	/**
	 * Event triggered after drawing the calendar, byt before filling it with data
	 */
	afterLoad: function() {
		"use strict";

		return this.triggerEvent("afterLoad");
	},

	/**
	 * Event triggered after completing drawing and filling the calendar
	 */
	onComplete: function() {
		"use strict";

		var response = this.triggerEvent("onComplete", [], this._completed);
		this._completed = true;
		return response;
	},

	/**
	 * Event triggered after shifting the calendar one domain back
	 *
	 * @param  Date		start	Domain start date
	 * @param  Date		end		Domain end date
	 */
	afterLoadPreviousDomain: function(start) {
		"use strict";

		var parent = this;
		return this.triggerEvent("afterLoadPreviousDomain", function() {
			var subDomain = parent.getSubDomain(start);
			return [subDomain.shift(), subDomain.pop()];
		});
	},

	/**
	 * Event triggered after shifting the calendar one domain above
	 *
	 * @param  Date		start	Domain start date
	 * @param  Date		end		Domain end date
	 */
	afterLoadNextDomain: function(start) {
		"use strict";

		var parent = this;
		return this.triggerEvent("afterLoadNextDomain", function() {
			var subDomain = parent.getSubDomain(start);
			return [subDomain.shift(), subDomain.pop()];
		});
	},

	/**
	 * Event triggered after loading the leftmost domain allowed by minDate
	 *
	 * @param  boolean  reached True if the leftmost domain was reached
	 */
	onMinDomainReached: function(reached) {
		"use strict";

		this._minDomainReached = reached;
		return this.triggerEvent("onMinDomainReached", [reached]);
	},

	/**
	 * Event triggered after loading the rightmost domain allowed by maxDate
	 *
	 * @param  boolean  reached True if the rightmost domain was reached
	 */
	onMaxDomainReached: function(reached) {
		"use strict";

		this._maxDomainReached = reached;
		return this.triggerEvent("onMaxDomainReached", [reached]);
	},

	checkIfMinDomainIsReached: function(date, upperBound) {
		"use strict";

		if (this.minDomainIsReached(date)) {
			this.onMinDomainReached(true);
		}

		if (arguments.length === 2) {
			if (this._maxDomainReached && !this.maxDomainIsReached(upperBound)) {
				this.onMaxDomainReached(false);
			}
		}
	},

	checkIfMaxDomainIsReached: function(date, lowerBound) {
		"use strict";

		if (this.maxDomainIsReached(date)) {
			this.onMaxDomainReached(true);
		}

		if (arguments.length === 2) {
			if (this._minDomainReached && !this.minDomainIsReached(lowerBound)) {
				this.onMinDomainReached(false);
			}
		}
	},

	// =========================================================================//
	// FORMATTER																//
	// =========================================================================//

	formatNumber: d3.format(",g"),

	formatDate: function(d, format) {
		"use strict";

		if (arguments.length < 2) {
			format = "title";
		}

		if (typeof format === "function") {
			return format(d);
		} else {
			var f = d3.time.format(format);
			return f(d);
		}
	},

	getSubDomainTitle: function(d) {
		"use strict";

		if (d.v === null && !this.options.considerMissingDataAsZero) {
			return (this.options.subDomainTitleFormat.empty).format({
				date: this.formatDate(new Date(d.t), this.options.subDomainDateFormat)
			});
		} else {
			var value = d.v;
			// Consider null as 0
			if (value === null && this.options.considerMissingDataAsZero) {
				value = 0;
			}

			return (this.options.subDomainTitleFormat.filled).format({
				count: this.formatNumber(value),
				name: this.options.itemName[(value !== 1 ? 1: 0)],
				connector: this._domainType[this.options.subDomain].format.connector,
				date: this.formatDate(new Date(d.t), this.options.subDomainDateFormat)
			});
		}
	},

	// =========================================================================//
	// DOMAIN NAVIGATION														//
	// =========================================================================//

	/**
	 * Shift the calendar one domain forward
	 *
	 * The new domain is loaded only if it's not beyond maxDate
	 *
	 * @param int n Number of domains to load
	 * @return bool True if the next domain was loaded, else false
	 */
	loadNextDomain: function(n) {
		"use strict";

		if (this._maxDomainReached || n === 0) {
			return false;
		}

		var bound = this.loadNewDomains(this.NAVIGATE_RIGHT, this.getDomain(this.getNextDomain(), n));

		this.afterLoadNextDomain(bound.end);
		this.checkIfMaxDomainIsReached(this.getNextDomain().getTime(), bound.start);

		return true;
	},

	/**
	 * Shift the calendar one domain backward
	 *
	 * The previous domain is loaded only if it's not beyond the minDate
	 *
	 * @param int n Number of domains to load
	 * @return bool True if the previous domain was loaded, else false
	 */
	loadPreviousDomain: function(n) {
		"use strict";

		if (this._minDomainReached || n === 0) {
			return false;
		}

		var bound = this.loadNewDomains(this.NAVIGATE_LEFT, this.getDomain(this.getDomainKeys()[0], -n).reverse());

		this.afterLoadPreviousDomain(bound.start);
		this.checkIfMinDomainIsReached(bound.start, bound.end);

		return true;
	},

	loadNewDomains: function(direction, newDomains) {
		"use strict";

		var parent = this;
		var backward = direction === this.NAVIGATE_LEFT;
		var i = -1;
		var total = newDomains.length;
		var domains = this.getDomainKeys();

		function buildSubDomain(d) {
			return {t: parent._domainType[parent.options.subDomain].extractUnit(d), v: null};
		}

		// Remove out of bound domains from list of new domains to prepend
		while (++i < total) {
			if (backward && this.minDomainIsReached(newDomains[i])) {
				newDomains = newDomains.slice(0, i+1);
				break;
			}
			if (!backward && this.maxDomainIsReached(newDomains[i])) {
				newDomains = newDomains.slice(0, i);
				break;
			}
		}

		newDomains = newDomains.slice(-this.options.range);

		for (i = 0, total = newDomains.length; i < total; i++) {
			this._domains.set(
				newDomains[i].getTime(),
				this.getSubDomain(newDomains[i]).map(buildSubDomain)
			);

			this._domains.remove(backward ? domains.pop() : domains.shift());
		}

		domains = this.getDomainKeys();

		if (backward) {
			newDomains = newDomains.reverse();
		}

		this.paint(direction);

		this.getDatas(
			this.options.data,
			newDomains[0],
			this.getSubDomain(newDomains[newDomains.length-1]).pop(),
			function() {
				parent.fill(parent.lastInsertedSvg);
			}
		);

		return {
			start: newDomains[backward ? 0 : 1],
			end: domains[domains.length-1]
		};
	},

	/**
	 * Return whether a date is inside the scope determined by maxDate
	 *
	 * @param int datetimestamp The timestamp in ms to test
	 * @return bool True if the specified date correspond to the calendar upper bound
	 */
	maxDomainIsReached: function(datetimestamp) {
		"use strict";

		return (this.options.maxDate !== null && (this.options.maxDate.getTime() < datetimestamp));
	},

	/**
	 * Return whether a date is inside the scope determined by minDate
	 *
	 * @param int datetimestamp The timestamp in ms to test
	 * @return bool True if the specified date correspond to the calendar lower bound
	 */
	minDomainIsReached: function (datetimestamp) {
		"use strict";

		return (this.options.minDate !== null && (this.options.minDate.getTime() >= datetimestamp));
	},

	/**
	 * Return the list of the calendar's domain timestamp
	 *
	 * @return Array a sorted array of timestamp
	 */
	getDomainKeys: function() {
		"use strict";

		return this._domains.keys()
			.map(function(d) { return parseInt(d, 10); })
			.sort(function(a,b) { return a-b; });
	},

	// =========================================================================//
	// POSITIONNING																//
	// =========================================================================//

	positionSubDomainX: function(d) {
		"use strict";

		var index = this._domainType[this.options.subDomain].position.x(new Date(d));
		return index * this.options.cellSize + index * this.options.cellPadding;
	},

	positionSubDomainY: function(d) {
		"use strict";

		var index = this._domainType[this.options.subDomain].position.y(new Date(d));
		return index * this.options.cellSize + index * this.options.cellPadding;
	},

	getSubDomainColumnNumber: function(d) {
		"use strict";

		if (this.options.rowLimit > 0) {
			var i = this._domainType[this.options.subDomain].maxItemNumber;
			if (typeof i === "function") {
				i = i(d);
			}
			return Math.ceil(i / this.options.rowLimit);
		}

		var j = this._domainType[this.options.subDomain].defaultColumnNumber;
		if (typeof j === "function") {
			j = j(d);

		}
		return this.options.colLimit || j;
	},

	getSubDomainRowNumber: function(d) {
		"use strict";

		if (this.options.colLimit > 0) {
			var i = this._domainType[this.options.subDomain].maxItemNumber;
			if (typeof i === "function") {
				i = i(d);
			}
			return Math.ceil(i / this.options.colLimit);
		}

		var j = this._domainType[this.options.subDomain].defaultRowNumber;
		if (typeof j === "function") {
			j = j(d);

		}
		return this.options.rowLimit || j;
	},

	/**
	 * Return a classname if the specified date should be highlighted
	 *
	 * @param  timestamp date Date of the current subDomain
	 * @return String the highlight class
	 */
	getHighlightClassName: function(d) {
		"use strict";

		d = new Date(d);

		if (this.options.highlight.length > 0) {
			for (var i in this.options.highlight) {
				if (this.dateIsEqual(this.options.highlight[i], d)) {
					return this.isNow(this.options.highlight[i]) ? " highlight-now": " highlight";
				}
			}
		}
		return "";
	},

	/**
	 * Return whether the specified date is now,
	 * according to the type of subdomain
	 *
	 * @param  Date d The date to compare
	 * @return bool True if the date correspond to a subdomain cell
	 */
	isNow: function(d) {
		"use strict";

		return this.dateIsEqual(d, new Date());
	},

	/**
	 * Return whether 2 dates are equals
	 * This function is subdomain-aware,
	 * and dates comparison are dependent of the subdomain
	 *
	 * @param  Date dateA First date to compare
	 * @param  Date dateB Secon date to compare
	 * @return bool true if the 2 dates are equals
	 */
	/* jshint maxcomplexity: false */
	dateIsEqual: function(dateA, dateB) {
		"use strict";

		if(!(dateA instanceof Date)) {
			dateA = new Date(dateA);
		}

		if (!(dateB instanceof Date)) {
			dateB = new Date(dateB);
		}

		switch(this.options.subDomain) {
		case "x_min":
		case "min":
			return dateA.getFullYear() === dateB.getFullYear() &&
				dateA.getMonth() === dateB.getMonth() &&
				dateA.getDate() === dateB.getDate() &&
				dateA.getHours() === dateB.getHours() &&
				dateA.getMinutes() === dateB.getMinutes();
		case "x_hour":
		case "hour":
			return dateA.getFullYear() === dateB.getFullYear() &&
				dateA.getMonth() === dateB.getMonth() &&
				dateA.getDate() === dateB.getDate() &&
				dateA.getHours() === dateB.getHours();
		case "x_day":
		case "day":
			return dateA.getFullYear() === dateB.getFullYear() &&
				dateA.getMonth() === dateB.getMonth() &&
				dateA.getDate() === dateB.getDate();
		case "x_week":
		case "week":
			return dateA.getFullYear() === dateB.getFullYear() &&
				this.getWeekNumber(dateA) === this.getWeekNumber(dateB);
		case "x_month":
		case "month":
			return dateA.getFullYear() === dateB.getFullYear() &&
				dateA.getMonth() === dateB.getMonth();
		default:
			return false;
		}
	},


	/**
	 * Returns wether or not dateA is less than or equal to dateB. This function is subdomain aware.
	 * Performs automatic conversion of values.
	 * @param dateA may be a number or a Date
	 * @param dateB may be a number or a Date
	 * @returns {boolean}
	 */
	dateIsLessThan: function(dateA, dateB) {
		"use strict";

		if(!(dateA instanceof Date)) {
			dateA = new Date(dateA);
		}

		if (!(dateB instanceof Date)) {
			dateB = new Date(dateB);
		}


		function normalizedMillis(date, subdomain) {
			switch(subdomain) {
			case "x_min":
			case "min":
				return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()).getTime();
			case "x_hour":
			case "hour":
				return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours()).getTime();
			case "x_day":
			case "day":
				return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
			case "x_week":
			case "week":
			case "x_month":
			case "month":
				return new Date(date.getFullYear(), date.getMonth()).getTime();
			default:
				return date.getTime();
			}
		}

		return normalizedMillis(dateA, this.options.subDomain) < normalizedMillis(dateB, this.options.subDomain);
	},


	// =========================================================================//
	// DATE COMPUTATION															//
	// =========================================================================//

	/**
	 * Return the day of the year for the date
	 * @param	Date
	 * @return  int Day of the year [1,366]
	 */
	getDayOfYear: d3.time.format("%j"),

	/**
	 * Return the week number of the year
	 * Monday as the first day of the week
	 * @return int	Week number [0-53]
	 */
	getWeekNumber: function(d) {
		"use strict";

		var f = this.options.weekStartOnMonday === true ? d3.time.format("%W"): d3.time.format("%U");
		return f(d);
	},

	/**
	 * Return the week number, relative to its month
	 *
	 * @param  int|Date d Date or timestamp in milliseconds
	 * @return int Week number, relative to the month [0-5]
	 */
	getMonthWeekNumber: function (d) {
		"use strict";

		if (typeof d === "number") {
			d = new Date(d);
		}

		var monthFirstWeekNumber = this.getWeekNumber(new Date(d.getFullYear(), d.getMonth()));
		return this.getWeekNumber(d) - monthFirstWeekNumber - 1;
	},

	/**
	 * Return the number of weeks in the dates' year
	 *
	 * @param  int|Date d Date or timestamp in milliseconds
	 * @return int Number of weeks in the date's year
	 */
	getWeekNumberInYear: function(d) {
		"use strict";

		if (typeof d === "number") {
			d = new Date(d);
		}
	},

	/**
	 * Return the number of days in the date's month
	 *
	 * @param  int|Date d Date or timestamp in milliseconds
	 * @return int Number of days in the date's month
	 */
	getDayCountInMonth: function(d) {
		"use strict";

		return this.getEndOfMonth(d).getDate();
	},

	/**
	 * Return the number of days in the date's year
	 *
	 * @param  int|Date d Date or timestamp in milliseconds
	 * @return int Number of days in the date's year
	 */
	getDayCountInYear: function(d) {
		"use strict";

		if (typeof d === "number") {
			d = new Date(d);
		}
		return (new Date(d.getFullYear(), 1, 29).getMonth() === 1) ? 366 : 365;
	},

	/**
	 * Get the weekday from a date
	 *
	 * Return the week day number (0-6) of a date,
	 * depending on whether the week start on monday or sunday
	 *
	 * @param  Date d
	 * @return int The week day number (0-6)
	 */
	getWeekDay: function(d) {
		"use strict";

		if (this.options.weekStartOnMonday === false) {
			return d.getDay();
		}
		return d.getDay() === 0 ? 6 : (d.getDay()-1);
	},

	/**
	 * Get the last day of the month
	 * @param  Date|int	d	Date or timestamp in milliseconds
	 * @return Date			Last day of the month
	 */
	getEndOfMonth: function(d) {
		"use strict";

		if (typeof d === "number") {
			d = new Date(d);
		}
		return new Date(d.getFullYear(), d.getMonth()+1, 0);
	},

	/**
	 *
	 * @param  Date date
	 * @param  int count
	 * @param  string step
	 * @return Date
	 */
	jumpDate: function(date, count, step) {
		"use strict";

		var d = new Date(date);
		switch(step) {
		case "hour":
			d.setHours(d.getHours() + count);
			break;
		case "day":
			d.setHours(d.getHours() + count * 24);
			break;
		case "week":
			d.setHours(d.getHours() + count * 24 * 7);
			break;
		case "month":
			d.setMonth(d.getMonth() + count);
			break;
		case "year":
			d.setFullYear(d.getFullYear() + count);
		}

		return new Date(d);
	},

	// =========================================================================//
	// DOMAIN COMPUTATION														//
	// =========================================================================//

	/**
	 * Return all the minutes between 2 dates
	 *
	 * @param  Date	d	date	A date
	 * @param  int|date	range	Number of minutes in the range, or a stop date
	 * @return array	An array of minutes
	 */
	getMinuteDomain: function (d, range) {
		"use strict";

		var start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours());
		var stop = null;
		if (range instanceof Date) {
			stop = new Date(range.getFullYear(), range.getMonth(), range.getDate(), range.getHours());
		} else {
			stop = new Date(+start + range * 1000 * 60);
		}
		return d3.time.minutes(Math.min(start, stop), Math.max(start, stop));
	},

	/**
	 * Return all the hours between 2 dates
	 *
	 * @param  Date	d	A date
	 * @param  int|date	range	Number of hours in the range, or a stop date
	 * @return array	An array of hours
	 */
	getHourDomain: function (d, range) {
		"use strict";

		var start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours());
		var stop = null;
		if (range instanceof Date) {
			stop = new Date(range.getFullYear(), range.getMonth(), range.getDate(), range.getHours());
		} else {
			stop = new Date(start);
			stop.setHours(stop.getHours() + range);
		}

		var domains = d3.time.hours(Math.min(start, stop), Math.max(start, stop));

		// Passing from DST to standard time
		// If there are 25 hours, let's compress the duplicate hours
		var i = 0;
		var total = domains.length;
		for(i = 0; i < total; i++) {
			if (i > 0 && (domains[i].getHours() === domains[i-1].getHours())) {
				this.DSTDomain.push(domains[i].getTime());
				domains.splice(i, 1);
				break;
			}
		}

		// d3.time.hours is returning more hours than needed when changing
		// from DST to standard time, because there is really 2 hours between
		// 1am and 2am!
		if (typeof range === "number" && domains.length > Math.abs(range)) {
			domains.splice(domains.length-1, 1);
		}

		return domains;
	},

	/**
	 * Return all the days between 2 dates
	 *
	 * @param  Date		d		A date
	 * @param  int|date	range	Number of days in the range, or a stop date
	 * @return array	An array of weeks
	 */
	getDayDomain: function (d, range) {
		"use strict";

		var start = new Date(d.getFullYear(), d.getMonth(), d.getDate());
		var stop = null;
		if (range instanceof Date) {
			stop = new Date(range.getFullYear(), range.getMonth(), range.getDate());
		} else {
			stop = new Date(start);
			stop = new Date(stop.setDate(stop.getDate() + parseInt(range, 10)));
		}

		return d3.time.days(Math.min(start, stop), Math.max(start, stop));
	},

	/**
	 * Return all the weeks between 2 dates
	 *
	 * @param  Date	d	A date
	 * @param  int|date	range	Number of minutes in the range, or a stop date
	 * @return array	An array of weeks
	 */
	getWeekDomain: function (d, range) {
		"use strict";

		var weekStart;

		if (this.options.weekStartOnMonday === false) {
			weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate() - d.getDay());
		} else {
			if (d.getDay() === 1) {
				weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
			} else if (d.getDay() === 0) {
				weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
				weekStart.setDate(weekStart.getDate() - 6);
			} else {
				weekStart = new Date(d.getFullYear(), d.getMonth(), d.getDate()-d.getDay()+1);
			}
		}

		var endDate = new Date(weekStart);

		var stop = range;
		if (typeof range !== "object") {
			stop = new Date(endDate.setDate(endDate.getDate() + range * 7));
		}

		return (this.options.weekStartOnMonday === true) ?
			d3.time.mondays(Math.min(weekStart, stop), Math.max(weekStart, stop)):
			d3.time.sundays(Math.min(weekStart, stop), Math.max(weekStart, stop))
		;
	},

	/**
	 * Return all the months between 2 dates
	 *
	 * @param  Date		d		A date
	 * @param  int|date	range	Number of months in the range, or a stop date
	 * @return array	An array of months
	 */
	getMonthDomain: function (d, range) {
		"use strict";

		var start = new Date(d.getFullYear(), d.getMonth());
		var stop = null;
		if (range instanceof Date) {
			stop = new Date(range.getFullYear(), range.getMonth());
		} else {
			stop = new Date(start);
			stop = stop.setMonth(stop.getMonth()+range);
		}

		return d3.time.months(Math.min(start, stop), Math.max(start, stop));
	},

	/**
	 * Return all the years between 2 dates
	 *
	 * @param  Date	d	date	A date
	 * @param  int|date	range	Number of minutes in the range, or a stop date
	 * @return array	An array of hours
	 */
	getYearDomain: function(d, range){
		"use strict";

		var start = new Date(d.getFullYear(), 0);
		var stop = null;
		if (range instanceof Date) {
			stop = new Date(range.getFullYear(), 0);
		} else {
			stop = new Date(d.getFullYear()+range, 0);
		}

		return d3.time.years(Math.min(start, stop), Math.max(start, stop));
	},

	/**
	 * Get an array of domain start dates
	 *
	 * @param  int|Date date A random date included in the wanted domain
	 * @param  int|Date range Number of dates to get, or a stop date
	 * @return Array of dates
	 */
	getDomain: function(date, range) {
		"use strict";

		if (typeof date === "number") {
			date = new Date(date);
		}

		if (arguments.length < 2) {
			range = this.options.range;
		}

		switch(this.options.domain) {
		case "hour" :
			var domains = this.getHourDomain(date, range);

			// Case where an hour is missing, when passing from standard time to DST
			// Missing hour is perfectly acceptabl in subDomain, but not in domains
			if (typeof range === "number" && domains.length < range) {
				if (range > 0) {
					domains.push(this.getHourDomain(domains[domains.length-1], 2)[1]);
				} else {
					domains.shift(this.getHourDomain(domains[0], -2)[0]);
				}
			}
			return domains;
		case "day"  :
			return this.getDayDomain(date, range);
		case "week" :
			return this.getWeekDomain(date, range);
		case "month":
			return this.getMonthDomain(date, range);
		case "year" :
			return this.getYearDomain(date, range);
		}
	},

	/* jshint maxcomplexity: false */
	getSubDomain: function(date) {
		"use strict";

		if (typeof date === "number") {
			date = new Date(date);
		}

		var parent = this;

		/**
		 * @return int
		 */
		var computeDaySubDomainSize = function(date, domain) {
			switch(domain) {
			case "year":
				return parent.getDayCountInYear(date);
			case "month":
				return parent.getDayCountInMonth(date);
			case "week":
				return 7;
			}
		};

		/**
		 * @return int
		 */
		var computeMinSubDomainSize = function(date, domain) {
			switch (domain) {
			case "hour":
				return 60;
			case "day":
				return 60 * 24;
			case "week":
				return 60 * 24 * 7;
			}
		};

		/**
		 * @return int
		 */
		var computeHourSubDomainSize = function(date, domain) {
			switch(domain) {
			case "day":
				return 24;
			case "week":
				return 168;
			case "month":
				return parent.getDayCountInMonth(date) * 24;
			}
		};

		/**
		 * @return int
		 */
		var computeWeekSubDomainSize = function(date, domain) {
			if (domain === "month") {
				var endOfMonth = new Date(date.getFullYear(), date.getMonth()+1, 0);
				var endWeekNb = parent.getWeekNumber(endOfMonth);
				var startWeekNb = parent.getWeekNumber(new Date(date.getFullYear(), date.getMonth()));

				if (startWeekNb > endWeekNb) {
					startWeekNb = 0;
					endWeekNb++;
				}

				return endWeekNb - startWeekNb + 1;
			} else if (domain === "year") {
				return parent.getWeekNumber(new Date(date.getFullYear(), 11, 31));
			}
		};

		switch(this.options.subDomain) {
		case "x_min":
		case "min"  :
			return this.getMinuteDomain(date, computeMinSubDomainSize(date, this.options.domain));
		case "x_hour":
		case "hour" :
			return this.getHourDomain(date, computeHourSubDomainSize(date, this.options.domain));
		case "x_day":
		case "day"  :
			return this.getDayDomain(date, computeDaySubDomainSize(date, this.options.domain));
		case "x_week":
		case "week" :
			return this.getWeekDomain(date, computeWeekSubDomainSize(date, this.options.domain));
		case "x_month":
		case "month":
			return this.getMonthDomain(date, 12);
		}
	},

	/**
	 * Get the n-th next domain after the calendar newest (rightmost) domain
	 * @param  int n
	 * @return Date The start date of the wanted domain
	 */
	getNextDomain: function(n) {
		"use strict";

		if (arguments.length === 0) {
			n = 1;
		}
		return this.getDomain(this.jumpDate(this.getDomainKeys().pop(), n, this.options.domain), 1)[0];
	},

	/**
	 * Get the n-th domain before the calendar oldest (leftmost) domain
	 * @param  int n
	 * @return Date The start date of the wanted domain
	 */
	getPreviousDomain: function(n) {
		"use strict";

		if (arguments.length === 0) {
			n = 1;
		}
		return this.getDomain(this.jumpDate(this.getDomainKeys().shift(), -n, this.options.domain), 1)[0];
	},


	// =========================================================================//
	// DATAS																	//
	// =========================================================================//

	/**
	 * Fetch and interpret data from the datasource
	 *
	 * @param string|object source
	 * @param Date startDate
	 * @param Date endDate
	 * @param function callback
	 * @param function|boolean afterLoad function used to convert the data into a json object. Use true to use the afterLoad callback
	 * @param updateMode
	 *
	 * @return mixed
	 * - True if there are no data to load
	 * - False if data are loaded asynchronously
	 */
	getDatas: function(source, startDate, endDate, callback, afterLoad, updateMode) {
		"use strict";

		var self = this;
		if (arguments.length < 5) {
			afterLoad = true;
		}
		if (arguments.length < 6) {
			updateMode = this.APPEND_ON_UPDATE;
		}
		var _callback = function(data) {
			if (afterLoad !== false) {
				if (typeof afterLoad === "function") {
					data = afterLoad(data);
				} else if (typeof (self.options.afterLoadData) === "function") {
					data = self.options.afterLoadData(data);
				} else {
					console.log("Provided callback for afterLoadData is not a function.");
				}
			} else if (self.options.dataType === "csv" || self.options.dataType === "tsv") {
				data = this.interpretCSV(data);
			}
			self.parseDatas(data, updateMode, startDate, endDate);
			if (typeof callback === "function") {
				callback();
			}
		};

		switch(typeof source) {
		case "string":
			if (source === "") {
				_callback({});
				return true;
			} else {
				var url = this.parseURI(source, startDate, endDate);
				var requestType = "GET";
				if (self.options.dataPostPayload !== null ) {
					requestType = "POST";
				}
				var payload = null;
				if (self.options.dataPostPayload !== null) {
					payload = this.parseURI(self.options.dataPostPayload, startDate, endDate);
				}

				switch(this.options.dataType) {
				case "json":
					d3.json(url, _callback).send(requestType, payload);
					break;
				case "csv":
					d3.csv(url, _callback).send(requestType, payload);
					break;
				case "tsv":
					d3.tsv(url, _callback).send(requestType, payload);
					break;
				case "txt":
					d3.text(url, "text/plain", _callback).send(requestType, payload);
					break;
				}
			}
			return false;
		case "object":
			if (source === Object(source)) {
				_callback(source);
				return false;
			}
			/* falls through */
		default:
			_callback({});
			return true;
		}
	},

	/**
	 * Populate the calendar internal data
	 *
	 * @param object data
	 * @param constant updateMode
	 * @param Date startDate
	 * @param Date endDate
	 *
	 * @return void
	 */
	parseDatas: function(data, updateMode, startDate, endDate) {
		"use strict";

		if (updateMode === this.RESET_ALL_ON_UPDATE) {
			this._domains.forEach(function(key, value) {
				value.forEach(function(element, index, array) {
					array[index].v = null;
				});
			});
		}

		var temp = {};

		var extractTime = function(d) { return d.t; };

		/*jshint forin:false */
		for (var d in data) {
			var date = new Date(d*1000);
			var domainUnit = this.getDomain(date)[0].getTime();

			// The current data belongs to a domain that was compressed
			// Compress the data for the two duplicate hours into the same hour
			if (this.DSTDomain.indexOf(domainUnit) >= 0) {

				// Re-assign all data to the first or the second duplicate hours
				// depending on which is visible
				if (this._domains.has(domainUnit - 3600 * 1000)) {
					domainUnit -= 3600 * 1000;
				}
			}

			// Skip if data is not relevant to current domain
			if (isNaN(d) || !data.hasOwnProperty(d) || !this._domains.has(domainUnit) || !(domainUnit >= +startDate && domainUnit < +endDate)) {
				continue;
			}

			var subDomainsData = this._domains.get(domainUnit);

			if (!temp.hasOwnProperty(domainUnit)) {
				temp[domainUnit] = subDomainsData.map(extractTime);
			}

			var index = temp[domainUnit].indexOf(this._domainType[this.options.subDomain].extractUnit(date));

			if (updateMode === this.RESET_SINGLE_ON_UPDATE) {
				subDomainsData[index].v = data[d];
			} else {
				if (!isNaN(subDomainsData[index].v)) {
					subDomainsData[index].v += data[d];
				} else {
					subDomainsData[index].v = data[d];
				}
			}
		}
	},

	parseURI: function(str, startDate, endDate) {
		"use strict";

		// Use a timestamp in seconds
		str = str.replace(/\{\{t:start\}\}/g, startDate.getTime()/1000);
		str = str.replace(/\{\{t:end\}\}/g, endDate.getTime()/1000);

		// Use a string date, following the ISO-8601
		str = str.replace(/\{\{d:start\}\}/g, startDate.toISOString());
		str = str.replace(/\{\{d:end\}\}/g, endDate.toISOString());

		return str;
	},

	interpretCSV: function(data) {
		"use strict";

		var d = {};
		var keys = Object.keys(data[0]);
		var i, total;
		for (i = 0, total = data.length; i < total; i++) {
			d[data[i][keys[0]]] = +data[i][keys[1]];
		}
		return d;
	},

	/**
	 * Handle the calendar layout and dimension
	 *
	 * Expand and shrink the container depending on its children dimension
	 * Also rearrange the children position depending on their dimension,
	 * and the legend position
	 *
	 * @return void
	 */
	resize: function() {
		"use strict";

		var parent = this;
		var options = parent.options;
		var legendWidth = options.displayLegend ? (parent.Legend.getDim("width") + options.legendMargin[1] + options.legendMargin[3]) : 0;
		var legendHeight = options.displayLegend ? (parent.Legend.getDim("height") + options.legendMargin[0] + options.legendMargin[2]) : 0;

		var graphWidth = parent.graphDim.width - options.domainGutter - options.cellPadding;
		var graphHeight = parent.graphDim.height - options.domainGutter - options.cellPadding;

		this.root.transition().duration(options.animationDuration)
			.attr("width", function() {
				if (options.legendVerticalPosition === "middle" || options.legendVerticalPosition === "center") {
					return graphWidth + legendWidth;
				}
				return Math.max(graphWidth, legendWidth);
			})
			.attr("height", function() {
				if (options.legendVerticalPosition === "middle" || options.legendVerticalPosition === "center") {
					return Math.max(graphHeight, legendHeight);
				}
				return graphHeight + legendHeight;
			})
		;

		this.root.select(".graph").transition().duration(options.animationDuration)
			.attr("y", function() {
				if (options.legendVerticalPosition === "top") {
					return legendHeight;
				}
				return 0;
			})
			.attr("x", function() {
				if (
					(options.legendVerticalPosition === "middle" || options.legendVerticalPosition === "center") &&
					options.legendHorizontalPosition === "left") {
					return legendWidth;
				}
				return 0;

			})
		;
	},

	// =========================================================================//
	// PUBLIC API																//
	// =========================================================================//

	/**
	 * Shift the calendar forward
	 */
	next: function(n) {
		"use strict";

		if (arguments.length === 0) {
			n = 1;
		}
		return this.loadNextDomain(n);
	},

	/**
	 * Shift the calendar backward
	 */
	previous: function(n) {
		"use strict";

		if (arguments.length === 0) {
			n = 1;
		}
		return this.loadPreviousDomain(n);
	},

	/**
	 * Jump directly to a specific date
	 *
	 * JumpTo will scroll the calendar until the wanted domain with the specified
	 * date is visible. Unless you set reset to true, the wanted domain
	 * will not necessarily be the first (leftmost) domain of the calendar.
	 *
	 * @param Date date Jump to the domain containing that date
	 * @param bool reset Whether the wanted domain should be the first domain of the calendar
	 * @param bool True of the calendar was scrolled
	 */
	jumpTo: function(date, reset) {
		"use strict";

		if (arguments.length < 2) {
			reset = false;
		}
		var domains = this.getDomainKeys();
		var firstDomain = domains[0];
		var lastDomain = domains[domains.length-1];

		if (date < firstDomain) {
			return this.loadPreviousDomain(this.getDomain(firstDomain, date).length);
		} else {
			if (reset) {
				return this.loadNextDomain(this.getDomain(firstDomain, date).length);
			}

			if (date > lastDomain) {
				return this.loadNextDomain(this.getDomain(lastDomain, date).length);
			}
		}

		return false;
	},

	/**
	 * Navigate back to the start date
	 *
	 * @since  3.3.8
	 * @return void
	 */
	rewind: function() {
		"use strict";

		this.jumpTo(this.options.start, true);
	},

	/**
	 * Update the calendar with new data
	 *
	 * @param  object|string		dataSource		The calendar's datasource, same type as this.options.data
	 * @param  boolean|function		afterLoad		Whether to execute afterLoad() on the data. Pass directly a function
	 * if you don't want to use the afterLoad() callback
	 */
	update: function(dataSource, afterLoad, updateMode) {
		"use strict";

		if (arguments.length < 2) {
			afterLoad = true;
		}
		if (arguments.length < 3) {
			updateMode = this.RESET_ALL_ON_UPDATE;
		}

		var domains = this.getDomainKeys();
		var self = this;
		this.getDatas(
			dataSource,
			new Date(domains[0]),
			this.getSubDomain(domains[domains.length-1]).pop(),
			function() {
				self.fill();
			},
			afterLoad,
			updateMode
		);
	},

	/**
	 * Set the legend
	 *
	 * @param array legend an array of integer, representing the different threshold value
	 * @param array colorRange an array of 2 hex colors, for the minimum and maximum colors
	 */
	setLegend: function() {
		"use strict";

		var oldLegend = this.options.legend.slice(0);
		if (arguments.length >= 1 && Array.isArray(arguments[0])) {
			this.options.legend = arguments[0];
		}
		if (arguments.length >= 2) {
			if (Array.isArray(arguments[1]) && arguments[1].length >= 2) {
				this.options.legendColors = [arguments[1][0], arguments[1][1]];
			} else {
				this.options.legendColors = arguments[1];
			}
		}

		if ((arguments.length > 0 && !arrayEquals(oldLegend, this.options.legend)) || arguments.length >= 2) {
			this.Legend.buildColors();
			this.fill();
		}

		this.Legend.redraw(this.graphDim.width - this.options.domainGutter - this.options.cellPadding);
	},

	/**
	 * Remove the legend
	 *
	 * @return bool False if there is no legend to remove
	 */
	removeLegend: function() {
		"use strict";

		if (!this.options.displayLegend) {
			return false;
		}
		this.options.displayLegend = false;
		this.Legend.remove();
		return true;
	},

	/**
	 * Display the legend
	 *
	 * @return bool False if the legend was already displayed
	 */
	showLegend: function() {
		"use strict";

		if (this.options.displayLegend) {
			return false;
		}
		this.options.displayLegend = true;
		this.Legend.redraw(this.graphDim.width - this.options.domainGutter - this.options.cellPadding);
		return true;
	},

	/**
	 * Highlight dates
	 *
	 * Add a highlight class to a set of dates
	 *
	 * @since  3.3.5
	 * @param  array Array of dates to highlight
	 * @return bool True if dates were highlighted
	 */
	highlight: function(args) {
		"use strict";

		if ((this.options.highlight = this.expandDateSetting(args)).length > 0) {
			this.fill();
			return true;
		}
		return false;
	},

	/**
	 * Destroy the calendar
	 *
	 * Usage: cal = cal.destroy();
	 *
	 * @since  3.3.6
	 * @param function A callback function to trigger after destroying the calendar
	 * @return null
	 */
	destroy: function(callback) {
		"use strict";

		this.root.transition().duration(this.options.animationDuration)
			.attr("width", 0)
			.attr("height", 0)
			.remove()
			.each("end", function() {
				if (typeof callback === "function") {
					callback();
				} else if (typeof callback !== "undefined") {
					console.log("Provided callback for destroy() is not a function.");
				}
			})
		;

		return null;
	},

	getSVG: function() {
		"use strict";

		var styles = {
			".cal-heatmap-container": {},
			".graph": {},
			".graph-rect": {},
			"rect.highlight": {},
			"rect.now": {},
			"rect.highlight-now": {},
			"text.highlight": {},
			"text.now": {},
			"text.highlight-now": {},
			".domain-background": {},
			".graph-label": {},
			".subdomain-text": {},
			".q0": {},
			".qi": {}
		};

		for (var j = 1, total = this.options.legend.length+1; j <= total; j++) {
			styles[".q" + j] = {};
		}

		var root = this.root;

		var whitelistStyles = [
			// SVG specific properties
			"stroke", "stroke-width", "stroke-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-miterlimit",
			"fill", "fill-opacity", "fill-rule",
			"marker", "marker-start", "marker-mid", "marker-end",
			"alignement-baseline", "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal", "glyph-orientation-vertical", "kerning", "text-anchor",
			"shape-rendering",

			// Text Specific properties
			"text-transform", "font-family", "font", "font-size", "font-weight"
		];

		var filterStyles = function(attribute, property, value) {
			if (whitelistStyles.indexOf(property) !== -1) {
				styles[attribute][property] = value;
			}
		};

		var getElement = function(e) {
			return root.select(e)[0][0];
		};

		/* jshint forin:false */
		for (var element in styles) {
			if (!styles.hasOwnProperty(element)) {
				continue;
			}

			var dom = getElement(element);

			if (dom === null) {
				continue;
			}

			// The DOM Level 2 CSS way
			/* jshint maxdepth: false */
			if ("getComputedStyle" in window) {
				var cs = getComputedStyle(dom, null);
				if (cs.length !== 0) {
					for (var i = 0; i < cs.length; i++) {
						filterStyles(element, cs.item(i), cs.getPropertyValue(cs.item(i)));
					}

				// Opera workaround. Opera doesn"t support `item`/`length`
				// on CSSStyleDeclaration.
				} else {
					for (var k in cs) {
						if (cs.hasOwnProperty(k)) {
							filterStyles(element, k, cs[k]);
						}
					}
				}

			// The IE way
			} else if ("currentStyle" in dom) {
				var css = dom.currentStyle;
				for (var p in css) {
					filterStyles(element, p, css[p]);
				}
			}
		}

		var string = "<svg xmlns=\"http://www.w3.org/2000/svg\" "+
		"xmlns:xlink=\"http://www.w3.org/1999/xlink\"><style type=\"text/css\"><![CDATA[ ";

		for (var style in styles) {
			string += style + " {\n";
			for (var l in styles[style]) {
				string += "\t" + l + ":" + styles[style][l] + ";\n";
			}
			string += "}\n";
		}

		string += "]]></style>";
		string += new XMLSerializer().serializeToString(this.root[0][0]);
		string += "</svg>";

		return string;
	}
};

// =========================================================================//
// DOMAIN POSITION COMPUTATION												//
// =========================================================================//

/**
 * Compute the position of a domain, relative to the calendar
 */
var DomainPosition = function() {
	"use strict";

	this.positions = d3.map();
};

DomainPosition.prototype.getPosition = function(d) {
	"use strict";

	return this.positions.get(d);
};

DomainPosition.prototype.getPositionFromIndex = function(i) {
	"use strict";

	var domains = this.getKeys();
	return this.positions.get(domains[i]);
};

DomainPosition.prototype.getLast = function() {
	"use strict";

	var domains = this.getKeys();
	return this.positions.get(domains[domains.length-1]);
};

DomainPosition.prototype.setPosition = function(d, dim) {
	"use strict";

	this.positions.set(d, dim);
};

DomainPosition.prototype.shiftRightBy = function(exitingDomainDim) {
	"use strict";

	this.positions.forEach(function(key, value) {
		this.set(key, value - exitingDomainDim);
	});

	var domains = this.getKeys();
	this.positions.remove(domains[0]);
};

DomainPosition.prototype.shiftLeftBy = function(enteringDomainDim) {
	"use strict";

	this.positions.forEach(function(key, value) {
		this.set(key, value + enteringDomainDim);
	});

	var domains = this.getKeys();
	this.positions.remove(domains[domains.length-1]);
};

DomainPosition.prototype.getKeys = function() {
	"use strict";

	return this.positions.keys().sort(function(a, b) {
		return parseInt(a, 10) - parseInt(b, 10);
	});
};

// =========================================================================//
// LEGEND																	//
// =========================================================================//

var Legend = function(calendar) {
	"use strict";

	this.calendar = calendar;
	this.computeDim();

	if (calendar.options.legendColors !== null) {
		this.buildColors();
	}
};

Legend.prototype.computeDim = function() {
	"use strict";

	var options = this.calendar.options; // Shorter accessor for variable name mangling when minifying
	this.dim = {
		width:
			options.legendCellSize * (options.legend.length+1) +
			options.legendCellPadding * (options.legend.length),
		height:
			options.legendCellSize
	};
};

Legend.prototype.remove = function() {
	"use strict";

	this.calendar.root.select(".graph-legend").remove();
	this.calendar.resize();
};

Legend.prototype.redraw = function(width) {
	"use strict";

	if (!this.calendar.options.displayLegend) {
		return false;
	}

	var parent = this;
	var calendar = this.calendar;
	var legend = calendar.root;
	var legendItem;
	var options = calendar.options; // Shorter accessor for variable name mangling when minifying

	this.computeDim();

	var _legend = options.legend.slice(0);
	_legend.push(_legend[_legend.length-1]+1);

	var legendElement = calendar.root.select(".graph-legend");
	if (legendElement[0][0] !== null) {
		legend = legendElement;
		legendItem = legend
			.select("g")
			.selectAll("rect").data(_legend)
		;
	} else {
		// Creating the new legend DOM if it doesn't already exist
		legend = options.legendVerticalPosition === "top" ? legend.insert("svg", ".graph") : legend.append("svg");

		legend
			.attr("x", getLegendXPosition())
			.attr("y", getLegendYPosition())
		;

		legendItem = legend
			.attr("class", "graph-legend")
			.attr("height", parent.getDim("height"))
			.attr("width", parent.getDim("width"))
			.append("g")
			.selectAll().data(_legend)
		;
	}

	legendItem
		.enter()
		.append("rect")
		.call(legendCellLayout)
		.attr("class", function(d){ return calendar.Legend.getClass(d, (calendar.legendScale === null)); })
		.attr("fill-opacity", 0)
		.call(function(selection) {
			if (calendar.legendScale !== null && options.legendColors !== null && options.legendColors.hasOwnProperty("base")) {
				selection.attr("fill", options.legendColors.base);
			}
		})
		.append("title")
	;

	legendItem.exit().transition().duration(options.animationDuration)
	.attr("fill-opacity", 0)
	.remove();

	legendItem.transition().delay(function(d, i) { return options.animationDuration * i/10; })
		.call(legendCellLayout)
		.attr("fill-opacity", 1)
		.call(function(element) {
			element.attr("fill", function(d, i) {
				if (calendar.legendScale === null) {
					return "";
				}

				if (i === 0) {
					return calendar.legendScale(d - 1);
				}
				return calendar.legendScale(options.legend[i-1]);
			});

			element.attr("class", function(d) { return calendar.Legend.getClass(d, (calendar.legendScale === null)); });
		})
	;

	function legendCellLayout(selection) {
		selection
			.attr("width", options.legendCellSize)
			.attr("height", options.legendCellSize)
			.attr("x", function(d, i) {
				return i * (options.legendCellSize + options.legendCellPadding);
			})
		;
	}

	legendItem.select("title").text(function(d, i) {
		if (i === 0) {
			return (options.legendTitleFormat.lower).format({
				min: options.legend[i],
				name: options.itemName[1]
			});
		} else if (i === _legend.length-1) {
			return (options.legendTitleFormat.upper).format({
				max: options.legend[i-1],
				name: options.itemName[1]
			});
		} else {
			return (options.legendTitleFormat.inner).format({
				down: options.legend[i-1],
				up: options.legend[i],
				name: options.itemName[1]
			});
		}
	})
	;

	legend.transition().duration(options.animationDuration)
		.attr("x", getLegendXPosition())
		.attr("y", getLegendYPosition())
		.attr("width", parent.getDim("width"))
		.attr("height", parent.getDim("height"))
	;

	legend.select("g").transition().duration(options.animationDuration)
		.attr("transform", function() {
			if (options.legendOrientation === "vertical")	{
				return "rotate(90 " + options.legendCellSize/2 + " " + options.legendCellSize/2 + ")";
			}
			return "";
		})
	;

	function getLegendXPosition() {
		switch(options.legendHorizontalPosition) {
		case "right":
			if (options.legendVerticalPosition === "center" || options.legendVerticalPosition === "middle") {
				return width + options.legendMargin[3];
			}
			return width - parent.getDim("width") - options.legendMargin[1];
		case "middle":
		case "center":
			return Math.round(width/2 - parent.getDim("width")/2);
		default:
			return options.legendMargin[3];
		}
	}

	function getLegendYPosition() {
		if (options.legendVerticalPosition === "bottom") {
			return calendar.graphDim.height + options.legendMargin[0] - options.domainGutter - options.cellPadding;
		}
		return options.legendMargin[0];
	}

	calendar.resize();
};

/**
 * Return the dimension of the legend
 *
 * Takes into account rotation
 *
 * @param  string axis Width or height
 * @return int height or width in pixels
 */
Legend.prototype.getDim = function(axis) {
	"use strict";

	var isHorizontal = (this.calendar.options.legendOrientation === "horizontal");

	switch(axis) {
	case "width":
		return this.dim[isHorizontal ? "width": "height"];
	case "height":
		return this.dim[isHorizontal ? "height": "width"];
	}
};

Legend.prototype.buildColors = function() {
	"use strict";

	var options = this.calendar.options; // Shorter accessor for variable name mangling when minifying

	if (options.legendColors === null) {
		this.calendar.legendScale = null;
		return false;
	}

	var _colorRange = [];

	if (Array.isArray(options.legendColors)) {
		_colorRange = options.legendColors;
	} else if (options.legendColors.hasOwnProperty("min") && options.legendColors.hasOwnProperty("max")) {
		_colorRange = [options.legendColors.min, options.legendColors.max];
	} else {
		options.legendColors = null;
		return false;
	}

	var _legend = options.legend.slice(0);

	if (_legend[0] > 0) {
		_legend.unshift(0);
	} else if (_legend[0] < 0) {
		// Let's guess the leftmost value, it we have to add one
		_legend.unshift(_legend[0] - (_legend[_legend.length-1] - _legend[0])/_legend.length);
	}

	var colorScale = d3.scale.linear()
		.range(_colorRange)
		.interpolate(d3.interpolateHcl)
		.domain([d3.min(_legend), d3.max(_legend)])
	;

	var legendColors = _legend.map(function(element) { return colorScale(element); });
	this.calendar.legendScale = d3.scale.threshold().domain(options.legend).range(legendColors);

	return true;
};

/**
 * Return the classname on the legend for the specified value
 *
 * @param integer n Value associated to a date
 * @param bool withCssClass Whether to display the css class used to style the cell.
 *                          Disabling will allow styling directly via html fill attribute
 *
 * @return string Classname according to the legend
 */
Legend.prototype.getClass = function(n, withCssClass) {
	"use strict";

	if (n === null || isNaN(n)) {
		return "";
	}

	var index = [this.calendar.options.legend.length + 1];

	for (var i = 0, total = this.calendar.options.legend.length-1; i <= total; i++) {

		if (this.calendar.options.legend[0] > 0 && n < 0) {
			index = ["1", "i"];
			break;
		}

		if (n <= this.calendar.options.legend[i]) {
			index = [i+1];
			break;
		}
	}

	if (n === 0) {
		index.push(0);
	}

	index.unshift("");
	return (index.join(" r") + (withCssClass ? index.join(" q"): "")).trim();
};

/**
 * Sprintf like function
 * @source http://stackoverflow.com/a/4795914/805649
 * @return String
 */
String.prototype.format = function () {
	"use strict";

	var formatted = this;
	for (var prop in arguments[0]) {
		if (arguments[0].hasOwnProperty(prop)) {
			var regexp = new RegExp("\\{" + prop + "\\}", "gi");
			formatted = formatted.replace(regexp, arguments[0][prop]);
		}
	}
	return formatted;
};

/**
 * #source http://stackoverflow.com/a/383245/805649
 */
function mergeRecursive(obj1, obj2) {
	"use strict";

	/*jshint forin:false */
	for (var p in obj2) {
		try {
			// Property in destination object set; update its value.
			if (obj2[p].constructor === Object) {
				obj1[p] = mergeRecursive(obj1[p], obj2[p]);
			} else {
				obj1[p] = obj2[p];
			}
		} catch(e) {
			// Property in destination object not set; create it and set its value.
			obj1[p] = obj2[p];
		}
	}

	return obj1;
}

/**
 * Check if 2 arrays are equals
 *
 * @link http://stackoverflow.com/a/14853974/805649
 * @param  array array the array to compare to
 * @return bool true of the 2 arrays are equals
 */
function arrayEquals(arrayA, arrayB) {
	"use strict";

	// if the other array is a falsy value, return
	if (!arrayB || !arrayA) {
		return false;
	}

	// compare lengths - can save a lot of time
	if (arrayA.length !== arrayB.length) {
		return false;
	}

	for (var i = 0; i < arrayA.length; i++) {
		// Check if we have nested arrays
		if (arrayA[i] instanceof Array && arrayB[i] instanceof Array) {
			// recurse into the nested arrays
			if (!arrayEquals(arrayA[i], arrayB[i])) {
				return false;
			}
		}
		else if (arrayA[i] !== arrayB[i]) {
			// Warning - two different object instances will never be equal: {x:20} != {x:20}
			return false;
		}
	}
	return true;
}

/**
 * AMD Loader
 */
if (typeof define === "function" && define.amd) {
	define(["d3"], function() {
		"use strict";

		return CalHeatMap;
	});
} else if (typeof module === "object" && module.exports) {
	module.exports = CalHeatMap;
} else {
	window.CalHeatMap = CalHeatMap;
}