<%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" Codebehind="Default.aspx.cs" %>

<%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms" TagPrefix="ndiag" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>MindFusion NetDiagram Tutorial</title>
  <link href="common/jquery-ui.min.css" rel="stylesheet" />
  <link href="common/samples.css" rel="stylesheet" />
  <script type="text/javascript" src="common/jquery.min.js"></script>
  <script type="text/javascript" src="common/jquery-ui.min.js"></script>
  <script type="text/javascript" src="common/samples.js"></script>
</head>
<body>
<form id="form1" runat="server">

  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>

  <div id="header" style="height: 49px;">
  <div style="float: left; margin-top: 17px;">
			<asp:Button ID="Button1" runat="server" Text="Postback" 
				onclick="Button1_Click" />
			<button type="button" onclick="diagram.copyToClipboard();">
				copy</button>
			<button type="button" onclick="diagram.cutToClipboard()">
				cut</button>
			<button type="button" onclick="diagram.pasteFromClipboard(5, 5)">
				paste</button>
			<button type="button" onclick="diagram.undo()">
				undo</button>
			<button type="button" onclick="diagram.redo()">
				redo</button>
		</div>
    <div style="float: right; margin-right: 5px; margin-top: 17px;">
      <button id="expandButton" onclick="onExpandCollapse()">&gt;</button>
    </div>
  </div>

  <div id="info" style="top: 60px; bottom: 24px;">
    <div id="infoTab" style="padding: 10px;">
      <h1>About this sample</h1>
      <p>This example shows how to create a custom node class that exposes some new properties in addition to the ones defined by DiagramNode.</p>
    </div>
  </div>

  <div id="content" style="top: 60px; bottom: 24px;">
      <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 150px; border-right: 1px solid #e2e4e7; overflow: hidden;">
	  		<ndiag:NodeListView runat="server" ID="nodeListView" ClientSideMode="Canvas" JsLibraryLocation="Scripts/Mindfusion.Diagramming.js"
			style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 150px; height: auto; overflow: auto;" />
    </div>

    <ndiag:DiagramView ID="diagramView" runat="server" style="position: absolute; left: 151px; top: 0px; right: 0px; bottom: 0px; overflow: hidden;"
      ClientSideMode="Canvas"
      Behavior="Custom"
	  JsLibraryLocation="Scripts/Mindfusion.Diagramming.js">
      <Diagram BackBrush="s:#FFFFFFFF" LinkHeadShape="Triangle" />
    </ndiag:DiagramView>
  </div>

  <div id="footer" style="height: 24px;">
    <span id="copyright"></span>
  </div>

</form>
</body>

<script type="text/javascript">
	var diagram = null;

  	Sys.Application.add_load(function () {
  		diagram = MindFusion.Diagramming.Diagram.find('diagramView');
  	});

</script>

</html>