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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="Styles/newNote.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FolderContent" runat="Server">
    <div class="hidden">
        <nav:MobileNavigation runat="server" ID="MobileNavigation" Category="Notes" BreadCrumbText="Categories"></nav:MobileNavigation>
        <nav:FolderNavigationControl runat="server" ID="FolderNavigationControl" Category="Calendar" />
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <script>

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

            switch (command) {
                case "Save":
                    createNewNote();
                    break;
                case "Insert":
                    insert();
                default:
            }
        }

        function createNewNote() {
            var folders = $find("<%= rddlNotesFolders.ClientID %>");
            var subject = $find("<%= rtbSubject.ClientID %>");
            var noteContent = $find("<%= NoteContent.ClientID %>");

            var note = {
                Subject: subject.get_textBoxValue(),
                FolderId: folders.get_selectedItem().get_value(),
                NoteContent: noteContent.get_html(true)
            };

            $.ajax({
                type: "POST",
                data: JSON.stringify(note),
                url: "api/notes",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    window.location.href = "notes.aspx";
                }
            });
        }

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

        function clientItemsRequested(sender, args) {
            if (sender.getItem(0) != null) {
                sender.getItem(0).select();
            }
        }
    </script>

    <telerik:RadNavigation runat="server" CssClass="secondaryMenu" Skin="BlackMetroTouch" OnClientNodeClicked="nodeClicked">
        <Nodes>
            <telerik:NavigationNode Text="Save" SpriteCssClass="icon icon-header icon-Save"></telerik:NavigationNode>
            <telerik:NavigationNode Text="Insert"></telerik:NavigationNode>
            <telerik:NavigationNode Text="Cancel" NavigateUrl="notes.aspx"></telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>

    <div class="scroller">
        <div class="sidebarScnd">
            <div class="row">
                <label>Folder:</label>
                <telerik:RadDropDownList runat="server"
                    ID="rddlNotesFolders"
                    DefaultMessage="Choose Note's Category"
                    OnClientItemsRequested="clientItemsRequested"
                    ClientDataSourceID="rcdsNotesFolders"
                    DataTextField="Name" DataValueField="Id">
                </telerik:RadDropDownList>
                <telerik:RadClientDataSource runat="server" ID="rcdsNotesFolders">
                    <DataSource>
                        <WebServiceDataSourceSettings BaseUrl="api/">
                            <Select RequestType="Get" Url="folders/Notes" DataType="JSON" />
                        </WebServiceDataSourceSettings>
                    </DataSource>
                </telerik:RadClientDataSource>
            </div>
            <div class="row">
                <label>Subject:</label>
                <telerik:RadTextBox runat="server" ID="rtbSubject"></telerik:RadTextBox>
            </div>
        </div>
        
        <div class="editorWrapper">
            <telerik:RadEditor runat="server" ID="NoteContent" ContentAreaCssFile="Styles/editor.css" MaxTextLength="500" MaxHtmlLength="500" EditModes="Design"
                 EmptyMessage="Your Text ..." Width="100%">
                <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="FindAndReplace" Visible="false" />
                    </telerik:EditorToolGroup>
                </Tools>
            </telerik:RadEditor>
        </div>

    </div>

</asp:Content>

