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

<%@ Register Src="MyLabel.ascx" TagName="MyLabel" TagPrefix="MyControls" %>
<%@ 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 id="Head1" runat="server">
    <title>MindFusion NetDiagram Sample - Image Map</title>
    <link href="common/jquery-ui.min.css" rel="stylesheet" />
    <link href="common/samples.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="header" style="height: 49px;">
        <div style="float: left; margin-right: 5px;">
            <asp:Label ID="label" runat="server" CssClass="label">Image format:</asp:Label>
            <div>
                <asp:ListBox ID="imageFormat" runat="server">
                    <asp:ListItem Selected="True">Jpg</asp:ListItem>
                    <asp:ListItem>Bmp</asp:ListItem>
                    <asp:ListItem>Gif</asp:ListItem>
                    <asp:ListItem>Png</asp:ListItem>
                </asp:ListBox>
            </div>
        </div>
        <div style="float: left; margin-right: 15px; margin-top: 19px;">
            <asp:Button ID="button1" runat="server" Text="Update" OnClick="button1_Click" />
        </div>
        <div style="float: left; margin-right: 5px;">
            <asp:Label ID="label1" runat="server" CssClass="label">Text:</asp:Label>
            <asp:TextBox ID="text" runat="server"></asp:TextBox>
            <asp:Button ID="button" runat="server" Text="Change" OnClick="button_Click" />
        </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 sample demonstrates how to use NetDiagram in ImageMap client side mode and
                how to handle server side events while operating in this mode. You can select objects
                in the diagram by clicking on them, then you can edit the text of the selected objects
                by using the text box present below.</p>
        </div>
    </div>
    <div id="content" style="top: 60px; bottom: 24px;">
        <ndiag:DiagramView ID="diagramView" runat="server" Style="position: absolute; left: 0px;
            top: 0px; right: 0px; bottom: 120px;" ClientSideMode="ImageMap" ClientScriptMode="JQuery"
            JQueryLocation="common/jquery.min.js" OnCellClicked="diagramView_TableCellClicked"
            OnNodeClicked="diagramView_NodeClicked" OnTreeExpanded="diagramView_TreeExpanded"
            OnTreeCollapsed="diagramView_TreeCollapsed">
        </ndiag:DiagramView>
        <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 120px;">
            <MyControls:MyLabel ID="eventlog" Style="display: block; position: absolute; left: 0px;
                top: 0px; right: 0px; bottom: 0px; border-top: solid 1px #e2e4e7; overflow: auto;"
                runat="server" />
        </div>
    </div>
    <div id="footer" style="height: 24px;">
        <span id="copyright"></span>
    </div>
	<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>
    </form>
</body>
</html>
