{% extends "pages/menu.html" %}

{% load staticfiles %}


{% block css %}

    <link rel="stylesheet" href="{% static "lib/jquery/1.11.2/jquery-ui.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "lib/graphExplorer/libs/css2/freshslider.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "lib/graphExplorer/libs/css2/custom.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "lib/graphExplorer/libs/css2/sidebar.css" %}" media="screen">

    <style>

      #topPapers{
          margin: 7px;
          padding: 5px 0px 5px 5px;
      }
      #topPapers ul {
        list-style-type: none;
      }

      #ctlzoom {
          position: absolute;
          left: 1%;
          width: 7%;
          bottom: auto;
          list-style: none;
          padding: 0;
          margin-top: 1em;
      }

      #category0 ul li { margin: 0 12px 12px 0; }
      #category1 ul li { margin: 0 12px 12px 0; }

      /* will be adjusted later to match rendered height of dafixedtop from menu template */
      #topspace {
          height: 90px;
      }

    </style>
    <!--
    <link rel="stylesheet" href="{% static "lib/graphExplorer/libs/bootswatch/css/bootswatch.css" %}">
    <link rel="stylesheet" href="{% static "lib/graphExplorer/libs/css2/font.css" %}" type="text/css">
    -->
  </head>

{% endblock %}



{% block content %}

    <!-- this is a vertical spacer used to start everything below dafixedtop -->
    <div id="topspace">
    </div>

    <!-- this is the tweakbar -->
    <div class="container-fluid navbar-default">
      <div id="defaultop" class="row">
            <div id="left" class="col-sm-8 col-md-8 col-lg-7">

              <ul class="nav navbar-nav">
                <!--
                <li>
                   <a>
                    <select id="aselector" onchange="console.log('salut monde')" class="selectpicker"  data-style="btn btn-success btn-sm"  data-width="auto">
                      <option value="Document" selected>Scholars</option>
                      <option value="NGram">Keywords</option>
                    </select>
                   </a>
                </li>
                -->
                <li class='basicitem'><a>
                    <button type="button" id="changetype" class="btn btn-success btn-sm">Change Type</button>
                </a></li>

                <!-- <li class='basicitem'><a>
                    <button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
                </a></li> -->

                <!-- TODO fix: category0 -> category1 switching -->
                <li  id="filter_graph" class='basicitem help'><a>
                  <!-- Create a subgraph -->
                  <ul id="category0" class="nav">
                        <li><small>Nodes</small> <div id="slidercat0nodesweight" class="settingslider"></div></li>
                        <li><small>Edges</small> <div id="slidercat0edgesweight" class="settingslider"></div></li>
                  </ul>
                </a></li>
                

                <!-- <li class='basicitem'><a>
                  Compare<br>
                    <img width="30" title="Compare with other corpus!" onclick="GetUserPortfolio(); $('#corpuses').modal('show');" src="{% static "img/INTER.png" %}"></img>
                </a></li> -->

                <li class='basicitem'><a>
                  <!-- TODO fix: category0 -> category1 switching -->
                  Label size<br>
                  <div id="slidercat0nodessize" class="settingslider"></div>
                </a></li>

                 <li class='basicitem'><a>
                   Colors<br>
                   <div class="colorgraph_div"></div>
                 </a></li>

                 <li class='basicitem'><a>
                   Sizes<br>
                   <div class="sizegraph_div"></div>
                 </a></li>

                 <li class='basicitem'><a>
                   Selector size<br>
                   <div id="unranged-value" class="settingslider"></div>
                 </a></li>
                <!--
                <li>
                   <a>
                    <button type="button" onclick="partialGraph.stopForceAtlas2();" class="btn btn-sm">wu</button>
                   </a>
                </li>
                -->

              </ul>
            </div><!-- /div#left -->

            <div id="right" class="col-sm-3 col-md-3 col-lg-4">

                   <div class='row' id="searchnav">
                     <div class="col-sm-1 col-md-1 col-lg-1" style="font-size:75%; line-height:90%; padding:0">
                             <input id="checkboxdiv"  onclick="alertCheckBox(this);"
                                     title="Add next search results to current selection"
                                     class="btn btn-info"
                                     type="checkbox"></input>
                             Add
                     </div>

                       <!-- the smaller the viewport, the larger the relative search box size -->
                     <div class="col-sm-11 col-md-11 col-lg-11" >
                       <div id="search_input_group" class="input-group input-group-sm">
                          <span class="input-group-btn">
                            <button id="searchbutton"
                                    title="Search the topic in the map"
                                    class="btn btn-info"
                                    type="button">
                              <span class="glyphicon glyphicon-search">
                              </span>
                            </button>
                          </span>

                          <!-- ########## THE SEARCH BAR ########## -->

                          <input id="searchinput"
                                  type="text"
                                  class="form-control"
                                  placeholder="Search" />
                          <!-- #################################### -->
                       </div>
                       <!-- messages below the search bar -->
                       <div id="unused_msg"></div>

                    </div>
                </div>

            <!--
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
            -->
            </div>

      </div><!-- /.row#defaultop -->
    </div><!-- /.container.fluid -->

      <div id="graphid" style="display:none">{{graphurl}}</div>
      <input type="hidden" id="maplist_id" value="{{ maplist_id }}"></input>
      <div id="jquerytemplatenb" style="display:none">{{user.id}}</div>


    <div id="wrapper">


      <div id="zonecentre">


          <!-- Page content -->
          <div id="sigma-example"></div>

          <div style="visibility: hidden;" id="sigma-othergraph"></div>

          <img id="semLoader" style="position:absolute; top:50%; left:40%; width:80px;" src="{% static "img/loading-bar.gif" %}"></img>

          <ul id="ctlzoom">

                <!-- <div class="content-header">
                        <button id="menu-toggle">X</button>
                </div> -->

                  <!--
                   <li>
                      <a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
                        <img title="World Map Distribution" width="34px" src="{% static "img/world.png" %}" ></img>
                      </a>
                  </li>
                  -->

                  <li>
                    <a href="#" id="edgesButton"> </a>
                  </li>

                  <li>
                      <a href="#" id="lensButton"> </a>
                  </li>

                  <li>
                      <a href="#" id="zoomPlusButton" title="S'approcher"> </a>
                  </li>

                  <li id="zoomSliderzone">
                      <div id="zoomSlider"></div>
                  </li>

                  <li>
                      <a href="#" id="zoomMinusButton" title="S'éloigner"> </a>
                  </li>

                  <li>
                     <a href="#" id="snapicon" onclick="saveGraphIMG();" >
                       <img title="Take a photo!" width="34px" src="{% static "img/camera.png" %}" ></img>
                     </a>
                 </li>

                  <li>
                     <a href="#" id="saveAs">
                       <img width="30px" title="Save As..." src="{% static "img/save.png" %}" ></img>
                     </a>
                 </li>

          </ul>
      </div>

      <!-- Sidebar -->
      <div id="sidecolumn">
         <div id="unfold">
             <!-- button to be replaced by handle when sidecolumn is hidden -->
             <a href="#" id="aUnfold" class="rightarrow"></a>
         </div>
        <div id="tips"></div>
        <div id="names"></div>
        <div id="ngrams_actions"></div>


        <br>
        <div id="tab-container" class='tab-container' style="display: none;">

           <ul class='etabs'>
             <li id="taboppos" class='tab'><a href="#tabs1">Opposite-Neighbors</a></li>
             <li id="tabneigh" class='tab'><a href="#tabs2">Neighbors</a></li>
           </ul>

           <div class='panel-container'>
              <div id="tabs1">
                <div id="opossiteNodes"></div>
              </div>
              <div id="tabs2">
                <div id="sameNodes"></div>
              </div>
           </div>

        </div>

        <!-- <div id="topPapers"></div> -->

        <div id="tab-container-top" class='tab-container' style="display: none;">

           <ul class='etabs'>
             <li id="tabmed" class='tab active'><a id="pubs-legend" href="#tabs3">Pubs</a></li>
             <li id="tabgps" class='tab'><a href="#tabs3"></a></li>
           </ul>

           <div class='panel-container'>
              <div id="tabs3">
                <div id="topPapers"></div>
              </div>
              <div id="tabs4">
                <div id="topProposals"></div>
              </div>
           </div>
        </div>





        <div id="information"></div>
      </div>
    </div>



    <div id="savemodal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">


          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Exporting GEXF file</h4>
          </div>

          <div class="modal-body form-horizontal">
            What do you want to save?:
            <div class="form-group">
              <label class="col-lg-2 control-label"> </label>
              <div class="col-lg-10">
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="fullgraph" value="option1" checked="true">
                    Full Graph
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="visgraph" value="option2">
                    Visible Graph
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div class="modal-body form-horizontal">
            Which attributes do you want to keep?:
            <div class="form-group">
              <label class="col-lg-2 control-label"> </label>
              <div class="col-lg-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="optionsRadios" id="check_size" value="option1">
                    Size
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="optionsRadios" id="check_color" value="option2">
                    Color
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button id="closesavemodal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="saveGraph();">Save to local file</button>
            <button type="button" class="btn btn-primary" onclick="saveInServer();">Save to cloud</button>
          </div>
          <div class="modal-footer" id="savemsg"></div>

        </div>
      </div>
    </div>

    <div id="msgmodal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 id="msgtitle" class="modal-title">
                Graph generation message
            </h4>
          </div>

          <div class="modal-body form-horizontal">
            <div id="msgcontent"></div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
          </div>

        </div>
      </div>
    </div>

    <div id="corpuses" class="modal fade">


      <div class="modal-dialog">
        <div class="modal-content">


          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 class="modal-title">
                <span class="glyphicon glyphicon-transfer" aria-hidden="true"></span>
                Corpus Comparison Tool
            </h3>
          </div>



          <div class="modal-body form-horizontal">
            <h4>
                <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
                Choose one corpus among your projects:
            </h4>
            <div style="color:red;" id="selected_corpus"></div>
            <div id="user_portfolio">

            </div>


          <div class="modal-footer">

              <button id="closecorpuses" type="button" class="btn btn-default" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>
                 Close
            </button>

            <button id="add_corpus_tab" type="button" class="btn btn-primary" disabled onclick='printCorpuses();'>
                <span class="glyphicon glyphicon-ok" aria-hidden="true" ></span>
                Compare
            </button>
          </div>

        </div>
      </div>
    </div>


    <div id="modalloader" class="modal fade">
        <div id="loader" class="loader">
            <img src="{% static "img/ajax-loader.gif" %}" ></img>
        </div>
        <div id="closeloader" data-dismiss="modal"></div>
    </div>


    <script src="{% static "lib/jquery/1.11.1/jquery.min.js" %}" type="text/javascript"></script>
    <script src="{% static "lib/jquery/1.11.2/jquery-ui.js" %}" type="text/javascript"></script>

    <script src="{% static "lib/graphExplorer/libs/jquery/jquery.ba-dotimeout.min.js" %}" type="text/javascript"></script>
    <script src="{% static "lib/graphExplorer/libs/jquery/jquery.mousewheel.min.js" %}" type="text/javascript"></script>

    <script type="text/javascript" src="{% static "lib/graphExplorer/libs/freshslider.1.0.js" %}"></script>
    <script type="text/javascript" src="{% static "lib/graphExplorer/libs/readmore.js" %}"></script>
    <script type="text/javascript" src="{% static "lib/graphExplorer/libs/jquery/jquery.easytabs.min.js" %}"></script>


    <script src="{% static "lib/graphExplorer/libs/bootstrap/js/bootstrap-modal.js" %}" type="text/javascript"></script>
    <script src="{% static "lib/graphExplorer/libs/bootstrap/js/bootstrap-hover-dropdown.min.js" %}" type="text/javascript"></script>


    <script src="{% static "lib/graphExplorer/tinawebJS/globalUtils.js" %}" type="text/javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/plugins/jLouvain.js" %}" type="text/javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/sigma.min.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/sigma.forceatlas2.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/settings_explorerjs.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/sigma.parseCustom.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/extras_explorerjs.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/sigmaUtils.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/methods.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/minimap.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/enviroment.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/asyncFA2.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/Tinaweb.js" %}" type="text/javascript" language="javascript"></script>
    <script src="{% static "lib/graphExplorer/tinawebJS/main.js" %}" type="text/javascript" language="javascript"></script>

    <script type="text/javascript">
        // set exact height of topspace
        var dafixedtopHeight = $('#dafixedtop').height() ;
        $('#topspace').height(dafixedtopHeight) ;


      function newPopup(url) {
        popupWindow = window.open(
          url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no')
      }
      $('#tab-container').easytabs({updateHash:false});
      // $('#tab-container-top').easytabs({updateHash:false});

      function saveInServer() {
          // send an ajax GET to server API with same params as in URL
          var currentPath = window.location.pathname + window.location.search.replace(/#$/,'')

          console.warn("currentPath", currentPath)

          // current path shows it's already in db
          if (currentPath.match(/\explorer\?cooc_id=[0-9]+$/)) {
              var supposedLink = 'http://'+window.location.host+'/api'+currentPath
              $('#savemsg').html(
                  'Your graph has its own "cooc_id" so it must be already saved in the cloud at:'
                  +'<a href='+supposedLink+'>'+supposedLink+'</a>'
              )
          }
          // current path has normal params (field1 field2, etc.)
          else {
              $('#savemsg').html(
                  'Saving in server...'
              )
              var apiPath = 'http://'+window.location.host+'/api'+currentPath+'&saveOnly=True'
              $.ajax({
                   url: apiPath ,
                   type: 'GET',
                   success: function(response) {
                       // the return message
                       $('#savemsg').html(response.msg.replace(/\n/g, '<br/>'))
                       },
                    error: function(result) {
                        $('#savemsg').html('Saving failed !')
                        console.warn('saveInServer problem:', result);
                       },
                  });
          }
      }
    </script>



{% endblock %}