<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="~/Site.master" Title="HTML5 Event Calendar: Touch Events Customization (ASP.NET)" %>
<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
	<script type="text/javascript" src="js/modal.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <link href='css/main.css' type="text/css" rel="stylesheet" /> 
    <link href='Themes/calendar_white.css' type="text/css" rel="stylesheet" /> 
    <link href='Themes/areas.css' type="text/css" rel="stylesheet" /> 
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <div>
        <DayPilot:DayPilotCalendar 
        ID="DayPilotCalendarWeek" 
        runat="server" 
        DataEndField="eventend"
        DataStartField="eventstart" 
        DataTextField="name" 
        DataIdField="id" 
        CssOnly="true"
        CssClassPrefix="calendar_white"
        ViewType="Week"
        ClientObjectName="dpc1"
        OnCommand="DayPilotCalendarWeek_Command"
        TimeRangeSelectedHandling="JavaScript"
        TimeRangeSelectedJavaScript="create(start, end);"
        EventClickHandling="JavaScript"
        EventClickJavaScript="edit(e.id())"

        EventMoveHandling="CallBack"
        OnEventMove="DayPilotCalendarWeek_OnEventMove"

        ContextMenuID="DayPilotMenu1"
        ContextMenuSelectionID="DayPilotMenuSelection"
        OnBeforeEventRender="DayPilotCalendarWeek_OnBeforeEventRender"
        
        EventTapAndHoldHandling="ContextMenu"
        TimeRangeTapAndHoldHandling="ContextMenu"
        />

        <h2>External Drag and Drop</h2>
        <div class="external">
            <div data-id="123" data-duration="3600">Event 1</div>
            <div data-id="124" data-duration="7200">Event 2</div>
        </div>


            <daypilot:daypilotmenu id="DayPilotMenu1" runat="server"  ShowMenuTitle="true">
        <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="edit(e.id());" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() +')');" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="-" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Copy" Action="JavaScript" JavaScript="copied = e.value();" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="-" Action="NavigateUrl" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Delete (CallBack)" Action="Callback" Command="Delete" />
        <DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete (PostBack)" />
        <DayPilot:MenuItem Action="NavigateUrl" NavigateUrl="javascript:alert('Going somewhere else (id {0})');" Text="NavigateUrl test" />
        <DayPilot:MenuItem Action="NavigateUrl" NavigateUrl="http://www.google.com/" NavigateUrlTarget="_blank" Text="Google in New Window" ></DayPilot:MenuItem>
    </daypilot:daypilotmenu>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenuSelection" runat="server" >
        <DayPilot:MenuItem Action="JavaScript" JavaScript="dpc1.timeRangeSelectedCallBack(e.start, e.end, e.resource); dpc1.clearSelection();"
            Text="Create new event (JavaScript)" />
        <DayPilot:MenuItem Action="PostBack" Command="Insert" Text="Create new event (PostBack)" />
        <DayPilot:MenuItem Action="CallBack" Command="Insert" Text="Create new event (CallBack)" />
        <DayPilot:MenuItem Text="-" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="JavaScript" JavaScript="if (!copied) { alert('You need to copy an event first.'); return; } dpc1.commandCallBack('paste', {id:copied, start: e.start});" Text="Paste" />
        <DayPilot:MenuItem Text="-" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('Start: ' + e.start.toString() + '\nEnd: ' + e.end.toString() + '\nResource id: ' + e.resource);" Text="Show selection details" />
        <DayPilot:MenuItem Action="JavaScript" JavaScript="dpc1.clearSelection();" Text="Clean selection" />
    </DayPilot:DayPilotMenu>
    </div>

<script type="text/javascript">

    function edit(id) {
        var modal = new DayPilot.Modal();
        modal.closed = function () {
            if (this.result == "OK") {
                dpc1.commandCallBack('refresh');
            }
        };
        modal.showUrl("Edit.aspx?id=" + id);
    }

    function create(start, end) {
        var modal = new DayPilot.Modal();
        modal.closed = function () {
            if (this.result == "OK") {
                dpc1.commandCallBack('refresh');
            }
            dpc1.clearSelection();
        };
        modal.showUrl("New.aspx?start=" + start + "&end=" + end);
    }

    $(document).ready(function () {
        $(".external div").each(function () {
            $(this).css({
                cursor: "move",
                width: "100px",
                border: "1px solid black",
                padding: "5px"
            });
            var item = {
                element: this,
                id: $(this).data("id"),
                text: $(this).text(),
                duration: $(this).data("duration")
            };
            //console.log(item);
            DayPilot.Calendar.makeDraggable(item);
        });
    });

</script>

</asp:Content>