<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Arhs - AtlasBoard</title>
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="third-party/rickshaw/1.5/rickshaw.min.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="third-party/ducksboard/jquery.gridster-0.5.6.min.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="stylesheets/normalize.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="stylesheets/helpers.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="stylesheets/application.css" type="text/css" media="screen" />

    <link rel="icon" type="image/png" href="images/favicon.png"/>
</head>
<body>

    <div id="disconnected">DISCONNECTED</div>
    <% if (dashboardConfig.title) { %>
        <h1><%= dashboardConfig.title %></h1>
    <% } %>

    <script>
        var grid_columns = <%=(dashboardConfig.layout.gridSize && dashboardConfig.layout.gridSize.columns || 6) %>;
        var grid_rows = <%=(dashboardConfig.layout.gridSize && dashboardConfig.layout.gridSize.rows || 4) %>;
    </script>

    <div id="main-container">
        <div id="widgets-container" class="gridster">
            <ul>
                <% dashboardConfig.layout.widgets.forEach(function (widget) { %>
                    <li class="gs-w" data-row="<%= widget.row %>" data-col="<%= widget.col %>" data-sizex="<%= widget.width %>"
                        data-sizey="<%= widget.height %>" data-widget-id="<%= widget.widget %>"
                        data-event-id="<%=(dashboardName + "_" + widget.config + "_" + widget.widget + "_" +  widget.job) %>">

                    </li>
                <% }) %>
            </ul>
        </div>
    </div>

    <div class="easy-modal" style="display:none">
        <h3>This modal has no inner div</h3>
        <img src="http://placehold.it/600x400" alt="">
    </div>

    <script src="third-party/jquery/jquery-1.8.3.min.js"></script>
    <script src="third-party/underscore/underscore-1.4.4.min.js"></script>
    <script src="third-party/ducksboard/jquery.gridster-0.5.6.min.js"></script>
    <script src="third-party/d3/d3.v2.js"></script>
    <script src="third-party/rickshaw/1.5/rickshaw.min.js"></script>
    <script src="third-party/spinjs/spin.min.js"></script>
    <script src="third-party/easymodal/jquery.easyModal.js"></script>

    <script src="socket.io/socket.io.js"></script>

    <script src="javascripts/console-helper.js"></script>
    
    <script src="<%=dashboardName%>/js"></script>
    <script src="javascripts/application.js"></script>
</body>
</html>
