');
+ this.__container(this.$container);
+
+ this._frame = new (this.docker().__getClass('wcFrame'))(this.$frame, this, false);
+ this._frame.tabOrientation(this._position);
+ },
+
+ // Updates the size of the collapser.
+ __update: function (opt_dontMove) {
+ this.__adjustCollapsedSize();
+ this._frame.__update();
+ },
+
+ // Adjusts the size of the collapser when it is closed.
+ __adjustCollapsedSize: function () {
+ if (this._frame._panelList.length) {
+ this._closeSize = this._frame.$tabBar.outerHeight();
+ this._parent.$bar.removeClass('wcSplitterHidden');
+ } else {
+ this._closeSize = 0;
+ this._parent.$bar.addClass('wcSplitterHidden');
+ }
+ },
+
+ // Retrieves the bounding rect for this collapser.
+ __rect: function () {
+ var offset = this.$frame.offset();
+ var width = this.$frame.width();
+ var height = this.$frame.height();
+
+ var panel = this._frame.panel();
+ if (panel) {
+ // Determine the size to expand the drawer based on the size of the panel.
+ if (this._position === wcDocker.DOCK.BOTTOM) {
+ height = panel._size.y;
+ width = width / 3;
+ } else {
+ width = panel._size.x;
+ height = height / 3;
+ }
+ }
+
+ return {
+ x: offset.left,
+ y: offset.top,
+ w: width,
+ h: height
+ };
+ },
+
+ // Saves the current panel configuration into a meta
+ // object that can be used later to restore it.
+ __save: function () {
+
+ var data = {};
+ data.closeSize = this._closeSize;
+ data.frame = this._frame.__save();
+ return data;
+ },
+
+ // Restores a previously saved configuration.
+ __restore: function (data, docker) {
+ this._closeSize = data.closeSize;
+ this._frame.__restore(data.frame, docker);
+ this.__adjustCollapsedSize();
+ },
+
+ // Gets, or Sets a new container for this layout.
+ // Params:
+ // $container If supplied, sets a new container for this layout.
+ // parent If supplied, sets a new parent for this layout.
+ // Returns:
+ // JQuery collection The current container.
+ __container: function ($container) {
+ if (typeof $container === 'undefined') {
+ return this.$container;
+ }
+
+ this.$container = $container;
+ if (this.$container) {
+ this.$container.append(this.$frame);
+ } else {
+ this.$frame.remove();
+ }
+ return this.$container;
+ },
+
+ // Disconnects and prepares this widget for destruction.
+ __destroy: function () {
+ if (this._frame) {
+ this._frame.__destroy();
+ this._frame = null;
+ }
+
+ this.__container(null);
+ this._parent = null;
+ }
+ });
+
+ return Module;
+});
+/** @module wcCollapser */
+define('wcDocker/collapser',[
+ "dcl/dcl",
+ "./types",
+ "./splitter",
+ "./drawer",
+ "./base"
+], function (dcl, wcDocker, wcSplitter, wcDrawer, base) {
+
+ /**
+ * A collapsable container for carrying panels.
+ *
+ * @class module:wcCollapser
+ * @version 3.0.0
+ * @description A docker container for carrying its own arrangement of docked panels as a slide out drawer.
+ */
+ var Module = dcl(base, {
+ declaredClass:'wcCollapser',
+ /**
+ * @memberOf module:wcCollapser
+ * @param {external:jQuery~selector|external:jQuery~Object|external:domNode} container - A container element for this drawer.
+ * @param {module:wcSplitter|wcDocker} parent - The drawer's parent object.
+ * @param {module:wcDocker.DOCK} position - A docking position to place this drawer.
+ */
+ constructor: function (container, parent, position) {
+
+ this.$container = $(container);
+ this.$frame = null;
+
+ this._position = position;
+ this._parent = parent;
+ this._splitter = null;
+ this._drawer = null;
+ this._size = 0;
+ this._orientation = (this._position === wcDocker.DOCK.LEFT || this._position === wcDocker.DOCK.RIGHT) ? wcDocker.ORIENTATION.HORIZONTAL : wcDocker.ORIENTATION.VERTICAL;
+
+ this.__init();
+ },
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+ // Public Functions
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+ /**
+ * Collapses the drawer to its respective side wall.
+ * @function module:wcCollapser#collapse
+ */
+ collapse: function (instant) {
+ this._drawer.collapse();
+ },
+
+ /**
+ * Expands the drawer.
+ * @function module:wcCollapser#expand
+ */
+ expand: function () {
+ this._drawer.expand();
+ },
+
+ /**
+ * Gets whether the drawer is expanded.
+ * @function module:wcCollapser#isExpanded
+ * @returns {Boolean} - The current expanded state.
+ */
+ isExpanded: function () {
+ return this._drawer.isExpanded();
+ },
+
+ /**
+ * The minimum size constraint for the side bar area.
+ * @function module:wcCollapser#minSize
+ * @returns {module:wcDocker~Size} - The minimum size.
+ */
+ minSize: function () {
+ return {x: this._size, y: this._size};
+ },
+
+ /**
+ * The maximum size constraint for the side bar area.
+ * @function module:wcCollapser#maxSize
+ * @returns {module:wcDocker~Size} - The maximum size.
+ */
+ maxSize: function () {
+ var isHorizontal = (this._orientation === wcDocker.ORIENTATION.HORIZONTAL) ? true : false;
+ return {
+ x: (isHorizontal ? this._size : Infinity),
+ y: (!isHorizontal ? this._size : Infinity)
+ };
+ },
+
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+ // Private Functions
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+ __init: function () {
+ this.$frame = $('
');
+ this.__container(this.$container);
+
+ var docker = this.docker();
+ this._splitter = new (this.docker().__getClass('wcSplitter'))(docker.$container, this, this._orientation);
+ this._drawer = new (this.docker().__getClass('wcDrawer'))(docker.$transition, this._splitter, this._position);
+ switch (this._position) {
+ case wcDocker.DOCK.LEFT:
+ this._splitter.pane(0, this._drawer);
+ this._splitter.$pane[1].remove();
+ this._splitter.$pane[0].addClass('wcDrawer');
+ this._splitter.pos(0);
+ break;
+ case wcDocker.DOCK.RIGHT:
+ case wcDocker.DOCK.BOTTOM:
+ this._splitter.pane(1, this._drawer);
+ this._splitter.$pane[0].remove();
+ this._splitter.$pane[1].addClass('wcDrawer');
+ this._splitter.pos(1);
+ break;
+ }
+
+ this._parent.$bar.addClass('wcSplitterHidden');
+ },
+
+ // Updates the size of the collapser.
+ __update: function (opt_dontMove) {
+ this._splitter.__update();
+ this.__adjustSize();
+ },
+
+ // Adjusts the size of the collapser based on css
+ __adjustSize: function () {
+ if (this._drawer._frame._panelList.length) {
+ this._size = this._drawer._frame.$tabBar.outerHeight();
+ } else {
+ this._size = 0;
+ }
+ },
+
+ // Retrieves the bounding rect for this collapser.
+ __rect: function () {
+ return this._drawer.__rect();
+ },
+
+ // Saves the current panel configuration into a meta
+ // object that can be used later to restore it.
+ __save: function () {
+ var data = {};
+ data.size = this._size;
+ data.drawer = this._drawer.__save();
+ return data;
+ },
+
+ // Restores a previously saved configuration.
+ __restore: function (data, docker) {
+ this._size = data.size;
+ this._drawer.__restore(data.drawer, docker);
+ this.__adjustSize();
+ },
+
+ // Gets, or Sets a new container for this layout.
+ // Params:
+ // $container If supplied, sets a new container for this layout.
+ // parent If supplied, sets a new parent for this layout.
+ // Returns:
+ // JQuery collection The current container.
+ __container: function ($container) {
+ if (typeof $container === 'undefined') {
+ return this.$container;
+ }
+
+ this.$container = $container;
+
+ if (this.$container) {
+ this.$container.append(this.$frame);
+ } else {
+ this.$frame.remove();
+ }
+ return this.$container;
+ },
+
+ // Disconnects and prepares this widget for destruction.
+ __destroy: function () {
+ if (this._splitter) {
+ this._splitter.__destroy();
+ this._splitter = null;
+ this._frame = null;
+ }
+
+ this.__container(null);
+ this._parent = null;
+ }
+ });
+
+ return Module;
+
+});
+
+/** @module wcLayout */
+define('wcDocker/layout',[
+ "dcl/dcl",
+ "./types"
+], function (dcl, wcDocker) {
+
+ /**
+ * @class
+ * The base class for all panel layouts. [Panels]{@link wcPanel}, [splitter widgets]{@link wcSplitter}
+ * and [tab widgets]{@link wcTabFrame} contain these to organize their contents.
+ */
+ var Module = dcl(null, {
+ declaredClass: 'wcLayout',
+
+ /**
+ * @memberOf module:wcLayout
+ *
PRIVATE - This should never be constructed directly by the user
+ * @param {external:jQuery~selector|external:jQuery~Object|external:domNode} container - A container element for this layout.
+ * @param {wcLayout|wcSplitter|wcDocker} parent - The layout's parent object.
+ */
+ constructor: function (container, parent) {
+ /**
+ * The outer container element of the panel.
+ *
+ * @member {external:jQuery~Object}
+ */
+ this.$container = $(container);
+ this._parent = parent;
+
+ /**
+ * The table DOM element for the layout.
+ *
+ * @member {external:jQuery~Object}
+ */
+ this.$elem = null;
+
+ this.__init();
+ },
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+// Public Functions
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Adds an item into the layout, appending it to the main element.
+ * @function module:wcLayout#addItem
+ * @param {external:jQuery~selector|external:jQuery~Object|external:domNode} item - A DOM element to add.
+ */
+ addItem: function (item) {
+ // Should be implemented by a sub-class.
+ },
+
+ /**
+ * Clears the contents of the layout and squashes all rows and columns from the grid.
+ * @function module:wcLayout#clear
+ */
+ clear: function () {
+ // Should be implemented by a sub-class.
+ },
+
+ /**
+ * Retrieves the main element.
+ * @function module:wcLayout#scene
+ * @returns {external:jQuery~Object} - The div item that makes this layout scene.
+ */
+ scene: function () {
+ return this.$elem;
+ },
+
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+// Private Functions
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ // Initialize
+ __init: function () {
+ // Should be implemented by a sub-class.
+ },
+
+ // Updates the size of the layout.
+ __update: function () {
+ // Should be implemented by a sub-class.
+ },
+
+ // Checks if the mouse is in a valid anchor position for nesting another widget.
+ // Params:
+ // mouse The current mouse position.
+ // same Whether we are hovering over the same panel that is being moved.
+ // ghost An instance to the ghost object.
+ // canSplit Whether the original panel can be split.
+ // $elem The container element for the target panel.
+ // title Whether the panel has a title bar visible.
+ // isTopper Whether the item being dragged is the top title bar, as apposed to dragging a side or bottom tab/bar.
+ // forceTabOrientation Force a specific tab orientation.
+ // allowEdges Whether to allow edge docking.
+ __checkAnchorDrop: function (mouse, same, ghost, canSplit, $elem, title, isTopper, forceTabOrientation, allowEdges) {
+ var docker = this._parent.docker();
+ var width = $elem.outerWidth();
+ var height = $elem.outerHeight();
+ var offset = $elem.offset();
+ var titleSize = $elem.find('.wcFrameTitleBar').height();
+ if (!title) {
+ titleSize = 0;
+ }
+
+ function __getAnchorSizes(value, w, h) {
+ if (typeof value === 'number' || (typeof value === 'string' && value.indexOf('px', value.length - 2) !== -1)) {
+ // Pixel sizing.
+ value = parseInt(value);
+ return {
+ x: value,
+ y: value
+ };
+ } else if (typeof value === 'string' && value.indexOf('%', value.length - 1) !== -1) {
+ value = parseInt(value) / 100;
+ // Percentage sizing.
+ return {
+ x: w * value,
+ y: h * value
+ };
+ } else {
+ // Invalid value.
+ return {x: 0, y: 0};
+ }
+ }
+
+ var edgeAnchor = __getAnchorSizes(docker._options.edgeAnchorSize, docker.$container.outerWidth(), docker.$container.outerHeight());
+ var panelAnchor = __getAnchorSizes(docker._options.panelAnchorSize, width, height);
+
+ // If the target panel has a title, hovering over it (on all sides) will cause stacking
+ // and also change the orientation of the tabs (if enabled).
+ if (title) {
+ // Top title bar
+ if ((!forceTabOrientation || forceTabOrientation === wcDocker.TAB.TOP) &&
+ mouse.y >= offset.top && mouse.y <= offset.top + titleSize &&
+ mouse.x >= offset.left && mouse.x <= offset.left + width) {
+
+ // Stacking with top orientation.
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top - 2,
+ w: width,
+ h: titleSize - 2,
+ loc: wcDocker.DOCK.STACKED,
+ tab: wcDocker.TAB.TOP,
+ item: this,
+ self: same === wcDocker.TAB.TOP || (isTopper && same)
+ });
+ return true;
+ }
+ // Any other tab orientation is only valid if tab orientation is enabled.
+ else if (docker._canOrientTabs) {
+ // Bottom bar
+ if ((!forceTabOrientation || forceTabOrientation === wcDocker.TAB.BOTTOM) &&
+ mouse.y >= offset.top + height - titleSize && mouse.y <= offset.top + height &&
+ mouse.x >= offset.left && mouse.x <= offset.left + width) {
+
+ // Stacking with bottom orientation.
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top + height - titleSize - 2,
+ w: width,
+ h: titleSize,
+ loc: wcDocker.DOCK.STACKED,
+ tab: wcDocker.TAB.BOTTOM,
+ item: this,
+ self: same === wcDocker.TAB.BOTTOM
+ });
+ return true;
+ }
+ // Left bar
+ else if ((!forceTabOrientation || forceTabOrientation === wcDocker.TAB.LEFT) &&
+ mouse.y >= offset.top && mouse.y <= offset.top + height &&
+ mouse.x >= offset.left && mouse.x <= offset.left + titleSize) {
+
+ // Stacking with bottom orientation.
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top - 2,
+ w: titleSize - 2,
+ h: height,
+ loc: wcDocker.DOCK.STACKED,
+ tab: wcDocker.TAB.LEFT,
+ item: this,
+ self: same === wcDocker.TAB.LEFT
+ });
+ return true;
+ }
+ // Right bar
+ else if ((!forceTabOrientation || forceTabOrientation === wcDocker.TAB.RIGHT) &&
+ mouse.y >= offset.top && mouse.y <= offset.top + height &&
+ mouse.x >= offset.left + width - titleSize && mouse.x <= offset.left + width) {
+
+ // Stacking with bottom orientation.
+ ghost.anchor(mouse, {
+ x: offset.left + width - titleSize - 2,
+ y: offset.top - 2,
+ w: titleSize,
+ h: height,
+ loc: wcDocker.DOCK.STACKED,
+ tab: wcDocker.TAB.RIGHT,
+ item: this,
+ self: same === wcDocker.TAB.RIGHT
+ });
+ return true;
+ }
+ }
+ }
+
+ // Test for edge anchoring.
+ if (allowEdges && ghost._outer && ghost._inner) {
+ var outerWidth = ghost._outer.$container.outerWidth();
+ var outerHeight = ghost._outer.$container.outerHeight();
+ var outerOffset = ghost._outer.$container.offset();
+
+ // Left edge
+ if (mouse.y >= outerOffset.top && mouse.y <= outerOffset.top + outerHeight &&
+ mouse.x >= outerOffset.left + titleSize && mouse.x <= outerOffset.left + titleSize + edgeAnchor.x) {
+ ghost.anchor(mouse, {
+ x: outerOffset.left - 2,
+ y: outerOffset.top - 2,
+ w: outerWidth / 3,
+ h: outerHeight,
+ loc: wcDocker.DOCK.LEFT,
+ item: ghost._inner,
+ self: false
+ });
+ return true;
+ }
+ // Right edge
+ else if (mouse.y >= outerOffset.top && mouse.y <= outerOffset.top + outerHeight &&
+ mouse.x >= outerOffset.left + outerWidth - edgeAnchor.x - titleSize && mouse.x <= outerOffset.left + outerWidth - titleSize) {
+ ghost.anchor(mouse, {
+ x: outerOffset.left + outerWidth - (outerWidth / 3) - 2,
+ y: outerOffset.top - 2,
+ w: outerWidth / 3,
+ h: outerHeight,
+ loc: wcDocker.DOCK.RIGHT,
+ item: ghost._inner,
+ self: false
+ });
+ return true;
+ }
+ // Top edge
+ else if (mouse.y >= outerOffset.top + titleSize && mouse.y <= outerOffset.top + titleSize + edgeAnchor.y &&
+ mouse.x >= outerOffset.left && mouse.x <= outerOffset.left + outerWidth) {
+ ghost.anchor(mouse, {
+ x: outerOffset.left - 2,
+ y: outerOffset.top - 2,
+ w: outerWidth,
+ h: outerHeight / 3,
+ loc: wcDocker.DOCK.TOP,
+ item: ghost._inner,
+ self: false
+ });
+ return true;
+ }
+ // Bottom edge
+ else if (mouse.y >= outerOffset.top + outerHeight - titleSize - edgeAnchor.y && mouse.y <= outerOffset.top + outerHeight - titleSize &&
+ mouse.x >= outerOffset.left && mouse.x <= outerOffset.left + outerWidth) {
+ ghost.anchor(mouse, {
+ x: outerOffset.left - 2,
+ y: outerOffset.top + outerHeight - (outerHeight / 3) - 2,
+ w: outerWidth,
+ h: outerHeight / 3,
+ loc: wcDocker.DOCK.BOTTOM,
+ item: ghost._inner,
+ self: false
+ });
+ return true;
+ }
+ }
+
+ if (!canSplit) {
+ return false;
+ }
+
+ // Check for placeholder.
+ if (this._parent && this._parent.instanceOf('wcPanel') && this._parent._isPlaceholder) {
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top - 2,
+ w: width,
+ h: height,
+ loc: wcDocker.DOCK.TOP,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+
+ if (width < height) {
+ // Top docking.
+ if (mouse.y >= offset.top && mouse.y <= offset.top + titleSize + panelAnchor.y &&
+ mouse.x >= offset.left && mouse.x <= offset.left + width) {
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top - 2,
+ w: width,
+ h: height * 0.5,
+ loc: wcDocker.DOCK.TOP,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+
+ // Bottom side docking.
+ if (mouse.y >= offset.top + height - panelAnchor.y - titleSize && mouse.y <= offset.top + height &&
+ mouse.x >= offset.left && mouse.x <= offset.left + width) {
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top + (height - height * 0.5) - 2,
+ w: width,
+ h: height * 0.5,
+ loc: wcDocker.DOCK.BOTTOM,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+ }
+
+ // Left side docking
+ if (mouse.y >= offset.top && mouse.y <= offset.top + height) {
+ if (mouse.x >= offset.left && mouse.x <= offset.left + panelAnchor.x + titleSize) {
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top - 2,
+ w: width * 0.5,
+ h: height,
+ loc: wcDocker.DOCK.LEFT,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+
+ // Right side docking
+ if (mouse.x >= offset.left + width - panelAnchor.x - titleSize && mouse.x <= offset.left + width) {
+ ghost.anchor(mouse, {
+ x: offset.left + width * 0.5 - 2,
+ y: offset.top - 2,
+ w: width * 0.5,
+ h: height,
+ loc: wcDocker.DOCK.RIGHT,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+ }
+
+ if (width >= height) {
+ // Top docking.
+ if (mouse.y >= offset.top && mouse.y <= offset.top + panelAnchor.y + titleSize &&
+ mouse.x >= offset.left && mouse.x <= offset.left + width) {
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top - 2,
+ w: width,
+ h: height * 0.5,
+ loc: wcDocker.DOCK.TOP,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+
+ // Bottom side docking.
+ if (mouse.y >= offset.top + height - panelAnchor.y - titleSize && mouse.y <= offset.top + height &&
+ mouse.x >= offset.left && mouse.x <= offset.left + width) {
+ ghost.anchor(mouse, {
+ x: offset.left - 2,
+ y: offset.top + (height - height * 0.5) - 2,
+ w: width,
+ h: height * 0.5,
+ loc: wcDocker.DOCK.BOTTOM,
+ item: this,
+ self: false
+ });
+ return true;
+ }
+ }
+ return false;
+ },
+
+ // Gets, or Sets a new container for this layout.
+ // Params:
+ // $container If supplied, sets a new container for this layout.
+ // Returns:
+ // JQuery collection The current container.
+ __container: function ($container) {
+ if (typeof $container === 'undefined') {
+ return this.$container;
+ }
+
+ this.$container = $container;
+ if (this.$container) {
+ this.$container.append(this.$elem);
+ } else {
+ this.$elem.remove();
+ }
+ return this.$container;
+ },
+
+ // Destroys the layout.
+ __destroy: function () {
+ this.__container(null);
+ this._parent = null;
+ this.clear();
+
+ this.$elem.remove();
+ this.$elem = null;
+ }
+ });
+
+ return Module;
+});
+
+
+/** @module wcLayoutSimple */
+define('wcDocker/layoutsimple',[
+ "dcl/dcl",
+ "./types",
+ "./layout"
+], function (dcl, wcDocker, wcLayout) {
+
+ /**
+ * @class
+ * A simple layout for containing elements in a panel. [Panels]{@link wcPanel}, [splitter widgets]{@link wcSplitter}
+ * and [tab widgets]{@link wcTabFrame} can optionally contain these instead of the default {@link wcLayoutTable}.
+ */
+ var Module = dcl(wcLayout, {
+ declaredClass: 'wcLayoutSimple',
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+// Public Functions
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Adds an item into the layout, appending it to the main element.
+ * @function module:wcLayoutSimple#addItem
+ * @param {external:jQuery~selector|external:jQuery~Object|external:domNode} item - A DOM element to add.
+ */
+ addItem: function (item) {
+ this.$elem.append(item);
+ },
+
+ /**
+ * Clears the contents of the layout and squashes all rows and columns from the grid.
+ * @function module:wcLayoutSimple#clear
+ */
+ clear: function () {
+ this.$elem.remove();
+ this.$elem = null;
+ this.__init();
+ },
+
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+// Private Functions
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ // Initialize
+ __init: function () {
+ this.$elem = $('
');
+ this.__container(this.$container);
+ },
+
+ // Updates the size of the layout.
+ __update: function () {
+ },
+ });
+
+ return Module;
+});
+
+
+/** @module wcLayoutTable */
+define('wcDocker/layouttable',[
+ "dcl/dcl",
+ "./types",
+ "./layout"
+], function (dcl, wcDocker, wcLayout) {
+
+ /**
+ * @class module:wcLayoutTable
+ * A gridded layout for arranging elements. [Panels]{@link wcPanel}, [splitter widgets]{@link wcSplitter}
+ * and [tab widgets]{@link wcTabFrame} contain these by default to handle their contents.
+ */
+ var Module = dcl(wcLayout, {
+ declaredClass: 'wcLayoutTable',
+
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+ // Public Functions
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Adds an item into the layout, expanding the grid size if necessary.
+ * @function module:wcLayoutTable#addItem
+ * @param {external:jQuery~selector|external:jQuery~Object|external:domNode} item - A DOM element to add.
+ * @param {Number} [x=0] - The horizontal grid position to place the element.
+ * @param {Number} [y=0] - The vertical grid position to place the element.
+ * @param {Number} [w=1] - The number of horizontal cells this item will take within the grid.
+ * @param {Number} [h=1] - The number of vertical cells this item will take within the grid.
+ * @returns {module:wcLayoutTable~tableItem|Boolean} The table data element of the cell that contains the item, or false if there was a problem.
+ */
+ addItem: function (item, x, y, w, h) {
+ if (typeof x === 'undefined' || x < 0) {
+ x = 0;
+ }
+ if (typeof y === 'undefined' || y < 0) {
+ y = 0;
+ }
+ if (typeof w === 'undefined' || w <= 0) {
+ w = 1;
+ }
+ if (typeof h === 'undefined' || h <= 0) {
+ h = 1;
+ }
+
+ this.__resizeGrid(x + w - 1, y + h - 1);
+ if (w > 1 || h > 1) {
+ if (!this.__mergeGrid(x, y, w, h)) {
+ return false;
+ }
+ }
+
+ this._grid[y][x].$el.append($(item));
+ return this.item(x, y);
+ },
+
+ /**
+ * Retrieves the table item at a given grid position, if it exists.
+ * Note, if an item spans multiple cells, only the top-left most
+ * cell will actually contain the table item.
+ * @function module:wcLayoutTable#item
+ * @param {Number} x - The horizontal grid position.
+ * @param {Number} y - The vertical grid position.
+ * @returns {module:wcLayoutTable~tableItem|Boolean} - The table item, or false if none was found.
+ */
+ item: function (x, y) {
+ if (y >= this._grid.length) {
+ return false;
+ }
+
+ if (x >= this._grid[y].length) {
+ return false;
+ }
+
+ // Some cells are a merging of multiple cells. If this cell is
+ // part of a merge for another cell, use that cell instead.
+ // if (this._grid[y][x].x < 0 || this._grid[y][x].y < 0) {
+ // var grid = this._grid[y][x];
+ // x -= grid.x;
+ // y -= grid.y;
+ // }
+
+ var self = this;
+ /**
+ * The table item is an object that represents one cell in the layout table, it contains
+ * convenient methods for cell alteration and supports chaining. Its purpose is
+ * to remove the need to alter <tr> and <td> elements of the table directly.
+ * @version 3.0.0
+ * @example myPanel.addItem(domNode).css('text-align', 'right').css('border', '1px solid black').stretch('100%', '100%');
+ * @typedef module:wcLayoutTable#tableItem
+ * @property {jQuery~Object} $ - If you truely need the table cell [jQuery object]{@link jQuery~Object}, here it is.
+ * @property {module:wcLayoutTable~tableItem_css} css - Wrapper to alter [jQuery's css]{@link http://api.jquery.com/css/} function.
+ * @property {module:wcLayoutTable~tableItem_stretch} stretch - More reliable method for setting the table item width/height values.
+ */
+ var myItem = {
+ $: self._grid[y][x].$el,
+
+ /**
+ *
This function is found in {@link module:wcLayoutTable~tableItem}.
+ * A wrapper for [jQuery's css]{@link http://api.jquery.com/css/} function.
+ *
Note: It is recommended that you use [stretch]{@link wcLayoutTable~stretch} if you intend to alter width or height styles.
+ * @version 3.0.0
+ * @function module:wcLayoutTable#tableItem_css
+ * @param {String} style - The style attribute to alter.
+ * @param {String} [value] - The value of the attribute. If omitted, the current value of the attribute is returned instead of the [tableItem]{@link module:wcLayoutTable~tableItem} instance.
+ * @returns {module:wcLayoutTable~tableItem|String} - Self, for chaining, unless the value parameter was omitted.
+ */
+ css: function (style, value) {
+ if (self._grid[y][x].$el) {
+ if (value === undefined) {
+ return self._grid[y][x].$el.css(style);
+ }
+
+ self._grid[y][x].$el.css(style, value);
+ }
+ return myItem;
+ },
+
+ /**
+ *
This function is found in {@link module:wcLayoutTable~tableItem}.
+ * Sets the stretch amount for the current table item. This is more reliable than
+ * assigning width and height style attributes directly on the table item.
+ * @version 3.0.0
+ * @function module:wcLayoutTable#tableItem_stretch
+ * @param {Number|String} [sx] - The horizontal stretch for this grid. Use empty string to clear current value. Can be a pixel position, or a string with a 'px' or '%' suffix.
+ * @param {Number|String} [sy] - The vertical stretch for this grid. Use empty string to clear current value. Can be a pixel position, or a string with a 'px' or '%' suffix.
+ * @returns {module:wcLayoutTable~tableItem} - Self, for chaining.
+ */
+ stretch: function (width, height) {
+ self.itemStretch(x, y, width, height);
+ return myItem;
+ }
+ };
+ return myItem;
+ },
+
+ /**
+ * Sets the stretch amount for a given table item. This is more reliable than
+ * assigning width and height style attributes directly on the table item.
+ * @version 3.0.0
+ * @function module:wcLayoutTable#itemStretch
+ * @param {Number} x - The horizontal grid position.
+ * @param {Number} y - The vertical grid position.
+ * @param {Number|String} [sx] - The horizontal stretch for this grid. Use empty string to clear current value. Can be a pixel position, or a string with a 'px' or '%' suffix.
+ * @param {Number|String} [sy] - The vertical stretch for this grid. Use empty string to clear current value. Can be a pixel position, or a string with a 'px' or '%' suffix.
+ * @returns {Boolean} - Success or failure. A failure generally means your grid position was a merged grid cell.
+ */
+ itemStretch: function (x, y, sx, sy) {
+ var wasBatched = this._batchProcess;
+
+ this._batchProcess = true;
+ this.__resizeGrid(x, y);
+
+ var grid = this._grid[y][x];
+ if (grid.x < 0 || grid.y < 0) {
+ return false;
+ }
+
+ if (sx !== undefined) {
+ grid.sx = sx;
+ }
+ if (sy !== undefined) {
+ grid.sy = sy;
+ }
+
+ this._batchProcess = wasBatched;
+ if (!wasBatched) {
+ this.__resizeGrid(0, 0);
+ }
+
+ return true;
+ },
+
+ /**
+ * Clears the contents of the layout and squashes all rows and columns from the grid.
+ * @function module:wcLayoutTable#clear
+ */
+ clear: function () {
+ var showGrid = this.showGrid();
+ var spacing = this.gridSpacing();
+ var alternate = this.gridAlternate();
+
+ this.$elem.remove();
+ this.__init();
+
+ this.showGrid(showGrid);
+ this.gridSpacing(spacing);
+ this.gridAlternate(alternate);
+
+ this._grid = [];
+ },
+
+ /**
+ * Begins a batch operation. Basically it refrains from constructing
+ * the layout grid, which causes a reflow, on each item added. Instead,
+ * The grid is only generated at the end once [wcLayoutTable.finishBatch]{@link wcLayoutTable#finishBatch} is called.
+ * @function module:wcLayoutTable#startBatch
+ */
+ startBatch: function () {
+ this._batchProcess = true;
+ },
+
+ /**
+ * Ends a batch operation.
+ * @See module:wcLayoutTable#startBatch
+ * @function module:wcLayoutTable#finishBatch
+ */
+ finishBatch: function () {
+ this._batchProcess = false;
+ this.__resizeGrid(0, 0);
+ },
+
+ /**
+ * Gets, or Sets whether the layout grid cells should draw an outline.
+ * @function module:wcLayoutTable#showGrid
+ * @param {Boolean} [enabled] - If supplied, will set the grid cell border visibility.
+ * @returns {Boolean} - The current visibility state of the grid cells.
+ */
+ showGrid: function (enabled) {
+ if (typeof enabled !== 'undefined') {
+ this.$elem.toggleClass('wcLayoutGrid', enabled);
+ }
+
+ return this.$elem.hasClass('wcLayoutGrid');
+ },
+
+ /**
+ * Gets, or Sets the spacing between cell borders.
+ * @function module:wcLayoutTable#gridSpacing
+ * @param {Number} [size] - If supplied, sets the pixel size of the spacing between cells.
+ * @returns {Number} - The current cell spacing in pixels.
+ */
+ gridSpacing: function (size) {
+ if (typeof size !== 'undefined') {
+ this.$elem.css('border-spacing', size + 'px');
+ }
+
+ return parseInt(this.$elem.css('border-spacing'));
+ },
+
+ /**
+ * Gets, or Sets whether the table rows alternate in color based on the theme.
+ * @function module:wcLayoutTable#gridAlternate
+ * @params {Boolean} [enabled] - If supplied, will set whether the grid alternates in color.
+ * @returns {Boolean} - Whether the grid alternates in color.
+ */
+ gridAlternate: function (enabled) {
+ if (typeof enabled !== 'undefined') {
+ this.$elem.toggleClass('wcLayoutGridAlternate', enabled);
+ }
+
+ return this.$elem.hasClass('wcLayoutGridAlternate');
+ },
+
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+// Private Functions
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ // Initialize
+ __init: function () {
+ this.$elem = $('
');
+ this.$elem.append($('
'));
+ this._grid = [];
+ this.__container(this.$container);
+ },
+
+ // Updates the size of the layout.
+ __update: function () {
+ },
+
+ // Resizes the grid to fit a given position.
+ // Params:
+ // width The width to expand to.
+ // height The height to expand to.
+ __resizeGrid: function (width, height) {
+ for (var y = 0; y <= height; ++y) {
+ if (this._grid.length <= y) {
+ var row = [];
+ row.$row = $('
');
+ this._grid.push(row);
+ }
+
+ for (var x = 0; x <= width; ++x) {
+ if (this._grid[y].length <= x) {
+ this._grid[y].push({
+ $el: $('| '),
+ x: 0,
+ y: 0,
+ sx: '',
+ sy: ''
+ });
+ }
+ }
+ }
+
+ if (!this._batchProcess) {
+ var $oldBody = this.$elem.find('tbody');
+ $('.wcDockerTransition').append($oldBody);
+
+ var $newBody = $(' |
');
+ for (var y = 0; y < this._grid.length; ++y) {
+ var $row = null;
+
+ for (var x = 0; x < this._grid[y].length; ++x) {
+ var item = this._grid[y][x];
+ if (item.$el) {
+ if (!$row) {
+ $row = this._grid[y].$row;
+ $newBody.append($row);
+ }
+
+ item.$el.css('width', item.sx);
+ item.$el.css('height', item.sy);
+ $row.append(item.$el);
+ }
+ }
+ }
+
+ this.$elem.append($newBody);
+ $oldBody.remove();
+ }
+ },
+
+ // Merges cells in the layout.
+ // Params:
+ // x, y Cell position to begin merge.
+ // w, h The width and height to merge.
+ // Returns:
+ // true Cells were merged succesfully.
+ // false Merge failed, either because the grid position was out of bounds
+ // or some of the cells were already merged.
+ __mergeGrid: function (x, y, w, h) {
+ // Make sure each cell to be merged is not already merged somewhere else.
+ for (var yy = 0; yy < h; ++yy) {
+ for (var xx = 0; xx < w; ++xx) {
+ var item = this._grid[y + yy][x + xx];
+ if (!item.$el || item.x !== 0 || item.y !== 0) {
+ return false;
+ }
+ }
+ }
+
+ // Now merge the cells here.
+ var item = this._grid[y][x];
+ if (w > 1) {
+ item.$el.attr('colspan', '' + w);
+ item.x = w - 1;
+ }
+ if (h > 1) {
+ item.$el.attr('rowspan', '' + h);
+ item.y = h - 1;
+ }
+
+ for (var yy = 0; yy < h; ++yy) {
+ for (var xx = 0; xx < w; ++xx) {
+ if (yy !== 0 || xx !== 0) {
+ var item = this._grid[y + yy][x + xx];
+ item.$el.remove();
+ item.$el = null;
+ item.x = -xx;
+ item.y = -yy;
+ }
+ }
+ }
+ return true;
+ },
+ });
+
+ return Module;
+});
+
+/** @module wcTabFrame */
+define('wcDocker/tabframe',[
+ "dcl/dcl",
+ "./types",
+ "./base"
+], function (dcl, wcDocker, base) {
+
+ /**
+ * @class
+ * A tab widget container, usable inside a panel to break up multiple elements into separate tabbed pages.
+ */
+ var Module = dcl(base, {
+ declaredClass: 'wcTabFrame',
+
+ LEFT_TAB_BUFFER: 15,
+
+ /**
+ * @memberOf module:wcTabFrame
+ * @param {external:jQuery~selector|external:jQuery~Object|external:domNode} container - A container element for this layout.
+ * @param {module:wcPanel} parent - The parent panel object for this widget.
+ */
+ constructor: function(container, parent) {
+ /**
+ * The outer container element of the widget.
+ * @member {external:jQuery~Object}
+ */
+ this.$container = $(container);
+ this._parent = parent;
+
+ this.$frame = null;
+ this.$tabBar = null;
+ this.$tabScroll = null;
+ this.$center = null;
+ this.$tabLeft = null;
+ this.$tabRight = null;
+ this.$close = null;
+
+ this._tabOrientation = wcDocker.TAB.TOP;
+ this._canScrollTabs = false;
+ this._tabScrollPos = 0;
+ this._curTab = -1;
+ this._layoutList = [];
+ this._moveable = true;
+
+ this._boundEvents = [];
+
+ this.__init();
+ },
+
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+ // Public Functions
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ /**
+ * Manually update the contents of this tab frame.
+ * @function module:wcTabFrame#update
+ */
+ update: function () {
+ var scrollTop = this.$center.scrollTop();
+ this.__updateTabs();
+ this.$center.scrollTop(scrollTop);
+ },
+
+ /**
+ * Destroys the widget.
+ * @function module:wcTabFrame#destroy
+ */
+ destroy: function () {
+ this.__destroy();
+ },
+
+ /**
+ * Gets the total number of tabs in this frame.
+ * @version 3.0.0
+ * @function module:wcTabFrame#tabCount
+ * @returns {Number}
+ */
+ tabCount: function () {
+ return this._layoutList.length;
+ },
+
+ /**
+ * Gets, or Sets the tab orientation for the frame. This puts the tabbed widgets visually on any side of the tab frame.
+ * @version 3.0.0
+ * @function module:wcTabFrame#tabOrientation
+ * @param {module:wcDocker.TAB} [orientation] - Assigns the orientation of the tab items displayed.
+ * @returns {module:wcDocker.TAB} - The current orientation.
+ */
+ tabOrientation: function (orientation) {
+ if (orientation !== undefined) {
+ if (this._tabOrientation !== orientation && this.docker()._canOrientTabs) {
+ this._tabOrientation = orientation;
+
+ this.__updateTabs();
+ this.__updateTabs();
+ }
+ }
+
+ return this._tabOrientation
+ },
+
+ /**
+ * Adds a new tabbed page into the widget.
+ * @function module:wcTabFrame#addTab
+ * @param {String} name - The name of the new tab page.
+ * @param {Number} [index] - If supplied and above -1, will insert the new tab page at the given tab index, otherwise the new tab is appended to the end.
+ * @param {module:wcDocker.LAYOUT} [layout] - If supplied, will set the type of layout to use for this tab.
+ * @returns {module:wcLayoutSimple|wcLayoutTable} - The layout of the newly created tab page.
+ */
+ addTab: function (name, index, layout) {
+ var layoutClass = layout || 'wcLayoutTable';
+ var newLayout = new (this.docker().__getClass(layoutClass))('.wcDockerTransition', this._parent);
+ newLayout.name = name;
+ newLayout._scrollable = {
+ x: true,
+ y: true
+ };
+ newLayout._scroll = {
+ x: 0,
+ y: 0
+ };
+ newLayout._closeable = false;
+ newLayout._overflowVisible = false;
+
+ if (typeof index === 'undefined' || index <= -1) {
+ this._layoutList.push(newLayout);
+ } else {
+ this._layoutList.splice(index, 0, newLayout);
+ }
+
+ if (this._curTab === -1 && this._layoutList.length) {
+ this._curTab = 0;
+ }
+
+ this.__updateTabs();
+
+ return newLayout;
+ },
+
+ /**
+ * Removes a tab page from the widget.
+ * @function module:wcTabFrame#removeTab
+ * @param {Number} index - The tab page index to remove.
+ * @returns {Boolean} - Success or failure.
+ */
+ removeTab: function (index) {
+ if (index > -1 && index < this._layoutList.length) {
+ var name = this._layoutList[index].name;
+ this._layoutList[index].__destroy();
+ this._layoutList.splice(index, 1);
+
+ if (this._curTab >= index) {
+ this._curTab--;
+
+ if (this._curTab < 0) {
+ this._curTab = 0;
+ }
+ }
+
+ this.__updateTabs();
+ this._parent.__trigger(wcDocker.EVENT.CUSTOM_TAB_CLOSED, {obj: this, name: name, index: index});
+ return true;
+ }
+ return false;
+ },
+
+ /**
+ * Gets, or Sets the currently visible tab page.
+ * @function module:wcTabFrame#tab
+ * @param {Number} [index] - If supplied, sets the current tab page index.
+ * @param {Boolean} [scrollTo] - If true, will auto scroll the tab bar until the selected tab is visible.
+ * @returns {Number} - The index of the currently visible tab page.
+ */
+ tab: function (index, scrollTo) {
+ if (typeof index !== 'undefined') {
+ if (index > -1 && index < this._layoutList.length) {
+ this.$tabBar.find('> .wcTabScroller > .wcPanelTab[id="' + this._curTab + '"]').removeClass('wcPanelTabActive');
+ this.$center.children('.wcPanelTabContent[id="' + this._curTab + '"]').addClass('wcPanelTabContentHidden');
+ this._curTab = index;
+ this.$tabBar.find('> .wcTabScroller > .wcPanelTab[id="' + index + '"]').addClass('wcPanelTabActive');
+ this.$center.children('.wcPanelTabContent[id="' + index + '"]').removeClass('wcPanelTabContentHidden');
+ this.__updateTabs(scrollTo);
+
+ var name = this._layoutList[this._curTab].name;
+ this._parent.__trigger(wcDocker.EVENT.CUSTOM_TAB_CHANGED, {obj: this, name: name, index: index});
+ }
+ }
+
+ return this._curTab;
+ },
+
+ /**
+ * Retrieves the layout for a given tab page.
+ * @function module:wcTabFrame#layout
+ * @param {Number} index - The tab page index to retrieve.
+ * @returns {module:wcLayoutSimple|wcLayoutTable|Boolean} - The layout of the found tab page, or false.
+ */
+ layout: function (index) {
+ if (index > -1 && index < this._layoutList.length) {
+ return this._layoutList[index];
+ }
+ return false;
+ },
+
+ /**
+ * Moves a tab page from a given index to another index.
+ * @function module:wcTabFrame#moveTab
+ * @param {Number} fromIndex - The current tab page index to move from.
+ * @param {Number} toIndex - The new tab page index to move to.
+ * @returns {external:jQuery~Object} - The new element of the moved tab, or false if an error occurred.
+ */
+ moveTab: function (fromIndex, toIndex) {
+ if (fromIndex >= 0 && fromIndex < this._layoutList.length &&
+ toIndex >= 0 && toIndex < this._layoutList.length) {
+ var panel = this._layoutList.splice(fromIndex, 1);
+ this._layoutList.splice(toIndex, 0, panel[0]);
+
+ // Preserve the currently active tab.
+ if (this._curTab === fromIndex) {
+ this._curTab = toIndex;
+ }
+
+ this.__updateTabs();
+
+ return this.$tabBar.find('> .wcTabScroller > .wcPanelTab[id="' + toIndex + '"]')[0];
+ }
+ return false;
+ },
+
+ /**
+ * Gets, or Sets whether the tabs can be reordered by the user.
+ * @function module:wcTabFrame#moveable
+ * @param {Boolean} [moveable] - If supplied, assigns whether tab pages can be reordered.
+ * @returns {Boolean} - Whether tab pages are currently moveable.
+ */
+ moveable: function (moveable) {
+ if (typeof moveable !== 'undefined') {
+ this._moveable = moveable;
+ }
+ return this._moveable;
+ },
+
+ /**
+ * Gets, or Sets whether a tab can be closed (removed) by the user.
+ * @function module:wcTabFrame#closeable
+ * @param {Number} index - The index of the tab page.
+ * @param {Boolean} [closeable] - If supplied, assigns whether the tab page can be closed.
+ * @returns {Boolean} - Whether the tab page can be closed.
+ */
+ closeable: function (index, closeable) {
+ if (index > -1 && index < this._layoutList.length) {
+ var layout = this._layoutList[index];
+
+ if (typeof closeable !== 'undefined') {
+ layout._closeable = closeable;
+ }
+
+ return layout._closeable;
+ }
+ return false;
+ },
+
+ /**
+ * Gets, or Sets whether a tab page area is scrollable.
+ * @function module:wcTabFrame#scrollable
+ * @param {Number} index - The index of the tab page.
+ * @param {Boolean} [x] - If supplied, assigns whether the tab page is scrollable in the horizontal direction.
+ * @param {Boolean} [y] - If supplied, assigns whether the tab page is scrollable in the vertical direction.
+ * @returns {module:wcDocker~Scrollable} - The current scrollable status of the tab page.
+ */
+ scrollable: function (index, x, y) {
+ if (index > -1 && index < this._layoutList.length) {
+ var layout = this._layoutList[index];
+
+ var changed = false;
+ if (typeof x !== 'undefined') {
+ layout._scrollable.x = x;
+ changed = true;
+ }
+ if (typeof y !== 'undefined') {
+ layout._scrollable.y = y;
+ changed = true;
+ }
+
+ if (changed) {
+ this.__onTabChange();
+ }
+
+ return {
+ x: layout._scrollable.x,
+ y: layout._scrollable.y
+ };
+ }
+ return false;
+ },
+
+ /**
+ * Gets, or Sets whether overflow on a tab area is visible.
+ * Use this if a child element within this panel is intended to 'popup' and be visible outside of its parent area.
+ * @function module:wcTabFrame#overflowVisible
+ * @param {Number} index - The index of the tab page.
+ * @param {Boolean} [visible] - If supplied, assigns whether overflow is visible.
+ * @returns {Boolean} - The current overflow visiblity status of the tab page.
+ */
+ overflowVisible: function (index, visible) {
+ if (index > -1 && index < this._layoutList.length) {
+ var layout = this._layoutList[index];
+
+ if (typeof overflow !== 'undefined') {
+ layout._overflowVisible = overflow;
+ this.__onTabChange();
+ }
+ return layout._overflowVisible;
+ }
+ return false;
+ },
+
+ /**
+ * Gets, or Sets whether the tab frame should fit to its contents.
+ * @version 3.0.0
+ * @function module:wcTabFrame#fitContents
+ * @param {Number} index - The index of the tab page.
+ * @param {Boolean} [x] - If supplied, assigns whether the tab page is scrollable in the horizontal direction.
+ * @param {Boolean} [y] - If supplied, assigns whether the tab page is scrollable in the vertical direction.
+ * @returns {module:wcDocker~FitContents} - The current scrollable status of the tab page.
+ */
+ fitContents: function (index, x, y) {
+ if (index > -1 && index < this._layoutList.length) {
+ var layout = this._layoutList[index];
+
+ if (!layout.hasOwnProperty('_fitContents')) {
+ layout._fitContents = {
+ x: false,
+ y: false
+ };
+ }
+
+ var changed = false;
+ if (typeof x !== 'undefined') {
+ layout._fitContents.x = x;
+ changed = true;
+ }
+ if (typeof y !== 'undefined') {
+ layout._fitContents.y = y;
+ changed = true;
+ }
+
+ if (changed) {
+ this.__onTabChange();
+ }
+
+ return {
+ x: layout._fitContents.x,
+ y: layout._fitContents.y
+ };
+ }
+ return false;
+ },
+
+ /**
+ * Sets the icon for a tab item.
+ * @function module:wcTabFrame#icon
+ * @param {Number} index - The index of the tab item.
+ * @param {String} icon - A CSS class name that represents the icon.
+ */
+ icon: function (index, icon) {
+ if (index > -1 && index < this._layoutList.length) {
+ var layout = this._layoutList[index];
+
+ if (!layout.$icon) {
+ layout.$icon = $('');
+ }
+
+ layout.$icon.removeClass();
+ layout.$icon.addClass('wcTabIcon ' + icon);
+ }
+ },
+
+ /**
+ * Sets the icon for a tab item using the [Font-Awesome]{@link http://fortawesome.github.io/Font-Awesome/} library.
+ * @function module:wcTabFrame#faicon
+ * @param {Number} index - The index of the tab item.
+ * @param {String} icon - A [Font-Awesome]{@link http://fortawesome.github.io/Font-Awesome/} icon name (without the 'fa fa-' prefix).
+ */
+ faicon: function (index, icon) {
+ if (index > -1 && index < this._layoutList.length) {
+ var layout = this._layoutList[index];
+
+ if (!layout.$icon) {
+ layout.$icon = $('
');
+ }
+
+ layout.$icon.removeClass();
+ layout.$icon.addClass('fa fa-fw fa-' + icon);
+ }
+ },
+
+
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+// Private Functions
+///////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ // Initialize
+ __init: function () {
+ this.$frame = $('
');
+ this.$tabBar = $('
');
+ this.$tabScroll = $('