sean@3: <%
sean@3:     import math
sean@3:     break_tile_lines = math.ceil(len(tiles)/2)
sean@3:     tilecounter = 1
sean@3:     vp_size = 1;
sean@3: 
sean@3:     if len(tiles) <= 2:
sean@3:         vp_size = "6vw"
sean@3:     elif len(tiles) >2 and len(tiles) <=4 :
sean@3:         vp_size = "5vw"
sean@3:     elif len(tiles) >4 and len(tiles) <=6 :
sean@3:         vp_size = "4vw"
sean@3:     elif len(tiles) >6 and len(tiles) <=8 :
sean@3:         vp_size = "3vw"
sean@3:     end
sean@3: %>
sean@2: 
sean@2: <style>
sean@3:     *{
sean@3:         margin: 0 auto;
sean@3:         padding: 0 auto;
sean@3:     }
sean@3: 
sean@2:     #wrapper{
sean@3:         display: table;
sean@3:         color: black;
sean@3:         background-color: #F2F2F2;
sean@3:         min-width: 100%;
sean@3:         min-height: 100%;
sean@3:         border-spacing: 10px;
sean@2:     }
sean@2: 
sean@2:     .tile{
sean@3:         background-color: #FFFFFF;
sean@3:         display:table-cell;
sean@3: 
sean@3:         width: auto;
sean@3:         height: auto;
sean@3:         border: 1px solid #999999;
sean@3:         text-align:center;
sean@3:         vertical-align: middle;
sean@3: 
sean@3:         -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
sean@3:         -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
sean@3:         box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
sean@3: 
sean@3:     }
sean@3: 
sean@3:     .clear{
sean@3:         display: table-row;
sean@3:         clear: both;
sean@3:         margin: 0;
sean@3:         padding: 0;
sean@3:         height: 0;
sean@3:         overflow: hidden;
sean@3:     }
sean@3: 
sean@3:     .statusmon{
sean@3:         border: 1px solid #000000;
sean@2:         color: white;
sean@3:         font-size: {{vp_size}};
sean@3:         font-family: "Lucida Console", Monaco, monospace;
sean@3:     }
sean@3: 
sean@3:     .chart{
sean@3:         font-size: {{vp_size}};
sean@3:         font-family: "Lucida Console", Monaco, monospace;
sean@3:     }
sean@3: 
sean@3:     .active{
sean@3:         background-color: #009900;
sean@3:     }
sean@3: 
sean@3:     .dead{
sean@3:         background-color: #990000;
sean@2:     }
sean@2: 
sean@2: </style>
sean@2: 
sean@2: <div id = "wrapper">
sean@2: 
sean@3:     % for tile in tiles :
sean@3:         % type = ""
sean@3:         % text = ""
sean@3:         % status = ""
sean@3:         % if tile["type"] == "mon" :
sean@3:             % type = "statusmon"
sean@3:             % text = tile["source"]
sean@3:             % if tile["status"] == "up" :
sean@3:                 % status = "active"
sean@3:             % elif tile["status"] == "down" :
sean@3:                 % status = "dead"
sean@3:             % end
sean@3:         % elif tile["type"] == "d3.js" :
sean@3:             % type = "chart"
sean@3:             % text = "place for a chart!"
sean@3:         % end
sean@2: 
sean@3:         <div class = "tile {{type}} {{status}}">
sean@3:             {{text}}
sean@3:         </div>
sean@3: 
sean@3:         % if tilecounter == break_tile_lines:
sean@3:             <div class = "clear"></div>
sean@3:         % end
sean@3: 
sean@3:         % tilecounter += 1
sean@3:     % end
sean@2: 
sean@2: </div>