<%@ Page Title="Mail" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="new.aspx.cs" Inherits="New" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" type="text/css" href="Styles/newMail.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FolderContent" runat="Server">
    <div class="hidden">
        <nav:FolderNavigationControl runat="server" ID="FolderNavigationControl" Category="Calendar" />
        <nav:MobileNavigation runat="server" ID="MobileNavigation" Category="Calendar" BreadCrumbText="Types"></nav:MobileNavigation>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadNavigation runat="server" Skin="BlackMetroTouch" OnClientNodeClicked="nodeClicked" CssClass="secondaryMenu">
        <Nodes>
            <telerik:NavigationNode Text="Send" SpriteCssClass="icon icon-Send"></telerik:NavigationNode>
            <telerik:NavigationNode Text="Insert">
                <Nodes>
                    <telerik:NavigationNode Text="Files as attachments"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Picture Inline"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Save"></telerik:NavigationNode>
            <telerik:NavigationNode Text="Priority">
                <Nodes>
                    <telerik:NavigationNode Text="High Priority"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Low Priority"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Cancel" NavigateUrl="default.aspx"></telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>
    <div class="scroller">
        <div class="sidebarScnd">
            <div class="row">
                <label>From</label>
                <div class="dropDownWrapper">
                    <telerik:RadDropDownList runat="server">
                        <Items>
                            <telerik:DropDownListItem Text="Antonio.Morandi@telerik.com" Selected="true" />
                        </Items>
                    </telerik:RadDropDownList>
                    <div class="emailToolBar">
                        <span onclick="showHide('email-cc')">CC</span>
                        <span onclick="showHide('email-bcc')">BCC</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <label>To</label>
                <telerik:RadAutoCompleteBox ID="racbTo" runat="server"
                    ClientDataSourceID="rcdsEmail" OnClientEntryAdded="entryAdded"
                    DropDownHeight="160px" Width="300" AllowCustomEntry="true"
                    DataTextField="Email" DataValueField="Email">
                </telerik:RadAutoCompleteBox>
            </div>
            <div class="row email-cc hidden">
                <label>CC</label>
                <telerik:RadAutoCompleteBox ID="racbCC" runat="server"
                    ClientDataSourceID="rcdsEmail" OnClientEntryAdded="entryAdded"
                    DropDownHeight="160px" Width="300" AllowCustomEntry="true"
                    DataTextField="Email" DataValueField="Email">
                </telerik:RadAutoCompleteBox>
            </div>
            <div class="row email-bcc hidden">
                <label>BCC</label>
                <telerik:RadAutoCompleteBox ID="racbBCC" runat="server"
                    ClientDataSourceID="rcdsEmail" OnClientEntryAdded="entryAdded"
                    DropDownHeight="160px" Width="300" AllowCustomEntry="true"
                    DataTextField="Email" DataValueField="Email">
                </telerik:RadAutoCompleteBox>
            </div>
            <div class="row">
                <label>Subject</label>
                <telerik:RadTextBox runat="server" ID="rtbSubject"></telerik:RadTextBox>
            </div>
            <span id="priority"></span>
            <telerik:RadClientDataSource runat="server" ID="rcdsEmail">
                <DataSource>
                    <WebServiceDataSourceSettings ServiceType="Default">
                        <Select Url="api/contacts" DataType="JSON" />
                    </WebServiceDataSourceSettings>
                </DataSource>
            </telerik:RadClientDataSource>

            <script>
                function validateEmail(email) {
                    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
                    return re.test(email);
                }

                function entryAdded(sender, args) {
                    var email = args.get_entry().get_text();
                    if (validateEmail(email) === false) {
                        $(args.get_entry()._token).addClass("invalidEmail");
                    }
                }

                function showHide(fieldClass) {
                    var $span = $('.' + fieldClass);
                    $span.toggleClass("hidden");
                }

                function nodeClicked(sender, args) {
                    var command = args.get_node().get_text();

                    switch (command) {
                        case "Send":
                            showMessage();
                            break;
                        case "High Priority":
                            setPriority("high");
                            break;
                        case "Low Priority":
                            setPriority("low");
                            break;
                        case "Picture inline":
                            insert();
                            break;
                        default:

                    }
                }

                function showMessage() {
                    var oWnd = $find('<%= warning.ClientID %>');
                        oWnd.show();
                    }

                    function setPriority(value) {
                        if (value === "low") {
                            $('#priority').removeClass('icon-Priority-High').addClass('icon-Priority-Low');
                        } else {
                            $('#priority').removeClass('icon-Priority-Low').addClass('icon-Priority-High');

                        }
                    }

                    function insert() {
                        var editor = $find("<%= Body.ClientID %>");
                    editor.fire("ImageMapDialog");
                }
            </script>
        </div>

        <div class="editorWrapper">
            <telerik:RadEditor runat="server" ID="Body" Font-Names="Arial" ContentAreaCssFile="Styles/editor.css" EditModes="Design" EmptyMessage="Your Text ..." Width="100%">
                <ImageManager UploadPaths="~/Uploads" ViewPaths="~/Uploads" DeletePaths="~/Uploads" />
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Bold" />
                        <telerik:EditorTool Name="Italic" />
                        <telerik:EditorTool Name="Underline" />
                        <telerik:EditorTool Name="StrikeThrough" />
                        <telerik:EditorTool Name="JustifyLeft" />
                        <telerik:EditorTool Name="JustifyCenter" />
                        <telerik:EditorTool Name="JustifyRight" />
                        <telerik:EditorTool Name="JustifyFull" />
                        <telerik:EditorTool Name="JustifyNone" />
                        <telerik:EditorTool Name="Indent" />
                        <telerik:EditorTool Name="Outdent" />
                        <telerik:EditorTool Name="InsertOrderedList" />
                        <telerik:EditorTool Name="InsertUnorderedList" />
                        <telerik:EditorTool Name="ForeColor" />
                        <telerik:EditorTool Name="BackColor" />
                        <telerik:EditorTool Name="ConvertToLower" />
                        <telerik:EditorTool Name="ConvertToUpper" />
                        <telerik:EditorTool Name="AjaxSpellCheck" />
                        <telerik:EditorTool Name="ImageManager" />
                        <telerik:EditorTool Name="FindAndReplace" Visible="false" />
                    </telerik:EditorToolGroup>
                </Tools>
            </telerik:RadEditor>
        </div>
    </div>

    <telerik:RadWindow runat="server" Title="Warning" ID="warning" Modal="true" Width="450px" Height="140px" Behaviors="Close" CssClass="warning"
        VisibleStatusbar="false">
        <ContentTemplate>
            This is a Demo Application and your email will not be send successfully. To develop further this functionality, please visit a help link <a href="#">SmptClient Class</a>.
        </ContentTemplate>
    </telerik:RadWindow>
</asp:Content>

