{% extends "base.html" %}

{% load staticfiles %}

{% block title %}
Inicio
{% endblock %}

{% block content %}
<div class="row-fluid">
    <div class="dgtic-panel">
        <div class="dgtic-panel-header">
            <span class="dgtic-panel-title">
                <i class="icon-home"></i>
                Principal
            </span>
        </div>
        <div class="demo-container">
			<div id="placeholder" class="demo-placeholder"></div>
		</div>
        <div class="dgtic-panel-content with-padding">
            <div id="dgtic-ex-calendar-gcal"></div>
        </div>
        <div class="dgtic-panel-content no-padding">
            <div id="dgtic-ex-plupload"></div>
        </div>

    </div>
</div>

{% endblock %}

{% block extrajs %}
    <script>
    $(function() {
        console.log(navigator.userAgent);
        if (navigator.userAgent.indexOf('MSIE') !=-1 || navigator.userAgent.indexOf('Trident') !=-1) {
            alert('Para mejorar su experiencia de usuario, por favor use el navegador Google Chrome.');
            $(location).attr('href', 'http://www.google.com.mx/chrome/');
        }{% comment %} else if (navigator.userAgent.indexOf('Firefox') !=-1) {
            alert('está usando Firefox ... Vamos por Chrome');
            $(location).attr('href', 'http://www.google.com.mx/chrome/');
        }{% endcomment %}

		// We use an inline data source in the example, usually data would
		// be fetched from a server

		var data = [],
			totalPoints = 300;

		function getRandomData() {

			if (data.length > 0)
				data = data.slice(1);

			// Do a random walk

			while (data.length < totalPoints) {

				var prev = data.length > 0 ? data[data.length - 1] : 50,
					y = prev + Math.random() * 10 - 5;

				if (y < 0) {
					y = 0;
				} else if (y > 100) {
					y = 100;
				}

				data.push(y);
			}

			// Zip the generated y values with the x values

			var res = [];
			for (var i = 0; i < data.length; ++i) {
				res.push([i, data[i]])
			}

			return res;
		}

		// Set up the control widget

		var updateInterval = 30;
		$("#updateInterval").val(updateInterval).change(function () {
			var v = $(this).val();
			if (v && !isNaN(+v)) {
				updateInterval = +v;
				if (updateInterval < 1) {
					updateInterval = 1;
				} else if (updateInterval > 2000) {
					updateInterval = 2000;
				}
				$(this).val("" + updateInterval);
			}
		});

		var plot = $.plot("#placeholder", [ getRandomData() ], {
			series: {
				shadowSize: 0	// Drawing is faster without shadows
			},
			yaxis: {
				min: 0,
				max: 100
			},
			xaxis: {
				show: false
			}
		});

		function update() {

			plot.setData([getRandomData()]);

			// Since the axes don't change, we don't need to call plot.setupGrid()

			plot.draw();
			setTimeout(update, updateInterval);
		}

		update();


	});

	</script>
{% endblock %}
{% block jqueryui %}
    <script type="text/javascript" src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %}">
    <script type="text/javascript" src="{% static "assets/jui/datepicker.es.js" %}"></script>
    <script type="text/javascript" src="{% static "assets/jui/js/globalize/globalize.js" %}"></script>
{#     <script type="text/javascript" src="{% static "assets/js/demo/demo.calendar.js" %}"></script>#}
{% endblock %}