<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.master" AutoEventWireup="true" Inherits="C1Tabs_AddRemove" CodeBehind="AddRemove.aspx.cs" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1Tabs" TagPrefix="wijmo" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1Dialog"
    TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server">
    <style type="text/css">
        #tabs
        {
            margin-top: 1em;
        }

        #tabs li .ui-icon-close
        {
            float: left;
            margin: 0.4em 0.2em 0 0;
            cursor: pointer;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <wijmo:C1Tabs ID="C1Tab1" runat="server">
        <Pages>
            <wijmo:C1TabPage ID="Page1" Text="<%$ Resources:C1Tabs, AddRemove_TabText %>">
                <p><%= Resources.C1Tabs.AddRemove_Text0 %></p>
            </wijmo:C1TabPage>
        </Pages>
    </wijmo:C1Tabs>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="Server">
    <p><%= Resources.C1Tabs.AddRemove_Text1 %></p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="Server">
    <div class="settingcontainer">
        <div class="settingcontent">
            <ul>
                <li>
                    <input type="button" value="<%= Resources.C1Tabs.AddRemove_AddTab %>" id="add_tab" onclick="$('#<%=dialog.ClientID%>').c1dialog('open')" />
                </li>
            </ul>
        </div>
    </div>
    <cc1:C1Dialog ID="dialog" runat="server" Height="270px" Title="<%$ Resources:C1Tabs, AddRemove_DialogTitle %>" ShowOnLoad="False">
        <CaptionButtons>
            <Pin IconClassOn="ui-icon-pin-w" IconClassOff="ui-icon-pin-s"></Pin>

            <Refresh IconClassOn="ui-icon-refresh"></Refresh>

            <Minimize IconClassOn="ui-icon-minus"></Minimize>

            <Maximize IconClassOn="ui-icon-extlink"></Maximize>

            <Close IconClassOn="ui-icon-close"></Close>
        </CaptionButtons>
        <Buttons>
            <cc1:DialogButton Text="<%$ Resources:C1Tabs, AddRemove_Add %>" OnClientClick="addClick" />
            <cc1:DialogButton Text="<%$ Resources:C1Tabs, AddRemove_Cancel %>" OnClientClick="cancelClick" />
        </Buttons>
        <Content>
            <label for="tab_title">
                <%= Resources.C1Tabs.AddRemove_Title %></label><br />
            <input type="text" name="tab_title" id="tab_title" style="width: 100%" class="ui-widget-content ui-corner-all" /><br />
            <label for="tab_content">
                <%= Resources.C1Tabs.AddRemove_Content %></label><br />
            <textarea name="tab_content" id="tab_content" style="width: 100%" class="ui-widget-content ui-corner-all"
                cols="" rows=""></textarea><br />
        </Content>
    </cc1:C1Dialog>
    <script id="scriptInit" type="text/javascript">
        $('#<%=C1Tab1.ClientID%>').find("ul li").append('<span class="ui-icon ui-icon-close">Remove Tab</span>');
        var $tab_title_input = $('#tab_title'),
            $tab_content_input = $('#tab_content'),
            tab_counter = 2;

        var $tabs = $('#<%=C1Tab1.ClientID%>').c1tabs({
                tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
                add: function (event, ui) {
                    var tab_content = $tab_content_input.val() || 'Tab ' + tab_counter + ' content.';
                    $(ui.panel).append('<p><%= Resources.C1Tabs.AddRemove_Text2 %></p>');
                }
            });

            $('#<%=C1Tab1.ClientID%>').on('click', 'span.ui-icon-close', function () {
            var index = $('li', $tabs).index($(this).parent());
            $tabs.c1tabs('remove', index);
        });

        function addClick() {
            var tab_title = $tab_title_input.val() || 'Tab ' + tab_counter;
            $tabs.c1tabs('add', '#tabs-' + tab_counter, tab_title);
            tab_counter++;

            $tab_title_input.val("");
            $tab_content_input.val("");

            $(this).c1dialog("close");
        }

        function cancelClick() {
            $(this).c1dialog("close");
        }
    </script>
</asp:Content>
