function TabGroupSplit(parent, placement)
{
	TabGroup.call(this, parent, placement);

	var self = this;

	/**
	 * Border where another another tabs can be dragged to for this tab to be spplited.
	 *
	 * @property dragBorder
	 * @type {number}
	 */
	this.dragBorder = 0.2;

	/**
	 * If true the group can be split in two.
	 *
	 * @property canSplit
	 * @type {boolean}
	 */
	this.canSplit = true;

	/**
	 * If true the group can be collapsed.
	 *
	 * @property canCollapse
	 * @type {boolean}
	 */
	this.canCollapse = true;

	/**
	 * DOM element to be displayed when a tab is dragged over.
	 *
	 * @property tabArea
	 * @type {Component}
	 */
	this.tabArea = document.createElement("div");
	this.tabArea.style.zIndex = "1000";
	this.tabArea.style.position = "absolute";
	this.tabArea.style.backgroundColor = "var(--color-black-alpha-20)";
	this.tabArea.style.pointerEvents = "none";

	// Drag drop
	this.tab.element.ondrop = function(event)
	{
		event.preventDefault();

		var uuid = event.dataTransfer.getData("uuid");
		var tab = DragBuffer.get(uuid);

		if (tab instanceof TabComponent)
		{
			var position = DOMUtils.getPosition(self.element);
			var x = event.clientX - position.x;
			var y = event.clientY - position.y;

			// Left
			if (x < self.size.x * self.dragBorder)
			{
				self.split(TabGroup.LEFT).attachTab(tab);
			}
			// Right
			else if (x > self.size.x * (1 - self.dragBorder))
			{
				self.split(TabGroup.RIGHT).attachTab(tab);
			}
			// Top
			else if (y < self.size.y * self.dragBorder)
			{
				self.split(TabGroup.TOP).attachTab(tab);
			}
			// Bottom
			else if (y > self.size.y * (1 - self.dragBorder))
			{
				self.split(TabGroup.BOTTOM).attachTab(tab);
			}
			else
			{
				self.attachTab(tab);
			}

			DragBuffer.pop(uuid);
		}

		if (self.tab.element.contains(self.tabArea))
		{
			self.tab.element.removeChild(self.tabArea);
		}
	};

	// Drag over
	this.tab.element.ondragover = function(event)
	{
		event.preventDefault();

		if (!(DragBuffer.buffer[0] instanceof TabComponent))
		{
			return;
		}

		var position = DOMUtils.getPosition(self.element);
		var x = event.clientX - position.x;
		var y = event.clientY - position.y;

		// Left
		if (x < self.size.x * self.dragBorder)
		{
			self.tabArea.style.right = null;
			self.tabArea.style.bottom = null;
			self.tabArea.style.top = "0px";
			self.tabArea.style.left = "0px";
			self.tabArea.style.width = "50%";
			self.tabArea.style.height = "100%";

			if (!self.tab.element.contains(self.tabArea))
			{
				self.tab.element.appendChild(self.tabArea);
			}
		}
		// Right
		else if (x > self.size.x * (1 - self.dragBorder))
		{
			self.tabArea.style.left = null;
			self.tabArea.style.bottom = null;
			self.tabArea.style.top = "0px";
			self.tabArea.style.right = "0px";
			self.tabArea.style.width = "50%";
			self.tabArea.style.height = "100%";

			if (!self.tab.element.contains(self.tabArea))
			{
				self.tab.element.appendChild(self.tabArea);
			}
		}
		// Top
		else if (y < self.size.y * self.dragBorder)
		{
			self.tabArea.style.right = null;
			self.tabArea.style.bottom = null;
			self.tabArea.style.top = "0px";
			self.tabArea.style.left = "0px";
			self.tabArea.style.width = "100%";
			self.tabArea.style.height = "50%";

			if (!self.tab.element.contains(self.tabArea))
			{
				self.tab.element.appendChild(self.tabArea);
			}
		}
		// Bottom
		else if (y > self.size.y * (1 - self.dragBorder))
		{
			self.tabArea.style.top = null;
			self.tabArea.style.right = null;
			self.tabArea.style.bottom = "0px";
			self.tabArea.style.left = "0px";
			self.tabArea.style.width = "100%";
			self.tabArea.style.height = "50%";

			if (!self.tab.element.contains(self.tabArea))
			{
				self.tab.element.appendChild(self.tabArea);
			}
		}
		else
		{
			if (self.tab.element.contains(self.tabArea))
			{
				self.tab.element.removeChild(self.tabArea);
			}
		}
	};

	// Drag leave
	this.tab.element.ondragleave = function(event)
	{
		event.preventDefault();

		if (self.tab.element.contains(self.tabArea))
		{
			self.tab.element.removeChild(self.tabArea);
		}
	};
}
A tab group contains and manages tab elements.

A splitable tab group can be splited into two tab group allowing a more flexible interface organization during runtime.

@class TabGroupSplit
@extends {TabGroup}
@param {Component} parent Parent element.