<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AirlineReservation.aspx.cs" Inherits="WebSampleBrowser.Dashboard.AirlineReservation" %>

<%@ Register Assembly="Syncfusion.EJ.Web" Namespace="Syncfusion.JavaScript" TagPrefix="ej" %>
<%@ Register Assembly="Syncfusion.EJ.Web" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>

<!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>Essential Studio for ASP.NET : Airline Reservation</title>
    <link href="../Content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
    <link href="../Content/ejthemes/default-theme/default-responsive.css" rel="stylesheet" />
    <link href="../Content/ejthemes/ej.widgets.core.css" rel="stylesheet" />
    <link href="../Content/ejthemes/default-theme/ej.theme.css" rel="stylesheet" />
    <link href="../Content/AirlineReservation/sample.css" rel="Stylesheet" />
    <link rel="shortcut icon" href="~/Content/images/favicon.ico" />

    <!--[if lt IE 9]>
    <script src='<%= Page.ResolveClientUrl("~/Scripts/jquery-1.11.3.min.js")%>' type="text/javascript"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src='<%= Page.ResolveClientUrl("~/Scripts/jquery-2.1.4.min.js")%>' type="text/javascript"></script>
    <!--<![endif]-->
    <script src="../Scripts/jquery.globalize.min.js"></script>
    <script src="../Scripts/jsrender.min.js"></script>
    <script src="../Scripts/ej.web.all.min.js"></script>

    <script src="../Scripts/AirlineReservation/sample.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>
        <div class="header">
            <span>AIRLINE RESERVATION</span>
        </div>

        <div class="sampleContainer">
            <table class="sampleOuterTable" cellspacing="15" style="width: 100%">
                <tr>
                    <td></td>
                    <td style="text-align: right; height: 40px;">
                        <input type="button" id="btnOpenPopup" class="bookNow" style="float: right;" value="Book Now" />
                        <%--<ej:Button ID ="btnOpenPopup" runat="server" Text="Book now" ClientSideOnClick="OpenPopup()"></ej:Button>--%>
                        <div style="height: 10px; width: 100%;"></div>
                    </td>
                </tr>
                <tr>
                    <td id="Property_space" style="width: 325px;">
                        <div style="padding-bottom: 85px;">
                            <div class="userInteractionDiv">
                                <table class="userInteractionTable">
                                    <tr>
                                        <td>
                                            <label>Travel Type</label><br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div class="travelTypeDiv">
                                                <table>
                                                    <tr>
                                                        <td style="width: 80%;">
                                                            <label id="travelType"></label>
                                                        </td>
                                                        <td>
                                                            <ej:ToggleButton ID="btnOneWay" runat="server" ClientSideOnChange="btnOneWayChange" Size="Normal" ContentType="ImageOnly" DefaultPrefixIcon="e-icon"></ej:ToggleButton>
                                                            <ej:ToggleButton ID="btnRoundTrip" runat="server" ClientSideOnChange="btnRoundTripChange" Size="Normal" ContentType="ImageOnly" DefaultPrefixIcon="e-icon"></ej:ToggleButton>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>Adult</label></td>
                                        <td>
                                            <label>Child</label></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px">
                                            <div>
                                                <input type="button" id="adultDecrement" value="-" class="iconButton" />
                                                <input type="text" value="3" id="adultCount" onkeypress="return isNumber(event)" class="countBox" />
                                                <input type="button" id="adultIncrement" value="+" class="iconButton" />
                                            </div>
                                        </td>
                                        <td style="width: 100px">
                                            <div>
                                                <input type="button" id="childDecrement" value="-" class="iconButton" />
                                                <input type="text" value="2" id="childCount" onkeypress="return isNumber(event)" class="countBox" />
                                                <input type="button" id="childIncrement" value="+" class="iconButton" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Leaving From</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <ej:Autocomplete ID="fromCityName" runat="server" EnableAutoFill="true" Width="100%" Value="Chennai"></ej:Autocomplete>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Going To</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <ej:Autocomplete ID="toCityName" runat="server" EnableAutoFill="true" Width="100%"></ej:Autocomplete>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>Departure</label></td>
                                        <td>
                                            <label>Return</label></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ej:DatePicker runat="server" ID="depatureDatePicker"></ej:DatePicker>
                                        </td>
                                        <td>
                                            <ej:DatePicker runat="server" ID="returnDatePicker"></ej:DatePicker>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="height: 10px;"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <ej:Button ID="btnSearchFlight" runat="server" Text="SEARCH FOR FLIGHT" Type="Button" ShowRoundedCorner="true" ClientSideOnClick="btnSearchClick"></ej:Button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="sliderDiv">
                                <table class="slideTable">
                                    <tr>
                                        <td>
                                            <label>Price Range</label></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ej:Slider ID="priceRangeSlider" runat="server" Height="8px" SliderType="Range" Values="0,100" ClientSideOnCreate="onPriceRangecreate"
                                                ClientSideOnSlide="onPriceRangeSlide" ClientSideOnStart="onPriceRangeStart" ClientSideOnChange="onPriceRangechange">
                                            </ej:Slider>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div>
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <span id="minPrice"></span>
                                                        </td>
                                                        <td>
                                                            <span class="maxPriceSpan" style="margin-left: 201px;" id="maxPrice"></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>Departure Time</label><br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <ej:Slider ID="timeRangeSlider" runat="server" Height="8px" SliderType="Range" Values="0,100" ClientSideOnCreate="onTimeRangecreate"
                                                ClientSideOnSlide="onTimeRangeSlide" ClientSideOnStart="onTimeRangeStart" ClientSideOnChange="onTimeRangechange">
                                            </ej:Slider>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div>
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <span id="minTime"></span>
                                                        </td>
                                                        <td>
                                                            <span style="margin-left: 212px;" id="maxTime"></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                    <td id="gid_space" colspan="2" style="vertical-align: top;">
                        <ej:Grid ID="FlightTicketBooking" runat="server" AllowPaging="true" AllowSorting="true">
                            <ClientSideEvents ActionComplete="actionComplete" ActionBegin="actionBegin" Load="gridLoad" RecordClick="recordClick" />
                            <Columns>
                                <ej:Column Field="Airline" HeaderText="Airline" Width="30" />
                                <ej:Column Field="From" HeaderText="From" Width="30" />
                                <ej:Column Field="To" HeaderText="To" Width="30" />
                                <ej:Column Field="Depart" HeaderText="Depart" Width="30" />
                                <ej:Column Field="Arrive" HeaderText="Arrive" Width="30" />
                                <ej:Column Field="Price" HeaderText="Price" Width="30" Format="{0:C}" />
                                <ej:Column Field="Rating" HeaderText="Rating" Width="40" />
                            </Columns>
                        </ej:Grid>
                    </td>
                </tr>
            </table>
        </div>
        <ej:Dialog ID="diagramView" CssClass="zoom-anim-dialog mfp-hide" runat="server" ShowOnInit="false" EnableModal="true" Width="1000" Height="530">
            <DialogContent>
                <div id="backIcon" onclick="backButtonClick()" style=""></div>
                <div id="popupContent">
                    <table class="countIconTable">
                        <tr>
                            <td colspan="2" style="height: 15%;"></td>
                        </tr>
                        <tr>
                            <td id="ResItemBox" class="countIconColumn">
                                <div style="font-size: 12px;">
                                    Select your seat by dragging the passenger icon to any available seat.
                                </div>
                                <br />
                                <div>
                                    <span id="adultCountDisplay"></span>
                                    <div class="iconDiv">
                                        <div id="adultIconDisplay">
                                        </div>
                                    </div>
                                </div>
                                <br />
                                <div>
                                    <span id="childCountDisplay"></span>
                                    <div class="iconDiv">
                                        <div id="childIconDisplay">
                                        </div>
                                    </div>
                                </div>

                            </td>
                            <td id="DiagramArea">
                                <ej:Diagram ClientIDMode="Static" ID="diagramContent" runat="server" Height="100%" Width="100%">
                                    <PageSettings ScrollLimit="Diagram" />
                                </ej:Diagram>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 18px;"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="button" id="btnBookNow" value="Book Now" class="bookNow" style="margin-left: 525px;" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="bg_mask" style="margin-top: -163px; margin-left: 0px;">
                    <div id="frontlayer">
                        <span style="font-size: 17px">Your booking has been confirmed. </span>
                        <br />
                        <br />
                        <span style="font-size: 17px">Thanks for choosing our service</span><br />
                        <br />
                        <span style="color: #22BAF1; font-size: 22px;">Have a Great journey !</span><br />
                        <br />

                        <div>
                            <table>
                                <tr>
                                    <td>Rate this App</td>
                                    <td>
                                        <input type="text" id="airlineRating" class="rating" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </ej:Dialog>
    </form>
</body>
</html>
using Syncfusion.JavaScript.DataVisualization.Models.Diagram;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Syncfusion.JavaScript.DataVisualization.DiagramEnums;

namespace WebSampleBrowser.Dashboard
{
    public partial class AirlineReservation : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<String> citiesDataSource = GetCities();
            fromCityName.DataSource = citiesDataSource;
            toCityName.DataSource = citiesDataSource;

            String date = DateTime.Today.Date.ToString("MM/dd/yyyy").Replace('-', '/');
            //depatureDatePicker.Value = date;
            //returnDatePicker.Value = date;

            InitializeDiagram();
            BindGridDataSource();
        }

        private void InitializeDiagram()
        {
            diagramContent.SnapSettings.SnapConstraints = Syncfusion.JavaScript.DataVisualization.DiagramEnums.SnapConstraints.None;
            diagramContent.PageSettings.ShowPageBreak = false;
            diagramContent.PageSettings.MultiplePage = false;
            diagramContent.PageSettings.PageBackgroundColor = "transparent";
            diagramContent.PageSettings.PageBorderWidth = 0;
            diagramContent.PageSettings.PageOrientation = PageOrientation.Landscape;
            diagramContent.PageSettings.PageWidth = 625;
            diagramContent.PageSettings.PageHeight = 347;
            diagramContent.Height = "347px";
            diagramContent.Width = "625px";
            diagramContent.OnClientClick = "onNodeClick";
            diagramContent.OnClientDrop = "onItemDrop";
            diagramContent.OnClientDrag = "nodedragging";
            diagramContent.OnClientMouseEnter = "nodemouseenter";
            diagramContent.OnClientMouseLeave = "nodemouseleave";
            diagramContent.Model.BackgroundImage.Source = "../Content/AirlineReservation/images/plane-image.png";
            diagramContent.Model.BackgroundImage.Scale = ScaleConstraints.None;
            diagramContent.Model.BackgroundImage.Alignment = ImageAlignment.None;
            diagramContent.Model.Constraints = diagramContent.Model.Constraints ^ DiagramConstraints.Zoomable;
            diagramContent.Model.Nodes.Add(CreateNode("seatD1", 160, 85, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD2", 200, 85, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD3", 240, 85, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD4", 280, 85, 26, 23, "booked"));
            diagramContent.Model.Nodes.Add(CreateNode("seatD5_1", 375, 79, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD5_2", 375, 96, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD6_1", 415, 79, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD6_2", 415, 96, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD7_1", 494, 79, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD7_2", 494, 96, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD8_1", 532, 79, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD8_2", 532, 96, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD9_1", 570, 79, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatD9_2", 570, 96, 20, 18, ""));

            diagramContent.Model.Nodes.Add(CreateNode("seatC1", 170, 141, 26, 23, "booked"));
            diagramContent.Model.Nodes.Add(CreateNode("seatC2", 210, 141, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC3", 255, 141, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC4_1", 375, 131, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC4_2", 375, 148, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC5_1", 415, 131, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC5-2", 415, 148, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC6_1", 494, 131, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC6_2", 494, 148, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC7_1", 532, 131, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC7_2", 532, 148, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC8_1", 570, 131, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatC8_2", 570, 148, 20, 18, ""));

            diagramContent.Model.Nodes.Add(CreateNode("seatB1", 170, 170, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB2", 210, 170, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB3", 255, 170, 26, 23, "booked"));
            diagramContent.Model.Nodes.Add(CreateNode("seatB4_1", 375, 165, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB4_2", 375, 183, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB5_1", 415, 165, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB5_2", 415, 183, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB6_1", 494, 165, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB6_2", 494, 183, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB7_1", 532, 165, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB7_2", 532, 183, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB8_1", 570, 165, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatB8_2", 570, 183, 20, 18, ""));


            diagramContent.Model.Nodes.Add(CreateNode("seatA1", 154, 227, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA2", 190, 227, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA3", 230, 227, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA4", 270, 227, 26, 23, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA5_1", 375, 217, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA5_2", 375, 235, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA6_1", 415, 217, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA6_2", 415, 235, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA7_1", 494, 217, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA7_2", 494, 235, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA8_1", 532, 217, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA8_2", 532, 235, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA9_1", 570, 217, 20, 18, ""));
            diagramContent.Model.Nodes.Add(CreateNode("seatA9_2", 570, 235, 20, 18, ""));
        }

        private Node CreateNode(string nodeName, double x, double y, double width, double height, string addInfo)
        {
            BasicShape node = new BasicShape();
            node.Name = nodeName;
            node.Width = width;
            node.Height = height;
            node.OffsetX = x;
            node.OffsetY = y + 5;

            if (addInfo == "booked")
            {
                node.FillColor = "red";
                Dictionary<string, object> addInfo1 = new Dictionary<string, object>();
                addInfo1.Add("type", addInfo as object);
                node.AddInfo = addInfo1;
            }
            else
            {
                node.AddInfo = null;
            }
            return node;
        }

        private void BindGridDataSource()
        {
            List<AirLineDetails> dataArray = new List<AirLineDetails>();

            List<String> airwaysProvidersList = GetAirwaysProviders();
            List<String> citiesList = GetCities();
            Random rand = new Random();

            for (int cnt = 0; cnt < airwaysProvidersList.Count; cnt++)
            {
                int fromIndex = rand.Next(citiesList.Count - 1);
                int toIndex = rand.Next(citiesList.Count - 1);
                if (fromIndex == toIndex)
                    toIndex = (toIndex + 1) > citiesList.Count - 1 ? 0 : toIndex + 1;

                String airline = airwaysProvidersList[cnt];
                String from = citiesList[fromIndex];
                String to = citiesList[toIndex];
                Double depart = GetTime(rand);
                Double arrive = GetTime(rand);
                int price = rand.Next(5000 - 400 + 1) + 400;
                int rating = rand.Next(1, 5);
                dataArray.Add(new AirLineDetails()
                {
                    Airline = airline,
                    From = from,
                    To = to,
                    Depart = depart,
                    Arrive = arrive,
                    Price = price,
                    Rating = rating
                });
            }
            FlightTicketBooking.DataSource = dataArray;
            FlightTicketBooking.DataBind();
        }

        private List<String> GetCities()
        {
            return new List<string>()
            {
                "Atlanta", "London", "Los Angeles", "Dallas", "Alexandria", "Paris", "Amsterdam", "Danver", "Madrid", "Houston", "HongKong", 
                "Minneapolis", "Detroit", "Bangkok", "SanFransisco", "Bandon", "Miami", "New york", "Singapore", "Tokyo", "Beijing", "Seattle",
                "Belize City", "Orlando", "Berlin", "Bishop", "Toronto", "Brownwood", "Saint Louis", "Chicago", "FrankFurt", "Madrid", "Las Vegas",
                "Phoenix", "Delhi", "Dubai", "Newark", "ROME", "Charlotte", "Munich", "Guangzhou", "Eureka", "Sydney", "Jakarta", "Philadelphia",
                "Barcelona", "Incheon", "Istanbul", "Shangai", "Kuala Lumpur", "Mexico", "Boston", "Melbourne", "Mumbai", "Dublin", "Palma De Mallorca",
                "Fort Lauderdale", "Zurich", "Manaila", "Taipei", "Copenhagen", "Manchester", "Shenzhen", "Sao paulo", "Baltimore MD", "Salt Lake City",
                "Moscow", "Vienna", "Oslo", "Millan", "Brisbane", "Antalya", "Honolulu", "Johannesburg", "Brussels", "Tampa FL", "Stockholm",
                "Dusseldorf","San Diego CA", "Vancouver", "Sapporo", "Washington", "Fukuoka", "Chengdu", "Athens", "Osaka", "Jeddah", "Naha",
                "St Louis MO", "Cairo", "Portland", "Seoul", "CinCinnati OH", "Lisbon", "Bogota", "Helsinki", "Hall Beach", "Eagle", "Easton", "Elkedra",
                "Finke", "Florenceh", "Franklin", "Fuyang", "Gangaw", "Gangneung", "Goa", "Greenville", "Indiana", "Inverway", "Itumbiara",
                "Kalgoorlieh", "Kambuaya", "Kasba Lake", "Kenora", "Kingston", "Queretaro", "Qiemo", "Quillayute", "Queenstown", "Quanduc", "Rafha",
                "Rajshahi", "Ramadan", "Ranong", "Redencao", "Richmond", "Ube", "Udine", "Union City", "Ulusaba", "Upland", "Valentine", "Vaasa",
                "Vadodara", "Varanasi", "Vejle", "Xiangfan", "Xingcheng", "Xining", "Xinguara", "Xayabury", "Yaroslavl", "Yeovilton", "Yonago",
                "Yorketown", "Zambezi", "Zahedan", "Zacatecas", "Zephyrhills", "Chennai"
            };
        }

        public List<String> GetAirwaysProviders()
        {
            return new List<string>()
            {
                "Aero Flot", "Aero Mexico", "Air NewZealand", "AirBerlin", "AirCanada", "AirFrance", "AirIndia", "AirMadagascar",
                "AirPhilipines", "AirTran", "AlaskaAirlines", "Alitalia", "Austrian", "Avianca", "British Airways", "Brussels Airlines",
                "CathayPacific", "China Airlines", "Continental Airlines", "Croatia Airlines", "Dragonair", "Delta", "Elal", "Emirates",
                "Ethiopian", "Garuda Indonesia", "Hawaiian", "Iberia", "IceLandAir", "Jal", "KLM", "KoreanAir", "Lan", "Lot", "Lufthansa",
                "Malaysia", "MidWest Airlines", "NWA", "Oceanic Airlines", "Qantas", "Sabena", "Singapore Airlines", "SouthAfrican Airways",
                "Spirit Airlines", "SriLankan Airlines", "SwissAir", "Tap", "Thai", "Turkish AirLines", "United Airlines", "Varig",
                "Vietnam Airlines", "Wideroe"
            };
        }

        private double GetTime(Random rand)
        {
            double time = rand.Next(23) + 1;
            double minutes = rand.Next(59) + 1;
            return time + (minutes / 100);
        }

        public class AirLineDetails
        {
            public string Airline { get; set; }
            public string From { get; set; }
            public string To { get; set; }
            public double Depart { get; set; }
            public double Arrive { get; set; }
            public double Price { get; set; }
            public int Rating { get; set; }
        }
    }
}
var oneWay = false;
var roundTrip = false;
var selectedNode = null;
var adultCount = 0;
var childCount = 0;
var initSelectedAdult = 0;
var initSelectedChild = 0;
var minPrice = 200;
var maxPrice = 3200;
var minTime = null;
var maxTime = null;
var data;

var nHoverNode = null;
var oHoverNode = null;

$(window).on("load", function () {

    if ((ej.browserInfo().name === "msie" && Number(ej.browserInfo().version) < 9)) {
        alert("Diagram will not be supported in IE Version < 9");
    }
    $("#priceRangeSlider").ejSlider('option', 'values', [25, 75]);
    $("#timeRangeSlider").ejSlider('option', 'values', [25, 75]);

    var gridObj = $("#FlightTicketBooking").data("ejGrid");
    if (gridObj.model.selectedRow >= 0)
        var gridObj = $("#FlightTicketBooking").data("ejGrid");
    $("#btnOpenPopup").css("display", "block");

});
$(window).resize(function () {
    //$("#Property_space").css("width", 340);
    $("#gid_space").css("width", document.body.clientWidth - 340);
    //$("#diagramContent_canvas_svg")[0].setAttribute("height", "328px");
    //$("#diagramContent_canvas_svg")[0].setAttribute("width", "623px");
})

function addDiagramContents() {
    var nodes = [];

    return nodes;
}
function openPopup() {

    var adultCount = getAdultCount();
    var childCount = getChildCount();
    if ((adultCount > 0 || childCount > 0)) {
        initSelectedAdult = adultCount;
        initSelectedChild = childCount;


        $("#diagramView").ejDialog("open");
        $("#popupContent").css("display", "block");
        $("#diagramView").css("height", "100%");
        $("#diagramView").css("width", "100%");

        //$(".sampleOuterTable").css("display", "none");
        //$("#diagramView").css("display", "block");


    }
    else if (document.getElementById("travelType") && document.getElementById("travelType").innerText == "") {
        alert("Please select the travel type");
    }
    else if (adultCount == 0 && childCount == 0)
        alert("Please select at least one passenger for booking");
    intializeDiagram();
    hideFrontLayer();
    showPopupContent();
    updateAdultCountIcon();
    updateChildCountIcon();
}
function intializeDiagram() {
    adultCount = 0;
    childCount = 0;
    var diagram = $("#diagramContent").ejDiagram("instance");
    var nodes = diagram.model.nodes;
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        //if (node instanceof ej.datavisualization.Diagram.Node) {
        if (!node.line && node.type != "group") {
            if (node.addInfo != "" && (node.addInfo == "AdultSeat" || node.addInfo == "ChildSeat")) {
                node.addInfo = "";
                if (node.type == "image")
                    diagram.updateNode(node.name, { type: "basic", shape: "rectangle" });
            }
        }
    }
    diagram.updateViewPort();
    //$("#diagramContent_canvas_svg")[0].setAttribute("height", "328px");
    //$("#diagramContent_canvas_svg")[0].setAttribute("width", "623px");
}
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
function getAdultCount() {
    var adultTextBoxElement = document.getElementById("adultCount");
    if (adultTextBoxElement) {
        adultCount = Number(adultTextBoxElement.value);
        return adultCount
    }
    return 0;
}
function getChildCount() {
    var childTextBoxElement = document.getElementById("childCount");
    if (childTextBoxElement) {
        childCount = Number(childTextBoxElement.value);
        return childCount;
    }
    return 0;
}
function updateAdultCountIcon() {
    var adultIconElement = document.getElementById("adultIconDisplay");
    removeAllChilds(adultIconElement);
    var adultCount = getAdultCount();
    updateAdultText();
    for (var i = 1; i <= adultCount; i++) {
        addAdultIcon();
    }
}
function addAdultIcon() {
    var adultIconElement = document.getElementById("adultIconDisplay");
    var span = document.createElement("span");
    var img = document.createElement("img");
    img.setAttribute("class", "selectAdultObject");
    img.setAttribute("style", "margin-top:10px;margin-left:10px;border:2px solid lightblue");
    img.setAttribute("src", "../Content/AirlineReservation/images/icon_Adult.png");
    img.setAttribute("draggable", "true");
    $(span).ejDraggable({
        clone: true,
        helper: function (event) {
            var helperContainer = $(event.element[0]).clone();

            $(helperContainer).addClass("dragClone");
            if (document.body) {
                //  document.getElementById("popupContent").appendChild(helperContainer[0]);
                $(helperContainer).css("z-index", "99999999999999");
                document.body.appendChild(helperContainer[0]);
                helperContainer.css("opacity", ".7");
            }
            return $(helperContainer);
        },
        drag: function (args) {
            var proxy = this;

            var element = $(".dragClone")[0];
        }
    });
    span.appendChild(img);
    adultIconElement.appendChild(span);
}
function removeLastAdultIcon() {
    var adultIconElement = document.getElementById("adultIconDisplay");
    if (adultIconElement.childNodes && adultIconElement.childNodes.length > 0) {
        adultIconElement.removeChild(adultIconElement.childNodes[adultIconElement.childNodes.length - 1]);
    }
}
function addChildIcon() {
    var childIconElement = document.getElementById("childIconDisplay");
    var span = document.createElement("span");
    var img = document.createElement("img");
    img.setAttribute("class", "selectchildObject");
    img.setAttribute("style", "margin-top:10px;margin-left:10px;border:2px solid lightblue");
    img.setAttribute("src", "../Content/AirlineReservation/images/icon_Child.png");
    img.setAttribute("draggable", "true");

    $(span).ejDraggable({
        clone: true,
        helper: function (event) {
            var helperContainer = $(event.element[0]).clone();
            $(helperContainer).addClass("dragClone");
            if (document.body) {
                $(helperContainer).css("z-index", "99999999999999");
                document.body.appendChild(helperContainer[0]);
                helperContainer.css("opacity", ".7");
            }
            helperContainer.css("opacity", ".7");
            return $(helperContainer);
        },
        drag: function () {
            var proxy = this;
            var element = $(".dragClone")[0];
        }
    });

    span.appendChild(img);
    childIconElement.appendChild(span);
}
function removeLastChildIcon() {
    var childIconElement = document.getElementById("childIconDisplay");
    if (childIconElement.childNodes && childIconElement.childNodes.length > 0) {
        childIconElement.removeChild(childIconElement.childNodes[childIconElement.childNodes.length - 1]);
    }
}
function updateChildCountIcon() {
    var childIconElement = document.getElementById("childIconDisplay");
    removeAllChilds(childIconElement);
    var childCount = getChildCount();
    updateChildText();
    for (var i = 1; i <= childCount; i++) {
        addChildIcon();
    }
}
function updateChildText() {
    var childCountElement = document.getElementById("childCountDisplay");
    childCountElement.textContent = "Child " + childCount;
}
function updateAdultText() {
    var adultCountElement = document.getElementById("adultCountDisplay");
    adultCountElement.textContent = "Adult " + adultCount;
}
function removeAllChilds(element) {
    var childNodes = element.childNodes;
    if (childNodes.length > 0) {
        var childNodeLength = childNodes.length;
        for (var i = childNodes.length; i > 0; i--) {
            element.removeChild(childNodes[childNodes.length - 1]);
        }
    }
}



function btnOneWayChange(event) {
    oneWay = !oneWay;
    roundTrip = !roundTrip;
    updateWayText();
}
function btnRoundTripChange(event) {
    roundTrip = !roundTrip;
    oneWay = !oneWay;
    updateWayText();
}
function updateWayText() {
    var labelElement = document.getElementById("travelType");
    if (oneWay)
        labelElement.textContent = "Round Trip";
    else
        labelElement.textContent = "One Way";
}
function convertRange(value, oldMin, oldMax, newMin, newMax) {
    var newValue = Math.round((value - oldMin) / (oldMax - oldMin) * (newMax - newMin) + newMin);
    if (newValue)
        return newValue;
    return value;

}

function onPriceRangeSlide(sender) {
    var minValue = sender.value[0];
    var maxValue = sender.value[1];
    var minPrice = convertRange(minValue, 0, 100, 400, 5000);
    var maxPrice = convertRange(maxValue, 0, 100, 400, 5000);
    updatePrice(minPrice, maxPrice);
}
function updatePrice(minPrice, maxPrice) {
    var minPriceElement = document.getElementById("minPrice");
    minPriceElement.innerText = "$" + minPrice;
    var maxPriceElement = document.getElementById("maxPrice");
    maxPriceElement.innerText = "$" + maxPrice;
}
function onTimeRangeSlide(sender) {
    var minValue = sender.value[0];
    var maxValue = sender.value[1];
    var minTime = convertRange(minValue, 0, 100, 0, 24);
    var maxTime = convertRange(maxValue, 0, 100, 0, 24);
    minTime = setTimeFormat(minTime);
    maxTime = setTimeFormat(maxTime);
    updateTime(minTime, maxTime);

}
function updateTime(minTime, maxTime) {
    var minTimeElement = document.getElementById("minTime");
    minTimeElement.innerText = minTime.hh + ":" + (minTime.mm ? minTime.mm : "00");
    var maxPriceElement = document.getElementById("maxTime");
    maxPriceElement.innerText = maxTime.hh + ":" + (maxTime.mm ? minTime.mm : "00");
}
function setTimeFormat(time) {
    var minutesList = time.toString().split(".")[1];
    time = Math.floor(time);
    var minutes = minutesList ? minutesList : null;
    if (minutes || minutes == "0") {
        minutes = minutesList[0] ? minutesList[0] : minutes;
        if (minutesList[1] != null) {
            minutes = minutes + "" + minutesList[1];
        }
        var hours = Math.floor(Number(minutes) / 60) ? Math.floor(Number(minutes) / 60) : 0;
        minutes = Number(minutes) % 60;

        if (minutes != 0) {
            if (minutes >= 0 && minutes <= 9)
                minutes = "0" + minutes;
            time = (Math.floor(time) + Number(hours));
        }
    }
    minutes = minutes ? minutes : 0;
    return { hh: time, mm: minutes };
}
function onPriceRangechange(sender) {
    filterByPrice(sender);
}
function onTimeRangechange(sender) {
    filterByTime(sender);
}
function filterByPrice(sender) {
    var minValue = sender.value[0];
    var maxValue = sender.value[1];
    minPrice = convertRange(minValue, 0, 100, 400, 5000);
    maxPrice = convertRange(maxValue, 0, 100, 400, 5000);
    updatePrice(minPrice, maxPrice);
    if (!minTime && !maxTime) {
        var tempMinTime = convertRange(minValue, 0, 100, 0, 24);
        var tempMaxTime = convertRange(maxValue, 0, 100, 0, 24);
        minTimeObj = setTimeFormat(tempMinTime);
        maxTimeObj = setTimeFormat(tempMaxTime);
        updateTime(minTimeObj, maxTimeObj);
        minTime = String(minTimeObj.hh) + "." + String(minTimeObj.mm);
        maxTime = String(maxTimeObj.hh) + "." + String(maxTimeObj.mm);
    }
    var query = ej.Query()
    .search(minPrice, ["Price"], ej.FilterOperators.greaterThan)
    .search(maxPrice, ["Price"], ej.FilterOperators.lessThan)
    .search(minTime, ["Depart"], ej.FilterOperators.greaterThan)
    .search(maxTime, ["Depart"], ej.FilterOperators.lessThan)
    if (data == undefined) {
        var model = $("#FlightTicketBooking").ejGrid("model");
        data = model.dataSource;
    }
    var result;
    var dataManager = ej.DataManager(data);

    result = dataManager.executeLocal(query);

    var gridObj = $("#FlightTicketBooking").data("ejGrid");
    gridObj.option("dataSource", result);
    if ($("#FlightTicketBooking").ejGrid("option", "selectedRow") < 0)
        $("#FlightTicketBooking").ejGrid("option", { selectedRow: 0 });
}
function filterByTime(sender) {
    var minValue = sender.value[0];
    var maxValue = sender.value[1];
    var tempMinTime = convertRange(minValue, 0, 100, 0, 24);
    var tempMaxTime = convertRange(maxValue, 0, 100, 0, 24);
    minTimeObj = setTimeFormat(tempMinTime);
    maxTimeObj = setTimeFormat(tempMaxTime);
    updateTime(minTimeObj, maxTimeObj);
    minTime = String(minTimeObj.hh) + "." + String(minTimeObj.mm);
    maxTime = String(maxTimeObj.hh) + "." + String(maxTimeObj.mm);
    var query = ej.Query()
    .search(minTime, ["Depart"], ej.FilterOperators.greaterThan)
    .search(maxTime, ["Depart"], ej.FilterOperators.lessThan)
    .search(minPrice, ["Price"], ej.FilterOperators.greaterThan)
    .search(maxPrice, ["Price"], ej.FilterOperators.lessThan)
    if (data == undefined) {
        var model = $("#FlightTicketBooking").ejGrid("model");
        data = model.dataSource;
    }
    var dataManager = ej.DataManager(data);
    result = dataManager.executeLocal(query);
    var gridObj = $("#FlightTicketBooking").data("ejGrid");
    gridObj.option("dataSource", result);
    if ($("#FlightTicketBooking").ejGrid("option", "selectedRow") < 0)
        $("#FlightTicketBooking").ejGrid("option", { selectedRow: 0 });
}
function btnSearchClick(sender) {
    var fromCity = document.getElementById("fromCityName").value;
    var toCity = document.getElementById("toCityName").value;

    var query = ej.Query()
     .search(fromCity, ["From"])
     .search(toCity, ["To"])
    var result;
    if (data == undefined) {
        var model = $("#FlightTicketBooking").ejGrid("model");
        data = model.dataSource;
    }
    var dataManager = ej.DataManager(data);

    result = dataManager.executeLocal(query);


    if (result && !result[0]) {
        query = ej.Query()
   .search(fromCity, ["From"])
        result = dataManager.executeLocal(query);

    }

    if (result && !result[0]) {
        query = ej.Query()
   .search(fromCity, ["To"])
        result = dataManager.executeLocal(query);

    }

    var gridObj = $("#FlightTicketBooking").data("ejGrid");
    gridObj.option("dataSource", result);

    var gridObj = $("#FlightTicketBooking").data("ejGrid");
    if (gridObj.model.selectedRow >= 0)
        $("#btnOpenPopup").css("display", "block");
    else
        $("#btnOpenPopup").css("display", "none");

}
function bookNow() {


    if (checkBookingSeats()) {
        $("#airlineRating").ejRating({ currentValue: 3 });
        ratingObj = $("#airlineRating").data("ejRating");
        //ratingObj.hideResetButton();
        hidePopupContent();
        showFrontLayer();
        $("#popupContent").css("display", "none");
        $("#diagramView").css("height", "100%");
        $("#diagramView").css("width", "100%");
    }
    else alert("Choose all your seats for booking");
}
function checkBookingSeats() {
    var diagram = $("#diagramContent").ejDiagram("instance");
    var nodes = diagram.model.nodes;
    var adultSeat = 0, childSeat = 0;
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].addInfo == "AdultSeat")
            adultSeat++;
        else if (nodes[i].addInfo == "ChildSeat")
            childSeat++;
    }
    if (initSelectedAdult > adultSeat || initSelectedChild > childSeat)
        return false;
    return true;
}
function showFrontLayer() {
    document.getElementById('bg_mask').style.visibility = 'visible';
    document.getElementById('frontlayer').style.visibility = 'visible';
}
function hideFrontLayer() {
    document.getElementById('bg_mask').style.visibility = 'hidden';
    document.getElementById('frontlayer').style.visibility = 'hidden';
}
function showPopupContent() {
    document.getElementById('popupContent').style.visibility = 'visible';
}
function hidePopupContent() {
    document.getElementById('popupContent').style.visibility = 'hidden';
}




function onNodeClick(sender) {
    if (sender.element && sender.element.type == "image") {
        var diagram = $("#diagramContent").ejDiagram("instance");
        selectedNode = sender.element;
        if (selectedNode && (selectedNode.addInfo == undefined || selectedNode.addInfo == "")) {
            var imageSrc = "";
            var adultAdded = false;
            var childAdded = false;
            if (adultCount > 0) {
                adultAdded = true;
                imageSrc = "themes/images/icon_Adult.png";
            } else if (childCount > 0) {
                childAdded = true;
                imageSrc = "themes/images/icon_Child.png";
            }
            if (adultCount > 0 || childCount > 0) {
                var diagram = $("#diagramContent").ejDiagram("instance");
                //if (selectedNode instanceof ej.datavisualization.Diagram.Node) {
                if (!selectedNode.line && selectedNode.type != "group") {
                    diagram.updateNode(selectedNode.name, { type: "image", source: imageSrc, border: "gray" });
                    if (adultAdded) {
                        selectedNode.addInfo = "AdultSeat";
                        removeLastAdultIcon();
                        adultCount = adultCount - 1;
                    }
                    if (childAdded) {
                        selectedNode.addInfo = "ChildSeat";
                        removeLastChildIcon();
                        childCount = childCount - 1;
                    }
                }
            }
        } else if (selectedNode.addInfo != "" && selectedNode.addInfo != "booked") {
            var diagram = $("#diagramContent").ejDiagram("instance");
            //if (selectedNode instanceof ej.datavisualization.Diagram.Node) {
            if (!selectedNode.line && selectedNode.type != "group") {
                diagram.updateNode(selectedNode.name, { shape: "rectangle", type: "basic" });
                if (selectedNode.addInfo == "AdultSeat") {
                    addAdultIcon();
                    adultCount = adultCount + 1;
                }
                if (selectedNode.addInfo == "ChildSeat") {
                    addChildIcon();
                    childCount = childCount + 1;
                }
                selectedNode.addInfo = "";
            }
        } else if (selectedNode.addInfo == "booked") {
            //alert("Selected " + selectedNode.name + " is already booked");
        }
        updateAdultText();
        updateChildText();
    }
    var diagram = $("#diagramContent").ejDiagram("instance");
    diagram._clearSelection();
}

var oldSelectedRow;
function onGridRecordClick() {
    $("#btnOpenPopup").css("display", "block");
}

function onGridActionComplete(sender) {
    if (oldSelectedRow > 0)
        sender.model.selectedRow = oldSelectedRow;
}

function onGridActionBegin(sender) {
    oldSelectedRow = sender.model.selectedRow;
}

function onGridLoad(sender) {
    var x = sender.model.dataSource[Math.floor(Math.random() * sender.model.dataSource.length - 1)];
    if (document.getElementById("fromCityName")) {
        document.getElementById("fromCityName").value = String(x.From);
        document.getElementById("toCityName").value = String(x.To);
    }
}

$(window).on("load", function () {
    $("#adultIncrement").bind("click", function (event) {
        var adultTextElement = document.getElementById("adultCount");
        var lastValue = Number(adultTextElement.value);
        adultTextElement.value = lastValue + 1;

    });

    $("#adultDecrement").bind("click", function (event) {
        var adultTextElement = document.getElementById("adultCount");
        var lastValue = Number(adultTextElement.value);
        if (lastValue != 0)
            adultTextElement.value = lastValue - 1;

    });

    $("#childIncrement").bind("click", function (event) {
        var childTextElement = document.getElementById("childCount");
        var lastValue = Number(childTextElement.value);
        childTextElement.value = lastValue + 1;

    });

    $("#childDecrement").bind("click", function (event) {
        var childTextElement = document.getElementById("childCount");
        var lastValue = Number(childTextElement.value);
        if (lastValue != 0)
            childTextElement.value = lastValue - 1;

    });

    $("#btnOpenPopup").bind("click", function () {
        openPopup();
    });
    $("#btnBookNow").bind("click", function () {
        bookNow();
    });
});

function actionComplete(args) {
    if (oldSelectedRow > 0)
        args.model.selectedRow = oldSelectedRow;
}

function actionBegin(args) {
    oldSelectedRow = args.model.selectedRow;
}

function gridLoad(args) {
    var x = args.model.dataSource[Math.floor(Math.random() * args.model.dataSource.length - 1)];
    if (document.getElementById("fromCityName")) {
        document.getElementById("fromCityName").value = String(x.From);
        document.getElementById("toCityName").value = String(x.To);
    }
    args.model.selectedRowIndex = 0;
}

function recordClick() {
    $("#btnOpenPopup").css("display", "block");
}

function nodemouseenter(args) {
    if (args.element.fillColor != "red") {
        if (nHoverNode && args.element.name != nHoverNode.name) {
            diagram = $("#diagramContent").ejDiagram("instance");
            var obj = new Object();
            obj.fillColor = "white";
            diagram.updateNode(nHoverNode.name, obj);
        }
        nHoverNode = args.element;
        var diagram = $("#diagramContent").ejDiagram("instance");
        var obj = new Object();
        obj.fillColor = "#8CC63F";
        diagram.updateNode(args.element.name, obj);
    }
}

function nodemouseleave(args) {
    if (args.element.fillColor != "red") {
        var diagram = $("#diagramContent").ejDiagram("instance");
        var obj = new Object();
        obj.fillColor = "white";
        diagram.updateNode(args.element.name, obj);
    }
}

function testChildParent(args) {
    if (args.childNodes[0].className == "selectchildObject")
        return ("child");
    else
        return ("adult");
}

function onItemDrop(args) {
    $(".dragClone").remove();
    var diagram = $("#diagramContent").ejDiagram("instance");
    diagram._clearSelection();
    var element = diagram._findNode($("#" + args.e.target.id)[0].parentNode.id);

    if (element && element.shape && element.shape == "rectangle") {
        var selectedNode = element;
        if (selectedNode && (selectedNode.addInfo == undefined || selectedNode.addInfo == "" || !jQuery.isEmptyObject(selectedNode))) {
            var imageSrc = "";
            var adultAdded = false;
            var childAdded = false;
            var result = testChildParent(args.draggable[0]);
            if (result == "adult") {
                adultAdded = true;
                imageSrc = "../Content/AirlineReservation/images/icon_Adult.png";
            }
            else {
                childAdded = true;
                imageSrc = "../Content/AirlineReservation/images/icon_Child.png";
            }
            if (adultCount > 0 || childCount > 0) {
                var diagram = $("#diagramContent").ejDiagram("instance");
                if (!selectedNode.segments && selectedNode.type != "group") {
                    diagram.updateNode(selectedNode.name, { type: "image", source: imageSrc, border: "gray" });
                    if (adultAdded) {
                        selectedNode.addInfo = "AdultSeat";
                        removeLastAdultIcon();
                        adultCount = adultCount - 1;
                    }
                    if (childAdded) {
                        selectedNode.addInfo = "ChildSeat";
                        removeLastChildIcon();
                        childCount = childCount - 1;
                    }
                }
            }
        } else if (selectedNode.addInfo != "" && selectedNode.addInfo != "booked") {
            var diagram = $("#diagramContent").ejDiagram("instance");
            //if (selectedNode instanceof ej.datavisualization.Diagram.Node) {
            if (!selectedNode.line && selectedNode.type != "group") {
                diagram.updateNode(selectedNode.name, { type: "basic", shape: "rectangle" });
                if (selectedNode.addInfo == "AdultSeat") {
                    addAdultIcon();
                    adultCount = adultCount + 1;
                }
                if (selectedNode.addInfo == "ChildSeat") {
                    addChildIcon();
                    childCount = childCount + 1;
                }
                selectedNode.addInfo = "";
            }
        } else if (selectedNode.addInfo == "booked") {
            //alert("Selected " + selectedNode.name + " is already booked");
        }
        updateAdultText();
        updateChildText();
    }

}

function nodedragging(args) {
    var diagram = $("#diagramContent").ejDiagram("instance");
    diagram._clearSelection();
    args.cancel = true;
}

function backButtonClick() {
    $("#diagramView").ejDialog("close");
}