{% extends "univcloud/base.html" %}
{% load i18n %}
{% load url from future %}

{% block extrascripts %}
  <script src="{{ STATIC_URL }}js/jquery.gridster.min.js"></script>
  <script src="{{ STATIC_URL }}js/jquery.simpleWeather.js"></script>
  <script src="{{ STATIC_URL }}js/jquery.zrssfeed.js"></script>
  <script src="{{ STATIC_URL }}js/jquery.clock.js"></script>
  <script src="{{ STATIC_URL }}js/jquery.simple-color.js"></script>
  <script src="{{ STATIC_URL }}js/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/jquery.gridster.css">
  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/analog.css">
{% endblock %}

{% block page-title %}
Univcloud
{% endblock %}

{% block content %}
<div class="gridster">
<ul>
{% for app in apps %}
<li data-row="{{ app.row }}" data-col="{{ app.col }}"
    data-sizex="{{ app.sizex }}" data-sizey="{{ app.sizey }}"
    class="{% if app.scroll %}scroll {% endif %}"
    {% if app.background_color %}style="background-color: {{app.background_color}}; border-color: {{app.background_color}};"{% endif %}>
  <span class="color">o</span>
  <span class="close">×</span>
  {{ app.content }}
</li>
{% endfor %}

</ul>
</div>

<div id="iframes">
</div>

<div id="dialog-color" title="Couleur" style="display: none">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
  <input class='simple_color' value='#cc3333'/>
</div>



<script>
$(function(){ //DOM Ready
var gridster = $(".gridster ul").gridster({
  widget_margins: [10, 10],
  widget_base_dimensions: [140, 140],
  min_cols: 5,
  serialize_params: function($w, wgd) {
    return {
      x: wgd.col,
      y: wgd.row,
      id: $($w).find('div').attr('id'),
    };
  },
  draggable: {
    stop: function(event, ui) {
      oWidgets = this.serialize_changed();
      $.ajax('dragstop', {
        data: {'T': JSON.stringify(oWidgets)},
      });
    }
  }
}).data('gridster');

$('#portal').click(function() {
  $('div.gridster').show('blind', {duration: 800});
  $('.iframe').hide();
  $('#portal').hide('fade');
  return false;
});

$('.close').click(function() {
  window.location = window.location + 'remove/' + $(this).next().attr('id');
});

$('.simple_color').simpleColor();

$('.color').click(function() {
  console.log('parent:', $(this).parent());
  var app_id = $(this).next().next().attr('id');
  var li = $(this).parent();

  $('#dialog-color').dialog({
        resizable: false,
        height: 300,
        width: 370,
        modal: true,
        buttons: {
          "Sélectionner": function() {
            $(li).css('background-color', $('.simple_color').val()).css('border-color', $('.simple_color').val());
            $.ajax('color/' + app_id, {data: {'bg': $('.simple_color').val()}});
            $( this ).dialog( "close" );
          },
          "Annuler": function() {
            $( this ).dialog( "close" );
          }
        }
      });

});

});
</script>

{% endblock %}