<!-- 

 Copyright (c) 2013 Big Switch Networks, Inc.

 Licensed under the Eclipse Public License, Version 1.0 (the
 "License"); you may not use this file except in compliance with the
 License. You may obtain a copy of the License at

      http://www.eclipse.org/legal/epl-v10.html

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
 implied. See the License for the specific language governing
 permissions and limitations under the License.

 Web UI home

-->

{% extends "base.html" %}
{% block content %}

		<div id="skip-link">
		</div>
		<div id="page">
			<header id="header" role="banner">
			<div class="page-width"><div class="page-width-inner clearfix">
					<div id="site-logo" style="margin: 15px; display: table;">
						<div style="float: left; width: 100%;">
							<img src="static/images/logo_opendaylight.png" border="0" style="margin: 0px; padding: 5px;">
						</div>
						<div style="float: left;">
							<span class="title header-processed" id="page-title" style="color: #3f3f40; font-family: sans-serif, Arial Unicode MS, Arial; font-weight: 100; font-size: 40px; margin-bottom: 0px; margin-top: 0px; height: 40px; display: table-cell; vertical-align: middle; width: 100%; position: static; padding-left: 30px;">SDN Controller Platform Dashboard</span>
						</div>
					</div>
					<div id="tagline">
						<div class="region region-tagline">
							<div id="block-block-9" class="block block-block first last odd">
								<div class="block-content clearfix">
								</div>
							</div>
						</div>
					</div>

			</div></div>
			</header>
			<div id="main" class="clearfix">
				<div class="page-width"><div class="page-width-inner clearfix" style="margin:50px; margin-top: 0px;">
						<a id="main-content"></a> 
						<div id="tabs">
							<ul>
								<li><a href="#tabs-1">Switches</a></li>
								<li><a href="#tabs-2">Inter-Switch Links</a></li>
								<li><a href="#tabs-3">Hosts</a></li>
								<li><a href="#tabs-4">Tunnels</a></li>
								<li><a href="#tabs-5">Topology</a></li>
								<span class="refresh" onClick="refreshTable(99);" style="float: right; padding: .6em; position: relative; z-index:1;"><img src="images/refresh.png" border="0"></span>
							</ul>
							<div id="tabs-1">
								<div id="switchTableHolder" class="dynamictable">
								</div>
							</div>
							<div style="clear: both;"></div>
							<div id="tabs-2">
								<div id="linkTableHolder" class="dynamictable">
								</div>
							</div>
							<div style="clear: both;"></div>
							<div id="tabs-3">
								<div id="deviceTableHolder" class="dynamictable">
								</div>
							</div>
							<div id="tabs-4">
								<div id="tunnelTableHolder" class="dynamictable">
								</div>
							</div>
							<div style="clear: both;"></div>
							<div id="tabs-5">
								<div id="TopologyTableHolder" class="dynamictable" style="border: 1px #e5e5e5;">
									<div id="container">
										<div id="center-container" style="background-color: #e5e5e5; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;">
											<div id="infovis"></div>    
										</div>
										<div id="log" style="display: none;"></div>
									</div>
								</div>
								<div style="text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines;">

									<div style="width: 100%; display: inline-block"></div>

								</div>

								<div style="clear: both;"></div>

							</div>

							<!-- Main content inner-->

						</div>
				</div></div>
				<footer id="footer" role="contentinfo">
				<div class="page-width"><div class="page-width-inner clearfix">  <div class="region region-footer">
							<div id="block-p6-helper-footer" class="block block-p6-helper first last odd">


								<div class="block-content clearfix">
									<span id="ui-footer-statement" style="font-family: Helvetica, Arial, sans-serif; font-size: 11px; padding-left: 45;"><center>&nbsp; &#169;2013 OpenDaylight, A Linux Foundation Collaborative Project. All Rights Reserved.</center></span>  </div>
							</div>
						</div>
				</div></div>
				</footer>

				<div id="dumpingground" style="display: none;"></div> 


				<!-- /#page -->
                <script src="static/js/thirdparty/jit.js"></script>
                <script src="static/js/thirdparty/jquery-1.9.1.min.js"></script>  
                <script src="static/js/thirdparty/jquery-ui-1.10.2.custom.min.js"></script>
				<script type="text/javascript">

					$(document).ready(function(){
							refreshTable(99);
							});
$(function() {
		$( "#tabs" ).tabs({
activate: function( event, ui ) { refreshTable(ui.newTab.id); }
});
		// Hover states on the static widgets
		$( "#dialog-link, #icons li" ).hover(
			function() {
			$( this ).addClass( "ui-state-hover" );
			},
			function() {
			$( this ).removeClass( "ui-state-hover" );
			}
			);
		});


function refreshTable(choice){
	switch(choice) {
		case 0:
			$('#switchTableHolder').load('ui/show_switch');
			break;
		case 1:
			$('#linkTableHolder').load('ui/show_link');
			break;
		case 2:
			$('#deviceTableHolder').load('ui/show_host');
			break;
		case 3:
			$('#tunnelTableHolder').load('ui/show_tunnel');
			break;
		case 4:
			var tmpJSON = loadTopologyJSON();
			fd.loadJSON(tmpJSON);
			fd.refresh();
			break;
		default:
			$('#switchTableHolder').load('ui/show_switch');
			$('#linkTableHolder').load('ui/show_link');
			$('#deviceTableHolder').load('ui/show_host');
			$('#tunnelTableHolder').load('ui/show_tunnel');
			var tmpJSON = loadTopologyJSON();
			fd.loadJSON(tmpJSON);
			fd.refresh();
			break;
	}
	//setTimeout(refreshTable, 5000);
}
    function loadTopologyJSON(){
        var request = new XMLHttpRequest( );
        request.open("GET", "ui/build_topology", false);
        request.send(null);
        var jsonFILE = request.response;
        eval(jsonFILE);
        return(json);
    }
    </script>
<script language="javascript" type="text/javascript" src="static/js/topology.js"></script>

{% endblock %}