{% extends "new/adminLTE2_base.html" %}
{% load static %}



{% block headMedia %}
<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">


{% endblock %}

{% block dash-title %}
	<b>{{publisher.name}}</b>
{% endblock %}

{% block dash %}
<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>
                        </div><!-- /.panel-body -->
		</div><!-- /.panel -->
	</div><!-- /.col-lg-12 -->
</div> <!-- /.row -->




{% endblock %}

<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>

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

	var calendar = $("#audioCalendar").rangeCalendar({
		theme:"full-red-theme",
        	changeRangeCallback: rangeChanged
    });
</script>



{% endblock %}