VANA/VANA-php/resources/js/app.js

"use strict";

import './bootstrap';
import Pillarbox from '@srgssr/pillarbox-web';
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import * as echarts from 'echarts';



// Tabs
const tabs = document.querySelectorAll('input[type="radio"]');
tabs.forEach(tab => {

    tab.addEventListener('click', el => {

        let tabId = el.target.getAttribute('id');
        let panels = document.querySelectorAll('.panel');

        panels.forEach(p => {
            if(p.getAttribute('id') === tabId+'_panel'){
                p.hidden = false;
            }else{
                p.hidden = true;
            }

        })

    })
})

var chartDom = document.querySelectorAll('.track')[0].querySelector('.track-viz');
var myChart = echarts.init(chartDom);
var option;

option = {
    grid: {
        top: 0,
        bottom: 0,
        right: 0,
        left: 0
    },
     xAxis: {
        type: 'time',
        data: [0, 4.722, 7.537, 10.364, 14.103, 16.898, 20.082, 23.652, 35.462, 37.952, 40.222, 43.132, 46.902, 51.041, 54.442, 57.302, 60.062, 62.712, 65.822, 69.333, 72.013, 76.602, 79.521, 83.082, 86.825, 90.42, 93.734, 97.512, 100.594, 106.371, 108.752, 111.292, 114.304, 116.902, 119.991, 123.851, 128.193, 131.702, 135.749, 137.851, 140.301, 142.471, 145.302, 147.432, 151.712, 155.272, 160.093, 163.942, 181.852, 185.292, 190.261, 192.501, 194.804, 199.245, 204.112, 206.952, 209.419, 211.475, 213.641, 215.743, 217.881, 220.243, 222.712, 224.802, 226.811, 229.191, 231.891, 234.182, 236.784, 238.934, 242.421, 245.101, 247.711, 249.982, 252.841, 254.962, 257.612, 260.432, 263.971, 266.403, 270.611, 273.072, 275.331, 278.43, 281.71, 284.661, 287.514, 290.011, 292.362, 298.051, 301.111, 303.341, 306.641, 308.722, 310.732, 312.802, 315.101, 319.461, 323.131, 325.662, 328.103, 330.957, 334.924, 338.411, 342.032, 345.231, 348.711, 352.072, 354.371, 357.061, 359.215, 361.412, 363.651, 367.013, 369.491, 373.865, 377.531, 381.251, 384.065, 386.921, 389.416, 393.051, 395.471, 398.834, 402.411, 404.381, 407.361, 409.241, 411.181, 413.371, 415.241, 417.214, 419.211, 421.821, 424.042, 426.111, 429.101, 431.023, 435.403, 438.06, 440.226, 445.161, 449.621, 452.181, 457.771, 459.812, 461.811, 463.67, 465.541, 468.161, 470.31, 472.721, 474.711, 476.631, 478.851, 482.063, 484.901, 487.172, 490.38, 493.571, 496.286, 498.781, 501.751, 504.306, 507.31, 509.721, 512.14, 514.418, 516.64, 518.851, 521.933, 524.77, 533.221, 535.731, 538.801, 541.343, 543.639, 545.841, 547.9, 552.421, 556.634, 560.531, 563.322, 566.131, 568.681, 570.999, 573.061, 575.11, 577.251, 579.44, 582.641, 585.471, 587.721, 591.171, 595.69, 597.68, 600.091, 602.151, 604.241, 606.703, 608.819, 611.362, 614.006, 617.37, 620.253, 622.401, 624.901, 627.1, 629.27, 631.67, 636.532, 639.203, 645.751, 647.96, 651.123, 655.021, 657.51, 659.681, 662.41, 666.29, 673.334, 675.893, 678.791, 681.385, 684.82, 688.894, 690.97, 692.971, 694.951, 697.23, 700.88, 703.98, 706.88, 709.81, 713.181, 716.62, 718.797, 719.81, 723.76, 726.23, 728.681, 732.198, 736.42, 738.67, 740.76, 743.42, 745.66, 748.789, 750.59, 752.57, 754.27, 756.11, 758.14, 762.302, 766.11, 768.43, 770.49, 772.79, 776.637, 779.56, 782.87, 786.691, 788.81, 791.568, 794.34, 796.6, 798.71, 801.15, 803.3, 806.081, 808.2, 810.95, 813.512, 815.432, 817.322, 819.243, 821.162, 823.23, 825.33, 827.49, 829.636, 831.79, 834.09, 837.439, 840.77, 843.17, 846.2, 850.45, 852.987, 855.47, 857.631, 859.91, 862.03, 864.81, 867.67, 869.891, 873.052, 876.169, 879.803, 883.35, 886.17, 888.46, 893.982, 896.029, 897.99, 900.17, 902.74, 905.96, 908.301, 910.299, 912.3, 914.15, 916.12, 918.19, 921.35, 924.03, 927.799, 930.96, 933.01, 935.23, 938.17, 940.85, 943.339, 946.039, 948.36, 950.343, 952.4, 954.47, 956.352, 958.27, 960.232, 962.277, 964.309, 966.449, 969.66, 972.132, 974.27, 976.56, 980.619, 983.261, 986.05, 988.126, 990.457, 993.85, 996.479, 1003.59, 1006.67, 1011.57, 1017.14, 1026.48, 1030.659, 1033.729, 1036.742, 1039.15, 1046.311, 1050.299, 1052.589, 1054.699, 1057.86, 1062.432, 1066.021, 1066.919, 1071.629, 1073.97, 1076.113, 1078.29, 1080.79, 1087.61, 1090.369, 1093.009, 1095.12, 1097.271, 1099.561, 1102.279, 1105.989, 1108.219, 1111.209, 1114.09, 1116.659, 1123.399, 1127.01, 1129.282, 1133.727, 1139.129, 1143.399, 1146.8, 1149.72, 1153.409, 1158.269, 1161.99, 1165.441, 1168.88, 1172.129, 1174.269, 1176.342, 1181.039, 1182.94, 1185.4, 1188.689, 1192.001, 1195.349, 1198.309, 1200.469, 1202.759, 1206.017, 1208.21, 1210.919, 1213.309, 1215.269, 1217.359, 1219.96, 1225.251, 1233.285, 1244.31, 1246.269, 1248.339, 1250.889, 1253.302, 1256.739, 1260.139, 1262.72, 1266.869, 1269.27, 1273.149, 1275.339, 1278.591, 1284.859, 1287.19, 1289.464, 1292.142, 1294.338, 1296.449, 1298.529, 1300.969, 1303.789, 1305.829, 1307.879, 1309.739, 1312.548, 1314.829, 1316.909, 1319.75, 1321.922, 1324.629, 1327.35, 1329.478, 1331.866, 1334.669, 1337.899, 1341.539, 1347.718, 1350.609, 1353.279, 1356.219, 1359.479, 1362.5, 1364.568, 1367.09, 1369.127, 1371.249, 1
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        },

      },
      yAxis: {
        type: 'value',
        axisLabel: {
            inside: false
        }
      },
      series: [
        {
          data: [0, 5, 17, 28, 37, 46, 50, 55, 59, 62, 68, 72, 82, 87, 93, 97, 105, 109, 115, 122, 127, 136, 142, 148, 155, 164, 169, 177, 184, 192, 194, 198, 208, 215, 223, 229, 240, 249, 258, 264, 274, 281, 288, 293, 301, 307, 315, 323, 329, 342, 352, 358, 363, 374, 384, 395, 402, 406, 412, 416, 423, 429, 435, 444, 450, 457, 465, 473, 476, 479, 488, 492, 499, 505, 513, 515, 525, 533, 541, 547, 555, 563, 569, 578, 583, 588, 594, 602, 605, 613, 623, 629, 635, 641, 648, 656, 666, 674, 681, 690, 699, 708, 717, 725, 733, 736, 742, 752, 756, 764, 768, 775, 780, 785, 792, 800, 809, 815, 824, 829, 836, 846, 853, 864, 872, 875, 882, 889, 892, 903, 909, 916, 921, 932, 940, 945, 958, 961, 970, 977, 984, 992, 997, 1004, 1014, 1021, 1028, 1037, 1040, 1047, 1055, 1063, 1067, 1074, 1084, 1093, 1102, 1107, 1113, 1118, 1129, 1134, 1141, 1146, 1157, 1161, 1166, 1174, 1179, 1185, 1192, 1197, 1206, 1212, 1220, 1228, 1233, 1241, 1246, 1259, 1271, 1279, 1285, 1293, 1294, 1304, 1310, 1315, 1323, 1334, 1342, 1350, 1355, 1365, 1372, 1375, 1383, 1392, 1398, 1408, 1413, 1420, 1427, 1437, 1447, 1452, 1462, 1468, 1475, 1480, 1492, 1496, 1501, 1507, 1518, 1530, 1535, 1539, 1548, 1554, 1567, 1570, 1579, 1585, 1597, 1606, 1610, 1618, 1623, 1626, 1633, 1643, 1649, 1656, 1663, 1673, 1679, 1684, 1693, 1699, 1704, 1715, 1718, 1729, 1735, 1744, 1750, 1758, 1764, 1768, 1777, 1785, 1792, 1803, 1815, 1820, 1827, 1835, 1842, 1853, 1859, 1869, 1874, 1885, 1892, 1896, 1904, 1913, 1919, 1930, 1935, 1948, 1956, 1960, 1967, 1976, 1983, 1992, 1995, 2006, 2011, 2016, 2024, 2035, 2041, 2047, 2056, 2061, 2068, 2077, 2082, 2090, 2093, 2104, 2113, 2116, 2127, 2134, 2140, 2149, 2155, 2163, 2170, 2176, 2185, 2191, 2199, 2209, 2216, 2221, 2227, 2232, 2237, 2245, 2255, 2261, 2267, 2274, 2282, 2287, 2295, 2304, 2311, 2322, 2332, 2337, 2344, 2348, 2354, 2362, 2369, 2377, 2381, 2391, 2404, 2411, 2419, 2426, 2433, 2444, 2456, 2461, 2468, 2476, 2479, 2484, 2487, 2496, 2507, 2516, 2523, 2528, 2539, 2545, 2550, 2557, 2567, 2572, 2581, 2588, 2594, 2601, 2606, 2613, 2618, 2624, 2630, 2639, 2646, 2653, 2656, 2661, 2667, 2672, 2682, 2685, 2695, 2705, 2710, 2717, 2726, 2728, 2736, 2741, 2747, 2755, 2760, 2769, 2775, 2782, 2790, 2792, 2802, 2807, 2817, 2824, 2827, 2833, 2839, 2843, 2852, 2862, 2866, 2875, 2887, 2892, 2901, 2907, 2912, 2921, 2931, 2936, 2944, 2949, 2957, 2961, 2969, 2974, 2984, 2991, 2997, 3004, 3012, 3020, 3026, 3037, 3048, 3055, 3061, 3067, 3074, 3079, 3084, 3093, 3107, 3110, 3118, 3124, 3135, 3141, 3147, 3157, 3161, 3169, 3178, 3186, 3195, 3202, 3208, 3220, 3231, 3236, 3244, 3257, 3266, 3277, 3284, 3294, 3299, 3304, 3315, 3323, 3328, 3338, 3348, 3353, 3364, 3372, 3378, 3384, 3390, 3399, 3409, 3417, 3425, 3436, 3444, 3451, 3461, 3469, 3476, 3480, 3490, 3496, 3501, 3510, 3518, 3521, 3529, 3537, 3545, 3553, 3564, 3570, 3578, 3585, 3592, 3596, 3606, 3614, 3622, 3631, 3639, 3647, 3654, 3665, 3670, 3681, 3688, 3694, 3705, 3711, 3721, 3728, 3733, 3743, 3749, 3751, 3763, 3767, 3774, 3781, 3785, 3794, 3801, 3805, 3809, 3813, 3821, 3830, 3839, 3849, 3854, 3864, 3867, 3875, 3880, 3889, 3895, 3903, 3909, 3922, 3926, 3933, 3945, 3956, 3964, 3973, 3978, 3987, 3997, 4004, 4009, 4018, 4024, 4034, 4045, 4053, 4061, 4066, 4074, 4080, 4087, 4092, 4103, 4112, 4115, 4122, 4128, 4137, 4141, 4153, 4160, 4164, 4172, 4181, 4188, 4195, 4202, 4211, 4222, 4233, 4238, 4247, 4253, 4256, 4259, 4270, 4282, 4288, 4296, 4304, 4317, 4327, 4331, 4338, 4344, 4350, 4357, 4363, 4368, 4371, 4383, 4392, 4400, 4406, 4416, 4422, 4432, 4440, 4451, 4458, 4467, 4471, 4478, 4485, 4493, 4496, 4508, 4512, 4519, 4529, 4534, 4540, 4549, 4556, 4559, 4566, 4573, 4578, 4589, 4596, 4604, 4611, 4620, 4630, 4642, 4651, 4660, 4662, 4669, 4675, 4680, 4686, 4692, 4696, 4703, 4708, 4717, 4720, 4729, 4741, 4749, 4759, 4764, 4771, 4779, 4788, 4790, 4795, 4804, 4811, 4814, 4822, 4832, 4836, 4845, 4853, 4862, 4870, 4877, 4882, 4889, 4891, 4901, 4908, 4918, 4927, 4933, 4940, 4949, 4953, 4960, 4968, 4973, 4982, 4992, 5000, 5006, 5014, 5020, 5030, 5034, 5042, 5053, 5064, 5070, 5080, 5088, 5094, 5099, 5106, 5112, 5122, 5125, 5132, 513
          type: 'line',
          lineStyle: {
            color: '#fff',
          },
        }
      ]
    }
;

option && myChart.setOption(option);

var chartDom2 = document.querySelectorAll('.track')[1].querySelector('.track-viz');
var myChart2 = echarts.init(chartDom2);
var option2;

option2 = {
    grid: {
        top: 0,
        bottom: 0,
        right: 0,
        left: 0
    },
  xAxis: {
    type: 'category',
    data: [5.364, 8.178, 11.005, 14.745, 17.539, 33.363, 36.103, 38.593, 40.863, 43.773, 47.543, 55.084, 57.943, 60.704, 63.353, 69.975, 72.654, 77.243, 83.725, 87.466, 91.062, 94.375, 98.152, 103.323, 107.013, 111.933, 120.634, 132.343, 136.39, 140.943, 141.707, 148.073, 155.913, 160.735, 185.933, 188.09699999999998, 193.142, 195.445, 197.345, 204.753, 210.06, 216.384, 218.522, 220.884, 229.833, 239.574, 243.062, 245.743, 255.603, 258.253, 267.045, 273.712, 279.072, 282.351, 285.302, 290.652, 301.752, 307.284, 311.374, 313.443, 315.743, 317.602, 320.102, 323.772, 326.304, 331.599, 335.565, 339.053, 342.672, 345.873, 349.352, 357.703, 370.133, 374.506, 381.893, 387.562, 393.692, 396.112, 403.052, 405.522, 409.882, 411.822, 414.012, 415.882, 419.852, 424.682, 426.753, 438.702, 440.867, 452.822, 455.29650000000004, 460.454, 462.453, 466.183, 468.802, 473.362, 475.352, 482.704, 485.543, 491.022, 494.212, 496.928, 502.392, 510.362, 515.059, 517.28, 519.491, 522.575, 533.862, 539.442, 540.3924999999999, 544.281, 548.542, 553.063, 561.172, 566.771, 569.322, 570.1605, 571.64, 573.702, 575.751, 577.893, 583.282, 586.113, 588.364, 591.812, 598.322, 600.731, 602.793, 607.344, 612.002, 614.647, 618.012, 620.893, 623.042, 629.911, 637.173, 646.393, 648.601, 649.8620000000001, 655.662, 663.051, 673.975, 676.535, 682.026, 689.535, 693.612, 697.871, 704.622, 707.522, 710.452, 719.438, 726.871, 729.322, 732.839, 737.061, 739.311, 741.401, 749.414, 753.211, 754.912, 756.751, 762.944, 769.071, 771.131, 773.431, 780.201, 787.331, 792.209, 801.792, 806.722, 808.849, 811.591, 814.153, 816.074, 819.883, 825.971, 830.277, 832.432, 838.08, 843.811, 851.092, 853.629, 856.111, 860.551, 868.311, 870.545, 876.811, 880.444, 883.991, 886.811, 889.102, 898.631, 900.812, 906.602, 908.943, 910.941, 911.6205, 912.942, 914.791, 921.992, 924.672, 931.601, 935.871, 938.811, 939.8305, 941.492, 943.98, 946.681, 949.001, 955.111, 958.911, 962.918, 974.911, 986.691, 988.767, 997.122, 1007.312, 1012.211, 1017.78, 1031.3, 1039.791, 1050.94, 1063.073, 1066.662, 1074.615, 1076.753, 1078.931, 1088.25, 1091.011, 1093.652, 1100.202, 1108.86, 1111.853, 1114.731, 1117.3, 1124.041, 1129.923, 1139.771, 1147.442, 1150.361, 1154.05, 1158.91, 1166.082, 1169.52, 1172.77, 1176.983, 1183.581, 1186.041, 1189.33, 1192.642, 1195.991, 1198.949, 1201.11, 1206.657, 1211.56, 1215.91, 1216.6345000000001, 1218.001, 1222.59, 1223.9205, 1225.894, 1240.893, 1242.6015, 1244.951, 1246.91, 1251.529, 1257.379, 1260.78, 1267.51, 1269.911, 1273.79, 1275.98, 1279.232, 1285.5, 1290.106, 1294.98, 1299.17, 1304.43, 1317.55, 1320.392, 1327.991, 1330.12, 1335.31, 1338.54, 1348.36, 1351.25, 1353.92, 1360.12, 1363.141, 1367.73, 1371.89, 1374.842, 1377.041, 1379.113, 1381.47, 1384.32, 1389.264, 1391.76, 1394.22, 1398.572, 1400.788, 1404.6, 1407.41, 1409.97, 1412.467, 1415.51, 1417.799, 1426.48, 1434.729, 1437.079, 1439.239, 1443.52, 1448.453, 1451.399, 1454.7, 1458.66, 1461.91, 1469.999, 1482.072, 1487.31, 1490.97, 1494.84, 1503.619, 1514.16, 1518.17, 1521.899, 1524.18, 1531.89, 1534.732, 1539.099, 1541.231, 1546.471, 1548.69, 1559.119, 1563.68, 1567.809, 1571.919, 1574.389, 1576.479, 1580.29, 1582.388, 1584.66, 1585.1703333333335, 1585.6806666666666, 1589.11, 1601.639, 1603.783, 1618.141, 1626.619, 1632.146, 1633.337, 1638.141, 1641.661, 1644.161, 1655.25, 1658.8, 1661.33, 1669.629, 1673.38, 1678.529, 1685.16, 1689.48, 1692.09, 1697.071, 1700.857, 1705.689, 1708.06, 1713.111, 1715.51, 1717.899, 1721.049, 1723.75, 1727.011, 1733.999, 1741.584, 1744.423, 1751.07, 1760.05, 1763.49, 1772.049, 1774.189, 1780.336, 1781.5465, 1783.4, 1785.429, 1790.411, 1796.239, 1801.579, 1813.189, 1819.079, 1821.97, 1824.269, 1826.661, 1829.208, 1831.77, 1836.068, 1838.768, 1841.339, 1851.83, 1854.749, 1857.889, 1864.374, 1866.6165, 1869.503, 1871.639, 1879.319, 1883.49, 1887.758, 1893.385, 1897.335, 1909.749, 1920.9, 1928.28, 1939.918, 1965.809, 1971.149, 1973.869, 1981.403, 1989.951, 1996.969, 1999.47, 2002.628, 2005.975, 2009.692, 2012.708, 2015.0, 2020.539, 2026.319, 2034.938, 2037.028, 2043.809, 2049.838, 2052.349, 205
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '1', '1', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '-1', '-1', '0', '0', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '-1', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '-1', '-1', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '1', '0', '0', '-1', '0', '0', '0', '1', '1', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '0', '-1', '-1', '-1', '1', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '1', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '-1', '0', '-1', '1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '-1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '1', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '-1', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '0', '-1', '-1', '-1', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '-1', '1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '-1', '1', '0', '0', '0', '-1', '0', '0', '1', '0', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '1', '1', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '1', '0', '1', '0', '-1', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '1', '0', '1', '0', '0', '-1', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '-1', '-1', '0', '1', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '1', '0', '0'
      type: 'line'
    }
  ]
};

option2 && myChart2.setOption(option2);




// VIDEO


const video = document.getElementById('video');
// Timeline draggable
gsap.registerPlugin(Draggable);





const player = new Pillarbox('my-player', {
    controls: false,
    muted: true,
    srgOptions: {
        liveui: false
    }
});

player.src({ src: video.getAttribute('data-urn'), type: 'srgssr/urn' });

const timelineIndicator = document.getElementById('timeline-bar-ctrl');





// Play / Pause video
video.addEventListener('click', _ => {
    player.paused() ? player.play() : player.pause();
    timelineTimelabels();
})

// Transcript
const transcript = document.getElementById('transcript');
const transcript_cues = transcript.querySelectorAll('[data-start]');

transcript_cues.forEach(c => {
    c.addEventListener('click', (e) => {
        player.currentTime(e.target.getAttribute('data-start'));
        player.play();
    });
});


/************
 * Timeline *
 ************/

const status = {
    timelineIndicatorIsDragged: false
}

function timelineTimelabels(){
    let duration = player.duration()
    let step = duration / 10;
    let html = '<span>00:00:00</span>'

    for(let i = 1; i <= 10; i++){
        html += `<span>${secondsToTimecode(i * step)}</span>`;
    }

    document.querySelector('#timeline-bar').insertAdjacentHTML('beforeend', html);

    console.log(html)
}

/**
 * calcCurrenttimeByPosition
 * Calculate time to seek to, based on the position of the timelineIndicator.
 **/
function calcCurrenttimeByPosition(x){
    return (player.duration() / document.getElementById('timeline-bar').offsetWidth) * x
}

/**
 * Updates the position of the timeline indicator with every timeupdate of the video.
 **/
player.on('timeupdate', e =>{
    if(!status.timelineIndicatorIsDragged){
        let timelineIndicatorPosition = (document.getElementById('timeline-bar').offsetWidth / player.duration()) * player.currentTime();
        timelineIndicator.style.transform = `translate3d(${timelineIndicatorPosition}px, 0px, 0px)`;
    }

})

/**
 * Initialize the timelineindicator
 **/
document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(Draggable)
    Draggable.create("#timeline-bar-ctrl", {
        type: "x",
        bounds: document.getElementById("timeline-bar"),
        onDragStart: function () {
            status.timelineIndicatorIsDragged = true;
        },
        onDragEnd: function () {
            player.currentTime(calcCurrenttimeByPosition(this.x));
            player.play();
            status.timelineIndicatorIsDragged = false;
        },
    });
});


/*
document.querySelector('#timeline-bar').addEventListener('click', e => {
    console.log(e.clientX - e.target.offsetLeft);
    let x = e.clientX - e.target.offsetLeft;
    player.currentTime(calcCurrenttimeByPosition(x));
})
*/

function setTopicSegments(count){

    let html = '';
    for(let i = 1; i <= count; i++){
        html += `<li>${i}</li>`;
    }

    let list = document.querySelector('#topic-segement-list');
    list.innerHTML = html;
    list.style.gridTemplate = `1fr / repeat(${count}, 1fr)`;

}

let topicSegmentCtrl = document.getElementById('topic-track-segment-ctrl');

topicSegmentCtrl.addEventListener('change', e => {
    setTopicSegments(e.target.value);

})

setTopicSegments(topicSegmentCtrl.value);