<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MessageList.aspx.vb" Inherits="MailEnable.Clients.WebMail.Mobile.MessageList" %>
<%@ Register TagPrefix="m" TagName="Document" Src="Controls/Document.ascx" %>
<%@ Register TagPrefix="m" TagName="Page" Src="Controls/Page.ascx" %>
<%@ Register TagPrefix="m" Assembly="MobileWebMail" Namespace="MailEnable.Clients.WebMail.Mobile" %>

<m:Document id="MessageListDocument" Title="Inbox" runat="server">
    <Content>
        <script type="text/javascript">

            function deleteServerItem(sId) {
                var sFolder = '<%=Server.UrlEncode(CurrentFolderRelativePath)%>';
                var sURL = getAppServletURL() + '?Cmd=DELETE-MESSAGE&Folder=' + sFolder + '&ID=' + sId + '&ME_SID=<%=Session.Item("ME_SID")%>&TD=' + (new Date()).getTime() + '&ME_VALIDATIONTOKEN=<%=Session.Item("ME_VALIDATIONTOKEN")%>';
                $.ajax({
                    url: sURL,
                    cache: false,
                    contentType: false,
                    type: 'GET',
                    error: function (request, error) {
                        alert("An error occured deleting: " + error);
                    },
                    processData: false
                })

                return true;
            }

            function CheckForNewMail() {
                var sURL = getAppServletURL() + '?Cmd=CHECK-NEW-MAIL&ME_SID=<%=Session.Item("ME_SID")%>&TD=' + (new Date()).getTime() + '&ME_VALIDATIONTOKEN=<%=Session.Item("ME_VALIDATIONTOKEN")%>';
                $.ajax({
                    url: sURL,
                    cache: false,
                    contentType: false,
                    type: 'GET',
                    success: function (results, status, xhr) {
                        var ct = xhr.getResponseHeader("content-type") || "";
                        if (ct.indexOf('html') > -1) {
                            if (window.console) {
                                console.log('got html, expected xml');
                            }
                        } else if (ct.indexOf('json') > -1) {
                            console.log('got json, expected xml');
                        } else {
                            // assume XML
                            ProcessMailCheckResult(results);
                        }
                    },
                    processData: false
                })
                //if we did this only on success then a timeout would make it stop polling (which may or may not be desirable for battery use!)
                setTimeout(CheckForNewMail, 30000); //check every 30 seconds
            }

            $(document).on("pagecreate", "#MessageListPage", function () {
                // Swipe to remove list item
                $(document).on("swipeleft swiperight", "#list li", function (event) {
                    // These are the classnames used for the CSS transition
                    var listitem = $(this), dir = event.type === "swipeleft" ? "left" : "right",
                    // Check if the browser supports the transform (3D) CSS transition
                            transition = $.support.cssTransform3d ? dir : false;
                    confirmAndDelete(listitem, transition);
                });

                // If it is not a touch device, remove the class
                if (!$.mobile.support.touch) {
                    $("#list").removeClass("touch");
                }

                function confirmAndDelete(listitem, transition) {
                    // Highlight the list item that will be removed
                    listitem.children(".ui-btn").addClass("ui-btn-active");
                    // Inject topic in confirmation popup after removing any previous injected topics
                    $("#confirm .subject").remove();
                    listitem.find(".subject").clone().insertAfter("#question");
                    // Show the confirmation popup
                    $("#confirm").popup("open");
                    $('#confirm').css({ position: 'fixed', top: '10px', left: '10px', 'display': 'block' });
                    // Proceed when the user confirms
                    $("#confirm #yes").on("click", function () {
                        // Remove with a transition
                        // Add the class for the transition direction
                        // When the transition is done...
                        // ...the list item will be removed
                        if (transition) {
                            listitem.addClass(transition).on("webkitTransitionEnd transitionend otransitionend", function () {
                                deleteServerItem(listitem.attr('data-item-id'));
                                listitem.remove();
                                // ...the list will be refreshed and the temporary class for border styling removed
                                $("#list").listview("refresh").find(".border-bottom").removeClass("border-bottom");
                            })
                            // During the transition the previous button gets bottom border
                                .prev("li").children("a").addClass("border-bottom")
                            // Remove the highlight
                                .end().end().children(".ui-btn").removeClass("ui-btn-active");
                        }
                        // If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list
                        else {
                            listitem.remove();
                            $("#list").listview("refresh");
                        }
                    });
                    // Remove active state and unbind when the cancel button is clicked
                    $("#confirm #cancel").on("click", function () {
                        listitem.children(".ui-btn").removeClass("ui-btn-active");
                        $("#confirm #yes").off();
                    });
                }

                //it will poll in 30 seconds
                LaunchNewMailChecker();

            });


        </script>
        <m:Page id="MessageListPage" Title="Inbox" EmitUrl="true" runat="server">
            <HeaderRight>
              <div id="msgList_refresh_shell" data-role="controlgroup" data-type="horizontal" data-mini="true">
                <button class="ui-btn-right" id="msgList_refresh" onclick="location.reload(true)" data-icon="refresh" data-mini="true" data-iconpos="notext">Refresh</button>
              </div>
            </HeaderRight>
            <Content>
                <asp:ListView id="MessagesListView" DataSourceId="MessagesSource" runat="server">
                    <LayoutTemplate>
                        <ul id="list" data-role="listview" class="pagedList touch">
                            <asp:PlaceHolder id="itemPlaceholder" runat="server" />
                        </ul>
                        <asp:DataPager id="MessagesListPager" PageSize="50" QueryStringField="p" runat="server">
                            <Fields>
                                <m:NextPreviousPagerField />
                            </Fields>
                        </asp:DataPager>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li class="msg read <%# DataBinder.Eval(Container.DataItem, "Read") %>" data-item-id="<%# DataBinder.Eval(Container.DataItem, "Id") %>">
                            <a href="ReadMessage.aspx?Folder=<%=Server.UrlEncode(CurrentFolderRelativePath)%>&Message=<%# DataBinder.Eval(Container.DataItem, "Id") %>">
                                <table>
                                    <tr class="topRow">
                                        <td class="msgicon read <%# DataBinder.Eval(Container.DataItem, "Read") %>"></td>
                                        <td class="subject"><%#DataBinder.Eval(Container.DataItem, "Subject")%></td>
                                        <td class="received"><%#DataBinder.Eval(Container.DataItem, "ReceivedDate")%></td>
                                    </tr>
                                    <tr class="bottomRow">
                                        <td class="msgicon flagged <%# DataBinder.Eval(Container.DataItem, "Flagged") %>"></td>
                                        <td class="sender"><%#DataBinder.Eval(Container.DataItem, "Sender")%></td>
                                        <td class="size">
                                            <span class="msgicon attachment <%# DataBinder.Eval(Container.DataItem, "HasAttachments") %>"><%#DataBinder.Eval(Container.DataItem, "SizeDisplay")%></span>
                                        </td>
                                    </tr>
                                </table>
                            </a>
                        </li>
                    </ItemTemplate>
                    <EmptyDataTemplate>
                        <p>No messages in this view.</p>
                    </EmptyDataTemplate>
                </asp:ListView>
                <asp:ObjectDataSource id="MessagesSource" SelectMethod="GetMessages" TypeName="MailEnable.Clients.WebMail.Mobile.MessagesDataSource" runat="server">
                    <SelectParameters>
                        <asp:SessionParameter Name="AuthenticatedUser" SessionField="AuthenticatedUser" />
                        <asp:SessionParameter Name="FolderRelativePath" SessionField="CurrentFolder" />
                        <asp:SessionParameter Name="UserUtcOffset" SessionField="Offset" />
                        <asp:SessionParameter Name="Cache" SessionField="MessageListCache" />
                    </SelectParameters>
                </asp:ObjectDataSource>

                <div class="ui-content" id="confirm" data-role="popup" data-theme="a">
                    <p id="question">Are you sure you want to delete:</p>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                        <a class="ui-btn ui-corner-all ui-mini ui-btn-a" id="yes" data-rel="back">Yes</a>
                        </div>
                        <div class="ui-block-b">
                        <a class="ui-btn ui-corner-all ui-mini ui-btn-a" id="cancel" data-rel="back">Cancel</a>
                        </div>
                    </div>
                </div><!-- /popup -->
            </Content>
            <Footer>
                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="footer_main">
                    <a href="Compose.aspx" data-role="button" data-icon="cust-compose"><%=GetText("[ME_TXT-Compose]")%></a>
                </div>
            </Footer>
        </m:Page>
    </Content>
</m:Document>