<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/WFAdmin/AdmMaster.Master" CodeBehind="ThemeSettings.aspx.vb" Inherits="WebFoundations.WFPortal.UI.ThemeSettings" Title="Configuração de Tema" MaintainScrollPositionOnPostback="true" ValidateRequest="false" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="WebFoundations.ServerControls" Namespace="WebFoundations.ServerControls" TagPrefix="WFF" %>

<asp:Content ContentPlaceHolderID="TagHead" runat="server">
    <style>
        .logo li img {
            max-height: 50px;
            background-color: red;
            margin: .5em 0;
            display: block;
        }

        .logo label div {
            border: solid 2px #ccc;
            padding: 1.8em .5em .5em;
        }

        .logo li {
            display: inline-block;
            position: relative;
        }

            .logo li label {
                cursor: pointer;
            }

            .logo li input[type=radio] {
                display: none;
            }

            .logo li input:checked + div {
                border-color: #444;
            }

            .logo li > a.delete {
                position: absolute;
                top: .5em;
                right: .5em;
                background:#0c2431 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAQAAAATvv9SAAAAPUlEQVR4AWNgYPjP+L/9fxUDBMD5MAYQgDkofCgTykHloXJRJBhQJNEkEJIICbxSeA3E4ww8jsfjZTwBBQC0brWFusjHbAAAAABJRU5ErkJggg==) no-repeat center center;
                display:block;
                width:1.5em;
                height:1.5em;
                text-wrap:none;
                white-space:nowrap;
                text-indent:100%;
                overflow:hidden;
                border-radius:.15em;
            }

            .logo li a.delete[class$=delete] {
                display: none;
            }

        .logo ul {
            padding: 0;
            margin: .5em 0;
        }


        .wfcustom-editor textarea {
            width: 100%;
            height: 20em;
        }

        section.config {
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-width: 35em;
            -webkit-column-width: 35em;
            column-width: 35em;
            -moz-column-rule: dashed 1px #ccc;
            -webkit-column-rule: dashed 1px #ccc;
            column-rule: dashed 1px #ccc;
            margin: 0 0 1em 0;
        }

        .success, .error {
            padding: .2em .5em;
            color: #fff;
            margin: .5em 0;
            display: block;
        }

        .success {
            background-color: olivedrab;
        }

        .error {
            background-color: firebrick;
        }
    </style>

    <style type="text/css">
        .theme-settings {
            position: relative;
        }

        menu.tabs {
            white-space: nowrap;
            padding: 0;
        }

            menu.tabs li {
                display: inline-block;
                list-style: none;
            }

                menu.tabs li > input {
                    display: none;
                }

                menu.tabs li > section {
                    position: absolute;
                }

                menu.tabs li > input:checked + label {
                    color: #fff;
                    background-color: #12364a;
                }

        .config-area {
            min-height: calc(100vh - 300px);
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            function selectTheme(selector) {
                try {
                    if (selector && selector.options) {
                        var o = selector.options[selector.selectedIndex];
                        if (o) {
                            showColorPicker(o);
                            $(selector).attr("style", previewColor(o));
                        }
                    }
                } catch (error) { }
            }

            function previewColor(o) {
                var p = o.parentElement;
                o = $(o);
                var s = o.attr("style");
                try {
                    $(".logo.zuri-logo li img").attr("style", s);
                    if (p) { $(p).attr("style", s); }
                } catch (error2) { }
                return s;
            }

            function showColorPicker(o) {
                var cp = $(".custom-theme-picker");
                if (o.value.indexOf("custom") === 0) {
                    cp.show();
                } else {
                    cp.hide();
                }
            }

            window.customPicker = function (sender) {
                var o = $('.theme-selector select option[value^="custom"]')[0]
                sender.add_colorChange(function (sender) {
                    var selected = sender.get_selectedColor();
                    o.style.backgroundColor = selected;
                    previewColor(o);
                })
            }

            var setMobileStyle = function (mobstyle) {
                var styles = document.getElementById("mobile-style");
                if (!styles) {
                    styles = document.createElement("style");
                    styles.id = "mobile-style";
                    document.body.appendChild(styles);
                }
                styles.innerHTML = mobstyle;
            }

            $(".theme-selector select").change(function () { selectTheme(this); });
            selectTheme($(".theme-selector select")[0]);

            try {
                if (window.addEventListener && __doPostBack) {
                    window.addEventListener("keydown", function (ev) {
                        var k = ev.keyCode
                        if (ev.ctrlKey && k == 83 && ev.target instanceof HTMLTextAreaElement) {
                            //Ctrl + S para salvar as configurações se estiver com foco no editor CSS.
                            try {
                                ev.stopPropagation();
                                ev.preventDefault();
                                ev.stopImmediatePropagation();
                            } catch (e2) { }
                            __doPostBack('<%=btnok.UniqueID%>', '');
                            return false;
                        }
                    }, true);
                }
            } catch (error) { }
        });
    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadTabStrip runat="server" ID="tsTabs" MultiPageID="mpPages" SelectedIndex="0">
        <Tabs>
            <telerik:RadTab runat="server" id="tabModel" PageViewID="pvModel" Text="Modelo" />
            <telerik:RadTab runat="server" id="tabCSS" PageViewID="pvCSS" Text="CSS" />
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="mpPages" CssClass="config-area" SelectedIndex="0">
        <telerik:RadPageView runat="server" ID="pvModel" Selected="true">
            <fieldset class="config">
                <legend>
                    <asp:Literal runat="server" ID="litModel" Text="Modelo" /></legend>
                <label class="config">
                    <asp:Label ID="lblsitetitle" runat="server" Text="Título do site" />
                    <asp:TextBox ID="txttitle" runat="server" />
                </label>

                <label class="config">
                    <asp:Label ID="lblcontainer" runat="server" Text="Container Padrão" />
                    <asp:DropDownList ID="lstcontainer" runat="server" />
                </label>

                <label class="config">
                    <asp:Label ID="lbltemplate" runat="server" Text="Modelo Padrão" />
                    <asp:DropDownList ID="lsttemplates" runat="server" />
                </label>

                <label class="config theme-selector">
                    <asp:Label runat="server" ID="lblTheme" Text="Tema" />
                    <asp:DropDownList ID="lstthemes" runat="server" />
                    <WFF:colorpicker id="cpkcustomtheme" CssClass="custom-theme-picker" OnClientLoad="customPicker" style="display:none" runat="server" />
                    <p>
                        <asp:Literal runat="server" ID="litThemeDesc">As seleções de Tema e Logo feitas nesta página só funcionam se o template de página utilizado estiver usando a folha de estilo "<strong>/theme/styles</strong>".</asp:Literal>
                    </p>
                </label>
            </fieldset>

            <fieldset class="config logo zuri-logo">
                <legend>
                    <asp:Literal runat="server" ID="litLogo" Text="Logo" /></legend>
                <asp:FileUpload runat="server" ID="upLogo" />
                <asp:Button runat="server" ID="btAddLogo" CssClass="btnEnviar3" Text="Adicionar" />
                <asp:Repeater ID="rptLogos" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li>
                            <label title="Selecionar">
                                <input type="radio" name="selected-logo" <%#Eval("checked") %> value="<%#Eval("value")%>" /><div><%#Eval("name")%><img src="<%#Eval("path")%>" /><%#Eval("size")%></div>
                            </label>
                            <asp:LinkButton runat="server" ToolTip="Delete" CssClass='<%# String.Format("delete {0}", Eval("value")).Trim()%>' CommandArgument='<%# String.Format("delete:{0}", Eval("value")).Trim()%>' Text="delete" />
                        </li>
                    </ItemTemplate>
                    <FooterTemplate></ul></FooterTemplate>
                </asp:Repeater>

            </fieldset>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="pvCSS">
            <fieldset class="config wfcustom-editor">
                <legend>
                    <asp:Literal runat="server" ID="litCustomCss" Text="Personalização de CSS" /></legend>
                <p><asp:Literal runat="server" ID="litCustomCssDesc" text="As definições personalizadas de CSS só funcionam se o template de página utilizado estiver usando uma dessas folha de estilos: '<strong>/WFResources/WFCustom/styles/WFCustom.css</strong>' ou '<strong>/theme/styles</strong>'." /></p>
                <asp:TextBox runat="server" ID="txtCustom" TextMode="MultiLine" CssClass="wfcustom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
            </fieldset>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    <asp:Label ID="msg" runat="server" />
    <section class="actions">
        <asp:Button ID="btnok" runat="server" Text="Ok" />
    </section>
</asp:Content>
