<!DOCTYPE html>

<head>
  <!-- FAVICON -->
  <link rel="shortcut icon" href="http://gsi.dit.upm.es/templates/purity_iii/favicon.ico" type="image/x-icon">
  <link rel="icon" href="http://gsi.dit.upm.es/templates/purity_iii/favicon.ico" type="image/x-icon">

  <!-- JQUERY -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <!-- BOOTSTRAP 3.3.7 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- BOOTSTRAP SLIDER -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.js"></script>

  <!-- D3.js // DATA-DRIVEN DOCUMENTS -->
  <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
  <script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

  <!-- JAVASCRIPTS -->
  <script type="text/javascript" src="js/visualization.js"></script>
  <script type="text/javascript" src="js/timeline.js"></script>
  <script type="text/javascript" src="js/socket.js"></script>
  <script type="text/javascript" src="js/template.js"></script>

  <!-- STYLESHEETS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" type="text/css" href="css/timeline.css">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu+Mono" />
  
  <title>{{ model_name }}</title>

  <script type="text/javascript">//<![CDATA[

    var width   = window.innerWidth * 0.75,
        height  = window.innerHeight * 3 / 5,
        speed   = 1000,
        play,
        slider;

    window.onload = function() {
        "use strict";

        // Create svg, timeline and settings
        self.GraphVisualization.create('graph', height, width);
        $('<div>').attr('id', 'load').appendTo('#graph_container').css('left', width / 2 - 25).css('top', height / 2);
        $('#configuration').css("height", height);
        d3.select('#slider3').attr("width", width).call(
            d3.slider().axis(true).min(0).max(100)
        );

        // Load a file
        $('#update #file').change(function() { 

            var file = $('#file')[0].files[0];
            self.GraphVisualization.reset();
            $('#load').show();

            $('.custom-file-control').attr("data-content", 
                file['name'] || "Choose file..."
            );

            if ( file['type'] !== "application/x-yaml" ) {
                console.log('File format not supported. Sorry for the inconvenience.');
                _socket.error('File format not supported. Sorry for the inconvenience.');
                return;
            } else {
                $('.alert.alert-danger').hide();
            }

            var fileReader = new FileReader();
            if (fileReader && file) {
                fileReader.readAsText(file);
                fileReader.onload = function () {
                    var content = fileReader.result;
                    $('#load').show().addClass('loader');
                    _socket.send(content, 'config_file');
                };
            }

        });

        // Select 'trials'
        $('.config-item #trials').change(function() {
            _socket.send($(this).val(), 'get_trial');
        });

        // Select 'attributes'
        $('.config-item #properties').change(function() {
            self.GraphVisualization.update_graph($(this).val(), slider.value(), function() {
                update_statistics_table();
            })
        });

        $('[data-toggle="tooltip"]').tooltip()

    }

    ///]]

  </script>

</head>

<body>

<div class="container-fluid fixed">

    <!-- CONSOLE -->
    <div class="col-sm-9 console">
        Please, upload a YAML file that defines all the parameters of a simulation. <br/>
        If you don't know how to write the file, please visit this page:<br/>
        http://soilsim.readthedocs.io/en/latest/quickstart.html<br/><br/>
    </div>
    <!-- //CONSOLE -->

    <div id="update" class="col-sm-3">
        <!-- Load File -->
        <form enctype="multipart/form-data">
            <label class="custom-file">
                <input type="file" id="file" name="file" class="custom-file-input">
                <span class="custom-file-control" data-content="Choose file..."></span>
            </label>
        </form>  
        <!-- //Load File -->

        <!-- TRIALS -->
        <div class="config-item">
            Trials: 
            <select id="trials" class="form-control form-control-sm">
            </select>
        </div>
        <!-- //TRIALS -->
    </div>

</div>

<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li data-target="#myCarousel" data-slide-to="0" class="active"><a href='#'>Home</a></li>
                <li data-target="#myCarousel" data-slide-to="1"><a href="#" onclick="">Settings</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Run simulation</a></li>
            </ul>
        </div>
        <script type="text/javascript">
            $('.nav li').click(function() {
                $('.nav li').removeClass('active');
                $(this).addClass('active');
            });
        </script>
    </div>
</nav>

<div id="myCarousel" class="carousel slide">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

        <!-- Wrapper Graph Container -->
        <div class="item active">
            <div class="container-fluid">

                <div id="graph_container">
                    <svg id="graph" class="col-sm-9"></svg>
                </div>

                <div id="configuration" class="col-sm-3">
                    <!-- Graph Info -->
                    <div class="config-item" style="margin-top: 0 !important;">
                        <table id="info-graph">
                            <tbody>
                                <tr id="nodes"><th>Nodes:</th></tr>
                                <tr id="links"><th>Links:</th></tr>
                            </tbody>
                        </table>
                        <div class="logo pull-right">
                            <img src="img/logo_gsi.svg" style="height: 40px;">
                        </div>
                    </div>
                    <hr />
                    <!-- //Graph Info --> 
                    
                    <!-- PROPIEDADES -->
                    <div class="config-item">
                        Propiedades: 
                        <select id="properties" class="form-control form-control-sm">
                            <optgroup id="properties-dynamic" label="Dynamics"></optgroup>
                            <optgroup id="properties-static" label="Statics"></optgroup>
                        </select>
                    </div>
                    <hr />
                    <div class="config-item">
                        <table id="percentTable">
                            <tbody><tr><th></th></tr></tbody>
                        </table>
                    </div>
                    <hr />
                    <!-- //PROPIEDADES -->

                    <!-- SPEED -->
                    <div class="config-item">
                        <table id="speed"><tbody><tr>
                            <th class="text-left min">min</th>
                            <th class="text-center">Speed</th>
                            <th class="text-right max">max</th>
                        </tr></tbody></table>
                        <div class="speed-slider">
                            <input id="speed-slider" type="text" data-slider-min="1" data-slider-max="1000" data-slider-step="0.01" data-slider-value="1000" data-slider-tooltip="hide" data-slider-reversed="true" data-slider-enabled="false" data-slider-scale="logarithmic"/> 
                        </div>
                    </div>
                    <hr />
                    <script type="text/javascript">
                        $('#speed-slider').slider();
                    </script>
                    <!-- //SPEED -->

                    <!-- LINK DISTANCE -->
                    <div class="config-item">
                        <table id="link-distance"><tbody><tr>
                            <th class="text-left min">min</th>
                            <th class="text-center">Link Distance</th>
                            <th class="text-right max">max</th>
                        </tr></tbody></table>
                        <div class="link-distance-slider">
                            <input id="link-distance-slider" type="text" data-slider-min="30" data-slider-max="1000" data-slider-step="0.01" data-slider-value="30" data-slider-tooltip="hide" data-slider-reversed="false" data-slider-enabled="false" data-slider-scale="logarithmic"/> 
                        </div>
                    </div>
                    <script type="text/javascript">
                        $('#link-distance-slider').slider();
                    </script>
                    <!-- //LINK DISTANCE -->
                </div>
                
                <!-- TIMELINE -->
                <div id="timeline" class="col-sm-12">
                    <div id="slider3" class="pull-left col-sm-9"></div>

                    <div class="btn-toolbar controls">
                        <button type="button" id="button_play" class="btn btn-lg">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </button>
                        <button type="button" id="button_pause" class="btn btn-lg">
                            <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
                        </button>
                        <button type="button" id="button_zoomFit" class="btn btn-lg">
                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
                <!-- //TIMELINE -->

                <!-- ERROR ALERT -->
                <div class="alert alert-danger alert-dismissable fade in" style="display: none;">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>Error! </strong><span id="error-message"></span>
                </div>
                <!-- //ERROR ALERT -->

            </div>
        </div>
        <!-- //Wrapper Graph Container -->

        <!-- Wrapper Settings -->
        <div class="item settings">
            <div class="container-fluid">
                <div class="col-sm-6" id="charts"></div>
                <div class="col-sm-6" id="wrapper-settings"></div>
            </div>
        </div>

    </div>
    <!-- //Wrapper for slides -->

</div>




</body>
</html>