<%@ Page Title="" Language="C#" MasterPageFile="~/SystemSettings/SysSettingMasterPage.master" AutoEventWireup="true" CodeFile="SettingColors.aspx.cs" Inherits="SystemSettings_SettingColors" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        .colorinput {
            float: left;
            height: 20px;
            width: 60px;
        }

        p {
            background-color: #f78e1e;
            float: right;
            width: 30px;
            height: 24px;
            margin: 0px;
            margin-left: 15px;
        }

        .solutionlisttable {
            border: 1px solid #b0b0b0;
            border-collapse: collapse;
        }

            .solutionlisttable th {
                border: 1px solid #b0b0b0;
                line-height: 25px;
                background-color: #ddd;
            }

            .solutionlisttable tr td {
                border: 1px solid #b0b0b0;
                line-height: 25px;
                word-break: break-all;
            }

            .solutionlisttable tr:hover {
                background-color: #efebeb;
            }

        .selected {
            background-color: #efebeb;
        }

        .usingscheme {
            text-align: center;
        }

        #leftcontentdiv {
            border: 1px solid #ddd;
            border-radius: 3px 4px;
            width: 250px;
            overflow: auto;
            border-top: none;
        }
    </style>
    <link href="<%=GetFileUrlWithVersion("Css/colorpick.css")%>" rel="stylesheet" />
    <script type="text/javascript" src="<%=GetFileUrlWithVersion("Js/colorpick.js")%>"></script>
    <script type="text/javascript">
        /*RGB颜色转换为16进制*/
        function regrgb(rgb) {
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            function hex(x) {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            rgb = "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
            return rgb;
        }

        function iscolorStr(str) {
            //var reg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
            var reg = /^#([0-9a-fA-F]{6})$/;
            if (reg.test(str))
                return true;
            return false;
        }

        function onblur_setcolor(c_dom, change_dom) {
            //var colorvalue = c_dom.val();

            //if (iscolorStr(colorvalue))
            //    change_dom.css('background-color', colorvalue);
            //else {
            //    showAlert("The color format is wrong. Please enter the correct color.", "System Message");
            //    c_dom.val("");
            //}
        }

        $(function () {
            setPageTitle(GetTextByKey("P_SET_STYLESETTING", 'Style Setting'), true);
            $('#leftcontentdiv').css('height', $(window).height() - $('#h3title').height() - $('#top_bt').height() - 67);
            $('#rightheaderDiv').css('width', $(window).width() - $('#leftcontentdiv').width() - 140);
            $('#dialog_colorscheme').prop('iframe', true).dialog(function () {
                showmaskbg(false);
            });

            $('#charttitlecolor').colorpick({
                color: regrgb($('#charttitlecolor').css('background-color')),
                onShow: function (hsb, hex, rgb, el) {
                    $(this).colorpickSetColor(regrgb($('#charttitlecolor').css('background-color')));
                },
                onSubmit: function (hsb, hex, rgb, el) {
                    $("#r").attr("value", rgb.r);
                    $("#g").attr("value", rgb.g);
                    $("#b").attr("value", rgb.b);

                    $('#charttitlecolor').css('background-color', '#' + hex);
                    $('#charttitle_input').val('#' + hex);
                    $(el).colorpickHide();
                },
                onCancelSubmit: function (cal) {
                    $(cal).hide();
                }
            });
            $('#charttitle_input').blur(function () {
                onblur_setcolor($(this), $('#charttitlecolor'));
            });

            $('#chartbordercolor').colorpick({
                color: regrgb($('#chartbordercolor').css('background-color')),
                onShow: function (hsb, hex, rgb, el) {
                    $(this).colorpickSetColor(regrgb($('#chartbordercolor').css('background-color')));
                },
                onSubmit: function (hsb, hex, rgb, el) {
                    $("#r").attr("value", rgb.r);
                    $("#g").attr("value", rgb.g);
                    $("#b").attr("value", rgb.b);

                    $('#chartbordercolor').css('background-color', '#' + hex);
                    $('#chartborder_input').val('#' + hex);
                    $(el).colorpickHide();
                },
                onCancelSubmit: function (cal) {
                    $(cal).hide();
                }
            });
            $('#chartborder_input').blur(function () {
                onblur_setcolor($(this), $('#chartbordercolor'));
            });

            $('#menubackgroundcolor').colorpick({
                color: regrgb($('#menubackgroundcolor').css('background-color')),
                onShow: function (hsb, hex, rgb, el) {
                    $(this).colorpickSetColor(regrgb($('#menubackgroundcolor').css('background-color')));
                },
                onSubmit: function (hsb, hex, rgb, el) {
                    $("#r").attr("value", rgb.r);
                    $("#g").attr("value", rgb.g);
                    $("#b").attr("value", rgb.b);

                    $('#menubackgroundcolor').css('background-color', '#' + hex);
                    $('#menubackground_input').val('#' + hex);
                    $(el).colorpickHide();
                },
                onCancelSubmit: function (cal) {
                    $(cal).hide();
                }
            });
            $('#menubackground_input').blur(function () {
                onblur_setcolor($(this), $('#menubackgroundcolor'));
            });

            $('#titlebarcolor').colorpick({
                color: regrgb($('#titlebarcolor').css('background-color')),
                onShow: function (hsb, hex, rgb, el) {
                    $(this).colorpickSetColor(regrgb($('#titlebarcolor').css('background-color')));
                },
                onSubmit: function (hsb, hex, rgb, el) {
                    $("#r").attr("value", rgb.r);
                    $("#g").attr("value", rgb.g);
                    $("#b").attr("value", rgb.b);

                    $('#titlebarcolor').css('background-color', '#' + hex);
                    $('#titlebar_input').val('#' + hex);
                    $(el).colorpickHide();
                },
                onCancelSubmit: function (cal) {
                    $(cal).hide();
                }
            });
            $('#titlebar_input').blur(function () {
                onblur_setcolor($(this), $('#titlebarcolor'));
            });
            GetCompanyUIStyles();
        });

        function GetCompanyUIStyles() {
            $('#s_tboy').empty();
            $.ajax({
                type: "POST",
                async: false,
                datatype: "json",
                url: "SettingColors.aspx",
                data: {
                    MethodName: "GetCompanyUIStyles"
                },
                success: function (result) {
                    var schemes = eval(result);
                    if (schemes && schemes.length > 0) {
                        if (schemes[0].UIStyleName != undefined) {
                            var selectedID = $('#styleID').text() == "" ? -1 : parseInt($('#styleID').text());
                            var selectedIndex = 0;
                            for (var i = 0; i < schemes.length; i++) {
                                var tr = $('<tr></tr>').data('jsondata', schemes[i]).click(function (e) {
                                    trclick(this);
                                });
                                if (selectedID == schemes[i].UIStyleID)
                                    selectedIndex = i;
                                tr.append($('<td></td>').text(schemes[i].UIStyleName));

                                var tddefault = $('<td style="text-align:center;">No</td>');
                                if (schemes[i].IsDefault) {
                                    tddefault.text('Yes');
                                }
                                tr.append(tddefault);
                                $('#s_tboy').append(tr);
                            }
                            $('#s_tboy tr')[selectedIndex].click();
                        }
                        else {
                            SetColor(null);
                        }
                    }
                    showmaskbg(false);
                },
                error: function (msg) {
                    showmaskbg(false);
                    showAlert(msg.statusText, GetTextByKey("P_SET_ERROR", 'Error'));
                }
            });
        }

        function SetColor(data) {
            if (data) {
                $('#charttitlecolor').css('background-color', data.ChartTitleBackgroundColor);
                $('#chartbordercolor').css('background-color', data.ChartBorderColor);
                $('#menubackgroundcolor').css('background-color', data.MenuBackgroundColor);
                $('#titlebarcolor').css('background-color', data.TitleBarColor);

                $('#charttitle_input').val(data.ChartTitleBackgroundColor);
                $('#chartborder_input').val(data.ChartBorderColor);
                $('#menubackground_input').val(data.MenuBackgroundColor);
                $('#titlebar_input').val(data.TitleBarColor);

                $('#styleID').text(data.UIStyleID);
                $('#stylename_input').val(data.UIStyleName);
                if (data.IsDefault) {
                    $('#isdefault').attr('checked', 'checked');
                }
                else
                    $('#isdefault').removeAttr('checked');
            }
            else {
                $('#charttitlecolor').css('background-color', '#F78E1E');
                $('#chartbordercolor').css('background-color', '#F78E1E');
                $('#menubackgroundcolor').css('background-color', '#0078D7');
                $('#titlebarcolor').css('background-color', '#F78E1E');

                $('#charttitle_input').val('#F78E1E');
                $('#chartborder_input').val('#F78E1E');
                $('#menubackground_input').val('#0078D7');
                $('#titlebar_input').val('#F78E1E');

                $('#isdefault').removeAttr('checked');
                $('#styleID').text("");
                $('#stylename_input').val("").focus();
            }
        }

        function DeleteUIStyle() {
            showConfirm(GetTextByKey("P_SET_DOYOUWANTTODELETETHISSTYLE",'Do you want to delete this style?'), GetTextByKey("P_SET_DELETE", 'Delete'), function (e) {
                $.ajax({
                    type: "POST",
                    async: false,
                    datatype: "json",
                    url: "SettingColors.aspx",
                    data: {
                        ClientData: parseInt($('#styleID').text()),
                        MethodName: "DeleteCompanyUIStyle"
                    },
                    success: function (msg) {
                        GetCompanyUIStyles();
                        showmaskbg(false);
                    },
                    error: function (msg) {
                        showAlert(msg.statusText, GetTextByKey("P_SET_ERROR", 'Error'));
                        showmaskbg(false);
                    }
                });
            }, function () { showmaskbg(false); });
        }

        function SaveCompanyUIStyle() {
            var alerttitle = GetTextByKey("P_SET_SYSTEMMESSAGE", "System Message");
            if ($.trim($('#stylename_input').val()) == "") {
                showAlert(GetTextByKey("P_SET_STYLENAMECANTBEEMPTY", "Style name can't be empty."), alerttitle);
                return;
            }
            var styledata = {
                ChartTitleBackgroundColor: $('#charttitle_input').val(),
                ChartBorderColor: $('#chartborder_input').val(),
                MenuBackgroundColor: $('#menubackground_input').val(),
                TitleBarColor: $('#titlebar_input').val(),

                IsDefault: $('#isdefault').is(':checked'),
                UIStyleID: $('#styleID').text() == "" ? -1 : parseInt($('#styleID').text()),
                UIStyleName: htmlencode($.trim($('#stylename_input').val()))
            };

            if (!iscolorStr(styledata.ChartTitleBackgroundColor)) {
                showAlert(GetTextByKey("P_SET_CHARTTITLEBGCOLORFORMATISINVALID", "Chart Title Background Color format is invalid. Please enter a valid color code."), alerttitle);
                return;
            }
            if (!iscolorStr(styledata.ChartBorderColor)) {
                showAlert(GetTextByKey("P_SET_CHARTBORDERCOLORFORMATISINVALID", "Chart Border Color format is invalid. Please enter a valid code."), alerttitle);
                return;
            }
            if (!iscolorStr(styledata.MenuBackgroundColor)) {
                showAlert(GetTextByKey("P_SET_MENUBGCOLORFORMATISINVALID", "Menu Background Color format is invalid. Please enter a valid code."), alerttitle);
                return;
            }
            if (!iscolorStr(styledata.TitleBarColor)) {
                showAlert(GetTextByKey("P_SET_TITLEBARCOLORFORMATISINVALID", "Title Bar Color format is invalid. Please enter a valid code."), alerttitle);
                return;
            }
            showmaskbg(true);
            $.ajax({
                type: "POST",
                async: false,
                datatype: "json",
                url: "SettingColors.aspx",
                data: {
                    ClientData: JSON.stringify(styledata),
                    MethodName: "SetCompanyUIStyle"
                },
                success: function (msg) {
                    if (eval(msg) == "OK") {
                        showAlert(GetTextByKey("P_SET_SAVSUCCESSFULLY", "Saved Successfully"), GetTextByKey("P_SET_SAVESTYLE", 'Save Style'));
                        GetCompanyUIStyles();
                    }
                    else
                        showAlert(eval(msg), GetTextByKey("P_SET_SAVESTYLE", 'Save Style'));
                    showmaskbg(false);
                },
                error: function (msg) {
                    showAlert(msg.statusText, GetTextByKey("P_SET_ERROR", 'Error'));
                    showmaskbg(false);
                }
            });
        }

        function trclick(obj) {
            $('#s_tboy tr').each(function () {
                $(this).removeClass('selected');
            });
            $(obj).addClass('selected');
            SetColor($(obj).data('jsondata'));
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="padding: 0px; margin: 0px;">
        <div class="page_title" data-lgid="P_SET_STYLESETTING">Style Setting</div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="SetColor(null);" data-lgid="P_SET_ADD">Add</span>
            <span class="sbutton icondelete" onclick="DeleteUIStyle();" data-lgid="P_SET_DELETE">Delete</span>
            <span class="sbutton iconsave" onclick="SaveCompanyUIStyle();" data-lgid="P_SET_SAVE">Save</span>
            <span class="sbutton iconrefresh" onclick="GetCompanyUIStyles();" data-lgid="P_SET_REFRESH">Refresh</span>
        </div>
        <div class="content_main content_div" style="padding-top: 10px;">
            <table>
                <tr>
                    <td style="vertical-align: top;">
                        <div id="leftcontentdiv">
                            <table class="solutionlisttable">
                                <thead>
                                    <tr>
                                        <th style="width: 200px;" data-lgid="P_SET_STYLENAME">Style Name</th>
                                        <th class="usingscheme" style="width: 90px;" data-lgid="P_SET_ISDEFAULT">Is Default</th>
                                    </tr>
                                </thead>
                                <tbody id="s_tboy"></tbody>
                            </table>
                        </div>
                    </td>
                    <td style="vertical-align: top; padding-left: 20px;">
                        <div id="rightheaderDiv" style="border-bottom: 1px solid #b0b0b0; margin-bottom: 20px; line-height: 30px;">
                            <table>
                                <tr>
                                    <td style="text-align: right; padding-right: 5px; width: 160px;" data-lgid="P_SET_STYLENAME_COLON">Style Name :</td>
                                    <td>
                                        <input id="stylename_input" style="width: 400px; height: 20px;" maxlength="200" /><label id="styleID" style="display: none;"></label></td>
                                </tr>
                                <tr>
                                    <td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_ISDEFAULT_COLON">Is Default:</td>
                                    <td>
                                        <input id="isdefault" type="checkbox" style="margin-left: 0;" /></td>
                                </tr>
                            </table>
                        </div>
                        <table style="min-width: 200px; border: none; line-height: 50px;">
                            <tr>
                                <td style="text-align: right; padding-right: 5px; width: 160px;" data-lgid="P_SET_CHARTTITLECOLOR_COLON">Chart Title Color :</td>
                                <td>
                                    <p id="charttitlecolor"></p>
                                    <input id="charttitle_input" class="colorinput" maxlength="7" />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_CHARTBORDERCOLOR_COLON">Chart Border Color :</td>
                                <td>
                                    <p id="chartbordercolor"></p>
                                    <input id="chartborder_input" class="colorinput" maxlength="7" />

                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_MENUBACKGROUNDCOLOR_COLON">Menu Background Color :</td>
                                <td>
                                    <p id="menubackgroundcolor"></p>
                                    <input id="menubackground_input" class="colorinput" maxlength="7" />

                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_TITLEBARCOLOR_COLON">Title Bar Color :</td>
                                <td>
                                    <p id="titlebarcolor"></p>
                                    <input id="titlebar_input" class="colorinput" maxlength="7" />

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="mask_bg" style="display: none;"><div class="loading c-spin"></div></div>
</asp:Content>