/// <reference path="../Scripts/jspack-vsdoc.js" />

var Diagram = MindFusion.Diagramming.Diagram;
var ColumnStyle = MindFusion.Diagramming.ColumnStyle;
var Alignment = MindFusion.Diagramming.Alignment;
var Rect = MindFusion.Drawing.Rect;
var Font = MindFusion.Drawing.Font;
var GlassEffect = MindFusion.Diagramming.GlassEffect;
var Style = MindFusion.Diagramming.Style;

document.addEventListener("DOMContentLoaded", function () {
	// create a DiagramView component that wraps the "diagram" canvas
	var diagramView = MindFusion.Diagramming.DiagramView.create(document.getElementById("diagram"));
	diagram = diagramView.diagram;
	diagram.linkHeadShapeSize = 2;

	var shapeNodeStyle = new Style();
	shapeNodeStyle.brush = { type: 'SolidBrush', color: '#e0e9e9' };
	shapeNodeStyle.stroke = "#7F7F7F";
	shapeNodeStyle.fontName = "Verdana";
	shapeNodeStyle.fontSize = 3;
	shapeNodeStyle.backBrush = "#e0e9e9";
	shapeNodeStyle.nodeEffects = [new GlassEffect()];

	diagram.style = shapeNodeStyle;

	// create first table
	var table1 = diagram.factory.createTableNode(20, 20, 62, 42);
	table1.redimTable(2, 6);
	table1.getColumn(1).columnStyle = ColumnStyle.AutoWidth;
	table1.text = "Preparation";
	table1.captionBackBrush = "#9caac6";
	table1.captionFont = new Font("sans-serif", 3, true /*bold*/, true /*italic*/);

	var cell = table1.getCell(0, 0);
	cell.columnSpan = 2;
	cell.text = "Calculate Price";
	cell.textAlignment = Alignment.Center;
	cell.textColor = "#2d3956";
	cell.brush = "#9caac6";

	var cell = table1.getCell(0, 3);
	cell.columnSpan = 2;
	cell.text = "Print Papers";
	cell.textAlignment = Alignment.Center;
	cell.textColor = "#2d3956";
	cell.brush = "#9caac6";

	var cell = table1.getCell(0, 1);
	cell.rowSpan = 2;
	cell.imageLocation = "icon_calculator.png";

	var cell = table1.getCell(0, 4);
	cell.rowSpan = 2;
	cell.imageLocation = "icon_print.png";

	var preparation_tasks = ["Distance", "Cargo Weight", "Invoice", "Track Number"];

	for (var i = 1; i <= 4; i++) {
		var row = i <= 2 ? i : i + 1;
		var cell = table1.getCell(1, row);
		cell.text = preparation_tasks[i - 1];
		cell.textAlignment = Alignment.Far;
	}


	// create second table
	var table2 = diagram.factory.createTableNode(120, 36, 55, 30);
	table2.redimTable(3, 4);
	table2.getColumn(2).columnStyle = ColumnStyle.AutoWidth;
	table2.text = "Spedition";
	table2.captionBackBrush = "black";
	table2.captionFont = new Font("Verdana", 4, true, false);
	table2.textColor = "white";

	var cell = table2.getCell(1, 0);
	cell.rowSpan = 3;
	cell.columnSpan = 2;
	cell.imageLocation = "icon_delivery.png";

	var delivery_tasks = ["route", "fuel", "driver_id", ""];
	for (var i = 0; i < 4; i++) {
		var cell = table2.getCell(0, i);
		cell.text = delivery_tasks[i];
		cell.textColor = "#003466";
	}
	var colors = ["#000063", "#ce0000", "#5a79a5"];
	for (var i = 1; i < 4; i++) {
		var cell = table2.getCell(i - 1, 3);
		cell.text = "District " + i;
		cell.textColor = "#e0e9e9";
		cell.brush = colors[i - 1];
	}


	// create third table
	var table3 = diagram.factory.createTableNode(25, 80, 75, 30);
	table3.redimTable(4, 4);
	table3.getColumn(4).columnStyle = ColumnStyle.AutoWidth;
	table3.text = "Delivery";
	table3.captionBackBrush = "#ce0000";
	table3.captionFont = new Font("Verdana", 4, false, true);
	table3.textColor = "#e0e9e9";

	var cell = table3.getCell(0, 0);
	cell.columnSpan = 2;
	cell.text = "Destination";
	cell.font = new Font("Verdana", 3, true, false);
	cell.textAlignment = Alignment.Center;
	cell.textColor = "#000063";
	cell.brush = "#c0c0c0";

	var cell = table3.getCell(0, 1);
	cell.rowSpan = 3;
	cell.imageLocation = "icon_home.png";

	var delivery_tasks = ["address", "to door", ""];
	for (var i = 1; i < 3; i++) {
		var cell = table3.getCell(1, i);
		cell.text = delivery_tasks[i - 1];
		cell.textColor = "#003466";

		if (i == 2)
			cell.rowSpan = 2;
	}

	var cell = table3.getCell(2, 0);
	cell.columnSpan = 2;
	cell.text = "Arrival";
	cell.font = new Font("Verdana", 3, true, false);
	cell.textAlignment = Alignment.Center;
	cell.textColor = "#e0e9e9";
	cell.brush = "#003466";

	var cell = table3.getCell(2, 1);
	cell.rowSpan = 3;
	cell.brush = "#9caac6";
	cell.imageLocation = "icon_time.png";

	var delivery_tasks = ["time", "receiver", "charges"];
	for (var i = 1; i < 4; i++) {
		var cell = table3.getCell(3, i);
		cell.text = delivery_tasks[i - 1];
		cell.textColor = "#003466";
		cell.brush = "#9caac6";
	}
	// draw link from "item 1" in first table to "row 0" in second table
	var link = diagram.factory.createDiagramLink(table1, table2);
	link.originIndex = 1;
	link.destinationIndex = 0;

	var link = diagram.factory.createDiagramLink(table2, table3);
	link.originIndex = 2;
	link.dynamic = true;
	link.destinationIndex = 1;
});