<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GraphNavigator</title>
<script type="text/javascript" src="https://rawcdn.githack.com/grapheco/InteractiveGraph/0.3.2/dist/igraph/interactive-graph.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://rawcdn.githack.com/grapheco/InteractiveGraph/0.3.2/dist/igraph/interactive-graph.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" integrity="sha256-p6xU9YulB7E2Ic62/PX+h59ayb3PBJ0WFTEQxq0EjHw="
    crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM="
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<style type="text/css">
    body {
        margin: 0px;
        font-size: 14px;
    }

    #graphArea {
        height: 100%;
        border: 1px solid lightgray;
    }
</style>

</head>

<body>

<div style="height:100%">
    <div id="graphArea"></div>
</div>
<!--all UI controls-->
<div>
    <!--toolbar-->
    <div class="toolbarPanel igraph-dockable igraph-draggable" igraph-control-role="ToolbarCtrl"
        igraph-dock-position="B:-6,0">
        <div class="toolbar"></div>
    </div>
    <!--info box-->
    <div class="infoPanel igraph-dockable igraph-draggable" igraph-control-role="InfoBoxCtrl" igraph-dock-position="A:10,200">
        <div>
            <div class="infoPanel1"></div>
            <div class="infoPanel2"><span align="center" class="fa fa-close fa-lg btnCloseInfoPanel"></span></div>
        </div>
        <div class="infoBox"></div>
    </div>
    <!--search box-->
    <div class="searchPanel igraph-dockable igraph-draggable" igraph-control-role="SearchBoxCtrl"
        igraph-dock-position="A:10,20">
        <div class="searchPanel1">
            <input class="igraph-searchbox" type="text" size="16" placeholder="input keyword">
        </div>
        <div class="searchPanel2 igraph-searchbox-image">
            <span align="center" class="fa fa-photo fa-lg" />
        </div>
    </div>
    <!--status bar-->
    <div class="statusPanel igraph-dockable" igraph-control-role="StatusBarCtrl" igraph-dock-position="C:-100,0">
        <div class="statusBar"></div>
    </div>
    <!--image upload box-->
    <div class="imageUploadPanel" igraph-control-role="ImageUploadCtrl"></div>
    <div class="ResultListPanel igraph-dockable igraph-draggable" igraph-control-role="ResultListCtrl" igraph-dock-position="A:10,70"></div>
</div>
<script type="text/javascript">
    function load() {
        var file = location.hash.replace(/^#/, '/');
        if (!file) {
            $('#error').dialog('open');
            return;
        } else {
            $('#error').dialog('close');
        }
        var app = new igraph.GraphNavigator(document.getElementById('graphArea'), 'LIGHT');
        app.loadGson(file);
    }
    $(window).on('hashchange', load);
    load();
    </script>

</body>

</html>