[FEATURE] connecting to graph.json data

templates/explorer.html

@@ -68,6 +68,12 @@
                          </a>
                        </li>
 
+                        <li>
+                          <a>
+                            <div id="graphid" style="visibility: hidden;">/graph.json</div>
+                          </a>
+                        </li>
+
                       <!--
                       <li>
                          <a>
@@ -123,6 +129,8 @@
                      </a></li>
                   </ul>
 
+
+                  <!--
                   <ul id="colorGraph" class="nav navbar-nav navbar-right">
                      <li class="dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -137,6 +145,7 @@
                       </ul>
                      </li>
                   </ul>
+                  -->
 
 
 
@@ -173,7 +182,9 @@
 
           <div style="visibility: hidden;" id="sigma-othergraph"></div>
 
-          <img id="semLoader" style="position:absolute; top:50%; left:40%; width:80px;" src="{% static "js/libs/img2/loading-bar.gif" %}" ></img>
+          <div id="semLoader" style="position:absolute; top:50%; left:40%; width:80px; visibility: hidden;">
+            <img src="libs/img2/loading-bar.gif"></img>
+          </div>
 
           <ul id="ctlzoom">
 
@@ -185,12 +196,13 @@
                           <a href="#" id="aUnfold" class="rightarrow"></a>
                       </div>
                   </li> 
-
+                  <!--
                    <li>
                       <a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
                         <img title="World Map Distribution" width="34px" src="{% static "js/libs/img2/world.png" %}" ></img>
                       </a>
-                  </li> 
+                  </li>
+                  --> 
 
 
                    <li>
@@ -232,7 +244,27 @@
       <div id="leftcolumn">      
         <div id="tips"></div>
         <div id="names"></div>
-        <div id="opossiteNodes"></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="information"></div>
       </div>
@@ -338,6 +370,8 @@
     <script src="{% static "js/libs/jquery/jquery.mousewheel.min.js" %}" type="text/javascript"></script>
 
     <script type="text/javascript" src="{% static "js/libs/freshslider.1.0.js" %}"></script>
+    <script type="text/javascript" src="{% static "js/libs/readmore.js" %}"></script>
+    <script type="text/javascript" src="{% static "js/libs/jquery/jquery.easytabs.min.js" %}"></script>
     
     <script src="{% static "js/libs/bootstrap/js/bootstrap.min.js" %}"></script>
     <script src="{% static "js/libs/bootstrap/js/bootstrap-modal.js" %}" type="text/javascript"></script>