function DualContainer(parent)
{
	Component.call(this, parent, "div");

	this.element.style.overflow = "hidden";
	this.element.style.backgroundColor = "var(--panel-color)";

	// Container A
	this.elementA = null;

	// Container B
	this.elementB = null;

	// Resize tab
	this.resizeTab = document.createElement("div");
	this.resizeTab.style.position = "absolute";
	this.resizeTab.style.cursor = "e-resize";
	this.resizeTab.style.backgroundColor = "var(--bar-color)";
	this.element.appendChild(this.resizeTab);

	// Resize Tab
	this.tabPosition = 0.5;
	this.tabPositionMax = 0.95;
	this.tabPositionMin = 0.05;
	this.tabSize = 5;
	this.orientation = DualContainer.HORIZONTAL;

	var self = this;

	// Tab mouse down
	this.resizeTab.onmousedown = function(event)
	{
		self.manager.create();
	};

	// Tab resize event manager
	this.manager = new EventManager();
	this.manager.add(window, "mousemove", function(event)
	{
		if (self.orientation === DualContainer.HORIZONTAL)
		{	
			self.tabPosition += event.movementX / self.size.x;
		}
		else if (self.orientation === DualContainer.VERTICAL)
		{
			self.tabPosition += event.movementY / self.size.y;
		}

		// Limit tab position
		if (self.tabPosition > self.tabPositionMax)
		{
			self.tabPosition = self.tabPositionMax;
		}
		else if (self.tabPosition < self.tabPositionMin)
		{
			self.tabPosition = self.tabPositionMin;
		}

		self.updateInterface();
	});

	this.manager.add(window, "mouseup", function(event)
	{
		self.manager.destroy();
	});
}
Dual container is used to place two components.

The component can be resized, using a resizable bar that can be vertical or horizontal.

@class DualContainer