{% 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>
function getAudioList(publisher, startdate, enddate)
{
        url = "/catalog/ws/playlist/?startdate="+startdate+"&enddate="+enddate+"&publisher="+publisher;     
	console.log(url);
	var xmlhttp;	
	if (window.XMLHttpRequest)
	{//IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
//			document.getElementById("topics").innerHTML=xmlhttp.responseText;

			var jsonObj = JSON.parse(xmlhttp.responseText);
			console.log(jsonObj);
			var audioDiv = document.getElementById("audioDiv");
			audioDiv.appendChild(document.createElement("audio"));
		}
	}
	xmlhttp.open("GET", url ,true);
	xmlhttp.send();
};
$(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: emptyMonths
    });

    var today = new Date();

    calendar.setStartDate(today);

    function rangeChanged(target, range) {
        console.log(range);
	//var audioDiv = document.getElementById("audioDiv");
//	while (audioDiv.firstChild)
//		audioDiv.removeChild(audioDiv.firstChild);

//	var sound      = document.createElement('audio');
//	sound.id       = 'audio-player';
//	sound.controls = 'controls';
//	sound.src      = 'media/Blue Browne.mp3';
//	sound.type     = 'audio/mpeg';
//	audioDiv.appendChild(sound);

	getAudioList("{{publisher.shortName}}",range.start,range.end);
    }
});
    </script>

{% endblock %}

