{% extends "base_generic.html" %}
{% block lefPanel %}{% include "leftMenuBar.html" %}{% endblock %}
{% block headMedia %}
{% load static %} 
<link rel="stylesheet" id="rangecalendar-style-css" href="{% static 'css/rangecalendar.css' %}" type="text/css" media="all">
<link rel="stylesheet" id="rangecalendar-style-css" href="{% static 'css/calendar-style.css' %}" type="text/css" media="all">
<link rel="stylesheet" id="rangecalendar-style-css" href="{% static 'css/audioplayer.css' %}" type="text/css" media="all">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
{% endblock %}

{% load humanize %}

{% block dash-title %}

		<b>{{publisher.name}}</b>


{% endblock %}


{% block dash %}

            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            {{publisher.name}}
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">

				<div id="audioCalendar"></div>
				<div id="audioDiv">
					<audio id="audioPlay" controls>
					</audio>
				</div>
                            <!-- /.table-responsive -->

                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->

{% endblock %}


{% block scripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>

<script type="text/javascript" src="{% static 'js/jquery.rangecalendar.js' %}"></script>

<script>
$(document).ready(function () {

    var emptyMonths = [
        {month: '01', year: '2016'},
        {month: '06', year: '2016'},
        {month: '09', year: '2016'},
        {month: '03', year: '2017'},
        {month: '07', year: '2017'},
        {month: '11', year: '2017'}
    ];

    var calendar = $("#audioCalendar").rangeCalendar({
	theme:"full-red-theme",
        lang: "es",
        startDate: moment(20160101, "YYYYMMDD"),
        endDate: moment(),
        start: "0",
        minRangeWidth: 1,
        maxRangeWidth: 1,
        maxTimeRangeWidth: 6,
        changeRangeCallback: rangeChanged,
        emptyMonths: [{}]

    });

    var today = new Date();

    calendar.setStartDate(today);

    function rangeChanged(target, range) {
        console.log(range);
    }
});
    </script>

{% endblock %}