drawio/war/shapes/mockup/mxMockupContainers.js

/**
 * $Id: mxMockupContainers.js,v 1.10 2013/07/09 11:19:51 mate Exp $
 * Copyright (c) 2006-2010, JGraph Ltd
 */

//**********************************************************************************************************************************************************
//Video Player
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupVideoPlayer(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
	this.barPos = 20;
	this.barHeight = 30;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupVideoPlayer, mxShape);

mxShapeMockupVideoPlayer.prototype.cst = {
		FILL_COLOR2 : 'fillColor2',
		TEXT_COLOR : 'textColor',
		STROKE_COLOR2 : 'strokeColor2',
		STROKE_COLOR3 : 'strokeColor3',
		SHAPE_VIDEO_PLAYER : 'mxgraph.mockup.containers.videoPlayer',
		BAR_POS : 'barPos',
		BAR_HEIGHT : 'barHeight'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupVideoPlayer.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var buttonColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.FILL_COLOR2, '#c4c4c4');
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var filledColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.STROKE_COLOR2, '#008cff');
	var emptyColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.STROKE_COLOR3, '#c4c4c4');
	var barHeight = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.BAR_HEIGHT, '30');

	w = Math.max(w, 5 * barHeight);
	h = Math.max(h, barHeight + 10);

	c.translate(x, y);
	this.background(c, x, y, w, h, bgColor, frameColor);
	c.setShadow(false);
	this.otherShapes(c, x, y, w, h, buttonColor, frameColor, filledColor, emptyColor, barHeight);
};

mxShapeMockupVideoPlayer.prototype.background = function(c, x, y, w, h, bgColor, frameColor)
{
	c.setFillColor(bgColor);
	c.setStrokeColor(frameColor);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();	
	c.fillAndStroke();
};

mxShapeMockupVideoPlayer.prototype.otherShapes = function(c, x, y, w, h, buttonColor, frameColor, filledColor, emptyColor, barHeight)
{
	var barPos = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.BAR_POS, '20');
	barPos = Math.max(0, barPos);
	barPos = Math.min(100, barPos);

	var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');
	var buttonR = 8;
	var barY = h - barHeight;

	var barMin = buttonR;
	var barMax = w - buttonR;
	var barRange = barMax - barMin;
	var realBarPos = barRange * barPos / 100;
	var barEnd = barMin + realBarPos;

	//progress bar
	c.setStrokeColor(filledColor);
	c.begin();
	c.moveTo(0, barY);
	c.lineTo(barEnd, barY);
	c.stroke();
	c.setStrokeColor(emptyColor);
	c.begin();
	c.moveTo(barEnd, barY);
	c.lineTo(w, barY);
	c.stroke();

	//progress bar button
	c.setStrokeColor(frameColor);
	c.begin();
	c.ellipse(barEnd - buttonR, barY - buttonR, 2 * buttonR, 2 * buttonR);
	c.fillAndStroke();

	c.begin();
	c.setStrokeWidth(strokeWidth / 2);
	c.ellipse(barEnd - buttonR * 0.5, barY - buttonR * 0.5, buttonR, buttonR);
	c.fillAndStroke();
	c.setStrokeWidth(strokeWidth);

	var iconSize = barHeight * 0.3;
	var iconY = h - (barHeight + iconSize) * 0.5;
	var iconX = barHeight * 0.3;
	c.setFillColor(buttonColor);
	c.setStrokeColor(buttonColor);

	//play icon
	c.begin();
	c.moveTo(iconX, iconY);
	c.lineTo(iconX + iconSize, iconY + iconSize * 0.5);
	c.lineTo(iconX, iconY + iconSize);
	c.close();
	c.fillAndStroke();

	//volume icon
	var speakerX = barHeight;
	var speakerY = h - barHeight;
	c.moveTo(speakerX + barHeight * 0.05, speakerY + barHeight * 0.4);
	c.lineTo(speakerX + barHeight * 0.15, speakerY + barHeight * 0.4);
	c.lineTo(speakerX + barHeight * 0.3, speakerY + barHeight * 0.25);
	c.lineTo(speakerX + barHeight * 0.3, speakerY + barHeight * 0.75);
	c.lineTo(speakerX + barHeight * 0.15, speakerY + barHeight * 0.6);
	c.lineTo(speakerX + barHeight * 0.05, speakerY + barHeight * 0.6);
	c.close();
	c.fillAndStroke();

	c.begin();
	c.moveTo(speakerX + barHeight * 0.4, speakerY + barHeight * 0.35);
	c.arcTo(barHeight * 0.2, barHeight * 0.3, 0, 0, 1, speakerX + barHeight * 0.4, speakerY + barHeight * 0.65);
	c.moveTo(speakerX + barHeight * 0.425, speakerY + barHeight * 0.25);
	c.arcTo(barHeight * 0.225, barHeight * 0.35, 0, 0, 1, speakerX + barHeight * 0.425, speakerY + barHeight * 0.75);
	c.stroke();

	//fullscreen button
	var screenX = w - barHeight * 1.3;
	c.begin();
	c.moveTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.4);
	c.lineTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.3);
	c.lineTo(screenX + barHeight * 0.25, speakerY + barHeight * 0.3);

	c.moveTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.6);
	c.lineTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.7);
	c.lineTo(screenX + barHeight * 0.25, speakerY + barHeight * 0.7);

	c.moveTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.4);
	c.lineTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.3);
	c.lineTo(screenX + barHeight * 0.75, speakerY + barHeight * 0.3);

	c.moveTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.6);
	c.lineTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.7);
	c.lineTo(screenX + barHeight * 0.75, speakerY + barHeight * 0.7);
	c.stroke();

	var textColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.TEXT_COLOR, '#666666');
	c.begin();
	c.setFontSize(barHeight * 0.5);
	c.setFontColor(textColor);
	c.text(barHeight * 1.9, h - barHeight * 0.45, 0, 0, '0:00/3:53', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupVideoPlayer.prototype.cst.SHAPE_VIDEO_PLAYER] = mxShapeMockupVideoPlayer;

Graph.handleFactory[mxShapeMockupVideoPlayer.prototype.cst.SHAPE_VIDEO_PLAYER] = function(state)
{
	var handles = [Graph.createHandle(state, ['barPos'], function(bounds)
			{
				var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));

				var barH = parseFloat(mxUtils.getValue(this.state.style, 'barHeight', this.barHeight));

				return new mxPoint(bounds.x + ((bounds.width - 16) * barPos / bounds.width) / 100 * bounds.width + 8, bounds.y + bounds.height - barH - 20);
			}, function(bounds, pt)
			{
				this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;
			})];

	var handle2 = Graph.createHandle(state, ['barHeight'], function(bounds)
			{
				var barHeight = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'barHeight', this.barHeight))));

				return new mxPoint(bounds.x + bounds.width - 20, bounds.y + bounds.height - barHeight);
			}, function(bounds, pt)
			{
				this.state.style['barHeight'] = Math.round(1000 * Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))) / 1000;
			});
	
	handles.push(handle2);

	return handles;
}

//**********************************************************************************************************************************************************
//Accordion (LEGACY)
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupAccordion(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupAccordion, mxShape);

mxShapeMockupAccordion.prototype.cst = {
		TEXT_COLOR : 'textColor',
		TEXT_COLOR2 : 'textColor2',
		TEXT_SIZE : 'textSize',
		SHAPE_ACCORDION : 'mxgraph.mockup.containers.accordion',
		STROKE_COLOR2 : 'strokeColor2',
		FILL_COLOR2 : 'fillColor2',
		SELECTED : '+',			// must be 1 char
		MAIN_TEXT : 'mainText'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupAccordion.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var textStrings = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.MAIN_TEXT, '+Group 1, Group 2, Group 3').toString().split(',');
	var fontColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.TEXT_COLOR, '#666666');
	var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.TEXT_COLOR2, '#ffffff');
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.TEXT_SIZE, '17').toString();
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var separatorColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.STROKE_COLOR2, '#c4c4c4');
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.FILL_COLOR2, '#008cff');
	var buttonNum = textStrings.length;
	var maxButtonWidth = 0;
	var selectedButton = -1;
	var rSize = 10; //rounding size
	var labelOffset = 5;

	for (var i = 0; i < buttonNum; i++)
	{
		var buttonText = textStrings[i];

		if(buttonText.charAt(0) === mxShapeMockupAccordion.prototype.cst.SELECTED)
		{
			buttonText = textStrings[i].substring(1);
			selectedButton = i;
		}

		var currWidth = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;

		if (currWidth > maxButtonWidth)
		{
			maxButtonWidth = currWidth;
		}
	}

	var minButtonHeight =  fontSize * 1.5;
	var minH = buttonNum * minButtonHeight;
	var trueH = Math.max(h, minH);
	var minW = 2 * labelOffset + maxButtonWidth;
	var trueW = Math.max(w, minW);

	c.translate(x, y);

	this.background(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton, minButtonHeight);
	c.setShadow(false);

	var currWidth = 0;

	for (var i = 0; i < buttonNum; i++)
	{
		if (i === selectedButton)
		{
			c.setFontColor(selectedFontColor);
		}
		else
		{
			c.setFontColor(fontColor);
		}

		currWidth = currWidth + labelOffset;
		var currHeight = 0;

		if (selectedButton === -1 || i <= selectedButton)
		{	
			currHeight = (i * minButtonHeight + minButtonHeight * 0.5);
		}
		else
		{
			currHeight = trueH - (buttonNum - i - 0.5) * minButtonHeight;
		}

		this.buttonText(c, trueW, currHeight, textStrings[i], fontSize);
	}
};

mxShapeMockupAccordion.prototype.background = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton, minButtonHeight)
{
	c.begin();

	//draw the frame
	c.setStrokeColor(frameColor);
	c.setFillColor(bgColor);
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();
	c.fillAndStroke();

	//draw the button separators
	c.setStrokeColor(separatorColor);
	c.begin();

	for (var i = 1; i < buttonNum; i++)
	{
		if (i !== selectedButton)
		{
			if (selectedButton === -1 || i < selectedButton)
			{
				var currHeight = i * minButtonHeight;
				c.moveTo(0, currHeight);
				c.lineTo(w, currHeight);
			}
			else
			{
				var currHeight = h - (buttonNum - i) * minButtonHeight;
				c.moveTo(0, currHeight);
				c.lineTo(w, currHeight);
			}
		}
	}

	c.stroke();

	//draw the selected button
	c.setStrokeColor(mxConstants.NONE);
	c.setFillColor(selectedFillColor);

	if (selectedButton !== -1)
	{
		c.begin();
		var buttonTop = minButtonHeight * selectedButton;
		var buttonBottom = minButtonHeight * (selectedButton + 1);
		c.moveTo(0, buttonTop);
		c.lineTo(w, buttonTop);
		c.lineTo(w, buttonBottom);
		c.lineTo(0, buttonBottom);
		c.close();
		c.fill();
	}

//	//draw the frame again, to achieve a nicer effect
	c.begin();
	c.setStrokeColor(frameColor);
	c.setFillColor(bgColor);
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();
	c.stroke();
};

mxShapeMockupAccordion.prototype.buttonText = function(c, w, h, textString, fontSize)
{
	if(textString.charAt(0) === mxShapeMockupAccordion.prototype.cst.SELECTED)
	{
		textString = textString.substring(1);
	}

	c.begin();
	c.setFontSize(fontSize);
	c.text((w * 0.5), h, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupAccordion.prototype.cst.SHAPE_ACCORDION] = mxShapeMockupAccordion;

//**********************************************************************************************************************************************************
//Browser Window
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupBrowserWindow(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupBrowserWindow, mxShape);

mxShapeMockupBrowserWindow.prototype.cst = {
		STROKE_COLOR2 : 'strokeColor2',
		STROKE_COLOR3 : 'strokeColor3',
		MAIN_TEXT : 'mainText',
		SHAPE_BROWSER_WINDOW : 'mxgraph.mockup.containers.browserWindow'

};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupBrowserWindow.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var closeColor = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.STROKE_COLOR2, '#008cff');
	var insideColor = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.STROKE_COLOR3, '#c4c4c4');
	w = Math.max(w, 260);
	h = Math.max(h, 110);
	c.translate(x, y);
	this.background(c, x, y, w, h, bgColor, frameColor);
	c.setShadow(false);
	this.otherShapes(c, x, y, w, h, frameColor, insideColor, closeColor);
};

mxShapeMockupBrowserWindow.prototype.background = function(c, x, y, w, h, bgColor, frameColor)
{
	c.setFillColor(bgColor);
	c.setStrokeColor(frameColor);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();	
	c.fillAndStroke();
};

mxShapeMockupBrowserWindow.prototype.otherShapes = function(c, x, y, w, h, frameColor, insideColor, closeColor)
{
	var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');
	var mainText = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.MAIN_TEXT, 'http://www.draw.io,Page 1').toString().split(',');

	//window buttons
	c.setStrokeColor(frameColor);
	c.ellipse(w - 75, 5, 20, 20);
	c.stroke();

	c.ellipse(w - 50, 5, 20, 20);
	c.stroke();

	c.setStrokeColor(closeColor);
	c.ellipse(w - 25, 5, 20, 20);
	c.stroke();

	c.setStrokeColor(insideColor);
	//lines
	c.begin();
	c.moveTo(0, 40);
	c.lineTo(30, 40);
	c.lineTo(30, 15);
	c.arcTo(5, 5, 0, 0, 1, 35, 10);
	c.lineTo(170, 10);
	c.arcTo(5, 5, 0, 0, 1, 175, 15);
	c.lineTo(175, 40);
	c.lineTo(w, 40);
	c.stroke();

	c.begin();
	c.moveTo(0, 110);
	c.lineTo(w, 110);
	c.stroke();

	//address field
	c.begin();
	c.moveTo(100, 60);
	c.arcTo(5, 5, 0, 0, 1, 105, 55);
	c.lineTo(w - 15, 55);
	c.arcTo(5, 5, 0, 0, 1, w - 10, 60);
	c.lineTo(w - 10, 85);
	c.arcTo(5, 5, 0, 0, 1, w - 15, 90);
	c.lineTo(105, 90);
	c.arcTo(5, 5, 0, 0, 1, 100, 85);
	c.close();
	c.stroke();

	//text
	var textColor = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.TEXT_COLOR, '#666666');
	c.setFontColor(textColor);
	c.setFontSize(17);
	c.text(65, 25, 0, 0, mainText[1], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
	c.text(130, 73, 0, 0, mainText[0], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
	c.stroke();

	//icon on tab
	c.translate(37, 17);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(11, 0);
	c.lineTo(15, 4);
	c.lineTo(15, 18);
	c.lineTo(0, 18);
	c.close();
	c.stroke();

	c.setStrokeWidth(strokeWidth * 0.5); //maybe because of this (read later)
	c.begin();
	c.moveTo(11, 0);
	c.lineTo(11, 4);
	c.lineTo(15, 5);
	c.stroke();

	//icon in address bar
	c.setStrokeWidth(strokeWidth * 2); // i'm not sure why i have to multiply here
	c.translate(70, 47);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(11, 0);
	c.lineTo(15, 4);
	c.lineTo(15, 18);
	c.lineTo(0, 18);
	c.close();
	c.stroke();

	c.setStrokeWidth(strokeWidth * 0.5);
	c.begin();
	c.moveTo(11, 0);
	c.lineTo(11, 4);
	c.lineTo(15, 5);
	c.stroke();

	//back
	var iSi = 20; //icon size
	c.setFillColor(insideColor);
	c.begin();
	c.setStrokeWidth(strokeWidth * 2); // i'm not sure why i have to multiply here
	c.translate(-95, 0);
	c.moveTo(0, iSi * 0.5);
	c.lineTo(iSi * 0.5, 0);
	c.lineTo(iSi * 0.5, iSi * 0.3);
	c.lineTo(iSi, iSi * 0.3);
	c.lineTo(iSi, iSi * 0.7);
	c.lineTo(iSi * 0.5, iSi * 0.7);
	c.lineTo(iSi * 0.5, iSi);
	c.close();
	c.fillAndStroke();

	//forward
	c.begin();
	c.translate(30, 0);
	c.moveTo(iSi, iSi * 0.5);
	c.lineTo(iSi * 0.5, 0);
	c.lineTo(iSi * 0.5, iSi * 0.3);
	c.lineTo(0, iSi * 0.3);
	c.lineTo(0, iSi * 0.7);
	c.lineTo(iSi * 0.5, iSi * 0.7);
	c.lineTo(iSi * 0.5, iSi);
	c.close();
	c.fillAndStroke();

	//refresh
	c.begin();
	c.translate(30, 0);
	c.moveTo(iSi * 0.78, iSi * 0.665);
	c.arcTo(iSi * 0.3, iSi * 0.3, 0, 1, 1, iSi * 0.675, iSi * 0.252);
	c.lineTo(iSi * 0.595, iSi * 0.325);
	c.lineTo(iSi * 0.99, iSi * 0.415);
	c.lineTo(iSi * 0.9, iSi * 0.04);
	c.lineTo(iSi * 0.815, iSi * 0.12);
	c.arcTo(iSi * 0.49, iSi * 0.49, 0, 1, 0, iSi * 0.92, iSi * 0.8);
	c.close();
	c.fillAndStroke();
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupBrowserWindow.prototype.cst.SHAPE_BROWSER_WINDOW] = mxShapeMockupBrowserWindow;

//**********************************************************************************************************************************************************
//User, Male
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupUserMale(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupUserMale, mxShape);

mxShapeMockupUserMale.prototype.cst = {
		STROKE_COLOR2 : 'strokeColor2',
		SHAPE_MALE_USER : 'mxgraph.mockup.containers.userMale'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupUserMale.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var insideColor = mxUtils.getValue(this.style, mxShapeMockupUserMale.prototype.cst.STROKE_COLOR2, '#008cff');
	c.translate(x, y);
	this.background(c, x, y, w, h, bgColor, frameColor);
	c.setShadow(false);
	this.otherShapes(c, x, y, w, h, insideColor, frameColor);
};

mxShapeMockupUserMale.prototype.background = function(c, x, y, w, h, bgColor, frameColor)
{
	c.setFillColor(bgColor);
	c.setStrokeColor(frameColor);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();	
	c.fillAndStroke();
};

mxShapeMockupUserMale.prototype.otherShapes = function(c, x, y, w, h, insideColor, frameColor)
{
	//head left
	c.setStrokeColor(insideColor);
	c.setLineCap('round');
	c.setLineJoin('round');
	c.begin();
	c.moveTo(w * 0.5, h * 0.6721);
	c.curveTo(w * 0.3891, h * 0.6721, w * 0.31, h * 0.5648, w * 0.31, h * 0.3962);
	c.curveTo(w * 0.31, h * 0.3656, w * 0.3012, h * 0.3473, w * 0.3051, h * 0.3227);
	c.curveTo(w * 0.3126, h * 0.2762, w * 0.3124, h * 0.2212, w * 0.332, h * 0.1939);
	c.curveTo(w * 0.354, h * 0.1633, w * 0.4382, h * 0.12, w * 0.5, h * 0.12);
	c.stroke();

	//left ear
	c.begin();
	c.moveTo(w * 0.3046, h * 0.3716);
	c.curveTo(w * 0.3046, h * 0.3716, w * 0.3046, h * 0.341, w * 0.2826, h * 0.3594);
	c.curveTo(w * 0.2606, h * 0.3778, w * 0.2661, h * 0.4452, w * 0.266, h * 0.4452);
	c.quadTo(w * 0.2715, h * 0.4942, w * 0.277, h * 0.5065);
	c.curveTo(w * 0.2825, h * 0.5187, w * 0.277, h * 0.5187, w * 0.2935, h * 0.5371);
	c.curveTo(w * 0.31, h * 0.5554, w * 0.3375, h * 0.5615, w * 0.3375, h * 0.5616);
	c.stroke();

	// left shoulder
	c.begin();
	c.moveTo(w * 0.3829, h * 0.6213);
	c.curveTo(w * 0.3829, h * 0.6213, w * 0.405, h * 0.7704, w * 0.2921, h * 0.7888);
	c.curveTo(w * 0.2536, h * 0.795, w * 0.1328, h * 0.85, w * 0.1052, h * 0.8745);
	c.curveTo(w * 0.0776, h * 0.899, w * 0.0641, h * 0.9316, w * 0.0571, h * 0.9622);
	c.quadTo(w * 0.05, h, w * 0.05, h);
	c.stroke();

	// left hairline
	c.begin();
	c.moveTo(w * 0.3427, h * 0.4185);
	c.curveTo(w * 0.3427, h * 0.4185, w * 0.3427, h * 0.3839, w * 0.3427, h * 0.3593);
	c.curveTo(w * 0.3427, h * 0.3348, w * 0.3663, h * 0.3103, w * 0.3718, h * 0.3041);
	c.curveTo(w * 0.3773, h * 0.298, w * 0.3822, h * 0.2673, w * 0.3877, h * 0.2551);
	c.curveTo(w * 0.3932, h * 0.2429, w * 0.4095, h * 0.2429, w * 0.4259, h * 0.2367);
	c.curveTo(w * 0.4424, h * 0.2306, w * 0.4984, h * 0.2357, w * 0.4984, h * 0.2357);
	c.stroke();

	//shirt
	c.begin();
	c.moveTo(w * 0.365, h * 0.7427);
	c.curveTo(w * 0.365, h * 0.7427, w * 0.3772, h * 0.8076, w * 0.4286, h * 0.8224);
	c.curveTo(w * 0.4816, h * 0.8377, w * 0.5028, h * 0.8347, w * 0.5028, h * 0.8347);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.3322, h * 0.7764);
	c.curveTo(w * 0.3322, h * 0.7764, w * 0.3556, h * 0.8386, w * 0.4038, h * 0.8684);
	c.curveTo(w * 0.4533, h * 0.8991, w * 0.5029, h * 0.8929, w * 0.5029, h * 0.8929);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.2717, h * 0.9);
	c.lineTo(w * 0.2717, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.1671, h * 0.8991);
	c.curveTo(w * 0.1671, h * 0.8991, w * 0.1726, h * 0.9114, w * 0.1836, h * 0.9481);
	c.curveTo(w * 0.1946, h * 0.9849, w * 0.2, h, w * 0.2, h);
	c.stroke();

	//head right
	c.begin();
	c.moveTo(w * 0.5, h * 0.6721);
	c.curveTo(w * 0.6109, h * 0.6721, w * 0.69, h * 0.5648, w * 0.69, h * 0.3962);
	c.curveTo(w * 0.69, h * 0.3656, w * 0.6988, h * 0.3473, w * 0.6949, h * 0.3227);
	c.curveTo(w * 0.6847, h * 0.2762, w * 0.6876, h * 0.2212, w * 0.668, h * 0.1939);
	c.curveTo(w * 0.646, h * 0.1633, w * 0.5618, h * 0.12, w * 0.5, h * 0.12);
	c.stroke();

	//right ear
	c.begin();
	c.moveTo(w * 0.6954, h * 0.3716);
	c.curveTo(w * 0.6954, h * 0.3716, w * 0.6954, h * 0.341, w * 0.7174, h * 0.3594);
	c.curveTo(w * 0.7394, h * 0.3778, w * 0.7339, h * 0.4452, w * 0.734, h * 0.4452);
	c.quadTo(w * 0.7285, h * 0.4942, w * 0.723, h * 0.5065);
	c.curveTo(w * 0.7175, h * 0.5187, w * 0.723, h * 0.5187, w * 0.7065, h * 0.5371);
	c.curveTo(w * 0.69, h * 0.5554, w * 0.6625, h * 0.5615, w * 0.6625, h * 0.5616);
	c.stroke();

	// right shoulder
	c.begin();
	c.moveTo(w * 0.6171, h * 0.6213);
	c.curveTo(w * 0.6171, h * 0.6213, w * 0.595, h * 0.7704, w * 0.7079, h * 0.7888);
	c.curveTo(w * 0.7464, h * 0.795, w * 0.8672, h * 0.85, w * 0.8948, h * 0.8745);
	c.curveTo(w * 0.9224, h * 0.899, w * 0.9359, h * 0.9316, w * 0.9429, h * 0.9622);
	c.quadTo(w * 0.95, h, w * 0.95, h);
	c.stroke();

	// right hairline
	c.begin();
	c.moveTo(w * 0.6573, h * 0.4185);
	c.curveTo(w * 0.6573, h * 0.4185, w * 0.6573, h * 0.3839, w * 0.6573, h * 0.3593);
	c.curveTo(w * 0.6573, h * 0.3348, w * 0.6337, h * 0.3103, w * 0.6282, h * 0.3041);
	c.curveTo(w * 0.6227, h * 0.298, w * 0.6178, h * 0.2673, w * 0.6123, h * 0.2551);
	c.curveTo(w * 0.6068, h * 0.2429, w * 0.5905, h * 0.2429, w * 0.5741, h * 0.2367);
	c.curveTo(w * 0.5576, h * 0.2306, w * 0.5016, h * 0.2357, w * 0.5016, h * 0.2357);
	c.stroke();

	//shirt, right
	c.begin();
	c.moveTo(w * 0.635, h * 0.7427);
	c.curveTo(w * 0.635, h * 0.7427, w * 0.6228, h * 0.8076, w * 0.5714, h * 0.8224);
	c.curveTo(w * 0.5184, h * 0.8377, w * 0.4972, h * 0.8347, w * 0.4972, h * 0.8347);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.6678, h * 0.7764);
	c.curveTo(w * 0.6678, h * 0.7764, w * 0.6444, h * 0.8386, w * 0.5962, h * 0.8684);
	c.curveTo(w * 0.5467, h * 0.8991, w * 0.4971, h * 0.8929, w * 0.4971, h * 0.8929);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.7283, h * 0.9);
	c.lineTo(w * 0.7283, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.8329, h * 0.8991);
	c.curveTo(w * 0.8329, h * 0.8991, w * 0.8274, h * 0.9114, w * 0.8164, h * 0.9481);
	c.curveTo(w * 0.8054, h * 0.9849, w * 0.8, h, w * 0.8, h);
	c.stroke();

	c.setStrokeColor(frameColor);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();	
	c.stroke();
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupUserMale.prototype.cst.SHAPE_MALE_USER] = mxShapeMockupUserMale;

//**********************************************************************************************************************************************************
//User, Female
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupUserFemale(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupUserFemale, mxShape);

mxShapeMockupUserFemale.prototype.cst = {
		STROKE_COLOR2 : 'strokeColor2',
		SHAPE_FEMALE_USER : 'mxgraph.mockup.containers.userFemale'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupUserFemale.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var insideColor = mxUtils.getValue(this.style, mxShapeMockupUserFemale.prototype.cst.STROKE_COLOR2, '#008cff');
	c.translate(x, y);
	this.background(c, x, y, w, h, bgColor, frameColor);
	c.setShadow(false);
	this.otherShapes(c, x, y, w, h, insideColor, frameColor);
};

mxShapeMockupUserFemale.prototype.background = function(c, x, y, w, h, bgColor, frameColor)
{
	c.setFillColor(bgColor);
	c.setStrokeColor(frameColor);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();	
	c.fillAndStroke();
};

mxShapeMockupUserFemale.prototype.otherShapes = function(c, x, y, w, h, insideColor, frameColor)
{
	//head left
	c.setStrokeColor(insideColor);
	c.setLineCap('round');
	c.setLineJoin('round');
	c.begin();
	c.moveTo(w * 0.3148, h * 0.468);
	c.curveTo(w * 0.3045, h * 0.3195, w * 0.3176, h * 0.2383, w * 0.3302, h * 0.2069);
	c.curveTo(w * 0.3508, h * 0.1557, w * 0.44, h * 0.1156, w * 0.5026, h * 0.1156);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.5029, h * 0.6728);
	c.curveTo(w * 0.4616, h * 0.6728, w * 0.4018, h * 0.6177, w * 0.3663, h * 0.5653);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.3108, h * 0.4021);
	c.curveTo(w * 0.3108, h * 0.4021, w * 0.3091, h * 0.3765, w * 0.2891, h * 0.3933);
	c.curveTo(w * 0.2691, h * 0.4101, w * 0.2782, h * 0.4661, w * 0.2782, h * 0.4661);
	c.quadTo(w * 0.2862, h * 0.5067, w * 0.2922, h * 0.5166);
	c.curveTo(w * 0.2982, h * 0.5265, w * 0.2929, h * 0.5268, w * 0.3097, h * 0.5412);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.4038, h * 0.6176);
	c.curveTo(w * 0.4038, h * 0.6176, w * 0.4324, h * 0.7778, w * 0.3375, h * 0.7963);
	c.curveTo(w * 0.3054, h * 0.8026, w * 0.1753, h * 0.8578, w * 0.15, h * 0.8826);
	c.curveTo(w * 0.1247, h * 0.9074, w * 0.1126, h * 0.9412, w * 0.1063, h * 0.9722);
	c.curveTo(w * 0.10, h * 1.0032, w * 0.1, h, w * 0.1, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.6377, h * 0.3365);
	c.curveTo(w * 0.5927, h * 0.2634, w * 0.5206, h * 0.2634, w * 0.5206, h * 0.2634);
	c.quadTo(w * 0.3769, h * 0.2591, w * 0.3713, h * 0.2659);
	c.curveTo(w * 0.3657, h * 0.2727, w * 0.3405, h * 0.3674, w * 0.3405, h * 0.3946);
	c.curveTo(w * 0.3405, h * 0.4218, w * 0.3405, h * 0.4602, w * 0.3405, h * 0.4602);
	c.quadTo(w * 0.3546, h * 0.6401, w * 0.3546, h * 0.6626);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.2931, h * 0.818);
	c.curveTo(w * 0.2931, h * 0.818, w * 0.3224, h * 0.9159, w * 0.3826, h * 0.9677);
	c.curveTo(w * 0.4446, h * 1.01, w * 0.5065, h, w * 0.5065, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.2995, h * 0.9106);
	c.lineTo(w * 0.2995, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.2081, h * 0.907);
	c.curveTo(w * 0.2081, h * 0.907, w * 0.2131, h * 0.9194, w * 0.2232, h * 0.9565);
	c.curveTo(w * 0.2333, h * 0.9936, w * 0.24, h, w * 0.24, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.6951, h * 0.4988);
	c.curveTo(w * 0.6951, h * 0.4662, w * 0.7042, h * 0.3453, w * 0.7, h * 0.32);
	c.curveTo(w * 0.6923, h * 0.273, w * 0.6926, h * 0.2175, w * 0.6727, h * 0.19);
	c.curveTo(w * 0.6504, h * 0.159, w * 0.5651, h * 0.1157, w * 0.5025, h * 0.1157);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.5029, h * 0.6728);
	c.curveTo(w * 0.5546, h * 0.6728, w * 0.6107, h * 0.6316, w * 0.6461, h * 0.5602);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.696, h * 0.4022);
	c.curveTo(w * 0.696, h * 0.4022, w * 0.6983, h * 0.3766, w * 0.7179, h * 0.4106);
	c.curveTo(w * 0.7375, h * 0.4278, w * 0.7273, h * 0.4836, w * 0.7273, h * 0.4836);
	c.quadTo(w * 0.7184, h * 0.5241, w * 0.7123, h * 0.5338);
	c.curveTo(w * 0.7062, h * 0.5436, w * 0.7114, h * 0.544, w * 0.6943, h * 0.558);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.5995, h * 0.6278);
	c.curveTo(w * 0.5995, h * 0.6278, w * 0.5724, h * 0.7777, w * 0.6663, h * 0.7963);
	c.curveTo(w * 0.6984, h * 0.8026, w * 0.8386, h * 0.8578, w * 0.8638, h * 0.8826);
	c.curveTo(w * 0.8891, h * 0.9074, w * 0.9016, h * 0.9412, w * 0.9079, h * 0.9722);
	c.curveTo(w * 0.9142, h * 1.0032, w * 0.91, h, w * 0.91, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.6545, h * 0.6802);
	c.lineTo(w * 0.6545, h * 0.3986);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.7132, h * 0.8078);
	c.curveTo(w * 0.7132, h * 0.8078, w * 0.6839, h * 0.916, w * 0.6237, h * 0.9678);
	c.curveTo(w * 0.5617, h * 1.01, w * 0.4998, h, w * 0.4998, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.7111, h * 0.9106);
	c.lineTo(w * 0.7111, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.8075, h * 0.907);
	c.curveTo(w * 0.8075, h * 0.907, w * 0.8025, h * 0.9194, w * 0.7924, h * 0.9565);
	c.curveTo(w * 0.7823, h * 0.9936, w * 0.775, h, w * 0.775, h);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.3148, h * 0.5448);
	c.curveTo(w * 0.3148, h * 0.5448, w * 0.32, h * 0.6216, w * 0.3148, h * 0.6677);
	c.quadTo(w * 0.2891, h * 0.7343, w * 0.2891, h * 0.7343);
	c.lineTo(w * 0.3303, h * 0.7625);
	c.lineTo(w * 0.39, h * 0.7625);
	c.stroke();

	c.begin();
	c.moveTo(w * 0.6852, h * 0.5448);
	c.curveTo(w * 0.6852, h * 0.5448, w * 0.68, h * 0.6216, w * 0.6852, h * 0.6677);
	c.quadTo(w * 0.7109, h * 0.7343, w * 0.7109, h * 0.7343);
	c.lineTo(w * 0.6697, h * 0.7625);
	c.lineTo(w * 0.62, h * 0.7625);
	c.stroke();

	c.setStrokeColor(frameColor);
	c.begin();
	c.moveTo(0, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();	
	c.stroke();
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupUserFemale.prototype.cst.SHAPE_FEMALE_USER] = mxShapeMockupUserFemale;

//**********************************************************************************************************************************************************
//Group
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupGroup(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupGroup, mxShape);

mxShapeMockupGroup.prototype.cst = {
		MAIN_TEXT : 'mainText',
		TEXT_SIZE : 'textSize',
		TEXT_COLOR : 'textColor',
		FILL_COLOR2 : 'fillColor2',
		SHAPE_GROUP : 'mxgraph.mockup.containers.group'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupGroup.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var groupString = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.MAIN_TEXT, 'Group').toString();
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.TEXT_SIZE, '17');

	var textWidth = mxUtils.getSizeForString(groupString, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;

	if (textWidth === 0)
	{
		textWidth = Math.max(80, textWidth);
	}

	c.translate(x, y);

	w = Math.max(w, textWidth + 15);
	h = Math.max(h, fontSize + 10);

	this.background(c, w, h, textWidth, fontSize);
	c.setShadow(false);
	this.foreground(c, w, h, textWidth, fontSize);
	this.buttonText(c, w, h, groupString, fontSize);
};

mxShapeMockupGroup.prototype.background = function(c, w, h, textWidth, fontSize)
{
	c.roundrect(0, fontSize * 0.5, w, h - fontSize * 0.5, 5, 5);
	c.fillAndStroke();
};

mxShapeMockupGroup.prototype.foreground = function(c, w, h, textWidth, fontSize)
{
	var fillColor = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.FILL_COLOR2, '#000000');
	c.setFillColor(fillColor);
	c.roundrect(3, 0, textWidth + 6, fontSize * 1.5, fontSize * 0.25, fontSize * 0.25);
	c.fill();
};

mxShapeMockupGroup.prototype.buttonText = function(c, w, h, textString, fontSize)
{
	var fontColor = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.TEXT_COLOR, '#ffffff');

	c.setFontColor(fontColor);
	c.setFontSize(fontSize);
	c.text(6, 0, 0, 0, textString, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_TOP, 0, null, 0, 0, 0);
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupGroup.prototype.cst.SHAPE_GROUP] = mxShapeMockupGroup;

//**********************************************************************************************************************************************************
//Window
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupWindow(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupWindow, mxShape);

mxShapeMockupWindow.prototype.cst = {
		MAIN_TEXT : 'mainText',
		TEXT_SIZE : 'textSize',
		TEXT_COLOR : 'textColor',
		STROKE_COLOR2 : 'strokeColor2',
		STROKE_COLOR3 : 'strokeColor3',
		SHAPE_WINDOW : 'mxgraph.mockup.containers.window'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupWindow.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var closeColor = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.STROKE_COLOR2, '#008cff');
	var insideColor = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.STROKE_COLOR3, '#c4c4c4');
	c.translate(x, y);

	h = Math.max(h, 30);
	w = Math.max(w, 90);

	this.background(c, x, y, w, h, bgColor, frameColor);
	c.setShadow(false);
	this.otherShapes(c, x, y, w, h, frameColor, insideColor, closeColor);
};

mxShapeMockupWindow.prototype.background = function(c, x, y, w, h, bgColor, frameColor)
{
	c.setFillColor(bgColor);
	c.setStrokeColor(frameColor);
	c.rect(0, 0, w, h);
	c.fillAndStroke();
};

mxShapeMockupWindow.prototype.otherShapes = function(c, x, y, w, h, frameColor, insideColor, closeColor)
{
	var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');

	//window buttons
	c.setStrokeColor(frameColor);
	c.ellipse(w - 75, 5, 20, 20);
	c.stroke();

	c.ellipse(w - 50, 5, 20, 20);
	c.stroke();

	c.setStrokeColor(closeColor);
	c.ellipse(w - 25, 5, 20, 20);
	c.stroke();

	c.setStrokeColor(insideColor);
	//lines
	c.begin();
	c.moveTo(0, 30);
	c.lineTo(w, 30);
	c.stroke();

	//text
	var windowTitle = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.MAIN_TEXT, 'Window Title');
	var fontColor = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.TEXT_COLOR, '#666666');
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.TEXT_SIZE, '17').toString();

	c.setFontColor(fontColor);
	c.setFontSize(fontSize);
	c.text(10, 15, 0, 0, windowTitle, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
	c.stroke();
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupWindow.prototype.cst.SHAPE_WINDOW] = mxShapeMockupWindow;

//**********************************************************************************************************************************************************
//Horizontal Tab Bar (LEGACY)
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupHorTabBar(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupHorTabBar, mxShape);

mxShapeMockupHorTabBar.prototype.cst = {
		BLOCK : 'block',
		CONE : 'cone',
		HALF_CONE : 'halfCone',
		ROUND : 'round',
		TEXT_SIZE : 'textSize',
		TAB_NAMES : 'tabs',
		TAB_STYLE : 'tabStyle',
		STYLE_FILLCOLOR2 : 'fillColor2',
		TEXT_COLOR : 'textColor',
		SEL_TEXT_COLOR : 'textColor2',
		SHAPE_HOR_TAB_BAR : 'mxgraph.mockup.containers.horTabBar'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
//TODO tab widths are fixed, so tab text length is a bit of an issue. Cannot be fixed while we use labels for tab names
mxShapeMockupHorTabBar.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TEXT_SIZE, '17').toString();
	var tabNames = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TAB_NAMES, 'Tab 1,+Tab 2,Tab 3').toString().split(',');

	var tabH = fontSize * 1.5;
	var startOffset = 10;
	var tabOffset = 5;
	var labelOffset = 10;
	var tabCount = tabNames.length;
	var minW = 2 * startOffset + (tabCount - 1) * tabOffset + tabCount * 2 * labelOffset;
	var rSize = 5;
	var labelWidths = new Array();
	var selectedTab = -1;

	for (var i = 0; i < tabCount; i++)
	{
		var currLabel = tabNames[i];

		if(currLabel.charAt(0) === '+')
		{
			currLabel = currLabel.substring(1);
			selectedTab = i;
		}

		currW = mxUtils.getSizeForString(currLabel, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;

		if (currW === 0)
		{
			labelWidths[i] = 40;
		}
		else
		{
			labelWidths[i] = currW;
		};

		minW = minW + labelWidths[i];
	}

	w = Math.max(w, minW);
	h = Math.max(h, tabH + rSize);

	c.translate(x, y);

	this.background(c, w, h, rSize, tabH);
	c.setShadow(false);
	this.backTabs(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);
	this.focusTab(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);
	this.tabText(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames);
};

mxShapeMockupHorTabBar.prototype.background = function(c, w, h, rSize, tabH)
{
	c.begin();
	c.moveTo(0, tabH + rSize);
	c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);
	c.lineTo(w - rSize, tabH);
	c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();
	c.fillAndStroke();
};

mxShapeMockupHorTabBar.prototype.backTabs = function(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)
{
	var tabStyle = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TAB_STYLE, mxShapeMockupHorTabBar.prototype.cst.BLOCK);

	var currW = startOffset;
	for (var i=0; i < tabCount; i++)
	{
		var tabW = labelWidths[i] + 2 * labelOffset;

		if (selectedTab !== i)
		{
			if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.BLOCK)
			{
				c.rect(currW, 0, tabW, tabH);
			}
			else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.CONE)
			{
				c.begin();
				c.moveTo(currW, tabH);
				c.lineTo(currW + labelOffset * 0.5, 0);
				c.lineTo(currW + tabW - labelOffset * 0.5, 0);
				c.lineTo(currW + tabW, tabH);
			}
			else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.HALF_CONE)
			{
				c.begin();
				c.moveTo(currW, tabH);
				c.lineTo(currW + labelOffset * 0.5, 0);
				c.lineTo(currW + tabW, 0);
				c.lineTo(currW + tabW, tabH);
			}
			else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.ROUND)
			{
				c.begin();
				c.moveTo(currW - rSize, tabH);
				c.arcTo(rSize, rSize, 0, 0, 0, currW, tabH - rSize);
				c.lineTo(currW, rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, currW + rSize, 0);
				c.lineTo(currW + tabW - rSize, 0);
				c.arcTo(rSize, rSize, 0, 0, 1, currW + tabW, rSize);
				c.lineTo(currW + tabW, tabH - rSize);
				c.arcTo(rSize, rSize, 0, 0, 0, currW + tabW + rSize, tabH);
			}

			c.fillAndStroke();
		}

		currW = currW + tabW + tabOffset;
	}
};

mxShapeMockupHorTabBar.prototype.focusTab = function(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)
{
	var tabStyle = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TAB_STYLE, mxShapeMockupHorTabBar.prototype.cst.BLOCK);
	var selectedFill = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.STYLE_FILLCOLOR2, '#008cff');

	var currW = startOffset;
	c.setStrokeColor(selectedFill);
	c.setFillColor(selectedFill);

	for (var i=0; i <= selectedTab; i++)
	{
		var tabW = labelWidths[i] + 2 * labelOffset;

		if (selectedTab === i)
		{
			if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.BLOCK)
			{
				c.begin();
				c.moveTo(0, tabH + rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);
				c.lineTo(currW, tabH);
				c.lineTo(currW, 0);
				c.lineTo(currW + tabW, 0);
				c.lineTo(currW + tabW, tabH);
				c.lineTo(w - rSize, tabH);
				c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);
				c.close();
			}
			else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.CONE)
			{
				c.begin();
				c.moveTo(0, tabH + rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);
				c.lineTo(currW, tabH);
				c.lineTo(currW + labelOffset * 0.5, 0);
				c.lineTo(currW + tabW - labelOffset * 0.5, 0);
				c.lineTo(currW + tabW, tabH);
				c.lineTo(w - rSize, tabH);
				c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);
				c.close();
			}
			else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.HALF_CONE)
			{
				c.begin();
				c.moveTo(0, tabH + rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);
				c.lineTo(currW, tabH);
				c.lineTo(currW + labelOffset * 0.5, 0);
				c.lineTo(currW + tabW, 0);
				c.lineTo(currW + tabW, tabH);
				c.lineTo(w - rSize, tabH);
				c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);
				c.close();
			}
			else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.ROUND)
			{
				c.begin();
				c.moveTo(0, tabH + rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);
				c.lineTo(currW - rSize, tabH);
				c.arcTo(rSize, rSize, 0, 0, 0, currW, tabH - rSize);
				c.lineTo(currW, rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, currW + rSize, 0);
				c.lineTo(currW + tabW - rSize, 0);
				c.arcTo(rSize, rSize, 0, 0, 1, currW + tabW, rSize);
				c.lineTo(currW + tabW, tabH - rSize);
				c.arcTo(rSize, rSize, 0, 0, 0, currW + tabW + rSize, tabH);
				c.lineTo(w - rSize, tabH);
				c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);
				c.close();
			}

			c.fillAndStroke();
		}

		currW = currW + tabW + tabOffset;
	}
};

mxShapeMockupHorTabBar.prototype.tabText = function(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames)
{
	var fontColor = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TEXT_COLOR, '#666666');
	var selFontColor = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.SEL_TEXT_COLOR, '#ffffff');
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TEXT_SIZE, '17').toString();

	c.setFontColor(fontColor);
	c.setFontSize(fontSize);

	var currW = startOffset;

	for (var i=0; i < tabCount; i++)
	{
		var currLabel = tabNames[i];

		if (i === selectedTab)
		{
			c.setFontColor(selFontColor);
		}

		if (currLabel.charAt(0) === '+')
		{
			currLabel = currLabel.substring(1);
		}

		var tabW = labelWidths[i] + 2 * labelOffset;

		c.text(currW + labelOffset, tabH * 0.5, 0, 0, currLabel, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);

		currW = currW + tabW + tabOffset;

		if (i === selectedTab)
		{
			c.setFontColor(fontColor);
		}
	}

};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupHorTabBar.prototype.cst.SHAPE_HOR_TAB_BAR] = mxShapeMockupHorTabBar;

//**********************************************************************************************************************************************************
//Vertical Tab Bar (LEGACY)
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
//TODO tab widths are fixed, so tab text length is a bit of an issue. Cannot be fixed while we use labels for tab names
function mxShapeMockupVerTabBar(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupVerTabBar, mxShape);

mxShapeMockupVerTabBar.prototype.cst = {
		BLOCK : 'block',
		ROUND : 'round',
		TEXT_SIZE : 'textSize',
		TAB_NAMES : 'tabs',
		TAB_STYLE : 'tabStyle',
		STYLE_FILLCOLOR2 : 'fillColor2',
		TEXT_COLOR : 'textColor',
		SEL_TEXT_COLOR : 'textColor2',
		SHAPE_VER_TAB_BAR : 'mxgraph.mockup.containers.verTabBar'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupVerTabBar.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TEXT_SIZE, '17').toString();
	var tabNames = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TAB_NAMES, 'Tab 1,+Tab 2,Tab 3').toString().split(',');

	var tabH = fontSize * 1.5;
	var startOffset = 10;
	var tabOffset = 5;
	var labelOffset = 10;
	var tabCount = tabNames.length;
	var rSize = 5;
	var labelWidths = new Array();
	var selectedTab = -1;
	for (var i = 0; i < tabCount; i++)
	{
		var currLabel = tabNames[i];

		if(currLabel.charAt(0) === '+')
		{
			currLabel = currLabel.substring(1);
			selectedTab = i;
		}

		var currW = mxUtils.getSizeForString(currLabel, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;

		if (currW === 0)
		{
			labelWidths[i] = 42;
		}
		else
		{
			labelWidths[i] = currW;
		}
	}

	var tabW = 2 * labelOffset + Math.max.apply(Math, labelWidths);
	var minW = tabW + rSize;
	w = Math.max(w, minW);
	h = Math.max(h, 2 * startOffset + tabCount * tabH + (tabCount - 1) * tabOffset);

	c.translate(x, y);

	this.background(c, w, h, rSize, tabW);
	c.setShadow(false);
	this.backTabs(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);
	this.focusTab(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);
	this.tabText(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames);
};

mxShapeMockupVerTabBar.prototype.background = function(c, w, h, rSize, tabW)
{
	c.begin();
	c.moveTo(tabW + rSize, h);
	c.arcTo(rSize, rSize, 0, 0, 1, tabW, h - rSize);
	c.lineTo(tabW, rSize);
	c.arcTo(rSize, rSize, 0, 0, 1, tabW + rSize, 0);
	c.lineTo(w, 0);
	c.lineTo(w, h);
	c.close();
	c.fillAndStroke();
};

mxShapeMockupVerTabBar.prototype.backTabs = function(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)
{
	var tabStyle = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TAB_STYLE, mxShapeMockupVerTabBar.prototype.cst.BLOCK);

	var currH = startOffset;

	for (var i=0; i < tabCount; i++)
	{
		if (selectedTab !== i)
		{
			if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.BLOCK)
			{
				c.rect(0, currH, tabW, tabH);
			}
			else if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.ROUND)
			{
				c.begin();
				c.moveTo(tabW, currH + tabH + rSize);
				c.arcTo(rSize, rSize, 0, 0, 0, tabW - rSize, currH + tabH);
				c.lineTo(rSize, currH + tabH);
				c.arcTo(rSize, rSize, 0, 0, 1, 0, currH + tabH - rSize);
				c.lineTo(0, currH + rSize);
				c.arcTo(rSize, rSize, 0, 0, 1, rSize, currH);
				c.lineTo(tabW - rSize, currH);
				c.arcTo(rSize, rSize, 0, 0, 0, tabW, currH - rSize);
			}

			c.fillAndStroke();
		}

		currH = currH + tabH + tabOffset;
	}
};

mxShapeMockupVerTabBar.prototype.focusTab = function(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)
{
	var tabStyle = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TAB_STYLE, mxShapeMockupVerTabBar.prototype.cst.BLOCK);
	var selectedFill = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.STYLE_FILLCOLOR2, '#008cff');

	if (selectedTab !== -1)
	{

		var currH = startOffset + (tabH  + tabOffset) * selectedTab;
		c.setStrokeColor(selectedFill);
		c.setFillColor(selectedFill);

		if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.BLOCK)
		{
			c.begin();
			c.moveTo(tabW + rSize, h);
			c.arcTo(rSize, rSize, 0, 0, 1, tabW, h - rSize);
			c.lineTo(tabW, currH + tabH);
			c.lineTo(0, currH + tabH);
			c.lineTo(0, currH);
			c.lineTo(tabW, currH);
			c.lineTo(tabW, rSize);
			c.arcTo(rSize, rSize, 0, 0, 1, tabW + rSize, 0);
			c.close();
		}
		else if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.ROUND)
		{
			c.begin();
			c.moveTo(tabW + rSize, h);
			c.arcTo(rSize, rSize, 0, 0, 1, tabW, h - rSize);
			c.lineTo(tabW, currH + tabH + rSize);
			c.arcTo(rSize, rSize, 0, 0, 0, tabW - rSize, currH + tabH);
			c.lineTo(rSize, currH + tabH);
			c.arcTo(rSize, rSize, 0, 0, 1, 0, currH + tabH - rSize);
			c.lineTo(0, currH + rSize);
			c.arcTo(rSize, rSize, 0, 0, 1, rSize, currH);
			c.lineTo(tabW - rSize, currH);
			c.arcTo(rSize, rSize, 0, 0, 0, tabW, currH - rSize);
			c.lineTo(tabW, rSize);
			c.arcTo(rSize, rSize, 0, 0, 1, tabW + rSize, 0);
			c.close();
		}

		c.fillAndStroke();
	}

};

mxShapeMockupVerTabBar.prototype.tabText = function(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames)
{
	var fontColor = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TEXT_COLOR, '#666666');
	var selFontColor = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.SEL_TEXT_COLOR, '#ffffff');
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TEXT_SIZE, '17').toString();

	c.setFontColor(fontColor);
	c.setFontSize(fontSize);

	var currH = startOffset;

	for (var i=0; i < tabCount; i++)
	{
		var currLabel = tabNames[i];

		if (i === selectedTab)
		{
			c.setFontColor(selFontColor);
		}

		if (currLabel.charAt(0) === '+')
		{
			currLabel = currLabel.substring(1);
		}

		c.text(tabW * 0.5, currH + tabH * 0.5, 0, 0, currLabel, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);

		currH = currH + tabH + tabOffset;

		if (i === selectedTab)
		{
			c.setFontColor(fontColor);
		}
	}

};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupVerTabBar.prototype.cst.SHAPE_VER_TAB_BAR] = mxShapeMockupVerTabBar;

//**********************************************************************************************************************************************************
//Alert Box (LEGACY)
//**********************************************************************************************************************************************************
/**
 * Extends mxShape.
 */
function mxShapeMockupAlertBox(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
 * Extends mxShape.
 */
mxUtils.extend(mxShapeMockupAlertBox, mxShape);

mxShapeMockupAlertBox.prototype.cst = {
		MAIN_TEXT : 'mainText',
		SUB_TEXT : 'subText',
		BUTTON_TEXT : 'buttonText',
		TEXT_SIZE : 'textSize',
		TEXT_COLOR : 'textColor',
		STROKE_COLOR2 : 'strokeColor2',
		STROKE_COLOR3 : 'strokeColor3',
		SHAPE_ALERT_BOX : 'mxgraph.mockup.containers.alertBox'
};

/**
 * Function: paintVertexShape
 * 
 * Paints the vertex shape.
 */
mxShapeMockupAlertBox.prototype.paintVertexShape = function(c, x, y, w, h)
{
	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
	var closeColor = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.STROKE_COLOR2, '#008cff');
	var insideColor = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.STROKE_COLOR3, '#c4c4c4');
	c.translate(x, y);

	h = Math.max(h, 75);
	w = Math.max(w, 90);

	this.background(c, x, y, w, h, bgColor, frameColor);
	c.setShadow(false);
	this.foreground(c, x, y, w, h, frameColor, insideColor, closeColor);
};

mxShapeMockupAlertBox.prototype.background = function(c, x, y, w, h, bgColor, frameColor)
{
	c.setFillColor(bgColor);
	c.setStrokeColor(frameColor);
	c.rect(0, 0, w, h);
	c.fillAndStroke();
};

mxShapeMockupAlertBox.prototype.foreground = function(c, x, y, w, h, frameColor, insideColor, closeColor)
{
	var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');

	c.setStrokeColor(closeColor);
	c.ellipse(w - 25, 5, 20, 20);
	c.stroke();

	c.setStrokeColor(insideColor);
	c.begin();
	c.moveTo(0, 30);
	c.lineTo(w, 30);
	c.stroke();

	//buttons
	var windowTitle = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.MAIN_TEXT, 'Window Title').toString();
	var subText = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.SUB_TEXT, 'Sub Text').toString().split(',');
	var buttonText = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.BUTTON_TEXT, 'OK,Cancel').toString().split(',');
	var fontColor = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.TEXT_COLOR, '#666666');
	var fontSize = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.TEXT_SIZE, '17').toString();

	var buttonCount = buttonText.length;
	var buttonOffset = 10;
	var buttonW = (w - buttonOffset * (buttonCount + 1)) / buttonCount;

	c.setFontColor(fontColor);
	c.setFontSize(fontSize);
	c.text(10, 15, 0, 0, windowTitle, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);

	var currW = buttonOffset;

	for (var i = 0; i < buttonText.length; i++)
	{
		if (buttonText[i] !== '')
		{
			c.rect(currW, h - 10 - fontSize * 1.5, buttonW, fontSize * 1.5);
			c.stroke();
			c.text(currW + buttonW * 0.5, h - 10 - fontSize * 0.75, 0, 0, buttonText[i], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
		}

		currW = currW + buttonW + buttonOffset;
	}


	for (var i = 0; i < subText.length; i++)
	{
		c.text(w * 0.5, 30 + fontSize * (i * 1.5 + 0.75), 0, 0, subText[i], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
	}

	c.stroke();
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupAlertBox.prototype.cst.SHAPE_ALERT_BOX] = mxShapeMockupAlertBox;

//**********************************************************************************************************************************************************
//Rounded rectangle (adjustable rounding)
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupContainersRRect(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupContainersRRect, mxShape);

mxShapeMockupContainersRRect.prototype.cst = {
		RRECT : 'mxgraph.mockup.containers.rrect',
		R_SIZE : 'rSize'
};

/**
* Function: paintVertexShape
* 
* Paints the vertex shape.
*/
mxShapeMockupContainersRRect.prototype.paintVertexShape = function(c, x, y, w, h)
{
	c.translate(x, y);

	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupContainersRRect.prototype.cst.R_SIZE, '10'));
	c.roundrect(0, 0, w, h, rSize);
	c.fillAndStroke();
};

mxCellRenderer.registerShape(mxShapeMockupContainersRRect.prototype.cst.RRECT, mxShapeMockupContainersRRect);

//**********************************************************************************************************************************************************
//Anchor (a dummy shape without visuals used for anchoring)
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupContainersAnchor(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
};

/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupContainersAnchor, mxShape);

mxShapeMockupContainersAnchor.prototype.cst = {
		ANCHOR : 'mxgraph.mockup.containers.anchor'
};

/**
* Function: paintVertexShape
* 
* Paints the vertex shape.
*/
mxShapeMockupContainersAnchor.prototype.paintVertexShape = function(c, x, y, w, h)
{
};

mxCellRenderer.registerShape(mxShapeMockupContainersAnchor.prototype.cst.ANCHOR, mxShapeMockupContainersAnchor);

//**********************************************************************************************************************************************************
//Top Button
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupContrainersTopButton(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupContrainersTopButton, mxShape);

mxShapeMockupContrainersTopButton.prototype.cst = {
		TOP_BUTTON : 'mxgraph.mockup.containers.topButton',
		R_SIZE : 'rSize'
};

/**
* Function: paintVertexShape
* 
* Paints the vertex shape.
*/
mxShapeMockupContrainersTopButton.prototype.paintVertexShape = function(c, x, y, w, h)
{
	c.translate(x, y);

	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupContrainersTopButton.prototype.cst.R_SIZE, '10'));

	c.begin();
	c.moveTo(0, rSize);
	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
	c.lineTo(w - rSize, 0);
	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
	c.lineTo(w, h);
	c.lineTo(0, h);
	c.close();
	c.fillAndStroke();
};

mxCellRenderer.registerShape(mxShapeMockupContrainersTopButton.prototype.cst.TOP_BUTTON, mxShapeMockupContrainersTopButton);

//**********************************************************************************************************************************************************
//Left Button
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupContainersLeftButton(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupContainersLeftButton, mxShape);

mxShapeMockupContainersLeftButton.prototype.cst = {
		LEFT_BUTTON : 'mxgraph.mockup.containers.leftButton',
		R_SIZE : 'rSize'
};

/**
* Function: paintVertexShape
* 
* Paints the vertex shape.
*/
mxShapeMockupContainersLeftButton.prototype.paintVertexShape = function(c, x, y, w, h)
{
	c.translate(x, y);

	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupContainersLeftButton.prototype.cst.R_SIZE, '10'));

	c.begin();
	c.moveTo(w, 0);
	c.lineTo(w, h);
	c.lineTo(rSize, h);
	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
	c.lineTo(0, rSize);
	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
	c.close();
	c.fillAndStroke();
};

mxCellRenderer.registerShape(mxShapeMockupContainersLeftButton.prototype.cst.LEFT_BUTTON, mxShapeMockupContainersLeftButton);

//**********************************************************************************************************************************************************
//rect with margins
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupContainersMarginRect(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupContainersMarginRect, mxShape);

mxShapeMockupContainersMarginRect.prototype.cst = {
		SHAPE_MARGIN_RECT : 'mxgraph.mockup.containers.marginRect',
		MARGIN : 'rectMargin',
		MARGIN_TOP : 'rectMarginTop',
		MARGIN_LEFT : 'rectMarginLeft',
		MARGIN_BOTTOM : 'rectMarginBottom',
		MARGIN_RIGHT : 'rectMarginRight'
};
/**
* Function: paintVertexShape
* 
* Paints the vertex shape.
*/
mxShapeMockupContainersMarginRect.prototype.paintVertexShape = function(c, x, y, w, h)
{
	
	c.translate(x, y);
	this.background(c, x, y, w, h);
};

mxShapeMockupContainersMarginRect.prototype.background = function(c, x, y, w, h, state)
{
	var margin = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN, '0'));
	var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_TOP, '0'));
	var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_LEFT, '0'));
	var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_BOTTOM, '0'));
	var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_RIGHT, '0'));

	var x1 = margin + marginLeft;
	var y1 = margin + marginTop;
	var w1 = w - marginRight - x1 - margin;
	var h1 = h - marginBottom - y1 - margin;

	if (w1 >0 && h1 > 0)
	{
		c.begin();
		c.roundrect(x1, y1, w1, h1, 10, 10);
		c.fillAndStroke();
	}
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupContainersMarginRect.prototype.cst.SHAPE_MARGIN_RECT] = mxShapeMockupContainersMarginRect;

//**********************************************************************************************************************************************************
//rect with margins (not rounded)
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupContainersMarginRect2(bounds, fill, stroke, strokewidth)
{
	mxShape.call(this);
	this.bounds = bounds;
	this.fill = fill;
	this.stroke = stroke;
	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};

/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupContainersMarginRect2, mxShape);

mxShapeMockupContainersMarginRect2.prototype.cst = {
		SHAPE_MARGIN_RECT : 'mxgraph.mockup.containers.marginRect2',
		MARGIN : 'rectMargin',
		MARGIN_TOP : 'rectMarginTop',
		MARGIN_LEFT : 'rectMarginLeft',
		MARGIN_BOTTOM : 'rectMarginBottom',
		MARGIN_RIGHT : 'rectMarginRight'
};
/**
* Function: paintVertexShape
* 
* Paints the vertex shape.
*/
mxShapeMockupContainersMarginRect2.prototype.paintVertexShape = function(c, x, y, w, h)
{
	
	c.translate(x, y);
	this.background(c, x, y, w, h);
};

mxShapeMockupContainersMarginRect2.prototype.background = function(c, x, y, w, h, state)
{
	var margin = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN, '0'));
	var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_TOP, '0'));
	var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_LEFT, '0'));
	var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_BOTTOM, '0'));
	var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_RIGHT, '0'));

	var x1 = margin + marginLeft;
	var y1 = margin + marginTop;
	var w1 = w - marginRight - x1 - margin;
	var h1 = h - marginBottom - y1 - margin;

	if (w1 >0 && h1 > 0)
	{
		c.begin();
		c.rect(x1, y1, w1, h1);
		c.fillAndStroke();
	}
};

mxCellRenderer.prototype.defaultShapes[mxShapeMockupContainersMarginRect2.prototype.cst.SHAPE_MARGIN_RECT] = mxShapeMockupContainersMarginRect2;