<!DOCTYPE html>
<html>
    <head>
        <title>Calendar of the Minari</title>
        <meta charset="utf-8">
        <meta name="author" content="Gergely Polonkai">

        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/minari.css" />

        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/minari.js"></script>
        <script type="text/javascript">
            var year;
            var inputActive = false;

            var today = new Date();
            today.setDate(today.getDate() + 11);
            var year, thisYear;
            year = thisYear = Number(today.getFullYear() - 1873);
            var todayId = '#day--';
            var base_title = document.title;

            $(document).ready(function() {
                setYear();

                $(document).click(function() {
                    if (inputActive) {
                        inputActive = false;
                        $('.year').html('<span id="year">' + year + '</span>');
                        $('#year').click(yearClick);
                    }
                });

                $('.prevYear').click(function() {
                    setYear(year - 1);
                });

                $('.nextYear').click(function() {
                    setYear(year + 1);
                });

                $('.day,.holiday').popover({
                    trigger: 'hover',
                    placement: 'top',
                    html: true,
                    content: getPopoverContent,
                    container: 'body'
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="year"><span id="year">...</span></div>
            <nav>
                <ul class="pager">
                    <li class="previous">
                        <a href="#" class="prevYear">
                            <span aria-hidden="true">&larr;</span>
                        </a>
                    </li>
                    <li class="next">
                        <a href="#" class="nextYear">
                            <span aria-hidden="true">&rarr;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="holiday" id="day-0-1">Hëður</div>
            <div class="row">
                <div class="month col-md-4 col-sm-1" data-month="1"></div>
                <div class="month col-md-4 col-sm-1" data-month="2"></div>
                <div class="month col-md-4 col-sm-1" data-month="3"></div>
            </div>
            <div class="holiday" id="day-0-2">Rideyy</div>
            <div class="row">
                <div class="month col-md-4 col-sm-1" data-month="4"></div>
                <div class="month col-md-4 col-sm-1" data-month="5"></div>
                <div class="month col-md-4 col-sm-1" data-month="6"></div>
            </div>
            <div class="holiday" id="day-0-3">Morkh</div>
            <div class="row">
                <div class="month col-md-4 col-sm-1" data-month="7"></div>
                <div class="month col-md-4 col-sm-1" data-month="8"></div>
                <div class="month col-md-4 col-sm-1" data-month="9"></div>
            </div>
            <div class="holiday" id="day-0-4">Khmerd</div>
            <div class="row">
                <div class="month col-md-4 col-sm-1" data-month="10"></div>
                <div class="month col-md-4 col-sm-1" data-month="11"></div>
                <div class="month col-md-4 col-sm-1" data-month="12"></div>
            </div>
            <div class="holiday" id="day-0-5">Chamog</div>
            <nav>
                <ul class="pager">
                    <li class="previous">
                        <a href="#" class="prevYear">
                            <span aria-hidden="true">&larr;</span>
                        </a>
                    </li>
                    <li class="next">
                        <a href="#" class="nextYear">
                            <span aria-hidden="true">&rarr;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <script>
            $('#year').click(yearClick);

            $('div.month').each(function() {
                genMonthTable(this);
            });

            $('div .holiday').each(function() {
                updateHoliday(this);
            });
        </script>
    </body>
</html>