<body>

<!-- ---------------------------------------  DO NOT EDIT INSIDE THIS LINE - BEGIN ------------------------------------------- -->
<!-- --------------basic.html--- START -->
<link rel="stylesheet" type="text/css" href="widgets/basic/css/table.css">
<script type="text/javascript" src="widgets/basic/js/table.js"></script>

<script type="text/javascript">
    "use strict";

    if (vis.editMode) {
        // Add words for basic widgets
        $.extend(true, systemDictionary, {
            // Bars
            "src":              {"en": "Source",                    "de": "Quelle",                 "ru": "Адрес"},
            "refreshInterval":  {"en": "Refresh interval(ms)",      "de": "Updatezeit(ms)",         "ru": "Интервал обновления(ms)"},
            "is_comma":         {"en": "Divider comma",             "de": "Komme als Trennung",     "ru": "Запятая-разделитель"},
            "digits":           {"en": "Digits after comma",        "de": "Zeichen nach Komma",     "ru": "Знаков после запятой"},
            "oid":              {"en": "Object ID",                 "de": "Object ID",              "ru": "ID Объекта"},
            "html_prepend":     {"en": "Prepend value",             "de": "Voranstellen HTML",      "ru": "Префикс значения"},
            "html_append":      {"en": "Append to value",           "de": "HTML anhängen",          "ru": "Суффикс значения"},
            "html_append_singular": {
                "en" : "Append to value (Singular)",
                "de": "HTML anhängen (Singulär)",
                "ru": "Суффикс значения(един.ч.)"
            },
            "html_append_plural": {
                "en" : "Append to value (Plural)",
                "de": "HTML anhängen(Plüral)",
                "ru": "Суффикс значения(множ.ч.)"
            },
            "html_prepend_tooltip":    {
                "en": "Write HTML code here that will be placed before,\x0Ae.g. <b> ",
                "de": "HTML Kod, der wird vom dem Wert platziert,\x0Az.B. <b>",
                "ru": "HTML код будет помещён перед значением,\x0Aнапример <b>"
            },
            "html_append_tooltip":     {
                "en": "Write HTML code here that will be placed before,\x0Ae.g. </b>",
                "de": "HTML Kod, der wird vom dem Wert platziert,\x0Az.B. </b>",
                "ru": "HTML код будет помещён после значения,\x0Aнапример </b>"
            },
            "stretch":          {"en": "Stretch",                   "de": "Strecken",               "ru": "Растянуть"},
            "factor":           {"en": "Multiplex factor",          "de": "Multiplikation",         "ru": "Множитеть"},
            "class_true":       {"en": "Class if quality 'true'",   "de": "Kalsse bei Qualität 'true'", "ru": "Класс, если качество 'true'"},
            "class_false":      {"en": "Class if quality 'false'",  "de": "Kalsse bei Qualität 'false'", "ru": "Класс, если качество 'false'"},
            "test_html":        {"en": "Text for test",             "de": "Testtext",               "ru": "Тестовый текст"},
            "test_html_tooltip": {
                "en": "You can specify the test text if value is now empty to visualise settings.\x0AIt is valid only during edit.",
                "de": "Man kann noch Testtext setzen um die Einstellungen visuell zu sehen.\x0ADas ist nur während Edit gültig.",
                "ru": "Можно задать тестовый текст, что бы видеть настройки визуально.\x0AОн действителен только во время редактирования."
            },
            "html":             {"en": "HTML",                      "de": "HTML",                   "ru": "HTML"},
            "oid-quality":      {"en": "Quality ID",                "de": "Qualität ID",            "ru": "ID-Качество"},
            "oid-quality_tooltip":     {
                "en": "You can set additionally Quality ID to indicate if the value valid or not.",
                "de": "Man kann noch zusätzlich Qualität ID setzetn um zu zeigen ob das Wert aktuell ist.",
                "ru": "Можно дополнительно установить ID-Качества, что бы показать актуальное значение или нет."},
            "title":            {"en": "Title",                     "de": "Titel",                  "ru": "Заголовок"},
            "title_font":       {"en": "Title font name",           "de": "Titelschriftname",       "ru": "Шрифт заголовка"},
            "title_color":      {"en": "Title color",               "de": "Titelfarbe",             "ru": "Цвет заголовка"},
            "title_back":       {"en": "Title backg. color",        "de": "Titelhintergrund",       "ru": "Цвет фона текста"},
            "title_top":        {"en": "Title top padding",         "de": "Titel-Oben-Abstand",     "ru": "Отступ заголовка сверху"},
            "title_left":       {"en": "Title left padding",        "de": "Titel-Links-Abstand",    "ru": "Отступ заголовка слева"},
            "header_height":    {"en": "Header height",             "de": "Kopfhöhe",               "ru": "Высота заголовока"},
            "header_color":     {"en": "Header color",              "de": "Kopffarbe",              "ru": "Цвет фона заголовка"},
            "refreshOnWakeUp":  {"en": "Refresh on wake up",        "de": "Update bei Aufwachen",   "ru": "Обновлять при выходе из сна"},
            "refreshOnViewChange": {"en": "Refresh on view change", "de": "Update bei Viewwechsel", "ru": "Обновлять при смене страницы"},
            "src_":             {"en": "URL, by value=",            "de": "URL falls Wert=",        "ru": "Адрес при значении "},
            "nav_view":         {"en": "View to navigate",          "de": "View zum Navigieren",    "ru": "Перейти на страницу"},
            "group_effects":    {"en": "Show/Hide Effects",         "de": "Anzeige Effekte",        "ru": "Эффекты появления/исчезновения"},
            "group_extended":   {"en": "Extended settings",         "de": "Erweiterte Eistellungen", "ru": "Расширенные настройки"},
            "body-background":  {"en": "Background color by changing", "de": "Hintegrund by Wechsel", "ru": "Фон при смене страниц"},
            "sync":             {"en": "Hide and show together:",   "de": "Anzeigen und verbergen gleichzeitig", "ru": "Появления и исчезновение вместе"},
            // Effects
            "show":             {"en": "show",                      "de": "show",                   "ru": "show"},
            "blind":            {"en": "blind",                     "de": "blind",                  "ru": "blind"},
            "bounce":           {"en": "bounce",                    "de": "bounce",                 "ru": "bounce"},
            "clip":             {"en": "clip",                      "de": "clip",                   "ru": "clip"},
            "drop":             {"en": "drop",                      "de": "drop",                   "ru": "drop"},
            "explode":          {"en": "explode",                   "de": "explode",                "ru": "explode"},
            "fade":             {"en": "fade",                      "de": "fade",                   "ru": "fade"},
            "fold":             {"en": "fold",                      "de": "fold",                   "ru": "fold"},
            "highlight":        {"en": "highlight",                 "de": "highlight",              "ru": "highlight"},
            "puff":             {"en": "puff",                      "de": "puff",                   "ru": "puff"},
            "pulsate":          {"en": "pulsate",                   "de": "pulsate",                "ru": "pulsate"},
            "scale":            {"en": "scale",                     "de": "scale",                  "ru": "scale"},
            "shake":            {"en": "shake",                     "de": "shake",                  "ru": "shake"},
            "size":             {"en": "size",                      "de": "size",                   "ru": "size"},
            "slide":            {"en": "slide",                     "de": "slide",                  "ru": "slide"},
            "is_milliseconds":  {"en": "Milliseconds",              "de": "Millisekunden",          "ru": "Миллисекунды"},
            "is_milliseconds_tooltip": {
                "en": "Is object is milliseconds from 1970.01.01 00:00:00. Normally no.",
                "de": "Ob das Wert die Milleskunden seit 1970.01.01 00:00:00 ist. Normalerweise nicht.",
                "ru": "Является ли значение объекта миллисекундами с 1970.01.01 00:00:00. Обычно нет."
            },
            "format_date":      {"en": "Dateformat",                "de": "Datumformat",            "ru": "Формат даты"},
            "format_date_tooltip": {
                "en": "Dateformat",
                "de": "Datumformat",
                "ru": "Формат даты"
            },

            "hide_effect":      {"en": "Hide effect",               "de": "Verbergeneffekt",        "ru": "Эффект скрытия"},
            "hide_duration":    {"en": "Hide duration(ms)",         "de": "Verbergendauer",         "ru": "Длительность скрытия(мс)"},
            "hide_options":     {"en": "Hide options",              "de": "Verbergenoptionen",      "ru": "Опции скрытия"},
            "show_effect":      {"en": "Show effect",               "de": "Anzeigeeffekt",          "ru": "Эффект появления"},
            "show_duration":    {"en": "Show duration(ms)",         "de": "Anzeigedauer",           "ru": "Длительность появления(мс)"},
            "show_options":     {"en": "Show options",              "de": "Anzeigeoptionen",        "ru": "Опции появления"},
            "left":             {"en": "left",                      "de": "links",                  "ru": "лево"},
            "right":            {"en": "right",                     "de": "rechts",                 "ru": "право"},
            "top":              {"en": "top",                       "de": "oben",                   "ru": "верх"},
            "bottom":           {"en": "bottom",                    "de": "unten",                  "ru": "низ"},

            "contains_view":    {"en": "Contains view",             "de": "Viewname",               "ru": "Имя страницы"},
            "persistent":       {"en": "Persistent",                "de": "Bleibend",               "ru": "Постоянно"},
            "persistent_tooltip": {
                "en": "If persistent the view will not be destroyed when inactive, just hide.\nElsewise the view will be destroyed, if inactive.",
                "de": "Falls 'Bleibend', dann wird die View nicht zerstört, sondern nur versteckt wenn inaktive. Sonst wird die View immer wieder kreiert und zerstört.",
                "ru": "Если выбранно 'Постоянно', то страница не будет уничтожаться, если она не активна. В противном случае страница будет создаваться и разрушаться."},
            "valuelist":        {"en": "Values list",               "de": "Wertenliste",            "ru": "Список значений"},
            "valuelist_tooltip": {
                "en": "Divide values with semicolon, like 'ok;warning;alram'. Every text accordingly for value 0,1,2 and so on",
                "de": "Die Werte mit Semikolon trennen, wie 'ok;Warnung;Alarm'. Jeder Text ist entsprechend für das Wert 0,1,2 usw.",
                "ru": "Разделять значения точкой запятой, например 'ok;Внимание;Тревога'. Каждый текст соответственно для значения 0,1,2 итд."},
            "html_false":       {"en": "HTML by 'false'",           "de": "HTML bei 'false'",       "ru": "HTML если 0"},
            "html_true":        {"en": "HTML by 'true'",            "de": "HTML bei 'true'",        "ru": "HTML если 1"},
            "text_false":       {"en": "Text by 'false'",           "de": "Text bei 'false'",       "ru": "Текст если 0"},
            "text_true":        {"en": "Text by 'true'",            "de": "Text bei 'true'",        "ru": "Текст если 1"},
            "svg_false":        {"en": "SVG by 'false'",            "de": "SVG bei 'false'",        "ru": "SVG если 0"},
            "svg_true":         {"en": "SVG by 'true'",             "de": "SVG bei 'true'",         "ru": "SVG если 1"},
            "svg_opacity":      {"en": "Opacity",                   "de": "Durchsichtigkeit",       "ru": "Прозрачность"},
            "html_closed":      {"en": "HTML by 'closed'",          "de": "HTML bei 'zu'",          "ru": "HTML если закрыто"},
            "html_open":        {"en": "HTML by 'open'",            "de": "HTML bei 'auf'",         "ru": "HTML если открыто"},
            "html_tilt":        {"en": "HTML by 'tilted'",          "de": "HTML bei 'gekippt'",     "ru": "HTML если наклоненно"},
            "html_tilt_tooltip": {
                "en": "0 - Closed, 1 - tilt, 2 - open",
                "de": "0- Zu, 1 - gekippt, 2 - auf",
                "ru": "0 - закрыто, 1 - откинуто, 2 - открыто"
            },
            "color":            {"en": "Color",                     "de": "Farbe",                  "ru": "Цвет"},
            "shadow":           {"en": "Opacity",                   "de": "Durchsichtigkeit",       "ru": "Тень"},
            "shadow_tooltip":   {
                "en": "CSS Shadow, like '10px 10px 5px #888888'",
                "de": "CSS Shatten, wie '10px 10px 5px #888888'",
                "ru": "CSS Тень, как '10px 10px 5px #888888'"
            },
            "reverse":          {"en": "Revers value",              "de": "Wert umkehren",          "ru": "Перевернуть значение"},
            "border":           {"en": "Border",                    "de": "Rand",                   "ru": "Окантовка"},
            "border_tooltip":   {
                "en": "CSS border, like 'green 5px solid'",
                "de": "CSS Rand, wie 'green 5px solid'",
                "ru": "CSS бордюр, как 'green 5px solid'"
            },
            "test_text":        {"en": "Test text",                 "de": "Testtext",               "ru": "Тестовый текст"},
            "max_width":        {"en": "Max. width",                "de": "Maximale Breite",        "ru": "Максимальная ширина"},
            "style":            {"en": "Style for ",                "de": "Stil für ",              "ru": "Стиль для "},
            "style_tooltip":    {
                "en": "Write here css style, like: 'color:red;background:white'",
                "de": "Hier muss CSS Stil stehen, wie 'color:red;background:white'",
                "ru": "CSS Стиль, например: 'color:red;background:white'"},
            "count":            {"en": "Values number to",          "de": "Wertsanzahl bis",        "ru": "Количество значений до"},
            "test_list":        {"en": "Test value",                "de": "Testwert",               "ru": "Тестовое значение"},
            "urlValue":         {"en": "Call URL on click",         "de": "Rufe URL bei click",     "ru": "Вызвать URL при нажатии"},
            "group_ccontrol":   {"en": "Advanced control",          "de": "Extrasteuerung",         "ru": "Продвинутое управление"},
            "urlFalse":         {"en": "URL on false",              "de": "URL bei false",          "ru": "URL при false"},
            "urlTrue":          {"en": "URL on true",               "de": "URL bei true",           "ru": "URL при true"},
            "oidFalse":         {"en": "Object ID on false",        "de": "Objekt ID bei false",    "ru": "ID объекта при false"},
            "oidTrue":          {"en": "Object ID on true",         "de": "Objekt ID bei true",     "ru": "ID объекта при true"},
            "oidTrueValue":     {"en": "Value for OÍD on true",     "de": "Wert für ID bei false",  "ru": "Значение для ID при false"},
            "oidFalseValue":    {"en": "Value for OÍD on false",    "de": "Wert für ID bei true",   "ru": "Значение для ID при true"},
            "square":           {"en": "square",                    "de": "square",                 "ru": "квадрат"},
            "pentagone":        {"en": "pentagone",                 "de": "pentagone",              "ru": "Пятиуголник"},
            "hexagone":         {"en": "hexagone",                  "de": "hexagone",               "ru": "Шестиугольник"},
            "octagone":         {"en": "octagone",                  "de": "octagone",               "ru": "Восьмиугольник"},
            "circle":           {"en": "circle",                    "de": "Kreis",                  "ru": "Круг"},
            "svgType":          {"en": "Type",                      "de": "Typ",                    "ru": "Тип"},
            "strokeColor":      {"en": "Stroke color",              "de": "Liniefarbe",             "ru": "Цвет линии"},
            "fill":             {"en": "Fill color",                "de": "Füllfarbe",              "ru": "Цвет заливки"},
            "strokeWidth":      {"en": "Stroke width",              "de": "Liniebreite",            "ru": "Ширина линии"},
            "rotate":           {"en": "Rotate",                    "de": "Drehen",                 "ru": "Повернуть на"},
            "no_control":       {"en": "Read only",                 "de": "Nur Anzeige",            "ru": "Только показывать"},
            "numeric":          {"en": "Number",                    "de": "Nummer",                 "ru": "Число"},
            "autoSet":          {"en": "Auto set",                  "de": "Auto-setzen",            "ru": "Авто запись"},
            "autoSet_tooltip":  {
                "en": "Without 'Auto set' you must press ENTER,\x0ato write the value.",
                "de": "Ohne 'Auto-setzen' man muss danach ENTER drucken,\x0A um das Wert zu schreiben.",
                "ru": "Без 'Авто записи' нужно нажать ENTER,\x0Aчто бы записать значение."
            },
            "group_views":      {"en": "Views",                     "de": "Views",                  "ru": "Страницы"},
            "group_frames":     {"en": "iFrames",                   "de": "iFrames",                "ru": "iFrames"},
            "horizontal":       {"en": "horizontal",                "de": "horizontal",             "ru": "горизонтально"},
            "vertical":         {"en": "vertical",                  "de": "senkrecht",              "ru": "вертикально"},
            "orientation":      {"en": "Orientation",               "de": "Ausrichtung ",           "ru": "Направление"}
        });
    }

    $.extend(true, systemDictionary, {
        "Edit note":    {"en": "Edit note",     "de": "Meldung eingeben",   "ru": "Сообщение"},
        "Clear":        {"en": "Clear",         "de": "Löschen",            "ru": "Очистить"},
        "Ok":           {"en": "Ok",            "de": "Ok",                 "ru": "Ok"},
        "Cancel":       {"en": "Cancel",        "de": "Abbrechen",          "ru": "Отмена"}
    });

    vis.binds.stateful = {
        view: function (el, viewArr, persistent) {
            var $this = $(el);
            var oid   = $this.attr('data-oid');

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                if (newVal === 'true'  || newVal === true)  newVal = 1;
                if (newVal === 'false' || newVal === false) newVal = 0;
                var view = viewArr[newVal];
                if (!persistent) {
                    $this.parent().find('div.vis-view').remove();
                } else {
                    $this.parent().find('div.vis-view').hide().appendTo($('#vis_container'));
                }
                if (vis.views[view]) {
                    vis.renderView(view);
                    $('#visview_' + view).appendTo($this).show();
                }
            });
        },
        iframe: function (el, srcArr, refreshInterval) {
            var $this = $(el).parent().find('iframe');
            var oid   = $this.attr('data-oid');

            vis.states.bind(oid + ".val", function (e, newVal, oldVal) {
                if (newVal === 'true'  || newVal === true)  newVal = 1;
                if (newVal === 'false' || newVal === false) newVal = 0;
                $this.attr('src', srcArr[newVal]);
            });

            if (vis.states[oid + '.val'] !== undefined) {
                var val = vis.states[oid + '.val'];
                if (val === 'true'  || val === true)  val = 1;
                if (val === 'false' || val === false) val = 0;
                $this.attr('src', srcArr[val]);
            }

            if (refreshInterval > 0) {
                setInterval(function () {
                    var val = vis.states[oid + '.val'] || 0;
                    if (val === 'true'  || val === true)  val = 1;
                    if (val === 'false' || val === false) val = 0;
                    var src = srcArr[val];
                    $this.attr("src", src + (src.match(/\?/) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                }, refreshInterval);
            }
        },
        image: function (el, srcArr, refreshInterval) {
            var $this = $(el).parent().find("img");
            var oid = $this.attr('data-oid');

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                if (newVal === 'true'  || newVal === true)  newVal = 1;
                if (newVal === 'false' || newVal === false) newVal = 0;
                $this.attr('src', srcArr[newVal]);
            });

            if (vis.states[oid + '.val'] !== undefined) {
                var val = vis.states[oid + '.val'];
                if (val === 'true'  || val === true)  val = 1;
                if (val === 'false' || val === false) val = 0;
                $this.attr('src', srcArr[val]);
            }

            if (refreshInterval > 0) {
                setInterval(function () {
                    var val = vis.states[oid + '.val'] || 0;
                    if (val === 'true'  || val === true)  val = 1;
                    if (val === 'false' || val === false) val = 0;

                    var src = srcArr[val];
                    if (src) $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                }, refreshInterval);
            }
        },
        value: function (values, oid) {
            if (oid != 'nothing_selected' && vis.states.attr(oid + '.val') !== undefined) {
                var val = vis.states.attr(oid + '.val');
                if (val === 'true'  || val === true)  val = 1;
                if (val === 'false' || val === false) val = 0;
                return values[val];
            } else {
                return values[0];
            }
        }
    };
    vis.binds.container = function (el, view) {
        var $this = $(el);
        if (vis.views[view]) {
            vis.renderView(view);
            $('#visview_' + view).appendTo($this).show();
        }
    };
    vis.binds.basic = {
        filterDropdown: function (el, filters, hideEffect, hideDuration, showEffect, showDuration) {
            var $this = $(el);
            if (filters) {
                filters = filters.split(';');
                for (var i = 0; i < filters.length; i++) {
                    $this.find('select').append('<option value="' + filters[i] + '">' + filters[i] + '</option>');
                }
            }

            if (vis.viewsActiveFilter[vis.activeView]) {
                $this.find('select option[value="' + vis.viewsActiveFilter[vis.activeView] + '"]').attr('selected', true);
            }

            $this.find('select').change(function () {
                vis.changeFilter($this.find('select option:selected').val(), hideEffect, hideDuration, showEffect, showDuration);
            });

        },
        state: function (el, oid) {
            var $this = $(el);
            var oid = (oid ? oid : $this.attr('data-oid'));
            var val = $this.attr('data-val');

            if (oid) $this.attr('data-oid', oid);

            if (val === 'true')  val = true;
            if (val === 'false') val = false;

            if (!vis.editMode) {
                $this.on('click touchstart', function (e) {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    var oid = $(this).attr('data-oid');

                    if ($(this).attr('url-value')) {
                        vis.conn.httpGet($(this).attr('url-value'));
                    }

                    if (oid) {
                        var val = $(this).attr('data-val');
                        if (val === undefined || val === null) val = false;
                        if (val === 'true')  val = true;
                        if (val === 'false') val = false;
                        if (parseFloat(val).toString() == val) val = parseFloat(val);

                        if (oid) vis.setValue(oid, val);
                    }
                });
            }
        },
        pressed: null,
        pressedNext: null,
        increment: function (el, minmax, delay, interval) {

            function fInterval($that) {
                vis.binds.basic.pressedNext = true;
                var oid = $that.attr('data-oid');
                if (!vis.editMode) {
                    var step = parseFloat($that.attr('data-vis-step'));
                    var tmp  = parseFloat(vis.states[oid + '.val']) + step;
                    if (step < 0) {
                        if (tmp >= minmax) {
                            vis.setValue($that.attr('data-oid'), tmp);
                            vis.binds.basic.pressed = _setTimeout(fInterval, interval, $that);
                        }
                    } else {
                        if (tmp <= minmax) {
                            vis.setValue($that.attr('data-oid'), tmp);
                            vis.binds.basic.pressed = _setTimeout(fInterval, interval, $that);
                        }
                    }
                }
            }

            function intervalStart(e) {
                vis.binds.basic.pressedNext = false;
                var $this = $(this);
                var oid = $this.attr('data-oid');
                vis.binds.basic.pressed = setTimeout(fInterval, delay, $this);
            }

            if (!vis.editMode) {
                $(el).on('click touchstart', function (e) {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    clearTimeout(vis.binds.basic.pressed);
                    if (vis.binds.basic.pressedNext) {
                        vis.binds.basic.pressedNext = false;
                        return;
                    }
                    var $this = $(this);
                    var oid = $this.attr('data-oid');
                    var step = parseFloat($this.attr('data-vis-step'));
                    var tmp  = parseFloat(vis.states[oid + '.val']) + step;
                    if (step < 0) {
                        if (minmax === undefined || tmp >= minmax) {
                            vis.setValue($this.attr('data-oid'), tmp);
                        }
                    } else {
                        if (minmax === undefined || tmp <= minmax) {
                            vis.setValue($this.attr('data-oid'), tmp);
                        }
                    }
                });
            }

            if (interval) {
                $(el).on('mousedown', intervalStart)
                    .on('touchstart', intervalStart)
                    .on('touchend', function () {
                        clearTimeout(vis.binds.basic.pressed);
                    })
                    .on('mouseup', function () {
                        clearTimeout(vis.binds.basic.pressed);
                    });
            }
        },
        navigation: function (el, options) {
            if (!vis.editMode) {
                var $this = $(el);
                $this.on('click touchstart', function (e) {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    if (options.background) $('body').css({background: options.background});

                    vis.changeView(options.nav_view, options.hideOptions, options.showOptions, options.sync);
                    //e.preventDefault();
                    //return false;
                });
            }
        },
        hideOnFalse: function (el) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            vis.states.bind(oid + ".val", function (e, newVal, oldVal) {
                if (newVal === null || newVal === false || newVal === 0 || newVal === "false" || parseInt(newVal,10) == 0) {
                    if (!vis.editMode) {
                        $this.hide();
                    }
                } else {
                    $this.show();
                }
            });
            if (!vis.editMode) {
                var newVal = vis.states.attr(oid + ".val");
                if (newVal === null || newVal === false || newVal === 0 || newVal === "false" || parseInt(newVal,10) == 0) {
                    $this.hide();
                }
            }
        },
        /*hideOnTrue: function (el) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            vis.states.bind(oid + ".val", function (e, newVal, oldVal) {
                if (newVal === true || parseFloat(newVal) > 0) {
                    if (!vis.editMode) {
                        $this.hide();
                    }
                } else {
                    $this.show();
                }
            });
            if (!vis.editMode) {
                if (parseFloat(vis.states.attr(oid + ".val")) != 0 && vis.states.attr(oid + ".val") !== false) {
                    $this.hide();
                }
            }
        },
        showOnValue: function (el, val) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            vis.states.bind(oid + ".val", function (e, newVal, oldVal) {
                if (newVal != val) {
                    if (!vis.editMode) {
                        $this.hide();
                    }
                } else {
                    $this.show();
                }
            });
            if (!vis.editMode) {
                if (vis.states.attr(oid + ".val") != val) {
                    $this.hide();
                }
            }
        },*/
        _onChange: function (el, oid, wid) {
            var $this = $(el);
            // If still working
            //console.log(oid + ' ' + vis.states.attr(oid + '.val') + ' (' + vis.states.attr(oid + '.ack') + ') - ' + wid + ' ' + vis.states.attr(wid + '.val') + ' (' + vis.states.attr(wid + '.ack') + ')');

            if (wid && (vis.states.attr(wid + '.val') === true)) return;

            var val = vis.states.attr(oid + '.val');

            if (val === 'false') {
                val = false;
            } else if (val === 'true') {
                val = true;
            } else if (typeof val == 'string') {
                var f = parseFloat(val);
                if (f == val) {
                    val = f;
                } else if (val !== '') {
                    val = true;
                } else {
                    val = false;
                }
            }

            if ($this.data('data-numeric')) {
                $this.prop('checked', (val > (($this.data('data-max') - $this.data('data-min')) / 2)));
            } else {
                $this.prop('checked', val);
            }
        },
        checkbox: function (el, numeric, min, max) {
            var $this = $(el);
            var oid   = $this.data('oid'); // Object ID
            var wid   = $this.data('oid-working'); // Work ID

            if (oid) {
                vis.states.bind(oid + '.val', function (e, val, oldVal) {
                    vis.binds.basic._onChange(el, oid, wid);
                });
                if (wid) {
                    vis.states.bind(wid + '.val', function (e, val, oldVal) {
                        vis.binds.basic._onChange(el, oid, wid);
                    });
                }
            }

            if (numeric) {
                if (min !== undefined && min !== null && min !== '') {
                    min = parseFloat(min);
                } else {
                    min = 0;
                }

                if (max !== undefined && max !== null && max !== '') {
                    max = parseFloat(max);
                } else {
                    max = 1;
                }
            } else {
                min = false;
                max = true;
            }

            $this.data('min',     min);
            $this.data('max',     max);
            $this.data('numeric', numeric);

            vis.binds.basic._onChange(el, oid, wid);

            if (!vis.editMode) {
                $this.change(function () {
                    var $this_ = $(this);
                    if ($this_.prop('checked')) {
                        vis.setValue($this_.data('oid'), $this_.data('max'));
                    } else {
                        vis.setValue($this_.data('oid'), $this_.data('min'));
                    }
                });
            }
        },
        input: function (el, data) {
            var $this = $(el);
            var oid   = $this.data('oid'); // Object ID
            var wid   = $this.data('oid-working'); // Work ID

            if (oid) {
                vis.states.bind(oid + '.val', function (e, val, oldVal) {
                    $this.val(val);
                });
                if (wid) {
                    vis.states.bind(wid + '.val', function (e, val, oldVal) {
                        $this.val(val);
                    });
                }
            }

            if (data.numeric) {
                $this.attr('type', 'number');
                if (data.min !== undefined && data.min !== null && data.min !== '') {
                    data.min = parseFloat(data.min);
                } else {
                    data.min = null;
                }

                if (data.max !== undefined && data.max !== null && data.max !== '') {
                    data.max = parseFloat(data.max);
                } else {
                    data.max = null;
                }
            }

            $this.val(vis.states[oid + '.val'] === undefined ? '' : vis.states[oid + '.val']);

            setTimeout(function () {
                $this.css('text-align', $this.parent().parent().css('text-align'));
                $this.css('color', $this.parent().parent().css('color'));
                $this.css('background', $this.parent().parent().css('background'));
                $this.css('border', '0');
                $this.css('text-font', $this.parent().parent().css('text-font'));
            }, 0);

            if (!vis.editMode) {
                $this.change(function () {
                    var $this_ = $(this);
                    if (data.numeric) {
                        var value = parseFloat($this_.val());
                        if (data.min !== null && value < data.min) {
                            value = data.min;
                            $this_.val(value);
                        } else if (data.max !== null && value > data.max) {
                            value = data.max;
                            $this_.val(value);
                        }
                        vis.setValue($this_.data('oid'), value);
                    } else {
                        vis.setValue($this_.data('oid'), $this_.val());
                    }
                });
                if (data.autoSet) {
                    $this.keyup(function(e) {
                        var timer = $this.data('timer');
                        if (timer) clearTimeout(timer);
                        $this.data('timer', setTimeout(function () {
                            $this.trigger('change');
                        }), 1000);
                    });
                }
            }
        },
        select: function (el, invert) {
            var $this = $(el).prev();
            var oid   = $this.attr('data-oid');
            var val   = vis.states[oid + '.val'];

            if (val === 'false') {
                val = false;
            } else if (val === 'true') {
                val = true;
            } else if (typeof val == 'string') {
                var f = parseFloat(val);
                if (f == val) {
                    val = f;
                } else if (val !== '') {
                    val = true;
                } else {
                    val = false;
                }
            }

            if (invert) val = !val;

            $this.val(val ? 1 : 0);
            if (!vis.editMode) {
                if (oid != 'nothing_selected') {
                    $this.change(function () {
                        var val = $this.find('option:selected').val();
                        if (invert) val = !val;
                        vis.setValue(oid, val);
                    });
                }
            }
            if (oid != 'nothing_selected') {

            }
            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                if (newVal === 'false') {
                    newVal = false;
                } else if (newVal === 'true') {
                    newVal = true;
                } else if (typeof newVal == 'string') {
                    var f = parseFloat(newVal);
                    if (f == newVal) {
                        newVal = f;
                    } else if (newVal !== '') {
                        newVal = true;
                    } else {
                        newVal = false;
                    }
                }
                if (oldVal === 'false') {
                    oldVal = false;
                } else if (oldVal === 'true') {
                    oldVal = true;
                } else if (typeof oldVal == 'string') {
                    var f = parseFloat(oldVal);
                    if (f == oldVal) {
                        oldVal = f;
                    } else if (oldVal !== '') {
                        oldVal = true;
                    } else {
                        oldVal = false;
                    }
                }

                if (newVal == oldVal) return;

                if (newVal === 'false' || newVal === false || parseFloat(newVal) == 0) {
                    if ($this.find('option[value="1"]').prop('selected')) {
                        $this.find('option[value="1"]').prop('selected', false);
                        $this.find('option[value="0"]').prop('selected', true);
                        $this.trigger('change');
                    }
                } else {
                    if ($this.find('option[value="0"]').prop('selected')) {
                        $this.find('option[value="0"]').prop('selected', false);
                        $this.find('option[value="1"]').prop('selected', true);
                        $this.trigger('change');
                    }
                }
            });
        },
        toggle: function (el, oid) {
            var $this = $(el);
            var oid = oid || $this.data('oid');
            var min = $this.data('min');
            var max = $this.data('max');

            var urlTrue     = $this.data('url-true');
            var urlFalse    = $this.data('url-false');
            var oidTrue     = $this.data('oid-true');
            var oidFalse    = $this.data('oid-false');
            var oidTrueVal  = $this.data('oid-true-value');
            var oidFalseVal = $this.data('oid-false-value');
            var readOnly    = $this.data('read-only');

            if (min === '') min = undefined;
            if (max === '') max = undefined;

            if ((oid || oidTrue || urlTrue) && !vis.editMode && !readOnly) {
                $this.on('click touchstart', function () {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;
                    var val;

                    if (oidTrue || urlTrue) {
                        if (!oidFalse && oidTrue) oidFalse = oidTrue;
                        if (!urlFalse && urlTrue) urlFalse = urlTrue;

                        if (!oid || oid == 'nothing_selected') {
                            val = !$(this).data('state');
                            // remember state
                            $(this).data('state', val);
                        } else {
                            val = vis.states[oid + '.val'];
                            if (max !== undefined) {
                                val = (val == max);
                            } else {
                                val = (val === 1 || val === '1' || val === true || val === 'true');
                            }
                            val = !val; // invert
                        }
                        if (min === undefined || min === 'false' || min === null) min = false;
                        if (max === undefined || max === 'true'  || max === null) max = true;

                        if (oidTrue) {
                            if (val) {
                                if (oidTrueVal === undefined || oidTrueVal === null) oidTrueVal = max;
                                if (oidTrueVal === 'false') oidTrueVal = false;
                                if (oidTrueVal === 'true')  oidTrueVal = true;
                                var f = parseFloat(oidTrueVal);
                                if (f.toString() == oidTrueVal) oidTrueVal = f;
                                vis.setValue(oidTrue,  oidTrueVal);
                            } else {
                                if (oidFalseVal === undefined || oidFalseVal === null) oidFalseVal = min;
                                if (oidFalseVal === 'false') oidFalseVal = false;
                                if (oidFalseVal === 'true')  oidFalseVal = true;
                                var f = parseFloat(oidFalseVal);
                                if (f.toString() == oidFalseVal) oidFalseVal = f;
                                vis.setValue(oidFalse, oidFalseVal);
                            }
                        }

                        if (urlTrue) {
                            if (val) {
                                vis.conn.httpGet(urlTrue)
                            } else {
                                vis.conn.httpGet(urlFalse);
                            }
                        }

                        // show new state
                        if (!oid || oid == 'nothing_selected') {
                            var img = $(this).data('img-class');
                            if (val) {
                                if ($(this).data('as-button')) $(this).addClass('ui-state-active');
                                val = $(this).data('img-true');
                            } else {
                                val = $(this).data('img-false')
                                if ($(this).data('as-button')) $(this).removeClass('ui-state-active');
                            }
                            $(this).find('.' + img).attr('src', val);
                        }
                    } else {
                        var val = vis.states[oid + '.val'];
                        if ((min === undefined && (val === null || val === '' || val === undefined || val === false || val === 'false')) ||
                                (min !== undefined && min == val)) {
                            vis.setValue(oid, max !== undefined ? max : true);
                        } else
                        if ((max === undefined && (val === true || val === 'true')) ||
                                (max !== undefined && val == max))
                        {
                            vis.setValue(oid, min !== undefined ? min : false);
                        } else {
                            val = parseFloat(val);
                            if (min !== undefined && max !== undefined) {
                                if (val >= (max - min) / 2) {
                                    val = min;
                                } else {
                                    val = max;
                                }
                            } else {
                                if (val >= 0.5) {
                                    val = 0;
                                } else {
                                    val = 1;
                                }
                            }
                            vis.setValue(oid, val);
                        }
                    }
                });
            }
        },
        iframeRefresh: function (el, src, refreshInterval, refreshOnWakeUp, refreshOnViewChange) {
            if (!vis.editMode && src) {
                var $this = $(el).parent().find('iframe');
                refreshInterval = parseInt(refreshInterval, 10);

                if (refreshOnViewChange) {
                    var widgetView = vis.activeView;
                    vis.navChangeCallbacks.push(function (view) {
                        if (view == widgetView) {
                            $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                        }
                    });
                }
                if (refreshInterval > 0) {
                    var $this = $(el).parent().find('iframe');
                    refreshInterval = parseInt(refreshInterval, 10);
                    setInterval(function () {
                        if ($this.is(':visible') && $this.parents(':hidden').length == 0) {
                            $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                        }
                    }, refreshInterval);
                }
                if (refreshOnWakeUp) {
                    vis.onWakeUp(function () {
                        // TODO this does not work. :(
                        $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                    });
                }
            }
        },
        htmlRefresh: function (el, html, refreshInterval) {
            refreshInterval = parseInt(refreshInterval, 10);
            if (html && !vis.editMode && refreshInterval > 0) {
                var $this = $(el);
                refreshInterval = parseInt(refreshInterval, 10);
                setInterval(function () {
                    if ($this.is(':visible') && $this.parents(':hidden').length == 0) {
                        $this.html(html);
                    }
                }, refreshInterval);
            }
        },
        imgRefresh: function (el, src, refreshInterval, refreshOnWakeUp, refreshOnViewChange) {

            if (!vis.editMode && src) {
                var $this = $(el).parent().find('img');
                refreshInterval = parseInt(refreshInterval, 10);

                if (refreshOnViewChange) {
                    var widgetView = vis.activeView;
                    vis.navChangeCallbacks.push(function (view) {
                        if (view == widgetView) {
                            $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                        }
                    });
                }
                if (refreshInterval > 0) {
                    setInterval(function () {
                        if ($this.is(':visible') && $this.parents(':hidden').length == 0) {
                            $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                        }
                    }, refreshInterval);
                }
                if (refreshOnWakeUp) {
                    //console.log("refreshOnWakeUp!");
                    vis.onWakeUp(function () {
                        // TODO this does not work. :(
                        //console.log("wakeup refresh!");
                        $this.attr('src', src + ((src.indexOf('?') != -1) ? '&' : '?') + '_vis_refts=' + ((new Date()).getTime()));
                        //console.log($this.attr('src'));
                    });
                }
            }
        },
        showSvg: function (myClass, view, wid, oid, opacity, svg_false, svg_true, style, no_control) {
            if (!$('#' + wid).length) {
                return setTimeout(function () {
                    vis.binds.basic.showSvg(myClass, view, wid, oid, opacity, svg_false, svg_true, style, no_control);
                }, 100);
            };
            $('#' + wid).find('svg').remove();
            var str = vis.states.attr(oid + '.val');
            if (typeof str === 'string') str = str.toLowerCase();
            var val = parseFloat(str);
            var sText = '<svg version="1.1" style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg" data-oid="' + oid + '">';
            if (vis.editMode) {
                if (opacity === undefined || opacity === null || opacity === '') opacity = 1;

                if (parseFloat(opacity) < 0.2) opacity = 0.2;
            }
            if (val === 0 || str === 'false' || str === '0' || str === 'off' || str === false || str === null || str === undefined) {
                // try to analyse
                sText += svg_false;
            } else {
                sText += svg_true;
            }
            sText += '</svg>';
            $('#' + wid).find('.vis-widget-body').append (sText);

            if (style) $('#' + wid).css(style);

            function onSvgClick() {
                // Protect against two events
                if (vis.detectBounce(this)) return;

                var val = vis.states[oid + '.val'];
                if (val === null || val === '' || val === undefined || val === false || val === "false") {
                    vis.setValue(oid, true);
                } else if (val === true || val === "true") {
                    vis.setValue(oid, false);
                } else {
                    val = parseFloat(val);
                    if (val >= 0.5) {
                        val = 1;
                    } else {
                        val = 0;
                    }
                    vis.setValue(oid, 1 - val);
                }
            }

            if (oid) {
                vis.states.bind(oid + '.val', function (e, newVal) {
                    if (newVal === 'true'  || newVal === true)  newVal = 1;
                    if (newVal === 'false' || newVal === false || newVal === '0') newVal = 0;
                    var $svg = $('#' + wid).find('svg');
                    $svg.html(newVal ? svg_true : svg_false);
                    if (!vis.editMode && !no_control) {
                        $svg.children().unbind('click touchstart').on('click touchstart', onSvgClick);
                    } else if (vis.editMode){
                        $svg.children().unbind('click touchstart').on('click touchstart', function () {
                            vis.inspectWidgets([wid]);
                        });
                    }
                });
            }
            var $svg = $('#' + wid).find('svg');
            if (!vis.editMode && !no_control) {
                $svg.children().on('click touchstart', onSvgClick);
            } else if (vis.editMode){
                $svg.children().unbind('click touchstart').on('click touchstart', function () {
                    vis.inspectWidgets([wid]);
                });
            }
        },
        editNote: function (wid, max_width, min_width, min_height, oid) {
            if (vis.editMode) return;

            max_width  = max_width  ? parseInt(max_width,  10) : 400;
            min_width  = min_width  ? parseInt(min_width,  10) : 40;
            min_height = min_height ? parseInt(min_height, 10) : 15;

            var $this = $('#div_' + wid);
            $('body').append('<div id="dlg_' + wid + '" title="' + _('Edit note') + '">' +
            '<textarea style="resize: none; width:95%; height:92%" id="text_' + wid + '">' + $this.text().trim() + '</textarea></div>');

            var buttons = {};
            buttons[_('Clear')] = function () {
                $('#text_' + $(this).attr('data-wid')).val("");
            };

            buttons[_('Ok')] = function () {
                var dlg  = $(this);
                var oid  = dlg.attr('data-oid');
                var wid  = dlg.attr('data-wid');
                var text = $('#text_' + wid).val();
                text = text.replace('\n', '<br>\n');

                if (!oid) $('#div_' + wid).html(text);
                /*if (!text) {
                 $('#' + wid).css({width: min_width, height: min_height});
                 }
                 else {
                 $('#' + wid).css({width: max_width, height: 'auto'});
                 }*/

                if (oid) vis.setValue(oid, text);

                dlg.dialog('close');
                dlg.remove();
            };

            buttons[_('Cancel')] = function () {
                $(this).dialog('close');
                $(this).remove();
            };

            $('#dlg_' + wid).attr('data-oid', oid).attr('data-wid', wid).dialog({
                width:   500,
                height:  300,
                modal:   true,
                buttons: buttons
            });
        },
        formatFloat: function (data) {
            var val;
            if (vis.editMode && data.attr('test_html') !== undefined && data.attr('test_html') !== '') {
                val = parseFloat(data.attr('test_html'));
            } else {
                val = parseFloat(vis.states.attr(data.oid + '.val'));
            }
            if (data.factor !== undefined && data.factor != '') val = val * parseFloat(data.factor);
            if (data.digits !== undefined && data.digits != '') val = val.toFixed(parseFloat(data.digits, 10));

            if (data.attr('is_comma')) {
                val = '' + val;
                val = val.replace('.', ',');
            }

            return val;
        },
        extractWidth: function (css, multiplier) {
            // extract from "2px solid #aabbcc" => 2px
            var m = css.match(/([0-9])+(px|em)?/);
            if (m) {
                if (m[1] && m[2]) {
                    return parseInt(m[1], 10) * (multiplier || 1) + m[2];
                } else {
                    return parseInt(m[1], 10) * (multiplier || 1);
                }
            }
        },
        getCalc: function (data, val) {
            var min = (data.min || data.min === 0) ? parseFloat(data.min) : 0;
            var max = (data.max || data.max === 0) ? parseFloat(data.max) : 100;
            var val = parseFloat(vis.states.attr(data.oid + '.val')) || 0;
            val = (val - min) / (max - min);
            return (data.border) ? ("calc(" + Math.round(val * 100) + "% - " + vis.binds.basic.extractWidth(data.border, 2) + ")") : (Math.round(val * 100) + "%");
        },
        formatDate: function (dateObj, isSeconds, format) {
            if (typeof isSeconds != 'boolean') {
                format = isSeconds;
                isSeconds = false;
            }

            if (format == 'auto') format = (vis.dateFormat || 'DD.MM.YYYY') + ' hh:mm:ss';

            var format = format || vis.dateFormat || 'DD.MM.YYYY';

            if (!dateObj) return '';
            var text = typeof dateObj;
            if (text == 'string') {
                var pos = dateObj.indexOf('.');
                if (pos != -1) dateObj = dateObj.substring(0, pos);
                return dateObj;
            }
            if (text != 'object') dateObj = isSeconds ? new Date(dateObj * 1000) : new Date(dateObj);

            var v;

            // Year
            if (format.indexOf('YYYY') != -1 || format.indexOf('JJJJ') != -1 || format.indexOf('ГГГГ') != -1) {
                v = dateObj.getFullYear();
                format = format.replace('YYYY', v);
                format = format.replace('JJJJ', v);
                format = format.replace('ГГГГ', v);
            } else if (format.indexOf('YY') != -1 || format.indexOf('JJ') != -1 || format.indexOf('ГГ') != -1) {
                v = dateObj.getFullYear() % 100;
                format = format.replace('YY', v);
                format = format.replace('JJ', v);
                format = format.replace('ГГ', v);
            }
            // Month
            if (format.indexOf('MM') != -1 || format.indexOf('ММ') != -1) {
                v =  dateObj.getMonth() + 1;
                if (v < 10) v = '0' + v;
                format = format.replace('MM', v);
                format = format.replace('ММ', v);
            } else if (format.indexOf('M') != -1 || format.indexOf('М') != -1) {
                v =  dateObj.getMonth() + 1;
                format = format.replace('M', v);
                format = format.replace('М', v);
            }

            // Day
            if (format.indexOf('DD') != -1 || format.indexOf('TT') != -1 || format.indexOf('ДД') != -1) {
                v =  dateObj.getDate();
                if (v < 10) v = '0' + v;
                format = format.replace('DD', v);
                format = format.replace('TT', v);
                format = format.replace('ДД', v);
            } else if (format.indexOf('D') != -1 || format.indexOf('TT') != -1 || format.indexOf('Д') != -1) {
                v =  dateObj.getDate();
                format = format.replace('D', v);
                format = format.replace('T', v);
                format = format.replace('Д', v);
            }

            // hours
            if (format.indexOf('hh') != -1 || format.indexOf('SS') != -1 || format.indexOf('чч') != -1) {
                v =  dateObj.getHours();
                if (v < 10) v = '0' + v;
                format = format.replace('hh', v);
                format = format.replace('SS', v);
                format = format.replace('чч', v);
            } else if (format.indexOf('h') != -1 || format.indexOf('S') != -1 || format.indexOf('ч') != -1) {
                v =  dateObj.getHours();
                format = format.replace('h', v);
                format = format.replace('S', v);
                format = format.replace('ч', v);
            }

            // minutes
            if (format.indexOf('mm') != -1 || format.indexOf('мм') != -1) {
                v =  dateObj.getMinutes();
                if (v < 10) v = '0' + v;
                format = format.replace('mm', v);
                format = format.replace('мм', v);
            } else if (format.indexOf('m') != -1 ||  format.indexOf('м') != -1) {
                v =  dateObj.getMinutes();
                format = format.replace('m', v);
                format = format.replace('v', v);
            }

            // seconds
            if (format.indexOf('ss') != -1 || format.indexOf('сс') != -1) {
                v =  dateObj.getSeconds();
                if (v < 10) v = '0' + v;
                format = format.replace('ss', v);
                format = format.replace('cc', v);
            } else if (format.indexOf('s') != -1 || format.indexOf('с') != -1) {
                v =  dateObj.getHours();
                format = format.replace('s', v);
                format = format.replace('с', v);
            }
            return format;
        },
        detectScreen: function (el) {
            if (vis.navChangeCallbacks.indexOf(vis.binds.basic.detectScreen) == -1) {
                vis.navChangeCallbacks.push(vis.binds.basic.detectScreen);
            }

            setTimeout(function () {
                $(window).bind('resize', function () {
                    if (vis.editMode) {
                        $('.vis-resolution-width').html(vis.views[vis.activeView].settings.sizex  || $(window).width());
                        $('.vis-resolution-height').html(vis.views[vis.activeView].settings.sizey || $(window).height());
                        $('.vis-resolution-default-view').html(vis.findNearestResolution(vis.views[vis.activeView].settings.sizex || $(window).width(), vis.views[vis.activeView].settings.sizey || $(window).height()));
                    } else {
                        $('.vis-resolution-width').html($(window).width());
                        $('.vis-resolution-height').html($(window).height());
                        $('.vis-resolution-default-view').html(vis.findNearestResolution());
                    }
                });
                if (vis.editMode) {
                    $('.vis-resolution-width').html(vis.views[vis.activeView].settings.sizex  || $(window).width());
                    $('.vis-resolution-height').html(vis.views[vis.activeView].settings.sizey || $(window).height());
                    $('.vis-resolution-default-view').html(vis.findNearestResolution(vis.views[vis.activeView].settings.sizex || $(window).width(), vis.views[vis.activeView].settings.sizey || $(window).height()));
                } else {
                    $('.vis-resolution-width').html($(window).width());
                    $('.vis-resolution-height').html($(window).height());
                    $('.vis-resolution-default-view').html(vis.findNearestResolution());
                }
            }, 100);
        },
        isFalse: function (val, min, max) {
            if (min !== undefined && min !== null && min !== '') {
                if (max !== undefined && max !== null && max !== '') {
                    return val != max;
                } else {
                    return val == min;
                }
            }
            if (val === undefined || val === null || val === false || val === 'false' || val === 'FALSE' || val === 'False' || val === 'OFF' || val === 'Off' || val === 'off' || val === '') return true;
            if (val === '0' || val === 0) return true;
            var f = parseFloat(val);
            if (f.toString() !== 'NaN') return !f;
            return false;
        },
        circlePoints: function (radius, num, step) {
            var isArray = false;
            if (step === true) {
                isArray = true;
                step = 0;
            }
            step = step || 360 / num;
            var points = [];
            var text = '';
            for (var i = 0; i < num; i++) {
                var point = {x:Math.sin(Math.PI / 180 * (i * step - 180)) * radius, y:Math.cos(Math.PI / 180 * (i * step - 180)) * radius};
                points.push(point);
                text += point.x + ', ' + point.y + ' ';
            }
            if (isArray) return points;
            return text;
        },
    };

    $(document).mouseup(function () {
        if (vis.binds.basic.pressed) {
            clearInterval(vis.binds.basic.pressed);
        }
    });

    if (vis.editMode) {
        vis.binds.basic.onOrientation = function (widgetID, view, newId, attr, isCss) {
            var data  = vis.views[view].widgets[widgetID].data;
            var style = vis.views[view].widgets[widgetID].style;
            var h = parseInt(style.height, 10);
            var w = parseInt(style.width, 10);

            if (data[attr] === 'vertical') {
                if (h < w) {
                    var t = style.height;
                    style.height = style.width;
                    style.width = t;
                    setTimeout(function () {
                        vis.showWidgetHelper(widgetID, true);
                    }, 0);
                    return ['width', 'height'];
                }
            } else {
                if (w < h) {
                    var t = style.height;
                    style.height = style.width;
                    style.width = t;
                    setTimeout(function () {
                        vis.showWidgetHelper(widgetID, true);
                    }, 0);
                    return ['width', 'height'];
                }
            }
        };
    }
</script>

<!-- Basic Widgets -->

<script id="tplHtml" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="static" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_HTML.png&quot;></img>" data-vis-name="HTML" data-vis-attrs="html/text;refreshInterval[0]/slider,0,180000,100">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" <%= (el) -> vis.binds.basic.htmlRefresh(el, this.data.attr('html'), data.attr("refreshInterval")) %>>
            <%== this.data.attr('html') %>
        </div>
    </div>
</script>

<script id="tplShapes" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="static" data-vis-name="Svg shape" data-vis-prev="<div id=&quot;prev_tplShapes&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 56px; height: 60px; left: 502px; top: 174px; position: absolute;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 100 100&quot; style=&quot;display: block; width: 100%; height: 100%; fill: rgb(0, 179, 172); stroke: rgb(0, 156, 179); stroke-width: 6px;&quot;> <circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;47&quot;></circle> </svg> </div> </div></div>" data-vis-attrs="svgType[circle]/select,line,triangle,square,pentagone,hexagone,octagone,circle,star,arrow;strokeColor[#009cb3]/color;fill[#00b3ac]/color;strokeWidth[5]/slider,0,100,1;rotate/slider,0,360,1;scaleWidth[1]/slider,0,1,0.1;scaleHeight[1]/slider,0,1,0.1">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 100px; height: 100px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="-50 -50 100 100" style="display: block;width:100%; height:100%;fill:<%== this.data.attr('fill') %>;stroke:<%== this.data.attr('strokeColor')%>;stroke-width: <%== this.data.attr('strokeWidth') %>">
                <%
                var svg = '';
                var rotate      = parseFloat(this.data.attr('rotate')) || 0;
                var scaleWidth  = parseFloat(this.data.attr('scaleWidth')) || 1;
                var scaleHeight = parseFloat(this.data.attr('scaleHeight')) || 1;
                var strokeWidth = parseInt(this.data.attr('strokeWidth'), 10) || 0;

                if (this.data.svgType == 'triangle') {
                    svg = '<polygon transform="rotate(' + rotate + ')  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="' + vis.binds.basic.circlePoints(50 - strokeWidth, 3) + '"/>';
                } else if (this.data.svgType == 'line') {
                    svg = '<line  vector-effect="non-scaling-stroke"  transform="rotate(' + rotate + ')" x1="-50" y1="0" x2="50" y2="0"/>';
                } else if (this.data.svgType == 'circle') {
                    svg = '<circle transform="scale(' + scaleWidth + ', ' + scaleHeight + ') rotate(' + rotate + ')" cx="0" cy="0" r="' + (50 - parseInt(strokeWidth, 10) / 2) + '" />';
                } else if (this.data.svgType == 'pentagone') {
                    svg = '<polygon transform="rotate(' + rotate + ')  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="' + vis.binds.basic.circlePoints(50 - strokeWidth, 5) + '"/>';
                } else if (this.data.svgType == 'square') {
                    svg = '<polygon transform="rotate(' + rotate + ')  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="' + vis.binds.basic.circlePoints(50 - strokeWidth, 4) + '"/>';
                } else if (this.data.svgType == 'hexagone') {
                    svg = '<polygon transform="rotate(' + rotate + ')  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="' + vis.binds.basic.circlePoints(50 - strokeWidth, 6) + '"/>';
                } else if (this.data.svgType == 'octagone') {
                    svg = '<polygon transform="rotate(' + rotate + ')  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="' + vis.binds.basic.circlePoints(50 - strokeWidth, 8) + '"/>';
                } else if (this.data.svgType == 'star') {
                    svg = '<polygon transform="rotate(' + rotate + ')  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="' + vis.binds.basic.circlePoints(50 - strokeWidth, 5, 144) + '"/>';
                } else if (this.data.svgType == 'arrow') {
                    var points = vis.binds.basic.circlePoints(50 - strokeWidth * 4, 3, true);
                    var text = '';
                    for (var p = 0; p < points.length; p++) {
                        text += points.x + ',' + points.y;
                        if (points.length == p - 2) {
                            text += '0,0';
                        }
                    }
                    svg = '<polygon transform="rotate(' + rotate + ') translate(0,10)  scale(' + scaleWidth + ', ' + scaleHeight + ') " ' +
                        'points="0, -50 -43.3, 25 0,0 43.3, 25"/>';
                }
                %>
                <%== svg %>
                </g>
            </svg>
        </div>
    </div>
</script>

<script id="tplIFrame" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="static" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_iFrame.png&quot;></img>" data-vis-name="iFrame" data-vis-attrs="src;refreshInterval[0]/slider,0,180000,100;;refreshOnWakeUp[false]/checkbox;refreshOnViewChange[false]/checkbox;scrollX[false]/checkbox;scrollY[false]/checkbox;seamless[true]/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 600px; height: 320px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <% if (vis.editMode) { %>
            <div class="editmode-helper" />
            <% } %>
            <iframe src="<%= this.data.attr('src') %>" style="position: absolute; border: 0; padding: 0; margin: 0; width: 100%; height:100%;<%= this.data.attr('scrollX') == true ? 'overflow-x: scroll;' : 'overflow-x: hidden;' %><%= this.data.attr('scrollY') == true ? 'overflow-y: scroll;' : 'overflow-y: hidden;' %>" <%= this.data.attr('seamless') == true ? 'seamless' : '' %>></iframe>
            <div <%= (el) -> vis.binds.basic.iframeRefresh(el, data.attr('src'), data.attr('refreshInterval'), data.attr('refreshOnWakeUp'), data.attr('refreshOnViewChange')) %>></div>
        </div>
    </div>
</script>

<script id="tplImage" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="static" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_Image.png&quot;></img>" data-vis-name="Image" data-vis-attrs="src/image;stretch/checkbox;refreshInterval[0]/slider,0,180000,100;refreshOnWakeUp[false]/checkbox;refreshOnViewChange[false]/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <% if (vis.editMode) { %>
                <div class="editmode-helper" />
            <% } %>
            <img style="position:absolute; width:100%;<%= this.data.attr('stretch') ? 'height:100%' : '' %>" <%= this.data.attr('src') ? 'src="' + this.data.attr('src') + '"' : '' %> />
            <div <%= (el) -> vis.binds.basic.imgRefresh(el, data.attr('src'), data.attr('refreshInterval'), data.attr('refreshOnWakeUp'), data.attr('refreshOnViewChange')) %> />
        </div>
    </div>
</script>

<script id="tplLink" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplLink&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee vis-widget-lock&quot; style=&quot;height: 22px&quot; > <div class=&quot;vis-widget-prev-body&quot;> <a style=&quot;text-decoration:none;width:100%;height:100%&quot;><div style=&quot;width:100%;height:100%;text-algin:center&quot;>www.ioBroker.com</div></a> </div> </div>" data-vis-set="basic" data-vis-type="static" data-vis-name="link" data-vis-attrs="html;href;target/auto,,_blank,_self,_parent,_top;alt">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px; " id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <a href="<%== this.data.attr('href') %>" target="<%== this.data.attr("target") %>" alt="<%== this.data.attr("alt") %>" style="text-decoration:none;width:100%;height:100%"><div style="width:100%;height:100%"><%== this.data.attr("html") %></div></a>
        </div>
    </div>
</script>

<script id="tplFrame" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplFrame&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock&quot; style=&quot;overflow: visible; width: 90px; height: 90px; border: 3px solid rgb(0, 0, 255); left: 90px; top: 222px;&quot; > 	 <div style=&quot;width: 100%; height: 0px; background-color: black;&quot;>		</div> <div style=&quot;position: absolute; top: 1px; left: 29px; color: rgb(0, 0, 255);&quot;>Border</div> 		 </div>" data-vis-set="basic" data-vis-type="static" data-vis-name="Border" data-vis-attrs="title['Title'];title_font;title_color[black]/color;title_back/color;title_top[-10]/slider,-20,20,1;title_left[15]/slider,-20,30,1;header_height[0]/slider,0,100,1;header_color[black]/color">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible;width:50px;height:50px;border:1px solid #888" id="<%= this.data.attr('wid') %>" >
        <% if (this.data.attr('header_height')) { %>
	    <div style="width:100%;height:<%= this.data.attr('header_height') %>px;background-color:<%= this.data.attr('header_color') %>">
		<% } %>
        <div style="position: absolute;top:<%= this.data.attr('title_top') %>px;left:<%= this.data.attr('title_left') %>px;color:<%== this.data.attr('title_color') %>;background:<%== this.data.attr('title_back') %>;font:<%== this.data.attr('title_font') %>"><%== this.data.attr('title') %></div>
        <% if (this.data.attr('header_height')) { %>
        </div>
		<% } %>
    </div>
</script>

<script id="tplStatefulIFrame8" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_StatefulIFrame8.png&quot;></img>" data-vis-type="stateful" data-vis-name="iFrame 8" data-vis-attrs="oid;refreshInterval[0]/slider,0,180000,100;count[1]/number;group.frames;src_(0-count)">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 600px; height: 320px;" id="<%= this.data.attr('wid') %>">
        <% if (vis.editMode) { %>
            <div class="editmode-helper"/>
        <% } %>
        <div class="vis-widget-body">
            <% if (vis.editMode) { %>
                <div class="editmode-helper"/>
            <% } %>
            <%
                var srcArr = [];
                var i = 0;
                while(data.attr("src_" + i) !== undefined) {
                    srcArr.push(data.attr("src_" + i));
                    i++;
                }
            %>
            <iframe class="vis-widget-element" data-oid="<%= this.data.attr('oid') %>" src="<%== vis.binds.stateful.value(srcArr, data.attr('oid')) %>" style="position: absolute; border: 0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <div <%= (el) -> vis.binds.stateful.iframe(el, srcArr, data.attr("refreshInterval")) %> />
        </div>
    </div>
</script>

<!-- basic Container -->
<script id="tplContainerView" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ContainerView.png&quot;></img>" data-vis-type="container" data-vis-name="view in widget" data-vis-attrs="contains_view/views">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:400px; height: 270px;" id="<%= this.data.attr('wid') %>">
        <% if (vis.editMode) { %>
            <div class="editmode-helper"></div>
        <% } %>
        <div data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body vis-view-container">
        </div>
    </div>
</script>

<!-- Stateful Widgets -->
<script id="tplStatefulContainerView8" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_StatefulContainerView8.png&quot;></img>" data-vis-type="stateful,container" data-vis-name="view in widget 8" data-vis-attrs="oid;persistent/checkbox;count[1]/number;group.views;contains_view_(0-count)/views">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:400px; height: 270px;" id="<%= this.data.attr('wid') %>">
        <% if (vis.editMode) { %>
            <div class="editmode-helper" />
        <% } %>
        <%
            var viewArr = [];
            var i = 0;
            while(data.attr("contains_view_" + i) !== undefined) {
                viewArr.push(data.attr("contains_view_" + i));
                i++;
            }
        %>
        <div class="vis-widget-body">
            <div class="vis-view-container" data-oid="<%= data.attr('oid') %>" data-vis-contains="<%= vis.binds.stateful.value(viewArr, data.attr('oid')) %>" <%= (el) -> vis.binds.stateful.view(el, viewArr, data.attr("persistent")) %> />
        </div>
        <!--div data-vis-contains="<%= vis.binds.stateful.value(viewArr, data.attr('oid')) %>" class="vis-widget-body">
            <div class="vis-view-container" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> dui.binds.stateful.view(el, viewArr, data.attr("persistent")) %> />
        </div-->
    </div>
</script>

<!-- TODO
<script type="text/ejs" id="tplStatefulIFrame8Persistent" class="vis-tpl" data-vis-set="basic" data-vis-name="stateful - iFrame 8 (persistent)" data-vis-attrs="oid;refreshInterval;src_(0-1)">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 600px; height: 320px;" id="<%= this.data.attr('wid') %>">
            <% if (vis.editMode) { %>
                <div class="editmode-helper" />
            <% } %>
          <div class="vis-widget-body">
            <% if (vis.editMode) { %>
                <div class="editmode-helper" />
            <% } %>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_0') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_1') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_2') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_3') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_4') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_5') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_6') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <iframe class="vis-widget-element" src="<%= this.data.attr('src_7') %>" style="position: absolute; border:0; padding:0; margin:0; width: 100%; height:100%;"></iframe>
            <div <%= (el) -> vis.binds.stateful.iframe(el, [data.attr("src_0"), data.attr("src_1"), data.attr("src_2"), data.attr("src_3"), data.attr("src_4"), data.attr("src_5"), data.attr("src_6"), data.attr("src_7"]), data.attr("refreshInterval")) %> />
        </div>
    </div>
</script>
-->

<script id="tplStatefulImage8" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_StatefulImage.png&quot;></img>" data-vis-type="stateful" data-vis-name="Image 8" data-vis-attrs="oid;refreshInterval[0]/slider,0,180000,100;count[1]/number;group.images;src_(0-count)/image">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px;" id="<%= this.data.attr('wid') %>">
        <% if (vis.editMode) { %>
            <div class="editmode-helper" />
        <% } %>
        <div class="vis-widget-body">
            <% if (vis.editMode) { %>
                <div class="editmode-helper" />
            <% } %>
            <%
                var srcArr = [];
                var i = 0;
                while(data.attr("src_" + i) !== undefined) {
                    srcArr.push(this.data.attr("src_" + i));
                    i++;
                }
            %>
            <img class="vis-widget-element" data-oid="<%= this.data.attr('oid') %>" style="position:absolute; width:100%;" src="<%== vis.binds.stateful.value(srcArr, this.data.attr('oid')) %>" />
            <div <%= (el) -> vis.binds.stateful.image(el, srcArr, data.attr('refreshInterval')) %> />
        </div>
    </div>
</script>

<script id="tplHtmlNav" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="static,navigation" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_HTMLnavigation.png&quot;></img>" data-vis-name="HTML navigation" data-vis-attrs="html;nav_view;sync/checkbox;body-background/color;group.effects;hide_effect/effect;hide_duration/slider,0,10000,100;hide_options/effect-options;show_effect/effect;show_duration/slider,0,10000,100;show_options/effect-options">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px; " id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.basic.navigation(el, {nav_view: data.attr('nav_view'), hideOptions: {effect: data.attr('hide_effect'), options: (data.attr('hide_options') ? data.attr('hide_options') : {}),duration:data.attr('hide_duration')}, showOptions: {effect:data.attr('show_effect'), options: (data.attr('show_options') ? data.attr('show_options') : {}), duration: data.attr('show_duration')}, sync: data.attr('sync'), background: data.attr('body-background')}) %>>
        <div class="vis-widget-body">
            <%== this.data.attr('html') %>
        </div>
    </div>
</script>

<script id="tplFilterDropdown" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplFilterDropdown&quot; style=&quot;text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev vis-widget-lock&quot; style=&quot;width: 60px; height: 23px;&quot; > <div class=&quot;vis-widget-prev-body&quot;> <select id=&quot;&quot; name=&quot;&quot;> <option value=&quot;&quot; selected=&quot;selected&quot;>all</option> <option value=&quot;filter&quot;>filter</option></select> </div> </div>" data-vis-set="basic" data-vis-type="filter" data-vis-name="filter - dropdown" data-vis-attrs="filters;group.effects;hide_effect/effect;hide_duration/slider,0,10000,100;show_effect/effect;show_duration/slider,0,10000,100">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left:0px; width: 200px; height: 40px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.basic.filterDropdown(el, data.attr('filters'), data.attr('hide_effect'), data.attr('hide_duration'), data.attr('show_effect'),data.attr('show_duration')) %>>
        <div class="vis-widget-body">
            <select id="" name="">
                <option value="">all</option>
            </select>
        </div>
    </div>
</script>

<script id="tplValueFloat" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val" data-vis-prev="<div id=&quot;prev_tplValueFloat&quot; style=&quot;text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 74px; height: 18px; text-align: center;color:red; font-weight:bold&quot; > <div class=&quot;vis-widget-prev-body&quot;> <div>52,57 MB</div> </div> </div></div>" data-vis-name="Number" data-vis-attrs="oid;html_prepend;html_append_singular;html_append_plural;group.extended;digits;is_comma[true]/checkbox;factor[1];oid-quality;class_true;class_false;test_html">
    <div class="vis-widget <%== (vis.states.attr(this.data['oid-quality'] + ".val") == "true" ||  vis.states.attr(this.data['oid-quality'] + ".val") === true) ? this.data.attr('class_true') : this.data.attr('class_false') %> <%== this.data.attr('class') %>" style="top:0px; left:0px; width:60px; height:18px" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><%= vis.binds.basic.formatFloat(this.data) %><%== (parseFloat(vis.binds.basic.formatFloat(this.data)) == 1 ? this.data.attr("html_append_singular") : this.data.attr("html_append_plural")) %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueString" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val" data-vis-name="String" data-vis-prev="<div id=&quot;tplValueString&quot; style=&quot;text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 74px; height: 18px; text-align: center;color:blue; font-weight:bold&quot; > <div class=&quot;vis-widget-prev-body&quot;> <div>Text</div> </div> </div></div>" data-vis-attrs="oid;html_prepend;html_append;test_html">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 50px; height: 20px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') ? ((this.data.attr('oid').indexOf('"') != -1) ? '' : this.data.attr('oid')) : this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><%= (vis.editMode && this.data.attr('test_html')) ? this.data.attr('test_html') : this.data.attr('oid') ? ((this.data.attr('oid').indexOf('"') != -1) ? this.data.oid.substring(1, this.data.oid.length - 1) : (vis.states.attr(this.data.oid + ".val"))) : (vis.states.attr(this.data.oid + ".val")) %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueStringRaw" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val" data-vis-prev="<div id=&quot;tplValueStringRaw&quot; style=&quot;text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 90px; height: 18px; text-align: center;color:#8B008B; font-weight:bold&quot; > <div class=&quot;vis-widget-prev-body&quot;> <div><xmp><div>Text</div></xmp></div> </div> </div></div>" data-vis-name="String (unescaped)" data-vis-attrs="oid;html_prepend;html_append;test_html">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 50px; height: 20px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><%== (vis.editMode && this.data.attr('test_html')) ? this.data.attr('test_html') : vis.states.attr(this.data.oid + ".val") %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueTimestamp" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val,timestamp" data-vis-name="Timestamp" data-vis-prev="<div id=&quot;prev_tplValueTimestamp&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 90px; height: 25px;text-align:center;color:#00008B&quot; > <div class=&quot;vis-widget-prev-body&quot;> <div> 2015-02-22 19:30:46 </div> </div> </div></div>" data-vis-attrs="oid;is_milliseconds/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY.MM.DD,DD.MM.YYYY,YYYY/MM/DD hh:mm:ss,YYYY/MM/DD,hh:mm:ss;html_prepend;html_append;test_html">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 50px; height: 20px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><%== (vis.editMode && this.data.attr('test_html')) ? this.data.attr('test_html') : vis.binds.basic.formatDate(vis.states.attr(this.data.oid + ".ts"), !this.data.attr("is_milliseconds"), this.data.attr("format_date")) %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueLastchange" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val,timestamp" data-vis-prev="<div id=&quot;prev_tplValueLastchange&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 90px; height: 25px;text-align:center;color:#006400&quot; > <div class=&quot;vis-widget-prev-body&quot;> <div> 2015-02-22 19:30:46 </div> </div> </div></div>" data-vis-name="Last change Timestamp" data-vis-attrs="oid;is_milliseconds/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY.MM.DD,DD.MM.YYYY,YYYY/MM/DD hh:mm:ss,YYYY/MM/DD,hh:mm:ss;html_prepend;html_append;test_html">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 50px; height: 20px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><%== (vis.editMode && this.data.attr('test_html')) ? this.data.attr('test_html') : vis.binds.basic.formatDate(vis.states.attr(this.data.oid + ".lc"), !this.data.attr("is_milliseconds"), this.data.attr("format_date")) %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueStringImg" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ValueStringImg.png&quot;></img>" data-vis-type="val" data-vis-name="String img src" data-vis-attrs="oid;html_prepend;html_append;refreshInterval[0]/slider,0,180000,100">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left:0px; width:60px; height: 40px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %>
                <img src="<%= vis.states.attr(this.data.oid + '.val') || '' %>" width="100%"/>
                 <div <%= (el) -> vis.binds.basic.imgRefresh(el, vis.states.attr(data.oid + ".val" ), data.attr("refreshInterval")) %> />
                <%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueList" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ValueList.png&quot;></img>" data-vis-type="val" data-vis-name="ValueList Text" data-vis-attrs="oid;html_prepend;html_append;valuelist;test_list/nselect,,0,1,2,3,4,5,6,7,8,9,10,11,12">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px;left:0px;width:60px;height:20px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><% var list = (data.valuelist ? data.valuelist.split(';') : []); %><%= list[(vis.editMode && (this.data.attr('test_list') || this.data.attr('test_list') == '0')) ? parseInt(this.data.attr('test_list')) : parseInt(vis.states.attr(this.data.oid + ".val"), 10)] %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueListHtml" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ValueListHtml.png&quot;></img>" data-vis-type="val" data-vis-name="ValueList HTML" data-vis-attrs="oid;html_prepend;html_append;valuelist;test_list/nselect,,0,1,2,3,4,5,6,7,8,9,10,11,12">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px;left:0px;width:60px;height:20px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== this.data.attr("html_prepend") %><% var list = (data.valuelist ? data.valuelist.split(';') : []); %><%== list[(vis.editMode && (this.data.attr('test_list') || this.data.attr('test_list') == '0')) ? parseInt(this.data.attr('test_list')) : parseInt(vis.states.attr(this.data.oid + ".val"), 10)] %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueListHtml8" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ValueListHtml8.png&quot;></img>" data-vis-type="val" data-vis-name="ValueList HTML Style" data-vis-attrs="oid;html_prepend;html_append;count[2]/number,0,10,1;value(0-count);style(0-count);test_list/nselect,,0,1,2,3,4,5,6,7,8,9,10,11,12">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 100px; height: 30px;" id="<%= this.data.attr('wid') %>">
        <%
            var slist = [];
            var i = 0;
            while (data['style' + i] !== undefined) {
                slist[i] = data['style' + i]; i++;
            }
        %>
        <div class="vis-widget-body" style="<%== slist[(vis.editMode && (this.data.attr('test_list') || this.data.attr('test_list') == '0')) ? parseInt(this.data.attr('test_list')) : (parseInt((vis.states.attr(this.data.oid + ".val") == true ? 1 : (vis.states.attr(this.data.oid + ".val") == false ? 0 : vis.states.attr(this.data.oid + ".val"))), 10))] %>">
            <div data-oid="<%= this.data.attr('oid') %>">
               <%== this.data.attr("html_prepend") %><%
                   var list = [];
                   var j = 0;
                   while (data['value' + j] !== undefined) {
                        list[j] = data['value' + j]; j++;
                   }
                   %><%== list[(vis.editMode && (this.data.attr('test_list') || this.data.attr('test_list') == '0')) ? parseInt(this.data.attr('test_list')) : (parseInt((vis.states.attr(this.data.oid + ".val") == true ? 1 : (vis.states.attr(this.data.oid + ".val") == false ? 0 : vis.states.attr(this.data.oid + ".val"))), 10))] %><%== this.data.attr("html_append") %>
            </div>
        </div>
    </div>
</script>

<script id="tplValueBool" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ValueBool.png&quot;></img>" data-vis-type="val" data-vis-name="Bool HTML" data-vis-attrs="oid;html_prepend;html_append;html_false;html_true">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:76px; height:76px;" id="<%= this.data.attr('wid') %>"  data-oid="<%= this.data.attr('oid') %>" >
        <div class="vis-widget-body">
            <%== this.data.attr("html_prepend") %>
            <% if (vis.binds.basic.isFalse(vis.states.attr(this.data.oid + ".val"), this.data.attr('min'), this.data.attr('max'))) { %>
                <%== this.data.attr("html_false") %>
            <% } else { %>
                <%== this.data.attr("html_true") %>
            <% } %>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplAckBool" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_AckBool.png&quot;></img>" data-vis-type="val" data-vis-name="AckFlag HTML" data-vis-attrs="oid;html_prepend;html_append;html_false;html_true">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:76px; height:76px;" id="<%= this.data.attr('wid') %>"  data-oid="<%= this.data.attr('oid') %>" >
        <div class="vis-widget-body">
            <%== this.data.attr("html_prepend") %>
            <%
            var str = vis.states.attr(this.data.oid + ".ack");
            var val = parseFloat(str);
            var state;
            if (str === false || str === "false" || val == 0) {
            %>
            <%== this.data.attr("html_false") %>
            <% } else { %>
            <%== this.data.attr("html_true") %>
            <% } %>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplValueBoolCheckbox" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplValueBoolCheckbox&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock ui-selectee ui-selected&quot; style=&quot;left: 232px; top: 312px;&quot; > <div class=&quot;vis-widget-prev-body&quot;><input type=&quot;checkbox&quot;></div> </div>" data-vis-set="basic" data-vis-type="ctrl" data-vis-name="Bool Checkbox" data-vis-attrs="oid;html_prepend;html_append">
    <div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>" >
        <div class="vis-widget-body">
			<%== this.data.attr("html_prepend") %>
			<input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el) %>/>
			<%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplValueInput" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplValueInput&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 47px; height: 23px;&quot; > <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;text&quot; value=&quot;abc&quot; style=&quot;width: calc(100% - 5px);&quot;> </div> </div></div>" data-vis-set="basic" data-vis-type="ctrl" data-vis-update-style="true" data-vis-name="Input val" data-vis-attrs="oid;html_prepend;html_append;numeric/checkbox;min;max;autoSet/checkbox;readOnly/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="background: white; color: black; border: 2px inset" id="<%= this.data.attr('wid') %>" >
        <div class="vis-widget-body">
			<%== this.data.attr("html_prepend") %>
			<input type="text" <%= (this.data.attr('readOnly') === true || this.data.attr('readOnly') === 'true') ? 'readonly' : '' %> data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.input(el, this.data) %> style="width: calc(100% - 5px);"/>
			<%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplValueBoolSelect" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<div id=&quot;prev_tplValueBoolSelect&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 61px; height: 20px; position: absolute;&quot;><div class=&quot;vis-widget-prev-body&quot; style=&quot;overflow:false&quot;><select><option value=&quot;1&quot; selected>true</option></select></div></div></div>" data-vis-type="ctrl" data-vis-name="Bool Select" data-vis-attrs="oid;html_prepend;html_append;text_true;text_false">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:false" id="<%= this.data.attr('wid') %>" >
        <div class="vis-widget-body"  style="overflow:false">
			<%== this.data.attr("html_prepend") %>
			<select id="<%= this.data.attr('wid') %>_select" data-oid="<%= this.data.attr('oid') %>">
				<option value="0" selected='selected'><%= this.data.attr('text_false') %></option>
				<option value="1"><%= this.data.attr('text_true') %></option>
			</select>
			<div <%= (el) -> vis.binds.basic.select(el) %>></div>
			<%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplValueBoolCtrl" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_ValueBoolCtrl.png&quot;></img>" data-vis-type="ctrl" data-vis-name="Bool HTML" data-vis-attrs="oid;min;max;html_prepend;html_append;html_false;html_true;" data-vis-attrs1="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;">
    <div
        class="vis-widget <%== this.data.attr('class') %>"
        style="width:76px; height:76px;"
        id="<%= this.data.attr('wid') %>"
        data-oid="<%= this.data.attr('oid') %>"
        data-min="<%= this.data.attr('min') %>"
        data-max="<%= this.data.attr('max') %>"
        data-as-button="<%= this.data.attr('asButton') %>"
        data-url-true="<%=  this.data.attr('urlTrue') %>"
        data-url-false="<%= this.data.attr('urlFalse') %>"
        data-oid-true="<%=  this.data.attr('oidTrue') %>"
        data-oid-false="<%= this.data.attr('oidFalse') %>"
        <%= (el) -> vis.binds.basic.toggle(el) %>>
        <div class="vis-widget-body">
			<%== this.data.attr("html_prepend") %>
			<% if (vis.binds.basic.isFalse(vis.states.attr(this.data.oid + ".val"), this.data.attr('min'), this.data.attr('max'))) { %>
			    <%== this.data.attr("html_false") %>
			<% } else { %>
			    <%== this.data.attr("html_true") %>
			<% } %>
			<%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplValueBoolCtrlSvg" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-prev="<div id=&quot;prev_tplValueBoolCtrlSvg&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><svg class=&quot;vis-widget_prev &quot; version=&quot;1.1&quot; style=&quot;width: 80px; height: 80px; position: absolute;&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><polygon points=&quot;100,10 40,198 190,78 10,78 160,198&quot; style=&quot;fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero&quot; transform=&quot;scale(0.3)&quot;></polygon></svg></div>" data-vis-type="ctrl,bool" data-vis-name="Bool SVG" data-vis-attrs="oid;no_control/checkbox;" data-vis-attrs0="svg_false[<polygon points='100,10 40,198 190,78 10,78 160,198' style='fill:lime§ stroke:purple§ stroke-width:5§ fill-rule:nonzero' transform='scale(0.4)'/>]/text;" data-vis-attrs1="svg_true[<polygon points='100,10 40,198 190,78 10,78 160,198' style='fill:yellow§ stroke:red§ stroke-width:5§ fill-rule:nonzero' transform='scale(0.4)'/>]/text;" data-vis-attrs2="svg_opacity/slider,0,1,0.05">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:76px; height:76px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>">
        <div class="vis-widget-body">
            <% vis.binds.basic.showSvg(this.data.attr('class'), this.view, this.data.attr('wid'), this.data.attr('oid'), this.data.attr('svg_opacity'), this.data.attr('svg_false'), this.data.attr('svg_true'), null, this.data.attr('no_control')) %>
        </div>
    </div>
</script>

<script id="tplBasicState" type="text/ejs" class="vis-tpl" data-vis-prev="<img src=&quot;widgets/basic/img/Prev_BasicState.png&quot;></img>" data-vis-set="basic" data-vis-type="ctrl" data-vis-name="HTML State" data-vis-attrs="oid;html;value;urlValue">
    <div
        class="vis-widget <%== this.data.attr('class') %>"
        style="width:76px; height:76px;"
        id="<%= this.data.attr('wid') %>"
        data-oid="<%= this.data.attr('oid') %>"
        data-url-value="<%= this.data.attr('urlValue') %>"
        data-val="<%= this.data.attr('value') %>"
        <%= (el) -> vis.binds.basic.state(el) %>
        >
        <div class="vis-widget-body">
			<%== this.data.attr("html") %>
        </div>
    </div>
</script>

<script id="tplRedNumber" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val" data-vis-name="Red Number" data-vis-prev="<div id=&quot;prev_tplRedNumber&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle &quot; style=&quot;padding: 3px; width: auto; min-width: 21px; height: 21px; border-radius: 16px; border: 3px solid white; color: white; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 20px; line-height: normal; font-family: Helvetica; text-align: center; position: absolute; background-color: red;&quot; data-o> <div class=&quot;vis-widget-prev-body&quot;> 5 </div> </div></div>" data-vis-attrs="oid;type[circle]/select,circle,pin;html_prepend;html_append_singular;html_append_plural">
    <% if (this.data.attr('type') == 'pin') { %>
        <div class="vis-widget <%== this.data.attr('class') %>" style="width: 33px; height: 61px; padding-left: 4px" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.hideOnFalse(el) %>>
            <div class="vis-widget-body" >
                <img src="widgets/basic/img/pin_red5.svg" style="width: 100%; height: 100%">
                <div style="position:absolute; top: 22%; width: 95%; text-align: center">
                    <%== this.data.attr("html_prepend") %><%= parseInt(vis.states.attr(this.data.oid + '.val'), 10) %><%== (parseInt(vis.states.attr(this.data.oid + ".val"), 10) == 1 ? this.data.attr("html_append_singular") : this.data.attr("html_append_plural")) %>
                </div>
            </div>
        </div>
    <% } else { %>
        <div class="vis-widget <%== this.data.attr('class') %>" style="padding:3px;width:auto;min-width: 21px; height: 21px; border-radius:16px; border: 3px solid white; background-color:red; color:white; font:normal normal normal 20px/normal Helvetica; text-align: center;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.hideOnFalse(el) %>>
            <div class="vis-widget-body" >
                <%== this.data.attr("html_prepend") %><%= parseInt(vis.states.attr(this.data.oid + '.val'), 10) %><%== (parseInt(vis.states.attr(this.data.oid + ".val"), 10) == 1 ? this.data.attr("html_append_singular") : this.data.attr("html_append_plural")) %>
            </div>
        </div>
    <% } %>
</script>

<script id="tplBulbOnOffCtrl" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplBulbOnOffCtrl&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div data-o class=&quot;vis-widget_prev&quot; style=&quot;left: 393.0909091234207px; top: 246.9147720336914px;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <img src=&quot;img/bulb_on.png&quot; width=&quot;100%&quot;> </div> </div>" data-vis-set="basic" data-vis-type="ctrl" data-vis-name="Bulb on/off" data-vis-attrs="oid;min;max;icon_off[~vis~img~bulb_off.png]/image;icon_on[~vis~img~bulb_on.png]/image;readOnly/checkbox;" data-vis-attrs0="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;">
    <div
        data-oid="<%= this.data.attr('oid') %>"
        class="vis-widget <%== this.data.attr('class') %>"
        id="<%= this.data.attr('wid') %>"
        style="width: 44px; height: 59px"
        data-read-only="<%=  this.data.attr('readOnly') %>"
        data-min="<%= this.data.attr('min') %>"
        data-max="<%= this.data.attr('max') %>"
        data-url-true="<%=  this.data.attr('urlTrue') %>"
        data-url-false="<%= this.data.attr('urlFalse') %>"
        data-oid-true="<%=  this.data.attr('oidTrue') %>"
        data-oid-false="<%= this.data.attr('oidFalse') %>"
        data-oid-true-value="<%=  this.data.attr('oidTrueValue') %>"
        data-oid-false-value="<%= this.data.attr('oidFalseValue') %>"
        <%= (el) -> vis.binds.basic.toggle(el) %>
        >
        <div class="vis-widget-body">
            <% if (vis.binds.basic.isFalse(vis.states.attr(this.data.oid + ".val"), this.data.attr('min'), this.data.attr('max'))) { %>
                <img src="<%== this.data.attr('icon_off') ? this.data.attr('icon_off') : 'img/bulb_off.png' %>" width="100%"/>
            <% } else { %>
                <img src="<%== this.data.attr('icon_on') ? this.data.attr('icon_on') : 'img/icon_on.png' %>" width="100%"/>
            <% } %>
        </div>
    </div>
</script>

<script id="tplValueFloatBar" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val,bar" data-vis-name="Bar" data-vis-prev="<div id=&quot;prev_tplValueFloatBar&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 54px; height: 17px; border: 1px solid rgb(136, 136, 136); left: 458px; top: 292px; position: absolute;&quot; > <div data-o class=&quot;vis-widget-prev-body&quot; style=&quot;width: 68.6%; background-color: blue;&quot;></div> </div></div>" data-vis-attrs="oid;min[0];max[100];orientation[horizontal]/select,horizontal,vertical/onOrientation;color[blue]/color;border;shadow;reverse/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 240px; height: 20px; border: 1px solid #888" id="<%= this.data.attr('wid') %>">
        <div data-oid="<%= this.data.attr('oid') %>" class="vis-widget-body"
        style="<%= (this.data.attr('orientation') === 'vertical') ? ('height: ' + vis.binds.basic.getCalc(this.data) + ';' + ((this.data.border) ? ' width:  calc(100% - ' + vis.binds.basic.extractWidth(this.data.border, 2) + ');' : '') + (this.data.reverse === 'true' || this.data.reverse === true ? 'left: 0px; position: absolute; bottom: 0%;' : '')) : (((this.data.border) ? " height: calc(100% - " + vis.binds.basic.extractWidth(this.data.border, 2) + ');' : '') + 'width: ' + vis.binds.basic.getCalc(this.data) + ';' + (this.data.reverse === 'true' || this.data.reverse === true ? 'float: right; ' : '')) %>background-color:<%= this.data.color %>; border: <%= this.data.border %>; box-shadow: <%= this.data.shadow %>"></div>
    </div>
</script>

<script id="tplNote" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="val" data-vis-name="Note" data-vis-prev="<div id=&quot;prev_tplNote&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle &quot; style=&quot;width: 70px; height: 50px; border: 1px solid rgb(136, 136, 136); left: 965px; top: 16px; position: absolute; background: rgba(255, 255, 105, 0.8);&quot;><div style=&quot;padding: 10px&quot;>Message</div></div></div>" data-vis-attrs="oid;max_width[300];html_prepend;html_append;test_text">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:50px; height:50px; border:1px solid #888; background: rgba(255,255,105,0.8)" id="<%= this.data.attr('wid') %>" onclick="vis.binds.basic.editNote('<%= this.data.attr('wid') %>', '<%= this.data.attr('max_width') %>', '<%= this.data.attr('min_width') %>', '<%= this.data.attr('min_height') %>', '<%= this.data.attr('oid') %>')">
		<div data-oid="<%= this.data.attr('oid') %>" id="div_<%= this.data.attr('wid') %>" style="padding: 10px">
			<%== this.data.attr("html_prepend") %><%= (this.data.test_text && vis.editMode) ? this.data.test_text : (vis.states.attr(this.data.oid + ".val") == null ? "" : vis.states.attr(this.data.oid + ".val")) %><%== this.data.attr("html_append") %>
		</div>
    </div>
</script>

<script id="tplTableBody" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="json,table" data-vis-name="Table" data-vis-prev="<div id=&quot;prev_tplTableBody&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 120px; height: 60px;background: rgb(211, 211, 211);&quot;> <table class=&quot;vis-table-header tclass&quot;><tbody><tr class=&quot;tclass-th&quot;><th class=&quot;tclass-th1&quot;>Title</th><th class=&quot;tclass-th2&quot;>Value</th></tr></tbody></table><div class=&quot;vis-table-div tclass-inner&quot;><table id=&quot;vis-table-body&quot; class=&quot;tclass&quot;><tbody><tr class=&quot;vis-table-row tclass-tr tclass-tr-odd&quot; data-index=&quot;0&quot; data-server-id=&quot;undefined&quot;><td class=&quot;tclass-th1&quot;>first</td><td class=&quot;tclass-th2&quot;>1</td></tr><tr class=&quot;vis-table-row tclass-tr tclass-tr-even&quot; data-index=&quot;1&quot; data-server-id=&quot;undefined&quot;><td class=&quot;tclass-th1&quot;>second</td><td class=&quot;tclass-th2&quot;>2</td></tr></tbody></table></div></div></div>" data-vis-attrs="table_oid/id;" data-vis-attrs0="static_value[[{^Title^: ^first^, ^Value^: 1, ^_Description^: ^Value1^}, {^Title^: ^second^, ^Value^: 2, ^_Description^: ^Value2^}]]/text;" data-vis-attrs1="event_oid/id;new_on_top/checkbox;ack_oid/id;hide_header/checkbox;show_scroll/checkbox;detailed_wid/widget;max_rows/number;" data-vis-attrs2="colCount/number;group.header/byindex;colName(1-colCount);colWidth(1-colCount);colAttr(1-colCount);" data-vis-attrs-not-used="btn_print;view_for_print/views">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" style="width: 300px; height: 150px; background: #d3d3d3">
       <% vis.binds.table.showTable(this.view, this.data.attr('wid'), this.data); %>
    </div>
</script>

<script id="tplHtmlLogout" type="text/ejs" class="vis-tpl" data-vis-set="basic" data-vis-type="logout,html" data-vis-prev="<div id=&quot;prev_tplHtmlLogout&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 54px; height: 22px; cursor: pointer;&quot;> <div class=&quot;vis-widget-prev-body&quot;> Logout </div> </div></div>" data-vis-name="HTML logout" data-vis-attrs="html[Logout]/text">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 50px; height: 30px;cursor: pointer" id="<%= this.data.attr('wid') %>" onclick="vis.editMode ? console.log('editMode') : vis.conn.logout(function(){location.reload()})">
        <div class="vis-widget-body">
            <%== this.data.attr('html') %>
        </div>
    </div>
</script>

<!--script id="tplDialog"
        type="text/ejs"
        class="vis-tpl"
        data-vis-set="table"
        data-vis-name="Dialog"
        data-vis-attrs="show/checkbox;trigger_id/id;button(1-3);title;text;image/image;width[400]/slider,50,1000,10;height[200]/slider,50,1000,10;modal/checkbox;_no_style[true]/hidden;_no_move[true]/hidden;_no_resize[true]/hidden;margin_left[0]/slider,0,200,1;margin_top[0]/slider,0,200,1"
        >
    <%
        var options =  {
            trigger_id:  this.data.attr('trigger_id'),
            buttons:     [this.data.attr('button1'), this.data.attr('button2'), this.data.attr('button3')],
            image:       this.data.attr('image'),
            title:       this.data.attr('title'),
            text:        this.data.attr('text'),
            width:       this.data.attr('width'),
            height:      this.data.attr('height'),
            show:        this.data.attr('show'),
            modal:       this.data.attr('modal'),
            margin_left: this.data.attr('margin_left'),
            margin_top:  this.data.attr('margin_top')
        };
        vis.binds.table.showDialog(this.view, this.data.attr('wid'), options);
    %>
</script-->

<script id="tplScreenResolution" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplScreenResolution&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock ui-selectee ui-draggable-handle &quot; style=&quot;width: 120px; height: 54px; border: 1px solid rgb(136, 136, 136); font-size: 12px; opacity: 0.8;&quot; > <div style=&quot;padding: 10px&quot;> Width: <span>640</span><br>Height: <span>360</span><br>Default view:<span></span> </div> </div></div>" data-vis-set="basic" data-vis-type="tools" data-vis-name="Screen Resolution" data-vis-attrs="">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:150px; height:75px; border: 1px solid #888; font-size: 12px; opacity: 0.8" id="<%= this.data.attr('wid') %>">
		<div id="div_<%= this.data.attr('wid') %>" style="padding: 10px">
			Default view: <span class='vis-resolution-default-view'></span><br>
			Width: <span class='vis-resolution-width'></span><br>
			Height: <span class='vis-resolution-height'></span><br>
			Instance: <span><%= vis.instance %></span>
		</div>
		<%= vis.binds.basic.detectScreen() %>
    </div>
</script>

<!-- --------------basic.html--- END -->
<!-- --------------colorpicker.html--- START -->
<!--
    ioBroker.vis bars Widget-Set

    version: "0.1.1"

    Copyright 2013-2015 hobbyquaker https://github.com/hobbyquaker, bluefox https://github.com/GermanBluefox
-->

<!--<script type="text/javascript" src="widgets/colorpicker/js/jscolor.js"></script>-->
<link rel="stylesheet" type="text/css" href="widgets/colorpicker/css/farbtastic.css">
<link rel="stylesheet" type="text/css" href="widgets/colorpicker/css/spectrum.css">

<script type="text/javascript" src="widgets/colorpicker/js/farbtastic.js"></script>
<script type="text/javascript" src="widgets/colorpicker/js/spectrum.js"></script>

<script type="text/javascript">
    
    if (vis.language == 'de'){
        var localization = $.spectrum.localization.de = {
            cancelText: 'Abbrechen',
            chooseText: 'Wählen',
            clearText: 'Farbauswahl zurücksetzen',
            noColorSelectedText: 'Keine Farbe ausgewählt',
            togglePaletteMoreText: 'Mehr',
            togglePaletteLessText: 'Weniger'
        };
        $.extend($.fn.spectrum.defaults, localization);
    } else if (vis.language == 'ru'){
        var localization = $.spectrum.localization.ru = {
            cancelText: 'отмена',
            chooseText: 'выбрать',
            clearText: 'сбросить',
            noColorSelectedText: 'никакой цвет не выбран',
            togglePaletteMoreText: 'больше',
            togglePaletteLessText: 'меньше'
        };
        $.extend($.fn.spectrum.defaults, localization);
    }

    if (vis.editMode) {
        // Add words for basic widgets
        $.extend(true, systemDictionary, {
            "red-oid":      {"en": "Red ID",    "de": "Rot ID",     "ru": "Красный ID"},
            "green-oid":    {"en": "Green ID",  "de": "Grün ID",    "ru": "Зелёный ID"},
            "blue-oid":     {"en": "Blue ID",   "de": "Blau ID",    "ru": "Синий ID"},
            "divisor":      {"en": "divisor",   "de": "Divisor",    "ru": "Делитель"}
        });
    }

    vis.binds.colorpicker = {
		version: "0.1.1",
		showVersion: function () {
			if (vis.binds.bars.version) {
				console.log('Version vis-bars:' + vis.binds.bars.version);
				vis.binds.bars.version = null;
			}
		},
        /*jscolor: function (el) {
            var myPicker = new jscolor.color(document.getElementById(jQuery(el).parent().attr('id')+"_jscolor"), {})

        },*/
        rgb2hex: function (r,g,b) {
            return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2);
        },
        hex2rgb: function (hex) {
            var r = parseInt(hex.substr(1, 2), 16);
            var g = parseInt(hex.substr(3, 2), 16);
            var b = parseInt(hex.substr(5, 2), 16);
            return {r: r, g: g, b: b};
        },
        farbtastic: function (el, r_id, g_id, b_id, factor) {
			vis.binds.colorpicker.showVersion();
            var $this = jQuery(el);
            $this.hide();

            r_id = r_id || 'nothing_selected';
            g_id = g_id || 'nothing_selected';
            b_id = b_id || 'nothing_selected';

            var ft = $.farbtastic($this.prev(), function () {
                var color = vis.binds.colorpicker.hex2rgb(this.color);
                var r = (parseFloat(color.r) / factor).toFixed(3);
                var g = (parseFloat(color.g) / factor).toFixed(3);
                var b = (parseFloat(color.b) / factor).toFixed(3);
                if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
                    if (r_id && r_id !== 'nothing_selected') {
                        vis.states[r_id + '.val'] = r;
                        vis.setValue(r_id, r);
                    }
                    if (g_id && g_id !== 'nothing_selected'){
                        vis.states[g_id + '.val'] = g;
                        vis.setValue(g_id, g);
                    }
                    if (b_id && b_id !== 'nothing_selected') {
                        vis.states[b_id + '.val'] = b;
                        vis.setValue(b_id, b);
                    }
                }
            });

            var r = parseInt(parseFloat(vis.states[r_id + '.val'] || 0) * factor, 10);
            var g = parseInt(parseFloat(vis.states[g_id + '.val'] || 0) * factor, 10);
            var b = parseInt(parseFloat(vis.states[b_id + '.val'] || 0) * factor, 10);
            ft.setColor(vis.binds.colorpicker.rgb2hex(r, g, b));

            vis.states.bind(r_id + '.val', function(e, newVal, oldVal) {
                var r = parseInt(parseFloat(newVal) * factor, 10);
                var g = parseInt(parseFloat(vis.states[g_id + '.val'] || 0) * factor, 10);
                var b = parseInt(parseFloat(vis.states[b_id + '.val'] || 0) * factor, 10);
                ft.setColor(vis.binds.colorpicker.rgb2hex(r, g, b));
            });
            vis.states.bind(g_id + '.val', function(e, newVal, oldVal) {
                var r = parseInt(parseFloat(vis.states[r_id + '.val'] || 0) * factor, 10);
                var g = parseInt(parseFloat(newVal) * factor, 10);
                var b = parseInt(parseFloat(vis.states[b_id + '.val'] || 0) * factor, 10);
                ft.setColor(vis.binds.colorpicker.rgb2hex(r, g, b));
            });
            vis.states.bind(b_id + '.val', function( e, newVal, oldVal ) {
                var r = parseInt(parseFloat(vis.states[r_id + '.val'] || 0) * factor, 10);
                var g = parseInt(parseFloat(vis.states[g_id + '.val'] || 0) * factor, 10);
                var b = parseInt(parseFloat(newVal) * factor, 10);
                ft.setColor(vis.binds.colorpicker.rgb2hex(r, g, b));
            });
        },
        spectrum: function (el, r_id, g_id, b_id, factor) {
			vis.binds.colorpicker.showVersion();
            r_id = r_id || 'nothing_selected';
            g_id = g_id || 'nothing_selected';
            b_id = b_id || 'nothing_selected';

            var $this = jQuery(el);

            $this.spectrum({
                preferredFormat: "rgb"
            });

            var r = parseInt(parseFloat(vis.states[r_id + '.val'] || 0) * factor, 10);
            var g = parseInt(parseFloat(vis.states[g_id + '.val'] || 0) * factor, 10);
            var b = parseInt(parseFloat(vis.states[b_id + '.val'] || 0) * factor, 10);
            $this.spectrum("set", {r: r, g: g, b: b});

            vis.states.bind(r_id + '.val', function( e, newVal, oldVal ) {
                var r = parseInt(parseFloat(newVal) * factor, 10);
                var g = parseInt(parseFloat(vis.states[g_id + '.val'] || 0) * factor, 10);
                var b = parseInt(parseFloat(vis.states[b_id + '.val'] || 0) * factor, 10);
                $this.spectrum("set", {r: r, g: g, b: b});
            });
            vis.states.bind(g_id + '.val', function( e, newVal, oldVal ) {
                var r = parseInt(parseFloat(vis.states[r_id + '.val'] || 0) * factor, 10);
                var g = parseInt(parseFloat(newVal) * factor, 10);
                var b = parseInt(parseFloat(vis.states[b_id + '.val'] || 0) * factor, 10);
                $this.spectrum("set", {r:r, g:g, b:b});
            });
            vis.states.bind(b_id + '.val', function( e, newVal, oldVal ) {
                var r = parseInt(parseFloat(vis.states[r_id + '.val'] || 0) * factor, 10);
                var g = parseInt(parseFloat(vis.states[g_id + '.val'] || 0) * factor, 10);
                var b = parseInt(parseFloat(newVal) * factor, 10);
                $this.spectrum("set", {r:r, g:g, b:b});
            });
            $this.change(function() {
                var color = $this.spectrum('get').toRgb();
                var r = (parseFloat(color.r) / factor).toFixed(3);
                var g = (parseFloat(color.g) / factor).toFixed(3);
                var b = (parseFloat(color.b) / factor).toFixed(3);
                if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
                    if (r_id && r_id !== 'nothing_selected') {
                        vis.states[r_id + '.val'] = r;
                        vis.setValue(r_id, r);
                    }
                    if (g_id && g_id !== 'nothing_selected'){
                        vis.states[g_id + '.val'] = g;
                        vis.setValue(g_id, g);
                    }
                    if (b_id && b_id !== 'nothing_selected') {
                        vis.states[b_id + '.val'] = b;
                        vis.setValue(b_id, b);
                    }
                }
            });
        }
    };
</script>

<script id="tplRGBSpectrum" type="text/ejs" class="vis-tpl" data-vis-prev="<img src=&quot;widgets/colorpicker/img/Prev_tplRGBSpectrum.png&quot;></img>" data-vis-set="colorpicker" data-vis-type="ctrl,color" data-vis-name="RGB spectrum" data-vis-attrs="red-oid;green-oid;blue-oid;divisor[255]">
    <div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <input id="<%= this.data.attr('wid') %>_spectrum" value="" <%= (el) -> vis.binds.colorpicker.spectrum(el, data.attr('red-oid'), data.attr('green-oid'), data.attr('blue-oid'), data.attr('divisor')) %>>
        </div>
    </div>
</script>

<script id="tplRGBFarbtastic" class="vis-tpl" type="text/ejs" data-vis-prev="<img src=&quot;widgets/colorpicker/img/Prev_tplRGBFarbtastic.png&quot;></img>" data-vis-set="colorpicker" data-vis-name="ctrl - rgb farbtastic" data-vis-attrs="red-oid;green-oid;blue-oid;divisor[255]">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 196px; height: 196px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div id="<%= this.data.attr('wid') %>_farbtastic"></div>
            <input id="<%= this.data.attr('wid') %>_farbtastic_input" value="" <%= (el) -> vis.binds.colorpicker.farbtastic(el, data.attr('red-oid'), data.attr('green-oid'), data.attr('blue-oid'), data.attr('divisor')) %>>
        </div>
    </div>
</script>

        <!--

<script type="text/ejs" id="tplJscolor" class="vis-tpl" data-vis-set="colorpicker" data-vis-name="jscolor" data-vis-attrs="hue_id;sat_id;bri_id">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px; border: 1px solid #000; background: #fff;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <input id="<%= this.data.attr('wid') %>_jscolor">
            <div class="popup-helper" <%= (el) -> vis.binds.colorpicker.jscolor(el) %>></div>
        </div>
    </div>
</script>

<script type="text/ejs" id="tplDmxFarbtastic" class="vis-tpl" data-vis-set="colorpicker" data-vis-name="dmx_ctrl - farbtastic (unfertig)" data-vis-attrs="program_id;red_channel;green_channel;blue_channel">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 195px; height: 195px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div id="<%= this.data.attr('wid') %>_farbtastic"></div>
            <input id="<%= this.data.attr('wid') %>_farbtastic_input" value=""  <%= (el) -> vis.binds.colorpicker.farbtastic(el) %>>
        </div>
    </div>
</script>

<script type="text/ejs" id="tplFarbtasticDialog" class="vis-tpl" data-vis-set="colorpicker" data-vis-name="hue_ctrl - farbtastic jqui Dialog (unfertig)" data-vis-attrs="lamp_id;program_id;hue_id;sat_id;bri_id">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px; border: 1px solid #000; background: #fff;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div id="<%= this.data.attr('wid') %>_farbtastic"></div>
            <input id="<%= this.data.attr('wid') %>_farbtastic_input" value="" <%= (el) -> vis.binds.colorpicker.farbtastic(el) %>>
        </div>
    </div>
</script>

<script type="text/ejs" id="tplDmxFarbtasticDialog" class="vis-tpl" data-vis-set="colorpicker" data-vis-name="dmx_ctrl - farbtastic jqui Dialog (unfertig)" data-vis-attrs="program_id;red_channel;green_channel;blue_channel">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 195px; height: 195px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div id="<%= this.data.attr('wid') %>_farbtastic"></div>
            <input id="<%= this.data.attr('wid') %>_farbtastic_input" value=""  <%= (el) -> vis.binds.colorpicker.farbtastic(el) %>>
        </div>
    </div>
</script>

<script type="text/ejs" id="tplSpectrum" class="vis-tpl" data-vis-set="colorpicker" data-vis-name="hue_ctrl - spectrum (unfertig)" data-vis-attrs="lamp_id;program_id;hue_id;sat_id;bri_id">
    <div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <input id="<%= this.data.attr('wid') %>_spectrum" value="" <%= (el) -> vis.binds.colorpicker.spectrum(el) %>>
        </div>
    </div>
</script>

<script type="text/ejs" id="tplDmxSpectrum" class="vis-tpl" data-vis-set="colorpicker" data-vis-name="dmx_ctrl - spectrum (unfertig)" data-vis-attrs="program_id;red_channel;green_channel;blue_channel">
    <div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <input id="<%= this.data.attr('wid') %>_spectrum" value="" <%= (el) -> vis.binds.colorpicker.spectrum(el) %>>
        </div>
    </div>
</script>

-->

<!-- --------------colorpicker.html--- END -->
<!-- --------------hqwidgets.html--- START -->
<!--
    ioBroker.vis high quality Widget-Set

    version: "0.2.1"

    Copyright 6'2014-2015 bluefox<dogafox@gmail.com>

-->
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/hqwidgets.css">
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/hqwidgetsButtons.css">
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/checkbox.css">
<link rel="stylesheet" type="text/css" href="widgets/hqwidgets/css/glossy.css">
<script type="text/javascript" src="widgets/hqwidgets/js/jquery.knob.js"></script>
<script type="text/javascript" src="widgets/hqwidgets/js/hqwidgets.js"></script>

<script id="tplHqButton" type="text/ejs" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="On/Off" data-vis-update-style="true" data-vis-type="ctrl,bool,button,state" data-vis-prev="<div id=&quot;prev_tplHqButton&quot; style=&quot;position: relative; text-align: initial;padding: 10px !important&quot;><div class=&quot;vis-widget_prev vis-hq-button-base&quot; style=&quot;overflow: visible; width: 64px; height: 64px; border-radius: 64px; left: 543px; top: 37px; position: absolute;&quot;><div class=&quot;vis-hq-main vis-hq-button-base-on&quot; style=&quot;z-index: 1; border-radius: 64px;&quot;><div class=&quot;vis-hq-middle&quot;><table class=&quot;vis-hq-table hq-no-space&quot; style=&quot;position: absolute; left: 4px; top: 2px;&quot;><tbody><tr class=&quot;hq-no-space&quot;><td class=&quot;hq-no-space&quot;><div class=&quot;vis-hq-icon&quot; style=&quot;text-align: center;&quot;><img class=&quot;vis-hq-icon-img&quot; style=&quot;height: 56px; width: auto;&quot; src=&quot;img/bulb_off.png&quot;></div></td></tr></tbody></table></div></div></div></div>" data-vis-attrs="oid[nothing_selected]/id/changedButtonId;oid-working;oid-battery;oid-signal;" data-vis-attrs0="group.value;min[false];max[true];pushButton/checkbox;" data-vis-attrs1="group.center;caption;captionOn;iconName[img~bulb_off.png]/image;iconOn/image;btIconWidth[56]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[15]/slider,0,100,1;topOffset[55]/slider,0,100,1;" data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoRight;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;" data-vis-attrs3="group.styles;styleNormal/style,hqwidgetsButtons glossy,-button,background;styleActive/style,hqwidgetsButtons glossy,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;" data-vis-attrs4="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;" data-vis-filter="HM-LC-Sw1-Pl,HM-LC-Sw1-FM,HM-Dis-TD-T,HM-LC-Sw2-FM,HM-LC-Sw1PBU-FM,HM-LC-Sw1-SM,HM-LC-Sw1-FM,HM-LC-Sw2-FM,HM-LC-Sw4-PCB,HM-LC-Sw4-SM,HM-LC-Sw4-DR,HM-LC-Sw4-WM,HM-Sec-SFA-SM,HM-OU-CF-Pl,HM-OU-CFM-Pl,HMW-LC-Sw2-DR,HM-LC-Sw1-PB-FM,HM-LC-Sw2-PB-FM,HMW-IO-12-Sw14-DR,HMW-IO-12-Sw7-DR,HM-ES-PMSw1-Pl">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
         vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style);
    %></div>
</script>

<script id="tplHqDimmer" type="text/ejs" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Dimmer" data-vis-type="ctrl,dimmer,button" data-vis-prev="<img src=&quot;widgets/hqwidgets/img/prev/Prev_hqwidgetsDimmer.png&quot;></img>" data-vis-update-style="true" data-vis-attrs="oid[nothing_selected]/id/changedButtonId;oid-working;oid-battery;oid-signal;" data-vis-attrs0="group.value;unit[%];min[0];max[100];digits[0]/number;step[1];is_comma[true]/checkbox;" data-vis-attrs1="group.center;caption;iconName[img~bulb_off.png]/image;iconOn/image;btIconWidth[56]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[15]/slider,0,100,1;topOffset[55]/slider,0,100,1;circleWidth[50]/slider,1,200,1;showValue[true]/checkbox;alwaysShow/checkbox;" data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;" data-vis-attrs3="group.styles;styleNormal/style,hqwidgetsButtons glossy,-button,background;styleActive/style,hqwidgetsButtons glossy,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox" data-vis-filter="light.dimmer">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
        vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style, 'number');
    %></div>
</script>

<script id="tplHqInTemp" type="text/ejs" class="vis-tpl" data-vis-beta="true" data-vis-set="hqwidgets" data-vis-name="Inner temperature" data-vis-type="ctrl,temperature" data-vis-prev="<img src=&quot;widgets/hqwidgets/img/prev/Prev_hqwidgetsInTemp.png&quot;></img>" data-vis-update-style="true" data-vis-attrs="oid[nothing_selected]/id,level.temperature/changedButtonId;oid-humidity/id,value.humidity;oid-actual/id,value.temperature/changedTemperatureId;oid-drive/id,value.valve;oid-battery/id,indicator.battery;" data-vis-attrs0="group.value;unit[°C];min[6];max[30];digits[0]/number;step[1];is_comma[true]/checkbox;" data-vis-attrs1="group.center;caption;iconName[img~Heating.png]/image;btIconWidth[45]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[25]/slider,0,100,1;topOffset[55]/slider,0,100,1;circleWidth[50]/slider,1,100,1;showValue[true]/checkbox;alwaysShow/checkbox;midTextColor/color;" data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;" data-vis-attrs3="group.styles;styleNormal[hq-button-base-intemp]/style,hqwidgetsButtons,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;" data-vis-attrs4="group.chart;url;dialog_title;dialog_width;dialog_height;dialog_effect/effect;dialog_timeout/number,0,3600000,100;dialog_modal/checkbox;dialog_open/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
        this.data.temperature = true;
        vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style, 'number');
    %></div>
</script>

<script id="tplHqOutTemp" type="text/ejs" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Outdoor temperature" data-vis-type="value,temperature" data-vis-prev="<img src=&quot;widgets/hqwidgets/img/prev/Prev_hqwidgetsOutTemp.png&quot;></img>" data-vis-update-style="true" data-vis-attrs="oid-actual/id,value.temperature/changedButtonId;oid-humidity/id,value.humidity;oid-battery/id,indicator.battery;" data-vis-attrs0="group.value;unit[°C];min[6];max[30];digits[0]/number;step[1];is_comma[true]/checkbox;" data-vis-attrs1="group.center;caption;iconName[img~Heating.png]/image;btIconWidth[45]/slider,0,400,1;offsetAuto[true]/checkbox;leftOffset[25]/slider,0,100,1;topOffset[55]/slider,0,100,1;circleWidth[50]/slider,1,100,1;showValue[true]/checkbox;alwaysShow/checkbox;midTextColor/color;" data-vis-attrs2="group.leftRight;hoursLastAction/nselect,,1,2,3,6,12,24,1024;timeAsInterval[true]/checkbox;format_date/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY/MM/DD hh:mm:ss,hh:mm:ss,hh:mm;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;" data-vis-attrs3="group.styles;styleNormal[hq-button-base-outtemp]/style,hqwidgetsButtons,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;" data-vis-attrs4="group.chart;url;dialog_title;dialog_width;dialog_height;dialog_effect/effect;dialog_timeout/number,0,3600000,100;dialog_modal/checkbox;dialog_open/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px; border-radius: 64px" id="<%= this.data.attr('wid') %>"><%
        this.data.temperature = true;
        vis.binds.hqwidgets.button.init(this.data.wid, this.view, this.data, this.style, 'number');
    %></div>
</script>

<script id="tplHqShutter" type="text/ejs" class="vis-tpl" data-vis-set="hqwidgets" data-vis-type="ctrl;window;shutter" data-vis-name="Window and Shutter" data-vis-prev="<div id=&quot;prev_tplHqShutter&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev hq-blind-base vis-hq-button-base&quot; style=&quot;overflow: visible; width: 110px; height: 90px; left: 109px; top: 74px; position: absolute; padding: 3px 4px 2px;&quot;><table class=&quot;hq-blind hq-no-space&quot; style=&quot;width: 100%; height: 100%&quot;><tbody><tr><td><div class=&quot;hq-blind-blind1&quot; style=&quot;border-width: 3px;border-color: #a9a7a8;&quot;><div class=&quot;hq-blind-blind2&quot; style=&quot;border-width: 3px; &quot;><div class=&quot;hq-blind-blind3&quot;><table class=&quot;hq-no-space&quot; style=&quot;width: 100%; height: 100%; position: absolute&quot;><tbody><tr class=&quot;hq-no-space hq-blind-position&quot; style=&quot;height: 20%&quot;><td class=&quot;hq-no-space hq-blind-blind&quot;></td></tr><tr class=&quot;hq-no-space&quot;><td class=&quot;hq-no-space&quot;></td></tr></tbody></table><div class=&quot;hq-blind-blind4&quot; style=&quot;border-width: 3px;border-color: #a5aaad;&quot;><div class=&quot;hq-blind-handle hq-blind-handle-bg&quot; style=&quot;border-width: 1px;top: 50%; width: 3px; height: 15%;left: calc(100% - 5px);&quot;></div></div></div></div></div></td><td><div class=&quot;hq-blind-blind1&quot; style=&quot;border-width: 3px;border-color: #a9a7a8;&quot;><div class=&quot;hq-blind-blind2&quot; style=&quot;border-width: 3px; &quot;><div class=&quot;hq-blind-blind3&quot;><table class=&quot;hq-no-space&quot; style=&quot;width: 100%; height: 100%; position: absolute&quot;><tbody><tr class=&quot;hq-no-space hq-blind-position&quot; style=&quot;height: 20%&quot;><td class=&quot;hq-no-space hq-blind-blind&quot;></td></tr><tr class=&quot;hq-no-space&quot;><td class=&quot;hq-no-space&quot;></td></tr></tbody></table><div class=&quot;hq-blind-blind4 hq-blind-blind4-opened-left&quot; style=&quot;border-width: 3px;border-color: #a5aaad;&quot;><div class=&quot;hq-blind-handle hq-blind-handle-bg&quot; style=&quot;border-width: 1px;top: 50%; width: 3px; height: 15%;-moz-transform-origin: 3px 3px;-ms-transform-origin: 3px 3px;-o-transform-origin: 3px 3px;-webkit-transform-origin: 3px 3px;transform-origin: 3px 3px;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);&quot;></div></div></div></div></div></td></tr></tbody></table></div></div>" data-vis-attrs="oid/id,level.blind/changedWindowId;oid-working/id,indicator.working;min[0];max[100];border_width/slider,0,10,1;slide_count[1]/nselect,1,2,3,4,5,6;invert/checkbox;hide_timeout[2000];noAnimate/checkbox;" data-vis-attrs0="group.leftRight;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;show_value/checkbox;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;" data-vis-attrs1="group.slides/byindex;slide_type(1-slide_count)/select,,left,right,top,bottom;oid-slide-sensor(1-slide_count)/id/changedSensorId;oid-slide-sensor-lowbat(1-slide_count)/id,indicator.battery;oid-slide-handle(1-slide_count)/id/changedSensorId;oid-slide-handle-lowbat(1-slide_count)/id,indicator.battery;">
    <div class="vis-widget hq-blind-base <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px" id="<%= this.data.attr('wid') %>"><%
        vis.binds.hqwidgets.window.init(this.data.wid, this.view, this.data, this.style);
    %></div>
</script>

<script id="tplHqDoor" type="text/ejs" class="vis-tpl" data-vis-beta="true" data-vis-set="hqwidgets" data-vis-type="state;door" data-vis-name="Door" data-vis-prev="<div id=&quot;prev_tplHqDoor&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev hq-blind-base vis-hq-button-base&quot; style=&quot;overflow: visible; width: 47px; height: 93px; padding: 3px 4px 2px;&quot;><table class=&quot;vis-hq-main vis-hq-door vis-hq-no-space&quot; style=&quot;border: 2px #8E8D8D solid;&quot;><tbody><tr class=&quot;vis-hq-no-space&quot;><td class=&quot;vis-hq-no-space vis-hq-door-empty-right&quot;></td><td class=&quot;vis-hq-no-space vis-hq-door-sheet&quot; style=&quot;width: 100%;&quot;><div class=&quot;vis-hq-door-handle&quot; style=&quot;left: 75%;&quot;></div></td><td class=&quot;vis-hq-no-space vis-hq-door-empty-left&quot; style=&quot;width: 0px; background: rgb(81, 81, 81);&quot;></td></tr></tbody></table></div></div></div>" data-vis-attrs="oid/id,state/changedButtonId;oid-battery/id,indicator.battery;border_width/slider,0,10,1;invert/checkbox;door_type/select,,left,right;noAnimate/checkbox;" data-vis-attrs0="group.leftRight;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;show_value/checkbox;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;">
    <div class="vis-widget hq-blind-base <%== this.data.attr('class') %>" style="overflow:visible; width: 50px; height: 100px" id="<%= this.data.attr('wid') %>"><%
        vis.binds.hqwidgets.door.init(this.data.wid, this.view, this.data, this.style);
    %></div>
</script>

<!--script id="tplHqLock"
        type="text/ejs"
        class="vis-tpl"
        data-vis-set="hqwidgets"
        data-vis-type="control;lock"
        data-vis-beta="true"
        data-vis-name="Lock"
        data-vis-attrs="oid/id,state/changedLockId;oid-open/id;oid-battery/id,indicator.battery;noAnimate/checkbox;"
        data-vis-attrs0="group.image;closedIcon[widgets~hqwidgets~img~lockLocked.png]/image;openedIcon[widgets~hqwidgets~img~lockUnlocked.png]/image;"
        data-vis-attrs1="group.popup;popupRadius[75]/slider,50,150,1;buttonRadius[50]/slider,0,150,1;closeIcon[widgets~hqwidgets~img~lockLocked.png]/image;closeValue;closeStyle/style,hqwidgetsButtons glossy,-button,background;"
        data-vis-attrs2="openIcon[widgets~hqwidgets~img~lockUnlocked.png]/image;openValue;openStyle/style,hqwidgetsButtons glossy,-button,background;"
        data-vis-attrs3="openDoorIcon[widgets~hqwidgets~img~openDoor.png]/image;openDoorValue;openDoorStyle/style,hqwidgetsButtons glossy,-button,background;showTimeout[5000]/slider,0,30000,100;"
        data-vis-attrs4="group.leftRight;descriptionLeft;infoLeftFontSize[12]/slider,6,50,1;infoFontRightSize[12]/slider,6,50,1;infoColor/color;infoBackground/color;"
        data-vis-attrs5="group.styles;styleNormal[hq-button-no-background]/style,hqwidgetsButtons glossy,-button,background;styleActive[hq-button-no-background]/style,hqwidgetsButtons glossy,-button,background;usejQueryStyle/checkbox;changeEffect/nselect,,waves,wobble,tada,swing,shake,rubberBand,pulse,flash,bounce;waveColor/color;testActive/checkbox;"
        >
    <div class="vis-widget vis-hq-lock-base <%== this.data.attr('class') %>" style="overflow:visible; width: 30px; height: 30px" id="<%= this.data.attr('wid') %>"><%
        vis.binds.hqwidgets.lock.init(this.data.wid, this.view, this.data, this.style);
    %></div>
</script-->

<!--script type="text/ejs" id="tplHqLock" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Lock" data-vis-attrs="hm_id;hqoptions" data-vis-render-visible="true" data-hqwidgets-filter="HM-Sec-Key-S">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqLock", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqText" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Text" data-vis-render-visible="true" data-vis-attrs="hqoptions">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqText", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqInfo" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Info" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqInfo", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqImage" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Image" data-vis-render-visible="true" data-vis-attrs="hqoptions">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqImage", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqCam" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="IpCamera" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions" data-hqwidgets-filter="HM-OU-CFM-Pl,HM-Sec-SFA-SM,HM-OU-CF-Pl,HM-Sec-SC,HM-SCI-3-FM,HMW-Sen-SC-12-DR,HMW-IO-12-Sw14-DR;.STATE,.OPEN,HM-Sec-Key-S,HM-LC-Sw4-WM,HM-LC-Sw1-Pl,HM-LC-SW1-FM,HM-LC-Sw2-FM,HM-LC-Sw1-SM,HM-LC-Sw4-PCB,HM-LC-Sw4-PCB,HM-LC-Sw4-SM,HM-LC-Sw1-BA-PCB">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqCam", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqGong" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Gong" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions" data-hqwidgets-filter="HM-OU-CFM-Pl,HM-Sec-SFA-SM,HM-OU-CF-Pl,HM-Sec-SC,HM-SCI-3-FM,HMW-Sen-SC-12-DR,HMW-IO-12-Sw14-DR;.STATE,.OPEN,HM-Sec-Key-S,HM-LC-Sw4-WM,HM-LC-Sw1-Pl,HM-LC-SW1-FM,HM-LC-Sw2-FM,HM-LC-Sw1-SM,HM-LC-Sw4-PCB,HM-LC-Sw4-SM,HM-LC-Sw1-BA-PCB">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqGong", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqGauge" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Gauge" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions">
    <%
    if (this && this.data && this.data.attr) {
		if (this.data.attr('hqoptions')){
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
		}
		else {
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqGauge", this.view);
		}
    }
    %>
</script>
<script type="text/ejs" id="tplHqMotion" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Motion Detector" data-vis-render-visible="true" data-vis-attrs="hm_id;hqoptions" data-hqwidgets-filter=".STATE,.MOTION;">
    <%
    if (this && this.data && this.data.attr) {
		if (this.data.attr('hqoptions')){
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
		}
		else {
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqMotion", this.view);
		}
    }
    %>
</script>
<script type="text/ejs" id="tplHqLowbat" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Battery Indicator" data-vis-render-visible="true" data-vis-attrs="hqoptions" data-hqwidgets-filter=".LOWBAT">
    <%
    if (this && this.data && this.data.attr) {
        if (this.data.attr('hqoptions')){
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
        }
        else {
            vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqLowbat", this.view);
        }
    }
    %>
</script>
<script type="text/ejs" id="tplHqIp" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Ping device" data-vis-render-visible="true" data-vis-attrs="hqoptions" data-hqwidgets-filter="PING">
    <%
    if (this && this.data && this.data.attr) {
		if (this.data.attr('hqoptions')){
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
		} else {
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqIp", this.view);
		}
    }
    %>
</script>
<script type="text/ejs" id="tplHqCharts" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Charts" data-vis-render-visible="true" data-vis-attrs="hqoptions">
    <%
    if (this && this.data && this.data.attr) {
		if (this.data.attr('hqoptions')){
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
		} else {
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqCharts", this.view);
		}
    }
    %>
</script>
<script type="text/ejs" id="tplHqEventlist" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Eventlist" data-vis-render-visible="true" data-vis-attrs="hqoptions">
    <%
    if (this && this.data && this.data.attr) {
		if (this.data.attr('hqoptions')){
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, this.data.attr('hqoptions'), undefined, this.view);
		} else {
			vis.binds.hqWidgetsExt.hqButtonExt (this.data.wid, undefined, "tplHqEventlist", this.view);
		}
    }
    %>
</script-->

<script id="tplHqCheckbox" type="text/ejs" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="Checkbox" data-vis-type="ctrl,checkbox" data-vis-prev="<div id=&quot;prev_tplHqCheckbox&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;overflow: visible; width: 108px; height: 35px&quot;><div class=&quot;checkbox-small-orange-wrap&quot;><div class=&quot;checkbox-small-orange-button&quot;><input type=&quot;checkbox&quot; style=&quot;display: none;&quot;></div></div></div></div>" data-vis-update-style="true" data-vis-attrs="oid[nothing_selected]/id;staticValue;" data-vis-attrs0="checkboxSize[big]/select,big,small;checkboxColor[orange]/select,orange;readOnly/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 216px; height: 68px" id="<%= this.data.attr('wid') %>"  data-vis-resizable='{"disabled":true, "handles":"e"}'><%
            vis.binds.hqwidgets.checkbox.init(this.data.wid, this.view, this.data, this.style);
    %></div>
</script>

<script id="tplHqCircle" type="text/ejs" class="vis-tpl" data-vis-set="hqwidgets" data-vis-name="CircleKnob" data-vis-update-style="true" data-vis-type="ctrl,number,dimmer,knob" data-vis-prev="<img src=&quot;widgets/hqwidgets/img/prev/Prev_hqwidgetsCircleKnob.png&quot;></img>" data-vis-attrs="oid[nothing_selected]/id/changedButtonId;oid-working;oid-battery;oid-signal;" data-vis-attrs0="group.value;unit;min[0];max[100];digits[0]/number;step[1];is_comma[true]/checkbox;readOnly/checkbox;" data-vis-attrs1="group.center;caption;hideNumber/checkbox;" data-vis-attrs2="group.arc;angleOffset/slider,0,360,1;angleArc/slider,0,360,1;displayPrevious[true]/checkbox;" data-vis-attrs3="group.style;cursor/slider,1,350,1;thickness/slider,0.05,1,0.05;color/color;bgcolor/color;linecap/checkbox;anticlockwise/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 64px; height: 64px" id="<%= this.data.attr('wid') %>">
    <%
            vis.binds.hqwidgets.circle.init(this.data.wid, this.view, this.data);
    %>
    <input type="text" style="display:none"/></div>
</script>

<!-- --------------hqwidgets.html--- END -->
<!-- --------------jqplot.html--- START -->
<link rel="stylesheet" type="text/css" href="widgets/jqplot/css/jquery.jqplot.min.css">

<script type="text/javascript" src="widgets/jqplot/js/jquery.jqplot.min.js"></script>

<script type="text/javascript">

    if (vis.editMode) {
        // Add words for basic widgets
        $.extend(true, systemDictionary, {
            "background": {"en": "Background", "de": "Hintergrund", "ru": "Фон"},
            "group_ticks": {"en": "Ticks", "de": "Ticken", "ru": "Штрихи"},
            "ticks": {"en": "Ticks-Namen", "de": "Ticken-Beschriften", "ru": "Подписи штрихов"},
            "ticks_tooltip": {"en": "Divide with semicolon, e.g '10;50;70'", "de": "Mit Semikolon trennen, z.B. '10;50;70'", "ru": "Разделять точкой запятой, например '10;50;70'"},
            "showTickLabels": {"en": "Show tick labels", "de": "Zeige Ticken-Beschriftungen", "ru": "Показать подписи"},
            "tickPadding": {"en": "Tick padding", "de": "Ticken-Abstand", "ru": "Отступ штрихов"},
            "group_intervals": {"en": "Intervals", "de": "Intervale", "ru": "Интервалы"},
            "intervals": {"en": "Intervals", "de": "Intervale", "ru": "Отрезки"},
            "intervals_tooltip": {"en": "Divide with semicolon, e.g '10;50;70'", "de": "Mit Semikolon trennen, z.B. ''10;50;70'", "ru": "Разделять точкой запятой, например '10;50;70'"},
            "intervalColors": {"en": "Interval colors", "de": "Intervalfarben", "ru": "Цвета интервалов"},
            "intervalColors_tooltip": {"en": "Divide with semicolon, e.g 'green;#0000FF;red'", "de": "Mit Semikolon trennen, z.B. 'green;#0000FF;red'", "ru": "Разделять точкой запятой, например 'green;#0000FF;red'"},
            "intervalInnerRadius": {"en": "Inner interval raduis", "de": "Inner Inerval-Radius", "ru": "Внутренний радиус интервалов"},
            "intervalOuterRadius": {"en": "Outer interval radius", "de": " Außenmaß-Radius", "ru": "Внешний радиус интервалов"},
            "diameter": {"en": "Diameter", "de": "Diameter", "ru": "Диаметер"},
            "padding": {"en": "Padding", "de": "Abstand", "ru": "Отступ"},
            "group_shadow": {"en": "Shadow", "de": "Schatten", "ru": "Тень"},
            "shadowOffset": {"en": "shadowOffset", "de": "Schatten offset", "ru": "Сдвиг тени"},
                "shadowAlpha": {"en": "Shadow transparence", "de": "Schatten Alpha", "ru": "Прозрачость тени"},
            "shadowDepth": {"en": "Shadow depth", "de": "Schattentiefe", "ru": "Глубина тени"},
            "group_ring": {"en": "Ring", "de": "Rand", "ru": "Кайма"},
            "ringColor": {"en": "Ring color", "de": "Randfarbe", "ru": "Цвет окантовки"},
            "ringWidth": {"en": "Ring width", "de": "Randbreite", "ru": "Ширина окантовки"},
            "group_needle": {"en": "Needle", "de": "Zeiger", "ru": "Стрелка"},
            "needleThickness": {"en": "Needle thickness", "de": "Zeigerdicke", "ru": "Ширина стрелки"},
            "needlePad": {"en": "Needle pad", "de": "Zeigeroffset", "ru": "Радиус основания"},
            "hubRadius": {"en": "Hub radius", "de": "Zeigerbasis-Radius", "ru": "Основание стрелки"}
        });
    }

    vis.binds.jqplot = {
        gauge: function (el, data) {
            var $this = $(el).find('div[id$="_gauge"]');
            if (!data) return;
            var options = {
                title: data.title,
                seriesDefaults: {
                    rendererOptions: {
                        min: (data.min ? parseFloat(data.min) : undefined),
                        max: (data.max ? parseFloat(data.max) : undefined),
                        ticks: (data.ticks ? jQuery.map(data.ticks.split(';'), Number) : undefined),
                        intervals: (data.intervals ? jQuery.map(data.intervals.split(';'), Number) : undefined),
                        intervalColors: (data.intervalColors ? data.intervalColors.split(';') : undefined),
                        label: data.label,
                        showTickLabels: ((data.showTickLabels === "false" || data.showTickLabels === false) ? false : undefined),
                        intervalInnerRadius: (!data.intervalInnerRadius ? undefined : parseInt(data.intervalInnerRadius, 10)),
                        intervalOuterRadius: (!data.intervalOuterRadius ? undefined : parseInt(data.intervalOuterRadius, 10)),
                        diameter: (!data.diameter ? undefined : parseInt(data.diameter, 10)),
                        padding: (!data.padding ? undefined : parseInt(data.padding, 10)),
                        shadowOffset: (!data.shadowOffset ? undefined : parseInt(data.shadowOffset, 10)),
                        shadowAlpha: (!data.shadowAlpha ? undefined : parseInt(data.shadowAlpha, 10)),
                        shadowDepth: (!data.shadowDepth ? undefined : parseInt(data.shadowDepth, 10)),
                        background: data.background, ringColor: data.ringColor,
                        tickColor: data.tickColor,
                        ringWidth: (!data.ringWidth ? undefined : parseInt(data.ringWidth, 10)),
                        hubRadius: (!data.hubRadius ? undefined : parseInt(data.hubRadius, 10)),
                        tickPadding: (!data.tickPadding ? undefined : parseInt(data.tickPadding, 10)),
                        needleThickness: (!data.needleThickness ? undefined : parseInt(data.needleThickness, 10)),
                        needlePad: (!data.needlePad ? undefined : parseInt(data.needlePad, 10)),
                        ringWidth: (!data.ringWidth ? undefined : parseInt(data.ringWidth, 10))
                    }
                }
            };
            if (options.seriesDefaults.rendererOptions.ticks && options.seriesDefaults.rendererOptions.ticks.length == 1) options.seriesDefaults.rendererOptions.ticks[1] = options.seriesDefaults.rendererOptions.ticks[0];

            $(el).data('options', data);

            setTimeout(function () {
                try {
                    var jqplotOptions = $.extend(true, {
                        title: {show: false},
                        grid: {
                            background: "transparent"
                        },
                        seriesDefaults: {
                            renderer: $.jqplot.MeterGaugeRenderer,
                            rendererOptions: {
                                min: 0,
                                max: 100
                            }
                        }
                    }, options);
                    var oid = $this.attr('data-oid');
                    var series;
                    if (oid != 'nothing_selected' && vis.states[oid + '.val'] !== undefined) {
                        series = [[vis.states[oid + '.val']]];
                    } else {
                        series = [[1, 0]];
                    }
                    var plot = $.jqplot($this.attr('id'), series, jqplotOptions);
                    vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                        plot.series[0].data = [[1, newVal]];
                        plot.redraw();
                    });
                } catch(e) {
                    servConn.logError('Cannot render widget jqplot: ' + e);
                }
            }, 20);

            if (vis.editMode) {
                $(el).resize(function () {
                    var timer = $(this).data('timer');
                    if (timer) clearTimeout(timer);
                    var that = this;
                    $(this).data('timer', setTimeout(function () {
                        $('#' + $(that).attr('id') + '_gauge').html('');
                        vis.binds.jqplot.gauge(that, $(that).data('options'));
                    }, 300));
                });
            }
        }
    };
</script>

<script type="text/ejs" id="tplJqplotGauge" class="vis-tpl" data-vis-prev="<img src=&quot;widgets/jqplot/img/Prev_MeterGauge.png&quot;></img>" data-vis-set="jqplot" data-vis-type="number" data-vis-name="MeterGauge" data-vis-attrs="oid;title;min/number;max/number;label;background/color;padding/slider,0,50,1;group.ticks;ticks;showTickLabels[true]/checkbox;tickPadding/slider,0,50,1;group.intervals;intervals;intervalColors;intervalInnerRadius/slider,0,550,1;intervalOuterRadius/slider,0,550,1;group.shadow;shadowOffset/slider,0,50,1;shadowAlpha/slider,0,1,0.05;shadowDepth/slider,0,50,1;group.ring;ringColor/color;ringWidth/slider,0,150,1;group.needle;needleThickness/slider,0,50,1;needlePad/slider,0,150,1;hubRadius/slider,0,150,1">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:460px; height:280px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqplot.gauge(el, data) %>>
        <div class="vis-widget-body" style="width:100%; height:100%">
            <div id="<%= this.data.attr('wid') %>_gauge" data-oid="<%= this.data.attr('oid') %>" style="width:100%; height:100%"/>
        </div>
    </div>
</script>

<!-- --------------jqplot.html--- END -->
<!-- --------------jqui.html--- START -->
<link rel="stylesheet" href="lib/css/jquery-ui-timepicker-addon-1.2.2.css">
<script type="text/javascript" src="lib/js/jquery-ui-timepicker-addon-1.2.2.js"></script>

<script type="text/javascript">
    "use strict";

    if (vis.editMode) {
        $.extend(systemDictionary, {
            "group_dialog":     {"en": 'Dialog',            "de": "Dialog",                 "ru": "Диалог"},
            "buttontext":       {"en": "Button text",       "de": "Knopftext",              "ru": "Надпись на кнопке"},
            "href":             {"en": "Link",              "de": "Link",                   "ru": "Ссылка"},
            "href_tooltip":     {"en": "Like 'http://google.com'", "de": "Wie 'http://google.com'", "ru": "Например 'http://google.com'"},
            "target":           {"en": "target",            "de": "target",                 "ru": "target"},
            "dialog_height":    {"en": "Dialog height",     "de": "Dialoghöhe",             "ru": "Высота окна"},
            "dialog_width":     {"en": "Dialog width",      "de": "Dialogbreite",           "ru": "Ширина окна"},
            "alt":              {"en": "Tooltip (alt)",     "de": "Tooltip (alt)",          "ru": "Всплывающая подсказка (alt)"},
            "text":             {"en": "Text",              "de": "Text",                   "ru": "Текст"},
            "invert_icon":      {"en": "Invert image",      "de": "Invertiere das Bild",    "ru": "Инвертировать картинку"},
            "html_dialog":      {"en": "HTML in dialog",    "de": "HTML im Dialog",         "ru": "HTML в диалоговом окне"},
            "preload":          {"en": "Prerender dialog",  "de": "Prerender Dialog",       "ru": "Рендер содержания в начале"},
            "closeOnClick":     {"en": "Close by click on dialog",  "de": "Zumachen beim Anklicken",       "ru": "Закрыть по нажатию в любом месте"},
            "preload_tooltip":  {
                "en": "If true, the content of dialog will be created at start of view.\x0AIf false, the content will be created during opening of dialog.\x0AWebcams or dynamic content require 'prerender'=false",
                "de": "Falls true, dann wird Inhalt vom Dialog sofort am Anfang gerendert.\x0AFalls false, dann beim Anzeigen vom Dialog.\x0AWebcams oder dynamischer Inhalt müssen prerender auf false haben",
                "ru": "Если да, то рендер содержания будет в самом начале.\x0AЕсли нет, то при показе диалога.\x0AWebCams или динамическое содержание требуют значение false."
            },
            "persistent":       {"en": "Persistent",        "de": "Dauernd",                "ru": "Существует постоянно"},
            "persistent_tooltip":  {
                "en": "If true, the dialog will be created at start and can\x0Abe shown by external command 'dialogOpen'.",
                "de": "Falls true, dann wird der Dialog sofort am Anfang erzeugtx0Aund mit dem Befehl 'dialogOpen' angezeigt werden konnte.",
                "ru": "Если да, то диалог будет создан в самом начале и\x0Aможет быть вызван внешней командой 'dialogOpen'."
            },
            "src_true":         {"en": "Icon by ON",         "de": "Ikon bei AN",           "ru": "Иконка при ВКЛ"},
            "alt_true":         {"en": "Tooltip by ON",      "de": "Tooltip bei AN",        "ru": "Подсказка при ВКЛ"},
            "src_false":        {"en": "Icon by OFF",        "de": "Ikon bei AUS",          "ru": "Иконка при ВЫКЛ"},
            "alt_false":        {"en": "Tooltip by OFF",     "de": "Tooltip bei AUS",       "ru": "Подсказка при ВЫКЛ"},
            "timeOnly":         {"en": "Time only",          "de": "Nur Zeit",              "ru": "Только время"},
            "inverted":         {"en": "Inverted value",     "de": "Wert invertiert",       "ru": "Иневртировать значение"},
            "click_id":         {"en": "Control ID",         "de": "Steuer-ID",             "ru": "Контроль-ID"},
            "click_value":      {"en": "Control value",      "de": "Steuerwert",            "ru": "Контроль-значение"},
            "false_text":       {"en": "Text inactive",      "de": "Inaktiv-Text",          "ru": "Неактивный текст"},
            "true_text":        {"en": "Text active",        "de": "Aktiv-Text",            "ru": "Активный текст"},
            "false_src":        {"en": "Icon inactive",      "de": "Inaktiv-Bild",          "ru": "Неактивная картинка"},
            "true_src":         {"en": "Icon active",        "de": "Aktiv-Bild",            "ru": "Активный картинка"},
            "false_alt":        {"en": "Tooltip inactive",   "de": "Inaktiv-Tooltip",       "ru": "Неактивная подсказка"},
            "true_alt":         {"en": "Tooltip active",     "de": "Aktiv-Tooltip",         "ru": "Активная подсказка"},
            "dialog_top":       {"en": "Top",                "de": "Position oben",         "ru": "Позиция сверху"},
            "dialog_left":      {"en": "Left",               "de": "Position links",        "ru": "Позиция слева"},
            "overflowX":        {"en": "Overflow X",         "de": "Overflow X",            "ru": "Overflow X"},
            "overflowY":        {"en": "Overflow Y",         "de": "Overflow Y",            "ru": "Overflow Y"},
            "noHeader":         {"en": "Hide header",        "de": "Kopfzeile verbergen",   "ru": "Скрыть заголовок"},
            "setId":            {"en": "Set Object ID",      "de": "Setze Objekt-ID",       "ru": "Записать в Объект с ID"},
            "setId_tooltip":    {
                "en": "By opening of dialog the Object ID\x0Awill be set with given value.",
                "de": "Beim Offnen vom Dialog folgende Object ID\x0Awird mit eingegebenem Wert gesetzt.",
                "ru": "При открытии диалога в объект с этим ID будет записано значение"
            },
            "setValue":         {"en": "Set value",          "de": "Setze Wert",            "ru": "Записываемое значение"},
            "oid-2":            {"en": "OID Range max.",     "de": "OID Bereich max.",      "ru": "ID Объекта макс"}, 
            "oid-2-working":    {"en": "OID Working max.",   "de": "OID Working max.",      "ru": "ID working макс"},
            "values":           {"en": "Values",             "de": "Werte",                 "ru": "Значения"},
            "values_tooltip":   {
                "en": "Values divided by semicolon:\x0A0;1;2",
                "de": "Werte sind mit Semikolon getrennt:\x0A0;1;2",
                "ru": "Значения разделены точкой с запятой:\x0A0;1;2"
            },
            "texts":            {"en": "Texts",             "de": "Texte",                  "ru": "Тексты"},
            "height":           {"en": "Height",            "de": "Höhe",                   "ru": "Высота"},
            "no_style":         {"en": "No jQuery style",   "de": "Ohne jQuery Stil",       "ru": "Без стиля jQuery"},
            "Password":         {"en": "Password",          "de": "Kennwort",               "ru": "Пароль"},
            "imageHeight":      {"en": "Image height %",    "de": "Bildhöhe in %",          "ru": "Высота иконки в %"},
            "texts_tooltip":   {
                "en": "Texts divided by semicolon:\x0AOn;Off;Auto",
                "de": "Texte sind mit Semikolon getrennt:\x0AAn;Aus;Auto",
                "ru": "Тексты разделены точкой с запятой:\x0AВкл;Выкл;Авто"
            }
        });
    }
    $.extend(systemDictionary, {
        "Password": {"en": "Password", "de": "Kennwort", "ru": "Пароль"}
    });

    vis.navChangeCallbacks.push(function (view) {
        $(".jqui-nav-state").each(function () {
            var $this = $(this);
            if ($this.attr("data-vis-nav") == view) {
                $this.removeClass("ui-state-default");
                $this.addClass("ui-state-active");
            } else {
                $this.addClass("ui-state-default");
                $this.removeClass("ui-state-active");
            }
        });
    });

    vis.binds.jqueryui = {
        navigationActive: function (el, nav_view) {
            var $this = $(el);
            if (window.location.hash.slice(1) == nav_view) {
                $this.removeClass("ui-state-default").addClass("ui-state-active");
            }
        },
        months: {
            "en": ['January', 'February', 'March', 'April',  'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            "de": ['Januar',  'Februar',  'März',  'April',  'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            "ru": ['Январь',  'Февраль',  'Март',  'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь',  'Октябрь', 'Ноябрь',   'Декабрь']
        },
        shortMonths: {
            "en": ['Jan', 'Feb', 'Mar',  'Apr', 'May', 'Jun',  'Jul',  'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            "de": ['Jan', 'Feb', 'Mär',  'Apr', 'Mai', 'Jun',  'Jul',  'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            "ru": ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июня', 'Июля', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек']
        },
        weekDays: {
            "en": ['Sunday',      'Monday',      'Tuesday',  'Wednesday', 'Thursday',   'Friday',  'Saturday'],
            "de": ['Sonntag',     'Montag',      'Dienstag', 'Mittwoch',  'Donnerstag', 'Freitag', 'Samstag'],
            "ru": ['Воскресение', 'Понедельник', 'Вторник',  'Среда',     'Четверг',    'Пятница', 'Суббота']
        },
        shortWeekDays: {
            "en": ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            "de": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
            "ru": ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
        },
        currentText: {
            "en": 'Now',
            "de": 'Jetzt',
            "ru": 'Сейчас'
        },
        closeText: {
            "en": 'Close',
            "de": 'Schließen',
            "ru": 'Закрыть'
        },
        timeText: {
            "en": 'Time',
            "de": 'Zeit',
            "ru": 'Время'
        },
        hourText: {
            "en": 'Hour',
            "de": 'Std',
            "ru": 'Час'
        },
        minuteText: {
            "en": 'Min',
            "de": 'Min',
            "ru": 'Мин'
        },
        secondText: {
            "en": 'Sec',
            "de": 'Sek',
            "ru": 'Сек'
        },
        timeOnlyTitle: {
            "en": 'Choose Time',
            "de": 'Zeit auswählen',
            "ru": 'Установите время'
        },
        activeHelper: function ($this, val, min, max, value, reverse) {
            if (val === true  || val === 'true')  val = max;
            if (val === false || val === 'false') val = min;

            if (max === undefined || max === '' || max === null) {
                max = 1;
                min = 0;
                val = (val === 'false' || val === false || val === 0 || val === '0' || val === '' || val === null || val === undefined) ? min : max;
            }

            if (reverse) {
                if (val == max) {
                    val = min;
                } else {
                    val = max;
                }
            }

            if (value === undefined && val > min && val !== true) {
                val = parseFloat(val) || 0;
            }

            if ((value === undefined && val > min) || (value !== undefined && val == value)) {
                $this.addClass('ui-state-active');
            } else {
                $this.removeClass('ui-state-active');
            }
        },
        active: function (el, reverse, _value) {
            var $this = $(el);
            var oid = $this.data('oid');
            var max = $this.data('max') || 1;
            var min = $this.data('min') || 0;
            if (oid) {
                vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                    vis.binds.jqueryui.activeHelper($this, newVal, min, max, _value, reverse);
                });
                vis.binds.jqueryui.activeHelper($this, vis.states.attr(oid + '.val'), min, max, _value, reverse);
            }
        },
        classes: function (el, reverse, _value) {
            var $this = $(el);
            if (!$this.data('no-style')) {
                $this.hover(function () {
                    $this.addClass('ui-state-hover');
                }, function () {
                    $this.removeClass('ui-state-hover');
                });
            } else {
                $this.removeClass('ui-widget ui-corner-all ui-state-default');
            }

            $this.css({position: 'absolute'});
            vis.binds.jqueryui.active(el, reverse, _value);
        },
        dialog: function (el, options, persistent, preload, html, closeOnClick) {
            var $dlg = $(el).parent().find('div.vis-widget-dialog');
            $dlg.data('preload', (!preload || preload == 'false') && !$dlg.html().replace(/\s/g, ''));
            $('[aria-describedby="' + $dlg.attr('id') + '"]').remove();

            options.width     = options.width  || options.dialog_width;
            options.height    = options.height || options.dialog_height;
            options.top       = options.top    || options.dialog_top;
            options.left      = options.left   || options.dialog_left;
            options.minHeight = options.height;
            options.minWidth  = options.width;

            // Show dialog in edit mode too
            if (1 || !vis.editMode) {
                $(el).parent().find('div.vis-widget-body').on('click touchstart', function () {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    if ($dlg.data('preload')) $dlg.html(html);

                    if (persistent) {
                        if (options.setId) vis.setValue(options.setId, options.setValue);
                        $dlg.dialog('open');
                        if (options.minHeight)   $dlg.css('min-height', options.minHeight);
                        if (options.minWidth)    $dlg.css('min-width', options.minWidth);
                        if (options.top  || options.top  === 0)  $dlg.parent().css('top', options.top);
                        if (options.left || options.left === 0) $dlg.parent().css('left', options.left);
                        if (options.overflowX) $dlg.css('overflow-x', options.overflowX);
                        if (options.overflowY) $dlg.css('overflow-y', options.overflowY);
                        if (options.noHeader) $dlg.parent().find('.ui-dialog-titlebar').css({background: 'rgba(0,0,0,0)', border: 0, color: 'rgba(0,0,0,0)'});
                        $dlg.parent().find('.ui-state-focus').blur();
                    } else {
                        $dlg.dialog($.extend({
                            autoOpen: true,
                            open: function () {
                                if (options.setId) vis.setValue(options.setId, options.setValue);
                                $(this).parent().css('z-index', 998);
                                if (options.minHeight)   $(this).css('min-height', options.minHeight);
                                if (options.minWidth)    $(this).css('min-width', options.minWidth);
                                if (options.top  || options.top  === 0)  $(this).parent().css('top', options.top);
                                if (options.left || options.left === 0) $(this).parent().css('left', options.left);
                                if (options.overflowX) $(this).css('overflow-x', options.overflowX);
                                if (options.overflowY) $(this).css('overflow-y', options.overflowY);
                                if (options.noHeader) $dlg.parent().find('.ui-dialog-titlebar').css({background: 'rgba(0,0,0,0)', border: 0, color: 'rgba(0,0,0,0)'});
                                $(this).parent().find('.ui-state-focus').blur();
                            },
                            close: function () {
                                if ($dlg.data('timer')) { clearTimeout($dlg.data('timer')); $dlg.data('timer', null)};
                                $dlg.dialog('destroy');
                                // Destroy content if not preloaded
                                if ($dlg.data('preload')) $dlg.html('');
                            }
                        }, options));

                        $dlg.data('inited', true);

                        if (closeOnClick) {
                            $dlg.unbind('click touchstart').on('click touchstart', function () {
                                $dlg.dialog('close');
                            });
                        }
                    }
                });
            }
            if (persistent) {
                $dlg.dialog($.extend({
                    autoOpen: false,
                    open: function () {
                        $dlg.parent().css({'z-index': 1000});
                        if ($dlg.data('preload')) $dlg.html(html);
                    },
                    close: function () {
                        if ($dlg.data('timer')) {
                            clearTimeout($dlg.data('timer'));
                            $dlg.data('timer', null);
                        }
                        // Destroy content if not preloaded
                        if ($dlg.data('preload')) $dlg.html('');
                    }
                }, options));

                $dlg.data('inited', true);

                if (closeOnClick) {
                    $dlg.unbind('click touchstart').on('click touchstart', function () {
                        $dlg.dialog('close');
                    });
                }
            }
        },
        dialogContainer: function (el, options, persistent, preload) {
            var $dlg = $(el).parent().find("div.vis-widget-dialog");
            options.width     = options.dialog_width;
            options.height    = options.dialog_height;
            options.top       = options.dialog_top;
            options.left      = options.dialog_left;
            options.minHeight = options.height;
            options.minWidth  = options.width;
            $dlg.dialog($.extend({
                autoOpen: false,
                close: function () {
                    if ($dlg.data('timer')) {
                        clearTimeout($dlg.data('timer'));
                        $dlg.data('timer', null);
                    }
                }
            }, options));

            if (!vis.editMode) {
                $(el).parent().find('div.vis-widget-body').on('click touchstart', function () {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    $dlg.find("div[id$='container']").each(function () {
                        var cview = $(this).attr('data-vis-contains');
                        if (!vis.views[cview]) {
                            $(this).append("error: view not found.");
                            return false;
                        } else if (cview == vis.activeView) {
                            $(this).append("error: view container recursion.");
                            return false;
                        }
                        vis.renderView(cview, true);
                        $("#visview_" + cview).appendTo(this);
                        $("#visview_" + cview).show();

                    });

                    if (options.setId) vis.setValue(options.setId, options.setValue);
                    var $id =  $('#' + $(this).parent().attr('id') + '_dialog');
                    $id.dialog('open');
                    if (options.minHeight)   $id.css('min-height', options.minHeight);
                    if (options.minWidth)    $id.css('min-width', options.minWidth);
                    if (options.top  || options.top === 0)  $id.parent().css('top', options.top);
                    if (options.left || options.left === 0) $id.parent().css('left', options.left);
                    if (options.overflowX) $id.css('overflow-x', options.overflowX);
                    if (options.overflowY) $id.css('overflow-y', options.overflowY);
                    if (options.noHeader) $dlg.parent().find('.ui-dialog-titlebar').css({background: 'rgba(0,0,0,0)', border: 0, color: 'rgba(0,0,0,0)'});
                    $id.parent().find('.ui-state-focus').blur();
                });
            } else {
                $(el).parent().find("div.vis-widget-body").show();
            }
        },
        dialogAutoClose: function (el, timeout) {
            var $dialog = $('#' + $(el).parent().attr('id') + '_dialog');

            if (timeout === true || timeout === 'true') timeout = 100;

            $dialog.on('dialogopen', function () {
                $dialog.find('input').on('click', function () {
                    var timer = $dialog.data('timer');
                    if (timer) clearTimeout(timer);
                    $dialog.data('timer', setTimeout(function () {
                        $dialog.data('timer', null);
                        $dialog.dialog('close');
                    }, timeout));
                });
            });
        },
        dialogClose: function (el, options) {
            if (!$(el).data('no-style')) {
                setTimeout(function () {
                    $(el).button({
                        icons: {
                            primary: options.iconClass ? 'ui-icon-' + options.iconClass : null
                        }
                    });
                }, 0);
            }
            $(el).click(function () {
                if (options.dlgName) {
                    $('#' + options.dlgName + '_dialog').dialog('close');
                } else {
                    var $parent = $(this).parent().parent().parent();
                    var $dlg = $parent.find('.vis-widget-dialog');
                    if ($dlg.length) {
                        $dlg.dialog('close');
                        return;
                    }
                    $parent = $parent.parent();
                    $dlg = $parent.find('.vis-widget-dialog');
                    if ($dlg.length) {
                        $dlg.dialog('close');
                        return;
                    }
                    $parent = $parent.parent();
                    $dlg = $parent.find('.vis-widget-dialog');
                    if ($dlg.length) {
                        $dlg.dialog('close');
                        return;
                    }
                    $parent = $parent.parent();
                    $dlg = $parent.find('.vis-widget-dialog');
                    if ($dlg.length) {
                        $dlg.dialog('close');
                        return;
                    }
                }
            });
        },
        input: function (el, options) {
            var $this  = $(el);
            var oid    = $this.attr('data-oid');
            var digits = options;
            if (!$this.data('no-style')) {
                $this.button().addClass('ui-state-default');
            } else {
                $this.removeClass('ui-widget ui-corner-all ui-state-default');
            }
            $this.css({
                'font':       'inherit',
                //'color' :   'inherit',
                'text-align': 'left',
                'outline':    'none',
                'cursor':     'text',
                height:       '50%'
                }).change(function () {
                    vis.setValue(oid, $(this).val());
                });

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                if (digits && digits != "") newVal = parseFloat(newVal).toFixed(digits);

                $this.val(newVal);
            });
            var val = vis.states[oid + '.val'];
            if (digits && digits != "") {
                val = parseFloat(vis.states[oid + '.val']).toFixed(digits);
            }
            $this.val(val);
        },
        inputDate: function (el, options) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            var datepickerOptions = $.extend(true, {
                dateFormat:      'yy-mm-dd',
                monthNamesShort: vis.binds.jqueryui.shortMonths[vis.language],
                monthNames:      vis.binds.jqueryui.months[vis.language],
                dayNamesMin:     vis.binds.jqueryui.shortWeekDays[vis.language],
                showAnim:        "fadeIn",
                firstDay: 1,
                currentText:     vis.binds.jqueryui.currentText[vis.language],
                closeText:       vis.binds.jqueryui.closeText[vis.language]

            }, options);

            $this.addClass("ui-widget ui-button ui-corner-all ui-state-default")
                    .css({
                        font:       'inherit',
                        //'color' :   'inherit',
                        'text-align': 'left',
                        outline:    'none',
                        cursor:     'text',
                        height:     '95%'
                    });

            if (!vis.editMode) $this.datepicker(datepickerOptions);

            $this.change(function () {
                vis.setValue(oid, $(this).val());
            });
            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                $this.val(newVal);
            });
            $this.val(vis.states.attr(oid + '.val'));
        },
        inputDatetime: function (el, options) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            var timepickerOptions = $.extend(true, {
                dateFormat:      'yy-mm-dd',
                monthNamesShort: vis.binds.jqueryui.shortMonths[vis.language],
                monthNames:      vis.binds.jqueryui.months[vis.language],
                dayNamesMin:     vis.binds.jqueryui.shortWeekDays[vis.language],
                showAnim:        'fadeIn',
                firstDay:        1,
                timeText:        vis.binds.jqueryui.timeText[vis.language],
                hourText:        vis.binds.jqueryui.hourText[vis.language],
                minuteText:      vis.binds.jqueryui.minuteText[vis.language],
                secondText:      vis.binds.jqueryui.secondText[vis.language],
                currentText:     vis.binds.jqueryui.currentText[vis.language],
                closeText:       vis.binds.jqueryui.closeText[vis.language],
                timeOnlyTitle:   vis.binds.jqueryui.timeOnlyTitle[vis.language],
                minuteGrid:      undefined,
                hourGrid:        undefined,
                secondGrid:      undefined,
                timeOnly:        false,
                showSecond:      true,
                timeFormat:      'HH:mm:ss',
                pickerTimeFormat: 'HH:mm:ss'
            }, options);
            $this.addClass("ui-state-default")
                    .css({
                        'font':       'inherit',
                        //'color':    'inherit',
                        'text-align': 'left',
                        'outline':    'none',
                        'cursor':     'text',
                        height:       '95%'
                    });
            // Store options
            $this[0].__options = options;

            if (!vis.editMode) {
                $this.datetimepicker(timepickerOptions).button();
            } else {
                $this.addClass("ui-widget ui-button ui-corner-all");
            }
            $this.change(function () {
                var $this = $(this);
                var val = $this.val();
                /*if ($this[0].__options && !$this[0].__options.showSecond) {
                 var vals = val.split(':');
                 if (vals.length == 3) {
                 val = vals[0] + ":" + vals[1];
                 }
                 }*/
                vis.setValue(oid, val);
            });
            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                $this.val(newVal);
            });
            $this.val(vis.states.attr(oid + '.val'));
        },
        inputset: function (el, options) {
            var digits = options;
            var $this = $(el);
            var input = '#' + $this.attr('id').slice(0, -3) + 'input';
            var noJsStyle = $(el).data('no-style');

            var oid = $this.attr('data-oid');
            if (!noJsStyle) $this.button();

            $this.css({'padding-left': 5,'padding-right': 5});

            if (!vis.editMode) {
                $this.on('click touchstart', function () {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    vis.setValue(oid,  $(input).val());
                });
            }
            if (!noJsStyle) $this.prev().button();
            $this.prev().addClass('ui-state-default')
                    .css({
                        font:            'inherit',
                        'padding-left':  5,
                        'padding-right': 5,
                        //'color' :   'inherit',
                        'text-align':   'left',
                        outline:        'none',
                        cursor:         'text',
                        height:         '95%'
                    });
            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                if (digits && digits != '') {
                    newVal = parseFloat(newVal).toFixed(digits);
                }
                $(input).val(newVal);

            });
            var newVal = vis.states[oid + '.val'];
            if (digits && digits != '') newVal = parseFloat(newVal).toFixed(digits);
            $(input).val(newVal);
        },
        multiselect: function (el, options, isOpen) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            var noJsStyle = $this.attr('data-no-style');
            $this.find('option:selected').removeAttr('selected');
            $this.find('option[value="' + vis.states[oid + '.val'] + '"]').attr('selected', true);

            if (noJsStyle !== true && noJsStyle !== 'true') {
                $this.multiselect($.extend({
                    minWidth:         $this.parent().parent().width() - 7,
                    multiple:         false,
                    header:           false,
                    noneSelectedText: false,
                    selectedList:     1
                }, options)).change(function () {
                    var val = $this.find('option:selected').val();
                    if (parseFloat(val).toString() == val) val = parseFloat(val);
                    if (val === 'true')  val = true;
                    if (val === 'false') val = false;
                    if (!vis.editMode) vis.setValue(oid, val);
                });
            } else {
                $this.change(function () {
                    var val = $this.find('option:selected').val();
                    if (parseFloat(val).toString() == val) val = parseFloat(val);
                    if (val === 'true') val = true;
                    if (val === 'false') val = false;
                    if (!vis.editMode) vis.setValue(oid, val);
                });
            }

            $this.find('option:selected').removeAttr('selected');
            $this.find("option[value='" + vis.states[oid + '.val'] + "']").attr('selected', true);
            $this.prop('disabled', vis.editMode);
            if (noJsStyle !== true && noJsStyle !== 'true') {
                $this.multiselect('refresh');
            }

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                $this.find('option:selected').removeAttr('selected');
                $this.find('option[value="' + newVal + '"]').attr('selected', true);
                if (noJsStyle !== true && noJsStyle !== 'true') {
                    $this.multiselect('refresh');
                }
            });

            if (vis.editMode) {
                if (noJsStyle !== true && noJsStyle !== 'true') {
                    if (isOpen) $this.multiselect('open');
                }

                vis.bindWidgetClick(el.id);
                $this.parent().parent().resize(function () {
                    if (noJsStyle !== true && noJsStyle !== 'true') {
                        $this.multiselect('option', 'minWidth', $(this).width() - 7);
                    }
                });
            }
        },
        slider: function (el, options) {
            var $this = $(el);
            var oid = $this.attr('data-oid');
            var oid2 = $this.attr('data-oid2');
            var oid_val = 0;
            var oid2_val = 0;
            var wid = $this.attr("data-oid-working");
            var wid2 = $this.attr("data-oid2-working");
            var settings = $.extend({
                range: oid2 ? true : false,
                min: 0,
                max: 100,
                step: 1,
                value: parseFloat(vis.states.attr(oid + '.val')),
                slide: function (e, ui) {
                    // Slider -> Observable

                    if (oid2) {
                        if (options.inverted) {
                            ui.values[0] = (settings.max - ui.values[0]) + settings.min;
                            ui.values[1] = (settings.max - ui.values[1]) + settings.min;
                        }

                        vis.setValue(oid, ui.values[0]); //.toFixed(6));
                        vis.setValue(oid2, ui.values[1]); //.toFixed(6));
                    } else {
                        if (options.inverted) ui.value = (settings.max - ui.value) + settings.min;
                        vis.setValue(oid, ui.value); //.toFixed(6));
                    }

                }
            }, options);

            settings.inverted = (settings.inverted === 'true' || settings.inverted === true);

            if (isNaN(settings.value)) settings.value = 0;
            if (isNaN(settings.min))   settings.min = 0;
            if (isNaN(settings.max))   settings.max = 100;
            if (isNaN(settings.step))  settings.step = (settings.max - settings.min) / 100;

            settings.min = parseFloat(settings.min);
            settings.max = parseFloat(settings.max);
            settings.value = parseFloat(settings.value);

            if (settings.inverted) settings.value = (settings.max - settings.value) + settings.min;

            $this.slider(settings);

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                // console.log("slider newVal="+JSON.stringify(newVal));
                // If device not in working state
                if (!vis.states.attr(wid + '.val')) {

                    if (settings.inverted) {
                        oid_val = (settings.max - parseFloat(newVal)) + settings.min;
                    } else {
                        oid_val = parseFloat(newVal);
                    }
                    if ($this.slider('instance')) {
                        if (oid2) {
                            $this.slider('values', [oid_val, oid2_val]);
                        } else {
                            $this.slider('value', oid_val);
                        }
                    }
                }
            });
            if (oid2) {
                vis.states.bind(oid2 + '.val', function (e, newVal, oldVal) {
//                     console.log("slider newVal="+JSON.stringify(newVal));
                    // If device not in working state
                    if (!vis.states.attr(wid2 + '.val')) {
                        oid2_val = parseFloat(newVal);
                        if (settings.inverted) {
                            oid2_val = (settings.max - parseFloat(newVal)) + settings.min;
                        } else {
                            oid2_val = parseFloat(newVal);
                        }
                        if ($this.slider('instance')) {
                            $this.slider('values', [oid_val, oid2_val]);
                        }
                    }
                });

                oid_val = vis.states.attr(oid + '.val');
                oid2_val = vis.states.attr(oid2 + '.val');
                if (settings.inverted) {
                    oid_val = (settings.max - oid_val) + settings.min;
                    oid2_val = (settings.max - oid2_val) + settings.min;
                }
                $this.slider('values', [oid_val, oid2_val]);
            }

            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 500,
                    values: [75, 300],
                    slide: function (event, ui) {
                        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                    }
                });
                $("#amount").val("$" + $("#slider-range").slider("values", 0) +
                        " - $" + $("#slider-range").slider("values", 1));
            })
        },
        button: function (el, value) {

            if ($(el).data('no-style')) return;
            setTimeout(function(){
                $(el).button();
            },0)

        },
        buttonDialog: function (el) {
            if ($(el).data('no-style')) return;
            setTimeout(function () {
                $(el).button();
            }, 0);
        },
        buttonLink: function (el, href) {
            if (!$(el).data('no-style')) {
                setTimeout(function () {
                    $(el).button();
                }, 0);
            }
            $(el).click(function () {
                if (!vis.editMode && href) window.location.href = href;
            });
        },
        buttonLinkBlank: function (el, href) {
            if (!$(el).data('no-style')) {
                setTimeout(function () {
                    $(el).button();
                }, 0);
            }
            $(el).click(function () {
                if (!vis.editMode && href) window.open(href);
            });
        },
        radio: function (el, options, process) {
            if (!process) {
                setTimeout(function () {
                    vis.binds.jqueryui.radio(el, process, true);
                }, 50);
                return;
            }
            var settings = $.extend({}, options);
            var $this = $(el);
            var oid = $this.attr('data-oid');

            // Observable -> Buttonset
            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                $this.find('input').removeAttr('checked');
                if (newVal === true || newVal === 'true') {
                    newVal = 1;
                } else
                if (newVal === false || newVal === 'false') {
                    newVal = 0;
                }
                $this.find('input').prop('checked', false);
                $this.find('input[value="' + newVal + '"]').prop('checked', true);
                $this.find('input').each(function () {
                    if ($(this).button('instance')) $(this).button('refresh');
                });
            });

            var val = vis.states.attr(oid + '.val');

            if (val === true  || val === 'true')  { val = 1; }
            if (val === false || val === 'false') { val = 0; }
            setTimeout(function () {
                //console.log(val + ' ' + $this.find('input[value="' + val + '"]').length);
                $this.find('input').prop('checked', false);
                $this.find('input[value="' + val + '"]').prop('checked', true);
                $this.buttonset(settings);

                $this.find('input').each(function () {
                    if ($this.button('instance')) $(this).button('refresh');
                });
                if (!vis.editMode) {
                    // Buttonset -> Observable
                    $this.find('input').on('click touchstart', function () {
                        // Protect against two events
                        if (vis.detectBounce(this)) return;

                        var val = $(this).val();
                        var f = parseFloat(val);
                        if (f.toString() == val.toString()) {
                            vis.setValue(oid, f);
                        } else {
                            vis.setValue(oid, val);
                        }
                    });
                }
            }, 50);
        },
        iconHttpGet: function (el, url) {
            if (vis.editMode) return;

            var $this = $(el).parent();
            $this.on('click touchstart', function (e) {
                // Protect against two events
                if (vis.detectBounce(this)) return;

                vis.conn.httpGet(url);
                e.preventDefault();
            });
        },
        hueColormode: function (el, oid) {
            var $hue = $(el).parent().find('.hue-mode-hue');
            var $ct  = $(el).parent().find('.hue-mode-ct');

            if (vis.states.attr(oid + '.val') == 'ct') {
                $hue.hide();
                $ct.show();
            } else {
                $ct.hide();
                $hue.show();
            }

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                if (newVal == 'ct') {
                    $hue.hide();
                    $ct.show();
                } else {
                    $ct.hide();
                    $hue.show();
                }
            });
        },

        _disable: function () {
            $("div#vis_container").find(".ui-slider").each(function () {
                if ($(this).slider('instance')) {
                    $(this).slider('disable').removeClass("ui-state-disabled");
                }
            });

            setTimeout(function () {
                $("div#vis_container").find("select[id$='_multiselect']").each(function () {
                    if ($(this).css("display") == "none") {
                        $(this).multiselect('disable').next().removeClass("ui-state-disabled").unbind('click touchstart', false);
                    }
                });
            }, 200);
            setTimeout(function () {
                $("div#vis_container").find("a[href]").each(function () {
                    $(this).on('click touchstart', function (e) {});
                });
            }, 200);
        },

        itoggle: function (el){
            var $this = $(el).parent();
            var oid = $this.parent().attr('data-oid') + '.val';
            var val = vis.states.attr(oid);
            var activeVal = $this.parent().data('val');
            if (activeVal === '' || activeVal === undefined) activeVal = null;

            if (activeVal !== null) {
                if (activeVal.toString() == val.toString()) {
                    $this.find(".imgToggleFalse").hide();
                    $this.find(".imgToggleTrue").show();
                }
            } else {
                if (val === 'false') val = false;
                if (val === 'true')  val = true;

                if (typeof val == 'string') {
                    var f = parseFloat(val);
                    if (f == val) {
                        val = f;
                    } else if (val !== '') {
                        val = true;
                    } else {
                        val = false;
                    }

                }
                if (val > 0) {
                    $this.find(".imgToggleFalse").hide();
                    $this.find(".imgToggleTrue").show();
                }
            }

            vis.states.bind(oid, function (e, val) {
                if (activeVal !== null) {
                    if (activeVal.toString() == val.toString()) {
                        $this.find(".imgToggleFalse").hide();
                        $this.find(".imgToggleTrue").show();
                    } else {
                        $this.find(".imgToggleTrue").hide();
                        $this.find(".imgToggleFalse").show();
                    }
                } else {
                    if (val === true || val === 'true' || parseFloat(val) > 0) {
                        $this.find(".imgToggleFalse").hide();
                        $this.find(".imgToggleTrue").show();
                    } else {
                        $this.find(".imgToggleTrue").hide();
                        $this.find(".imgToggleFalse").show();
                    }
                }
            });
        },
        calcValue: function (value, min, max) {
            if (!min) min = 0;
            if (max === null || max === undefined || max === '') max = 100;
            min = parseFloat(min);
            max = parseFloat(max);
            value = parseFloat(value);
            return min + value * (max - min);
        },
        calcImage: function (val, min, max, invert) {
            var max = (max !== undefined) ? max : 100;
            var min = (min !== undefined) ? min : 0;

            val = parseFloat(val);
            if (invert) val = max - val + min;
            var image = '';
            if (val >= max) {
                image = 10;
            } else if (val >= min + (max - min) * 0.9) {
                image = 9;
            } else if (val >= min + (max - min) * 0.8) {
                image = 8;
            } else if (val >= min + (max - min) * 0.7) {
                image = 7;
            } else if (val >= min + (max - min) * 0.6) {
                image = 6;
            } else if (val >= min + (max - min) * 0.5) {
                image = 5;
            } else if (val >= min + (max - min) * 0.4) {
                image = 4;
            } else if (val >= min + (max - min) * 0.3) {
                image = 3;
            } else if (val >= min + (max - min) * 0.2) {
                image = 2;
            } else if (val >= min + (max - min) * 0.1) {
                image = 1;
            } else {
                image = 0;
            }
            return image;
        },
        setSvgColor: function (el, color) {
            setTimeout(function () {
                el.parent().find('svg').remove();
                var $that = el;
                var imgURL = $that.attr('src');
                $.get(imgURL, function(data) {
                    // Get the SVG tag, ignore the rest
                    var $svg = jQuery(data).find('svg');

                    // Remove any invalid XML tags as per http://validator.w3.org
                    $svg = $svg.removeAttr('xmlns:a');
                    $svg = $svg.attr('width',  '100%');
                    $svg = $svg.attr('height', '100%');
                    $svg.find('*').each(function () {
                        var style = $(this).attr('style');
                        if (style) {
                            style = style.replace(/#FFFFFF/g, color);
                            $(this).attr('style', style);
                        }
                    });

                    // Replace image with new SVG
                    $that.replaceWith($svg);

                }, 'xml');
            }, 0);
        },
        navigationPw: function (el, data) {
            var $this = $(el);
            if (!$this.data('no-style')) {
                setTimeout(function () {
                    $($this).button();
                }, 100);
            }

            $($this).click(function () {
                $('body').append('<div id="NavPwDialog" style="text-align: center"><input  type="password"  id="inp_NavPw"><input style="width: 100px; margin-top: 20px" id="btn_navPwOk" value="' + _('Ok') + '"><input id="btn_navPwcancel" value="' + _('Cancel') + '" style="width: 100px; margin-top: 20px"></div>');

                $('#inp_NavPw').change(function () {
                    check_pw();
                });
                $('#btn_navPwOk').button().click(function () {
                    check_pw();
                });

                function check_pw() {
                    if (data._data.Password == $('#inp_NavPw').val()) {
                        $('#NavPwDialog').remove();
                        vis.changeView(data.attr('nav_view'), {
                            effect: data.attr('hide_effect'),
                            options: {},
                            duration: data.attr('hide_duration')
                        }, {
                            effect: data.attr('show_effect'),
                            options: {},
                            duration: data.attr('show_duration')
                        },
                        data.attr('sync'));
                    } else {
                        $('#inp_NavPw').val('');
                        var bg = $('#inp_NavPw').data('bg');
                        if (!bg) {
                            bg = $('#inp_NavPw').css('background-color');
                            $('#inp_NavPw').data('bg', bg);
                        }
                        $('#inp_NavPw').css('background-color', '#FF0000').animate({'background-color': bg}, 500);
                    }
                }

                $('#btn_navPwcancel').button().click(function () {
                    $('#NavPwDialog').remove();
                });
                $('#NavPwDialog').dialog({
                    title: _('Password'),
                    modal: true
                });
            })
        }
    };
</script>

<script id="tplJquiButtonLink" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiButtonLink&quot; style=&quot; position: relative; text-align: initial;&quot;><div class=&quot;vis-widget_prev ui-selectee ui-selected&quot; style=&quot;height: 30px&quot;> <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;button&quot; value=&quot; Button &quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> </div> </div>" data-vis-set="jqui" data-vis-type="static" data-vis-name="Button Link" data-vis-attrs="buttontext[Text];href;html_prepend/html;html_append/html;padding[5]/slider,0,100,1;no_style/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" >
            <%== this.data.attr("html_prepend") %>
            <button style="width:100%; height:100%" data-no-style="<%= this.data.attr('no_style') %>" data-vis-link="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.jqueryui.buttonLink(el, data.attr('href')); %> style="padding: <%= this.data.attr('padding') %>px"><%== this.data.attr('buttontext') %></button>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplJquiButtonLinkBlank" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiButtonLinkBlank&quot; style=&quot; position: relative; text-align: initial;padding: 4px;height: 30px&quot;><div  style=&quot;height: 30px&quot; class=&quot;vis-widget_prev ui-selectee ui-selected ui-draggable-handle&quot; data-vis-resizable=&quot;{&quot;disabled&quot;:true, &quot;handles&quot;:&quot;e&quot;}&quot;> <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;button&quot; value=&quot; Link &quot; data-vis-link=&quot;&quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> </div> </div>" data-vis-set="jqui" data-vis-type="static" data-vis-name="Button Link _blank" data-vis-attrs="buttontext[Text];href;html_prepend/html;html_append/html;padding[5]/slider,0,100,1;no_style/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" >
        <div class="vis-widget-body" >
            <%== this.data.attr("html_prepend") %>
            <button style="width:100%; height:100%" data-no-style="<%= this.data.attr('no_style') %>" data-vis-link="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.jqueryui.buttonLinkBlank(el, data.attr('href')); %> style="padding: <%= this.data.attr('padding') %>px"><%== this.data.attr('buttontext') %></button>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplIconLink" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplIconLink&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default &quot; style=&quot;width: 119px; height: 30px;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <a class=&quot;widget-link&quot; href=&quot;&quot; target=&quot;&quot; style=&quot;white-space:no-wrap; text-decoration: none; text-align: left; width:100%;height:100%;&quot;> <img src=&quot;widgets/jqui/img/internet-web-browser-2.png&quot; style=&quot; vertical-align: middle; height: 100%;&quot; alt=&quot;&quot;> Icon link </a> </div> </div></div>" data-vis-type="static" data-vis-name="Icon link" data-vis-attrs="src/image;imageHeight/slider,0,200,1;href;target/auto,,_blank,_self,_parent,_top;alt;text;invert_icon/checkbox">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
        styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>
    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 76px; height: 32px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
        <div class="vis-widget-body">
            <a class="widget-link" href="<%== this.data.attr('href') %>" target="<%== this.data.attr('target') %>" style="white-space:no-wrap; text-decoration: none; text-align: left; width:100%; height:100%;">
                <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="<%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" />
                <%== this.data.attr('text') %>
            </a>
        </div>
    </div>
</script>

<script id="tplIconHttpGet" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplIconHttpGet&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default &quot; style=&quot;width: 97px; height: 38px; &quot; > <div class=&quot;vis-widget-prev-body&quot;> <a class=&quot;widget-link&quot; style=&quot;white-space:no-wrap; text-decoration:none;text-align:left;width:100%;height:100%;&quot;><img style=&quot;vertical-align:middle;height:100%;&quot;>URL GET</a></div></div></div>" data-vis-type="static" data-vis-name="Icon HTTP GET" data-vis-attrs="url;src/image;imageHeight/slider,0,200,1;alt;text">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
    styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>
    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
        <div class="vis-widget-body">
            <a class="widget-link" href='#' style="white-space:no-wrap; text-decoration: none; text-align: left; width:100%; height:100%;">
                <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="<%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" /><%== this.data.attr('text') %>
            </a>
            <div <%= (el) -> vis.binds.jqueryui.iconHttpGet(el, data.attr('url')) %> />
        </div>
    </div>
</script>

<script id="tplJquiDialog" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-type="static,dialog" data-vis-name="HTML - Dialog" data-vis-attrs="html/text;setId/id;setValue;" data-vis-attrs0="group.dialog;html_dialog/text;title;noHeader/checkbox;modal/checkbox;dialog_width;dialog_height;persistent/checkbox;preload/checkbox;closeOnClick/checkbox;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit">

    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px; border: 1px solid #000; background: #fff; cursor: pointer" id="<%= this.data.attr('wid') %>" data-no-style="<%= this.data.attr('no_style') %>" >
        <div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
            <%== this.data.attr("html") %>
        </div>
        <div id="<%= this.data.attr('wid') %>_dialog" class="vis-widget-dialog" title="<%= this.data.attr('title') %>">
            <%== this.data.attr("preload") ? this.data.attr("html_dialog") : "" %>
        </div>
        <div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, data.attr('persistent'), data.attr('preload'), data.attr('html_dialog'), data.attr('closeOnClick')) %> />
    </div>
</script>

<script id="tplJquiIconDialog" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-type="static,dialog" data-vis-name="static - Icon - Dialog" data-vis-attrs="src/image;imageHeight/slider,0,200,1;alt;text;invert_icon/checkbox;setId/id;setValue;" data-vis-attrs0="group.dialog;html_dialog/text;title;noHeader/checkbox;modal/checkbox;dialog_width;dialog_height;persistent/checkbox;preload/checkbox;closeOnClick/checkbox;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
        styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>
    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 76px; height: 76px; cursor: pointer" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
        <div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
            <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="<%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" /><%== this.data.attr('text') %>
        </div>
        <div id="<%= this.data.attr('wid') %>_dialog" class="vis-widget-dialog" title="<%= this.data.attr('title') %>">
            <%== this.data.attr("preload") ? this.data.attr("html_dialog") : "" %>
        </div>
        <div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialog(el, data, data.attr('persistent'), data.attr('preload'), data.attr('html_dialog'), data.attr('closeOnClick')) %> />
    </div>
</script>

<script id="tplContainerDialog" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-name="container - HTML - view in jqui Dialog" data-vis-attrs="html/text;contains_view/views;setId/id;setValue;" data-vis-attrs0="group.dialog;title;noHeader/checkbox;modal/checkbox;dialog_width;dialog_height;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 130px; border: 1px solid #000; background: #fff; cursor: pointer" id="<%= this.data.attr('wid') %>">
        <div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
            <%== this.data.attr("html") %>
        </div>
        <div id="<%= this.data.attr('wid') %>_dialog" style="display:none" class="vis-widget-dialog" title="<%= this.data.attr('title') %>">
            <div id="<%= this.data.attr('wid') %>_container" data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body">
            </div>
        </div>
        <div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogContainer(el, data) %> />
    </div>
</script>

<script id="tplContainerDialogExternal" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-name="container - ext cmd - view in jqui Dialog" data-vis-attrs="html/text;contains_view/views;setId/id;setValue;" data-vis-attrs0="group.dialog;title;noHeader/checkbox;modal/checkbox;dialog_width;dialog_height;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 194px; height: 68px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="display:none; width: 190px; height: 64px; background-color: #333; color: #eee; cursor: pointer; border: 2px dashed red; opacity:0.8;">
            <b>External Container Dialog</b><br/>
            view: <%= this.data.attr('contains_view') %><br/>
            id: <%= this.data.attr('wid') %>
        </div>
        <div id="<%= this.data.attr('wid') %>_dialog" style="display:none" class="vis-widget-dialog" title="<%= this.data.attr('title') %>">
            <div id="<%= this.data.attr('wid') %>_container" data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body">
            </div>
        </div>
        <div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogContainer(el, data) %> />
    </div>
</script>

<script id="tplContainerIconDialog" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-name="container - Icon - view in jqui Dialog" data-vis-attrs="src/image;imageHeight/slider,0,200,1;alt;text;setId/id;setValue;" data-vis-attrs0="group.dialog;contains_view/views;title;noHeader/checkbox;modal/checkbox;dialog_width;dialog_height;invert_icon/checkbox;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
        styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>

    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 76px; height: 76px; cursor: pointer" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqueryui.classes(el) %>>
        <div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
            <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="<%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" /><%== this.data.attr('text') %>
        </div>
        <div id="<%= this.data.attr('wid') %>_dialog" style="display:none" class="vis-widget-dialog" title="<%= this.data.attr('title') %>">
            <div id="<%= this.data.attr('wid') %>_container" data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body"></div>
        </div>
        <div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogContainer(el, data) %> />
    </div>
</script>

<script id="tplContainerButtonDialog" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-name="container - Button - view in jqui Dialog" data-vis-attrs="html_prepend/text;html_append/text;buttontext[Text];setId/id;setValue;no_style/checkbox;" data-vis-attrs0="group.dialog;contains_view/views;title;noHeader/checkbox;modal/checkbox;dialog_width;dialog_height;padding[5]/slider,0,100,1;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>">
        <div id="<%= this.data.attr('wid') %>_body" class="vis-widget-body">
            <%== this.data.attr("html_prepend") %>
            <button id="<%= this.data.attr('wid') %>_button" name="<%= this.data.attr('wid') %>_button" data-no-style="<%= this.data.attr('no_style') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.jqueryui.buttonDialog(el); %> style="padding: <%= this.data.attr('padding') %>px"><%== this.data.attr('buttontext') %></button>
            <%== this.data.attr("html_append") %>
        </div>
        <div id="<%= this.data.attr('wid') %>_dialog" style="display:none" class="vis-widget-dialog" title="<%= this.data.attr('title') %>">
            <div id="<%= this.data.attr('wid') %>_container" data-vis-contains="<%= this.data.attr('contains_view') %>" class="vis-widget-body"></div>
        </div>
        <div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogContainer(el, data) %> />
    </div>
</script>

<script id="tplJquiButtonDialogClose" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiButtonDialogClose&quot; style=&quot; position: relative; text-align: initial;padding: 4px;height: 30px&quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle &quot;> <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;button&quot; value=&quot; Dialog close &quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> </div> " data-vis-set="jqui" data-vis-type="dialog" data-vis-name="Button dialog close" data-vis-attrs="html_prepend/text;html_append/text;buttontext[Close];iconClass[close];dlgName;hide_effect;hide_duration;show_effect;show_duration;no_style/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <%== this.data.attr("html_prepend") %>
            <button style="width:100%; height:100%" data-no-style="<%= this.data.attr('no_style') %>" <%= (el) -> vis.binds.jqueryui.dialogClose(el, {hideOptions: {effect: data.attr('hide_effect'), options:{}, duration: data.attr('hide_duration')}, iconClass: data.attr('iconClass'), dlgName: data.attr('dlgName')}) %>><%== this.data.attr('buttontext') %></button>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplJquiButtonNav" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiButtonNav&quot; style=&quot; position: relative; text-align: initial;padding: 4px;height: 30px&quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle &quot; style=&quot;left: 167px; top: 129px;&quot; > <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;button&quot; value=&quot; Nav Button &quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> </div> " data-vis-set="jqui" data-vis-type="navigation" data-vis-name="Button" data-vis-attrs="html_prepend/text;html_append/text;buttontext[Text];nav_view;hide_effect;hide_duration;show_effect;show_duration;no_style/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <%== this.data.attr("html_prepend") %>
            <button style="width:100%; height:100%" data-no-style="<%= this.data.attr('no_style') %>" <%= (el) -> vis.binds.jqueryui.button(el); vis.binds.jqueryui.navigationActive(el, data.attr('nav_view')); vis.binds.basic.navigation(el, {nav_view:data.attr('nav_view'),hideOptions:{effect:data.attr('hide_effect'),options:{},duration:data.attr('hide_duration')},showOptions:{effect:data.attr('show_effect'),options:{},duration:data.attr('show_duration')}}) %> ><%== this.data.attr('buttontext') %></button>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplJquiIconNav" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplJquiIconNav&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div data-vis-nav=&quot;&quot; class=&quot;vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default jqui-nav-state &quot; style=&quot;width: 130px; height: 33px;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <img src=&quot;/vis/widgets/jqui/img/internet-web-browser-2.png&quot; style=&quot;vertical-align:middle;height:100%;&quot; alt=&quot;&quot;>Nav button </div> </div></div>" data-vis-name="navigation - Icon" data-vis-attrs="src/image;imageHeight/slider,0,200,1;alt;text;nav_view;hide_effect;hide_duration;show_effect;show_duration">
    <div data-vis-nav="<%= this.data.attr('nav_view') %>" class="vis-widget ui-widget ui-button ui-corner-all ui-state-default jqui-nav-state <%== this.data.attr('class') %>" style="width: 76px; height: 76px;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.jqueryui.classes(el); vis.binds.jqueryui.navigationActive(el, data.attr('nav_view')); vis.binds.basic.navigation(el, {nav_view: data.attr('nav_view'), hideOptions: {effect: data.attr('hide_effect'), options: {}, duration: data.attr('hide_duration')}, showOptions: {effect: data.attr('show_effect'), options: {}, duration: data.attr('show_duration')}}) %>>
        <div class="vis-widget-body">
            <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" /><%== this.data.attr('text') %>

        </div>
    </div>
</script>

<script id="tplJquiNavPw" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplJquiNavPw&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot; class=&quot;wid_prev_content&quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle &quot; style=&quot;top: 445px; left: 314px; width: 116px; height: 35px;&quot;> <div class=&quot;vis-widget-prev-body&quot; style=&quot;text-align: center&quot;> <label style=&quot; display: none;&quot;>Input</label><input type=&quot;text&quot; value=&quot;Nav button Pw&quot; size=&quot;10&quot; data-o=&quot;&quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot; style=&quot;height: 20px;font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; text-align: left; outline: none; cursor: text;&quot;> </div> </div></div>" data-vis-name="navigation - Pw" data-vis-attrs="buttontext[Text];Password;nav_view;hide_effect;hide_duration;show_effect;show_duration;sync/checkbox;no_style/checkbox">
       <div class="vis-widget <%== this.data.attr('class') %>" style="width:76px;height:30px;" id="<%= this.data.attr("wid") %>">
        <div class="vis-widget-body">
            <button style="width:100%; height:100%" data-no-style="<%= this.data.attr('no_style') %>" <%= (el) -> vis.binds.jqueryui.navigationPw(el, data)%> ><%== this.data.attr('buttontext') %></button>
        </div>
    </div>
</script>

<script id="tplJquiInput" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiInput&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle &quot; style=&quot;top: 445px; left: 314px; width: 116px; height: 30px;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;text-align: center&quot;> <label style=&quot; display: none;&quot;>Input</label><input type=&quot;text&quot; value=&quot; Input&quot; size=&quot;10&quot; data-o class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot; style=&quot;font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; text-align: left; outline: none; cursor: text;&quot;> </div> " data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Input" data-vis-attrs="label[Input];oid;digits[0]/slider,0,10,1;size[10]/slider,10,100,1">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:275px;height:44px;" id="<%= this.data.attr("wid") %>" data-no-style="<%= this.data.attr('no_style') %>" >
        <div class="vis-widget-body">
            <label for="<%= this.data.attr('wid') %>_input"><%= ((this.data.attr('label') === undefined || this.data.attr('label') === null) ? '' : this.data.attr('label')) %></label>
            <input type="text" name="<%= this.data.attr('wid') %>_input" id="<%= this.data.attr('wid') %>_input" value="" size="<%= this.data.attr('size') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.input(el, data.digits); %> />
        </div>
    </div>
</script>

<script id="tplJquiBool" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-type="ctrl" data-vis-prev="<div id=&quot;prev_tplJquiBool&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;ui-widget ui-corner-all ui-state-default vis-widget_prev &quot; style=&quot;width: 79px; height: 25px;&quot;> <div class=&quot;vis-widget-prev-body&quot; style=&quot;text-align: center;padding-top: 5px;&quot;> true/false</div> </div></div>" data-vis-name="Html Bool" data-vis-attrs="oid;html_true;html_false">

    <div class="ui-widget ui-corner-all ui-state-default vis-widget <%== this.data.attr('class') %>" style="width:76px; height:76px" id="<%= this.data.attr('wid') %>"  data-no-style="<%= this.data.attr('no_style') %>"  data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.toggle(el); vis.binds.jqueryui.classes(el) %>>
        <div class="vis-widget-body">
            <div>
                <% if (vis.binds.basic.isFalse(vis.states.attr(this.data.oid + ".val"))) { %>
                    <%== this.data.attr("html_false") %>
                <% } else { %>
                    <%== this.data.attr("html_true") %>
                <% } %>
            </div>
        </div>
    </div>
</script>

<script id="tplJquiToogle" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiToogle&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;ui-widget ui-corner-all ui-state-default vis-widget_prev&quot; style=&quot;width: 90px; height: 19px; padding: 10px;&quot;> <div class=&quot;vis-widget-prev-body&quot;><label>Toggle Icon</label><img class=&quot;imgToggleFalse&quot; src=&quot;/vis/icon/add.png&quot; style=&quot; vertical-align:middle; height:100%&quot;></div></div></div>" data-vis-set="jqui" data-vis-type="ctrl,state" data-vis-name="Icon Toggle" data-vis-attrs="label;oid;src_true/image;imageHeight/slider,0,200,1;alt_true;src_false/image;alt_false;invert_icon/checkbox">

    <div class="ui-widget ui-corner-all ui-state-default vis-widget <%== this.data.attr('class') %>" style="width:76px; height:76px" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.toggle(el); vis.binds.jqueryui.classes(el) %> >
        <div class="vis-widget-body">
            <%
            var styles = "";
            if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
                styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
            }
            %>
            <label style="margin: 0" for="<%= this.data.attr('wid') %>_input"><%== this.data.attr('label') %></label>
            <img class="imgToggleFalse" <%= this.data.attr('src_false') ? 'src="' +  this.data.attr('src_false') + '"' : '' %> style="<%= styles %> vertical-align: middle; height:<%= this.data.attr('imageHeight') || 100 %>%"               alt="<%== this.data.attr('alt_false') %>" />
            <img class="imgToggleTrue"  <%= this.data.attr('src_true')  ? 'src="' +  this.data.attr('src_true')  + '"' : '' %> style="<%= styles %> vertical-align: middle; height:<%= this.data.attr('imageHeight') || 100 %>%; display:none" alt="<%== this.data.attr('alt_true')  %>" />
            <div <%= (el) -> vis.binds.jqueryui.itoggle(el) %>></div>
        </div>
    </div>
</script>

<script id="tplJquiInputDate" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplJquiInputDate&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 110px; height: 25px; overflow: visible; &quot;> <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;text&quot; value=&quot;2015-09-20&quot; size=&quot;10&quot; class=&quot;ui-widget ui-button ui-corner-all ui-state-default&quot; style=&quot;font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; text-align: left; outline: none; cursor: text;text-align:center;&quot;></div> </div></div>" data-vis-name="ctrl - Input Date" data-vis-attrs="oid/id;size[10]/slider,1,50,1">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:200px;height:40px;overflow: visible;text-align:center;" id="<%= this.data.attr("wid") %>">
        <% if (vis.editMode) { %>
			<div class="editmode-helper" />
		<% } %>
        <div class="vis-widget-body">
            <input type="text"  style="text-align:center;padding-left: 5px" name="<%= this.data.attr('wid') %>_input" id="<%= this.data.attr('wid') %>_input" value="" size="<%= this.data.attr('size') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.inputDate(el); %> />
        </div>
    </div>
</script>

<script id="tplJquiInputDatetime" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplJquiInputDatetime&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 110px; height: 39px; overflow: visible; text-align: center;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;text&quot; style=&quot;text-align: left; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; outline: none; cursor: text; &quot; value=&quot;18:00:00&quot; size=&quot;5&quot; class=&quot;ui-state-default ui-widget ui-button ui-corner-all&quot;> </div> </div></div>" data-vis-name="ctrl - Input Datetime" data-vis-attrs="oid;size/slider,1,50,1;timeOnly/checkbox;hideSeconds/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:200px;height:40px;overflow: visible;text-align:center;" id="<%= this.data.attr("wid") %>">
        <% if (vis.editMode) { %>
			<div class="editmode-helper" />
		<% } %>
        <div class="vis-widget-body">
            <input type="text" style="text-align:center;padding-left: 5px" name="<%= this.data.attr('wid') %>_input" id="<%= this.data.attr('wid') %>_input" value="" size="<%= this.data.attr('size') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.inputDatetime(el, {timeOnly:data.attr("timeOnly"),showSecond:!data.attr("hideSeconds")}); %> />
        </div>
    </div>
</script>

<script id="tplJquiInputSet" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplJquiInputSet&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 90px; height: 32px; overflow: visible;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <label></label> <input type=&quot;text&quot; value=&quot;Input&quot; size=&quot;2&quot; style=&quot;font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; padding-left: 5px; padding-right: 5px; text-align: left; outline: none; cursor: text;height:14px&quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> <input type=&quot;button&quot; style=&quot;padding-left: 5px; padding-right: 5px;&quot; value=&quot;Set&quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> </div> </div></div>" data-vis-name="ctrl - Input + Set-Button" data-vis-attrs="title;buttontext[Text];oid;unit;digits/slider,0,10,1;size/slider,1,50,1">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width:300px;height:44px;overflow:visible" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <label for="<%= this.data.attr('wid') %>_input"><%== this.data.attr('title') %></label>
            <input type="text" name="<%= this.data.attr('wid') %>_input" id="<%= this.data.attr('wid') %>_input"  data-no-style="<%= this.data.attr('no_style') %>" size="<%= this.data.attr('size') %>" style="font-size: 1.1em !important"/>
            <%== this.data.attr('unit') %>
            <input type="button" style="height: 100%" data-oid="<%= this.data.attr('oid') %>" name="<%= this.data.attr('wid') %>_set" id="<%= this.data.attr('wid') %>_set" value="<%== this.data.attr('buttontext') %>"  data-no-style="<%= this.data.attr('no_style') %>" <%= (el) -> vis.binds.jqueryui.inputset(el, data.digits); %>/>
        </div>
    </div>
</script>

<script id="tplJquiButtonState" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiButtonState&quot; style=&quot; position: relative; text-align: initial;padding: 4px; height: 30px &quot;><div style=&quot;left: 384px; top: 470px;&quot; class=&quot;vis-widget_prev ui-selectee ui-draggable-handle&quot; data-vis-resizable=&quot;{&quot;disabled&quot;:true, &quot;handles&quot;:&quot;e&quot;}&quot;> <div class=&quot;vis-widget-prev-body&quot;> <input type=&quot;button&quot; value=&quot; Button &quot; data-o data-val=&quot;&quot; class=&quot;ui-button ui-widget ui-state-default ui-corner-all&quot; role=&quot;button&quot;> </div> </div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Button State" data-vis-attrs="oid;html_prepend/html;html_append/html;buttontext[Text];value;no_style/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" >
            <%== this.data.attr("html_prepend") %>
            <button style="width:100%; height:100%" data-oid="<%= this.data.attr('oid') %>"  data-no-style="<%= this.data.attr('no_style') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.jqueryui.button(el, data.value); vis.binds.basic.state(el); %>><%== this.data.attr('buttontext') %></button>
            <%== this.data.attr("html_append") %>
        </div>
    </div>
</script>

<script id="tplJquiRadio" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiRadio&quot; style=&quot; position: relative; text-align: initial;padding: 4px;height: 30px&quot;><div style=&quot;top: 243px; left: 348px; font-size: 9px;&quot; class=&quot;vis-widget_prev ui-selectee ui-selected ui-draggable-handle&quot; data-vis-resizable=&quot;{&quot;disabled&quot;:true, &quot;handles&quot;:&quot;&quot;}&quot;> <div class=&quot;vis-widget-prev-body&quot;> <div data-o class=&quot;ui-buttonset&quot;> <input type=&quot;radio&quot; value=&quot;0&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>OFF</span></label> <input type=&quot;radio&quot; value=&quot;1&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active&quot; role=&quot;button&quot; aria-pressed=&quot;true&quot;><span class=&quot;ui-button-text&quot;>ON</span></label> </div> </div> </div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Radiobuttons on/off" data-vis-attrs="off_text[OFF];on_text[ON];oid;padding[5]/slider,0,100,1">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" data-vis-resizable='{"disabled":true, "handles":""}' >
        <div class="vis-widget-body" >
            <div id="<%= this.data.attr('wid') %>_radio" data-oid="<%= this.data.attr('oid') %>" style="display: flex" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
                <input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="0" checked='checked'/><label for="<%= this.data.attr('wid') %>_radio0" style="padding: <%= this.data.attr('padding') %>px"><%= this.data.off_text %></label>
                <input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="1"/><label for="<%= this.data.attr('wid') %>_radio1" style="padding: <%= this.data.attr('padding') %>px"><%= this.data.on_text %></label>
            </div>
        </div>
    </div>
</script>

<script id="tplJquiRadioList" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiRadioList&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div style=&quot;font-size: 8px;overflow:visible;height:20px&quot; class=&quot;vis-widget_prev ui-selectee ui-selected ui-draggable-handle&quot;> <div class=&quot;vis-widget-prev-body&quot;> <div data-o class=&quot;ui-buttonset&quot;> <input type=&quot;radio&quot; value=&quot;0&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>OFF</span></label> <input type=&quot;radio&quot; value=&quot;1&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>AUTO</span></label> </div> </div> </div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Radiobuttons ValueList" data-vis-attrs="oid;values[0§1§2];texts[OFF§ON§AUTO]">
    <div style=" width:250px; height:41px;overflow: visible" class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" data-vis-resizable='{"disabled":true, "handles":""}' >
        <div class="vis-widget-body" >
            <table id="<%= this.data.attr('wid') %>_radio" data-oid="<%= this.data.attr('oid') %>" style="display: flex" <%= (el) -> setTimeout(function () {vis.binds.jqueryui.radio(el)},100) %> class="vis-no-spaces"><tr class="vis-no-spaces">
                <%
                var values = (data.attr('values') ? data.attr('values').split(';') : []);
                var texts  = (data.attr('texts') ? data.attr('texts').split(';'): []);
                var wid = data.attr('wid');
                for (var val in values) {
                %>
                    <td class="vis-no-spaces"><input type="radio" id="<%= wid %>_radio<%= val %>" name="<%= wid %>_radio" value="<%== values[val] %>" /><label style="float: left" for="<%= wid %>_radio<%= val %>"><%= texts[val] %></label></td>
                <%
                }
                %>
            </tr></table>
        </div>
    </div>
</script>

<script id="tplJquiSelectList" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiSelectList&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle&quot; data-vis-resizable=&quot;{&quot;disabled&quot;:true, &quot;handles&quot;:&quot;&quot;}&quot; style=&quot;left: 336px; top: 323px;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <select data-o disabled=&quot;&quot; style=&quot;display: none;&quot;> <option value=&quot;0&quot;>OFF</option> <option value=&quot;1&quot;>ON</option> <option value=&quot;2&quot;>AUTO</option> </select><button type=&quot;button&quot; class=&quot;ui-multiselect ui-widget ui-state-default ui-corner-all&quot; aria-haspopup=&quot;true&quot; style=&quot;width: 86px;&quot;><span class=&quot;ui-icon ui-icon-triangle-2-n-s&quot;></span><span>OFF</span></button> </div> </div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Select ValueList" data-vis-attrs="oid;values[0§1§2]/text;texts[OFF§ON§AUTO]/text;height[100]/slider,15,500,1;open/checkbox;no_style/checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" >
        <% if (false && vis.editMode) { %>
			<div class="editmode-helper" />
		<% } %>
        <div class="vis-widget-body" >
            <select id="<%= this.data.attr('wid') %>_multiselect" data-no-style="<%= this.data.attr('no_style') %>" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> setTimeout(function (el_) { vis.binds.jqueryui.multiselect(el_, {height: (data.height || 220)}, data.open)}, 250, el); %> >
            <%
				var values = (data.attr('values') ? data.attr('values').split(';') : []);
				var texts  = (data.attr('texts') ? data.attr('texts').split(';'): []);
				for (var val in values) {
					%>
					<option value="<%= values[val] %>"><%= texts[val] %></option>
					<%
				}
            %>
            </select >
        </div>
    </div>
</script>

<script id="tplJquiRadioSteps" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiRadioSteps&quot; style=&quot;zoom: 0.99; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee ui-draggable-handle&quot; data-vis-resizable=&quot;{&quot;disabled&quot;:true, &quot;handles&quot;:&quot;e&quot;}&quot; style=&quot;left: 85px; top: 258px; font-size: 5px;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <div data-o class=&quot;ui-buttonset&quot;> <input type=&quot;radio&quot; value=&quot;0&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>aus</span></label> <input type=&quot;radio&quot; value=&quot;0.25&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>25%</span></label> <input type=&quot;radio&quot; value=&quot;0.5&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>50%</span></label> <input type=&quot;radio&quot; value=&quot;0.75&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-state-active&quot; role=&quot;button&quot; aria-pressed=&quot;true&quot;><span class=&quot;ui-button-text&quot;>75%</span></label> <input type=&quot;radio&quot; value=&quot;1&quot; class=&quot;ui-helper-hidden-accessible&quot;><label class=&quot;ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right&quot; role=&quot;button&quot; aria-pressed=&quot;false&quot;><span class=&quot;ui-button-text&quot;>100%</span></label> </div> </div> </div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Radiobuttons 25%" data-vis-attrs="oid;min;max">
    <div class="vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" data-vis-resizable='{"disabled": true, "handles": "e"}' >
        <div class="vis-widget-body" >
            <div id="<%= this.data.attr('wid') %>_radio"  data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.jqueryui.radio(el); %> >
                <input type="radio" id="<%= this.data.attr('wid') %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= vis.binds.jqueryui.calcValue(0,    this.data.attr('min'), this.data.attr('max')) %>" checked='checked'/><label for="<%= this.data.attr('wid') %>_radio0">aus</label>
                <input type="radio" id="<%= this.data.attr('wid') %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= vis.binds.jqueryui.calcValue(0.25, this.data.attr('min'), this.data.attr('max')) %>" checked='checked'/><label for="<%= this.data.attr('wid') %>_radio1">25%</label>
                <input type="radio" id="<%= this.data.attr('wid') %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= vis.binds.jqueryui.calcValue(0.5,  this.data.attr('min'), this.data.attr('max')) %>" checked='checked'/><label for="<%= this.data.attr('wid') %>_radio2">50%</label>
                <input type="radio" id="<%= this.data.attr('wid') %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= vis.binds.jqueryui.calcValue(0.75, this.data.attr('min'), this.data.attr('max')) %>" checked='checked'/><label for="<%= this.data.attr('wid') %>_radio3">75%</label>
                <input type="radio" id="<%= this.data.attr('wid') %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= vis.binds.jqueryui.calcValue(1,    this.data.attr('min'), this.data.attr('max')) %>"/><label for="<%= this.data.attr('wid') %>_radio4">100%</label>
            </div>
        </div>
    </div>
</script>

<script id="tplJquiSliderVertical" type="text/ejs" data-vis-attrs="oid;oid-2;oid-working;oid-2-working;min;max;step;inverted/checkbox" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiSliderVertical&quot; style=&quot;position: relative; text-align: initial;padding: 4px;overflow:visible;height:50px&quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 23px; height: 30px; overflow: visible !important;&quot;> <div class=&quot;vis-widget-prev-body &quot; style=&quot;width: 100%; padding: 4px; &quot;> <div class=&quot;sliderJQUI ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all&quot; id=&quot;19vlqqb6r_slider&quot; data-oid=&quot;nothing_selected&quot; data-oid-working=&quot;&quot; style=&quot;height:100%&quot;><span class=&quot;ui-slider-handle ui-state-default ui-corner-all&quot; tabindex=&quot;0&quot; style=&quot;bottom: 0%;&quot;></span></div></div> </div></div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Slider vertical">
    <div id="<%= this.data.attr("wid") %>" data-vis-resizable='{"minWidth":23, "maxWidth":23}' class="vis-widget" style="width:23px; height:160px; overflow:visible !important;">
        <div class="vis-widget-body <%== this.data.attr('class') %>" style="width: 100%; padding: 4px; ">
            <div class="sliderJQUI" id="<%= this.data.attr("wid") %>_slider" data-oid="<%= this.data.attr('oid') %>" data-oid2="<%= this.data.attr('oid-2') %>" data-oid-working="<%= this.data.attr('oid-working') %>"  data-oid2-working="<%= this.data.attr('oid-2-working') %>"<%= (el) -> vis.binds.jqueryui.slider(el, {min: parseFloat(data.min), max: parseFloat(data.max), step: parseFloat(data.step), orientation:"vertical", inverted: data.inverted}) %> style="height:100%"/></div>
        </div>
    </div>
</script>

<script id="tplJquiSlider" type="text/ejs" data-vis-attrs="oid;oid-2;oid-working;oid-2-working;min;max;step;inverted/checkbox" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplJquiSlider&quot; style=&quot;position: relative; text-align: initial;padding: 4px;overflow:visible&quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 80px; overflow: visible !important; left: 475px; top: 188px; position: absolute; height: 23px;&quot;> <div class=&quot;vis-widget-prev-body &quot; style=&quot;padding: 4px;&quot;> <div class=&quot;sliderJQUI ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all&quot; id=&quot;19vlqppi9_slider&quot; data-oid=&quot;nothing_selected&quot; data-oid-working=&quot;&quot;><span class=&quot;ui-slider-handle ui-state-default ui-corner-all&quot; tabindex=&quot;0&quot; style=&quot;left: 0%;&quot;></span></div></div> </div></div>" data-vis-set="jqui" data-vis-type="ctrl" data-vis-name="Slider horizontal">
    <div id="<%= this.data.attr("wid") %>" data-vis-resizable='{"minHeight":23, "maxHeight":23}' class="vis-widget" style="height:23; width:160px; overflow:visible !important;">
        <div class="vis-widget-body <%== this.data.attr('class') %>" style="padding: 4px;">
            <div class="sliderJQUI" id="<%= this.data.attr("wid") %>_slider" data-oid="<%= this.data.attr('oid') %>" data-oid2="<%= this.data.attr('oid-2') %>" data-oid-working="<%= this.data.attr('oid-working') %>"  data-oid2-working="<%= this.data.attr('oid-2-working') %>"<%= (el) -> vis.binds.jqueryui.slider(el, {min:parseFloat(data.min),max:parseFloat(data.max),step:parseFloat(data.step), inverted: data.inverted}) %> /></div>
        </div>
    </div>
</script>

<script id="tplIconState" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplIconState&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default &quot; style=&quot;width: 122.4px; height: 32.4px; position: absolute; left: 237px; top: 201px;&quot; id=&quot;19vlr5eto&quot; data-oid=&quot;dev1&quot; data-val=&quot;value&quot;> <div class=&quot;vis-widget-prev-body&quot;> <img src=&quot;/vis/widgets/jqui/img/internet-web-browser-2.png&quot; style=&quot; vertical-align:middle;height:100%;&quot; alt=&quot;&quot;>set value </div> </div></div>" data-vis-set="jqui" data-vis-name="ctrl - Icon State" data-vis-attrs="oid;value;text;src/image;imageHeight/slider,0,200,1;alt;invert_icon/checkbox">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
        styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>
    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 100px; height: 35px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.state(el); vis.binds.jqueryui.classes(el, null, data.value) %>>
        <div class="vis-widget-body">
            <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="<%= styles %> vertical-align: middle; height:<%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" /><%== this.data.attr('text') %>
        </div>
    </div>
</script>

<script id="tplIconStateBool" type="text/ejs" class="vis-tpl" data-vis-set="jqui" data-vis-prev="<div id=&quot;prev_tplIconStateBool&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default &quot; style=&quot;width: 100px; height: 25px;&quot; > <div class=&quot;vis-widget-prev-body&quot;> <img class=&quot;tplImgFalse&quot; src=&quot;/vis/img/bulb_on.png&quot; style=&quot; vertical-align:middle;height:100%;&quot; alt=&quot;&quot;>set value </div> </div></div>" data-vis-name="ctrl - Icon State / val - Icon Bool" data-vis-attrs="oid;click_id/id;click_value;false_text;true_text;false_src/image;true_src/image;imageHeight/slider,0,200,1;false_alt;true_alt;invert_icon/checkbox">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
        styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>
    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 100px; height: 35px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('click_value') %>" <%= (el) -> vis.binds.basic.state(el); vis.binds.jqueryui.classes(el, null, data.click_value) %>>
        <div class="vis-widget-body">
            <img class="imgToggleFalse" <%= this.data.attr('false_src') ? 'src="' +  this.data.attr('false_src') + '"' : '' %> style="               <%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('false_alt') %>"/ ><span class="imgToggleFalse"><%= this.data.attr('false_text') %></span>
            <img class="imgToggleTrue"  <%= this.data.attr('true_src')  ? 'src="' +  this.data.attr('true_src')  + '"' : '' %> style="display: none; <%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('true_alt')  %>" /><span class="imgToggleTrue" style="display:none"><%= this.data.attr('true_text')  %></span>
            <div <%= (el) -> vis.binds.jqueryui.itoggle(el) %>></div>
        </div>
    </div>
</script>

<script id="tplIconInc" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplIconInc&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-widget ui-button ui-corner-all ui-state-default ui-state-active &quot; style=&quot;width: 44px; height: 20px;&quot; data-vis-step=&quot;1&quot; data-val=&quot;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <img style=&quot; vertical-align:middle;height:100%;&quot;>+1 </div> </div></div>" data-vis-set="jqui" data-vis-name="ctrl - Icon Increment" data-vis-attrs="oid;step[1];minmax[100];text[+1];src/image;imageHeight/slider,0,200,1;alt;repeat_delay[800];repeat_interval[800];invert_icon/checkbox">
    <%
    var styles = "";
    if (this.data.invert_icon === 'true' || this.data.invert_icon === true) {
        styles = "filter: invert(1); -webkit-filter: invert(1); -moz-filter: invert(1); -o-filter: invert(1); -ms-filter: invert(1);";
    }
    %>
    <div class="vis-widget ui-widget ui-button ui-corner-all ui-state-default <%== this.data.attr('class') %>" style="width: 100px; height: 735px;" id="<%= this.data.attr('wid') %>" data-oid="<%= this.data.attr('oid') %>" data-vis-step="<%= this.data.attr('step') %>" data-val="<%= this.data.attr('active_value') %>" <%= (el) -> vis.binds.basic.increment(el,data.minmax,data.repeat_delay,data.repeat_interval); vis.binds.jqueryui.classes(el, null, data.minmax) %>>
        <div class="vis-widget-body">
            <img <%= this.data.attr('src') ? 'src="' +  this.data.attr('src') + '"' : '' %> style="<%= styles %> vertical-align: middle; height: <%= this.data.attr('imageHeight') || 100 %>%;" alt="<%== this.data.attr('alt') %>" /><%== this.data.attr('text') %>
        </div>
    </div>
</script>

<!-- --------------jqui.html--- END -->
<!-- --------------lcars.html--- START -->
<!--
    TODO - Slider Widgets
    TODO - Bar Widgets
    TODO - 4way Controller Widget
-->
<link rel="stylesheet" type="text/css" href="widgets/lcars/css/lcars.css">
<script type="text/javascript" src="widgets/lcars/js/jquery.lcars.js"></script>
<script type="text/javascript">

    "use strict";

    // Add words for lcars
    if (vis.editMode) {
        $.extend(systemDictionary, {
            "lcars_color":    {"en": "Color",             "de": "Farbe",                  "ru": "Цвет"},
            "edge_type":      {"en": "Edge type",         "de": "Bordertyp",              "ru": "Тип кромки"},
            "edge_direction": {"en": "Edge position",     "de": "Borderposition",         "ru": "Позиция"},
            "color_default":  {"en": "Dafault color",     "de": "Farbe",                  "ru": "Цвет по умолчанию"},
            "color_active":   {"en": "Active link color", "de": "Farbe von aktivem Link", "ru": "Цвет активной ссылки"},
            "line_height":    {"en": "Line height",       "de": "Linienhöche",            "ru": "Ширина линии"},
            "tl":             {"en": "Top left",          "de": "Oben links",             "ru": "Сверху слева"},
            "tr":             {"en": "Top right",         "de": "Oben rechts",            "ru": "Сверху справа"},
            "br":             {"en": "Bottom right",      "de": "Unten rechst",           "ru": "Снизу справа"},
            "bl":             {"en": "Bottom left",       "de": "Unten links",            "ru": "Снизу слева"},
            "frame_type":     {"en": "Type",              "de": "Typ",                    "ru": "Тип"},
            "frame_direction": {"en": "Direction",        "de": "Richtung",               "ru": "Расположение"},
            "speed":          {"en": "Speed",             "de": "Geschwindigkeit",        "ru": "Скорость"},
            "rows":           {"en": "Rows",              "de": "Zeilen",                 "ru": "Строк"},
            "cols":           {"en": "Columns",           "de": "Spalten",                "ru": "Колонок"},
            "r":              {"en": "Right",             "de": "Rechst",                 "ru": "Справа"},
            "l":              {"en": "Left",              "de": "Links",                  "ru": "Cлева"},
            "rounded":        {"en": "Rounded",           "de": "Abgerundet",             "ru": "Закругления"},
            "subtitle":       {"en": "Subtitle",          "de": "Untertitel",             "ru": "Подзаголо́вок"},
            "subtitle_show":  {"en": "Show",              "de": "Zeige",                  "ru": "Показать"},
            "subtitle_color": {"en": "subtitle_color",    "de": "Farbe",                  "ru": "Цвет"},
            "minmax":         {"en": "Mininum or maximum","de": "Mininum oder Maximum",   "ru": "Минимум или максимум"},
            "repeat_delay":   {"en": "Repeat delay",      "de": "Widerholungs- Verzögerung", "ru": "Задержка перед повтором"},
            "repeat_interval": {"en": "Repeat interval",  "de": "Widerholungs- Interval", "ru": "Интервал повтора"},
            "none":           {"en": "none",              "de": "keins",                  "ru": "нигде"},
            "both":           {"en": "both",              "de": "beide",                  "ru": "оба"},
            "step_tooltip":     {
                "en": "Can be positive or negative",
                "de": "Kann positiv oder negativ sein",
                "ru": "Может быть положительным или отрицательным"
            },
            "minmax_tooltip":     {
                "en": "If 'step' is positiv, the value is interpreted as maximum\x0Aif 'step' is negativ, then as minimum",
                "de": "Falls 'Schritt' positiv ist, dann hier wird Maximum eingegeben\x0AFalls 'Schritt' negativ ist, dann Mimimum",
                "ru": "Если 'шаг' положительный, то значение интепретируется как максимум\x0Aесли 'шаг' отрицательный, то как минимум"
            },
            "title_oid": {"en": "Object ID", "de": "Objekt ID", "ru": "ID Объекта"},
            "title_oid_tooltip": {
                "en": "You can enter here text as '(TEXT)'\x0Ato not read the value from variable\x0Aand to just show the specified text.",
                "de": "Man kann auch text in Klammern eingeben '(TEXT)'\x0Aum einfach Text und nicht\x0Adas Variablewert anzuzeigen.",
                "ru": "Можно ввести текст, как '(TEXT)'\x0Aдля того, что бы показать заданное слово,\x0Aа не значение переменной"
            },
            "title_prepend": {"en": "Prepend text", "de": "Präfix", "ru": "Префикс"},
            "title_append_singular": {"en": "Append if singular", "de": "Suffix singulär", "ru": "Суффикс единств. число"},
            "title_append_plural": {"en": "Append if plural", "de": "Suffix plüral", "ru": "Суффикс множ. число"},
            "title_digits": {"en": "Digits after comma", "de": "Nachkomma- Stellen", "ru": "Чисел после запятой"},
            "title_digits_tooltip": {
                "en": "Clear value to '' to disable the rounding.",
                "de": "Lösche das Wert zu '' um Rundung zu deaktivieren.",
                "ru": "Удалите значение полностью, что бы деактивировать округление"
            },

            "group_subtitle": {"en": "Subtitle", "de": "Untertitel", "ru": "Подзаголо́вок"},
            "subtitle_oid": {"en": "Object ID", "de": "Objekt ID", "ru": "ID Объекта"},
            "subtitle_oid_tooltip": {
                "en": "You can enter here text as '(TEXT)'\x0Ato not read the value from variable\x0Aand to just show the specified text.",
                "de": "Man kann auch text in Klammern eingeben '(TEXT)'\x0Aum einfach Text und nicht\x0Adas Variablewert anzuzeigen.",
                "ru": "Можно ввести текст, как '(TEXT)'\x0Aдля того, что бы показать заданное слово,\x0Aа не значение переменной"
            },
            "subtitle_prepend": {"en": "Prepend text", "de": "Präfix", "ru": "Префикс"},
            "subtitle_append_singular": {"en": "Append if singular", "de": "Suffix singulär", "ru": "Суффикс единств. число"},
            "subtitle_append_plural": {"en": "Append if plural", "de": "Suffix plüral", "ru": "Суффикс множ. число"},
            "subtitle_digits": {"en": "Digits after comma", "de": "Nachkomma- Stellen", "ru": "Чисел после запятой"},
            "subtitle_digits_tooltip": {
                "en": "Clear value to '' to disable the rounding.",
                "de": "Lösche das Wert zu '' um Rundung zu deaktivieren.",
                "ru": "Удалите значение полностью, что бы деактивировать округление"
            }
        });
    }
    
    vis.binds.lcars = {
        color: function (name) {
            switch (name) {
                case "orange":
                    return "#ff9900";
                    break;
                case "purple":
                    return "#cc99cc";
                    break;
                case "blue":
                    return "#9999ff";
                    break;
                case "lightBlue":
                    return "#9999cc";
                    break;
                case "red":
                    return "#cc0000";
                    break;
                case "lightRed":
                    return "#cc6666";
                    break;
                case "tan":
                    return "#ff9966";
                    break;
                case "lightTan":
                    return "#ffcc99";
                    break;
                case "pink":
                    return "#cc6699";
                    break;
                case "white":
                    return "#ccccff";
                    break;
                default:
                    return "#ffffff";

            }
        },
        _oid: function (options, onChange) {
            // title and subtitle can be {oid: a, prepend: b, append_singular: c, append_plural: d, digits: 0}
            var val = '';
            if (!options.oid) {
                // val = '';
            } else if (options.oid && (options.oid[0] == '(' || options.oid[0] == '[' || options.oid[0] == '{')) {
                // Process it as text
                val = options.oid.substring(1);
                if (val[val.length - 1] == ')' || val[val.length - 1] == ']' || val[val.length - 1] == '}') val = val.substring(0, val.length - 1);
            } else {
                // get actual value and
                var val = (vis.states[options.oid + '.val'] !== undefined) ? vis.states[options.oid + '.val'] : 0;
                if (val === "true" || val === true) val = 1;

                if (options.digits !== null && options.digits !== undefined && options.digits !== '') {
                    val = parseFloat(val).toFixed(parseInt(options.digits, 10));
                }

                if (options.append_singular || options.append_plural) {
                    if (val == 1) {
                        if (options.append_singular !== undefined) val += options.append_singular;
                    } else {
                        if (options.append_plural !== undefined) val += options.append_plural;
                    }
                }
                if (options.prepend !== undefined) val = options.prepend + val;

                // Subscribe
                if (onChange) vis.states.bind(options.oid + '.val', onChange);
            }
            return val;
        },
        viewSelected: function (widgetID, view, newView, attr, isCss) {
            var changed = [];
            if (!vis.views[view].widgets[widgetID].data.html ||
                vis.views[vis.views[view].widgets[widgetID].data.html]) {
                changed.push('html');
                vis.views[view].widgets[widgetID].data.html = newView;
                vis.widgets[widgetID].data.html = newView;
            }
            return changed.length ? changed : null;
        },
        _button: function (el, options, id, val, color_active, title, subtitle) {
            // title and subtitle can be {oid: a, prepend: b, append_singular: c, append_plural: d, digits: 0}
            var $this = $(el);
            $this.width($this.parent().width() - 52);

            // process subtitle
            if (typeof subtitle == 'object') {
                // TODO: bug by every change of some parameter new bind will be created!! In Edit mode can be the problem.
                var _subtitle = vis.binds.lcars._oid(subtitle, function () {
                    $this.find('._subtitle').html(vis.binds.lcars._oid(subtitle));
                });
                options.subTitle.text = _subtitle;
            }

            $this.lcarsButton(options);

            if (id && val !== undefined) {
                var newVal = (vis.states[id + '.val'] !== undefined) ? vis.states[id + '.val'] : 0;
                if (newVal === "true" || newVal === true) newVal = 1;

                if (val == newVal) {
                    $this.css("background-color", vis.binds.lcars.color(color_active));
                    $this.find(".B_titleL").css("color", vis.binds.lcars.color(color_active));
                }

                vis.states.bind(id + '.val', function (e, newVal, oldVal) {
                    if (newVal === "true" || newVal === true) newVal = 1;
                    if (val == newVal) {
                        $this.css("background-color", vis.binds.lcars.color(color_active));
                        $this.find(".B_titleL").css("color", vis.binds.lcars.color(color_active));
                    } else {
                        $this.css("background-color", vis.binds.lcars.color(options.color));
                        $this.find(".B_titleL").css("color", vis.binds.lcars.color(options.color));
                    }
                });
            }

            var _title = title;
            // process title
            if (typeof title == 'object') {
                // TODO: bug by every change of some parameter new bind will be created!! In Edit mode can be the problem.
                _title = vis.binds.lcars._oid(title, function () {
                    $this.data('title', vis.binds.lcars._oid(title));
                    $this.find('._title').html($this.data('title'));
                });
            }

            $this.data('title', _title);
            $this.find('._title').html(_title);

            if (vis.editMode) {
                $this.parent().resize(function () {
                    var t = $this.data('timer');
                    if (t) clearTimeout(t);

                    $this.data('timer', setTimeout(function () {
                        clearTimeout($this.data('timer'));
                        $this.data('timer', null);
                        $this.width($this.parent().width() - 52);
                    }, 100));
                });
            }
        },
        button: function (el, options, id, val, color_active, title, subtitle) {
            setTimeout(function () {
                vis.binds.lcars._button(el, options, id, val, color_active, title, subtitle);
            }, 100);
        },
        warpcoreInterval: {},
        warpcore: function (el, speed, wid) {
            var d = 114;
            var i = 0;
            var $this = $(el).prev();

            if (vis.binds.lcars.warpcoreInterval[wid]) {
                clearInterval(vis.binds.lcars.warpcoreInterval[wid]);
            }
            vis.binds.lcars.warpcoreInterval[wid] = _setInterval(function (_this) {
                i += 1;
                if (i > 4) i = 0;
                _this.css("background-position", -d * i);
            },speed, $this);

        },
        warpcoreVal: function (el, id, min, max, wid) {
            var d = 114;
            var i = 0;
            var minSpeed = 800;
            var maxSpeed = 50;
            var valRange = parseFloat(min) - parseFloat(max);
            var spdRange = minSpeed - maxSpeed;
            var val = parseFloat(vis.states.attr(id + '.val'));
            var speed = parseInt(minSpeed + ((spdRange / valRange) * val), 10);
            if (isNaN(speed))     speed = minSpeed;
            if (speed < maxSpeed) speed = maxSpeed;

            var $this = $(el).prev();
            if (vis.binds.lcars.warpcoreInterval[wid]) {
                clearInterval(vis.binds.lcars.warpcoreInterval[wid]);
            }
            vis.binds.lcars.warpcoreInterval[wid] = _setInterval(function (_this) {
                i += 1;
                if (i > 4) i = 0;
                _this.css("background-position", -d * i);
            }, speed, $this);

            vis.states.bind(id + '.val', function (e, newVal, oldVal) {
                var speed = parseInt(minSpeed + ((spdRange / valRange) * parseFloat(newVal)), 10);
                if (isNaN(speed)) { speed = minSpeed; }
                if (speed < maxSpeed) { speed = maxSpeed; }

                if (vis.binds.lcars.warpcoreInterval[wid]) {
                    clearInterval(vis.binds.lcars.warpcoreInterval[wid]);
                }
                vis.binds.lcars.warpcoreInterval[wid] = _setInterval(function (_this) {
                    i += 1;
                    if (i > 4) i = 0;
                    _this.css("background-position", -d * i);
                }, speed, $this);
            });

        },
        dnaInterval: {},
        dna: function (el, oid, speed, wid, min, max) {
            var i = 0;
            var $this = $(el).prev();
            console.log('dna');
            if (vis.binds.lcars.dnaInterval[wid]) {
                clearInterval(vis.binds.lcars.dnaInterval[wid]);
            }
            var val = 1;
            if (oid) {
                val = vis.states.attr(oid + '.val') || 0;
                val = parseFloat(val);
                if (min < max) {
                    if (val < min) val = min;
                    if (val > max) val = max;
                    val = (val - min) / (max - min);
                } else {
                    if (val > min) val = min;
                    if (val < max) val = max;
                    val = (val - min) / (max - min);
                }
                if (val < 0) val = -val;
            }

            vis.binds.lcars.dnaInterval[wid] = _setInterval(function (_this) {
                i += 1;
                if (i > 283) i = 0;
                _this.css("background-position", i);
            }, val * speed, $this);

        },
        randomNumber: function () {
            return ("00" + parseInt((Math.random() * 1000), 10)).slice(-3);
        },
        randomInterval: {},
        random: function (el, rows, cols, speed, wid) {
            var $this = $(el).prev();
            var $table = $this.find("table");
            if (vis.binds.lcars.randomInterval[wid]) {
                clearInterval(vis.binds.lcars.randomInterval[wid]);
            }
            vis.binds.lcars.randomInterval[wid] = _setInterval(function (_table) {
                if (_table.find("tr").length >= rows) {
                    _table.html("");
                }
                var colsHtml = "";
                for (var j = 0; j < cols; j++) {
                    colsHtml += vis.binds.lcars.randomNumber()+"</td><td>";
                }
                _table.append("<tr><td>" + colsHtml + "</td></tr>");

            }, speed, $table);
        },
        nav: function (el, nav_view, color_normal, color_active) {
            var $this = $(el).prev();

            if (vis.activeView == nav_view) $this.css("background-color", color_active);
            console.log(vis.activeView + ' ' + nav_view);

            if (!vis.editMode) {
                $this.on('click touchstart', function (e) {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    vis.changeView(nav_view);
                    e.preventDefault();
                    return false;
                });
            }

            $(window).on('viewChanged', function (newView) {
                if (vis.activeView == nav_view) {
                    $this.css("background-color", color_active);
                } else {
                    $this.css("background-color", color_normal);
                }
            });
        }
    };
</script>

<!--script id="tplLcarsSidePanel"
        type="text/ejs"
        class="vis-tpl"
        data-vis-set="lcars"
        data-vis-type="navigation"
        data-vis-name="Side-Panel"
        data-vis-attrs="html"
        >
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 88px; height: 550px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <ul id="side-panel" class="side-panel">
                <li style="height: 74px; background-color: rgb(153, 153, 255);"><div style="line-height: 128px;"><span style="padding-right:2px"><a href="index.html">Test1</a></span></div></li>
                <li style="height: 74px; background-color: rgb(204, 153, 204);"><span style="padding-right:2px"><a href="css.html">Test2</a></span></li>
                <li style="height: 74px; background-color: rgb(153, 153, 255);"><span style="padding-right:2px"><a href="debug.html">Test3</a></span></li>
                <li style="height: 74px; background-color: rgb(204, 153, 204);"><span style="padding-right:2px"><a href="mobile.html">Test4</a></span></li>
                <li style="height: 74px; background-color: rgb(153, 153, 255);"><span style="padding-right:2px">Test5</span></li><li style="height: 218px; border-bottom-style: none; background-color: rgb(204, 153, 204);"><span style="padding-right:2px">781</span></li>
            </ul>
        </div>
    </div>
</script-->

<script id="tplLcarsHtmlNav" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="navigation" data-vis-name="HTML" data-vis-prev="<div id=&quot;prev_tplLcarsHtmlNav&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 116px; height: 35px; font-family: lcars_font; font-size: 30px; text-align: right; position: absolute;&quot;><div class=&quot;vis-widget-prev-body&quot; style=&quot;background-color: rgb(255, 153, 0);&quot;> <span style=&quot;padding-right:4px&quot;>Link </span></div></div></div>" data-vis-attrs="html;nav_view/views/viewSelected;color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;color_active[purple]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 88px; height: 74px; font-family: lcars_font; font-size: 30px; text-align: right; " id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="cursor:pointer;background-color: <%= vis.binds.lcars.color(data.attr('color_default')) %>">
            <span style="padding-right:4px"><%== this.data.attr('html') %></a>
        </div>
        <div <%= (el) -> vis.binds.lcars.nav(el, data.attr("nav_view"), data.attr('color_default'), data.attr("color_active")) %>></div>
    </div>
</script>

<script id="tplLcarsHTML" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-prev="<div id=&quot;prev_tplLcarsHTML&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;font-family: lcars_font; letter-spacing: 1px; font-size: 30px; width: 93px; height: 33px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding: 0px; margin: 0px; color: rgb(255, 153, 0);&quot;> HTML Text </div> </div></div>" data-vis-name="Text/HTML" data-vis-attrs="html;lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget <%== this.data.attr('class') %>" style="font-family: lcars_font; letter-spacing: 1px; font-size: 30px; width: 260px; height: 32px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0;color: <%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>">
            <%== this.data.attr('html') %>
        </div>
    </div>
</script>

<script id="tplLcarsLine" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-name="Line" data-vis-type="static" data-vis-prev="<div id=&quot;prev_tplLcarsLine&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle&quot; style=&quot;width: 69px; height: 13px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding: 0px; margin: 0px; background-color: rgb(255, 153, 0);&quot;> </div> </div></div>" data-vis-attrs="lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 195px; height: 25px; padding: 0; margin: 0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0;background-color: <%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>">
        </div>
    </div>
</script>

<script id="tplLcarsLineTop" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-prev="<img src=&quot;widgets/lcars/img/Prev_Top.png&quot;></img>" data-vis-type="static" data-vis-name="Line-Top" data-vis-attrs="lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;line_height[3]/slider,1,40,1">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 400px; height: 25px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div class="line-top" style="background-color:<%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>;margin-bottom:-3px;"></div>
        </div>
    </div>
</script>

<script id="tplLcarsLineBottom" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-name="Line-Bottom" data-vis-prev="<img src=&quot;widgets/lcars/img/Prev_Bottom.png&quot;></img>" data-vis-attrs="lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;line_height[3]/slider,1,40,1">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 400px; height: 25px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <div class="line-bottom" style="background-color:<%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>;margin-bottom:-3px;"></div>
        </div>
    </div>
</script>

<script id="tplLcarsEdge" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-prev="<div id=&quot;prev_tplLcarsEdge&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars ui-selectee ui-draggable-handle &quot; style=&quot;width: 93px; height: 33px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding: 0px; margin: 0px; background-color: rgb(255, 153, 0);&quot;> <img width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;padding:0;margin:0;border:none;&quot; src=&quot;widgets/lcars/img/edge2-tl.png&quot;> </div> </div></div>" data-vis-name="Edge" data-vis-attrs="edge_type[1]/nselect,1,2;edge_direction[tl]/select,tl,tr,br,bl;lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 195px; height: 83px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0;background-color: <%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>">
            <img width="100%" height="100%" style="padding:0;margin:0;border:none;" src="widgets/lcars/img/edge<%= this.data.attr('edge_type') %>-<%= this.data.attr('edge_direction') %>.png">
        </div>
    </div>
</script>

<script id="tplLcarsEnd" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-prev="<div id=&quot;prev_tplLcarsEdge&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars ui-selectee ui-draggable-handle &quot; style=&quot;width: 93px; height: 25px; padding: 0px; margin: 0px; font-size: 1px&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding: 0px; margin: 0px; background-color: rgb(255, 153, 0); text-align: right&quot;> <img height=&quot;100%&quot; style=&quot;padding:0;margin:0;border:none;&quot; src=&quot;widgets/lcars/img/end-r.png&quot;> </div> </div></div>" data-vis-name="End" data-vis-attrs="frame_direction[r]/select,r,l;lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 50px; height: 25px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0; margin:0; font-size: 1px; background-color: <%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>; text-align: <%= (this.data.attr('frame_direction') == 'r' ? 'right' : 'left') %>">
            <img height="100%" style="padding: 0; margin: 0; border: none;" src="widgets/lcars/img/end-<%= this.data.attr('frame_direction') %>.png">
         </div>
    </div>
</script>

<script id="tplLcarsFrame" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-name="Frame" data-vis-prev="<div id=&quot;prev_tplLcarsFrame&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars ui-draggable-handle &quot; style=&quot;width: 33px; height: 95px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding:0;margin:0&quot;> <img width=&quot;100%&quot; height=&quot;100%&quot; style=&quot;padding:0;margin:0;border:none;&quot; src=&quot;widgets/lcars/img/frame1-r.png&quot;> </div> </div></div>" data-vis-attrs="frame_type[1]/nselect,1,2;frame_direction[r]/select,r,l">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 32px; height: 215px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0">
            <img width="100%" height="100%" style="padding:0;margin:0;border:none;" <%= (this.data.attr('frame_type') && this.data.attr('frame_direction') ? 'src="widgets/lcars/img/frame' + this.data.attr('frame_type') +'-' + this.data.attr('frame_direction') + '.png"' : '') %>>
        </div>
    </div>
</script>

<script id="tplLcarsUfpLogo" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-name="UFP Logo" data-vis-prev="<div id=&quot;prev_tplLcarsUfpLogo&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 93px; height: 70px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot;> <img width=&quot;100%&quot; src=&quot;widgets/lcars/img/ufp.png&quot;> </div> </div></div>" data-vis-attrs="">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 531px; height: 409px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <img width="100%" src="widgets/lcars/img/ufp.png"/>
        </div>
    </div>
</script>

<script id="tplLcarsSfLogo" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-prev="<div id=&quot;prev_tplLcarsSfLogo&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 73px; height: 77px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;background-color: rgb(255, 153, 0);&quot;> <img width=&quot;100%&quot; src=&quot;widgets/lcars/img/starfleet.png&quot;> </div> </div></div>" data-vis-name="Starfleet Logo" data-vis-attrs="lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 161px; height: 171px ;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="background-color: <%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>">
            <img width="100%" src="widgets/lcars/img/starfleet.png"/>
        </div>
    </div>
</script>

<script id="tplLcarsDna" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-prev="<div id=&quot;prev_tplLcarsDna&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars ui-draggable-handle &quot; style=&quot;width: 87px; height: 43px; padding: 0px; margin: 0px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding:0;margin:0&quot;> <div style=&quot;width: 100%; height: 100%; background-image: url(widgets/lcars/img/dna.png); background-position: 208px 50%;&quot;></div>  </div> </div></div>" data-vis-name="DNA" data-vis-attrs="oid;speed[50];min[0];max[100]">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 560px; height: 48px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0">
            <div style="width:100%;height:100%;background-image: url('widgets/lcars/img/dna.png')"></div>
            <div <%= (el) -> vis.binds.lcars.dna(el, data.attr('oid'), data.attr('speed'), data.attr('wid'), data.attr('min'), data.attr('max')) %>></div>
        </div>
    </div>
</script>

<script id="tplLcarsRandom" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-name="Random Numbers" data-vis-prev="<div id=&quot;prev_tplLcarsRandom&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;font-family: lcars_font; letter-spacing: 1px; font-size: 30px; width: 87px; height: 78px; padding: 0px; margin: 0px&quot; > <div class=&quot;vis-widget-prev-body&quot; style=&quot;padding: 0px; margin: 0px; color: rgb(255, 153, 0);&quot;> <table style=&quot;width:100%&quot;> <tbody><tr><td>592</td><td>248</td><td></td></tr><tr><td>653</td><td>211</td><td></td></tr></tbody></table> </div>  </div></div>" data-vis-attrs="rows[6];cols[4];speed[1000];lcars_color[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget <%== this.data.attr('class') %>" style="font-family: lcars_font; letter-spacing: 1px; font-size: 30px; width: 260px; height: 32px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0;color: <%= vis.binds.lcars.color(this.data.attr('lcars_color')) %>">
            <table style="width:100%">

            </table>
        </div>
        <div <%= (el) -> vis.binds.lcars.random(el, data.attr('rows'), data.attr('cols'), data.attr('speed'), data.attr('wid')) %>></div>
    </div>
</script>

<script id="tplLcarsWarpcoreFix" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="static" data-vis-name="Warpcore" data-vis-prev="<img src=&quot;widgets/lcars/img/Prev_Warpcore.png&quot;></img>" data-vis-attrs="speed[500]/slider,20,800,1">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 114px; height: 317px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0">
            <div style="width:100%;height:100%;background-image: url('widgets/lcars/img/warpcore.png')"></div>
            <div <%= (el) -> vis.binds.lcars.warpcore(el, data.attr('speed'), data.attr('wid')) %>></div>
        </div>
    </div>
</script>

<script id="tplLcarsWarpcore" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="val" data-vis-name="Warpcore" data-vis-prev="<img src=&quot;widgets/lcars/img/Prev_Warpcore.png&quot;></img>" data-vis-attrs="oid;min[0];max[1]">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 114px; height: 317px;padding:0;margin:0" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding:0;margin:0">
            <div style="width:100%; height:100%; background-repeat: no-repeat; background-image: url('widgets/lcars/img/warpcore.png')"></div>
            <div <%= (el) -> vis.binds.lcars.warpcoreVal(el, data.attr('oid'), data.attr('min'), data.attr('max'), data.attr('wid')) %>></div>
        </div>
    </div>
</script>

<script id="tplLcarsButton" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="ctrl" data-vis-name="Button State" data-vis-prev="<div id=&quot;prev_tplLcarsButton&quot; style=&quot;text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev vis-lcars ui-draggable-handle &quot; style=&quot;width: 132px; height: 46px; position: absolute;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <span class=&quot;button RR L&quot; style=&quot;width: 70px; background-color: rgb(255, 153, 0);&quot;><span style=&quot;&quot;>state</span></span> </div> </div></div>" data-vis-attrs="oid;value;title;rounded[both]/select,both,left,right,none;color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs0="group.subtitle;subtitle[state];subtitle_show/select,none,left,right;subtitle_color/nselect,,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 150px; height: 45px" id="<%= this.data.attr('wid') %>"  data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.state(el) %> >
        <div class="vis-widget-body">
           <span <%= (el) -> vis.binds.lcars.button(el, {rounded: data.attr('rounded'), blank: data.attr('blank'), extended: true, color: data.attr('color_default'), subTitle: {direction: data.attr('subtitle_show'), text: data.attr('subtitle'), color: data.attr('subtitle_color')}, length: data.attr('width')}, data.attr('oid'), data.attr('value'), data.attr('color_active'), this.data.attr('title')) %>><span class="_title"></span></span>
        </div>
    </div>
</script>

<script id="tplLcarsButtonInc" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="ctrl" data-vis-name="Button Increment" data-vis-prev="<div id=&quot;prev_tplLcarsButtonInc&quot; style=&quot;text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev vis-lcars&quot; style=&quot;width: 132px; height: 46px; position: absolute;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <span class=&quot;button RR L&quot; style=&quot;width: 70px; background-color: rgb(255, 153, 0);&quot;><span>increment</span></span> </div> </div></div>" data-vis-attrs="oid;step[0.01];minmax[1];repeat_delay[800];repeat_interval[800];title;rounded/select,both,left,right,none;" data-vis-attrs0="color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs1="group.subtitle;subtitle[increment];subtitle_show/select,none,left,right;subtitle_color/nselect,,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 150px; height: 45px" id="<%= this.data.attr('wid') %>" data-vis-step="<%= this.data.attr('step') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.increment(el, data.attr('minmax'), data.attr('repeat_delay'), data.attr('repeat_interval')) %>>
        <div class="vis-widget-body">
            <span <%= (el) -> vis.binds.lcars.button(el, {rounded:data.attr('rounded'), blank: data.attr('blank'), extended: true, color: data.attr('color_default'), subTitle: {direction: data.attr('subtitle_show'), text: data.attr('subtitle'), color: data.attr('subtitle_color')}}, data.attr('oid'), data.attr('minmax'), data.attr('color_active'), this.data.attr('title')) %>><span class="_title"></span></span>
        </div>
    </div>
</script>

<script id="tplLcarsButtonToggle" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="ctrl" data-vis-name="Button Toggle" data-vis-prev="<div id=&quot;prev_tplLcarsButtonToggle&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev vis-lcars&quot; style=&quot;width: 132px; height: 46px;&quot;> <div class=&quot;vis-widget-prev-body&quot;> <span class=&quot;button RR L&quot; style=&quot;width: 70px; background-color: rgb(255, 153, 0);&quot;><span>toggle</span></span> </div> </div></div>" data-vis-attrs="oid;title;rounded/select,both,left,right,none;color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs0="group.subtitle;subtitle[toggle];subtitle_show/select,none,left,right;subtitle_color/nselect,,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 150px; height: 45px" id="<%= this.data.attr('wid') %>" data-vis-step="<%= this.data.attr('step') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.toggle(el) %>>
        <div class="vis-widget-body">
            <span <%= (el) -> vis.binds.lcars.button(el, {rounded: data.attr('rounded'), blank: data.attr('blank'), extended: true, color: data.attr('color_default'), subTitle: {direction: data.attr('subtitle_show'), text: data.attr('subtitle'), color:data.attr('subtitle_color')}}, data.attr('oid'), 1, data.attr('color_active'), this.data.attr('title')) %>><span class="_title"></span></span>
        </div>
    </div>
</script>

<script id="tplLcarsButtonVal" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="ctrl,val" data-vis-name="Button State" data-vis-prev="<div id=&quot;prev_tplLcarsButtonVal&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars&quot; style=&quot;width: 132px; height: 50px&quot;> <div class=&quot;vis-widget-prev-body&quot;> <span class=&quot;button RR L&quot; style=&quot;width: 80px; background-color: rgb(255, 153, 0);&quot;><span class=&quot;B_titleL _subtitle&quot; style=&quot;color:#cc99cc&quot;>25.0</span><span class=&quot;_title&quot;>state</span></span> </div> </div></div>" data-vis-attrs="oid;value;title;rounded[both]/select,both,left,right,none;color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs0="color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs1="color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs2="rounded/select,both,left,right,none;" data-vis-attrs3="group.title;title_oid[(state)]/id;title_prepend;title_append_singular;title_append_plural;title_digits;" data-vis-attrs4="group.subtitle;subtitle_oid[(25.0)]/id;subtitle_prepend;subtitle_append_singular;subtitle_append_plural;subtitle_digits;subtitle_show[left]/select,none,left,right;subtitle_color/nselect,,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 150px; height: 45px;" id="<%= this.data.attr('wid') %>"  data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.state(el) %> >
        <div class="vis-widget-body">
            <span <%= (el) -> vis.binds.lcars.button(el, {rounded: data.attr('rounded'), blank: data.attr('blank'), extended:true, color: data.attr('color_default'), subTitle: {direction: data.attr('subtitle_show'), text: data.attr('subtitle'), color: data.attr('subtitle_color')}}, data.attr('oid'), data.attr('value'), data.attr('color_active'), {oid: data.attr('title_oid'), prepend: data.attr('title_prepend'), append_singular: data.attr('title_append_singular'),append_plural: data.attr('title_append_plural'), digits: data.attr('title_digits')}, {oid: data.attr('subtitle_oid'), prepend: data.attr('subtitle_prepend'), append_singular: data.attr('subtitle_append_singular'), append_plural: data.attr('subtitle_append_plural'), digits: data.attr('subtitle_digits')}) %>><span class="_title"></span></span>
        </div>
    </div>
</script>

<script id="tplLcarsButtonIncVal" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="ctrl,val" data-vis-name="Button Increment" data-vis-prev="<div id=&quot;tplLcarsButtonIncVal&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars&quot; style=&quot;width: 132px; height: 50px&quot;> <div class=&quot;vis-widget-prev-body&quot;> <span class=&quot;button RR L&quot; style=&quot;width: 80px; background-color: rgb(255, 153, 0);&quot;><span class=&quot;B_titleL _subtitle&quot; style=&quot;color:#cc99cc&quot;>25.0</span><span class=&quot;_title&quot;>inc</span></span> </div> </div></div>" data-vis-attrs="oid;step[0.01];minmax[1];repeat_delay[800];repeat_interval[800];" data-vis-attrs0="color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs1="color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs2="rounded/select,both,left,right,none;" data-vis-attrs3="group.title;title_oid[(inc)]/id;title_prepend;title_append_singular;title_append_plural;title_digits;" data-vis-attrs4="group.subtitle;subtitle_oid[(25.0)]/id;subtitle_prepend;subtitle_append_singular;subtitle_append_plural;subtitle_digits;subtitle_show[left]/select,none,left,right;subtitle_color/nselect,,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 150px; height: 45px;" id="<%= this.data.attr('wid') %>" data-vis-step="<%= this.data.attr('step') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.increment(el, data.attr('minmax'), data.attr('repeat_delay'), data.attr('repeat_interval')) %>>
        <div class="vis-widget-body">
            <span <%= (el) -> vis.binds.lcars.button(el, {rounded:data.attr('rounded'),blank:data.attr('blank'),extended:true,color:data.attr('color_default'),subTitle:{direction:data.attr('subtitle_show'),text:data.attr('subtitle'), color: data.attr('subtitle_color')}}, data.attr('oid'), data.attr('minmax'), data.attr('color_active'), {oid: data.attr('title_oid'), prepend: data.attr('title_prepend'), append_singular: data.attr('title_append_singular'),append_plural: data.attr('title_append_plural'), digits: data.attr('title_digits')}, {oid: data.attr('subtitle_oid'), prepend: data.attr('subtitle_prepend'), append_singular: data.attr('subtitle_append_singular'), append_plural: data.attr('subtitle_append_plural'), digits: data.attr('subtitle_digits')}) %>><span class="_title"></span></span>
        </div>
    </div>
</script>

<script id="tplLcarsButtonToggleVal" type="text/ejs" class="vis-tpl" data-vis-set="lcars" data-vis-type="ctrl,val" data-vis-name="Button Toggle" data-vis-prev="<div id=&quot;tplLcarsButtonToggleVal&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-lcars&quot; style=&quot;width: 132px; height: 50px&quot;> <div class=&quot;vis-widget-prev-body&quot;> <span class=&quot;button RR L&quot; style=&quot;width: 80px; background-color: rgb(255, 153, 0);&quot;><span class=&quot;B_titleL _subtitle&quot; style=&quot;color:#cc99cc&quot;>0</span><span class=&quot;_title&quot;>toggle</span></span> </div> </div></div>" data-vis-attrs="oid;" data-vis-attrs0="color_default[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs1="color_active[orange]/nselect,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white;" data-vis-attrs2="rounded/select,both,left,right,none;" data-vis-attrs3="group.title;title_oid[(toggle)]/id;title_prepend;title_append_singular;title_append_plural;title_digits;" data-vis-attrs4="group.subtitle;subtitle_oid[(0)]/id;subtitle_prepend;subtitle_append_singular;subtitle_append_plural;subtitle_digits;subtitle_show[left]/select,none,left,right;subtitle_color/nselect,,orange,purple,blue,lightBlue,red,lightRed,tan,lightTan,pink,white">
    <div class="vis-widget vis-lcars <%== this.data.attr('class') %>" style="width: 150px; height: 45px;;" id="<%= this.data.attr('wid') %>" data-vis-step="<%= this.data.attr('step') %>" data-oid="<%= this.data.attr('oid') %>" data-val="<%= this.data.attr('value') %>" <%= (el) -> vis.binds.basic.toggle(el) %>>
        <div class="vis-widget-body">
            <span <%= (el) -> vis.binds.lcars.button(el, {rounded:data.attr('rounded'),blank:data.attr('blank'),extended:true,color:data.attr('color_default'),subTitle:{direction:data.attr('subtitle_show'),text:data.attr('subtitle'), color: data.attr('subtitle_color')}}, data.attr('oid'), 1, data.attr('color_active'), {oid: data.attr('title_oid'), prepend: data.attr('title_prepend'), append_singular: data.attr('title_append_singular'),append_plural: data.attr('title_append_plural'), digits: data.attr('title_digits')}, {oid: data.attr('subtitle_oid'), prepend: data.attr('subtitle_prepend'), append_singular: data.attr('subtitle_append_singular'), append_plural: data.attr('subtitle_append_plural'), digits: data.attr('subtitle_digits')}) %>><span class="_title"></span></span>
        </div>
    </div>
</script>

<!-- --------------lcars.html--- END -->
<!-- --------------metro.html--- START -->
<!--

    ioBroker.vis Metro Widget-Set

    version: "0.1.11"

    6'2014-2015 hobbyquaker, bluefox

    based on http://metroui.org.ua/

    TODO:
        - Attribute für vordefinierte fg-CSS-Klassen
        - Attribute für font-size, text-align, color, padding, margin in tile.content
        - Tile das JSON-Tabellen durchscrollt
        - content_oid Attribut für mehr Tiles
        - Doku

-->

<link rel="stylesheet" href="widgets/metro/css/iconFont.min.css">
<link rel="stylesheet" href="widgets/metro/css/metro-bootstrap.css">
<script type="text/javascript" src="widgets/metro/js/metro.js"></script>

<script type="text/javascript">

    "use strict";
    if (vis.editMode) {
        // Add words for basic widgets
        $.extend(true, systemDictionary, {

            "select_current": {
                "en": "Select current view",
                "de": "Aktuelle View selektieren",
                "ru": "Отметить текущую"
            },
            "label":            {"en": "Label",             "de": "Beschriftung",           "ru": "Надпись"},
            "label_prepend":    {"en": "Label prepend",     "de": "Vor Beschriftung",       "ru": "Перед надписью"},
            "label_append":     {"en": "Label append",      "de": "Nach Beschriftung",      "ru": "После надписи"},
            "badge_label":      {"en": "Badge text",        "de": "Abzeichentext",          "ru": "Текст в бирке"},
            "dialog_url":       {"en": "Dialog URL",        "de": "Dialog URL",             "ru": "URL фрейма в диалоге"},
            "dialog_scroll":    {"en": "Scroll in iFrame",  "de": "Scroll im iFrame",       "ru": "Скролл в диалоге"},
            "icon":             {"en": "Icon URL",          "de": "Ikone URL",              "ru": "URL иконки"},
            "icon_src":         {"en": "Icon URL",          "de": "Ikone URL",              "ru": "URL иконки"},
            "icon_width":       {"en": "Icon width",        "de": "Ikonenbreite",           "ru": "Ширина иконки"},
            "icon_height":      {"en": "Icon height",       "de": "Ikonenhöhe",             "ru": "Высота иконки"},
            "icon_top":         {"en": "Icon left",         "de": "Icon-Offset von oben",   "ru": "Сдвиг иконки сверху"},
            "icon_left":        {"en": "Icon top",          "de": "Icon-Offset von links",  "ru": "Сдвиг иконки слева"},
            "icon_class":       {"en": "Icon class",        "de": "Ikonenklasse",           "ru": "Иконка"},
            "icon_badge":       {"en": "Icon badge",        "de": "Abzeichenikone",         "ru": "Иконка бирки"},
            "bg_class":         {"en": "Background",        "de": "Hintergrund",            "ru": "Фон"},
            "bg_class_active":  {"en": "Background active", "de": "Aktiver Hintergrund",    "ru": "Акивный Фон"},
            "badge_bg_class":   {"en": "Badge background",  "de": "Abzeichen- Hintergrund", "ru": "Фон бирки"},
            "badge_bg_class_active": {
                "en": "Badge background active",
                "de": "Aktiver Abzeichen- Hintergrund",
                "ru": "Фон активной бирки"
            },
            "brand_bg_class":   {"en": "Brand background", "de": "Brand- Hintergrund",      "ru": "Фон полоски"},
            "brand_bg_class_active": {
                "en": "Brand background active",
                "de": "Aktiver Brand- Hintergrund",
                "ru": "Фон активной полоски"
            },
            "group_icon":       {"en": "Icon",              "de": "Ikone",                  "ru": "Иконка"},
            "group_badge":      {"en": "Badge",             "de": "Abzeichen",              "ru": "Бирка"},
            "group_bg-and-text": {"en": "Background and label", "de": "Hintergrund und Titel", "ru": "Фон и надпись"},
            "group_dialog":     {"en": "Dialog",            "de": "Dialog",                 "ru": "Диалог"},
            "transform":        {"en": "Transform",         "de": "Druckeffekt",            "ru": "Эффект нажатия"},
            "hover":            {"en": "Hover effect",      "de": "Hover-Effekt",           "ru": "Реакция на курсор"},
            "oid-working":      {"en": "Working state ID",  "de": "In Arbeit Zustand ID",   "ru": "'В работе' ID"},
            "min":              {"en": "Min",               "de": "Min",                    "ru": "Минимум"},
            "max":              {"en": "Max",               "de": "Max",                    "ru": "Максимум"},
            "step":             {"en": "Step",              "de": "Schritt",                "ru": "Шаг"},
            "sliderColor":      {"en": "Slider color",      "de": "Schieberfarbe",          "ru": "Цвет ползунка"},
            "sliderCompleteColor": {
                "en": "Slider complete color",
                "de": "Voll Schieberfarbe",
                "ru": "Цвет ползунка (Полный)"
            },
            "sliderMarkerColor": {"en": "Slider handle color", "de": "Schiebergrifffarbe",  "ru": "Цвет ручки"},
            "content_oid":      {"en": "Content ID",        "de": "Inhalt ID",              "ru": "ID Содержания"},
            "dialog_oid":       {"en": "Dialog ID",         "de": "Dialog ID",              "ru": "ID Текста для диалога"},
            "number_oid":       {"en": "Number ID",         "de": "Nummer ID",              "ru": "ID Числа"},
            "hide_on_0":        {"en": "Hide by 0",         "de": "Verbergen bei 0",        "ru": "Скрыть при 0"},
            "dialog_fontSize":  {"en": "Dialog font size",  "de": "Dialogschriftgrösse",    "ru": "Размер шрифта"},
            "dialog_padding":   {"en": "Dialog padding",    "de": "Dialog padding",         "ru": "Отступ"},
            "dialog_textAlign": {"en": "Dialog text align", "de": "Dialogtextausrichtung",  "ru": "Выравнивание текста"},
            "dialog_width":     {"en": "Dialog width",      "de": "Dialogbreite",           "ru": "Ширина"},
            "dialog_height":    {"en": "Dialog height",     "de": "Dialoghöhe",             "ru": "Высота"},
            "dialog_title":     {"en": "Title",             "de": "Titel",                  "ru": "Надпись"},
            "dialog_flat":      {"en": "Flat Design",       "de": "Flaches Design",         "ru": "Плоский дизайн"},
            "dialog_shadow":    {"en": "Shadow",            "de": "Fensterschatten",        "ru": "Показать тень"},
            "dialog_draggable": {"en": "Draggable",         "de": "Konnte verschoben werden", "ru": "Можно двигать"},
            "dialog_modal":     {"en": "Modal",             "de": "Modaldialog",            "ru": "Модальное окно"},
            "dialog_icon_src":  {"en": "Icon URL",          "de": "Ikone URL",              "ru": "URL иконки"},
            "dialog_icon_class": {"en": "Icon class",       "de": "Ikoneklasse",            "ru": "Класс иконки"},
            "Select ID":        {"en": "Select ID",         "de": "Select ID",              "ru": "Select ID"},
            "state_oid":        {"en": "State ID",          "de": "Zustand ID",             "ru": "ID Статуса"},
            "select_on_true":   {"en": "Select by true",    "de": "Selektieren bei Wahr",   "ru": "Отметить при 1"},
            "label_true":       {"en": "Label if true",     "de": "Schild bei Wahr",        "ru": "Надпись при 1"},
            "label_false":      {"en": "Label if false",    "de": "Schild bei Falsch",      "ru": "Надпись при 0"},
            "bg_class_true":    {"en": "Background by true", "de": "Hintergrund bei Wahr",  "ru": "Фон при 1"},
            "bg_class_false":   {"en": "Background by false", "de": "Hintergrund bei Falsch", "ru": "Фон при 0"},
            "icon_true_src":    {"en": "Icon URL by true",  "de": "Ikone URL bei Wahr",     "ru": "URL иконки при 1"},
            "icon_false_src":   {"en": "Icon URL by false", "de": "Ikone URL bei Falsch",   "ru": "URL иконки при 0"},
            "icon_true_src_tooltip": {
                "en": "To center the image select 'icon-custom' class",
                "de": "Um das Bild zu zentrieren, muss 'icon-custom' Klasse gewählt werden",
                "ru": "Для помещения картинки в центре выберите 'icon-custom' класс"
            },
            "icon_false_src_tooltip": {
                "en": "To center the image select 'icon-custom' class",
                "de": "Um das Bild zu zentrieren, muss 'icon-custom' Klasse gewählt werden",
                "ru": "Для помещения картинки в центре выберите 'icon-custom' класс"
            },
            "icon_class_true": {
                "en": "Icon class by true",
                "de": "Ikonenklasse URL bei Wahr",
                "ru": "Класс иконки при 1"
            },
            "icon_class_false": {
                "en": "Icon class by false",
                "de": "Ikonenklasse URL bei Falsch",
                "ru": "Класс иконки при 0"
            },
            "badge_bg_class_true": {
                "en": "Badge background by true",
                "de": "Abzeichen- Hintergrund bei Wahr",
                "ru": "Фон бирки при 1"
            },
            "badge_bg_class_false": {
                "en": "Badge background by false",
                "de": "Abzeichen- Hintergrund bei Falsch",
                "ru": "Фон бирки при 0"
            },
            "brand_bg_class_true": {
                "en": "Brand background by true",
                "de": "Brand- Hintergrund bei Wahr",
                "ru": "Фон полоски при 1"
            },
            "brand_bg_class_false": {
                "en": "Brand background by false",
                "de": "Brand- Hintergrund bei Falsch",
                "ru": "Фон полоски при 0"
            },
            "icon_true":        {"en": "Icon by true",      "de": "Ikone bei Wahr",         "ru": "Иконка при 1"},
            "icon_false":       {"en": "Icon by false",     "de": "Ikone bei Falsch",       "ru": "Иконка при 0"},
            "icon_badge_true":  {"en": "Badge icon by true", "de": "Abzeichenikone bei Wahr", "ru": "Иконка бирки при 1"},
            "icon_badge_false": {
                "en": "Badge icon by false",
                "de": "Abzeichenikone bei Falsch",
                "ru": "Иконка бирки при 0"
            },
            "value":            {"en": "Value",             "de": "Wert",                   "ru": "Значение"},
            "select_on_value":  {"en": "Select on value",   "de": "Selektieren by Wert",    "ru": "Отметить при значении"},
            "group_slider":     {"en": "Slider",            "de": "Schieber",               "ru": "Ползунок"},
            "content_prepend":  {"en": "Сontent prepend",   "de": "Inhaltprefix",           "ru": "Префикс содержания"},
            "content_append":   {"en": "Сontent append",    "de": "Inhaltsuffix",           "ru": "Суффику содержания"},
            "label_id":         {"en": "Label ObjectID",    "de": "Beschriftung ObjectID",  "ru": "ObjectID надписи"},
            "hum_oid":          {"en": "Humidity ID",       "de": "Luftfeutigkeit ID",      "ru": "ID влажности"},
            "label_humidity":   {"en": "Label for humidity", "de": "Beschriftung Luftfeutigkeit", "ru": "Подпись влажности"},
            "lowbat_oid":       {"en": "Low battery ID",    "de": "Low battery ID",         "ru": "ID низкого заряда батареи"},
            "controlmode_oid":  {"en": "Control mode ID",   "de": "Kontrollmodus ID",       "ru": "ID Режима управления"},
            "windowopen_oid":   {"en": "Window open ID",    "de": "Fenstersensor ID",       "ru": "Сенсор окна ID"}
        });
    }

    $.extend(true, systemDictionary, {
        "Set temperature":      {"en": "Set temperature",   "de": "Soll-Temperatur",    "ru": "Выставленная темп."},
        "Actual temp.":         {"en": "Actual temp.",      "de": "Ist-Temperatur",     "ru": "Актуальная темп."},
        "Valve position":       {"en": "Valve position",    "de": "Ventilstellung",     "ru": "Позиция вентиля"},
        "Humidity":             {"en": "Humidity",          "de": "Luftfeuchtigkeit",   "ru": "Влажность"},
        "Target":               {"en": "Target",            "de": "Soll",               "ru": "Должно"},
        "Actual":               {"en": "Now",               "de": "Ist",                "ru": "Сейчас"},
        "group_service":        {"en": "Service",           "de": "Service",            "ru": "Сервис"},
        "icon_lowbat":          {"en": "Icon low battery",  "de": "Icon Batterie leer", "ru": "Иконка низкого заряда батареи"},
        "icon_control_mode_0":  {"en": "Icon auto mode",    "de": "Icon Auto Modus",    "ru": "Иконка для авто-режима"},
        "icon_control_mode_1":  {"en": "Icon manual mode",  "de": "Icon man. Modus",    "ru": "Иконка для ручного режима"},
        "icon_control_mode_2":  {"en": "Icon party mode",   "de": "Icon Party Modus",   "ru": "Иконка для режима вечеринки"},
        "icon_control_mode_3":  {"en": "Icon boost mode",   "de": "Icon Boost Modus",   "ru": "Иконка для режима наддува"},
        "icon_windowopen":      {"en": "Icon window open",  "de": "Icon Fenster offen", "ru": "Иконка открытого окна"}
    });

    vis.navChangeCallbacks.push(function (view) {
        $(".vis-metro-nav").each(function () {
            var $this = $(this);
            if ($this.attr("data-metro-nav") == view) {
                if ($this.attr('data-metro-nav-select') == 'true') {
                    $this.addClass("selected");
                }
                $this.addClass($this.attr('data-metro-class-active'));
                $this.removeClass($this.attr('data-metro-class'));
            } else {
                $this.addClass($this.attr('data-metro-class'));
                $this.removeClass($this.attr('data-metro-class-active'));
                $this.removeClass('selected');
            }
        });
    });

    vis.binds.metro = {
        version: "0.1.11",
        format: function (value, type, mustValue) {
            if (!type || type == 'bool') {

                return '_' + !(!value || value === 'false' || value === '0');

            } else if (type == 10) {

                if (!value || value === 'false' || value === '0') value = 0;
                if (value === 'true' || value === true) value = 1;
                return parseInt(value, 10);

            } else if (type == 'compare') {

                if (!value || value === 'false' || value === '0') value = 0;
                if (value === 'true' || value === true) value = 1;

                if (mustValue === 'true'  || mustValue === '1')  mustValue = 1;
                if (mustValue === 'false' || mustValue === '0') mustValue = 0;

                return '_' + (value == mustValue);
            } else if (type == '%') {
                if (value !== undefined && (typeof value === 'number' || typeof value === 'string')) value = parseFloat(value).toFixed(0) + '%';
                if (value === undefined) value = '';
                return value;
            }  else if (type == '°') {
                if (value !== undefined && (typeof value === 'number' || typeof value === 'string')) value = parseFloat(value).toFixed(1) + '°C';
                if (value === undefined) value = '';
                return value;
            }
            return value;
        },
        inputControl: function (el) {
            var $this = $(el).parent().find('input');
        },
        slider: function (el, options) {
            var $this = $(el).parent().find('.slider');
            var oid     = $this.attr('data-oid');
            var wid     = $this.attr('data-oid-working');

            if (!oid && options.hideIfNoOid) {
                $this.hide();
                return;
            }

            var min = (options.min === undefined || options.min == null || options.min == '') ? 0.00 : parseFloat(options.min);
            var max = (options.max === undefined || options.min == null || options.max == '') ? 1.00 : parseFloat(options.max);

            if (max < min) {
                var tmp = max;
                max = min;
                min = tmp;
            }
            var val = vis.states.attr(oid + '.val');
            if (val === true  || val === 'true')  val = max;
            if (val === false || val === 'false') val = min;
            val = parseFloat(val);
            if (isNaN(val)) val = min;

            if (val < min) val = min;
            if (val > max) val = max;

            options.min = min;
            options.max = max;
            options.simRange = 100;
            options.range    = options.max - options.min;
            options.factor   = options.simRange / options.range;
            val = Math.floor((val - options.min) * options.factor);

            $this.metroSlider({
                min:           0,
                max:           options.simRange,
                accuracy:      options.accuracy      || 0,
                color:         options.color         || undefined,
                completeColor: options.completeColor || undefined,
                markerColor:   options.markerColor   || undefined,
                position:      val,
                animate:       true,
                change:        function (val) {
                    val = (parseFloat(val) / options.factor) + options.min;
                    if (options.step) {
                        val = Math.round(val / options.step) * options.step;
                    }
                    if (options.digits !== undefined && options.digits !== null && options.digits !== '') {
                        vis.setValue(oid, val.toFixed(options.digits));
                        //vis.setValue(oid, parseFloat(val).toFixed(options.digits));
                    } else {
                        vis.setValue(oid, val);
                        //vis.setValue(oid, parseFloat(val));
                    }
                },
                changed:       function (val) {

                }
            });

            vis.states.bind(oid + '.val', function (e, newVal, oldVal) {
                var val = vis.states.attr(oid + '.val');

                if (val === true  || val === 'true')  val = options.max;
                if (val === false || val === 'false') val = options.min;

                val = parseFloat(val);
                if (isNaN(val)) val = options.min;
                if (val < options.min) val = options.min;
                if (val > options.max) val = options.max;
                val = Math.floor((val - options.min) * options.factor);

                try {
                    $this.metroSlider('value', val);
                } catch (e) {
                    console.error(e);
                }
            });
        },
        tile: function (el, transform) {
            var $this = $(el).parent().find('.tile');
            if (transform) $this.tileTransform();

            setTimeout(function () {
                $(".vis-metro-nav").each(function () {
                    var $this = $(this);
                    if ($this.attr("data-metro-nav") == vis.activeView) {
                        if ($this.attr('data-metro-nav-select') == 'true') {
                            $this.addClass("selected");
                        }
                        $this.removeClass($this.attr('data-metro-class'));
                        $this.addClass($this.attr('data-metro-class-active'));
                    } else {
                        $this.removeClass($this.attr('data-metro-class-active'));
                        $this.addClass($this.attr('data-metro-class'));
                        $this.removeClass('selected');
                    }
                });
            }, 100);
        },
        tileDialog: function (el, wid, view, options, html, isIframe) {
            var $this = $(el).parent().find('.tile');

            var width  = parseInt(options.width, 10);
            var height = parseInt(options.height, 10);

            if (isNaN(width))  width = undefined;
            if (isNaN(height)) height = undefined;

            if (view || html || vis.editMode) {
                $(el).parent().on('click touchstart', function () {
                    // Protect against two events
                    if (vis.detectBounce(this)) return;

                    $.metroDialog({
                        width:     width,
                        height:    height,
                        overlay:   options.overlay   || false,
                        shadow:    options.shadow    || false,
                        flat:      options.flat      || false,
                        draggable: options.draggable || false,
                        title:     options.title     || '',
                        icon:      options.icon  ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
                        content:   '',
                        onShow:    function(_dialog){
                            var content = _dialog.children('.content');
                            if (html) {
                                if (isIframe) {
                                    content.css('overflow', 'hidden');
                                    content.html('<iframe src="' + html + '" style="width: 100%; height: 100%" scrolling="' + (options.scroll ? 'yes' : 'no') + '"></iframe>');
                                } else {
                                    content.html(html);
                                }
                            } else {
                                content.html('<div class="vis-view-container" data-vis-contains="' + view + '"></div>');
                                if (vis.views[view]) {
                                    vis.renderView(view);
                                }
                                $('#visview_' + view).appendTo(content);
                                $('#visview_' + view).show();
                            }
                        }
                    });
                });
            }
        },
        tileDialogString: function (el, wid, content_oid, options, fontSize, padding, textAlign) {
            content_oid = content_oid || '';
            var $this = $(el).parent().find('.tile');

            var width = parseInt(options.width, 10);
            var height = parseInt(options.height, 10);

            if (isNaN(width))  width = undefined;
            if (isNaN(height)) height = undefined;

            $(el).parent().on('click touchstart', function () {
                // Protect against two events
                if (vis.detectBounce(this)) return;

                $.metroDialog({
                    width:     width,
                    height:    height,
                    overlay:   options.overlay || false,
                    shadow:    options.shadow || false,
                    flat:      options.flat || false,
                    draggable: options.draggable || false,
                    icon:      options.icon  ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
                    title:     options.title || '',
                    content:   '',
                    onShow:    function(_dialog){
                        var content = _dialog.children('.content');
                        var style = '';
                        if (fontSize)  style += 'font-size:'  + fontSize + ';';
                        if (padding)   style += 'padding:'    + padding + ';';
                        if (textAlign) style += 'text-align:' + textAlign + ';';

                        var value = vis.states.attr(content_oid + '.val');
                        if (value === undefined) value = '';
                        content.html('<div style="' + style + '" class="metro-dialog-string" data-oid="' + content_oid + '">' + value + '</div>');
                    }
                });
            });
            vis.states.bind(content_oid + '.val', function (e, newVal, oldVal) {
                $('div.metro-dialog-string[data-oid="' + content_oid + '"]').html(newVal);
            });
        },
        tileDialogSlider: function (el, wid, level_id, working_id, options, sliderOptions) {
            var $this = $(el).parent().find('.tile');

            var width  = parseInt(options.width, 10);
            var height = parseInt(options.height, 10);

            if (isNaN(width))  width  = undefined;
            if (isNaN(height)) height = undefined;
            
            level_id   = level_id   || '';
            working_id = working_id || '';

            sliderOptions.min = (sliderOptions.min === undefined || sliderOptions.min == null || sliderOptions.min == '') ? 0.00 : parseFloat(sliderOptions.min);
            sliderOptions.max = (sliderOptions.max === undefined || sliderOptions.min == null || sliderOptions.max == '') ? 1.00 : parseFloat(sliderOptions.max);

            var range =  sliderOptions.max - sliderOptions.min;
            var factor = 100 / range;

            $(el).parent().on('click touchstart', function () {
                // Protect against two events
                if (vis.detectBounce(this)) return;

                $.metroDialog({
                    width:     width,
                    height:    height,
                    overlay:   options.overlay   || false,
                    shadow:    options.shadow    || false,
                    flat:      options.flat      || false,
                    draggable: options.draggable || false,
                    icon:      options.icon  ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
                    title:     options.title     || '',
                    content:   '',
                    onShow:    function(_dialog){
                        var content = _dialog.children('.content');
                        var html = '<div style="margin: 24px 0 0 24px;">';
                        html += '<div class="input-control switch"><label>';
                        html += '<input type="checkbox" name="' + wid + '_checkbox" id="' + wid + '_checkbox" data-oid="' + level_id + '" data-oid-working="' + working_id + '"/>';
                        html += '<span class="check"></span>';
                        html += '</label></div>';
                        html += '</div><div style="margin: 24px 12px 0 12px;">';
                        html += '<div data-oid="' + level_id + '" data-oid-working="' + working_id + '" id="metroSlider_' + wid + '" class="slider" data-role="slider"></div>';
                        html += '</div>';
                        content.html(html);

                        var val = vis.states.attr(level_id + '.val');
                        if (val === true || val === 'true') val = sliderOptions.max;
                        val = parseFloat(val);
                        if (isNaN(val)) val = sliderOptions.min;

                        val = Math.floor((val - sliderOptions.min) * factor);
                        sliderOptions.position = val;

                        vis.binds.metro.slider(document.getElementById('metroSlider_' + wid), sliderOptions);
                        vis.binds.basic.checkbox(document.getElementById(wid + '_checkbox'), true, sliderOptions.min, sliderOptions.max);
                    }
                });
            });
        },
        tileDialogHeating: function (el, wid, set_oid, temp_oid, drive_oid, options, sliderOptions) {
            var $this = $(el).parent().find('.tile');

            var width =  parseInt(options.width, 10);
            var height = parseInt(options.height, 10);

            if (isNaN(width))  width = undefined;
            if (isNaN(height)) height = undefined;

            set_oid   = set_oid   || '';
            temp_oid  = temp_oid  || '';
            drive_oid = drive_oid || '';

            $(el).parent().on('click touchstart', function () {
                // Protect against two events
                if (vis.detectBounce(this)) return;

                $.metroDialog({
                    width:     width,
                    height:    height,
                    overlay:   options.overlay || false,
                    shadow:    options.shadow || false,
                    flat:      options.flat || false,
                    draggable: options.draggable || false,
                    icon:      options.icon  ? '<img src="' + options.icon + '">' : (options.icon_class ? '<span class="' + options.icon_class + '"></span>' : false),
                    title:     options.title || '',
                    content:   '',
                    onShow:    function(_dialog){
                        var val_set_id = vis.states.attr(set_oid + '.val');
                        if (val_set_id === undefined || val_set_id === null || val_set_id === '') {
                            val_set_id = '';
                        } else {
                            val_set_id = val_set_id.toFixed(1);
                        }

                        var val_temp_id = vis.states.attr(temp_oid + '.val');
                        if (val_temp_id === undefined || val_temp_id === null || val_temp_id === '') {
                            val_temp_id = '';
                        } else {
                            val_temp_id = val_temp_id.toFixed(1);
                        }

                        var val_drive_id = vis.states.attr(drive_oid + '.val');
                        if (val_drive_id === undefined || val_drive_id === null || val_drive_id === '') {
                            val_drive_id = '';
                        } else {
                            val_drive_id = val_drive_id.toFixed(0);
                        }

                        var content = _dialog.children('.content');
                        var html = '<div style="margin: 24px 12px 0 12px;">';
                        if (set_oid) {
                            html += '<div data-oid="' + set_oid + '" id="metroSlider_' + wid + '" class="slider" data-role="slider"></div>';
                        }
                        html += '</div>';
                        html += '<table style="margin-top: 12px; margin-left: 12px; font-size:14px;display:inline-block;">' +
                                (set_oid   ? ('<tr><td>' + (options.label_set   || ('Set temperature')) + ':</td><td><span class="metro-dialog-string" data-oid="' + set_oid   + '">' + val_set_id   + '</span>°C</td></tr>') : '') +
                                (temp_oid  ? ('<tr><td>' + (options.label_temp  || _('Actual temp.'))   + ':</td><td><span class="metro-dialog-string" data-oid="' + temp_oid  + '">' + val_temp_id  + '</span>°C</td></tr>') : '') +
                                (drive_oid ? ('<tr><td>' + (options.label_drive || _('Valve position')) + ':</td><td><span class="metro-dialog-string" data-oid="' + drive_oid + '">' + val_drive_id + '</span>%</td></tr>')  : '') +
                                '</table>';

                        content.html(html);
                        sliderOptions.min = options.min == undefined ? 6  : options.min;
                        sliderOptions.max = options.min == undefined ? 30 : options.max;
                        if (set_oid) {
                            vis.binds.metro.slider(document.getElementById('metroSlider_' + wid), sliderOptions);
                            vis.states.bind(set_oid   + '.val', function (e, newVal, oldVal) {
                                $('span.metro-dialog-string[data-oid="' + set_oid + '"]').html(parseFloat(newVal).toFixed(1));
                            });
                        }
                        if (temp_oid) {
                            vis.states.bind(temp_oid  + '.val', function (e, newVal, oldVal) {
                                $('span.metro-dialog-string[data-oid="' + temp_oid + '"]').html(parseFloat(newVal).toFixed(1));
                            });
                        }
                        if (drive_oid) {
                            vis.states.bind(drive_oid + '.val', function (e, newVal, oldVal) {
                                $('span.metro-dialog-string[data-oid="' + drive_oid + '"]').html(parseFloat(newVal).toFixed(0));
                            });
                        }
                    }
                });
            });
        },
        onHeatingOid: function (widgetID, view, value, attr, isCss) {
            var obj = vis.objects[value];
            var changed = [];
            // If it is real object and SETPOINT
            if (obj && obj.common && obj.common.role == 'level.temperature') {
                var roles = [];
                // If some attributes are not set
                if (!vis.views[view].widgets[widgetID].data.temp_oid) {
                    roles.push('value.temperature');
                }
                if (!vis.views[view].widgets[widgetID].data.drive_oid) {
                    roles.push('value.valve');
                }
                if (!vis.views[view].widgets[widgetID].data.hum_oid) {
                    roles.push('value.humidity');
                }
                if (!vis.views[view].widgets[widgetID].data.lowbat_oid) {
                    roles.push('indicator.battery');
                }
                if (roles.length) {
                    var result = vis.findByRoles(value, roles);
                    if (result) {
                        for (var r in result) {
                            switch (r) {
                                case 'value.temperature':
                                    changed.push('temp_oid'); // remember attr to update it
                                    vis.views[view].widgets[widgetID].data.temp_oid = result[r];
                                    vis.widgets[widgetID].data.temp_oid = result[r];
                                    break;

                                case 'value.valve':
                                    changed.push('drive_oid'); // remember attr to update it
                                    vis.views[view].widgets[widgetID].data.drive_oid = result[r];
                                    vis.widgets[widgetID].data.drive_oid = result[r];
                                    break;

                                case  'value.humidity':
                                    changed.push('hum_oid');
                                    vis.views[view].widgets[widgetID].data.hum_oid = result[r];
                                    vis.widgets[widgetID].data.hum_oid = result[r];
                                    break;

                                case  'indicator.battery':
                                    changed.push('lowbat_oid');
                                    vis.views[view].widgets[widgetID].data.lowbat_oid = result[r];
                                    vis.widgets[widgetID].data.lowbat_oid = result[r];
                                    break
                            }
                        }
                    }
                }

                if (!vis.views[view].widgets[widgetID].data.controlmode_oid) {
                    var result = vis.findByName(value, 'CONTROL_MODE');
                    if (result) {
                        changed.push('controlmode_oid');
                        vis.views[view].widgets[widgetID].data.controlmode_oid = result;
                        vis.widgets[widgetID].data.controlmode_oid = result;
                    }
                }
                if (!vis.views[view].widgets[widgetID].data.windowopen_oid) {
                    var result = vis.findByName(value, 'WINDOW_STATE');
                    if (result) {
                       changed.push('windowopen_oid');
                        vis.views[view].widgets[widgetID].data.windowopen_oid = result;
                        vis.widgets[widgetID].data.windowopen_oid = result;
                    }
                }
                if (!vis.views[view].widgets[widgetID].data.windowopen_oid) {
                    var result = vis.findByName(value, 'WINDOW_OPEN_REPORTING');
                    if (result) {
                        changed.push('windowopen_oid');
                        vis.views[view].widgets[widgetID].data.windowopen_oid = result;
                        vis.widgets[widgetID].data.windowopen_oid = result;
                    }
                }
            }

            return changed.length ? changed : null;
        }
    };

	console.log('Metro version: "' + vis.binds.metro.version + '"');
</script>

<script id="tplMetroSlider" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroSlider&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee&quot; style=&quot;top: 21px; left: 41px; width: 78px; height: 17px;&quot;> <div class=&quot;metro vis-widget-prev-body &quot; style=&quot;padding:2px&quot;> <div data-o data-oid-working=&quot;&quot; class=&quot;slider&quot; data-role=&quot;slider&quot;><div class=&quot;complete&quot; style=&quot;background-color: rgb(32, 32, 255); width: 0;&quot;></div><a class=&quot;marker&quot; style=&quot;background-color: rgb(32, 32, 255); left: 0;&quot;></a></div> <div></div> </div> </div>" data-vis-attrs="oid;oid-working;min;max;step;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color" data-vis-set="metro" data-vis-type="ctrl,slider,dimmer" data-vis-name="Slider horizontal">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:360px; height:16px;">
        <div class="metro vis-widget-body <%== this.data.attr('class') %>" style="padding:2px" >
            <% if (vis.editMode) { %>
                <div class="editmode-helper" />
            <% } %>
            <div data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
            <div <%= (el) -> vis.binds.metro.slider(el, {min: data.min, max: data.max, step: data.step, color: data.sliderBgColor, completeColor:data.sliderCompleteColor, markerColor: data.sliderMarkerColor}) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroSliderVertical" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroSliderVertical&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock ui-selectee&quot; style=&quot;top: 215px; left: 460px; width: 12px; height: 73px;&quot;> <div class=&quot;metro vis-widget-prev-body &quot; style=&quot;padding:2px&quot;> <div data-o data-oid-working=&quot;&quot; style=&quot;height:100%;&quot; class=&quot;slider vertical&quot; data-role=&quot;slider&quot;><div class=&quot;complete&quot; style=&quot;height: 12px;&quot;></div><a class=&quot;marker&quot; style=&quot;background-color: rgb(75, 0, 130); top: 344px;&quot;></a></div> <div></div> </div> </div>" data-vis-attrs="oid;oid-working;min;max;step;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color" data-vis-set="metro" data-vis-type="ctrl,slider,dimmer" data-vis-name="Slider vertical">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:16px; height:360px;">
        <div class="metro vis-widget-body <%== this.data.attr('class') %>" style="padding:2px" >
            <% if (vis.editMode) { %>
                <div class="editmode-helper" />
            <% } %>
            <div data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" style="height:100%;" id="metroSlider_<%= this.data.attr('wid') %>" class="slider vertical" class="slider" data-role="slider"></div>
            <div <%= (el) -> vis.binds.metro.slider(el, {min: data.min, max: data.max, step: data.step, color: data.sliderBgColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor}) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroValueBoolCheckbox" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroValueBoolCheckbox&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock ui-selectee&quot; style=&quot;left: 110px; top: 81px; height: 44px; width: 21px;&quot; > <div class=&quot;metro vis-widget-prev-body&quot;> <div class=&quot;input-control checkbox&quot;> <label> <input type=&quot;checkbox&quot; name=&quot;w00003_checkbox&quot; data-o> <span class=&quot;check&quot;></span> </label> </div> <div></div> </div> </div>" data-vis-attrs="html_prepend;html_append;oid" data-vis-set="metro" data-vis-type="ctrl,bool" data-vis-name="Bool Checkbox">
    <div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>" >
        <div class="metro vis-widget-body">
            <div class="input-control checkbox">
                <label>
                    <%== this.data.attr("html_prepend") %>
                    <input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el) %>/>
                    <span class="check"></span>
                    <%== this.data.attr("html_append") %>
                </label>
            </div>
            <div <%= (el) -> vis.binds.metro.inputControl(el) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroValueBoolSwitch" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroValueBoolSwitch&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock ui-selectee&quot; style=&quot;left: 110px; top: 432px;&quot; > <div class=&quot;metro vis-widget-prev-body&quot;> <div class=&quot;input-control switch&quot;> <label> <input type=&quot;checkbox&quot; name=&quot;w00002_checkbox&quot; data-o> <span class=&quot;check&quot;></span> </label> </div> <div></div> </div> </div>" data-vis-set="metro" data-vis-type="ctrl,bool" data-vis-name="Switch" data-vis-attrs="html_prepend;html_append;oid">
    <div class="vis-widget <%== this.data.attr('class') %>" style="" id="<%= this.data.attr('wid') %>" >
        <div class="metro vis-widget-body">
            <div class="input-control switch">
                <label>
                    <%== this.data.attr("html_prepend") %>
                    <input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el) %>/>
                    <span class="check"></span>
                    <%== this.data.attr("html_append") %>
                </label>
            </div>
            <div <%= (el) -> vis.binds.metro.inputControl(el) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileNav" type="text/ejs" data-vis-prev="<div id=&quot;prev_tplMetroTileNav&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev  &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div data-metro-nav-select=&quot;false&quot; data-metro-class-active=&quot;bg-magenta&quot; data-metro-class=&quot;bg-indigo&quot; style=&quot;width:100%; height:100%;&quot; class=&quot;vis-metro-nav tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-new&quot;></i> </div> <div class=&quot;vis-metro-nav brand ribbed-steel&quot; data-metro-nav=&quot;&quot; data-metro-class-active=&quot;ribbed-indigo&quot; data-metro-class=&quot;ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Navigation</span> <div class=&quot;vis-metro-nav badge bg-cyan&quot; data-metro-nav=&quot;&quot; data-metro-class-active=&quot;bg-teal&quot; data-metro-class=&quot;bg-cyan&quot;><i class=&quot;icon-file&quot;></i></div> </div> </div>  </div> </div></div>" data-vis-attrs="nav_view;hover[true]/checkbox;transform[true]/checkbox;select_current/checkbox;label[Navigation];" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="bg_class_active[bg-magenta]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.badge;badge_bg_class[bg-cyan]/style,metro-,bg-;badge_bg_class_active[bg-teal]/style,metro-,bg-;" data-vis-attrs3="icon_badge[icon-file]/style,iconFont,icon-,,Icon ;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs4="brand_bg_class_active[ribbed-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs5="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-new]/style,iconFont,icon-,,Icon ;" data-vis-attrs6="group.effects;sync/checkbox;hide_effect/effect;hide_duration/slider,0,10000,100;hide_options/effect-options;show_effect/effect;show_duration/slider,0,10000,100;show_options/effect-options;body-background/color" class="vis-tpl" data-vis-type="static,navigation" data-vis-set="metro" data-vis-name="Tile Navigation">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;"  <%= (el) -> vis.binds.basic.navigation(el, {nav_view:data.attr('nav_view'),hideOptions:{effect:data.attr('hide_effect'),options:(data.attr('hide_options')?data.attr('hide_options'):{}),duration:data.attr('hide_duration')},showOptions:{effect:data.attr('show_effect'),options:(data.attr('show_options')?data.attr('show_options'):{}),duration:data.attr('show_duration')},sync:data.attr('sync'),background:data.attr('body-background')}); %> >
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>">
            <div data-metro-nav="<%= this.data.attr('nav_view') %>" data-metro-nav-select="<%= this.data.attr('select_current') %>" data-metro-class-active="<%= this.data.attr('bg_class_active') %>" data-metro-class="<%= this.data.attr('bg_class') %>" style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="vis-metro-nav tile <%= this.data.attr('hover') ? 'hover' : '' %>" >
                <div class="tile-content icon <%= this.data.attr('icon_class') ? '' : 'icon-custom' %>">
                    <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                    <i class="<%= this.data.attr("icon_class") %>"></i>
                </div>
                <div class="vis-metro-nav brand" data-metro-nav="<%= this.data.attr('nav_view') %>" data-metro-class-active="<%= this.data.attr('brand_bg_class_active') %>" data-metro-class="<%= this.data.attr('brand_bg_class') %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                    <div class="vis-metro-nav badge" data-metro-nav="<%= this.data.attr('nav_view') %>" data-metro-class-active="<%= this.data.attr('badge_bg_class_active') %>" data-metro-class="<%= this.data.attr('badge_bg_class') %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileString" type="text/ejs" data-vis-prev="<div id=&quot;prev_tplMetroTileString&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content fg-white icon&quot;> <i class=&quot;icon-sun-3&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;> String </span> <div class=&quot;badge bg-cyan&quot;><i class=&quot;icon-sunrise&quot;></i></div> </div> </div>  </div> </div></div>" data-vis-attrs="content_prepend;content_append;content_oid/id;" data-vis-attrs0="state_oid/id;hover/checkbox;transform/checkbox;select_on_true/checkbox;bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;bg_class_true[bg-teal]/style,metro-,bg- ribbed-;" data-vis-attrs1="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class_false[icon-sun-3]/style,iconFont,icon-,,Icon ;icon_class_true[icon-weather-4]/style,iconFont,icon-,,Icon ;" data-vis-attrs2="group.badge;label_prepend;label_append;label_id/id;badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;icon_badge_false[icon-sunrise]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-sunrise]/style,iconFont,icon-,,Icon ;brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;" class="vis-tpl" data-vis-set="metro" data-vis-type="val" data-vis-name="Tile String">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('state_oid') %>">
            <div style="width:100%; height:100%;"  id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) == '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>" >
                <div class="tile-content fg-white icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '' : 'icon-custom' %>">
                    <%== this.data.attr('content_prepend') %><%== vis.states.attr(this.data.attr('content_oid') + '.val') %><%== this.data.attr('content_append') %>
                    <%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) + '"/>' : '' %>
                    <i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i>
                </div>
                <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>">
                    <span class="label fg-white">
                        <%== this.data.attr('label_prepend') %><%== vis.states.attr(this.data.attr('label_id') + '.val') %><%== this.data.attr('label_append') %>
                    </span>
                    <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"><i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileBool" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileBool&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev  &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;><div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-newspaper&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Boolean</span> <div class=&quot;badge bg-cyan&quot;><i class=&quot;icon-folder&quot;></i></div> </div> </div>  </div> </div></div>" data-vis-attrs="oid;hover[true]/checkbox;transform/checkbox;select_on_true/checkbox;label_false[false];label_true[true];" data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs3="icon_class_false[icon-cancel-2]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="icon_class_true[icon-checkmark]/style,iconFont,icon-,,Icon ;" data-vis-attrs5="group.badge;icon_badge_false[icon-folder-2]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-folder]/style,iconFont,icon-,,Icon ;" data-vis-attrs6="badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;" data-vis-attrs7="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;" data-vis-set="metro" data-vis-type="val,bool" data-vis-name="Tile Bool">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('oid') %>">
            <div style="width:100%; height:100%;"  id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val')) == '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>" >
                <div class="tile-content icon <%= this.data.attr("icon_class" + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '' : 'icon-custom' %>">
                    <%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) + '"/>' : '' %>
                    <i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i>
                </div>
                <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
                    <span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %></span>
                    <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"><i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileList8" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileList8&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev  vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;><div style=&quot;width:100%; height:100%;&quot; class=&quot;tile bg-indigo&quot;> <div class=&quot;tile-content icon&quot;><i class=&quot;icon-pencil&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>Value list</span><div class=&quot;badge bg-cyan&quot;></div></div></div></div></div></div>" data-vis-attrs="oid;hover/checkbox;transform/checkbox;label_prepend;label_append;group.bg-and-text;label(0-7)[Value list];" data-vis-attrs0="bg_class(0-7)[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="group.icon;icon(0-7)/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs2="icon_class(0-7)[icon-pencil]/style,iconFont,icon-,,Icon ;" data-vis-attrs3="group.badge;icon_badge(0-7)[icon-pencil]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="badge_bg_class(0-7)[bg-cyan]/style,metro-,bg-;" data-vis-attrs5="brand_bg_class(0-7)[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-set="metro" data-vis-type="val,list" data-vis-name="Tile ValueList 8">
        <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
            <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('oid') %>">
                <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>" >
                    <div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) ? '' : 'icon-custom' %>">
                        <%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) + '"/>' : '' %>
                        <i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>"></i>
                    </div>
                    <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>">
                        <span class="label fg-white"><%== this.data.attr('label_prepend') %><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %><%== this.data.attr('label_append') %></span>
                        <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'), 10)) %>"><i class="<%= this.data.attr('icon_badge' + vis.states.attr(this.data.attr('oid') + '.val')) %>"></i></div>
                    </div>
                </div>
                <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileBoolNumber" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileBoolNumber&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev  vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;><div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;><div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-cancel-2&quot;></i></div><div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>Bool/Num</span><div class=&quot;badge bg-cyan&quot;><i class=&quot;&quot;></i></div></div></div></div> </div></div>" data-vis-attrs="state_oid/id;select_on_true/checkbox;number_oid/id;hover[true]/checkbox;transform/checkbox;label_false;label_true;label_append;" data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.icon;icon_false_src/image;icon_true_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs3="icon_class_false[icon-cancel-2]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="icon_class_true[icon-checkmark]/style,iconFont,icon-,,Icon ;" data-vis-attrs5="group.badge;icon_badge_false[]/style,iconFont,icon-,,Icon ;icon_badge_true[]/style,iconFont,icon-,,Icon ;badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;" data-vis-attrs6="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;" data-vis-set="metro" data-vis-type="val,bool" data-vis-name="Tile Bool / Number">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-oid="<%= this.data.attr('state_oid') %>">
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) == '_true') && this.data.select_on_true ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>" >
                <div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) ? '' : 'icon-custom' %>">
                    <%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val')) + '_src') ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))  + '_src')+ '"/>' : '' %>
                    <i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i>
                </div>
                <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>">
                    <span class="label fg-white"><%== (this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) || '') + ((vis.states.attr(this.data.attr('number_oid') + '.val') !== undefined) ? vis.states.attr(this.data.attr('number_oid') + '.val') : '') %><%== this.data.attr('label_append') || '' %></span>
                    <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"><i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'))) %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileState" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileState&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev  vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;tile hover bg-indigo&quot;><div class=&quot;tile-content icon&quot;><i class=&quot;icon-unlocked&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>State</span><div class=&quot;badge bg-cyan&quot;><i class=&quot;&quot;></i></div></div></div></div></div></div>" data-vis-attrs="state_oid/id;value;select_on_value/checkbox;hover[true]/checkbox;transform[true]/checkbox;label_false;label_true;" data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs3="icon_class_false[]/style,iconFont,icon-,,Icon ;icon_class_true[]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="group.badge;icon_badge_false[]/style,iconFont,icon-,,Icon ;icon_badge_true[]/style,iconFont,icon-,,Icon ;" data-vis-attrs5="badge_bg_class_false[bg-cyan]/style,metro-,bg-;" data-vis-attrs6="badge_bg_class_true[bg-teal]/style,metro-,bg-;" data-vis-attrs7="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs8="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;" data-vis-set="metro" data-vis-type="ctrl" data-vis-name="Tile State">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-val="<%= this.data.attr('value') %>" data-oid="<%= this.data.attr('state_oid') %>" <%= (el) -> vis.binds.basic.state(el) %> >
            <div style="width:100%; height:100%;"  id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value')) == '_true') && this.data.select_on_value ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>" >
                <div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '' : 'icon-custom' %>">
                    <%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) + '"/>' : '' %>
                    <i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i>
                </div>
                <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>">
                    <span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %></span>
                    <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"><i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i></div>
                </div>
            </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileToggle" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileToggle&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot; data-oid=&quot;dev1&quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-minus-2&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Toggle</span> <div class=&quot;badge bg-cyan&quot;><i class=&quot;icon-minus&quot;></i></div> </div> </div>  </div> </div></div>" data-vis-attrs="oid;hover[true]/checkbox;transform[true]/checkbox;select_on_true/checkbox;label_false;label_true;" data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.icon;icon_false/image;icon_true/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs3="icon_class_false[icon-minus]/style,iconFont,icon-,,Icon ;icon_class_true[icon-plus]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="group.badge;icon_badge_false[icon-minus-2]/style,iconFont,icon-,,Icon ;icon_badge_true[icon-plus-2]/style,iconFont,icon-,,Icon ;" data-vis-attrs5="badge_bg_class_false[bg-cyan]/style,metro-,bg-;" data-vis-attrs6="badge_bg_class_true[bg-teal]/style,metro-,bg-;" data-vis-attrs7="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs8="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs9="group.ccontrol;urlTrue;urlFalse;oidTrue/id;oidFalse/id;oidTrueValue;oidFalseValue;" data-vis-set="metro" data-vis-type="ctrl,bool" data-vis-name="Tile Toggle">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%"
            class="metro vis-widget-body <%== this.data.attr('class') %>"
            data-oid="<%= this.data.attr('oid') %>"
            data-url-true="<%=  this.data.attr('urlTrue') %>"
            data-url-false="<%= this.data.attr('urlFalse') %>"
            data-oid-true="<%=  this.data.attr('oidTrue') %>"
            data-oid-false="<%= this.data.attr('oidFalse') %>"
            data-oid-true-value="<%=  this.data.attr('oidTrueValue') %>"
            data-oid-false-value="<%= this.data.attr('oidFalseValue') %>"
            <%= (el) -> vis.binds.basic.toggle(el) %>
            >
            <div style="width:100%; height:100%;"  id="metroTile_<%= this.data.attr('wid') %>" class="tile icon <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val')) == '_true') && this.data.attr('select_on_true') ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>" >
                <div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '' : 'icon-custom' %>">
                    <%== this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) + '"/>' : '' %>
                    <i class="<%= vis.states.attr(this.data.attr('oid') + '.val') ? this.data.attr("icon_class_true") : this.data.attr("icon_class_false") %>"></i>
                </div>
                <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>">
                    <span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %></span>
                    <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"><i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('oid') + '.val'))) %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileStateNumber" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileStateNumber&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-meter-slow&quot;></i></div><div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>State/Num</span><div class=&quot;badge bg-cyan&quot;><i class=&quot;&quot;></i></div></div></div></div></div></div>" data-vis-attrs="state_oid/id;value;select_on_value/checkbox;number_oid/id;hover[true]/checkbox;transform[true]/checkbox;label_false;label_true;label_append;" data-vis-attrs0="bg_class_false[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="bg_class_true[bg-teal]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.icon;icon_false_src/image;icon_true_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs3="icon_class_false[icon-meter-slow]/style,iconFont,icon-,,Icon ;icon_class_true[icon-meter-fast]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="group.badge;badge_bg_class_false[bg-cyan]/style,metro-,bg-;badge_bg_class_true[bg-teal]/style,metro-,bg-;" data-vis-attrs5="brand_bg_class_false[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs6="brand_bg_class_true[ribbed-indigo]/style,metro-,bg- ribbed-;" data-vis-set="metro" data-vis-type="val" data-vis-name="Tile State / val Badge Number">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;" >
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" data-val="<%= this.data.attr('value') %>" data-oid="<%= this.data.attr('state_oid') %>" <%= (el) -> vis.binds.basic.state(el) %> >
            <div style="width:100%; height:100%;"  id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= (vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value')) == '_true') && this.data.select_on_value ? 'selected' : '' %> <%= this.data.attr('bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>" >
                <div class="tile-content icon <%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '' : 'icon-custom' %>">
                    <%== this.data.attr('icon_true' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr('icon_true' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) + '"/>' : '' %>
                    <i class="<%= this.data.attr('icon_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i>
                </div>
                <div class="brand <%= this.data.attr('brand_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>">
                    <span class="label fg-white"><%== this.data.attr('label' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %><%= (vis.states.attr(this.data.attr("number_oid") + '.val') !== undefined) ? vis.states.attr(this.data.attr("number_oid") + '.val') : '' %><%== this.data.attr('label_append') %></span>
                    <div class="badge <%= this.data.attr('badge_bg_class' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"><i class="<%= this.data.attr('icon_badge' + vis.binds.metro.format(vis.states.attr(this.data.attr('state_oid') + '.val'), 'compare', this.data.attr('value'))) %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileDimmer" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileDimmer&quot; style=&quot; position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 122px; height: 77px; padding: 3px;&quot;><div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;><div style=&quot;width:100%; height:100%;&quot; class=&quot;tile bg-indigo&quot;> <div class=&quot;tile-content&quot; style=&quot; zoom: 0.5;&quot;> <div style=&quot;float:left; height: 90px;&quot;> <img width=&quot;90px&quot; src=&quot;widgets/metro/img/light_light_dim.png&quot;> </div> <div style=&quot;margin: 30px 70px 0 0; float:right&quot;> <div class=&quot;input-control switch&quot;> <label> <input type=&quot;checkbox&quot; name=&quot;w00004_checkbox&quot; data-o> <span class=&quot;check&quot;></span> </label> </div> </div> <div style=&quot;clear: both; margin: 0 12px;&quot; class=&quot;slider&quot; data-role=&quot;slider&quot;><div class=&quot;complete&quot; style=&quot;width: 0;&quot;></div><a class=&quot;marker&quot; style=&quot;left: 0;&quot;></a></div> <div></div> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Dimmer</span> </div> </div> <div></div> </div> </div>" data-vis-attrs="oid;oid-working;min;max;step[1];hover/checkbox;transform/checkbox;label;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color" data-vis-set="metro" data-vis-type="ctrl,dimmer" data-vis-name="Tile Dimmer">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:287px; height:136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >

            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content">
                <div style="float:left; height: 90px;">
                <%
                var str = vis.states.attr(this.data.oid + '.val');
                var val = parseFloat(str);
                if (str === true || str === 'true') val = 1;
                if (isNaN(val)) val = 0;
                                
                var min = this.data.attr('min');
                if (min !== undefined && min !== null && min !== '') {
                    min = parseFloat(min);
                } else {
                    min = 0;
                }

                var max = this.data.attr('max');
                if (max !== undefined && max !== null && max !== '') {
                    max = parseFloat(max);
                } else {
                    max = 1;
                }

                val = (val - min) / (max - min);
				
                if (val == 1) {
                %>
                <img width="90px" src="widgets/metro/img/light_light_dim_100.png"/>
                <% } else if (val >= 0.9) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_90.png"/>
                <% } else if (val >= 0.8) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_80.png"/>
                <% } else if (val >= 0.7) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_70.png"/>
                <% } else if (val >= 0.6) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_60.png"/>
                <% } else if (val >= 0.5) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_50.png"/>
                <% } else if (val >= 0.4) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_40.png"/>
                <% } else if (val >= 0.3) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_30.png"/>
                <% } else if (val >= 0.2) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_20.png"/>
                <% } else if (val >= 0.1) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_10.png"/>
                <% } else if (val >= 0.01) { %>
                <img width="90px" src="widgets/metro/img/light_light_dim_00.png"/>
                <% } else { %>
                <img width="90px" src="widgets/metro/img/light_light_dim.png"/>
                <% } %>
                </div>
                <div style="margin: 30px 70px 0 0; float:right">
                    <div class="input-control switch">
                        <label>
                            <input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" <%= (el) -> vis.binds.basic.checkbox(el, true, data.min, data.max) %>/>
                            <span class="check"></span>
                        </label>
                    </div>
                </div>
                    <div style="clear: both; margin: 0 12px;" data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
                    <div <%= (el) -> vis.binds.metro.slider(el, {min: parseFloat(data.min), max: parseFloat(data.max), step: parseFloat(data.step), color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor}) %>></div>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %><%= (el) -> vis.binds.metro.inputControl(el) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileDimmerDialog" type="text/ejs" data-vis-prev="<div id=&quot;prev_tplMetroTileDimmerDialog&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;><div class=&quot;tile-content&quot; style=&quot;text-align: center&quot;><img width=&quot;90%&quot; src=&quot;widgets/metro/img/light_light_dim.png&quot;></div> <div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>Dimmer Dialog</span></div> </div><div style=&quot;padding: 42px 10px 10px;&quot;></div></div></div></div>" data-vis-attrs="oid;oid-working;min;max;step[1];digits/number;hover[true]/checkbox;transform[true]/checkbox;label;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;" data-vis-attrs3="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox" class="vis-tpl" data-vis-set="metro" data-vis-type="ctrl,dimmer,dialog" data-vis-name="Tile Dimmer Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >

            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content" style="text-align: center">
                <%
                var str = vis.states.attr(this.data.oid + '.val');
                var val = parseFloat(str);
                if (str === true || str === 'true') val = 1;
                if (isNaN(val)) val = 0;
                                
                var min = this.data.attr('min');
                if (min !== undefined && min !== null && min !== '') {
                    min = parseFloat(min);
                } else {
                    min = 0;
                }

                var max = this.data.attr('max');
                if (max !== undefined && max !== null && max !== '') {
                    max = parseFloat(max);
                } else {
                    max = 1;
                }

                val = (val - min) / (max - min);

                if (val == 1) {
                %>
                <img width="90%" src="widgets/metro/img/light_light_dim_100.png"/>
                <% } else if (val >= 0.9) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_90.png"/>
                <% } else if (val >= 0.8) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_80.png"/>
                <% } else if (val >= 0.7) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_70.png"/>
                <% } else if (val >= 0.6) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_60.png"/>
                <% } else if (val >= 0.5) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_50.png"/>
                <% } else if (val >= 0.4) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_40.png"/>
                <% } else if (val >= 0.3) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_30.png"/>
                <% } else if (val >= 0.2) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_20.png"/>
                <% } else if (val >= 0.1) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_10.png"/>
                <% } else if (val >= 0.01) { %>
                <img width="90%" src="widgets/metro/img/light_light_dim_00.png"/>
                <% } else { %>
                <img width="90%" src="widgets/metro/img/light_light_dim.png"/>
                <% } %>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                </div>
            </div>
            <div
                <%= (el) -> vis.binds.metro.tileDialogSlider(el, data.wid, data.oid, data['oid-working'], {title: data.label, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: 300, height: 180}, {min: data.min, max: data.max, step: parseFloat(data.step), color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor, digits: data.digits}) %> style="padding: 42px 10px 10px;">
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileShutter" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileShutter&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div id=&quot;19l1ml014&quot; class=&quot;vis-widget_prev  vis-widget-lock &quot; style=&quot;width: 287px; height: 120px; padding: 3px; zoom: 0.5;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; id=&quot;metroTile_19l1ml014&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content&quot;> <div style=&quot;float:left; height: 90px;&quot;> <img width=&quot;90px&quot; src=&quot;widgets/metro/img/fts_shutter_100.png&quot;> </div> <div style=&quot;margin: 30px 70px 0 0; float:right&quot;> <div class=&quot;input-control switch&quot;> <label> <input type=&quot;checkbox&quot; name=&quot;19l1ml014_checkbox&quot; id=&quot;19l1ml014_checkbox&quot; data-oid=&quot;nothing_selected&quot; data-oid-working=&quot;&quot;> <span class=&quot;check&quot;></span> </label> </div> </div> <div style=&quot;clear: both; margin: 0 12px;&quot; data-oid=&quot;nothing_selected&quot; data-oid-working=&quot;&quot; class=&quot;slider&quot; data-role=&quot;slider&quot;><div class=&quot;complete&quot; style=&quot;width: 0;&quot;></div><a class=&quot;marker&quot; style=&quot;left: 0;&quot;></a></div>  </div> <div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>Shutter</span></div></div><div></div> </div></div></div>" data-vis-attrs="oid;oid-working;min;max;step[1];hover/checkbox;transform/checkbox;label;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color" data-vis-set="metro" data-vis-type="ctrl,shutter" data-vis-name="Tile Shutter">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:287px; height:136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >

            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content">
                    <div style="float:left; height: 90px;">
                    <%
                    var str = vis.states.attr(this.data.oid + '.val');
                    var val = parseFloat(str);
                    if (str === true || str === 'true') val = 1;
                    if (isNaN(val)) val = 0;

                    var min = this.data.attr('min');
                    if (min !== undefined && min !== null && min !== '') {
                        min = parseFloat(min);
                    } else {
                        min = 0;
                    }

                    var max = this.data.attr('max');
                    if (max !== undefined && max !== null && max !== '') {
                        max = parseFloat(max);
                    } else {
                        max = 1;
                    }

                    val = (val - min) / (max - min);
                    val = 1 - val;
                    if (val == 1) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_100.png"/>
                    <% } else if (val >= 0.9) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_90.png"/>
                    <% } else if (val >= 0.8) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_80.png"/>
                    <% } else if (val >= 0.7) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_70.png"/>
                    <% } else if (val >= 0.6) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_60.png"/>
                    <% } else if (val >= 0.5) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_50.png"/>
                    <% } else if (val >= 0.4) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_40.png"/>
                    <% } else if (val >= 0.3) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_30.png"/>
                    <% } else if (val >= 0.2) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_20.png"/>
                    <% } else if (val >= 0.1) { %>
                    <img width="90px" src="widgets/metro/img/fts_shutter_10.png"/>
                    <% } else { %>
                    <img width="90px" src="widgets/metro/img/fts_window_2w.png"/>
                    <% } %>
                    </div>
                    <div style="margin: 30px 70px 0 0; float:right">
                        <div class="input-control switch">
                            <label>
                                <input type="checkbox" name="<%= this.data.attr('wid') %>_checkbox" id="<%= this.data.attr('wid') %>_checkbox" data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" <%= (el) -> vis.binds.basic.checkbox(el, true, data.min, data.max) %>/>
                                <span class="check"></span>
                            </label>
                        </div>
                    </div>
                    <div style="clear: both; margin: 0 12px;" data-oid="<%= this.data.attr('oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
                    <div <%= (el) -> vis.binds.metro.slider(el, {min: data.min, max: data.max, step: parseFloat(data.step), color:data.sliderColor,completeColor:data.sliderCompleteColor,markerColor:data.sliderMarkerColor}) %>></div>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                </div>
            </div>

            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %><%= (el) -> vis.binds.metro.inputControl(el) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileShutterDialog" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileShutterDialog&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content&quot; style=&quot;text-align: center&quot;> <img width=&quot;90px&quot; src=&quot;widgets/metro/img/fts_shutter_100.png&quot;> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Shutter dialog</span> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> </div>  </div> </div></div>" data-vis-attrs="oid;oid-working;min;max;step[1];hover[true]/checkbox;transform[true]/checkbox;label;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;" data-vis-attrs3="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox" data-vis-set="metro" data-vis-type="ctrl,shutter,dialog" data-vis-name="Tile Shutter Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >

            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content" style="text-align: center">
                <%
                var str = vis.states.attr(this.data.oid + '.val');
                var val = parseFloat(str);
                if (str === true || str === 'true') val = 1;
                if (isNaN(val)) val = 0;

                var min = this.data.attr('min');
                if (min !== undefined && min !== null && min !== '') {
                    min = parseFloat(min);
                } else {
                    min = 0;
                }

                var max = this.data.attr('max');
                if (max !== undefined && max !== null && max !== '') {
                    max = parseFloat(max);
                } else {
                    max = 1;
                }

                val = (val - min) / (max - min);
                val = 1 - val;

                if (val == 1) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_100.png"/>
                <% } else if (val >= 0.9) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_90.png"/>
                <% } else if (val >= 0.8) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_80.png"/>
                <% } else if (val >= 0.7) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_70.png"/>
                <% } else if (val >= 0.6) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_60.png"/>
                <% } else if (val >= 0.5) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_50.png"/>
                <% } else if (val >= 0.4) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_40.png"/>
                <% } else if (val >= 0.3) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_30.png"/>
                <% } else if (val >= 0.2) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_20.png"/>
                <% } else if (val >= 0.1) { %>
                <img width="90px" src="widgets/metro/img/fts_shutter_10.png"/>
                <% } else { %>
                <img width="90px" src="widgets/metro/img/fts_window_2w.png"/>
                <% } %>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                </div>
            </div>
            <div
                <%= (el) -> vis.binds.metro.tileDialogSlider(el, data.wid, data.oid, data['oid-working'], {title:data.label,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:300,height:180}, {min: data.min, max: data.max, step: parseFloat(data.step),color:data.sliderColor,completeColor:data.sliderCompleteColor,markerColor:data.sliderMarkerColor}) %> style="padding: 42px 10px 10px;">
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileHeating" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileHeating&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock &quot; style=&quot;width: 250px; height: 136px; padding: 3px; zoom: 0.5;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile bg-indigo&quot;> <div class=&quot;tile-content&quot;> <div style=&quot;float:left; height: 90px;&quot;> <img width=&quot;90px&quot; src=&quot;widgets/metro/img/sani_heating_temp.png&quot;> </div> <div style=&quot;float: right; padding-top: 16px; padding-right: 12px;&quot;> <table style=&quot;color:white;font-size:11px;display:inline-block;&quot;> <tr><td>Set temperature:</td><td>0%</td></tr> <tr><td>Actual temperature:</td><td>0.0°C</td></tr> <tr><td>Drive position:</td><td>0</td></tr> </table> </div> <div style=&quot;clear: both; margin: 0 12px;&quot; class=&quot;slider&quot; data-role=&quot;slider&quot;></div>  </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Heating</span> </div> </div> <div></div> </div> </div></div>" data-vis-attrs="set_oid/id/onHeatingOid;temp_oid/id;drive_oid/id;hum_oid/id;hover/checkbox;transform/checkbox;label;min[6]/slider,-20,40,1;max[30]/slider,-20,40,1;step;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="label_set;label_temp;label_drive;label_humidity;" data-vis-attrs3="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;" data-vis-attrs4="group.service;lowbat_oid/id;icon_lowbat[icon-battery]/style,iconFont,icon-,,Icon;controlmode_oid/id;icon_control_mode_0[icon-clock]/style,iconFont,icon-,,Icon;icon_control_mode_1[icon-radio-unchecked]/style,iconFont,icon-,,Icon;icon_control_mode_2[icon-briefcase]/style,iconFont,icon-,,Icon;windowopen_oid/id;icon_windowopen[icon-enter]/style,iconFont,icon-,,Icon;badge_bg_class[]/style,metro-,bg-;" data-vis-set="metro" data-vis-type="ctrl,heating" data-vis-name="Tile Heating">
    <% // some data processing to prepare the data

        var size_badge      = 0;

        if (this.data.attr('controlmode_oid')) size_badge++;
        if (this.data.attr('windowopen_oid'))  size_badge++;
        if (this.data.attr('lowbat_oid'))      size_badge++;

    %>
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:287px; height:136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content">
                    <div style="float:left; height: 90px;">
                        <img width="90px" src="widgets/metro/img/sani_heating_temp.png"/>
                    </div>
                    <div style="float: right; padding-top: 16px; padding-right: 12px;">
                        <table style="color:white;font-size:11px;display:inline-block;">
                            <% if (this.data.attr('set_oid')) { %>
                                <tr><td><%== this.data.attr('label_set')   ? this.data.attr('label_set')   : _('Set temperature') %>:</td><td><%= vis.binds.metro.format(vis.states.attr(this.data.attr('set_oid') + '.val'), '°') %></td></tr>
                            <% } %>
                            <% if (this.data.attr('temp_oid')) { %>
                                <tr><td><%== this.data.attr('label_temp')  ? this.data.attr('label_temp')  : _('Actual temp.') %>:</td><td><%=    vis.binds.metro.format(vis.states.attr(this.data.attr('temp_oid') + '.val'), '°') %></td></tr>
                            <% } %>
                            <% if (this.data.attr('drive_oid')) { %>
                                <tr><td><%== this.data.attr('label_drive') ? this.data.attr('label_drive') : _('Valve position') %>:</td><td><%=  vis.binds.metro.format(vis.states.attr(this.data.attr('drive_oid') + '.val'), '%') %></td></tr>
                            <% } %>
                            <% if (this.data.attr('hum_oid')) { %>
                                <tr><td><%== this.data.attr('label_humidity') ? this.data.attr('label_humidity') : _('Humidity') %>:</td><td><%=  vis.binds.metro.format(vis.states.attr(this.data.attr('hum_oid') + '.val'), '%') %></td></tr>
                            <% } %>
                        </table>
                    </div>
                    <div style="clear: both; margin: 0 12px;" data-oid="<%= this.data.attr('set_oid') %>" data-oid-working="<%= this.data.attr('oid-working') %>" id="metroSlider_<%= this.data.attr('wid') %>" class="slider" data-role="slider"></div>
                    <div <%= (el) -> vis.binds.metro.slider(el, {color: data.sliderColor, completeColor: data.sliderCompleteColor, markerColor: data.sliderMarkerColor, max: data.max || 30, min: data.min || 6, step: parseFloat(data.step) || 0.1, hideIfNoOid: true}) %>></div>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                    <% if (size_badge > 0) { %>
                        <div class="badge <%= this.data.attr('badge_bg_class') %>" style="width: <%= size_badge * 19 %>px">
                        <% if (this.data.attr('controlmode_oid')) { %>
                            <i class="<%= this.data.attr('icon_control_mode_' + vis.states.attr(this.data.attr('controlmode_oid') + '.val')) %>" style="padding: 0 1px;"></i>
                        <% } %>
                        <% if (this.data.attr('lowbat_oid')) { %>
                            <i class="<%= (vis.states.attr(this.data.attr('lowbat_oid') + '.val') === true || vis.states.attr(this.data.attr('lowbat_oid') + '.val') === 'true' || vis.states.attr(this.data.attr('lowbat_oid') + '.val') == 1) ? this.data.attr('icon_lowbat') : 'metro-invisible' %>" style="padding: 0 1px;"></i>
                        <% } %>
                        <% if (this.data.attr('windowopen_oid')) { %>
                            <i class="<%= (vis.states.attr(this.data.attr('windowopen_oid') + '.val') === true || vis.states.attr(this.data.attr('windowopen_oid') + '.val') === 'true' || vis.states.attr(this.data.attr('windowopen_oid') + '.val') == 1) ? this.data.attr('icon_windowopen') : 'metro-invisible' %>" style="padding: 0 1px;"></i>
                        <% } %>
                        </div>
                    <% } %>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %><%= (el) -> vis.binds.metro.inputControl(el) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileHeatingDialog" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileHeatingDialog&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content&quot; style=&quot;text-align: center&quot;> <img width=&quot;105px&quot; src=&quot;widgets/metro/img/sani_heating_temp.png&quot;> </div> <div style=&quot;color:white; font-size:11px; margin-top: 84px; padding-left: 12px;&quot;> Target: °C, Actual: °C </div> <div class=&quot;brand &quot;> <span class=&quot;label fg-white&quot;></span> </div> </div> <div></div> <div></div> </div> </div>" data-vis-attrs="set_oid/id/onHeatingOid;temp_oid/id;drive_oid/id;hover[true]/checkbox;transform[true]/checkbox;label;min[6]/slider,-20,40,1;max[30]/slider,-20,40,1;step;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="label_short_set;label_short_temp;label_short_drive;label_set;label_temp;label_drive;" data-vis-attrs3="group.slider;sliderColor/color;sliderCompleteColor/color;sliderMarkerColor/color;" data-vis-attrs4="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox" data-vis-set="metro" data-vis-type="ctrl,heating,dialog" data-vis-name="Tile Heating Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/metro/img/light_light_dim_100.png','widgets/metro/img/light_light_dim_90.png','widgets/metro/img/light_light_dim_80.png','widgets/metro/img/light_light_dim_70.png','widgets/metro/img/light_light_dim_60.png','widgets/metro/img/light_light_dim_50.png','widgets/metro/img/light_light_dim_40.png','widgets/metro/img/light_light_dim_30.png','widgets/metro/img/light_light_dim_20.png','widgets/metro/img/light_light_dim_10.png','widgets/metro/img/light_light_dim.png']); %>>
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content" style="text-align: center">
                     <img width="105px" src="widgets/metro/img/sani_heating_temp.png"/>
                </div>
                <div style="color:white; font-size:11px; margin-top: 84px; padding-left: 12px;">
                    <%== this.data.attr('set_oid')   ? (      (this.data.attr('label_short_set')   ? this.data.attr('label_short_set')   : _('Target'))         + ': ' + vis.binds.metro.format(vis.states.attr(this.data.attr('set_oid')   + '.val'), '°')) : '' %>
                    <%== this.data.attr('temp_oid')  ? (' ' + (this.data.attr('label_short_temp')  ? this.data.attr('label_short_temp')  : _('Actual'))         + ': ' + vis.binds.metro.format(vis.states.attr(this.data.attr('temp_oid')  + '.val'), '°')) : '' %>
                    <%== this.data.attr('drive_oid') ? (' ' + (this.data.attr('label_short_drive') ? this.data.attr('label_short_drive') : _('Valve position')) + ': ' + vis.binds.metro.format(vis.states.attr(this.data.attr('drive_oid') + '.val'), '%')) : '' %>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tileDialogHeating(el, data.wid, data.set_oid, data.temp_oid, data.drive_oid, {title: data.label, flat:data.dialog_flat, shadow: data.dialog_shadow, overlay:data.dialog_modal, icon:data.dialog_icon_src, icon_class:data.dialog_icon_class, draggable:data.dialog_draggable, width:300, height:180, label_set: this.data.attr('label_set'), label_temp: this.data.attr('label_temp'), label_drive: this.data.attr('label_drive')}, {color:data.sliderColor, completeColor:data.sliderCompleteColor, markerColor:data.sliderMarkerColor, max:data.max, min:data.min, step: parseFloat(data.step)}); %>></div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>

<script id="tplMetroTileDialogStatic" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileDialogStatic&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev  vis-widget-lock&quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content fg-white icon&quot;> <i class=&quot;icon-home&quot;></i> </div> <div class=&quot;brand &quot;> <span class=&quot;label fg-white&quot;></span> <div class=&quot;badge &quot;><i class=&quot;&quot;></i></div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div></div> </div> <div></div> </div>" data-vis-attrs="label;content_oid/id;hover[true]/checkbox;transform[true]/checkbox;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-attrs2="group.badge;icon_badge[]/style,iconFont,icon-,,Icon ;" data-vis-attrs3="badge_bg_class[]/style,metro-,bg-;" data-vis-attrs4="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs5="group.dialog;html;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-set="metro" data-vis-type="ctrl,dialog" data-vis-name="static - Tile Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
                <div class="tile-content fg-white icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
                    <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                    <i class="<%= this.data.attr("icon_class") %>"></i>
                    <%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                    <div class="badge <%= this.data.attr("badge_bg_class") %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, null, {title: data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: data.dialog_width, height: data.dialog_height}, data.html) %> style="padding: 42px 10px 10px;">
                <div class="caption"></div>
                <div class="content"></div>
            </div>
        </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<script id="tplMetroTileStaticDialogNumber" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileStaticDialogNumber&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev &quot; style=&quot;width: 120px; height: 120px; padding: 3px; z-index: 0;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-book&quot;></i> </div> <div class=&quot;brand bg-orange&quot;> <span class=&quot;label fg-white&quot;></span> <div style=&quot;display: none;&quot; class=&quot;badge &quot;></div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div></div> </div> <div></div> </div>" data-vis-attrs="content_oid/id;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs0="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-pictures]/style,iconFont,icon-,,Icon ;" data-vis-attrs1="group.badge;label;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.dialog;html;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-set="metro" data-vis-type="static,dialog" data-vis-name="Tile Dialog / val - Badge Number">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
        <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %> <%= this.data.attr('bg_class') %>" >
            <div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
                <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                <i class="<%= this.data.attr("icon_class") %>"></i>
                <%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
            </div>
            <div class="brand <%= this.data.attr("brand_bg_class") %>">
                <span class="label fg-white"><%= this.data.attr("label") %></span>
                <div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
            </div>
        </div>
        <div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, null, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}, data.html) %> style="padding: 42px 10px 10px;">
            <div class="caption"></div>
            <div class="content"></div></div>
            </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<script id="tplMetroTileDialogString" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileDialogString&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-film&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Dialog Object</span> <div class=&quot;badge &quot;><i class=&quot;&quot;></i></div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div></div> </div>  </div></div>" data-vis-attrs="content_oid/id;dialog_oid/id;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs0="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-attrs1="group.badge;label;icon_badge[]/style,iconFont,icon-,,Icon ;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.dialog;dialog_fontSize[12px];dialog_padding[0px 0px 0px 0px];dialog_textAlign;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-set="metro" data-vis-type="val,dialog" data-vis-name="Tile Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
    <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >

        <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
        <div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
        <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
        <i class="<%= this.data.attr("icon_class") %>"></i>
        <%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
    </div>
    <div class="brand <%= this.data.attr("brand_bg_class") %>">
    <span class="label fg-white"><%= this.data.attr("label") %></span>
    <div class="badge <%= this.data.attr("badge_bg_class") %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
    </div>
    </div>

    <div <%= (el) -> vis.binds.metro.tileDialogString(el, data.wid, data.dialog_oid, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height},data.dialog_fontSize, data.dialog_padding, data.dialog_textAlign) %> style="padding: 42px 10px 10px;">
    <div class="caption"></div>
    <div class="content"></div></div>
    </div>
    <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<script id="tplMetroTileStringDialogNumber" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileStringDialogNumber&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot;class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-film&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Dialog Object</span> <div class=&quot;badge bg-cyan&quot;>1</div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div></div> </div>  </div></div>" data-vis-attrs="content_oid/id;dialog_oid/id;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs0="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-database]/style,iconFont,icon-,,Icon ;" data-vis-attrs1="group.badge;label;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs2="group.dialog;dialog_fontSize[12px];dialog_padding[0px 0px 0px 0px];dialog_textAlign;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-set="metro" data-vis-type="val,dialog" data-vis-name="Tile Dialog / Badge Number">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
                <div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
                    <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                    <i class="<%= this.data.attr("icon_class") %>"></i>
                    <%== this.data.attr('content_oid') ? vis.states.attr(this.data.content_oid + '.val') : '' %>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                <div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
            </div>
        </div>

        <div <%= (el) -> vis.binds.metro.tileDialogString(el, data.wid, data.dialog_oid, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height},data.dialog_fontSize,data.dialog_padding,data.dialog_textAlign) %> style="padding: 42px 10px 10px;">
            <div class="caption"></div>
            <div class="content"></div></div>
        </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<script id="tplMetroTileDialog" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileDialog&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-pictures&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>View Container</span> <div class=&quot;badge &quot;><i class=&quot;&quot;></i></div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div> </div> </div>  </div></div>" data-vis-attrs="contains_view/views;hover[true]/checkbox;transform[true]/checkbox;" data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" data-vis-attrs1="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;" data-vis-attrs2="icon_class[icon-pictures]/style,iconFont,icon-,,Icon ;" data-vis-attrs3="group.badge;label;icon_badge[]/style,iconFont,icon-,,Icon ;" data-vis-attrs4="badge_bg_class[]/style,metro-,bg-;" data-vis-attrs5="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs6="group.dialog;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;" data-vis-attrs7="dialog_icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-set="metro" data-vis-type="container,dialog" data-vis-name="Tile Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
                <div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
                    <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                    <i class="<%= this.data.attr("icon_class") %>"></i>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                    <div class="badge <%= this.data.attr("badge_bg_class") %>"><i class="<%= this.data.attr("icon_badge") %>"></i></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, data.contains_view, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}) %> style="padding: 42px 10px 10px;">
                <div class="caption"></div>
                <div class="content"></div>
            </div>
        </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<script id="tplMetroTileDialogNumber" type="text/ejs" data-vis-prev="<div id=&quot;prev_tplMetroTileDialogNumber&quot; style=&quot;position: relative; text-align: initial;padding: 4px&quot;><div class=&quot;vis-widget_prev ui-draggable-handle &quot; style=&quot;width: 120px; height: 120px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body &quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;> <div class=&quot;tile-content icon&quot;> <i class=&quot;icon-pictures&quot;></i> </div> <div class=&quot;brand ribbed-steel&quot;> <span class=&quot;label fg-white&quot;>Dialog num</span> <div class=&quot;badge bg-teal&quot;>2</div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div> </div> </div>  </div></div>" data-vis-attrs="contains_view/views;number_oid/id;hide_on_0/checkbox;hover[true]/checkbox;transform[true]/checkbox;" data-vis-attrs0="bg_class[]/style,metro-,bg- ribbed-;" data-vis-attrs1="group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[]/style,iconFont,icon-,,Icon ;" data-vis-attrs2="group.badge;label;badge_bg_class[]/style,metro-,bg-;" data-vis-attrs3="brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs4="group.dialog;dialog_width;dialog_height;dialog_title;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;" data-vis-attrs5="dialog_icon_class[]/style,iconFont,icon-,,Icon ;" class="vis-tpl" data-vis-set="metro" data-vis-type="container,dialog" data-vis-name="Tile Dialog / val - Badge Number">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
                <div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
                    <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                    <i class="<%= this.data.attr("icon_class") %>"></i>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                    <div style="<%= vis.states.attr(this.data.number_oid + '.val') > 0 ? '' : 'display:none;' %>" class="badge <%= this.data.attr("badge_bg_class") %>"><%= vis.states.attr(this.data.number_oid + '.val') %></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, data.contains_view, {title:data.dialog_title,flat:data.dialog_flat,shadow:data.dialog_shadow,overlay:data.dialog_modal,icon:data.dialog_icon_src,icon_class:data.dialog_icon_class,draggable:data.dialog_draggable,width:data.dialog_width,height:data.dialog_height}) %> style="padding: 42px 10px 10px;">
                <div class="caption"></div>
                <div class="content"></div>
            </div>
        </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<script id="tplMetroTileFrameDialogNumber" type="text/ejs" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplMetroTileFrameDialogNumber&quot; style=&quot;position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev&quot; style=&quot;width: 136px; height: 136px; padding: 3px;&quot;> <div style=&quot;width:100%; height:100%&quot; class=&quot;metro vis-widget-prev-body&quot;> <div style=&quot;width:100%; height:100%;&quot; class=&quot;tile hover bg-indigo&quot;><div class=&quot;tile-content icon&quot;><i class=&quot;icon-cloud&quot;></i></div><div class=&quot;brand ribbed-steel&quot;><span class=&quot;label fg-white&quot;>iFrame Dialog</span> <div style=&quot;&quot; class=&quot;badge &quot;></div> </div> </div> <div style=&quot;padding: 42px 10px 10px;&quot;> <div class=&quot;caption&quot;></div> <div class=&quot;content&quot;></div></div> </div>  </div></div>" data-vis-attrs="content;hover[true]/checkbox;transform[true]/checkbox;bg_class[bg-indigo]/style,metro-,bg- ribbed-;group.icon;icon_src/image;icon_width/slider,0,100,1;icon_height/slider,0,100,1;icon_top/slider,0,100,1;icon_left/slider,0,100,1;icon_class[icon-accessibility]/style,iconFont,icon-,,Icon ;" data-vis-attrs0="group.badge;label;badge_label;badge_bg_class[]/style,metro-,bg-;brand_bg_class[ribbed-steel]/style,metro-,bg- ribbed-;" data-vis-attrs1="group.dialog;dialog_url[https:~~maps.google.com~maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Karlsruhe&amp;ie=UTF8&amp;t=m&amp;z=12&amp;output=embed&amp;iwloc=near];dialog_scroll;dialog_width[400px];dialog_height[300px];dialog_title[Google maps];dialog_flat[true]/checkbox;dialog_shadow[true]/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox;dialog_icon_src/image;dialog_icon_class[icon-globe]/style,iconFont,icon-,,Icon ;" data-vis-set="metro" data-vis-type="iframe,dialog" data-vis-name="Tile Dialog / iFrame">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width:136px; height:136px; padding: 3px;">
        <div style="width:100%; height:100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >
            <div style="width:100%; height:100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>" >
                <div class="tile-content icon <%= this.data.attr("icon_class") ? '' : 'icon-custom' %>">
                    <%== this.data.attr("icon_src") ? '<img style="position: absolute;' + (this.data.attr('icon_top') ? ('top:' + this.data.attr('icon_top') + '%;') : '') + (this.data.attr('icon_left') ? ('left:' + this.data.attr('icon_left') + '%;') : '') + (this.data.attr('icon_width') ? ('width:' + this.data.attr('icon_width') + '%;') : '') + (this.data.attr('icon_height') ? ('height:' + this.data.attr('icon_height') + '%;') : '') + '" src="' + this.data.attr("icon_src") + '"/>' : '' %>
                    <i class="<%= this.data.attr("icon_class") %>"></i>
                    <%== this.data.attr('content') || '' %>
                </div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr('label') %></span>
                    <div style="" class="badge <%= this.data.attr('badge_bg_class') %>"><%= this.data.attr('badge_label') %></div>
                </div>
            </div>
            <div <%= (el) -> vis.binds.metro.tileDialog(el, data.wid, null, {title: data.dialog_title, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: data.dialog_width, height: data.dialog_height, scroll: data.dialog_scroll}, data.dialog_url, true) %> style="padding: 42px 10px 10px;">
                <div class="caption"></div>
                <div class="content"></div></div>
            </div>
        <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
    </div>
</script>

<!-- --------------metro.html--- END -->
<!-- --------------tabs.html--- START -->
<link rel="stylesheet" href="widgets/tabs/styles/jquery.sliderTabs.css">
<script src="widgets/tabs/jquery.sliderTabs.js"></script>
<script type="text/javascript">
    if (vis.editMode) {
        // Add words for widgets
        $.extend(true, systemDictionary, {
            "show_tabs":        {"en": "Tabs count",    "de": "Tabs-Anzahl",    "ru": "Количество закладок"},
            "title_tab_":       {"en": "Tab title",     "de": "Tabtitel",       "ru": "Заголовок закладки"},
            "contains_view_":   {"en": "Contains view", "de": "View für Tab",   "ru": "Имя страницы"}
        });
    }

    vis.binds.tabs = {
        stabs: function (view, wid, data) {
            var $wid = $('#' + wid);
            if (!$wid.length) {
                return setTimeout(function () {
                    vis.binds.tabs.stabs(view, wid, data);
                }, 100);
            }
            // wait till widget will be visible
            if (!$wid.is(':visible')) {
                return setTimeout(function () {
                    vis.binds.tabs.stabs(view, wid, data);
                }, 1000);
            }

            $wid.find('.tabs-container').remove();
            var i;
            var text = '<span style="width:100%;height:100%" class="tabs-container">\n';
            text += '<ul>\n';
            for (i = 1; i <= data.show_tabs; i++) {
                text += '<li><a href="#' + wid + '_st' + i + '">' + (data['title_tab_' + i] || '') + '</a></li>';
            }
            text += '</ul>';
            for(i = 1; i <= data.show_tabs; i++) {
                text += '<div id="' + wid + '_st' + i + '" style="padding-left:0; height:100%">\n';
                if (vis.editMode) text += '    <div class="editmode-helper" />\n';
                text += '    <div data-vis-contains="' + (data['contains_view_' + i] || '') + '" class="vis-widget-body vis-view-container"></div>\n';
                text += '</div>\n';
            }
            text += '</span>';
            $wid.html(text);
            $wid.find('.tabs-container').sliderTabs({
                height: $wid.height() - 5
            });
            vis.updateContainers(view);
            if (vis.editMode && vis.activeWidgets.indexOf(wid) != -1) {
                $wid.resizable('destroy');
                vis.resizable($wid);
            }
        }
    };
</script>

<script type="text/ejs" id="tplSTab" class="vis-tpl" data-vis-prev="<div id=&quot;prev_tplSTab&quot; style=&quot; position: relative; text-align: initial;padding: 4px &quot;><div class=&quot;vis-widget_prev ui-selectee&quot; style=&quot;top: 76px; left: 23px; width: 138px; height: 121px; position: absolute;&quot; > <div class=&quot;vis-widget-prev-body&quot;> <span style=&quot;width:100%;height:100%&quot; class=&quot;ui-slider-tabs&quot;> <!-- Unordered list representing the tabs --> <div class=&quot;ui-slider-tabs-list-wrapper&quot;><div class=&quot;ui-slider-tabs-list-container&quot; style=&quot;margin: 0px 35px;&quot;><ul class=&quot;ui-slider-tabs-list&quot; style=&quot;margin-left: 0px; width: 166px;&quot;> <li class=&quot;selected&quot; style=&quot;height: 32px;&quot;><a href=&quot;#w00016_st1&quot; style=&quot;height: 32px;&quot;>Tab</a></li><li style=&quot;height: 32px;&quot;><a href=&quot;#w00016_st2&quot; style=&quot;height: 32px;&quot;>Tab</a></li><li style=&quot;height: 32px;&quot;><a href=&quot;#w00016_st3&quot; style=&quot;height: 32px;&quot;>Tab</a></li></ul><a href=&quot;#&quot; class=&quot;ui-slider-left-arrow edge&quot; style=&quot;width: 35px; height: 32px;&quot;><div></div></a><a href=&quot;#&quot; class=&quot;ui-slider-right-arrow&quot; style=&quot;width: 35px; height: 32px;&quot;><div></div></a></div></div><div class=&quot;ui-slider-tabs-content-container&quot; style=&quot;height: 86px;&quot;><div style=&quot;padding-left: 0px; height: 100%; display: block; left: 0px; width: 126px;&quot; class=&quot;ui-slider-tab-content selected&quot;> <div class=&quot;editmode-helper&quot;></div> <div data-vis-contains=&quot;hallo&quot; class=&quot;vis-widget-body vis-view-container&quot;></div> </div><div style=&quot;padding-left: 0px; height: 100%; left: 138px; width: 126px;&quot; class=&quot;ui-slider-tab-content&quot;> <div class=&quot;editmode-helper&quot;></div> <div data-vis-contains=&quot;&quot; class=&quot;vis-widget-body vis-view-container&quot;></div> </div><div style=&quot;padding-left: 0px; height: 100%; left: 138px; width: 126px;&quot; class=&quot;ui-slider-tab-content&quot;> <div class=&quot;editmode-helper&quot;></div> <div data-vis-contains=&quot;&quot; class=&quot;vis-widget-body vis-view-container&quot;></div> </div></div></span> </div> </div>" data-vis-set="tabs" data-vis-update-style="true" data-vis-name="SliderTabs" data-vis-attrs="height[100]/slider,20,1000,1;show_tabs[3]/slider,1,8,1;title_tab_(1-show_tabs)[Tab];contains_view_(1-show_tabs)/views">
    <div class="vis-widget <%== this.data.attr('class') %>" style="top:0px; left: 0px; width: 250px; height: 250px;" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <% vis.binds.tabs.stabs(this.view, this.data.attr('wid'), data) %>
        </div>
    </div>
</script>

<!-- --------------tabs.html--- END -->
<!-- --------------weather-adapter.html--- START -->
<script type="text/javascript">
    if (vis.editMode) {
        // Add words for widgets
        $.extend(true, systemDictionary, {
            "oid-begin":    {"en": "oid-begin",    "de": "oid-begin",    "ru": "oid-begin"},
            "oid-end":      {"en": "oid-end",      "de": "oid-end",      "ru": "oid-end"},
            "oid-headline": {"en": "oid-headline", "de": "oid-headline", "ru": "oid-headline"},
            "oid-severity": {"en": "oid-severity", "de": "oid-severity", "ru": "oid-severity"}
        });
    }
</script>

<script id="tplYrAdapter" type="text/ejs" class="vis-tpl" data-vis-set="weather-adapter" data-vis-name="yr.no Weather" data-vis-attrs="oid[yr.0.forecast.html]">
    <div class="vis-widget <%== this.data.attr('class') %>" style="padding: 3px; background-color:#ccc; font-family: Arial; width: 310px; height: 80px" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body">
            <%== vis.states.attr(this.data.oid + '.val') %>
        </div>
    </div>
</script>

<script id="tplDwdAdapterSmall" type="text/ejs" class="vis-tpl" data-vis-set="weather-adapter" data-vis-name="DWD Wetterwarnungen klein" data-vis-attrs="oid[dwd.0.warning.text];oid-severity[dwd.0.warning.severity]">
    <%
    var dwdBackground = ["", "yellow", "orange", "red", "darkviolet"];
    %>
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 160px; height: 21px; font-family: Arial" id="<%= this.data.attr('wid') %>">
        <div class="vis-widget-body" style="padding: 3px; background-color: <%= dwdBackground[parseInt(vis.states.attr(this.data['oid-severity'] + '.val'), 10)] %>;">
            <div data-oid="<%= this.data.attr('oid') %>">
                <%== vis.states.attr(this.data.oid + '.val') %>
            </div>
        </div>
    </div>
</script>

<script id="tplDwdAdapter" type="text/ejs" class="vis-tpl" data-vis-set="weather-adapter" data-vis-name="DWD Wetterwarnungen" data-vis-attrs="oid-begin[dwd.0.warning.begin];oid-end[dwd.0.warning.end];oid-headline[dwd.0.warning.headline];oid[dwd.0.warning.description];oid-severity[dwd.0.warning.severity]">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 585px; height: 85px; font-family: Arial" id="<%= this.data.attr('wid') %>">
        <%
        var dwdBackground = ["", "yellow", "orange", "red", "darkviolet"];
        %>
        <div class="vis-widget-body" style="padding: 3px; background-color: <%= dwdBackground[parseInt(vis.states.attr(this.data['oid-severity'] + '.val'), 10)] %>;">
            <div style="font-size: 1.5em; font-weight: bold;" data-oid="<%= this.data.attr('oid-headline') %>">
                <%== vis.states.attr(this.data['oid-headline'] + '.val') %>
            </div>
            <p><%== vis.states.attr(this.data['oid'] + '.val') %><br/>
            <%== vis.states.attr(this.data['oid-begin'] + '.val') %> <%== vis.states.attr(this.data['oid-begin'] + '.val') ? ' - ' : '' %><%== vis.states.attr(this.data['oid-end'] + '.val') %></p>
        </div>
    </div>
</script>
<!-- --------------weather-adapter.html--- END -->

<!-- ---------------------------------------  DO NOT EDIT INSIDE THIS LINE - END   ------------------------------------------- -->

<div id="waitScreen" class="vis-wait-screen">
    <div id="waitDialog" class="waitDialog">
        <div class="vis-progressbar "></div>
        <div class="vis-wait-text" id="waitText"></div>
    </div>
</div>

<div style="display: none;text-align: center" id="dialog_delete">
    <table style="height: 100%;width: 100%">
        <tbody><tr>
            <td><span class="ui-icon ui-icon-alert" style="display:inline-block"></span><span id="dialog_delete_content" style="display:inline-block;padding-left:10px"></span>
            </td>
        </tr>
        <tr>
            <td style="text-align: left; vertical-align: bottom"><input type="checkbox" id="dialog_delete_is_show" style="display:inline-block;padding-left:10px">
                <span class="translate">Do not ask again</span></td>
        </tr>
    </tbody></table>
</div>
<div style="display: none;text-align: center" id="dialog_about" title="About" class="translateT">

    <ul style="font-size: 1.1em; line-height: 2em; display: inline;">
        <li><a href="http://ioBroker.net/" target="_blank" class="translate">Web</a></li>
        <li><a href="http://forum.iobroker.net" target="_blank" class="translate">Community</a></li>
        <li><a href="https://github.com/ioBroker/ioBroker.vis/blob/master/README.md" target="_blank" class="translate">Change log</a>
        </li>
    </ul>

    <h4>Copyright © 2013-2015 <a href="https://github.com/GermanBluefox" target="_blank">Bluefox</a>, <a href="https://hobbyquaker.github.io" target="_blank">hobbyquaker</a>, <a href="https://github.com/smiling-Jack" target="_blank">smiling-Jack</a></h4>

    <p class="translate">CC BY-NC License 4.0</p><a href="http://creativecommons.org/licenses/by-nc/4.0/"><img src="img/cc-nc-by.png"></a>
    <!--p class="translate">license1</p>
    <p class="translate">license2</p>
    <p class="translate">license3</p>
    <p class="translate">license4</p-->
    <p class="translate">license5</p>
</div>
<div style="display: none;" id="dialog_export_view" title="export view" class="translateT">
    <textarea rows="60" cols="160" style="width: 99%; height: 98%; font-size: 11px;" id="textarea_export_view"></textarea>
</div>
<div style="display: none;" id="dialog_import_view" title="import view" class="translateT">
    <textarea rows="50" cols="160" style="width: 99%; height: calc(98% - 40px); font-size: 11px;" id="textarea_import_view"></textarea>
    <table class="table-no-space">
        <tbody><tr class="table-no-space">
            <td class="translate table-no-space">View name: </td>
            <td class="table-no-space"><input type="text" id="name_import_view"></td>
            <td class="table-no-space"><button id="start_import_view" class="translateB">import view</button></td>
        </tr>
    </tbody></table>

</div>
<div style="display: none;" id="dialog_export_widgets" title="export widgets title" class="translateT">
    <textarea rows="60" cols="160" style="width: 99%; height: 98%; font-size: 11px;" id="textarea_export_widgets"></textarea>
</div>
<div style="display: none;" id="dialog_import_widgets" title="import widgets" class="translateT">
    <textarea rows="50" cols="160" style="width: 99%; height: calc(98% - 40px); font-size: 11px;" id="textarea_import_widgets"></textarea>
    <button id="start_import_widgets" class="translateB">import widgets</button>
</div>
<div style="display: none ;text-align: center" id="dialog_shortcuts" title="Shortcuts" class="translateT">
    <table style="height: 100%;width: 100%">
        <colgroup>
            <col style="text-align: left">
            <col style="text-align: center">
            <col style="text-align: center">
        </colgroup>
        <tbody><tr>
            <td class="translate">Full screen</td>
            <td></td>
            <td>F3</td>
        </tr>
        <tr>
            <td class="translate">Next View</td>
            <td></td>
            <td class="translate">PgUp</td>
        </tr>
        <tr>
            <td class="translate">Prev. View</td>
            <td></td>
            <td class="translate">PgDown</td>
        </tr>
        <tr>
            <td class="translate">Move Widget 1px</td>
            <td>
            </td>
            <td class="translate">Arrow Keys</td>
        </tr>
        <tr>
            <td class="translate">Move Widget 10px</td>
            <td class="translate">Ctrl / CMD</td>
            <td class="translate">Arrow Keys</td>
        </tr>
        <tr>
            <td class="translate" style="color:rgba(1,1,1,0.05)">Show develop ribbon</td>
            <td></td>
            <td style="color:rgba(1,1,1,0.05)">F2</td>
        </tr>
    </tbody></table>
</div>

<div style="height: 34px; width: 100%; position: absolute; top: 0;left:0" class="ui-widget-header ">

</div>
<div id="menu_body" style="display: none; padding: 0;border: none; background: transparent;z-index: 999 ">
    <div style="margin-left: 5px; display: inline-block; position: relative;top:-4px"><span class="ui-widget-header" style="border: 0">vis </span><span id="vis-version" class="ui-widget-header" style="border: 0"></span></div>

    <ul style="border-radius: 0;display: inline-block; background: transparent; border: none;margin-bottom: -4px;position: relative; z-index: 2">
        <li id="ribbon_tab_datei" style="display: none">
            <a href="#ribbon_file" style="padding: 2px 4px 2px 4px" class="translate">File</a>
        </li>
        <li>
            <a href="#ribbon_view" style="padding: 2px 4px 2px 4px" class=" translate">Views</a>
        </li>
        <li>
            <a href="#ribbon_widget" style="padding: 2px 4px 2px 4px" class="translate">Widgets</a>
        </li>
        <li id="ribbon_tab_dev" style="display: none">
            <a href="#ribbon_dev" style="padding: 2px 4px 2px 4px" class="translate">Dev</a>
        </li>
        <li>
            <a href="#ribbon_tools" style="padding: 2px 4px 2px 4px" class="translate">Tools</a>
        </li>
    </ul>
    <div id="menu_sf" style="display: inline-block; margin-bottom: -4px;">
        <ul id="menu" style="margin: 0; height: auto;" class="sf-menu">
            <li class="ui-state-default ui-corner-top menu-tab" role="tab" style=""><a class="menu-tab-text translate">Setup</a>
                <ul style="display: none;">
                    <li class="ui-state-default " role="tab" style="width: 250px ; background-image: none">
                        <a class="menu-tab-text"><span class="translate">Theme</span><span style="float: right;margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
                        <ul id="ul_theme">
                            <li class="ui-state-default menu-item" data-theme="dark-hive">
                                <a data-info="dark-hive">Dark-Hive</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="start">
                                <a data-info="start">Start</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="humanity">
                                <a data-info="humanity">humanity</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="blitzer">
                                <a data-info="blitzer">blitzer</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="black-tie">
                                <a data-info="black-tie">BlackTie</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="cupertino">
                                <a data-info="cupertino">Cupertino</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="eggplant">
                                <a data-info="eggplant">Eggplant</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="excite-bike">
                                <a data-info="excite-bike">excite-bike</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="flick">
                                <a data-info="flick">flick</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="le-frog">
                                <a data-info="le-frog">le-frog</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="mint-choc">
                                <a data-info="mint-choc">mint-choc</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="overcast">
                                <a data-info="overcast">overcast</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="pepper-grinder">
                                <a data-info="pepper-grinder">pepper-grinder</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="redmond">
                                <a data-info="redmond">redmond</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="smoothness">
                                <a data-info="smoothness">smoothness</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="south-street">
                                <a data-info="south-street">south-street</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="sunny">
                                <a data-info="sunny">sunny</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="trontastic">
                                <a data-info="trontastic">trontastic</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="ui-darkness">
                                <a data-info="ui-darkness">ui-darkness</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="ui-lightness">
                                <a data-info="ui-lightness">ui-lightness</a>
                            </li>
                            <li class="ui-state-default menu-item" data-theme="vader">
                                <a data-info="vader">vader</a></li>
                        </ul>
                    </li>
                    <li class="ui-state-default " role="tab" style="width: 250px;  background-image: none">
                        <a class="menu-tab-text"><span class="translate">Language</span><span style="float: right;margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
                        <ul>
                            <li class="ui-state-default language-select menu-item" data-language="de">
                                <a>Deutsch</a>
                            </li>
                            <li class="ui-state-default language-select menu-item" data-language="en">
                                <a>English</a>
                            </li>
                            <li class="ui-state-default language-select menu-item" data-language="ru">
                                <a>русский</a>
                            </li>
                        </ul>
                    </li>
                    <li id="li_menu_projects" class="ui-state-default" role="tab" style="width: 250px;  background-image: none">
                        <a class="menu-tab-text"><span class="translate">Projects</span><span style="float: right; margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
                        <ul id="menu_projects">
                            <li class="ui-state-default project-select menu-item" data-language="de"><a>Main</a></li>
                        </ul>
                    </li>
                    <li id="li_menu_new_project" class="ui-state-default project-new" role="tab" style="width: 250px;  background-image: none">
                        <a class="menu-tab-text"><span class="translate">New project...</span></a>
                    </li>
                    <li id="li_menu_file_manager" class="ui-state-default" role="tab" style="width: 250px;  background-image: none">
                        <a class="menu-tab-text"><span class="translate">File manager...</span></a>
                    </li>
                    <li id="li_menu_object_browser" class="ui-state-default" role="tab" style="width: 250px;  background-image: none">
                        <a class="menu-tab-text"><span class="translate">Object browser...</span></a>
                    </li>
                </ul>
            </li>
            <li class="ui-state-default ui-corner-top menu-tab" role="tab" style=""><a class="menu-tab-text translate">Help</a>
                <ul>
                    <li class="ui-state-default  menu-item"><a id="m_shortcuts" class="translate">Shortcuts</a></li>
                    <li class="ui-state-default  menu-item"><a id="m_about" class="translate">About</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <img src="lib/img/edit-undo-8.png" id="button_undo" class="ui-state-default ui-corner-top translateT" title="Undo">
    <table style="display: inline-block; float: right">
        <tbody><tr>
            <td><div id="current-user" class="ui-widget-header" style="border: 0; padding-right: 10px; height: 16px"></div></td>
            <td style="width:30px"><button id="saving_progress"></button></td>
            <td><button id="logout_button" class="ui-state-default ui-corner-top translateT" style="display: none;" title="Logout"></button></td>
            <td><button id="exit_button"></button></td>
        </tr>
    </tbody></table>

    <div class="ribbon_tab" id="ribbon_file">
        <div class="ribbon_tab_content ui-widget-content"></div>
    </div>
    <div class="ribbon_tab" id="ribbon_view">
        <div class="ribbon_tab_content ui-widget-content">
            <div class="ribbon_field ui-widget-content ui-corner-all" style="width: 500px;">
                <table style="border-spacing: 0px; width: 100%">
                    <colgroup>
                        <col width="80px" style="text-align:left">
                        <col width="100%">
                        <col span="10" width="26px">
                    </colgroup>
                    <tbody><tr id="rib_view_add_tr" style="display:none">
                        <td style=" height: 22px; padding-right:3px" class="translate">New Name:</td>
                        <td>
                            <input type="text" id="rib_view_addname">
                        </td>
                        <td>
                            <div id="rib_view_add_ok" class="btn-iconbar ui-corner-all"></div>
                        </td>
                        <td>
                            <div id="rib_view_add_cancel" class="btn-iconbar ui-corner-all"></div>
                        </td>
                    </tr>
                    <tr id="rib_view_rename_tr" style="display:none">
                        <td style=" height: 22px; padding-right:3px" class="translate">New Name:</td>
                        <td>
                            <input type="text" id="rib_view_newname">
                        </td>
                        <td>
                            <div id="rib_view_rename_ok" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/ok.png"></div>
                        </td>
                        <td>
                            <div id="rib_view_rename_cancel" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/cancel.png"></div>
                        </td>
                    </tr>
                    <tr id="rib_view_copy_tr" style="display:none">
                        <td style=" height: 22px; padding-right:3px" class="translate">New Name:</td>
                        <td>
                            <input type="text" id="rib_view_copyname">
                        </td>
                        <td>
                            <div id="rib_view_copy_ok" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/ok.png"></div>
                        </td>
                        <td>
                            <div id="rib_view_copy_cancel" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/cancel.png"></div>
                        </td>
                    </tr>
                    <tr id="rib_view">
                        <td style=" height: 22px; padding-right:3px" class="translate">Active View:</td>
                        <td>
                            <select id="select_view" style="width: 310px"></select>
                        </td>
                        <td>
                            <div id="rib_view_add" class="btn-iconbar ui-corner-all translateT" title="Add new view"><img class="icon-on-iconbar" src="icon/add.png" style="width: 16px;height: 16px;margin: 3px;"></div>
                        </td>
                        <td>
                            <div id="rib_view_del" class="btn-iconbar ui-corner-all translateT" title="Delete actual view"><img class="icon-on-iconbar" src="icon/delete.png"></div>
                        </td>
                        <td>
                            <div id="rib_view_rename" class="btn-iconbar ui-corner-all translateT" title="Rename view"><img class="icon-on-iconbar" src="icon/rename.png"></div>
                        </td>
                        <td>
                            <div id="rib_view_copy" class="btn-iconbar ui-corner-all translateT" title="Copy view"><img class="icon-on-iconbar" src="icon/copy.png"></div>
                        </td>
                    </tr>
                </tbody></table>

            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <button class="vis-editor translateB" id="export_view">export view</button>
                        </td>
                        <td>
                            <button class="vis-editor translateB" id="import_view">import view</button>
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </div>
    </div>
    <div class="ribbon_tab" id="ribbon_widget">
        <div class="ribbon_tab_content ui-widget-content">
            <div class="ribbon_field ui-widget-content ui-corner-all" style="width: 461px;">
                <table style="border-spacing: 0px; width: 100%; text-align: left">
                    <colgroup>
                        <col width="80px" style="text-align:left">
                        <col width="100%">
                        <col span="10" width="26px">
                        <col span="10" width="26px">
                        <col span="10" width="26px">
                    </colgroup>
                    <tbody><tr id="rib_wid_copy_tr" style="display:none">
                        <td style="height: 22px; padding-right: 3px" class="translate">To View:</td>
                        <td><select id="rib_wid_copy_view" style="width: 310px"></select></td>
                        <td><div id="rib_wid_copy_ok" class="btn-iconbar ui-corner-all"></div></td>
                        <td colspan="2"><div id="rib_wid_copy_cancel" class="btn-iconbar ui-corner-all"></div></td>
                    </tr>
                    <tr id="rib_wid">
                        <td style=" height: 22px; padding-right:3px" class="translate">Active Widget:</td>
                        <td><select id="select_active_widget" multiple="multiple" data-multiselect-width="400" data-multiselect-height="250"></select></td>
                        <td><div id="rib_wid_del" class="btn-iconbar ui-corner-all translateT" title="Delete widget"></div></td>
                        <td><div id="rib_wid_copy" class="btn-iconbar ui-corner-all translateT" title="Copy widget"></div></td>
                        <td><div id="rib_wid_doc" class="btn-iconbar ui-corner-all translateT" title="Help about widget"></div></td>
                    </tr>
                </tbody></table>
            </div>
            <!--<div class="ribbon_field ui-widget-content ui-corner-all"style="display:none">-->
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td class="translate" style="text-align: center; height: 22px; padding-right: 3px">Align widgets:</td>
                        <td>
                            <div id="wid_align_left" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/left"><img class="icon-on-iconbar" src="icon/align-horizontal-left.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_right" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/right"><img class="icon-on-iconbar" src="icon/align-horizontal-right-2.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_top" class="btn-iconbar ui-corner-all translateT" title="Align vertical/top"><img class="icon-on-iconbar" src="icon/align-vertical-top-2.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_bottom" class="btn-iconbar ui-corner-all translateT" title="Align vertical/bottom"><img class="icon-on-iconbar" src="icon/align-vertical-bottom-2.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_hc" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/center"><img class="icon-on-iconbar" src="icon/align-horizontal-center-2.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_vc" class="btn-iconbar ui-corner-all translateT" title="Align vertical/center"><img class="icon-on-iconbar" src="icon/align-vertical-center-2.png"></div>
                        </td>
                        <td>
                            <div id="wid_dis_h" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/equal"><img class="icon-on-iconbar" src="icon/distribute-horizontal-equal.png"></div>
                        </td>
                        <td>
                            <div id="wid_dis_v" class="btn-iconbar ui-corner-all translateT" title="Align vertical/equal"><img class="icon-on-iconbar" src="icon/distribute-vertical-equal.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_width" class="btn-iconbar ui-corner-all translateT" title="Align width"><img class="icon-on-iconbar" src="icon/align-width.png"></div>
                        </td>
                        <td>
                            <div id="wid_align_height" class="btn-iconbar ui-corner-all translateT" title="Align height"><img class="icon-on-iconbar" src="icon/align-height.png"></div>
                        </td>
                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all" style="">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td class="translate" style="text-align: center; height: 22px; padding-right: 3px">All widgets:</td>
                        <td>
                            <input id="wid_all_lock_function" type="checkbox"><label style="width: 23px; height: 23px" id="wid_all_lock_f" for="wid_all_lock_function" class="translateT ttt" title="Lock Widget function"></label>
                        </td>
                        <td>
                            <input id="wid_all_lock_drag" type="checkbox"><label style="width: 23px;height: 23px" id="wid_all_lock_d" for="wid_all_lock_drag" class="translateT" title="Lock Widget dragging"></label>
                        </td>
                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <button class="vis-editor translateB" id="export_widgets">export widgets</button>
                        </td>
                        <td>
                            <button class="vis-editor translateB" id="import_widgets">import widgets</button>
                        </td>
                    </tr>
                </tbody></table>
            </div>

        </div>
    </div>
    <div class="ribbon_tab" id="ribbon_tools">
        <div class="ribbon_tab_content ui-widget-content">
            <div class="ribbon_field ui-widget-content ui-corner-all" style="width: 450px">
                <table style="border-spacing: 0px; width: 100%">
                    <colgroup>
                        <col width="80px" style="text-align:left">
                        <col width="100%">
                        <col span="10" width="26px">
                    </colgroup>
                    <tbody><tr id="rib_tools_resolution_manuel" style="display:none">
                        <td class="translate">Resolution:</td>
                        <td><table style="border: 0px"><tbody><tr>
                            <td><div style="display: inline-block" class="translate">Width</div></td>
                            <td><input id="screen_size_x" type="number" style="width: 60px" value=""></td>
                            <td><div style="display: inline-block" class="translate">Height</div></td>
                            <td><input id="screen_size_y" type="number" style="width: 60px" value=""></td>
                            </tr></tbody></table>
                        </td>
                        <td>
                            <div class="rib_tool_resolution_toggle"></div>
                        </td>
                        <td>
                            <table style="border: 0px"><tbody><tr>
                                <td><label for="screen_default_man" title="Default screen">Default:</label></td><td><input class="vis-screen-default" id="screen_default_man" type="checkbox"></td></tr>
                            </tbody></table>
                        </td>
                    </tr>
                    <tr id="rib_tools_resolution_fix">
                        <td class="translate">Resolution:</td>
                        <td>
                            <select id="screen_size">
                                <option value="" class="translate">not defined</option>
                                <option value="user" class="translate">User defined</option>
                                <option value="320x460">iPhone 3G, 3GS, 4, 4S - Portrait</option>
                                <option value="480x300">iPhone 3G, 3GS, 4, 4S - Landscape</option>
                                <option value="320x548">iPhone 5, 5S - Portrait</option>
                                <option value="568x300">iPhone 5, 5S - Landscape</option>
                                <option value="768x1004">iPad - Portrait</option>
                                <option value="1024x748">iPad - Landscape</option>
                                <option value="320x533">Samsung S2 - Portrait</option>
                                <option value="533x320">Samsung S2 - Landscape</option>
                                <option value="360x640">Samsung S3, Note 2 - Portrait</option>
                                <option value="640x360">Samsung S3, Note 2 - Landscape</option>
                                <option value="360x640">Samsung S4, S5, Note 3 - Portrait</option>
                                <option value="640x360">Samsung S4, S5, Note 3 - Landscape</option>
                                <option value="384x640">Nexus 4 - Portrait</option>
                                <option value="640x384">Nexus 4 - Landscape</option>
                                <option value="360x640">Nexus 5 - Portrait</option>
                                <option value="640x360">Nexus 5 - Landscape</option>
                                <option value="604x966">Nexus 7 (2012) - Portrait</option>
                                <option value="966x604">Nexus 7 (2012) - Landscape</option>
                                <option value="800x1280">Nexus 10 - Portrait</option>
                                <option value="1280x800">Nexus 10 - Landscape</option>
                                <option value="720x1280">HD - Portrait</option>
                                <option value="1280x720">HD - Landscape</option>
                                <option value="1080x1920">Full HD - Portrait</option>
                                <option value="1920x1080">Full HD - Landscape</option>
                            </select>
                        </td>
                        <td>
                            <div class="rib_tool_resolution_toggle"></div>
                        </td>
                        <td>
                            <table style="border: 0px"><tbody><tr>
                                <td><label for="screen_default_fix" title="Default screen">Default:</label></td><td><input class="vis-screen-default" id="screen_default_fix" type="checkbox"></td></tr>
                            </tbody></table>
                        </td>
                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <span style=" display: inline-block;" class="translate">Grid</span>
                        </td>
                        <td style="padding-left: 5px">
                            <select id="snap_type">
                                <option value="0" class="translate">disabled</option>
                                <option value="1" class="translate">elements</option>
                                <option value="2" class="translate">grid</option>
                            </select>
                        </td>
                        <td class="translate" style="padding-left: 5px">grid size</td>
                        <td><input id="grid_size" type="number" value=""></td>
                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <span style="display: inline-block" class="translate">Instance ID</span>
                        </td>
                        <td>
                            <input type="text" id="vis_instance">
                        </td>
                        <td>
                            <button type="button" class="vis-editor translateB" id="create_instance">create_instance</button>
                        </td>

                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <span style="display: inline-block" class="translate translateT" title="Make available for all users">Available for all:</span>
                        </td>
                        <td>
                            <input type="checkbox" id="vis_access_mode">
                        </td>
                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all" style="display: none">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td style="width: 80px" class="translate">Room:</td>
                        <td><select id="wizard_rooms"></select></td>
                        <td style="width: 80px" class="translate">Function:</td>
                        <td><select id="wizard_funcs"></select></td>
                        <td style="width: 80px" class="translate">Widget:</td>
                        <td><select id="wizard_widgets"></select></td>
                    </tr>
                </tbody></table>
            </div>
        </div>

    </div>
    <div class="ribbon_tab" id="ribbon_dev">
        <div class="ribbon_tab_content ui-widget-content">
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <button id="dev_show_html">Show Widget HTML</button>
                        </td>
                    </tr>
                </tbody></table>
            </div>
            <div class="ribbon_field ui-widget-content ui-corner-all">
                <table style="border-spacing: 0px">
                    <tbody><tr>
                        <td>
                            <button class="vis-editor translateB" id="export_local_view">export views</button>
                        </td>
                        <td>
                            <button class="vis-editor translateB" id="import_local_view">import views</button>
                        </td>
                        <td>
                            <button class="vis-editor translateB" id="clear_local_view">clear cached views</button>
                        </td>
                    </tr>
                </tbody></table>
            </div>

        <div class="ribbon_field ui-widget-content ui-corner-all">
            <table style="border-spacing: 0px; text-align: center">
                <tbody><tr>
                    <td class="translate">dev1</td>
                    <td class="translate">dev2</td>
                    <td class="translate">dev3</td>
                    <td class="translate">dev4</td>
                    <td class="translate">dev5</td>
                    <td class="translate">dev6</td>
                </tr>
                <tr>
                    <td>
                        <input type="number" value="0" step="1" class="vis-editor oid-dev" id="oid_dev1">
                    </td>
                    <td>
                        <input type="number" value="0" step="1" class="vis-editor oid-dev" id="oid_dev2">
                    </td>
                    <td>
                        <input type="number" value="0" step="1" class="vis-editor oid-dev" id="oid_dev3">
                    </td>
                    <td>
                        <input type="number" value="0.0" step="0.1" class="vis-editor oid-dev" id="oid_dev4">
                    </td>
                    <td>
                        <input type="number" value="1" step="1" class="vis-editor oid-dev" id="oid_dev5">
                    </td>
                    <td>
                        <input type="text" value="string" class="vis-editor oid-dev" id="oid_dev6">
                    </td>
                </tr>
            </tbody></table>
        </div>
        </div>
    </div>
</div>

<div id="panel_body" class="ui-widget-content" style="display: none; height: 100%">
    <div class="ui-widget-content" id="pan_add_wid">
        <div class="ui-state-default" style="height:16px;font-size:16px;padding: 5px;font-weight: bolder;">
            <span class="translate">Add Widget</span>
            <div id="btn_prev_type" title="Show type of widgets" class="translateT"><span class="ui-icon ui-icon-tag"></span></div>
            <div id="btn_prev_zoom" title="Small widgets" class="translateT"><span class="ui-icon ui-icon-zoomout"></span></div>
        </div>
        <input id="filter_set" value="*" type="text" style="width: 100%" class="translateT" title="Widgets filter. Double click to clear.">
        <select id="select_set" style="width: 100%" class="select-set"></select>

        <div id="toolbox" class="toolbox"></div>
    </div>
    <div id="vis_wrap">
        <div id="view_select" class="ui-widget-content">
            <button id="view_select_left"></button>
            <div id="view_select_tabs_wrap">
                <div id="view_select_tabs"></div>
            </div>
            <button id="view_select_right"></button>
        </div>
        <div id="vis_container" style="width: 100%; height: 100%; overflow: auto" class="ui-widget-content vis_container_edit vis_container " caption="Views">
            <div id="size_x" style="display:none; z-index: 99; position: absolute; top: 0; width:0; border-right: 1px solid red; height: 100%; border-left: 1px solid green; height: 100%;"></div>
            <div id="size_y" style="display:none; z-index: 99; position: absolute; left: 0; height:0; border-bottom: 1px solid red; width: 100%; border-top: 1px solid green; width: 100%;"></div>
            <ul id="context_menu" style="position: absolute;display:none;z-index:999; min-width:300px">
                <li id="context_menu_wid" class="ui-state-disabled"></li>
                <li id="context_menu_select" class="context-submenu context-menu-common-item" data-action="select">
                    <span class="translate">Select</span>
                </li>
                <li id="context_menu_copy" class="ui-state-disabled context-submenu context-menu-common-item" data-action="copy">
                    <span class="ui-icon ui-icon-copy"></span>
                    <span class="translate">Copy</span>
                </li>
                <li id="context_menu_cut" class="ui-state-disabled context-submenu context-menu-common-item" data-action="cut">
                    <span class="ui-icon ui-icon-scissors"></span>
                    <span class="translate">Cut</span>
                </li>
                <li id="context_menu_paste" class="ui-state-disabled context-submenu context-menu-common-item" data-action="paste">
                    <span class="ui-icon ui-icon-document"></span>
                    <span class="translate">Paste</span>
                </li>
                <li id="context_menu_delete" class="ui-state-disabled context-submenu context-menu-common-item" data-action="delete">
                    <span class="ui-icon ui-icon-trash"></span>
                    <span class="translate">Delete</span>
                </li>
                <li id="context_menu_more"><span class="translate">More</span>
                    <ul style="min-width:250px">
                        <li id="context_menu_lock" class="ui-state-disabled context-submenu context-menu-common-item" data-action="lock">
                            <span class="ui-icon ui-icon-locked"></span>
                            <span class="translate">Lock</span>
                        </li>
                        <li id="context_menu_unlock" class="ui-state-disabled context-submenu context-menu-common-item" data-action="unlock">
                            <span class="ui-icon ui-icon-unlocked"></span>
                            <span class="translate">Unlock</span>
                        </li>
                        <li id="context_menu_front" class="ui-state-disabled context-submenu context-menu-common-item" data-action="bringToFront">
                            <span class="ui-icon ui-icon-arrowthick-1-n"></span>
                            <span class="translate">Bring to front</span>
                        </li>
                        <li id="context_menu_back" class="ui-state-disabled context-submenu context-menu-common-item" data-action="bringToBack">
                            <span class="ui-icon ui-icon-arrowthick-1-s"></span>
                            <span class="translate">Move to back</span>
                        </li>
                        <li id="context_menu_export" class="ui-state-disabled context-submenu context-menu-common-item" data-action="export">
                            <span class="ui-icon ui-icon-arrowthickstop-1-e"></span>
                            <span class="translate">export widgets</span>
                        </li>
                        <li id="context_menu_import">
                            <span class="ui-icon ui-icon-arrowthickstop-1-w"></span>
                            <span class="translate">import widgets</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="attr_wrap">
        <div id="pan_attr">
            <div class="ui-state-default" style="height: 16px;font-size: 16px;padding: 5px;font-weight: bolder;"><span class="translate">Attributes</span><button id="btn_accordeon" style="float: right;"></button></div>
            <ul style="border-radius: 0; display: inline-block; background: transparent; border: none; margin-bottom: -2px">
                <li>
                    <a href="#tab_view_attr" style="padding: 2px 4px 2px 4px" class="translate">View</a>
                </li>
                <li>
                    <a id="widget_tab" href="#tab_wid_attr" style="padding: 2px 4px 2px 4px" class="translate">Widget</a>
                </li>
                <li>
                    <a id="cssEditor_tab" href="#tab_css_edit" style="padding: 2px 4px 2px 4px" class="translate">CSS</a>
                </li>

            </ul>
            <div class="tab_attr ui-widget-content" id="tab_view_attr">
                <div id="view_inspector">
                    <table style="width: 100%; border: 0px">
                        <colgroup>
                            <col width="40%">
                            <col width="60%" style="padding-right: 5px">
                            <col width="26px" style="">
                        </colgroup>
                        <tbody>
                            <tr><td colspan="3" class="ui-state-default"><span class="translate">group_css_common</span><button class="view-group" style="float:right" data-group="view-css-common"></button></td></tr>
                            <tr class="group-view-css-common">
                                <td class="vis-edit-td-caption translate">comment</td>
                                <td class="vis-edit-td-field" colspan="2"><input type="text" id="inspect_view_comment" class="vis-inspect-view vis-edit-textbox"></td>
                            </tr>
                            <tr class="group-view-css-common">
                                <td class="vis-edit-td-caption translate">class</td>
                                <td class="vis-edit-td-field" colspan="2"><input type="text" id="inspect_view_class" class="vis-inspect-view vis-edit-textbox"></td>

                            </tr>
                            <tr class="group-view-css-common">
                                <td class="vis-edit-td-caption translateT" style="font-style: italic" title="filter_key_tooltip"><span class="translate">filter_key</span></td>
                                <td class="vis-edit-td-field" colspan="2"><input type="text" id="inspect_view_filterkey" class="vis-inspect-view vis-edit-textbox"></td>
                            </tr>
                            <tr class="group-view-css-common">
                                <td class="vis-edit-td-caption translate">Theme</td>
                                <td class="vis-edit-td-field" colspan="2">
                                    <select id="inspect_view_theme" class="vis-edit-textbox" style="width:100%">
                                        <option value="black-tie">black-tie</option>
                                        <option value="blitzer">blitzer</option>
                                        <option value="cupertino">cupertino</option>
                                        <option value="dark-hive">dark-hive</option>
                                        <option value="dot-luv">dot-luv</option>
                                        <option value="eggplant">eggplant</option>
                                        <option value="excite-bike">excite-bike</option>
                                        <option value="flick">flick</option>
                                        <option value="hot-sneaks">hot-sneaks</option>
                                        <option value="humanity">humanity</option>
                                        <option value="kian">kiandra</option>
                                        <option value="le-frog">le-frog</option>
                                        <option value="mint-choc">mint-choc</option>
                                        <option value="overcast">overcast</option>
                                        <option value="pepper-grinder">pepper-grinder</option>
                                        <option value="redmond">redmond</option>
                                        <option value="smoothness">smoothness</option>
                                        <option value="south-street">south-street</option>
                                        <option value="start">start</option>
                                        <option value="sunny">sunny</option>
                                        <option value="swanky-purse">swanky-purse</option>
                                        <option value="trontastic">overcast</option>
                                        <option value="ui-dn">ui-darkness</option>
                                        <option value="ui-lightness">ui-lightness</option>
                                        <option value="vader">vader</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" class="css-inspector-heading ui-state-default"><span class="translate">group_css_background</span><button style="float:right" class="view-group" data-group="view-css-background"></button></td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td colspan="3" id="inspect_view_bkg_parent"><input id="inspect_view_bkg_def" type="text"></td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>background</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-color</td>
                                <td><input type="text" id="inspect_view_css_background-color" class="vis-edit-textbox vis-inspect-view-css"></td>
                                <td><button data-attr="view_css_background-color" class="view-edit-button" data-type="color"></button></td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-image</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-image" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-repeat</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-repeat" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-attachment</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-attachment" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-position</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-position" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-size</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-size" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-clip</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-clip" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-background">
                                <td>-origin</td>
                                <td colspan="2">
                                    <input type="text" id="inspect_view_css_background-origin" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" class="css-inspector-heading ui-state-default"><span class="translate">group_css_font_text</span><button style="float:right" class="view-group" data-group="view-css-font-text"></button></td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>color</td>
                                <td>
                                    <input type="text" id="inspect_view_css_color" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                                <td><button data-attr="view_css_color" class="view-edit-button" data-type="color"></button></td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>text-shadow</td>
                                <td>
                                    <input type="text" id="inspect_view_css_text-shadow" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>font-family</td>
                                <td>
                                    <input type="text" id="inspect_view_css_font-family" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>font-style</td>
                                <td>
                                    <input type="text" id="inspect_view_css_font-style" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>font-variant</td>
                                <td>
                                    <input type="text" id="inspect_view_css_font-variant" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>font-weight</td>
                                <td>
                                    <input type="text" id="inspect_view_css_font-weight" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>font-size</td>
                                <td>
                                    <input type="text" id="inspect_view_css_font-size" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>line-height</td>
                                <td>
                                    <input type="text" id="inspect_view_css_line-height" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>letter-spacing</td>
                                <td>
                                    <input type="text" id="inspect_view_css_letter-spacing" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                            <tr class="group-view-css-font-text">
                                <td>word-spacing</td>
                                <td>
                                    <input type="text" id="inspect_view_css_word-spacing" class="vis-edit-textbox vis-inspect-view-css">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab_attr ui-widget-content" id="tab_wid_attr">
                <div class="vis-widget-tools" style="margin-top: 3px;">
                    <!--<h4 class="translate">Widget Attributes:</h4>-->
                    <table cellspacing="0" style="width: 100%; border: 0px; table-layout: fixed; word-wrap: break-word;">
                        <colgroup>
                            <col width="40%">
                            <col width="60%" style="padding-right: 5px">
                            <col width="26px" style="">
                            <col width="26px" style="">
                        </colgroup>
                        <tbody id="widget_attrs"></tbody>
                    </table>
                </div>
            </div>
            <div class="tab_attr ui-widget-content" id="tab_css_edit">
                <div id="css_editor_head">
                    <select id="select_css_file" style=" width: 100px;">
                        <option value="vis-common-user" class="translate">Global</option>
                        <option value="vis-user" class="translate">Project</option>
                    </select>
                    <input id="css_find">
                    <button id="css_find_prev" class="translateT" title="Find previous"></button>
                    <button id="css_find_next" class="translateT" title="Find next"></button>
                    <button id="css_file_save" class="translateT" disabled="" title="Save CSS"></button>
                </div>
                <div id="css_editor"></div>

            </div>
        </div>
    </div>
</div>
<div id="dialog-message" title="Message" style="display: none">
    <p>
        <span id="dialog-message-icon" class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        <span id="dialog-message-text"></span>
    </p>
</div>
<div id="dialog-confirm" title="Question" style="display: none">
    <p>
        <span id="dialog-confirm-icon" class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        <span id="dialog-confirm-text"></span>
    </p>
</div>
<div id="dialog-edit-text" title="Edit text" style="display: none">
    <!--textarea style="width: 98%; height: 96%;resize: none;" id="dialog-edit-text-textarea"></textarea-->
    <div id="dialog-edit-text-textarea" style="width: 98%; height: 96%;"></div>
</div>
<div id="dialog-new-project" class="translateT" title="Create new project" style="overflow: hidden;display:none">
    <table><tbody><tr><td class="translate">Name:</td><td><input type="text" id="new-project-name" style="width:250px"></td></tr></tbody></table>
</div>

<div style="display: none" id="uploadPreview"></div>

<div id="growl_informator" class="jGrowl bottom-left" style="z-index:3001"></div>

</body>