From d97deb20f11eb8ae1dc78c31ddb25fd6249c5867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E8=BF=9B?= <zhongjin@onenetcom.cn>
Date: Sat, 15 Sep 2018 13:30:58 +0800
Subject: [PATCH] Update edit.html

---
 src/edit.html | 1242 ++++++++++++++++++++++++-------------------------
 1 file changed, 621 insertions(+), 621 deletions(-)
diff --git a/src/edit.html b/src/edit.html
index 6ad44c9..3944723 100644
--- a/src/edit.html
+++ b/src/edit.html
@@ -1,621 +1,621 @@
-<html>
-<head>
-    <title>Flot Edit</title>
-    <link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
-    <link type="text/css" rel="stylesheet" href="../../lib/css/themes/jquery-ui/default/jquery-ui.min.css">
-    <link type="text/css" rel="stylesheet" href="../../lib/css/fancytree/ui.fancytree.min.css"/>
-    <link type="text/css" rel="stylesheet" href="lib/css/jquery.colorpicker.css"/>
-    <link rel="stylesheet" type="text/css" href="../../lib/css/iob/selectID.css"/>
-
-    <script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
-    <script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
-    <script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>
-    <script type="text/javascript" src="../../lib/js/translate.js"></script>
-    <script type="text/javascript" src="../../lib/js/selectID.js"></script>
-    <script type="text/javascript" src="../../lib/js/socket.io.js"></script>
-
-    <script type="text/javascript" src="../../_socket/info.js"></script>
-
-    <style>
-        .ui-resizable-s {
-            cursor: s-resize;
-            height: 10px;
-            width: 100%;
-            bottom: -6px;
-            background: #a0a0a0;
-            left: 0;
-        }
-        .save {
-            /*position: absolute;
-            top: 10px;
-            right: 130px;*/
-            margin-top: 1px;
-            margin-left: 10px;
-        }
-        .save[aria-disabled="false"] {
-            background: #ff7474;
-            color: white;
-            border-color: #8e8e8e;
-        }
-
-        .input {
-            /*width: 150px;*/
-        }
-
-        .input_time {
-            width: 80px;
-        }
-
-        .label {
-            width: 130px;
-        }
-
-        .ui-widget input {
-            font-size: 14px;
-        }
-
-        .header {
-            font-weight: bold;
-            background: white;
-            color: black;
-        }
-
-        body {
-            font-family: Arial;
-        }
-
-        h3 {
-            line-height: 0.3!important;
-            font-size: 15px!important;
-        }
-
-        .ui-accordion-content {
-            padding: 5px 10px !important;
-        }
-
-        #accordion {
-            font-size: 14px !important;
-            height: 100%;
-        }
-
-        #accordion>div {
-            padding: 3px;
-        }
-
-        table.fixed td { overflow: hidden; }
-        table.fixed th { overflow: hidden; }
-
-        .no-spaces {
-            border-collapse: collapse;
-            border-spacing: 0;
-        }
-
-        /*.ui-resizable-s {
-            cursor: s-resize;
-            height: 10px;
-            bottom: -5px;
-            left: 0;
-            right: 0;
-            background-color: gray;
-        }*/
-        .version {
-            position: absolute;
-            top: 16px;
-            right: 10px;
-            color: white;
-        }
-
-        .presets_table_all {
-            width: 100%
-        }
-        .presets_table_all th {
-            background: grey;
-            color: white;
-            font-weight: bold;
-            text-align: left;
-            padding: 5px;
-        }
-        .presets_table_all td {
-            padding: 5px;
-        }
-
-        .presets_table_all tr:nth-child(even) {
-            background: #dcdbdb;
-        }
-        .presets-selected {
-            background: #7598b9 !important;
-        }
-        .presets_table_th_load {
-            width: 70px;
-        }
-        .presets_table_th_name {
-            width: 20%;
-        }
-        .presets_table_th_ids {
-            width: calc(80 - 150px);
-        }
-        .presets_table_th_buttons {
-            width: 70px;
-        }
-
-    </style>
-</head>
-<body style="height: calc(100% - 16px); width: 100%; margin: 0; padding: 0;">
-
-<div id="resizable1" style="overflow: hidden; height: 360px">
-    <div style="height: calc(100% - 75px); position: relative; overflow: hidden;">
-        <div id="accordion">
-            <ul>
-                <li><a href="#chapter_presets"  class="translate">Presets</a></li>
-                <li><a href="#chapter_ids"      class="translate">Input data</a></li>
-                <li><a href="#chapter_markline" class="translate">Markings</a></li>
-                <li><a href="#chapter_time"     class="translate">Time</a></li>
-                <li><a href="#chapter_options"  class="translate">Options</a></li>
-                <li><button class="save">Save</button></li>
-            </ul>
-            <div id="chapter_presets" style="width: 100%; height: calc(100% - 50px); overflow: auto;">
-                <table class="presets_table_all">
-                    <thead>
-                        <tr>
-                            <th class="presets_table_th_load"></th>
-                            <th class="presets_table_th_name translate">Name</th>
-                            <th class="presets_table_th_ids translate">IDs</th>
-                            <th class="presets_table_th_buttons"></th>
-                        </tr>
-                    </thead>
-                    <tbody id="presets_table">
-
-                    </tbody>
-                </table>
-            </div>
-            <!--h3><span class="translate">Input data</span><span style="float:right; font-weight: normal; color: #959595">Version: 1.5.7</span></h3-->
-            <div id="chapter_ids" style="width: 100%; height: calc(100% - 50px); overflow: auto;">
-                <table>
-                    <tr>
-                        <td colspan="7">
-                            <button style="margin-left: 1px" id="ids_add" class="translateB">Add new line</button>
-                            <button id="clear" title="Reset settings" class="translateT" style="float: left;">Clear</button>
-                            <label  class="translate" style="padding-left: 20px" for="autoUpdate">Auto-update:</label><input type="checkbox" id="autoUpdate"/>
-                            <button id="arrangeBools" class="translateB button_arrange_bools">Arrange bools</button>
-                        </td>
-                    </tr>
-                </table>
-                <div style="width: 100%;">
-                    <table style="table-layout: fixed;" class="fixed" id="idslist_table"  border="0" cellspacing="0" cellpadding="0">
-                        <tbody id="idslist"></tbody>
-                    </table>
-                </div>
-            </div>
-            <!--h3 class="markline-option"><span class="translate">Markings</span></h3-->
-            <div id="chapter_markline" class="markline-option" style="width: 100%; height: calc(100% - 50px); overflow: auto;">
-                <table style="width: 100%">
-                    <tr>
-                        <td colspan="7">
-                            <button style="margin-left: 1px" id="markline_add" class="translateB">Add new markings</button>
-                        </td>
-                    </tr>
-                </table>
-                <div style="width: 100%; height: 100%">
-                    <table style="table-layout: fixed;" class="fixed" id="markline_table"  border="0" cellspacing="0" cellpadding="0">
-                        <thead id="markline_head">
-                        <tr class="header">
-                            <td class="translate" style="width: 30%; white-space: nowrap">Line ID</td>
-                            <td class="translate" style="width: 130px; white-space: nowrap">Upper value or ID</td>
-                            <td class="translate" style="width: 40px;"></td>
-                            <td class="translate" style="width: 130px; white-space: nowrap">Lower value or ID</td>
-                            <td class="translate" style="width: 40px;"></td>
-                            <td class="translate" style="width: 180px">Color</td>
-                            <td class="translate" style="width: 80px">Fill</td>
-                            <td class="translate" style="width: 80px">&#216L</td>
-                            <td class="translate" style="width: 80px">&#216S</td>
-                            <td class="translate" style="width: 30%">Text</td>
-                            <td class="translate" style="width: 150px; white-space: nowrap">Text position</td>
-                            <td class="translate" style="width: 100px; white-space: nowrap">Text offset</td>
-                            <td class="translate" style="width: 100px; white-space: nowrap">Text size</td>
-                            <td class="translate" style="width: 180px; white-space: nowrap">Text color</td>
-                            <td class="translate" style="width: 80px"></td>
-                        </tr>
-                        </thead>
-                        <tbody id="markline_list"></tbody>
-                    </table>
-                </div>
-            </div>
-            <!--h3 class="chapter_time"><span class="translate">Time</span> <span id="time_span"></span></h3-->
-            <div id="chapter_time" style="display: flex; height: calc(100% - 50px); overflow: auto;" class="chapter_time">
-                <table >
-                    <tr>
-                        <td class="translate header" colspan="2" style="text-align: center">Time Span</td>
-                    </tr>
-                    <tr class="time_timeType">
-                        <td><label  class="translate" for="timeType">Aggregation:</label></td>
-                        <td><select id="timeType" class="input value">
-                            <option value="relative" class="translate">relative</option>
-                            <option value="static"   class="translate">static</option>
-                        </select></td>
-                    </tr>
-                    <tr class="relative time_relativeEnd">
-                        <td><label  class="translate" for="relativeEnd">End:</label></td>
-                        <td><select id="relativeEnd" class="input value">
-                            <option value="now"         class="translate">now</option>
-                            <option value="1minute"     class="translate">end of minute</option>
-                            <option value="5minutes"    class="translate">end of 5 minutes</option>
-                            <option value="10minutes"   class="translate">end of 10 minutes</option>
-                            <option value="30minutes"   class="translate">end of 30 minutes</option>
-                            <option value="1hour"       class="translate">end of hour</option>
-                            <option value="2hours"      class="translate">end of 2 hours</option>
-                            <option value="3hours"      class="translate">end of 3 hours</option>
-                            <option value="4hours"      class="translate">end of 4 hours</option>
-                            <option value="6hours"      class="translate">end of 6 hours</option>
-                            <option value="8hours"      class="translate">end of 8 hours</option>
-                            <option value="12hours"     class="translate">end of 12 hours</option>
-                            <option value="today"       class="translate">end of day</option>
-                            <option value="weekEurope"  class="translate">end of sunday</option>
-                            <option value="weekUsa"     class="translate">end of saturday</option>
-                            <option value="month"       class="translate">this month</option>
-                            <option value="year"        class="translate">this year</option>
-                        </select></td>
-                    </tr>
-                    <tr class="relative time_range">
-                        <td><label  class="translate" for="range">Range:</label></td>
-                        <td><select id="range"      class="value input">
-                            <option value="10"      class="translate">10 minutes</option>
-                            <option value="30"      class="translate">30 minutes</option>
-                            <option value="60"      class="translate">1 hour</option>
-                            <option value="120"     class="translate">2 hours</option>
-                            <option value="180"     class="translate">3 hours</option>
-                            <option value="360"     class="translate">6 hours</option>
-                            <option value="720"     class="translate">12 hours</option>
-                            <option value="1440"    class="translate">1 day</option>
-                            <option value="2880"    class="translate">2 days</option>
-                            <option value="4320"    class="translate">3 days</option>
-                            <option value="10080"   class="translate">7 days</option>
-                            <option value="20160"   class="translate">14 days</option>
-                            <option value="1m"      class="translate">1 month</option>
-                            <option value="2m"      class="translate">2 months</option>
-                            <option value="3m"      class="translate">3 months</option>
-                            <option value="6m"      class="translate">6 months</option>
-                            <option value="1y"      class="translate">1 year</option>
-                            <option value="2y"      class="translate">2 years</option>
-                        </select></td>
-                    </tr>
-                    <tr class="relative time_live">
-                        <td><label  class="translate" for="live">Live update every:</label></td>
-                        <td><select class="value" id="live">
-                            <option value=""        class="translate">none</option>
-                            <option value="5"       class="translate">5 seconds</option>
-                            <option value="10"      class="translate">10 seconds</option>
-                            <option value="15"      class="translate">15 seconds</option>
-                            <option value="20"      class="translate">20 seconds</option>
-                            <option value="30"      class="translate">30 seconds</option>
-                            <option value="60"      class="translate">1 minute</option>
-                            <option value="120"     class="translate">2 minutes</option>
-                            <option value="300"     class="translate">5 minutes</option>
-                            <option value="600"     class="translate">10 minutes</option>
-                            <option value="900"     class="translate">15 minutes</option>
-                            <option value="1200"    class="translate">20 minutes</option>
-                            <option value="1800"    class="translate">30 minutes</option>
-                            <option value="3600"    class="translate">1 hour</option>
-                            <option value="7200"    class="translate">2 hours</option>
-                            <option value="10800"   class="translate">3 hours</option>
-                            <option value="21600"   class="translate">6 hours</option>
-                            <option value="43200"   class="translate">12 hours</option>
-                            <option value="86400"   class="translate">1 day</option>
-                        </select></td>
-                    </tr>
-                    <tr class="static time_start">
-                        <td><label class="translate" for="start">Start:</label></td>
-                        <td><input type="date" id="start" class="value input"> <input type="time" id="start_time" class="value input_time"></td>
-                    </tr>
-                    <tr class="static time_end">
-                        <td><label  class="translate" for="end">End:</label></td>
-                        <td><input type="date" id="end" class="value input"> <input type="time" id="end_time" class="value input_time"></td>
-                    </tr>
-                </table>
-
-                <table style="margin-left: 25px">
-                    <tr>
-                        <td class="translate header" colspan="2" style="text-align: center">Aggregate</td>
-                    </tr>
-                    <tr class="time_aggregateType">
-                        <td><label class="translate" for="aggregateType">Step type:</label></td>
-                        <td><select id="aggregateType" class="value input">
-                            <option value="count" class="translate">counts</option>
-                            <option value="step" class="translate">seconds</option>
-                        </select></td>
-                    </tr>
-                    <tr class="time_aggregateSpan">
-                        <td><label  id="spanName" class="translate" for="aggregateSpan">Step span:</label></td>
-                        <td><input id="aggregateSpan" value="300" class="value input"></td>
-                    </tr>
-                    <tr class="time_ticks">
-                        <td><label class="translate" for="ticks">Ticks from:</label></td>
-                        <td><table class="no-spaces"><tr><td><input id="ticks" class="value input" style="display: inline;" /></td><td><button style="display: inline; margin-right: 15px;" id="ticks_select"></button></td></tr></table></td>
-                    </tr>
-                </table>
-            </div>
-            <!--h3 class="translate chapter_options">Options</h3-->
-            <div id="chapter_options" style="display: flex; height: calc(100% - 50px); overflow: auto;" class="chapter_options">
-                <table style="width: 380px">
-                    <tr>
-                        <td class="translate header" colspan="2" style="text-align: center">Appearance</td>
-                    </tr>
-                    <tr class="options_width">
-                        <td style="width: 270px"><label class="translate" for="width">Width:</label></td>
-                        <td><input id="width" class="value input spinner"/></td>
-                    </tr>
-                    <tr class="options_height">
-                        <td><label class="translate" for="height">Height:</label></td>
-                        <td><input id="height" class="value input spinner"></td>
-                    </tr>
-                    <tr class="options_noborder">
-                        <td><label class="translate" for="noBorder">No border:</label></td>
-                        <td><select class="value input" id="noBorder">
-                            <option value="" class="translate"></option>
-                            <option value="noborder" class="translate">yes</option>
-                        </select></td>
-                    </tr>
-                    <tr class="options_window_bg">
-                        <td class="label"><label class="translate" for="window_bg">Window background:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input id="window_bg" class="value input input-static-color" style="display: inline-block"></td><td><button data-clear="window_bg" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                    <tr class="options_bg_custom">
-                        <td class="label"><label class="translate" for="bg_custom">Custom chart background:</label></td>
-                        <td>
-                            <input type="checkbox" id="bg_custom">
-                        </td>
-                    </tr>
-                    <tr class="options_bg">
-                        <td class="label"><label class="bg_predefined" for="bg_predefined">Chart background:</label></td>
-                        <td>
-                            <select id="bg_predefined">
-                                <option value="" class="translate">default</option>
-                                <option value="0">Portrait</option>
-                                <option value="1">Instagram</option>
-                                <option value="2">ServQuick</option>
-                                <option value="3">Metallic Toad</option>
-                                <option value="4">Clouds</option>
-                                <option value="5">Mirage</option>
-                                <option value="6">Steel Gray</option>
-                                <option value="7">Horizon</option>
-                                <option value="8">Koko Caramel</option>
-                                <option value="9">Turquoise flow</option>
-                            </select>
-                            <input id="bg" class="value input" style="display: none"/>
-                        </td>
-                    </tr>
-                    <tr class="options_x_labels_color">
-                        <td class="label"><label class="translate" for="x_labels_color">X axis labels color:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="x_labels_color"></td><td><button data-clear="x_labels_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                    <tr class="options_y_labels_color">
-                        <td class="label">><label class="translate" for="y_labels_color">Y axis labels color:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="y_labels_color"></td><td><button data-clear="y_labels_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                    <tr class="options_border_color">
-                        <td><label class="translate label" for="border_color">Border color:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="border_color"></td><td><button data-clear="border_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                    <tr class="options_grid_color">
-                        <td class="label"><label class="translate" for="grid_color">Grid color:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="grid_color"></td><td><button data-clear="grid_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                    <tr class="options_border_width">
-                        <td class="label"><label class="translate" for="border_width">Border width:</label></td>
-                        <td>
-                            <input class="value input" id="border_width">
-                        </td>
-                    </tr>
-                </table>
-
-                <table style="width: 340px" class="options-bar">
-                    <tr>
-                        <td class="translate header" colspan="2" style="text-align: center">Bar settings</td>
-                    </tr>
-                    <tr class="options_barColor">
-                        <td><label  class="translate" for="barColor">Fill color:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="barColor"></td><td><button data-clear="barColor" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                    <tr class="options_barLabels">
-                        <td><label  class="translate" for="barLabels">Show labels:</label></td>
-                        <td><select id="barLabels" class="value input">
-                            <option value=""       class="translate">none</option>
-                            <option value="topover"  class="translate">top over</option>
-                            <option value="topunder" class="translate">top under</option>
-                            <option value="bottom"   class="translate">bottom</option>
-                            <option value="middle"   class="translate">middle</option>
-                        </select></td>
-                    </tr>
-                    <tr class="options_barWidth">
-                        <td><label class="translate" for="barWidth">Bars width:</label></td>
-                        <td><input id="barWidth" class="value input"></td>
-                    </tr>
-                    <tr class="options_barFontSize">
-                        <td><label class="translate" for="barFontSize">Label font size:</label></td>
-                        <td><input id="barFontSize" class="value input"></td>
-                    </tr>
-                    <tr class="options_barFontColor">
-                        <td><label class="translate" for="barFontColor">Label color:</label></td>
-                        <td>
-                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="barFontColor"></td><td><button data-clear="barFontColor" class="clear-button" style="display: inline-block"></button></td></tr></table>
-                        </td>
-                    </tr>
-                </table>
-
-                <table style="margin-left: 25px; width: 300px">
-                    <tr><td class="translate header" colspan="2" style="text-align: center">Title</td></tr>
-                    <tr class="options_title">
-                        <td><label for="title" class="translate">Title:</label></td>
-                        <td><input id="title" class="value input"></td>
-                    </tr>
-                    <!-- Do not use values 50, 5, and -5. They are reserved for 50-middle/center, 5-inside at edge, -5 outside at edge -->
-                    <tr class="options_titlePos">
-                        <td><label for="titlePos" class="translate">Title position:</label></td>
-                        <td><select class="value input" id="titlePos">
-                            <option value="" class="translate">none</option>
-                            <option value="top:35;left:65" class="translate">Top, left, inside</option>
-                            <option value="top:35;right:5" class="translate">Top, right, inside</option>
-                            <option value="top:35;left:50" class="translate">Top, center, inside</option>
-                            <option value="top:50;left:65" class="translate">Middle, left, inside</option>
-                            <option value="top:50;right:5" class="translate">Middle, right, inside</option>
-                            <option value="bottom:5;left:65" class="translate">Bottom, left, inside</option>
-                            <option value="bottom:5;right:5" class="translate">Bottom, right, inside</option>
-                            <option value="bottom:5;left:50" class="translate">Bottom, center, inside</option>
-
-                            <option value="top:5;right:-5" class="translate">Top, right, outside</option>
-                            <option value="top:50;right:-5" class="translate">Middle, right, outside</option>
-                            <option value="bottom:5;right:-5" class="translate">Bottom, right, outside</option>
-                            <option value="bottom:-5;left:50" class="translate">Bottom, center, outside</option>
-                        </select></td>
-                    </tr>
-                    <tr class="options_titleColor">
-                        <td><label class="translate" for="titleColor">Title color:</label></td>
-                        <td><table class="no-spaces"><tr><td><input id="titleColor" class="value input input-static-color"></td><td><button data-clear="titleColor" class="clear-button" style="display: inline-block"></button></td></tr></table></td>
-                    </tr>
-                    <tr class="options_titleSize">
-                        <td><label for="titleSize" class="translate">Title size:</label></td>
-                        <td><input id="titleSize" class="value input"></td>
-                    </tr>
-
-                </table>
-
-                <table style="margin-left: 25px; width: 400px">
-                    <tr><td class="translate header" colspan="2" style="text-align: center">Options</td></tr>
-                    <tr class="options_legend">
-                        <td><label class="translate" for="legend">Show legend:</label></td>
-                        <td><select class="value input" id="legend">
-                            <option value="" class="translate">none</option>
-                            <option value="nw" class="translate">Top, left</option>
-                            <option value="ne" class="translate">Top, right</option>
-                            <option value="sw" class="translate">Bottom, left</option>
-                            <option value="se" class="translate">Bottom, right</option>
-                        </select></td>
-                    </tr>
-                    <tr class="options_legColumns">
-                        <td><label class="translate" for="legColumns">Legend columns:</label></td>
-                        <td><input type="number" class="value" id="legColumns"></td>
-                    </tr>
-                    <tr class="options_legBgOpacity">
-                        <td><label class="translate" for="legBgOpacity">Legend opacity (from 0 to 1):</label></td>
-                        <td><input class="value input" id="legBgOpacity"/></td>
-                    </tr>
-                    <tr class="options_legBg">
-                        <td><label class="translate" for="legBg">Legend background:</label></td>
-                        <td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="legBg" style="display: inline-block"></td><td><button data-clear="legBg" class="clear-button" style="display: inline-block"></button></td></tr></table></td>
-                    </tr>
-                    <tr class="options_hoverDetail">
-                        <td><label class="translate" for="hoverDetail">Hover details:</label></td>
-                        <td><input type="checkbox" class="value" id="hoverDetail"></td>
-                    </tr>
-                    <tr class="options_timeFormat">
-                        <td><label class="translate" for="timeFormat">Time format:</label></td>
-                        <td><select class="value input" id="timeFormat">
-                            <option value="" class="translate">Default</option>
-                            <option value="%H:%M %d.%m">HH:MM dd.mm</option>
-                            <option value="%H:%M %d.%m.">HH:MM dd.mm.</option>
-                            <option value="%H:%M <br> %d.%m">HH:MM / dd.mm</option>
-                            <option value="%H:%M <br> %d.%m.">HH:MM / dd.mm.</option>
-                            <option value="%H:%M <br> %d.%m.%y">HH:MM / dd.mm.yy</option>
-                            <option value="%H:%M:%S %d.%m.%y">HH:MM:SS dd.mm.yy</option>
-                            <option value="%H:%M %d.%m.%y">HH:MM dd.mm.yy</option>
-                            <option value="%I:%M:%S %x %p">HH:MM:SS mm/dd/yy am (US)</option>
-                            <option value="%H:%M:%S %d/%m/%y">HH:MM:SS dd/mm/yy (UK)</option>
-                            <option value="%H:%M:%S %m.%d.%y">HH:MM:SS mm.dd.yy</option>
-
-                            <option value="%H:%M %a">HH:MM dow</option>
-                            <option value="%H:%M:%S %a">HH:MM:SS dow</option>
-
-                            <option value="%H:%M %m.%d">HH:MM mm.dd</option>
-                            <option value="%H:%M:%S">HH:MM:SS</option>
-                            <option value="%H:%M">HH:MM</option>
-                            <option value="%d.%m">dd.mm</option>
-                            <option value="%d.%m.">dd.mm.</option>
-                            <option value="%m/%d">mm/dd</option>
-                            <option value="%d">dd</option>
-                            <option value="%m">mm</option>
-                            <option value="%y">y</option>
-                            <option value="%H">HH</option>
-                            <option value="%M">MM</option>
-                            <option value="%a">dow</option>
-                            <option value="%d.%m.%y">dd.mm.yy</option>
-                        </select></td>
-                    </tr>
-                    <tr class="options_smoothing">
-                        <td><label class="translate" for="smoothing">Smoothing:</label></td>
-                        <td><input class="value input" id="smoothing"></td>
-                    </tr>
-                    <!--tr class="options_afterComma">
-                        <td class="translate">After comma:</td>
-                        <td><input class="value input" id="afterComma"></td>
-                    </tr-->
-                    <tr class="options_useComma">
-                        <td><label class="translate" for="useComma">Use comma:</label></td>
-                        <td><input type="checkbox" class="value" id="useComma"></td>
-                    </tr>
-                    <tr class="options_zoom">
-                        <td><label class="translate" for="zoom">Enable zoom and pan:</label></td>
-                        <td><input type="checkbox" class="value" id="zoom"></td>
-                    </tr>
-                    <tr class="options_noedit">
-                        <td><label class="translate" for="noedit">Hide edit button:</label></td>
-                        <td><input type="checkbox" class="value" id="noedit"></td>
-                    </tr>
-                    <tr class="options_animation">
-                        <td><label class="translate" for="animation">Animation:</label></td>
-                        <td><select class="value input" id="animation">
-                            <option value="0" class="translate">no</option>
-                            <option value="300" class="translate">300ms</option>
-                            <option value="500" class="translate">500ms</option>
-                            <option value="1000" class="translate">1s</option>
-                            <option value="2000" class="translate">2s</option>
-                            <option value="3000" class="translate">3s</option>
-                            <option value="5000" class="translate">5s</option>
-                            <option value="10000" class="translate">10s</option>
-                        </select></td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-        <div class="version">Version: 1.9.2</div>
-    </div>
-    <div style="height: 70px; display: flex; justify-content: space-around; align-items: center; margin-top: 4px; margin-bottom: 0">
-        <label class="translate" for="link">Link</label>
-        <textarea id="link" style="width: calc(100% - 260px); height: 55px; word-break: break-all; resize: none"></textarea>
-        <button style="padding-left: 2px" id="open"          class="translateB">Open</button>
-        <button style="padding-left: 5px" id="updatePreview" class="translateB">update Preview</button>
-    </div>
-</div>
-<iframe style="width: calc(100% - 20px); bottom: 0; height: calc(100% - 380px); border: 1px solid #afafaf; border-radius: 2px" id="chart"></iframe>
-<div id="dialog-select-member" style="display: none"></div>
-
-<div id="dialog-line-options" style="display: none">
-    <table>
-    </table>
-</div>
-<div id="dialog-new-preset" style="display: none">
-    <table>
-        <tr id="dialog-new-preset-info-tr">
-            <td><label for="dialog-new-preset-into" class="translate">Save into:</label></td>
-            <td><select id="dialog-new-preset-into" style="width: 100%;"></select></td>
-        </tr>
-        <tr id="dialog-new-preset-name-tr">
-            <td><label for="dialog-new-preset-name" class="translate">Name:</label></td>
-            <td><input id="dialog-new-preset-name" style="width: 100%;"/></td>
-        </tr>
-    </table>
-</div>
-
-<script type="text/javascript" src="js/edit.js"></script>
-</body>
-</html>
+<html>
+<head>
+    <title>Flot Edit</title>
+    <link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
+    <link type="text/css" rel="stylesheet" href="../../lib/css/themes/jquery-ui/default/jquery-ui.min.css">
+    <link type="text/css" rel="stylesheet" href="../../lib/css/fancytree/ui.fancytree.min.css"/>
+    <link type="text/css" rel="stylesheet" href="css/jquery.colorpicker.css"/>
+    <link rel="stylesheet" type="text/css" href="../../lib/css/iob/selectID.css"/>
+
+    <script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
+    <script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
+    <script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>
+    <script type="text/javascript" src="../../lib/js/translate.js"></script>
+    <script type="text/javascript" src="../../lib/js/selectID.js"></script>
+    <script type="text/javascript" src="../../lib/js/socket.io.js"></script>
+
+    <script type="text/javascript" src="../../_socket/info.js"></script>
+
+    <style>
+        .ui-resizable-s {
+            cursor: s-resize;
+            height: 10px;
+            width: 100%;
+            bottom: -6px;
+            background: #a0a0a0;
+            left: 0;
+        }
+        .save {
+            /*position: absolute;
+            top: 10px;
+            right: 130px;*/
+            margin-top: 1px;
+            margin-left: 10px;
+        }
+        .save[aria-disabled="false"] {
+            background: #ff7474;
+            color: white;
+            border-color: #8e8e8e;
+        }
+
+        .input {
+            /*width: 150px;*/
+        }
+
+        .input_time {
+            width: 80px;
+        }
+
+        .label {
+            width: 130px;
+        }
+
+        .ui-widget input {
+            font-size: 14px;
+        }
+
+        .header {
+            font-weight: bold;
+            background: white;
+            color: black;
+        }
+
+        body {
+            font-family: Arial;
+        }
+
+        h3 {
+            line-height: 0.3!important;
+            font-size: 15px!important;
+        }
+
+        .ui-accordion-content {
+            padding: 5px 10px !important;
+        }
+
+        #accordion {
+            font-size: 14px !important;
+            height: 100%;
+        }
+
+        #accordion>div {
+            padding: 3px;
+        }
+
+        table.fixed td { overflow: hidden; }
+        table.fixed th { overflow: hidden; }
+
+        .no-spaces {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        /*.ui-resizable-s {
+            cursor: s-resize;
+            height: 10px;
+            bottom: -5px;
+            left: 0;
+            right: 0;
+            background-color: gray;
+        }*/
+        .version {
+            position: absolute;
+            top: 16px;
+            right: 10px;
+            color: white;
+        }
+
+        .presets_table_all {
+            width: 100%
+        }
+        .presets_table_all th {
+            background: grey;
+            color: white;
+            font-weight: bold;
+            text-align: left;
+            padding: 5px;
+        }
+        .presets_table_all td {
+            padding: 5px;
+        }
+
+        .presets_table_all tr:nth-child(even) {
+            background: #dcdbdb;
+        }
+        .presets-selected {
+            background: #7598b9 !important;
+        }
+        .presets_table_th_load {
+            width: 70px;
+        }
+        .presets_table_th_name {
+            width: 20%;
+        }
+        .presets_table_th_ids {
+            width: calc(80 - 150px);
+        }
+        .presets_table_th_buttons {
+            width: 70px;
+        }
+
+    </style>
+</head>
+<body style="height: calc(100% - 16px); width: 100%; margin: 0; padding: 0;">
+
+<div id="resizable1" style="overflow: hidden; height: 360px">
+    <div style="height: calc(100% - 75px); position: relative; overflow: hidden;">
+        <div id="accordion">
+            <ul>
+                <li><a href="#chapter_presets"  class="translate">Presets</a></li>
+                <li><a href="#chapter_ids"      class="translate">Input data</a></li>
+                <li><a href="#chapter_markline" class="translate">Markings</a></li>
+                <li><a href="#chapter_time"     class="translate">Time</a></li>
+                <li><a href="#chapter_options"  class="translate">Options</a></li>
+                <li><button class="save">Save</button></li>
+            </ul>
+            <div id="chapter_presets" style="width: 100%; height: calc(100% - 50px); overflow: auto;">
+                <table class="presets_table_all">
+                    <thead>
+                        <tr>
+                            <th class="presets_table_th_load"></th>
+                            <th class="presets_table_th_name translate">Name</th>
+                            <th class="presets_table_th_ids translate">IDs</th>
+                            <th class="presets_table_th_buttons"></th>
+                        </tr>
+                    </thead>
+                    <tbody id="presets_table">
+
+                    </tbody>
+                </table>
+            </div>
+            <!--h3><span class="translate">Input data</span><span style="float:right; font-weight: normal; color: #959595">Version: 1.5.7</span></h3-->
+            <div id="chapter_ids" style="width: 100%; height: calc(100% - 50px); overflow: auto;">
+                <table>
+                    <tr>
+                        <td colspan="7">
+                            <button style="margin-left: 1px" id="ids_add" class="translateB">Add new line</button>
+                            <button id="clear" title="Reset settings" class="translateT" style="float: left;">Clear</button>
+                            <label  class="translate" style="padding-left: 20px" for="autoUpdate">Auto-update:</label><input type="checkbox" id="autoUpdate"/>
+                            <button id="arrangeBools" class="translateB button_arrange_bools">Arrange bools</button>
+                        </td>
+                    </tr>
+                </table>
+                <div style="width: 100%;">
+                    <table style="table-layout: fixed;" class="fixed" id="idslist_table"  border="0" cellspacing="0" cellpadding="0">
+                        <tbody id="idslist"></tbody>
+                    </table>
+                </div>
+            </div>
+            <!--h3 class="markline-option"><span class="translate">Markings</span></h3-->
+            <div id="chapter_markline" class="markline-option" style="width: 100%; height: calc(100% - 50px); overflow: auto;">
+                <table style="width: 100%">
+                    <tr>
+                        <td colspan="7">
+                            <button style="margin-left: 1px" id="markline_add" class="translateB">Add new markings</button>
+                        </td>
+                    </tr>
+                </table>
+                <div style="width: 100%; height: 100%">
+                    <table style="table-layout: fixed;" class="fixed" id="markline_table"  border="0" cellspacing="0" cellpadding="0">
+                        <thead id="markline_head">
+                        <tr class="header">
+                            <td class="translate" style="width: 30%; white-space: nowrap">Line ID</td>
+                            <td class="translate" style="width: 130px; white-space: nowrap">Upper value or ID</td>
+                            <td class="translate" style="width: 40px;"></td>
+                            <td class="translate" style="width: 130px; white-space: nowrap">Lower value or ID</td>
+                            <td class="translate" style="width: 40px;"></td>
+                            <td class="translate" style="width: 180px">Color</td>
+                            <td class="translate" style="width: 80px">Fill</td>
+                            <td class="translate" style="width: 80px">&#216L</td>
+                            <td class="translate" style="width: 80px">&#216S</td>
+                            <td class="translate" style="width: 30%">Text</td>
+                            <td class="translate" style="width: 150px; white-space: nowrap">Text position</td>
+                            <td class="translate" style="width: 100px; white-space: nowrap">Text offset</td>
+                            <td class="translate" style="width: 100px; white-space: nowrap">Text size</td>
+                            <td class="translate" style="width: 180px; white-space: nowrap">Text color</td>
+                            <td class="translate" style="width: 80px"></td>
+                        </tr>
+                        </thead>
+                        <tbody id="markline_list"></tbody>
+                    </table>
+                </div>
+            </div>
+            <!--h3 class="chapter_time"><span class="translate">Time</span> <span id="time_span"></span></h3-->
+            <div id="chapter_time" style="display: flex; height: calc(100% - 50px); overflow: auto;" class="chapter_time">
+                <table >
+                    <tr>
+                        <td class="translate header" colspan="2" style="text-align: center">Time Span</td>
+                    </tr>
+                    <tr class="time_timeType">
+                        <td><label  class="translate" for="timeType">Aggregation:</label></td>
+                        <td><select id="timeType" class="input value">
+                            <option value="relative" class="translate">relative</option>
+                            <option value="static"   class="translate">static</option>
+                        </select></td>
+                    </tr>
+                    <tr class="relative time_relativeEnd">
+                        <td><label  class="translate" for="relativeEnd">End:</label></td>
+                        <td><select id="relativeEnd" class="input value">
+                            <option value="now"         class="translate">now</option>
+                            <option value="1minute"     class="translate">end of minute</option>
+                            <option value="5minutes"    class="translate">end of 5 minutes</option>
+                            <option value="10minutes"   class="translate">end of 10 minutes</option>
+                            <option value="30minutes"   class="translate">end of 30 minutes</option>
+                            <option value="1hour"       class="translate">end of hour</option>
+                            <option value="2hours"      class="translate">end of 2 hours</option>
+                            <option value="3hours"      class="translate">end of 3 hours</option>
+                            <option value="4hours"      class="translate">end of 4 hours</option>
+                            <option value="6hours"      class="translate">end of 6 hours</option>
+                            <option value="8hours"      class="translate">end of 8 hours</option>
+                            <option value="12hours"     class="translate">end of 12 hours</option>
+                            <option value="today"       class="translate">end of day</option>
+                            <option value="weekEurope"  class="translate">end of sunday</option>
+                            <option value="weekUsa"     class="translate">end of saturday</option>
+                            <option value="month"       class="translate">this month</option>
+                            <option value="year"        class="translate">this year</option>
+                        </select></td>
+                    </tr>
+                    <tr class="relative time_range">
+                        <td><label  class="translate" for="range">Range:</label></td>
+                        <td><select id="range"      class="value input">
+                            <option value="10"      class="translate">10 minutes</option>
+                            <option value="30"      class="translate">30 minutes</option>
+                            <option value="60"      class="translate">1 hour</option>
+                            <option value="120"     class="translate">2 hours</option>
+                            <option value="180"     class="translate">3 hours</option>
+                            <option value="360"     class="translate">6 hours</option>
+                            <option value="720"     class="translate">12 hours</option>
+                            <option value="1440"    class="translate">1 day</option>
+                            <option value="2880"    class="translate">2 days</option>
+                            <option value="4320"    class="translate">3 days</option>
+                            <option value="10080"   class="translate">7 days</option>
+                            <option value="20160"   class="translate">14 days</option>
+                            <option value="1m"      class="translate">1 month</option>
+                            <option value="2m"      class="translate">2 months</option>
+                            <option value="3m"      class="translate">3 months</option>
+                            <option value="6m"      class="translate">6 months</option>
+                            <option value="1y"      class="translate">1 year</option>
+                            <option value="2y"      class="translate">2 years</option>
+                        </select></td>
+                    </tr>
+                    <tr class="relative time_live">
+                        <td><label  class="translate" for="live">Live update every:</label></td>
+                        <td><select class="value" id="live">
+                            <option value=""        class="translate">none</option>
+                            <option value="5"       class="translate">5 seconds</option>
+                            <option value="10"      class="translate">10 seconds</option>
+                            <option value="15"      class="translate">15 seconds</option>
+                            <option value="20"      class="translate">20 seconds</option>
+                            <option value="30"      class="translate">30 seconds</option>
+                            <option value="60"      class="translate">1 minute</option>
+                            <option value="120"     class="translate">2 minutes</option>
+                            <option value="300"     class="translate">5 minutes</option>
+                            <option value="600"     class="translate">10 minutes</option>
+                            <option value="900"     class="translate">15 minutes</option>
+                            <option value="1200"    class="translate">20 minutes</option>
+                            <option value="1800"    class="translate">30 minutes</option>
+                            <option value="3600"    class="translate">1 hour</option>
+                            <option value="7200"    class="translate">2 hours</option>
+                            <option value="10800"   class="translate">3 hours</option>
+                            <option value="21600"   class="translate">6 hours</option>
+                            <option value="43200"   class="translate">12 hours</option>
+                            <option value="86400"   class="translate">1 day</option>
+                        </select></td>
+                    </tr>
+                    <tr class="static time_start">
+                        <td><label class="translate" for="start">Start:</label></td>
+                        <td><input type="date" id="start" class="value input"> <input type="time" id="start_time" class="value input_time"></td>
+                    </tr>
+                    <tr class="static time_end">
+                        <td><label  class="translate" for="end">End:</label></td>
+                        <td><input type="date" id="end" class="value input"> <input type="time" id="end_time" class="value input_time"></td>
+                    </tr>
+                </table>
+
+                <table style="margin-left: 25px">
+                    <tr>
+                        <td class="translate header" colspan="2" style="text-align: center">Aggregate</td>
+                    </tr>
+                    <tr class="time_aggregateType">
+                        <td><label class="translate" for="aggregateType">Step type:</label></td>
+                        <td><select id="aggregateType" class="value input">
+                            <option value="count" class="translate">counts</option>
+                            <option value="step" class="translate">seconds</option>
+                        </select></td>
+                    </tr>
+                    <tr class="time_aggregateSpan">
+                        <td><label  id="spanName" class="translate" for="aggregateSpan">Step span:</label></td>
+                        <td><input id="aggregateSpan" value="300" class="value input"></td>
+                    </tr>
+                    <tr class="time_ticks">
+                        <td><label class="translate" for="ticks">Ticks from:</label></td>
+                        <td><table class="no-spaces"><tr><td><input id="ticks" class="value input" style="display: inline;" /></td><td><button style="display: inline; margin-right: 15px;" id="ticks_select"></button></td></tr></table></td>
+                    </tr>
+                </table>
+            </div>
+            <!--h3 class="translate chapter_options">Options</h3-->
+            <div id="chapter_options" style="display: flex; height: calc(100% - 50px); overflow: auto;" class="chapter_options">
+                <table style="width: 380px">
+                    <tr>
+                        <td class="translate header" colspan="2" style="text-align: center">Appearance</td>
+                    </tr>
+                    <tr class="options_width">
+                        <td style="width: 270px"><label class="translate" for="width">Width:</label></td>
+                        <td><input id="width" class="value input spinner"/></td>
+                    </tr>
+                    <tr class="options_height">
+                        <td><label class="translate" for="height">Height:</label></td>
+                        <td><input id="height" class="value input spinner"></td>
+                    </tr>
+                    <tr class="options_noborder">
+                        <td><label class="translate" for="noBorder">No border:</label></td>
+                        <td><select class="value input" id="noBorder">
+                            <option value="" class="translate"></option>
+                            <option value="noborder" class="translate">yes</option>
+                        </select></td>
+                    </tr>
+                    <tr class="options_window_bg">
+                        <td class="label"><label class="translate" for="window_bg">Window background:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input id="window_bg" class="value input input-static-color" style="display: inline-block"></td><td><button data-clear="window_bg" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                    <tr class="options_bg_custom">
+                        <td class="label"><label class="translate" for="bg_custom">Custom chart background:</label></td>
+                        <td>
+                            <input type="checkbox" id="bg_custom">
+                        </td>
+                    </tr>
+                    <tr class="options_bg">
+                        <td class="label"><label class="bg_predefined" for="bg_predefined">Chart background:</label></td>
+                        <td>
+                            <select id="bg_predefined">
+                                <option value="" class="translate">default</option>
+                                <option value="0">Portrait</option>
+                                <option value="1">Instagram</option>
+                                <option value="2">ServQuick</option>
+                                <option value="3">Metallic Toad</option>
+                                <option value="4">Clouds</option>
+                                <option value="5">Mirage</option>
+                                <option value="6">Steel Gray</option>
+                                <option value="7">Horizon</option>
+                                <option value="8">Koko Caramel</option>
+                                <option value="9">Turquoise flow</option>
+                            </select>
+                            <input id="bg" class="value input" style="display: none"/>
+                        </td>
+                    </tr>
+                    <tr class="options_x_labels_color">
+                        <td class="label"><label class="translate" for="x_labels_color">X axis labels color:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="x_labels_color"></td><td><button data-clear="x_labels_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                    <tr class="options_y_labels_color">
+                        <td class="label">><label class="translate" for="y_labels_color">Y axis labels color:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="y_labels_color"></td><td><button data-clear="y_labels_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                    <tr class="options_border_color">
+                        <td><label class="translate label" for="border_color">Border color:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="border_color"></td><td><button data-clear="border_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                    <tr class="options_grid_color">
+                        <td class="label"><label class="translate" for="grid_color">Grid color:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="grid_color"></td><td><button data-clear="grid_color" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                    <tr class="options_border_width">
+                        <td class="label"><label class="translate" for="border_width">Border width:</label></td>
+                        <td>
+                            <input class="value input" id="border_width">
+                        </td>
+                    </tr>
+                </table>
+
+                <table style="width: 340px" class="options-bar">
+                    <tr>
+                        <td class="translate header" colspan="2" style="text-align: center">Bar settings</td>
+                    </tr>
+                    <tr class="options_barColor">
+                        <td><label  class="translate" for="barColor">Fill color:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="barColor"></td><td><button data-clear="barColor" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                    <tr class="options_barLabels">
+                        <td><label  class="translate" for="barLabels">Show labels:</label></td>
+                        <td><select id="barLabels" class="value input">
+                            <option value=""       class="translate">none</option>
+                            <option value="topover"  class="translate">top over</option>
+                            <option value="topunder" class="translate">top under</option>
+                            <option value="bottom"   class="translate">bottom</option>
+                            <option value="middle"   class="translate">middle</option>
+                        </select></td>
+                    </tr>
+                    <tr class="options_barWidth">
+                        <td><label class="translate" for="barWidth">Bars width:</label></td>
+                        <td><input id="barWidth" class="value input"></td>
+                    </tr>
+                    <tr class="options_barFontSize">
+                        <td><label class="translate" for="barFontSize">Label font size:</label></td>
+                        <td><input id="barFontSize" class="value input"></td>
+                    </tr>
+                    <tr class="options_barFontColor">
+                        <td><label class="translate" for="barFontColor">Label color:</label></td>
+                        <td>
+                            <table class="no-spaces"><tr><td><input class="value input input-static-color" id="barFontColor"></td><td><button data-clear="barFontColor" class="clear-button" style="display: inline-block"></button></td></tr></table>
+                        </td>
+                    </tr>
+                </table>
+
+                <table style="margin-left: 25px; width: 300px">
+                    <tr><td class="translate header" colspan="2" style="text-align: center">Title</td></tr>
+                    <tr class="options_title">
+                        <td><label for="title" class="translate">Title:</label></td>
+                        <td><input id="title" class="value input"></td>
+                    </tr>
+                    <!-- Do not use values 50, 5, and -5. They are reserved for 50-middle/center, 5-inside at edge, -5 outside at edge -->
+                    <tr class="options_titlePos">
+                        <td><label for="titlePos" class="translate">Title position:</label></td>
+                        <td><select class="value input" id="titlePos">
+                            <option value="" class="translate">none</option>
+                            <option value="top:35;left:65" class="translate">Top, left, inside</option>
+                            <option value="top:35;right:5" class="translate">Top, right, inside</option>
+                            <option value="top:35;left:50" class="translate">Top, center, inside</option>
+                            <option value="top:50;left:65" class="translate">Middle, left, inside</option>
+                            <option value="top:50;right:5" class="translate">Middle, right, inside</option>
+                            <option value="bottom:5;left:65" class="translate">Bottom, left, inside</option>
+                            <option value="bottom:5;right:5" class="translate">Bottom, right, inside</option>
+                            <option value="bottom:5;left:50" class="translate">Bottom, center, inside</option>
+
+                            <option value="top:5;right:-5" class="translate">Top, right, outside</option>
+                            <option value="top:50;right:-5" class="translate">Middle, right, outside</option>
+                            <option value="bottom:5;right:-5" class="translate">Bottom, right, outside</option>
+                            <option value="bottom:-5;left:50" class="translate">Bottom, center, outside</option>
+                        </select></td>
+                    </tr>
+                    <tr class="options_titleColor">
+                        <td><label class="translate" for="titleColor">Title color:</label></td>
+                        <td><table class="no-spaces"><tr><td><input id="titleColor" class="value input input-static-color"></td><td><button data-clear="titleColor" class="clear-button" style="display: inline-block"></button></td></tr></table></td>
+                    </tr>
+                    <tr class="options_titleSize">
+                        <td><label for="titleSize" class="translate">Title size:</label></td>
+                        <td><input id="titleSize" class="value input"></td>
+                    </tr>
+
+                </table>
+
+                <table style="margin-left: 25px; width: 400px">
+                    <tr><td class="translate header" colspan="2" style="text-align: center">Options</td></tr>
+                    <tr class="options_legend">
+                        <td><label class="translate" for="legend">Show legend:</label></td>
+                        <td><select class="value input" id="legend">
+                            <option value="" class="translate">none</option>
+                            <option value="nw" class="translate">Top, left</option>
+                            <option value="ne" class="translate">Top, right</option>
+                            <option value="sw" class="translate">Bottom, left</option>
+                            <option value="se" class="translate">Bottom, right</option>
+                        </select></td>
+                    </tr>
+                    <tr class="options_legColumns">
+                        <td><label class="translate" for="legColumns">Legend columns:</label></td>
+                        <td><input type="number" class="value" id="legColumns"></td>
+                    </tr>
+                    <tr class="options_legBgOpacity">
+                        <td><label class="translate" for="legBgOpacity">Legend opacity (from 0 to 1):</label></td>
+                        <td><input class="value input" id="legBgOpacity"/></td>
+                    </tr>
+                    <tr class="options_legBg">
+                        <td><label class="translate" for="legBg">Legend background:</label></td>
+                        <td><table class="no-spaces"><tr><td><input class="value input input-static-color" id="legBg" style="display: inline-block"></td><td><button data-clear="legBg" class="clear-button" style="display: inline-block"></button></td></tr></table></td>
+                    </tr>
+                    <tr class="options_hoverDetail">
+                        <td><label class="translate" for="hoverDetail">Hover details:</label></td>
+                        <td><input type="checkbox" class="value" id="hoverDetail"></td>
+                    </tr>
+                    <tr class="options_timeFormat">
+                        <td><label class="translate" for="timeFormat">Time format:</label></td>
+                        <td><select class="value input" id="timeFormat">
+                            <option value="" class="translate">Default</option>
+                            <option value="%H:%M %d.%m">HH:MM dd.mm</option>
+                            <option value="%H:%M %d.%m.">HH:MM dd.mm.</option>
+                            <option value="%H:%M <br> %d.%m">HH:MM / dd.mm</option>
+                            <option value="%H:%M <br> %d.%m.">HH:MM / dd.mm.</option>
+                            <option value="%H:%M <br> %d.%m.%y">HH:MM / dd.mm.yy</option>
+                            <option value="%H:%M:%S %d.%m.%y">HH:MM:SS dd.mm.yy</option>
+                            <option value="%H:%M %d.%m.%y">HH:MM dd.mm.yy</option>
+                            <option value="%I:%M:%S %x %p">HH:MM:SS mm/dd/yy am (US)</option>
+                            <option value="%H:%M:%S %d/%m/%y">HH:MM:SS dd/mm/yy (UK)</option>
+                            <option value="%H:%M:%S %m.%d.%y">HH:MM:SS mm.dd.yy</option>
+
+                            <option value="%H:%M %a">HH:MM dow</option>
+                            <option value="%H:%M:%S %a">HH:MM:SS dow</option>
+
+                            <option value="%H:%M %m.%d">HH:MM mm.dd</option>
+                            <option value="%H:%M:%S">HH:MM:SS</option>
+                            <option value="%H:%M">HH:MM</option>
+                            <option value="%d.%m">dd.mm</option>
+                            <option value="%d.%m.">dd.mm.</option>
+                            <option value="%m/%d">mm/dd</option>
+                            <option value="%d">dd</option>
+                            <option value="%m">mm</option>
+                            <option value="%y">y</option>
+                            <option value="%H">HH</option>
+                            <option value="%M">MM</option>
+                            <option value="%a">dow</option>
+                            <option value="%d.%m.%y">dd.mm.yy</option>
+                        </select></td>
+                    </tr>
+                    <tr class="options_smoothing">
+                        <td><label class="translate" for="smoothing">Smoothing:</label></td>
+                        <td><input class="value input" id="smoothing"></td>
+                    </tr>
+                    <!--tr class="options_afterComma">
+                        <td class="translate">After comma:</td>
+                        <td><input class="value input" id="afterComma"></td>
+                    </tr-->
+                    <tr class="options_useComma">
+                        <td><label class="translate" for="useComma">Use comma:</label></td>
+                        <td><input type="checkbox" class="value" id="useComma"></td>
+                    </tr>
+                    <tr class="options_zoom">
+                        <td><label class="translate" for="zoom">Enable zoom and pan:</label></td>
+                        <td><input type="checkbox" class="value" id="zoom"></td>
+                    </tr>
+                    <tr class="options_noedit">
+                        <td><label class="translate" for="noedit">Hide edit button:</label></td>
+                        <td><input type="checkbox" class="value" id="noedit"></td>
+                    </tr>
+                    <tr class="options_animation">
+                        <td><label class="translate" for="animation">Animation:</label></td>
+                        <td><select class="value input" id="animation">
+                            <option value="0" class="translate">no</option>
+                            <option value="300" class="translate">300ms</option>
+                            <option value="500" class="translate">500ms</option>
+                            <option value="1000" class="translate">1s</option>
+                            <option value="2000" class="translate">2s</option>
+                            <option value="3000" class="translate">3s</option>
+                            <option value="5000" class="translate">5s</option>
+                            <option value="10000" class="translate">10s</option>
+                        </select></td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+        <div class="version">Version: 1.9.2</div>
+    </div>
+    <div style="height: 70px; display: flex; justify-content: space-around; align-items: center; margin-top: 4px; margin-bottom: 0">
+        <label class="translate" for="link">Link</label>
+        <textarea id="link" style="width: calc(100% - 260px); height: 55px; word-break: break-all; resize: none"></textarea>
+        <button style="padding-left: 2px" id="open"          class="translateB">Open</button>
+        <button style="padding-left: 5px" id="updatePreview" class="translateB">update Preview</button>
+    </div>
+</div>
+<iframe style="width: calc(100% - 20px); bottom: 0; height: calc(100% - 380px); border: 1px solid #afafaf; border-radius: 2px" id="chart"></iframe>
+<div id="dialog-select-member" style="display: none"></div>
+
+<div id="dialog-line-options" style="display: none">
+    <table>
+    </table>
+</div>
+<div id="dialog-new-preset" style="display: none">
+    <table>
+        <tr id="dialog-new-preset-info-tr">
+            <td><label for="dialog-new-preset-into" class="translate">Save into:</label></td>
+            <td><select id="dialog-new-preset-into" style="width: 100%;"></select></td>
+        </tr>
+        <tr id="dialog-new-preset-name-tr">
+            <td><label for="dialog-new-preset-name" class="translate">Name:</label></td>
+            <td><input id="dialog-new-preset-name" style="width: 100%;"/></td>
+        </tr>
+    </table>
+</div>
+
+<script type="text/javascript" src="js/edit.js"></script>
+</body>
+</html>
