<!-- This tempalte is a part of bottledash
author: sean engelhardt >sean.engelhardt@intevation.de
License: GNU GPL >= v2. See LICENSE for details. -->

<%

    import math
    from datetime import date

    #################
    # settings      #
    #################


    show_top_bar = settings["show_top_bar"]


    #################
    # date and time #
    #################


    today = date.today()
    weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag",
                "Freitag", "Samstag", "Sonntag")[today.weekday()]
    month_name = ("Januar", "Februar", "März", "Aprill", "Mai",
                    "Juni", "Juli", "August", "September", "Oktober",
                    "November", "Dezember")[today.month-1]

    number_of_rows = 2

    #################
    # viewport size #
    #################
    vp_size = "17px"
    #if len(tiles) <= 2:
    #    vp_size = "6vw"
    #elif len(tiles) >2 and len(tiles) <=4 :
    #    vp_size = "5vw"
    #elif len(tiles) >4 and len(tiles) <=6 :
    #    vp_size = "4vw"
    #elif len(tiles) >6 and len(tiles) <=8 :
    #    vp_size = "3vw"
    #end
%>

<script type="text/javascript">

    var global_width;
    var global_height;
    var tile_width;
    var tile_height;

    var tiles = document.getElementsByClassName("tile");
    var border_width = 1;
    var space_between_tiles = 8;

    var space_lr_borders;
    var space_lr_margin;

    function calc_tile_with(){
        var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}});
        var distance = (space_between_tiles*2) + (border_width*2);
        var tile_width = ((global_width / tiles_per_row ) - distance);
        return tile_width;
    }

    function calc_tile_height(){
        var distance = (space_between_tiles*2) + (border_width*2);
        var tile_height = ((global_height / {{number_of_rows}} ) - distance);
        return tile_height;
    }

    function resize_content(){
        global_width = document.getElementById("content").clientWidth;
        global_height = document.getElementById("content").clientHeight;


        tile_width = calc_tile_with();
        tile_height = calc_tile_height();

        for(var tile = 0; tile < tiles.length; tile++){
            tiles[tile].style.width= tile_width + 'px';
            tiles[tile].style.height= tile_height + 'px';
        }
    }

    window.onresize = function(){
        resize_content();
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        resize_content();
    });

</script>

<style>
    *{
        margin: 0 auto;
        padding: 0 auto;
        font-family: "Lucida Console", Monaco, monospace;
    }

    body {
        overflow: hidden;
    }

    #wrapper{
        background-color: #F2F2F2;
        color: black;
        min-width: 100%;
        min-height: 100%;
    }

    #topbar{
        min-width: auto;
        padding-left: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
        /*height: 5%;*/
        font-family: Arial, Helvetica, sans-serif;
    }

    #content{
        min-width: 100%;
        % if show_top_bar == "True":
            height: 95%;
        % else :
            height: 100%;
        %end
    }

    .tile{
        float: left;
        margin: 8px;
        background-color: #FFFFFF;
        border: 1px solid #999999;
        border: none;
        text-align:center;
        vertical-align: middle;
    }

    .clear{
        height: 0px;
        clear: both;
    }

    /*tiles types*/

    .statusmon{
        color: white;
        font-size: {{vp_size}};
    }

    .chart{
        font-size: {{vp_size}};
    }

    .active{
        border: 1px solid #00cc00;
        background-color: #009900;
    }

    .dead{
        border: 1px solid #cc0000;
        background-color: #990000;
    }

</style>

<div id = "wrapper">
    % if show_top_bar == "True" :
    <div id = "topbar">
        <b>{{weekday}}</b> {{today.day}}. {{month_name}}
    </div>
    % end

    <div id = "content">

        <%
            for tile in tiles :
            type = ""
            text = ""
            status = ""
            if tile["type"] == "mon" :
                type = "statusmon"
                text = tile["source"]
                if tile["status"] == "up" :
                    status = "active"
                elif tile["status"] == "down" :
                    status = "dead"
                end
            elif tile["type"] == "d3.js" :
                type = "chart"
                text = "place for a chart!"
            end
        %>
        <div class = "tile {{type}} {{status}}">
            {{text}}
        </div>

        % end

    </div>
</div>