/** 
 * WebDataRocks Reporting v1.3.3 (http://www.webdatarocks.com/)
 * Copyright 2017 WebDataRocks. All rights reserved.
 */
var WebDataRocksToolbar = function (pivotContainer, pivot, _, width, labels) {
    this.pivot = pivot;
    this.pivotContainer = pivotContainer;
    this.width = (typeof width == "number" || (width.indexOf("px") < 0 && width.indexOf("%") < 0)) ? width + "px" : width;
    this.Labels = labels;
}
WebDataRocksToolbar.prototype.getTabs = function () {
    var tabs = [];
    var Labels = this.Labels;
    // Connect tab
    tabs.push({
        title: Labels.connect, id: "wdr-tab-connect", icon: this.icons.connect,
        menu: [
            { title: Labels.connect_local_csv, id: "wdr-tab-connect-local-csv", handler: this.connectLocalCSVHandler, mobile: false, icon: this.icons.connect_csv },
            { title: Labels.connect_local_json, id: "wdr-tab-connect-local-json", handler: this.connectLocalJSONHandler, mobile: false, icon: this.icons.connect_json },
            { title: this.osUtils.isMobile ? Labels.connect_remote_csv_mobile : Labels.connect_remote_csv, id: "wdr-tab-connect-remote-csv", handler: this.connectRemoteCSV, icon: this.icons.connect_csv },
            { title: this.osUtils.isMobile ? Labels.connect_remote_json_mobile : Labels.connect_remote_json, id: "wdr-tab-connect-remote-json", handler: this.connectRemoteJSON, icon: this.icons.connect_json },
        ]
    });

    // Open tab
    tabs.push({
        title: Labels.open, id: "wdr-tab-open", icon: this.icons.open,
        menu: [
            { title: Labels.local_report, id: "wdr-tab-open-local-report", handler: this.openLocalReport, mobile: false, icon: this.icons.open_local },
            { title: this.osUtils.isMobile ? Labels.remote_report_mobile : Labels.remote_report, id: "wdr-tab-open-remote-report", handler: this.openRemoteReport, icon: this.icons.open_remote }
        ]
    });

    // Save tab
    tabs.push({ title: Labels.save, id: "wdr-tab-save", handler: this.saveHandler, mobile: false, icon: this.icons.save });

    // Export tab
    tabs.push({
        title: Labels.export, id: "wdr-tab-export", mobile: false, icon: this.icons.export,
        menu: [
            { title: Labels.export_print, id: "wdr-tab-export-print", handler: this.printHandler, icon: this.icons.export_print },
            { title: Labels.export_html, id: "wdr-tab-export-html", handler: this.exportHandler, args: "html", icon: this.icons.export_html },
            { title: Labels.export_excel, id: "wdr-tab-export-excel", handler: this.exportHandler, args: "excel", icon: this.icons.export_excel },
            { title: Labels.export_pdf, id: "wdr-tab-export-pdf", handler: this.exportHandler, args: "pdf", icon: this.icons.export_pdf },
        ]
    });

    // Format tab
    tabs.push({
        title: Labels.format, id: "wdr-tab-format", icon: this.icons.format, rightGroup: true,
        menu: [
            { title: this.osUtils.isMobile ? Labels.format_cells_mobile : Labels.format_cells, id: "wdr-tab-format-cells", handler: this.formatCellsHandler, icon: this.icons.format_number },
            { title: this.osUtils.isMobile ? Labels.conditional_formatting_mobile : Labels.conditional_formatting, id: "wdr-tab-format-conditional", handler: this.conditionalFormattingHandler, icon: this.icons.format_conditional }
        ]
    });

    // Options tab
    tabs.push({ title: Labels.options, id: "wdr-tab-options", handler: this.optionsHandler, icon: this.icons.options, rightGroup: true });

    // Fields tab
    tabs.push({ title: Labels.fields, id: "wdr-tab-fields", handler: this.fieldsHandler, icon: this.icons.fields, rightGroup: true });

    // Fullscreen tab
    if (document["addEventListener"] != undefined) { // For IE8
        tabs.push({ title: Labels.fullscreen, id: "wdr-tab-fullscreen", handler: this.fullscreenHandler, mobile: false, icon: this.icons.fullscreen, rightGroup: true });
    }

    return tabs;
}
WebDataRocksToolbar.prototype.create = function () {
    this.popupManager = new WebDataRocksToolbar.PopupManager(this);
    this.dataProvider = this.getTabs();
    this.init();
}

WebDataRocksToolbar.prototype.applyToolbarLayoutClasses = function() {
    if (!this.osUtils.isMobile) {
        var _this = this;
        var addLayoutClasses = function() {
            if (!_this.toolbarWrapper) return;
            var toolbarWidth = _this.toolbarWrapper.getBoundingClientRect().width;
            _this.toolbarWrapper.classList.remove("wdr-layout-500");
            _this.toolbarWrapper.classList.remove("wdr-layout-360");
            _this.toolbarWrapper.classList.remove("wdr-layout-300");
            if (toolbarWidth < 500) {
                _this.toolbarWrapper.classList.add("wdr-layout-500");
            }
            if (toolbarWidth < 360) {
                _this.toolbarWrapper.classList.add("wdr-layout-360");
            }
            if (toolbarWidth < 300) {
                _this.toolbarWrapper.classList.add("wdr-layout-300");
            }
        };
        addLayoutClasses();
        window.addEventListener("resize", addLayoutClasses);
    }
}

WebDataRocksToolbar.prototype.init = function () {
    this.container = this.pivotContainer;
    this.container.style.position = (this.container.style.position == "") ? "relative" : this.container.style.position;
    this.toolbarWrapper = document.createElement("div");
    this.toolbarWrapper.id = "wdr-toolbar-wrapper";
    this.toolbarWrapper.style.width = this.width;
    if (this.osUtils.isMobile) {
        this.addClass(this.toolbarWrapper, "wdr-mobile");
    }
    this.addClass(this.toolbarWrapper, "wdr-toolbar-ui");
    this.toolbarWrapper.style.width = this.width;
    var toolbar = document.createElement("ul");
    toolbar.id = "wdr-toolbar";
    var rightGroup = document.createElement("div");
    rightGroup.classList.add("wdr-toolbar-group-right");
    toolbar.appendChild(rightGroup);

    for (var i = 0; i < this.dataProvider.length; i++) {
        if (this.isDisabled(this.dataProvider[i])) continue;
        if (this.osUtils.isMobile && this.dataProvider[i].menu != null && this.dataProvider[i].collapse != true) {
            for (var j = 0; j < this.dataProvider[i].menu.length; j++) {
                if (this.isDisabled(this.dataProvider[i].menu[j])) continue;
                toolbar.appendChild(this.createTab(this.dataProvider[i].menu[j]));
            }
        } else {
            var tab = (this.dataProvider[i].divider) ? this.createDivider(this.dataProvider[i]) : this.createTab(this.dataProvider[i]);
            if (rightGroup && this.dataProvider[i].rightGroup) {
                rightGroup.appendChild(tab);
            } else {
                toolbar.appendChild(tab);
            }
        }
    }
    this.toolbarWrapper.appendChild(toolbar);
    this.container.insertBefore(this.toolbarWrapper, this.container.firstChild);
    this.updateLabels(this.Labels);

    this.applyToolbarLayoutClasses();
}

// LABELS
WebDataRocksToolbar.prototype.updateLabels = function (labels) {
    var Labels = this.Labels = labels;

    this.setText(document.querySelector("#wdr-tab-connect > a > span"), Labels.connect);
    this.setText(document.querySelector("#wdr-tab-connect-local-csv > a > span"), Labels.connect_local_csv);
    this.setText(document.querySelector("#wdr-tab-connect-local-json > a > span"), Labels.connect_local_json);
    this.setText(document.querySelector("#wdr-tab-connect-remote-csv > a > span"), this.osUtils.isMobile ? Labels.connect_remote_csv_mobile : Labels.connect_remote_csv);

    this.setText(document.querySelector("#wdr-tab-open > a > span"), Labels.open);
    this.setText(document.querySelector("#wdr-tab-open-local-report > a > span"), Labels.local_report);
    this.setText(document.querySelector("#wdr-tab-open-remote-report > a > span"), this.osUtils.isMobile ? Labels.remote_report_mobile : Labels.remote_report);

    this.setText(document.querySelector("#wdr-tab-save > a > span"), Labels.save);

    this.setText(document.querySelector("#wdr-tab-format > a > span"), Labels.format);
    this.setText(document.querySelector("#wdr-tab-format-cells > a > span"), this.osUtils.isMobile ? Labels.format_cells_mobile : Labels.format_cells);
    this.setText(document.querySelector("#wdr-tab-format-conditional > a > span"), this.osUtils.isMobile ? Labels.conditional_formatting_mobile : Labels.conditional_formatting);

    this.setText(document.querySelector("#wdr-tab-options > a > span"), Labels.options);
    this.setText(document.querySelector("#wdr-tab-fullscreen > a > span"), Labels.fullscreen);

    this.setText(document.querySelector("#wdr-tab-export > a > span"), Labels.export);
    this.setText(document.querySelector("#wdr-tab-export-print > a > span"), Labels.export_print);
    this.setText(document.querySelector("#wdr-tab-export-html > a > span"), Labels.export_html);
    this.setText(document.querySelector("#wdr-tab-export-excel > a > span"), Labels.export_excel);
    this.setText(document.querySelector("#wdr-tab-export-pdf > a > span"), Labels.export_pdf);

    this.setText(document.querySelector("#wdr-tab-fields > a > span"), Labels.fields);
}
// ICONS
WebDataRocksToolbar.prototype.icons = {
    connect: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-305.5 396.5 36 36"><title>menu_connect</title><path fill="#555" d="M-274.5 425.409s-.988.277-1.422.761l-3.536-1.783c.189-.509.258-1.066.07-1.572l3.719-1.76a2.36 2.36 0 0 0 3.317.147 2.341 2.341 0 0 0 .157-3.3 2.335 2.335 0 0 0-4.055 1.582c-.009.122-.008.237.001.358l-3.896 1.884a2.281 2.281 0 0 0-1.359-.451 2.338 2.338 0 0 0-2.177 2.481 2.33 2.33 0 0 0 2.177 2.179c.491 0 .967-.156 1.359-.451l3.921 1.892a2.317 2.317 0 0 0 1.981 2.604 2.316 2.316 0 0 0 2.604-1.981c.171-1.269-1-2.432-2.262-2.603a8.794 8.794 0 0 0-.6-.026v.039zM-301.592 413.883c-.008.105-.908.222.092.326v6.836c0 2.587 5.827 5.455 13.177 5.455h1.081c-1.146-3 .303-6.854 3.299-8.155-1.448.172-2.868.069-4.334.069-7.056.009-12.775-2.093-13.315-4.531z"/><path fill="#555" d="M-288.5 416.217c7.377 0 13-2.097 13-4.683v-6.853c0-2.586-5.647-4.682-13-4.682-7.352 0-13 2.104-13 4.69v6.853c0 2.586 5.648 4.675 13 4.675zm.177-15.268c5.903 0 10.691 1.661 10.691 3.741s-4.796 3.741-10.691 3.741c-5.894 0-10.683-1.67-10.683-3.741 0-2.072 4.79-3.741 10.683-3.741z"/></svg>',
    connect_csv: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M11 24l6 0V27h-6V24z"/><path d="M12.8 22L12.8 22l1.2-2.5L15.1 22h1.9l-2-3.9L16.9 14h-1.8l-1 2.5L12.9 14h-1.8l1.9 3.9L11 22H12.8z"/><path d="M19 19h6v3h-6V19z"/><path d="M19 14h6v3L19 17V14z"/><path d="M19 24h6v3h-6V24z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>',
    connect_json: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/><path d="M19 24c0 0.6-0.4 1-1 1 -0.6 0-1-0.4-1-1v-2c0-0.6 0.4-1 1-1 0.6 0 1 0.4 1 1V24zM21 18v-2c0-0.6-0.4 0-1 0 -0.6 0-1-0.4-1-1 0-0.6 0.4-1 1-1 1.7 0 3 0.3 3 2v2c0 1.1 0.9 2 2 2 0.6 0 1 0.4 1 1 0 0.6-0.4 1-1 1 -1.1 0-2 0.9-2 2v2c0 1.7-1.3 2-3 2 -0.6 0-1-0.4-1-1s0.4-1 1-1c0.6 0 1 0.6 1 0v-2c0-1.2 0.5-2.3 1.4-3C21.5 20.3 21 19.2 21 18zM11 20c1.1 0 2-0.9 2-2v-2c0-1.7 1.3-2 3-2 0.6 0 1 0.4 1 1 0 0.6-0.4 1-1 1 -0.6 0-1-0.6-1 0v2c0 1.2-0.5 2.3-1.4 3 0.8 0.7 1.4 1.8 1.4 3v2c0 0.6 0.4 0 1 0 0.6 0 1 0.4 1 1s-0.4 1-1 1c-1.7 0-3-0.3-3-2v-2c0-1.1-0.9-2-2-2 -0.6 0-1-0.4-1-1C10 20.4 10.4 20 11 20z"/><path d="M18 17c0.6 0 1 0.4 1 1s-0.4 1-1 1 -1-0.4-1-1S17.4 17 18 17z"/></svg>',
    open: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-305.5 396.5 36 36"><title>menu_open</title><path fill="#555" d="M-279.351 408.5h8.976c.064 0 .126-.067.167-.025.021.052.021.055 0 .107l-2.053 20.701c-.01.117-.104.217-.219.217h-30.102c-.116 0-.21-.104-.221-.22l-1.989-16.009c-.022-.041-.022.124 0 .083.042-.054.115.146.178.146h21.198c.87 0 1.665-.726 2.053-1.499l1.812-3.446a.414.414 0 0 1 .2-.055zm-4.052 2.473c.084-.011.162-.052.194-.126l1.813-3.288c.408-.754 1.196-1.059 2.054-1.059h7.842v-2.637c0-1.102-.83-2.166-1.929-2.25-.053 0-.183-.113-.235-.113h-18.328c-.104 0-.188.006-.241-.09.01-1.1-.858-1.91-1.958-1.91h-6.902c-1.226 0-2.406.864-2.406 2.089v9.426l20.096-.042z"/></svg>',
    open_local: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><style>.a{fill:none;}</style><path d="M30.9 10.6C30.8 10.4 30.2 10 30 10h-1V8c0-0.4-0.6-1-1-1H15l-1-2H8C7.6 5 7 5.6 7 6v4H6c-0.2 0-0.8 0.4-0.9 0.6 -0.1 0.1-0.2 0.3-0.1 0.5l2.1 19.5C7.2 30.8 7.7 31 8 31h20c0.3 0 0.8-0.2 0.9-0.5l2.1-19.5C31 10.9 31 10.7 30.9 10.6zM28 30H8L6 11h24L28 30z"/><line x1="11" y1="23" x2="11" y2="23" class="a"/><line x1="25" y1="23" x2="25" y2="23" class="a"/><polygon points="11 15 11 23 17 23 17 25 14 25 14 26 22 26 22 25 19 25 19 23 25 23 25 15 "/></svg>',
    open_remote: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M30.9 10.6C30.8 10.4 30.2 10 30 10h-1V8c0-0.4-0.6-1-1-1H15l-1-2H8C7.6 5 7 5.6 7 6v4H6c-0.2 0-0.8 0.4-0.9 0.6 -0.1 0.1-0.2 0.3-0.1 0.5l2.1 19.5C7.2 30.8 7.7 31 8 31h20c0.3 0 0.8-0.2 0.9-0.5l2.1-19.5C31 10.9 31 10.7 30.9 10.6zM28 30H8L6 11h24L28 30z"/><path d="M24.8 18.1l-0.8 1.5c-0.2 0.2-0.5 0.2-0.8 0 -1.3-1.2-3.2-1.9-5.3-1.9 -2.1 0-4 0.7-5.3 1.9 -0.2 0.2-0.5 0.2-0.8 0l-0.8-1.5c-0.1-0.1-0.2-0.2-0.2-0.3 0-0.1 0.1-0.2 0.2-0.3 1.7-1.5 4.1-2.5 6.8-2.5 2.7 0 5.1 0.9 6.8 2.5 0.1 0 0.2 0.2 0.2 0.3C25 17.9 24.9 18 24.8 18.1zM18 19.6c1.5 0 2.8 0.5 3.8 1.4 0.2 0.2 0.2 0.5 0 0.7l-0.8 1.5c-0.2 0.2-0.5 0.2-0.8 0 -0.6-0.5-1.4-0.8-2.3-0.8 -0.9 0-1.7 0.3-2.3 0.8 -0.2 0.2-0.5 0.2-0.8 0l-0.8-1.5c-0.2-0.2-0.2-0.5 0-0.7C15.2 20.1 16.5 19.6 18 19.6zM18 23.4c0.8 0 1.4 0.6 1.4 1.3 0 0.7-0.6 1.3-1.4 1.3 -0.8 0-1.4-0.6-1.4-1.3C16.6 24 17.2 23.4 18 23.4z"/></svg>',
    save: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>menu_save</title><g fill="#555"><path d="M15.191 783.284l-5.457-5.467a1.101 1.101 0 0 0-.781-.317h-.835c-.2 0-.618.163-.618.363v8.889c0 .618-.245.748-.853.748H-5.638c-.617 0-.862-.14-.862-.748v-8.889c0-.2-.409-.363-.609-.363h-6.283c-.618 0-1.108.499-1.108 1.107v27.785c0 .617.5 1.107 1.108 1.107h27.784c.618 0 1.108-.499 1.108-1.107v-22.337c0-.29-.109-.562-.309-.771zM8.98 801.463c0 .618-.499 1.037-1.107 1.037H-6.873c-.617 0-.627-.357-.627-.966v-8.626c0-.617.019-1.408.627-1.408H7.882c.618 0 1.108.613 1.108 1.223l-.01 8.74z"/><path d="M-4.167 784.5h9.361c.2 0 .306.228.306.028v-6.665c0-.2-.106-.363-.306-.363h-9.361c-.2 0-.333.163-.333.363v6.665c0 .191.124-.028.333-.028zm5.667-4.294c0-.618.392-1.108 1-1.108.618 0 1 .5 1 1.108v1.97c0 .618-.392 1.108-1 1.108-.618 0-1-.5-1-1.108v-1.97zM4.168 796.5h-7.31c-.617 0-1.108.393-1.108 1s.5 1 1.108 1h7.31c.617 0 1.107-.393 1.107-1s-.498-1-1.107-1z"/></g></svg>',
    export: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>menu_export</title><g fill="#555"><path d="M15.446 795.615l-4.289-6.461c-.346-.515-.803-.654-1.428-.654H7.788c-.186 0-.346-.029-.363.156-.008.076.017.07.059.137l4.76 7.108c.042.06.034.337-.017.38-.025.025-.067.219-.102.219H6.699c-.194 0-.354-.063-.363.125-.305 3.23-3.174 5.495-6.407 5.192-2.81-.263-5.039-2.329-5.3-5.14-.009-.195-.168-.178-.363-.178h-5.401c-.076 0-.144-.281-.144-.357 0-.025.008-.157.017-.175l4.76-7.203c.102-.16.05-.245-.109-.347-.06-.035-.118.082-.187.082h-1.94c-.616 0-1.199.145-1.553.658l-4.664 6.547c-.203.304-.545.586-.545.95v9.216c1 .911 1.267 1.646 2.187 1.629h27.625c.903.009 1.188-.709 1.188-1.611v-9.233c1-.373.157-.735-.054-1.04z"/><path d="M-3.674 783.5H-2.5v10.2c1 1.4 1.764 2.464 3.165 2.371 1.274-.083 1.835-1.097 2.835-2.371v-10.2h1.207c.346 0 .641-.04.65-.387.008-.151-.042-.193-.144-.311l-4.186-5.11c-.228-.287-.642-.302-.929-.073-.042.034-.076.081-.101.115l-4.135 5.172c-.22.271-.187.447.084.668.11.085.244-.074.38-.074z"/></g></svg>',
    export_print: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>dd_save_print</title><path fill="#555" d="M-5.5 798.685v3.815h11v-7h-11v3.185zm2-1.185h7v1h-7v-1zm0 2h7v1h-7v-1zM5.5 786.308V782.5h-11v7h11z"/><path fill="#555" d="M8.94 786.5H7.5v4h-14v-4h-1.44c-1.493 0-2.56 1.064-2.56 2.558v6.87c0 1.493 1.067 2.572 2.56 2.572h1.44v-4h14v4h1.44c1.493 0 2.56-1.064 2.56-2.557v-6.878c0-1.501-1.074-2.565-2.56-2.565z"/></svg>',
    export_excel: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M24.4 15h-3.8L18 18.6 15.3 15h-3.8l4.5 5.2L11 27h7.3L18 25h-2l2-3L21.1 27H25l-5.1-6.8L24.4 15z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>',
    export_html: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M25.7 20.8l-2.3-2.5c-0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3 -0.3 0.4-0.3 1 0 1.4l1.7 1.9 -1.7 1.9c-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3l2.3-2.5C26.1 21.8 26.1 21.2 25.7 20.8z"/><path d="M14 24c0-0.3-0.1-0.5-0.3-0.7l-1.7-1.9 1.7-1.9c0.3-0.4 0.3-1 0-1.4 -0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3l-2.3 2.5c-0.3 0.4-0.3 1 0 1.4l2.3 2.5c0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3C13.9 24.5 14 24.3 14 24z"/><path d="M20.4 15.1c-0.1 0-0.2-0.1-0.3-0.1 -0.4 0-0.8 0.3-0.9 0.6l-4.1 11.1c-0.1 0.2-0.1 0.5 0 0.7 0.1 0.2 0.3 0.4 0.5 0.5C15.7 28 15.8 28 16 28c0.4 0 0.8-0.3 0.9-0.6l4.1-11.1C21.1 15.8 20.9 15.2 20.4 15.1z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>',
    export_pdf: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M17.2 17.1L17.2 17.1C17.3 17.1 17.3 17.1 17.2 17.1c0.1-0.5 0.2-0.7 0.2-1V15.8c0.1-0.6 0.1-1 0-1.1 0 0 0 0 0-0.1l-0.1-0.1 0 0 0 0c0 0 0 0.1-0.1 0.1C16.9 15.2 16.9 16 17.2 17.1L17.2 17.1zM13.8 24.8c-0.2 0.1-0.4 0.2-0.6 0.3 -0.8 0.7-1.3 1.5-1.5 1.8l0 0 0 0 0 0C12.5 26.9 13.1 26.2 13.8 24.8 13.9 24.8 13.9 24.8 13.8 24.8 13.9 24.8 13.8 24.8 13.8 24.8zM24.1 23.1c-0.1-0.1-0.6-0.5-2.1-0.5 -0.1 0-0.1 0-0.2 0l0 0c0 0 0 0 0 0.1 0.8 0.3 1.6 0.6 2.1 0.6 0.1 0 0.1 0 0.2 0l0 0h0.1c0 0 0 0 0-0.1l0 0C24.2 23.3 24.1 23.3 24.1 23.1zM24.6 24c-0.2 0.1-0.6 0.2-1 0.2 -0.9 0-2.2-0.2-3.4-0.8 -1.9 0.2-3.4 0.5-4.5 0.9 -0.1 0-0.1 0-0.2 0.1 -1.3 2.4-2.5 3.5-3.4 3.5 -0.2 0-0.3 0-0.4-0.1l-0.6-0.3v-0.1c-0.1-0.2-0.1-0.3-0.1-0.6 0.1-0.6 0.8-1.6 2.1-2.4 0.2-0.1 0.6-0.3 1-0.6 0.3-0.6 0.7-1.2 1.1-2 0.6-1.1 0.9-2.3 1.2-3.3l0 0c-0.4-1.4-0.7-2.1-0.2-3.7 0.1-0.5 0.4-0.9 0.9-0.9h0.2c0.2 0 0.4 0.1 0.7 0.2 0.8 0.8 0.4 2.6 0 4.1 0 0.1 0 0.1 0 0.1 0.4 1.2 1.1 2.3 1.8 2.9 0.3 0.2 0.6 0.5 1 0.7 0.6 0 1-0.1 1.5-0.1 1.3 0 2.2 0.2 2.6 0.8 0.1 0.2 0.1 0.5 0.1 0.7C24.9 23.5 24.8 23.8 24.6 24zM17.3 19.6c-0.2 0.8-0.7 1.7-1.1 2.7 -0.2 0.5-0.4 0.8-0.7 1.2h0.1 0.1l0 0c1.5-0.6 2.8-0.9 3.7-1 -0.2-0.1-0.3-0.2-0.4-0.3C18.4 21.6 17.7 20.7 17.3 19.6z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>',
    format: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>menu_format</title><g fill="#555"><path d="M15.144 781.92a7.62 7.62 0 0 0-4.238-4.157 4.634 4.634 0 0 0-1.201-.254.99.99 0 0 0-.906.36l-10.797 10.829c-1.462 1.462-2.916 2.908-4.37 4.378a1.347 1.347 0 0 0-.326.596c-.481 2.197-.939 4.402-1.413 6.607a.639.639 0 0 0 .792.793l6.551-1.381c.253-.049.49-.171.67-.359 5.063-5.08 10.127-10.144 15.19-15.207.237-.229.384-.548.4-.882a8.491 8.491 0 0 0-.352-1.323zm-16.825 16.652l-2.54.531a2.367 2.367 0 0 0-1.911-1.87c.18-.906.384-1.813.571-2.729a2.05 2.05 0 0 1 1.078.229 6.007 6.007 0 0 1 2.671 2.605c.139.318.245.653.311.996 0 .157 0 .157-.18.238z"/><path d="M6.568 804.5H-11.5v-18h7.761l1.83-2.118 1.593-1.882h-12.455c-.947 0-1.729 1.241-1.729 2.18v21.097c0 .947.77 1.724 1.726 1.724H8.283c.947 0 2.217-.769 2.217-1.724v-12.488l-4 3.438v7.773h.068z"/></g></svg>',
    format_number: '<svg xmlns="http://www.w3.org/2000/svg" width="52" height="36" viewBox="0 0 52 36"><path d="M31 19.2v-3.4l2.5-0.4c0.2-0.7 0.5-1.4 0.9-2.1l-1.4-2 2.4-2.4 2 1.4c0.7-0.4 1.4-0.7 2.1-0.9l0.4-2.5h3.4l0.4 2.5c0.7 0.2 1.4 0.5 2.1 0.9l2-1.4 2.4 2.4 -1.4 2c0.4 0.7 0.7 1.4 0.9 2.1L52 15.8v3.4l-2.5 0.4c-0.2 0.7-0.5 1.4-0.9 2.1l1.4 2 -2.4 2.4 -2-1.5c-0.7 0.4-1.4 0.7-2.1 0.9l-0.4 2.5h-3.4l-0.4-2.5c-0.7-0.2-1.4-0.5-2.1-0.9l-2 1.5 -2.4-2.4 1.4-2c-0.4-0.7-0.7-1.4-0.9-2.1L31 19.2zM41.5 21c1.9 0 3.5-1.6 3.5-3.5 0-1.9-1.6-3.5-3.5-3.5 -1.9 0-3.5 1.6-3.5 3.5C38 19.4 39.6 21 41.5 21z"/><path d="M38 30H1V6h36V5H0v26h38V30L38 30z"/><path d="M9.4 21.1c-0.3 0.3-0.7 0.4-1.2 0.4 -0.5 0-0.9-0.2-1.2-0.5s-0.4-0.8-0.4-1.4H5c0 0.9 0.2 1.7 0.7 2.2 0.5 0.6 1.2 0.9 2 1v1.3h1.1v-1.4c0.8-0.1 1.5-0.4 1.9-0.9 0.5-0.5 0.7-1.1 0.7-1.9 0-0.4-0.1-0.8-0.2-1.1 -0.1-0.3-0.3-0.6-0.5-0.8 -0.2-0.2-0.5-0.4-0.8-0.6 -0.3-0.2-0.8-0.4-1.4-0.6 -0.6-0.2-1-0.4-1.2-0.7s-0.4-0.6-0.4-1c0-0.4 0.1-0.8 0.4-1 0.2-0.2 0.6-0.4 1-0.4 0.4 0 0.8 0.2 1 0.5 0.3 0.3 0.4 0.8 0.4 1.4h1.6c0-0.9-0.2-1.6-0.6-2.2 -0.4-0.6-1-0.9-1.8-1v-1.5H7.9v1.5C7.1 12.6 6.5 12.9 6 13.4s-0.7 1.1-0.7 1.9c0 1.1 0.5 2 1.6 2.6 0.3 0.2 0.8 0.4 1.3 0.6 0.6 0.2 1 0.4 1.2 0.7s0.4 0.6 0.4 1C9.8 20.5 9.7 20.8 9.4 21.1z"/><path d="M16.3 12.6h-0.2l-3.8 1.5v1.4l2.4-0.8v8.1h1.6V12.6z"/><path d="M19.9 23.8c0.2-0.5 0.4-1 0.4-1.5l0-1.2h-1.5v1.3c0 0.3-0.1 0.6-0.2 1 -0.1 0.3-0.3 0.7-0.5 1.1l0.9 0.5C19.3 24.7 19.6 24.3 19.9 23.8z"/><path d="M27 16.7c0-1.4-0.3-2.5-0.8-3.2s-1.3-1.1-2.4-1.1c-1.1 0-1.9 0.4-2.4 1.1 -0.5 0.7-0.8 1.8-0.8 3.3v1.8c0 1.4 0.3 2.5 0.8 3.2s1.3 1.1 2.4 1.1c1.1 0 1.9-0.4 2.4-1.1 0.5-0.7 0.8-1.8 0.8-3.3V16.7zM25.4 18.9c0 0.9-0.1 1.6-0.4 2 -0.2 0.4-0.6 0.6-1.2 0.6 -0.5 0-0.9-0.2-1.2-0.7 -0.3-0.5-0.4-1.2-0.4-2.1v-2.3c0-0.9 0.1-1.5 0.4-2 0.3-0.4 0.6-0.6 1.2-0.6 0.5 0 0.9 0.2 1.2 0.7 0.3 0.4 0.4 1.1 0.4 2.1V18.9z"/></svg>',
    format_conditional: '<svg xmlns="http://www.w3.org/2000/svg" width="52" height="36" viewBox="0 0 52 36"><polygon points="38 5 0 5 0 31 26 31 26 30 1 30 1 6 37 6 37 10 38 10 "/><path d="M9 13H8.6L5 14.4v1.4l2-0.8V23h2V13z"/><path d="M17 22h-4l2.4-2.9c0.6-0.7 1-1.3 1.3-1.8 0.3-0.5 0.4-1.1 0.4-1.5 0-0.8-0.3-1.5-0.8-2 -0.5-0.5-1.2-0.7-2.2-0.7 -0.6 0-1.2 0.1-1.7 0.4s-0.9 0.6-1.1 1C11.1 14.9 11 16 11 16h1.6c0 0 0.1-0.9 0.4-1.3s0.7-0.4 1.2-0.4c0.4 0 0.8 0.2 1 0.5 0.3 0.3 0.4 0.7 0.4 1.1 0 0.4-0.1 0.7-0.3 1.1 -0.2 0.4-0.6 0.8-1.1 1.3L11 21.9V23h6V22z"/><path d="M21 19h0.8c0.6 0 1-0.1 1.3 0.2 0.3 0.3 0.4 0.6 0.4 1.1 0 0.5-0.1 0.8-0.4 1.1 -0.3 0.3-0.6 0.4-1.1 0.4 -0.5 0-0.8-0.3-1.1-0.5C20.6 20.9 20.5 21 20.5 20h-1.5c0 1 0.3 1.6 0.8 2.1s1.3 0.8 2.1 0.8c0.9 0 1.6-0.2 2.2-0.7 0.6-0.5 0.8-1.2 0.8-2.1 0-0.5-0.1-1-0.4-1.4 -0.3-0.4-0.6-0.7-1.1-0.9 0.4-0.2 0.7-0.5 1-0.9 0.3-0.4 0.4-0.8 0.4-1.2 0-0.9-0.3-1.5-0.8-2 -0.5-0.5-1.2-0.7-2.1-0.7 -0.5 0-1 0.1-1.5 0.3 -0.4 0.2-0.8 0.7-1 1.1S19.1 15 19.1 16h1.5c0-1 0.1-0.9 0.4-1.1 0.3-0.3 0.6-0.5 1-0.5 0.5 0 0.8 0.1 1 0.3s0.3 0.6 0.3 1.1c0 0.5-0.1 0.7-0.4 1C22.7 17 22.3 17 21.9 17H21V19z"/><path d="M47.8 7C50.1 7 52 8.9 52 11.2c0 1-0.3 1.8-0.8 2.5l-1.7 1.7L43.6 9.5l1.7-1.7C46 7.3 46.8 7 47.8 7zM30.7 22.4L29 30l7.6-1.7 11.6-11.6 -5.9-5.9L30.7 22.4zM42 17.9l-5.1 5.1 -0.9-0.9 5.1-5L42 17.9z"/></svg>',
    options: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>menu_options</title><path fill="#555" d="M11.363 789.058l-.76-1.838a33.692 33.692 0 0 0 1.601-4.223l-2.327-2.328a31.444 31.444 0 0 0-4.142 1.691l-1.829-.76a32.88 32.88 0 0 0-1.83-4.101h-3.291a32.106 32.106 0 0 0-1.731 4.133l-1.83.76a33.556 33.556 0 0 0-4.206-1.609l-2.328 2.32a31.563 31.563 0 0 0 1.69 4.141l-.759 1.838a34.366 34.366 0 0 0-4.117 1.838v3.3a32.519 32.519 0 0 0 4.117 1.731l.759 1.829a33.633 33.633 0 0 0-1.608 4.223l2.327 2.328a32.986 32.986 0 0 0 4.133-1.699l1.83.76a31.481 31.481 0 0 0 1.862 4.108h3.291a32.194 32.194 0 0 0 1.732-4.133l1.837-.76a33.57 33.57 0 0 0 4.207 1.609l2.327-2.328a31.481 31.481 0 0 0-1.69-4.141l.76-1.838a32.532 32.532 0 0 0 4.108-1.829v-3.3a30.142 30.142 0 0 0-4.133-1.722zM.5 799.202a6.706 6.706 0 1 1 6.706-6.706A6.71 6.71 0 0 1 .5 799.202z"/></svg>',
    fields: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>menu_fields</title><g fill="#555"><path d="M11.351 787.279c1.112.367 2.027 1.221 2.55 2.221H13.5v-10.627c0-.744-.089-1.357-.825-1.373h-26.339c-.736.008-.836.612-.836 1.349v21.656c0 .735.093.995.836.995h10.836c-.008 0 .205-1.314.629-2.025-.073-.098-.123.025-.18.025H-12.5v-6h10.563l.83-1.699c.4-.76 1.606-1.258 1.606-1.667V785.5h10.843l.009 1.779zM-1.5 791.5h-11v-6h11v6z"/><path d="M15.805 801.444l-1.602-1.308c0-.237.082-.49.082-.817a2.483 2.483 0 0 0-.082-.817l1.602-1.389a.399.399 0 0 0 .082-.49l-1.528-2.86a.364.364 0 0 0-.278-.123.678.678 0 0 0-.18 0l-1.912.866a6.95 6.95 0 0 0-1.299-.817l-.311-1.989c-.017-.195-.188-.199-.384-.199H6.93c-.147 0-.384.037-.384.199l-.311 2.053c-.458.229-.899.468-1.299.786l-1.912-.834c-.041-.008-.09-.016-.131-.008a.356.356 0 0 0-.319.192l-1.528 2.817c-.082.164-.082.408.082.489l1.749 1.308c0 .237-.082.489-.082.816a2.48 2.48 0 0 0 .082.817l-1.602 1.356a.399.399 0 0 0-.082.49l1.528 2.86a.364.364 0 0 0 .278.123.678.678 0 0 0 .18 0l1.912-.817c.4.318.842.597 1.299.817l.311 2.116a.322.322 0 0 0 .221.4c.033.008.065.017.09.017h3.065c.147 0 .384-.164.384-.327l.311-2.215c.466-.212.907-.49 1.299-.817l1.831.817a.441.441 0 0 0 .54-.163l1.528-2.86c.056-.08-.018-.326-.165-.489zm-7.306.744a2.865 2.865 0 0 1-3.064-2.664c-.114-1.585 1.079-2.95 2.664-3.064a2.867 2.867 0 0 1 3.072 2.868 2.804 2.804 0 0 1-2.672 2.86z"/></g></svg>',
    fullscreen: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>menu_fullscreen_open</title><g fill="#555"><path d="M-7.5 779.976V777.5h-7v7h3v-2.752l3.758 4.067 1.74-1.846-4.342-4.003 2.844.01zM-7.742 799.096l-3.758 4.101V800.5h-3v7h7v-2h-2.618l-.049-.371 4.124-4.054-1.699-1.979zM8.746 785.913l3.754-4.092v2.679h3v-7h-7v2h2.602l.082.381-4.126 4.041 1.688 1.991zM13.5 800.5v2.598l-.382.074-4.058-4.003-1.882 1.575 4.006 3.756H8.5v3h7v-7h-2zM-4 786.5h9c1.104 0 2.5.908 2.5 2.011v7.996c0 1.103-1.396 1.993-2.5 1.993h-9c-1.104 0-2.5-.891-2.5-1.993v-8.005c0-1.103 1.396-2.002 2.5-2.002z"/></g></svg>',
};
// HANDLERS
// Connect tab
WebDataRocksToolbar.prototype.connectLocalCSVHandler = function () {
    this.pivot.connectTo({ dataSourceType: "csv", browseForFile: true });
}
WebDataRocksToolbar.prototype.connectLocalJSONHandler = function () {
    this.pivot.connectTo({ dataSourceType: "json", browseForFile: true });
}
WebDataRocksToolbar.prototype.connectRemoteCSV = function () {
    this.showConnectToRemoteCSVDialog();
}
WebDataRocksToolbar.prototype.connectRemoteJSON = function () {
    this.showConnectToRemoteJSONDialog();
}
// Open tab
WebDataRocksToolbar.prototype.openLocalReport = function () {
    this.pivot.open();
}
WebDataRocksToolbar.prototype.openRemoteReport = function () {
    this.showOpenRemoteReportDialog();
}
// Save tab
WebDataRocksToolbar.prototype.saveHandler = function () {
    this.pivot.save("report.json", 'file');
}
// Format tab
WebDataRocksToolbar.prototype.formatCellsHandler = function () {
    this.showFormatCellsDialog();
}
WebDataRocksToolbar.prototype.conditionalFormattingHandler = function () {
    this.showConditionalFormattingDialog();
}
// Options tab
WebDataRocksToolbar.prototype.optionsHandler = function () {
    this.showOptionsDialog();
}
// Fields tab
WebDataRocksToolbar.prototype.fieldsHandler = function () {
    this.pivot.openFieldsList();
}
// Export tab
WebDataRocksToolbar.prototype.printHandler = function () {
    this.pivot.print();
}
WebDataRocksToolbar.prototype.exportHandler = function (type) {
    (type == "pdf") ? this.showExportPdfDialog() : this.pivot.exportTo(type);
}
// Fullscreen tab
WebDataRocksToolbar.prototype.fullscreenHandler = function () {
    this.toggleFullscreen();
}

// DIALOGS
WebDataRocksToolbar.prototype.defaults = {};
// Connect to remote CSV
WebDataRocksToolbar.prototype.showConnectToRemoteCSVDialog = function () {
    var self = this;
    var Labels = this.Labels;
    var applyHandler = function () {
        if (textInput.value.length > 0) {
            self.pivot.connectTo({ filename: textInput.value, dataSourceType: "csv" });
        }
    }
    var dialog = this.popupManager.createPopup();
    dialog.content.classList.add("wdr-popup-w500");
    dialog.setTitle(Labels.open_remote_csv);
    dialog.setToolbar([
        { id: "wdr-btn-open", label: Labels.open, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ]);

    var content = document.createElement("div");
    var textInput = document.createElement("input");
    textInput.id = "wdr-inp-file-url";
    textInput.type = "text";
    textInput.value = "https://cdn.webdatarocks.com/data/data.csv";
    content.appendChild(textInput);

    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);
}
// Connect to remote JSON
WebDataRocksToolbar.prototype.showConnectToRemoteJSONDialog = function () {
    var self = this;
    var Labels = this.Labels;
    var applyHandler = function () {
        if (textInput.value.length > 0) {
            self.pivot.connectTo({ filename: textInput.value, dataSourceType: "json" });
        }
    }
    var dialog = this.popupManager.createPopup();
    dialog.content.classList.add("wdr-popup-w500");
    dialog.setTitle(Labels.open_remote_json);
    dialog.setToolbar([
        { id: "wdr-btn-open", label: Labels.open, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ]);

    var content = document.createElement("div");
    var textInput = document.createElement("input");
    textInput.id = "wdr-inp-file-url";
    textInput.type = "text";
    textInput.value = "https://cdn.webdatarocks.com/data/data.json";
    content.appendChild(textInput);

    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);
}
// Open remote report
WebDataRocksToolbar.prototype.showOpenRemoteReportDialog = function () {
    var self = this;
    var Labels = this.Labels;
    var applyHandler = function () {
        if (textInput.value.length > 0) {
            self.pivot.load(textInput.value);
        }
    }
    var dialog = this.popupManager.createPopup();
    dialog.content.classList.add("wdr-popup-w500");
    dialog.setTitle(Labels.open_remote_report);
    dialog.setToolbar([
        { id: "wdr-btn-open", label: Labels.open, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ]);
    var content = document.createElement("div");
    var textInput = document.createElement("input");
    textInput.type = "text";
    var options = self.pivot.getOptions() || {};
    var isFlatTable = (options.grid && options.grid.type == "flat");
    textInput.value = isFlatTable ? "https://cdn.webdatarocks.com/reports/report-flat.json" : "https://cdn.webdatarocks.com/reports/report.json";
    content.appendChild(textInput);

    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);
}
// Format cells
WebDataRocksToolbar.prototype.showFormatCellsDialog = function () {
    var self = this;
    var Labels = this.Labels;
    function updateDropdowns() {
        textAlignDropDown.disabled = thousandsSepDropDown.disabled = decimalSepDropDown.disabled = decimalPlacesDropDown.disabled = currencySymbInput.disabled = currencyAlignDropDown.disabled = nullValueInput.disabled = isPercentDropdown.disabled = (valuesDropDown.value == "empty");
    }
    var valuesDropDownChangeHandler = function () {
        updateDropdowns();
        var formatVO = self.pivot.getFormat(valuesDropDown.value);
        textAlignDropDown.value = (formatVO.textAlign == "left" || formatVO.textAlign == "right") ? formatVO.textAlign : "right";
        thousandsSepDropDown.value = formatVO.thousandsSeparator;
        decimalSepDropDown.value = formatVO.decimalSeparator;
        decimalPlacesDropDown.value = formatVO.decimalPlaces;
        currencySymbInput.value = formatVO.currencySymbol;
        currencyAlignDropDown.value = formatVO.currencySymbolAlign;
        nullValueInput.value = formatVO.nullValue;
        isPercentDropdown.value = (formatVO.isPercent == true) ? true : false;
    }
    var applyHandler = function () {
        var formatVO = {};
        if (valuesDropDown.value == "") formatVO.name = "";

        formatVO.textAlign = textAlignDropDown.value;
        formatVO.thousandsSeparator = thousandsSepDropDown.value;
        formatVO.decimalSeparator = decimalSepDropDown.value;
        formatVO.decimalPlaces = decimalPlacesDropDown.value;
        formatVO.currencySymbol = currencySymbInput.value;
        formatVO.currencySymbolAlign = currencyAlignDropDown.value;
        formatVO.nullValue = nullValueInput.value;
        formatVO.isPercent = isPercentDropdown.value == "true" ? true : false;
        self.pivot.setFormat(formatVO, (valuesDropDown.value == "" ? null : valuesDropDown.value));
        self.pivot.refresh();
    }

    var dialog = this.popupManager.createPopup();
    dialog.content.id = "wdr-popup-format-cells";
    dialog.setTitle(this.osUtils.isMobile ? Labels.format : Labels.format_cells);
    dialog.setToolbar([
        { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ], true);

    var content = document.createElement("div");
    var group = document.createElement("div");
    group.classList.add("wdr-inp-group");
    content.appendChild(group);

    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);

    // measures
    var label = document.createElement("label");
    label.classList.add("wdr-uc");
    self.setText(label, Labels.choose_value);
    row.appendChild(label);
    var select = self.createSelect();
    var valuesDropDown = select.select;
    valuesDropDown.onchange = valuesDropDownChangeHandler;
    valuesDropDown.options[0] = new Option(Labels.choose_value, "empty");
    valuesDropDown.options[0].disabled = true;
    valuesDropDown.options[1] = new Option(Labels.all_values, "");
    row.appendChild(select);

    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);

    var group = document.createElement("div");
    group.classList.add("wdr-inp-group");
    content.appendChild(group);

    // text align
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.text_align);
    row.appendChild(label);
    var select = self.createSelect();
    var textAlignDropDown = select.select;
    textAlignDropDown.options[0] = new Option(Labels.align_left, "left");
    textAlignDropDown.options[1] = new Option(Labels.align_right, "right");
    row.appendChild(select);

    // thousand_separator
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.thousand_separator);
    row.appendChild(label);
    var select = self.createSelect();
    var thousandsSepDropDown = select.select;
    thousandsSepDropDown.options[0] = new Option(Labels.none, "");
    thousandsSepDropDown.options[1] = new Option(Labels.space, " ");
    thousandsSepDropDown.options[2] = new Option(",", ",");
    thousandsSepDropDown.options[3] = new Option(".", ".");
    row.appendChild(select);

    // decimal_separator
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.decimal_separator);
    row.appendChild(label);
    var select = self.createSelect();
    var decimalSepDropDown = select.select;
    decimalSepDropDown.options[0] = new Option(".", ".");
    decimalSepDropDown.options[1] = new Option(",", ",");
    row.appendChild(select);

    // decimal_places
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.decimal_places);
    row.appendChild(label);
    var select = self.createSelect();
    var decimalPlacesDropDown = select.select;
    for (var i = 0; i < 11; i++) {
        decimalPlacesDropDown.options[i] = new Option(i === 0 ? Labels.none : (i - 1), i - 1);
    }
    row.appendChild(select);

    // currency_symbol
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.currency_symbol);
    row.appendChild(label);
    var currencySymbInput = document.createElement("input");
    currencySymbInput.classList.add("wdr-inp");
    currencySymbInput.type = "text";
    row.appendChild(currencySymbInput);

    // currency_align
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.currency_align);
    row.appendChild(label);
    var select = self.createSelect();
    var currencyAlignDropDown = select.select;
    currencyAlignDropDown.options[0] = new Option(Labels.align_left, "left");
    currencyAlignDropDown.options[1] = new Option(Labels.align_right, "right");
    row.appendChild(select);

    // null_value
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.null_value);
    row.appendChild(label);
    var nullValueInput = document.createElement("input");
    nullValueInput.classList.add("wdr-inp");
    nullValueInput.type = "text";
    row.appendChild(nullValueInput);

    // is_percent
    var row = document.createElement("div");
    row.classList.add("wdr-inp-row");
    row.classList.add("wdr-ir-horizontal");
    group.appendChild(row);
    var label = document.createElement("label");
    self.setText(label, Labels.is_percent);
    row.appendChild(label);
    var select = self.createSelect();
    var isPercentDropdown = select.select;
    isPercentDropdown.options[0] = new Option(Labels.true_value, true);
    isPercentDropdown.options[1] = new Option(Labels.false_value, false);
    row.appendChild(select);

    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);

    var measures = self.pivot.getMeasures();
    for (var i = 0; i < measures.length; i++) {
        valuesDropDown.options[i + 2] = new Option(measures[i].caption, measures[i].uniqueName);
    }
    valuesDropDownChangeHandler();
}
// Conditional formatting
WebDataRocksToolbar.prototype.showConditionalFormattingDialog = function () {
    var self = this;
    var Labels = this.Labels;
    var conditions = this.pivot.getAllConditions();
    var applyHandler = function () {
        self.pivot.removeAllConditions();
        for (var i = 0; i < conditions.length; i++) {
            var formula = composeFormula(conditions[i].sign, conditions[i].value1, conditions[i].value2);
            if (formula == null) return;
            conditions[i].formula = formula;
            self.pivot.addCondition(conditions[i]);
        }
        self.pivot.refresh();
    };
    var onAddConditionBtnClick = function () {
        var condition = {
            sign: "<",
            value1: "0",
            measures: self.pivot.getMeasures(),
            format: { fontFamily: 'Arial', fontSize: '12px', color: '#000000', backgroundColor: '#FFFFFF' }
        };
        conditions.push(condition);
        content.appendChild(self.createConditionalFormattingItem(condition, conditions));
        self.popupManager.centerPopup(dialog.content);
    };
    var composeFormula = function (sign, value1, value2) {
        var formula = '';
        var firstValueEmpty = (value1 == null || value1.length == 0);
        var secondValueEmpty = (value2 == null || value2.length == 0);
        var isBetween = (sign === '><');
        var isEmpty = (sign === 'isNaN');
        if ((firstValueEmpty && !isEmpty) || (isBetween && secondValueEmpty)) {
            return formula;
        }
        if (isBetween && !secondValueEmpty) {
            formula = "AND(#value > " + value1 + ", #value < " + value2 + ")";
        } else if (isEmpty) {
            formula = "isNaN(#value)";
        } else {
            var isString = isNaN(parseFloat(value1));
            if (isString) {
                value1 = "'" + value1 + "'";
            }
            formula = "#value " + sign + " " + value1;
        }
        return formula;
    };
    var parseStrings = function (input) {
        var output = [];
        var openQuote = false;
        var str = "";
        for (var i = 0; i < input.length; i++) {
            if (input[i] == '"' || input[i] == "'") {
                if (openQuote) {
                    output.push(str);
                } else {
                    str = "";
                }
                openQuote = !openQuote;
                continue;
            }
            if (openQuote) {
                str += input[i];
            }
        }
        return output;
    };
    var parseFormula = function (formula) {
        var parseNumber = /\W\d+\.*\d*/g;
        var parseSign = /<=|>=|<|>|=|=|!=|isNaN/g;
        var numbers = formula.match(parseNumber);
        var strings = parseStrings(formula);
        var signs = formula.match(parseSign);
        if (numbers == null && strings == null) return {};
        return {
            value1: (numbers != null) ? numbers[0].replace(/\s/, '') : strings[0],
            value2: (numbers != null && numbers.length > 1) ? numbers[1].replace(/\s/, '') : '',
            sign: signs ? signs.join('') : ""
        };
    };
    var dialog = this.popupManager.createPopup();
    dialog.content.id = "wdr-popup-conditional";
    dialog.setTitle(this.osUtils.isMobile ? Labels.conditional : Labels.conditional_formatting);
    dialog.setToolbar([
        { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ], true);

    var addConditionBtn = document.createElement("a");
    addConditionBtn.id = "wdr-add-btn";
    addConditionBtn.setAttribute("href", "javascript:void(0)");
    addConditionBtn.classList.add("wdr-ui-btn");
    addConditionBtn.classList.add("wdr-ui-btn-light");
    addConditionBtn.classList.add("wdr-button-add");
    addConditionBtn.onclick = onAddConditionBtnClick;
    addConditionBtn.setAttribute("title", Labels.add_condition);
    var icon = document.createElement("span");
    icon.classList.add("wdr-icon");
    icon.classList.add("wdr-icon-act_add");
    addConditionBtn.appendChild(icon);
    dialog.toolbar.insertBefore(addConditionBtn, dialog.toolbar.firstChild);

    var content = document.createElement("div");
    content.classList.add("wdr-popup-content");
    content.onclick = function (event) {
        if (event.target.classList.contains("wdr-cr-delete")) {
            self.popupManager.centerPopup(dialog.content);
        }
    }

    for (var i = 0; i < conditions.length; i++) {
        var formula = parseFormula(conditions[i].formula);
        conditions[i].value1 = formula.value1;
        conditions[i].value2 = formula.value2;
        conditions[i].sign = formula.sign;
        conditions[i].measures = self.pivot.getMeasures();
        content.appendChild(self.createConditionalFormattingItem(conditions[i], conditions));
    }
    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);
};
WebDataRocksToolbar.prototype.defaults.fontSizes = ["8px", "9px", "10px", "11px", "12px", "13px", "14px"],
    WebDataRocksToolbar.prototype.defaults.fonts = ['Arial', 'Lucida Sans Unicode', 'Verdana', 'Courier New', 'Palatino Linotype', 'Tahoma', 'Impact', 'Trebuchet MS', 'Georgia', 'Times New Roman'],
    WebDataRocksToolbar.prototype.defaults.conditions = [
        { label: "less_than", sign: '<' },
        { label: "less_than_or_equal", sign: '<=' },
        { label: "greater_than", sign: '>' },
        { label: "greater_than_or_equal", sign: '>=' },
        { label: "equal_to", sign: '=' },
        { label: "not_equal_to", sign: '!=' },
        { label: "between", sign: '><' },
        { label: "is_empty", sign: 'isNaN' }
    ];
WebDataRocksToolbar.prototype.createConditionalFormattingItem = function (data, allConditions) {
    var self = this;
    var Labels = this.Labels;
    var fillValuesDropDown = function (measures, selectedMeasure) {
        valuesDropDown[0] = new Option(Labels.all_values, "");
        var options = self.pivot.getOptions() || {};
        var isFlatTable = (options.grid && options.grid.type == "flat");
        for (var i = 0; i < measures.length; i++) {
            if (isFlatTable && measures[i].type == 7) { // count measure
                continue;
            }
            valuesDropDown[valuesDropDown.options.length] = new Option(measures[i].caption, measures[i].uniqueName);
        }
        if (selectedMeasure != null) {
            valuesDropDown.value = selectedMeasure;
        } else {
            valuesDropDown.selectedIndex = 0;
        }
    };
    var fillConditionsDropDown = function (selectedCondition) {
        for (var i = 0; i < self.defaults.conditions.length; i++) {
            conditionsDropDown[i] = new Option(Labels[self.defaults.conditions[i].label], self.defaults.conditions[i].sign);
        }
        if (selectedCondition != null) {
            conditionsDropDown.value = selectedCondition;
        } else {
            conditionsDropDown.selectedIndex = 0;
        }
    };
    var fillFontFamiliesDropDown = function (selectedFont) {
        for (var i = 0; i < self.defaults.fonts.length; i++) {
            fontFamiliesDropDown[i] = new Option(self.defaults.fonts[i], self.defaults.fonts[i]);
        }
        fontFamiliesDropDown.value = (selectedFont == null ? 'Arial' : selectedFont);
    };
    var fillFontSizesDropDown = function (selectedFontSize) {
        for (var i = 0; i < self.defaults.fontSizes.length; i++) {
            fontSizesDropDown[i] = new Option(self.defaults.fontSizes[i], self.defaults.fontSizes[i]);
        }
        fontSizesDropDown.value = (selectedFontSize == null ? "12px" : selectedFontSize);
    };
    var onValueChanged = function () {
        data.measure = valuesDropDown.value;
    };
    var onFontFamilyChanged = function () {
        if (data.format != null) {
            data.format.fontFamily = fontFamiliesDropDown.value;
            drawSample();
        }
    };
    var onFontSizeChanged = function () {
        if (data.format != null) {
            data.format.fontSize = fontSizesDropDown.value;
            drawSample();
        }
    };
    var onConditionChanged = function () {
        data.sign = conditionsDropDown.value;
        if (('sign' in data) && data.sign === '><') {
            data.value2 = 0;
        } else if (('sign' in data) && data.sign === 'isNaN') {
            delete data.value1;
            delete data.value2;
        } else {
            delete data.value2;
        }
        drawInputs();
    };
    var onInput1Changed = function () {
        data.value1 = (input1.value.length == 0) ? "0" : input1.value;
    };
    var onInput2Changed = function () {
        data.value2 = (input2.value.length == 0) ? "0" : input2.value;
    };
    var onRemoveBtnClick = function () {
        var idx = allConditions.indexOf(data);
        if (idx > -1) {
            allConditions.splice(idx, 1);
        }
        output.parentNode.removeChild(output);
    };
    var onColorChanged = function () {
        if (data.format != null) {
            sample.style.color = colorPicker.fontColor || '#000';
            sample.style.backgroundColor = colorPicker.backgroundColor || '#fff';
        }
    };
    var onColorApply = function () {
        if (data.format != null) {
            data.format.color = colorPicker.fontColor;
            data.format.backgroundColor = colorPicker.backgroundColor;
            drawSample();
        }
    };
    var onColorCancel = function () {
        if (data.format != null) {
            colorPicker.setColor(data.format.hasOwnProperty('backgroundColor') ? data.format.backgroundColor : '0xFFFFFF', "bg");
            colorPicker.setColor(data.format.hasOwnProperty('color') ? data.format.color : '0x000000', "font");
        }
        drawSample();
    }
    var drawInputs = function () {
        if (('sign' in data) && data.sign === '><') {
            input1.classList.remove("wdr-width120");
            input1.classList.add("wdr-width50");
            input1.style.display = "inline-block";
            input2.value = ('value2' in data ? data.value2 : "0");
            input2.style.display = "inline-block";
            andLabel.style.display = "inline-block";
        } else if (('sign' in data) && data.sign === 'isNaN') {
            input1.style.display = "none";
            input2.style.display = "none";
            andLabel.style.display = "none";
        } else {
            input1.classList.add("wdr-width120");
            input1.classList.remove("wdr-width50");
            input1.style.display = "inline-block";
            input2.style.display = "none";
            andLabel.style.display = "none";
        }
    };
    var drawSample = function () {
        var format = data.format;
        if (format != null) {
            sample.style.backgroundColor = format.backgroundColor || '#fff';
            sample.style.color = format.color || '#000';
            sample.style.fontFamily = format.fontFamily || 'Arial';
            sample.style.fontSize = format.fontSize || '12px';
        }
    };

    var output = document.createElement("div");
    output.classList.add("wdr-condition-row");

    var itemRenderer = document.createElement("div");
    itemRenderer.classList.add("wdr-wrap-relative");
    output.appendChild(itemRenderer);

    var removeBtn = document.createElement("span");
    removeBtn.classList.add("wdr-cr-delete");
    removeBtn.classList.add("wdr-icon");
    removeBtn.classList.add("wdr-icon-act_trash");
    removeBtn.onclick = onRemoveBtnClick;
    itemRenderer.appendChild(removeBtn);

    var row = document.createElement("div");
    row.classList.add("wdr-cr-inner");
    itemRenderer.appendChild(row);

    var label = document.createElement("div");
    label.classList.add("wdr-cr-lbl");
    label.classList.add("wdr-width50");
    self.setText(label, Labels.value + ":");
    row.appendChild(label);

    var select = self.createSelect();
    select.id = "wdr-values";
    var valuesDropDown = select.select;
    if ('measures' in data) {
        fillValuesDropDown(data.measures, data.measure);
        valuesDropDown.disabled = (data.measures.length === 0);
    } else {
        valuesDropDown.disabled = true;
    }
    valuesDropDown.onchange = onValueChanged;
    row.appendChild(select);

    var select = self.createSelect();
    select.id = "wdr-conditions";
    var conditionsDropDown = select.select;
    fillConditionsDropDown(!('sign' in data) ? null : data.sign);
    conditionsDropDown.onchange = onConditionChanged;
    row.appendChild(select);

    var input1 = document.createElement("input");
    input1.classList.add("wdr-number-inp");
    input1.classList.add("wdr-width50");
    input1.type = "number";
    input1.value = ('value1' in data ? data.value1 : "0");
    input1.onchange = onInput1Changed;
    row.appendChild(input1);

    var andLabel = document.createElement("span");
    andLabel.id = "wdr-and-label";
    andLabel.classList.add("wdr-width20");
    self.setText(andLabel, Labels.and_symbole);
    row.appendChild(andLabel);

    var input2 = document.createElement("input");
    input2.classList.add("wdr-number-inp");
    input2.classList.add("wdr-width50");
    input2.type = "number";
    input2.value = ('value2' in data ? data.value2 : "0");
    input2.onchange = onInput2Changed;
    row.appendChild(input2);

    drawInputs();

    var row = document.createElement("div");
    row.classList.add("wdr-cr-inner");
    itemRenderer.appendChild(row);

    var label = document.createElement("div");
    label.classList.add("wdr-cr-lbl");
    label.classList.add("wdr-width50");
    self.setText(label, Labels.format + ":");
    row.appendChild(label);

    var select = self.createSelect();
    select.id = "wdr-font-family";
    var fontFamiliesDropDown = select.select;
    fillFontFamiliesDropDown((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('fontFamily')) ? data.format.fontFamily : null);
    fontFamiliesDropDown.onchange = onFontFamilyChanged;
    row.appendChild(select);

    var select = self.createSelect();
    select.id = "wdr-font-size";
    var fontSizesDropDown = select.select;
    fillFontSizesDropDown((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('fontSize')) ? data.format.fontSize : null);
    fontSizesDropDown.onchange = onFontSizeChanged;
    row.appendChild(select);

    var colorPicker = new WebDataRocksToolbar.ColorPicker(this, output);
    colorPicker.setColor((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('backgroundColor')) ? data.format.backgroundColor : '0xFFFFFF', "bg");
    colorPicker.setColor((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('color')) ? data.format.color : '0x000000', "font");
    colorPicker.changeHandler = onColorChanged;
    colorPicker.applyHandler = onColorApply;
    colorPicker.cancelHandler = onColorCancel;
    row.appendChild(colorPicker.element);

    var sample = document.createElement("input");
    sample.id = "wdr-sample";
    sample.classList.add("wdr-inp");
    sample.type = "number";
    sample.value = "73.93";
    sample.style.pointerEvents = "none";
    row.appendChild(sample);
    drawSample();

    return output;
};
// Options
WebDataRocksToolbar.prototype.showOptionsDialog = function () {
    var self = this;
    var Labels = this.Labels;
    var applyHandler = function () {
        var showGrandTotals;
        if (offRowsColsCbx.checked) {
            showGrandTotals = "off";
        } else if (onRowsColsCbx.checked) {
            showGrandTotals = "on";
        } else if (onRowsCbx.checked) {
            showGrandTotals = "rows";
        } else if (onColsCbx.checked) {
            showGrandTotals = "columns";
        }
        var showTotals;
        if (offSubtotalsCbx.checked) {
            showTotals = "off";
        } else if (onSubtotalsCbx.checked) {
            showTotals = "on";
        } else if (rowsSubtotalsCbx.checked) {
            showTotals = "rows";
        } else if (colsSubtotalsCbx.checked) {
            showTotals = "columns";
        }
        var gridType = "compact";
        if (classicViewCbx && classicViewCbx.checked) {
            gridType = "classic";
        } else if (flatViewCbx && flatViewCbx.checked) {
            gridType = "flat";
        }

        var options = self.pivot.getOptions();
        var currentViewType = options["viewType"];
        var currentType = options["grid"]["type"];

        var options = {
            grid: {
                showGrandTotals: showGrandTotals,
                showTotals: showTotals,
                type: gridType
            }
        };

        self.pivot.setOptions(options);
        self.pivot.refresh();
    }
    var dialog = this.popupManager.createPopup();
    dialog.content.id = "wdr-popup-options";
    dialog.setTitle(this.osUtils.isMobile ? Labels.options : Labels.layout_options);
    dialog.setToolbar([
        { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ], true);

    var content = document.createElement("div");
    content.classList.add("wdr-popup-content");

    var row = document.createElement("div");
    row.classList.add("wdr-ui-row");
    content.appendChild(row);

    var col = document.createElement("div");
    col.classList.add("wdr-ui-col-2");
    row.appendChild(col);

    // grand totals
    var title = document.createElement("div");
    title.classList.add("wdr-title-2");
    self.setText(title, Labels.grand_totals);
    col.appendChild(title);

    var grandTotalsGroup = "wdr-grand-totals-" + Date.now();
    var list = document.createElement("ul");
    list.classList.add("wdr-radiobtn-list");
    col.appendChild(list);

    // grand totals - off
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var offRowsColsCbx = document.createElement("input");
    offRowsColsCbx.type = "radio";
    offRowsColsCbx.name = grandTotalsGroup;
    offRowsColsCbx.id = "wdr-gt-1";
    offRowsColsCbx.value = "off";
    itemWrap.appendChild(offRowsColsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-gt-1");
    self.setText(label, Labels.grand_totals_off);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // grand totals - on
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var onRowsColsCbx = document.createElement("input");
    onRowsColsCbx.type = "radio";
    onRowsColsCbx.name = grandTotalsGroup;
    onRowsColsCbx.id = "wdr-gt-2";
    onRowsColsCbx.value = "on";
    itemWrap.appendChild(onRowsColsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-gt-2");
    self.setText(label, Labels.grand_totals_on);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // grand totals - on rows
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var onRowsCbx = document.createElement("input");
    onRowsCbx.type = "radio";
    onRowsCbx.name = grandTotalsGroup;
    onRowsCbx.id = "wdr-gt-3";
    onRowsCbx.value = "rows";
    itemWrap.appendChild(onRowsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-gt-3");
    self.setText(label, Labels.grand_totals_on_rows);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // grand totals - on cols
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var onColsCbx = document.createElement("input");
    onColsCbx.type = "radio";
    onColsCbx.name = grandTotalsGroup;
    onColsCbx.id = "wdr-gt-4";
    onColsCbx.value = "rows";
    itemWrap.appendChild(onColsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-gt-4");
    self.setText(label, Labels.grand_totals_on_columns);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // layout
    var title = document.createElement("div");
    title.classList.add("wdr-title-2");
    self.setText(title, Labels.layout);
    col.appendChild(title);

    var layoutGroup = "wdr-layout-" + Date.now();
    var list = document.createElement("ul");
    list.classList.add("wdr-radiobtn-list");
    col.appendChild(list);

    // layout - compact
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var compactViewCbx = document.createElement("input");
    compactViewCbx.type = "radio";
    compactViewCbx.name = layoutGroup;
    compactViewCbx.id = "wdr-lt-1";
    compactViewCbx.value = "compact";
    itemWrap.appendChild(compactViewCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-lt-1");
    self.setText(label, Labels.compact_view);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // layout - classic
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var classicViewCbx = document.createElement("input");
    classicViewCbx.type = "radio";
    classicViewCbx.name = layoutGroup;
    classicViewCbx.id = "wdr-lt-2";
    classicViewCbx.value = "classic";
    itemWrap.appendChild(classicViewCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-lt-2");
    self.setText(label, Labels.classic_view);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    var options = self.pivot.getReport({ withDefaults: true, withGlobals: true });

        // layout - flat
        var item = document.createElement("li");
        var itemWrap = document.createElement("div");
        itemWrap.classList.add("wdr-radio-wrap");
        var flatViewCbx = document.createElement("input");
        flatViewCbx.type = "radio";
        flatViewCbx.name = layoutGroup;
        flatViewCbx.id = "wdr-lt-3";
        flatViewCbx.value = "flat";
        itemWrap.appendChild(flatViewCbx);
        var label = document.createElement("label");
        label.setAttribute("for", "wdr-lt-3");
        self.setText(label, Labels.flat_view);
        itemWrap.appendChild(label);
        item.appendChild(itemWrap);
        list.appendChild(item);

    var col = document.createElement("div");
    col.classList.add("wdr-ui-col-2");
    row.appendChild(col);

    // subtotals
    var title = document.createElement("div");
    title.classList.add("wdr-title-2");
    self.setText(title, Labels.subtotals);
    col.appendChild(title);

    var subTotalsGroup = "wdr-subtotals-" + Date.now();
    var list = document.createElement("ul");
    list.classList.add("wdr-radiobtn-list");
    col.appendChild(list);

    // subtotals - off
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var offSubtotalsCbx = document.createElement("input");
    offSubtotalsCbx.type = "radio";
    offSubtotalsCbx.name = subTotalsGroup;
    offSubtotalsCbx.id = "wdr-st-1";
    offSubtotalsCbx.value = "off";
    itemWrap.appendChild(offSubtotalsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-st-1");
    self.setText(label, Labels.subtotals_off);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // subtotals - on
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var onSubtotalsCbx = document.createElement("input");
    onSubtotalsCbx.type = "radio";
    onSubtotalsCbx.name = subTotalsGroup;
    onSubtotalsCbx.id = "wdr-st-2";
    onSubtotalsCbx.value = "on";
    itemWrap.appendChild(onSubtotalsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-st-2");
    self.setText(label, Labels.subtotals_on);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // subtotals - rows
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var rowsSubtotalsCbx = document.createElement("input");
    rowsSubtotalsCbx.type = "radio";
    rowsSubtotalsCbx.name = subTotalsGroup;
    rowsSubtotalsCbx.id = "wdr-st-3";
    rowsSubtotalsCbx.value = "rows";
    itemWrap.appendChild(rowsSubtotalsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-st-3");
    self.setText(label, Labels.subtotals_on_rows);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);

    // subtotals - columns
    var item = document.createElement("li");
    var itemWrap = document.createElement("div");
    itemWrap.classList.add("wdr-radio-wrap");
    var colsSubtotalsCbx = document.createElement("input");
    colsSubtotalsCbx.type = "radio";
    colsSubtotalsCbx.name = subTotalsGroup;
    colsSubtotalsCbx.id = "wdr-st-4";
    colsSubtotalsCbx.value = "columns";
    itemWrap.appendChild(colsSubtotalsCbx);
    var label = document.createElement("label");
    label.setAttribute("for", "wdr-st-4");
    self.setText(label, Labels.subtotals_on_columns);
    itemWrap.appendChild(label);
    item.appendChild(itemWrap);
    list.appendChild(item);
	
    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);

    var options = self.pivot.getOptions() || {};
    var optionsGrid = options.grid || {};

    if (optionsGrid.showGrandTotals == "off" || optionsGrid.showGrandTotals == false) {
        offRowsColsCbx.checked = true;
    } else if (optionsGrid.showGrandTotals == "on" || optionsGrid.showGrandTotals == true) {
        onRowsColsCbx.checked = true;
    } else if (optionsGrid.showGrandTotals == "rows") {
        onRowsCbx.checked = true;
    } else if (optionsGrid.showGrandTotals == "columns") {
        onColsCbx.checked = true;
    }

    if (optionsGrid.showTotals == "off") {
        offSubtotalsCbx.checked = true;
    } else if (optionsGrid.showTotals == "on") {
        onSubtotalsCbx.checked = true;
    } else if (optionsGrid.showTotals == "rows") {
        rowsSubtotalsCbx.checked = true;
    } else if (optionsGrid.showTotals == "columns") {
        colsSubtotalsCbx.checked = true;
    }

    if (optionsGrid.type == "flat" && flatViewCbx) {
        flatViewCbx.checked = true;
    } else if (optionsGrid.type == "classic" && classicViewCbx) {
        classicViewCbx.checked = true;
    } else if (compactViewCbx) {
        compactViewCbx.checked = true;
    }
}
// Export to PDF
WebDataRocksToolbar.prototype.showExportPdfDialog = function () {
    var self = this;
    var Labels = this.Labels;
    var applyHandler = function () {
        var orientation = "portrait";
        if (landscapeRadio.checked) {
            orientation = "landscape";
        }
        self.pivot.exportTo('pdf', { pageOrientation: orientation });
    }
    var dialog = this.popupManager.createPopup();
    dialog.setTitle(Labels.choose_page_orientation);
    dialog.setToolbar([
        { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true },
        { id: "wdr-btn-cancel", label: Labels.cancel }
    ]);

    var content = document.createElement("div");

    var list = document.createElement("ul");
    list.classList.add("wdr-radiobtn-list");
    content.appendChild(list);

    // portrait
    var item = document.createElement("li");
    list.appendChild(item);
    var wrap = document.createElement("div");
    wrap.classList.add("wdr-radio-wrap");
    item.appendChild(wrap);

    var portraitRadio = document.createElement("input");
    portraitRadio.id = "wdr-portrait-radio";
    portraitRadio.type = "radio";
    portraitRadio.name = "wdr-pdf-orientation";
    portraitRadio.checked = true;
    wrap.appendChild(portraitRadio);

    var label = document.createElement("label");
    label.setAttribute("for", "wdr-portrait-radio");
    self.setText(label, Labels.portrait);
    wrap.appendChild(label);

    // landscape
    var item = document.createElement("li");
    list.appendChild(item);
    var wrap = document.createElement("div");
    wrap.classList.add("wdr-radio-wrap");
    item.appendChild(wrap);

    var landscapeRadio = document.createElement("input");
    landscapeRadio.id = "wdr-landscape-radio";
    landscapeRadio.type = "radio";
    landscapeRadio.name = "wdr-pdf-orientation";
    wrap.appendChild(landscapeRadio);

    var label = document.createElement("label");
    label.setAttribute("for", "wdr-landscape-radio");
    self.setText(label, Labels.landscape);
    wrap.appendChild(label);

    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);
}

// Fullscreen
WebDataRocksToolbar.prototype.toggleFullscreen = function () {
    this.isFullscreen() ? this.exitFullscreen() : this.enterFullscreen(this.container);
}
WebDataRocksToolbar.prototype.isFullscreen = function () {
    return document.fullScreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
}
WebDataRocksToolbar.prototype.enterFullscreen = function (element) {
    if (element.requestFullscreen || element.webkitRequestFullScreen
        || element.mozRequestFullScreen || (element.msRequestFullscreen && window == top)) {
        this.containerStyle = {
            width: this.container.style.width,
            height: this.container.style.height,
            position: this.container.style.position,
            top: this.container.style.top,
            bottom: this.container.style.bottom,
            left: this.container.style.left,
            right: this.container.style.right,
            marginTop: this.container.style.marginTop,
            marginLeft: this.container.style.left,
            toolbarWidth: this.toolbarWrapper.style.width
        };
        this.container.style.width = "100%";
        this.container.style.height = "100%";
        this.container.style.position = "fixed";
        this.container.style.top = 0 + "px";
        this.container.style.left = 0 + "px";

        this.toolbarWrapper.style.width = "100%";

        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
            var ua = navigator.userAgent;
            if ((ua.indexOf("Safari") > -1) && (ua.indexOf("Chrome") == -1)) {
                element.webkitRequestFullScreen();
            } else {
                element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) { //IE 11
            if (window == top) {
                element.msRequestFullscreen();
            } else {
                alert("Fullscreen mode in IE 11 is not currently supported while Pivot embeded in iframe.");
            }
        }

        element.addEventListener("fullscreenchange", function () {
            if (!window.screenTop && !window.screenY && !this.isFullscreen()) {
                this.exitFullscreen();
            }
        }.bind(this), false);

        element.addEventListener("webkitfullscreenchange", function () {
            if (!window.screenTop && !window.screenY && !this.isFullscreen()) {
                this.exitFullscreen();
            }
        }.bind(this), false);

        element.addEventListener("mozfullscreenchange", function () {
            if (!(window.fullScreen) && !(window.innerWidth == screen.width && window.innerHeight == screen.height)) {
                this.exitFullscreen();
            }
        }.bind(this), false);
    }
}
WebDataRocksToolbar.prototype.exitFullscreen = function () {
    this.container.style.width = this.containerStyle.width;
    this.container.style.height = this.containerStyle.height;
    this.container.style.position = this.containerStyle.position;
    this.container.style.top = this.containerStyle.top;
    this.container.style.left = this.containerStyle.left;
    this.container.style.marginTop = this.containerStyle.marginTop;
    this.container.style.marginLeft = this.containerStyle.marginLeft;

    this.toolbarWrapper.style.width = this.containerStyle.toolbarWidth;
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.cancelFullscreen) {
        document.cancelFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullScreen) {
        document.webkitExitFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) { //IE 11
        document.msExitFullscreen();
    }
}

// PRIVATE API
WebDataRocksToolbar.prototype.nullOrUndefined = function (val) {
    return (typeof (val) === 'undefined' || val === null);
}
WebDataRocksToolbar.prototype.hasClass = function (elem, cls) {
    return elem.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
WebDataRocksToolbar.prototype.addClass = function (elem, cls) {
    if (!this.hasClass(elem, cls)) {
        elem.className += " " + cls;
    }
}
WebDataRocksToolbar.prototype.removeClass = function (elem, cls) {
    if (this.hasClass(elem, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        elem.className = elem.className.replace(reg, ' ');
    }
}
WebDataRocksToolbar.prototype.setText = function (target, text) {
    if (!target) return;
    if (target.innerText !== undefined) {
        target.innerText = text;
    }
    if (target.textContent !== undefined) {
        target.textContent = text;
    }
}
WebDataRocksToolbar.prototype.createSelect = function () {
    var wrapper = document.createElement("div");
    wrapper.classList.add("wdr-select");
    var select = document.createElement("select");
    wrapper.appendChild(select);
    wrapper.select = select;
    return wrapper;
}
WebDataRocksToolbar.prototype.createDivider = function (data) {
    var item = document.createElement("li");
    item.className = "wdr-divider";
    return item;
}
WebDataRocksToolbar.prototype.createTab = function (data) {
    var tab = document.createElement("li");
    tab.id = data.id;
    var tabLink = document.createElement("a");
    if (data.hasOwnProperty("class_attr")) {
        tabLink.setAttribute("class", data.class_attr);
    }
    tabLink.setAttribute("href", "javascript:void(0)");

    if (data.icon) {
        var svgIcon = document.createElement("div");
        svgIcon.classList.add("wdr-svg-icon");
        svgIcon.innerHTML = data.icon;
        tabLink.appendChild(svgIcon);
    }

    var title = document.createElement("span");
    this.setText(title, data.title);
    tabLink.appendChild(title);
    var _this = this;
    var _handler = typeof data.handler == "function" ? data.handler : this[data.handler];
    if (!this.nullOrUndefined(_handler)) {
        tabLink.onclick =
            function (handler, args) {
                return function () {
                    handler.call(_this, args);
                }
            }(_handler, data.args);
    }
    if (!this.nullOrUndefined(this[data.onShowHandler])) {
        tabLink.onmouseover =
            function (handler) {
                return function () {
                    handler.call(_this);
                }
            }(this[data.onShowHandler]);
    }
    tab.onmouseover = function () {
        _this.showDropdown(this);
    }
    tab.onmouseout = function () {
        _this.hideDropdown(this);
    }
    tab.appendChild(tabLink);
    if (data.menu != null && (!this.osUtils.isMobile || data.collapse == true)) {
        tab.appendChild(this.createTabMenu(data.menu));
    }
    return tab;
}
WebDataRocksToolbar.prototype.showDropdown = function (elem) {
    var menu = elem.querySelectorAll(".wdr-dropdown")[0];
    if (menu) {
        menu.style.display = "block";
        if (menu.getBoundingClientRect().right > this.toolbarWrapper.getBoundingClientRect().right) {
            menu.style.right = 0;
            this.addClass(elem, "wdr-align-rigth");
        }
    }
};
WebDataRocksToolbar.prototype.hideDropdown = function (elem) {
    var menu = elem.querySelectorAll(".wdr-dropdown")[0];
    if (menu) {
        menu.style.display = "none";
        menu.style.right = null;
        this.removeClass(elem, "wdr-align-rigth");
    }
};
WebDataRocksToolbar.prototype.createTabMenu = function (dataProvider) {
    var container = document.createElement("div");
    container.className = "wdr-dropdown wdr-shadow-container";
    var content = document.createElement("ul");
    content.className = "wdr-dropdown-content";
    for (var i = 0; i < dataProvider.length; i++) {
        if (this.isDisabled(dataProvider[i])) continue;
        content.appendChild((dataProvider[i].divider) ? this.createMenuDivider() : this.createTab(dataProvider[i]));
    }
    container.appendChild(content);
    return container;
}
WebDataRocksToolbar.prototype.createMenuDivider = function () {
    var item = document.createElement("li");
    item.className = "wdr-v-divider";
    return item;
}
WebDataRocksToolbar.prototype.isDisabled = function (data) {
    if (this.nullOrUndefined(data)) return true;
    return (data.ios === false && this.osUtils.isIOS) || (data.android === false && this.osUtils.isAndroid) || (data.mobile === false && this.osUtils.isMobile);
}
WebDataRocksToolbar.prototype.getElementById = function (id, parent) {
    var find = function (node, id) {
        for (var i = 0; i < node.childNodes.length; i++) {
            var child = node.childNodes[i];
            if (child.id == id) {
                return child;
            } else {
                var res = find(child, id);
            }
            if (res != null) {
                return res;
            }
        }
        return null;
    };
    return find(parent || this.toolbarWrapper, id);
}

WebDataRocksToolbar.prototype.osUtils = {
    isIOS: navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.platform.match(/iPhone|iPad|iPod/i) ? true : false,
    isMac: /Mac/i.test(navigator.platform),
    isAndroid: navigator.userAgent.match(/Android/i) ? true : false,
    isBlackBerry: /BlackBerry/i.test(navigator.platform),
    isMobile: navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.platform.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Android/i) || /BlackBerry/i.test(navigator.platform)
};
WebDataRocksToolbar.PopupManager = function (toolbar) {
    this.toolbar = toolbar;
    this.activePopup = null;
}
WebDataRocksToolbar.PopupManager.prototype.createPopup = function () {
    return new WebDataRocksToolbar.PopupManager.PopupWindow(this);
};
WebDataRocksToolbar.PopupManager.prototype.addPopup = function (popup) {
    if (popup == null) return;
    this.removePopup();
    this.modalOverlay = this.createModalOverlay();
    this.activePopup = popup;
    this.toolbar.toolbarWrapper.appendChild(popup);
    this.toolbar.toolbarWrapper.appendChild(this.modalOverlay);
    this.addLayoutClasses(popup);
    this.centerPopup(popup);
    var _this = this;
    popup.resizeHandler = function () {
        if (!popup) return;
        _this.addLayoutClasses(popup);
        _this.centerPopup(popup);
    };
    window.addEventListener("resize", popup.resizeHandler);
};
WebDataRocksToolbar.PopupManager.prototype.addLayoutClasses = function (popup) {
    popup.classList.remove("wdr-layout-tablet");
    popup.classList.remove("wdr-layout-mobile");
    popup.classList.remove("wdr-layout-mobile-small");
    var rect = this.getBoundingRect(this.toolbar.container);
    if (rect.width < 768) {
        popup.classList.add("wdr-layout-tablet");
    }
    if (rect.width < 580) {
        popup.classList.add("wdr-layout-mobile");
    }
    if (rect.width < 460) {
        popup.classList.add("wdr-layout-mobile-small");
    }
};
WebDataRocksToolbar.PopupManager.prototype.centerPopup = function (popup) {
    var containerRect = this.getBoundingRect(this.toolbar.container);
    var popupRect = this.getBoundingRect(popup);
    var toolbarRect = this.getBoundingRect(this.toolbar.toolbarWrapper);
    popup.style.zIndex = parseInt(this.modalOverlay.style.zIndex) + 1;
    //this.modalOverlay.style.top = toolbarRect.height + "px";
    this.modalOverlay.style.height = containerRect.height /*- toolbarRect.height*/ + "px";
    popup.style.left = Math.max(0, (toolbarRect.width - popupRect.width) / 2) + "px";
    popup.style.top = Math.max(0, (containerRect.height - popupRect.height) / 2) + "px";
};
WebDataRocksToolbar.PopupManager.prototype.removePopup = function (popup) {
    var popup = (popup || this.activePopup);
    if (this.modalOverlay != null) {
        this.toolbar.toolbarWrapper.removeChild(this.modalOverlay);
        this.modalOverlay = null;
    }
    if (popup != null) {
        this.toolbar.toolbarWrapper.removeChild(popup);
        this.activePopup = null;
        window.removeEventListener("resize", popup.resizeHandler);
    }
};
WebDataRocksToolbar.PopupManager.prototype.getBoundingRect = function (target) {
    var rect = target.getBoundingClientRect();
    return {
        left: rect.left,
        right: rect.right,
        top: rect.top,
        bottom: rect.bottom,
        width: rect.width || target.clientWidth,
        height: rect.height || target.clientHeight
    };
};
WebDataRocksToolbar.PopupManager.prototype.createModalOverlay = function () {
    var modalOverlay = document.createElement("div");
    modalOverlay.className = "wdr-modal-overlay";
    modalOverlay.id = "wdr-popUp-modal-overlay";
    var _this = this;
    modalOverlay.addEventListener('click', function (e) {
        _this.removePopup(_this.activePopup);
    });
    return modalOverlay;
};
WebDataRocksToolbar.PopupManager.PopupWindow = function (popupManager) {
    this.popupManager = popupManager;
    var contentPanel = document.createElement("div");
    contentPanel.className = "wdr-panel-content";
    var titleBar = document.createElement("div");
    titleBar.className = "wdr-title-bar";
    var titleLabel = document.createElement("div");
    titleLabel.className = "wdr-title-text";
    var toolbar = document.createElement("div");
    toolbar.className = "wdr-toolbox";
    toolbar.style.clear = "both";
    this.content = document.createElement("div");
    this.content.className = "wdr-popup wdr-panel wdr-toolbar-ui wdr-ui";
    this.content.appendChild(contentPanel);
    contentPanel.appendChild(titleBar);
    titleBar.appendChild(titleLabel);

    this.setTitle = function (title) {
        WebDataRocksToolbar.prototype.setText(titleLabel, title);
    }
    this.setContent = function (content) {
        contentPanel.insertBefore(content, titleBar.nextSibling);
    }
    var _this = this;
    this.setToolbar = function (buttons, toHeader) {
        toolbar.innerHTML = "";
        for (var i = buttons.length - 1; i >= 0; i--) {
            var button = document.createElement("a");
            button.setAttribute("href", "javascript:void(0)");
            button.className = "wdr-ui-btn" + (buttons[i].isPositive ? " wdr-ui-btn-dark" : "");
            if (buttons[i].id) button.id = buttons[i].id;
            WebDataRocksToolbar.prototype.setText(button, buttons[i].label);
            button.onclick =
                function (handler) {
                    return function () {
                        if (handler != null) {
                            handler.call();
                        }
                        _this.popupManager.removePopup();
                    }
                }(buttons[i].handler);
            if (buttons[i].disabled === true) {
                WebDataRocksToolbar.prototype.addClass(button, "wdr-ui-disabled");
            } else {
                WebDataRocksToolbar.prototype.removeClass(button, "wdr-ui-disabled");
            }
            if (buttons[i].isPositive && (WebDataRocksToolbar.prototype.osUtils.isMac || WebDataRocksToolbar.prototype.osUtils.isIOS)) {
                toolbar.appendChild(button);
            } else {
                toolbar.insertBefore(button, toolbar.firstChild);
            }
        }
        if (toHeader) {
            toolbar.classList.add("wdr-ui-col");
            titleBar.appendChild(toolbar);
            titleBar.classList.add("wdr-ui-row");
            titleLabel.classList.add("wdr-ui-col");
        } else {
            contentPanel.appendChild(toolbar);
        }
    }
    this.toolbar = toolbar;
    this.titleBar = titleBar;
    this.title = titleLabel;
    return this;
};
WebDataRocksToolbar.ColorPicker = function (toolbar, popupContainer) {
    this.toolbar = toolbar;

    this.element = document.createElement("div");
    this.element.classList.add("wdr-colorpick-wrap");
    this.element.classList.add("wdr-width40");

    this.colorPickerButton = document.createElement("div");
    this.colorPickerButton.classList.add("wdr-colorpick-btn");
    this.element.appendChild(this.colorPickerButton);
    this.colorPickerIcon = document.createElement("span");
    this.colorPickerIcon.classList.add("wdr-icon");
    this.colorPickerIcon.classList.add("wdr-icon-act_font");
    this.colorPickerButton.appendChild(this.colorPickerIcon);

    this.popup = document.createElement('div');
    this.popup.classList.add("wdr-colorpick-popup");
    this.popup.onclick = function (event) {
        event.stopPropagation();
    };
    popupContainer.appendChild(this.popup);

    var colorSwitch = document.createElement("div");
    colorSwitch.classList.add("wdr-color-targ-switch");
    this.popup.appendChild(colorSwitch);

    var colorBtn = document.createElement("a");
    colorBtn.classList.add("wdr-cts-item");
    colorBtn.classList.add("wdr-current");
    colorBtn.href = "javascript:void(0);";
    colorBtn.innerHTML = toolbar.Labels.cp_text;
    colorBtn.onclick = function () { onSwitchChange('font'); };
    colorSwitch.appendChild(colorBtn);

    var bgColorBtn = document.createElement("a");
    bgColorBtn.classList.add("wdr-cts-item");
    bgColorBtn.innerHTML = toolbar.Labels.cp_highlight;
    bgColorBtn.href = "javascript:void(0);";
    bgColorBtn.onclick = function () { onSwitchChange('bg'); };
    colorSwitch.appendChild(bgColorBtn);

    var row = document.createElement("div");
    row.classList.add("wdr-cp-sett-row");
    this.popup.appendChild(row);

    this.colorInput = document.createElement("input");
    this.colorInput.type = "text";
    this.colorInput.classList.add("wdr-inp");
    this.colorInput.classList.add("wdr-width140");
    this.colorInput.classList.add("wdr-tac");
    this.colorInput.onchange = onColorInputChanged;
    row.appendChild(this.colorInput);

    this.colorPreview = document.createElement("div");
    this.colorPreview.classList.add("wdr-cp-curr-color");
    this.colorPreview.classList.add("wdr-width140");
    row.appendChild(this.colorPreview);

    this.mainColors = document.createElement("div");
    this.mainColors.classList.add("wdr-row-9colors");
    this.popup.appendChild(this.mainColors);
    for (var color in this.colors) {
        var item = document.createElement("div");
        item.classList.add("wdr-r9c-item");
        item.style.backgroundColor = color;
        item.setAttribute('data-c', color);
        item.addEventListener('click', onMainColorClick);
        this.mainColors.appendChild(item);

        var check = document.createElement("span");
        check.classList.add("wdr-cp-currentmark");
        check.classList.add("wdr-icon");
        check.classList.add("wdr-icon-act_check");
        item.appendChild(check);

        var arrow = document.createElement("span");
        arrow.classList.add("wdr-r9c-arrow");
        arrow.style.borderTopColor = color;
        item.appendChild(arrow);
    }

    this.shadeColors = document.createElement("div");
    this.shadeColors.classList.add("wdr-row-4colors");
    this.popup.appendChild(this.shadeColors);
    for (var i = 0; i < 8; i++) {
        var item = document.createElement("div");
        item.classList.add("wdr-r4c-item");
        item.addEventListener('click', onColorClick);
        this.shadeColors.appendChild(item);

        var check = document.createElement("span");
        check.classList.add("wdr-cp-currentmark");
        check.classList.add("wdr-icon");
        check.classList.add("wdr-icon-act_check");
        item.appendChild(check);
    }
    this.drawShades(this.colors['#000000']);

    var row = document.createElement("div");
    row.classList.add("wdr-cp-btns-row");
    this.popup.appendChild(row);

    var applyBtn = document.createElement("a");
    applyBtn.innerHTML = toolbar.Labels.apply;
    applyBtn.classList.add("wdr-ui-btn");
    applyBtn.classList.add("wdr-ui-btn-dark");
    applyBtn.addEventListener("click", onApplyClick);

    var cancelBtn = document.createElement("a");
    cancelBtn.innerHTML = toolbar.Labels.cancel;
    cancelBtn.classList.add("wdr-ui-btn");
    cancelBtn.addEventListener("click", onCancelClick);

    if (WebDataRocksToolbar.prototype.osUtils.isMac || WebDataRocksToolbar.prototype.osUtils.isIOS) {
        row.appendChild(cancelBtn);
        row.appendChild(applyBtn);
    } else {
        row.appendChild(applyBtn);
        row.appendChild(cancelBtn);
    }

    this.currentType = "font";

    this.colorPickerButton.addEventListener('click', onColorButtonClick);
    document.body.addEventListener('click', onBodyClick);

    var _this = this;

    function onBodyClick(event) {
        onCancelClick();
    }

    function onColorButtonClick(event) {
        event.stopPropagation();
        if (_this.isOpened()) {
            _this.closePopup();
        } else {
            _this.openPopup();
        }
    }

    function onMainColorClick(event) {
        var color = event.target.getAttribute('data-c');
        _this.drawShades(_this.colors[color]);
        _this.setColor(color, _this.currentType, true);
    }

    function onColorClick(event) {
        var color = event.target.getAttribute('data-c');
        _this.setColor(color, _this.currentType, true);
    }

    function onSwitchChange(type) {
        _this.currentType = type;
        colorBtn.classList.remove("wdr-current");
        bgColorBtn.classList.remove("wdr-current");
        if (type == "bg") {
            bgColorBtn.classList.add("wdr-current");
            _this.setColor(_this.backgroundColor, type, false);
        } else {
            colorBtn.classList.add("wdr-current");
            _this.setColor(_this.fontColor, type, false);
        }
    }

    function onColorInputChanged() {
        var color = _this.colorInput.value;
        if (_this.isColor(color)) {
            _this.setColor(color, _this.currentType, true);
        }
    }

    function onApplyClick() {
        _this.closePopup();
        if (_this.applyHandler) {
            _this.applyHandler();
        }
    }

    function onCancelClick() {
        _this.closePopup();
        if (_this.cancelHandler) {
            _this.cancelHandler();
        }
    }
}
WebDataRocksToolbar.ColorPicker.prototype.colors = {
    '#000000': ["#000000", "#212121", "#424242", "#616161", "#757575", "#9E9E9E", "#BDBDBD", "#FFFFFF"],
    '#F44336': ["#D32F2F", "#E53935", "#F44336", "#EF5350", "#E57373", "#EF9A9A", "#FFCDD2", "#FFEBEE"],
    '#FF9800': ["#F57C00", "#FB8C00", "#FF9800", "#FFA726", "#FFB74D", "#FFCC80", "#FFE0B2", "#FFF3E0"],
    '#FFEB3B': ["#FBC02D", "#FDD835", "#FFEB3B", "#FFEE58", "#FFF176", "#FFF59D", "#FFF9C4", "#FFFDE7"],
    '#8BC34A': ["#689F38", "#7CB342", "#8BC34A", "#9CCC65", "#AED581", "#C5E1A5", "#DCEDC8", "#F1F8E9"],
    '#009688': ["#00796B", "#00897B", "#009688", "#26A69A", "#4DB6AC", "#80CBC4", "#B2DFDB", "#E0F2F1"],
    '#03A9F4': ["#0288D1", "#039BE5", "#03A9F4", "#29B6F6", "#4FC3F7", "#81D4FA", "#B3E5FC", "#E1F5FE"],
    '#3F51B5': ["#303F9F", "#3949AB", "#3F51B5", "#5C6BC0", "#7986CB", "#9FA8DA", "#C5CAE9", "#E8EAF6"],
    '#9C27B0': ["#7B1FA2", "#8E24AA", "#9C27B0", "#AB47BC", "#BA68C8", "#CE93D8", "#E1BEE7", "#F3E5F5"],
};
WebDataRocksToolbar.ColorPicker.prototype.isOpened = function () {
    return this.popup.parentElement && this.popup.parentElement.classList.contains("wdr-popup-opened");
};
WebDataRocksToolbar.ColorPicker.prototype.drawShades = function (colors) {
    if (!colors) {
        return;
    }
    var children = this.shadeColors.children;
    for (var i = 0; i < children.length; i++) {
        var item = children[i];
        item.setAttribute('data-c', colors[i]);
        item.style.backgroundColor = colors[i];
        item.style.borderRight = colors[i] == "#FFFFFF" ? "1px solid #d5d5d5" : 'none';
        item.style.borderBottom = colors[i] == "#FFFFFF" ? "1px solid #d5d5d5" : 'none';
    }
};
WebDataRocksToolbar.ColorPicker.prototype.setColor = function (colorValue, type, dispatch) {
    if (typeof colorValue === "string" && colorValue.indexOf("0x") == 0) {
        colorValue = "#" + colorValue.substr(2);
    }
    if (type == "bg") {
        this.backgroundColor = colorValue;
        this.colorPickerButton.style.backgroundColor = colorValue;
    } else {
        this.fontColor = colorValue;
        this.colorPickerIcon.style.color = colorValue;
    }
    this.colorInput.value = colorValue;
    this.colorPreview.style.backgroundColor = colorValue;
    this.drawSelected();

    if (dispatch && this.changeHandler) {
        this.changeHandler();
    }
};
WebDataRocksToolbar.ColorPicker.prototype.drawSelected = function () {
    var color = this.currentType == "bg" ? this.backgroundColor : this.fontColor;
    var mainColor = this.findMain(color);

    this.drawShades(this.colors[mainColor]);

    var children = this.mainColors.children;
    for (var i = 0; i < children.length; i++) {
        children[i].classList.remove("wdr-current");
    }
    var mainSelected = this.mainColors.querySelector("[data-c='" + mainColor + "']");
    if (mainSelected) {
        mainSelected.classList.add("wdr-current");
    }

    children = this.shadeColors.children;
    for (var i = 0; i < children.length; i++) {
        children[i].classList.remove("wdr-current");
    }
    var shadeSelected = this.shadeColors.querySelector("[data-c='" + color + "']");
    if (shadeSelected) {
        shadeSelected.classList.add("wdr-current");
    }
};
WebDataRocksToolbar.ColorPicker.prototype.findMain = function (color) {
    if (typeof color === "string" && color.indexOf("0x") == 0) {
        color = "#" + color.substr(2);
    }
    for (var mainColor in this.colors) {
        var colors = this.colors[mainColor];
        if (colors.indexOf(color) >= 0) {
            return mainColor;
        }
    }
};
WebDataRocksToolbar.ColorPicker.prototype.isColor = function (value) {
    return value.match(/^#?[0-9A-Fa-f]{6}$/g);
}
WebDataRocksToolbar.ColorPicker.prototype.closePopup = function () {
    if (!this.popup.parentElement) {
        return;
    }
    this.popup.parentElement.classList.remove("wdr-popup-opened");
}
WebDataRocksToolbar.ColorPicker.prototype.openPopup = function () {
    // close others
    var openedPopups = this.toolbar.toolbarWrapper.querySelectorAll('.wdr-colorpick-popup');
    for (var i = 0; i < openedPopups.length; i++) {
        openedPopups[i].parentElement.classList.remove("wdr-popup-opened");
    }
    if (!this.popup.parentElement) {
        return;
    }
    // open current
    var parent = this.toolbar.toolbarWrapper.querySelector("#wdr-popup-conditional .wdr-panel-content");
    var pos = this.getWhere(this.colorPickerButton, parent);
    var posAbs = this.getWhere(this.colorPickerButton, document.body);
    if (posAbs.top - this.popup.clientHeight < 0) {
        this.popup.classList.remove("wdr-arrow-down");
        this.popup.classList.add("wdr-arrow-up");
        this.popup.style.top = (this.colorPickerButton.clientHeight + pos.top + 11) + 'px';
        this.popup.style.bottom = "";
    } else {
        this.popup.classList.add("wdr-arrow-down");
        this.popup.classList.remove("wdr-arrow-up");
        this.popup.style.bottom = (parent.clientHeight - pos.top + 5) + 'px';
        this.popup.style.top = "";
    }
    this.popup.style.left = (pos.left + (this.colorPickerButton.clientWidth / 2) + 2) + 'px';
    this.popup.parentElement.classList.add("wdr-popup-opened");
}
WebDataRocksToolbar.ColorPicker.prototype.getWhere = function (el, parent) {
    var curleft = 0;
    var curtop = 0;
    var curtopscroll = 0;
    var curleftscroll = 0;
    if (el.offsetParent) {
        curleft = el.offsetLeft;
        curtop = el.offsetTop;
        var elScroll = el;
        while (elScroll = elScroll.parentNode) {
            if (elScroll == parent) {
                break;
            }
            curtopscroll = elScroll.scrollTop ? elScroll.scrollTop : 0;
            curleftscroll = 0;
            curleft -= curleftscroll;
            curtop -= curtopscroll;
        }
        while (el = el.offsetParent) {
            if (el == parent) {
                break;
            }
            curleft += el.offsetLeft;
            curtop += el.offsetTop;
        }
    }
    var isMSIE = /*@cc_on!@*/ 0;
    var offsetX = 0;// isMSIE ? document.body.scrollLeft : window.pageXOffset;
    var offsetY = 0;// isMSIE ? document.body.scrollTop : window.pageYOffset;
    return {
        top: curtop + offsetY,
        left: curleft + offsetX
    };
}
