<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>IGV Variant Inspector </title>

    <!-- igv -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/igv@2.2.13/dist/igv.min.js"></script>

    <style type="text/css">
        body {
            font-size: 80%;
            font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
        }
    </style>

    <!-- selector table style -->
    <style>

        tr {
            cursor: default;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: lightblue;
        }

        th {
            background-color: lightskyblue;
            color: white;
        }

        .selected {
            background-color: lightblue !important;
            outline: solid thin darkblue !important;
        }
    </style>

    <!-- accordian style,  ref: https://alligator.io/css/collapsible/ -->
    <style type="text/css">
        .wrap-collabsible {
            margin-bottom: 1.2rem;
        }

        input[type='checkbox'] {
            display: none;
        }

        .lbl-toggle {
            display: block;

            font-weight: bold;
            font-family: monospace;
            font-size: 1.2rem;
            text-transform: uppercase;
            text-align: left;

            padding: 1rem;

            color: black;
            background: #dddddd;

            cursor: pointer;

            border-radius: 7px;
            transition: all 0.25s ease-out;
        }

        .lbl-toggle:hover {
            color: blue;
        }

        .lbl-toggle::before {
            content: ' ';
            display: inline-block;

            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid currentColor;
            vertical-align: middle;
            margin-right: .7rem;
            transform: translateY(-2px);

            transition: transform .2s ease-out;
        }

        .toggle:checked + .lbl-toggle::before {
            transform: rotate(90deg) translateX(-3px);
        }

        .collapsible-content {
            max-height: 0px;
            overflow: auto;
            transition: max-height .25s ease-in-out;
        }

        .toggle:checked + .lbl-toggle + .collapsible-content {
            max-height: 350px;
        }

        .toggle:checked + .lbl-toggle {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .collapsible-content .content-inner {
            background: rgba(250, 224, 66, .2);
            border-bottom: 1px solid rgba(250, 224, 66, .45);
            border-bottom-left-radius: 7px;
            border-bottom-right-radius: 7px;
            padding: .5rem 1rem;
        }
    </style>

</head>

<body>


<div id="tableContainer" class="wrap-collabsible">
    <input id="collapsible" class="toggle" type="checkbox" checked>
    <label for="collapsible" class="lbl-toggle">Variants</label>
    <div class="collapsible-content">
        <div id="tableSelectorDiv" style="overflow: auto"></div>
    </div>
</div>

<div id="igvContainer">
    <div id="igvDiv"></div>
</div>


<script type="text/javascript">

    var tableJson = "@TABLE_JSON@"

    var sessionDictionary = "@SESSION_DICTIONARY@"


    document.addEventListener("DOMContentLoaded", function () {

        initIGV();
        initTable();

    });


    function initIGV() {

        var igvDiv;
        igvDiv = document.getElementById("igvDiv");
        var options =
            {
                sessionURL: sessionDictionary["1"],
                showChromosomeWidget: false,
                showCenterGuide: true
            };

        igv.createBrowser(igvDiv, options)
            .then(function (b) {
                igv.browser = b;
            })
    }

    function initTable() {
        var table = document.createElement("table");
        table.id = "variant_table"

        table.style.width = "100%";

        document.getElementById("tableSelectorDiv").appendChild(table);

        var thead = document.createElement('thead');
        table.appendChild(thead);
        var headerRow = thead.insertRow(0);

        // Assume all json objects have the same keys
        var headers = Object.keys(tableJson[0]);

        for (var j = 1; j < headers.length; j++) {
            var cell = document.createElement("th");
            headerRow.appendChild(cell);
            cell.innerHTML = headers[j];

        }

        var tbody = document.createElement('tbody');
        table.appendChild(tbody);

        for (var i = 0; i < tableJson.length; i++) {

            var json = tableJson[i];
            var unique_id = json['unique_id']
            var row = document.createElement("tr");

            row.id = "row_" + unique_id;
            tbody.appendChild(row);

            // First row selected by default
            if(i === 0) row.classList.add("selected")

            row.onclick = function (event) {

                var list= document.getElementById("variant_table").getElementsByTagName("tr")
                for (var i = 0; i < list.length; i++) {
                    list[i].classList.remove("selected")
                }

                var rowID = event.target.parentElement.id;
                var row = document.getElementById(rowID)
                row.classList.add("selected")
                var uniqueId = rowID.substring(4);
                var session = sessionDictionary[uniqueId]
                igv.browser.loadSession({
                    url: session
                })

            }

            for (j = 1; j < headers.length; j++) {
                var key = headers[j];
                var value = json[key];

                cell = document.createElement("td");
                cell.rowID = i;
                row.appendChild(cell);
                cell.innerHTML = value;
            }
        }
    }



</script>


</body>