{% extends "admin/common/iframe_wrap.html" %}

{% block stylesheet %}

<link type="text/css" rel="stylesheet" href="/include/minify/f=include/jslibs/jquery-ui-1.8.12/css/ui-lightness/jquery-ui-1.8.12.custom.css" >
<style>
  body{
    overflow:auto;
  }
</style>
{% endblock %}
{% block javascript %}
<script type="text/javascript" src="/include/minify/f=include/jslibs/jquery-1.7.1.js,include/path_files_tests.jquery.js"></script>
<script type="text/javascript" src="/include/jslibs/jquery-ui-1.8.12/js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.path_testable').path_file_test();
    $('.url_testable').url_test();
    $('.tabs').tabs({
      show:function(event, ui){
        $('.path_testable:visible, .url_testable:visible').trigger('keyup');
      }
    });
  });

  function select_mediatype(name, selector)
  {
    $('.'+name).hide();
    $('#box'+name+$(selector).val()).show();
  }
  $(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    var name = $( "#name" ), accessclass = $( "#accessclass" ),
    allFields = $( [] ).add( name ).add(accessclass),
    tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
      .text( t )
      .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );

        return false;
      } else {
        return true;
      }
    }

    function get_current_group()
    {
      return $('.ui-tabs-nav .ui-state-active a').html();
    }

    function checkPresence( o ) {

      var el = $('input[name=subdefs[]][value='+get_current_group()+'_'+o.val()+']');
      if ( el.length !== 0 ) {
        o.addClass( "ui-state-error" );
        updateTips( "SubdefName should be unique per group" );

        return false;
      } else {
        return true;
      }
    }

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 250,
      width: 350,
      modal: true,
      buttons: {
        "Create a Subdef": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( name, "subdef name", 3, 16 );

          bValid = bValid && checkPresence( name );

          if ( bValid ) {
            $('input[name="add_subdef[group]"]').val(get_current_group());
            $('input[name="add_subdef[name]"]').val(name.val());
            $('input[name="add_subdef[class]"]').val(accessclass.val());
            $( this ).dialog( "close" );
            $('form.subdefs').submit();
          }
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

    $( "#create-subdef" )
    .button()
    .click(function() {
      $( "#dialog-form" ).dialog( "open" );
    });

    $('.subdef_deleter')
    .button()
    .click(function(){
      delete_subdef($(this).next('input[name="subdef"]').val());

      return false;
    });

    function delete_subdef(name)
    {
      $( "#dialog-delete-subdef" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
          "Delete subdef": function() {
            $('#delete_subdef').val(name);
            $( this ).dialog( "destroy" );
            $('form.subdefs').submit();
          },
          Cancel: function() {
            $( this ).dialog( "destroy" );
          }
        }
      });
    }

  });


</script>
{% endblock %}

{% block content %}
<button id="create-subdef">{% trans 'Create new subdef' %}</button>
<div id="dialog-delete-subdef" title="{% trans 'Delete the subdef ?' %}" style="display:none;">
    <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    {% trans 'These subdef will be permanently deleted and cannot be recovered. Are you sure?' %}
  </p>
</div>

<div id="dialog-form" title="Create new subdef">
  <p class="validateTips"></p>
  <form>
    <fieldset>
      <label for="name">{% trans 'Subdef name' %}</label>
      <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><br/>
      <label for="accessclass">{% trans 'classe d\'acces' %}</label>
      <select name="accessclass" id="accessclass">
        <option value="document">{% trans 'document' %}</option>
        <option value="preview" selected="selected">{% trans 'preview' %}</option>
        <option value="thumbnail">{% trans 'tout le monde' %}</option>
      </select>
    </fieldset>
  </form>
</div>

<form method="post" action="/admin/subdefs/{{ databox.get_sbas_id }}/" target="_self" class="subdefs">
  <div class="tabs">
    <ul>
      {% for subdefgroup, subdeflist in subdefs %}
      <li><a href="#{{subdefgroup}}">{{subdefgroup}}</a></li>
      {% endfor %}
    </ul>
    {% for subdefgroup, subdeflist in subdefs %}

    <div id="{{subdefgroup}}">
      {% for subdefname , subdef in subdeflist %}
      <div>
        <input type="hidden" name="subdefs[]" value="{{subdefgroup}}_{{subdefname}}"/>
        <table cellspacing="0" cellpading="0" border="0" style="width:500px;">
          <tbody>
            <tr>
              <td style="width:120px;">
                <h2>{{subdefname}}</h2><button class="subdef_deleter">{% trans 'boutton::supprimer' %}</button>
        <input type="hidden" name="subdef" value="{{subdefgroup}}_{{subdefname}}"/>
              </td>
              <td style="width:250px;"></td>
              <td></td>
            </tr>
            <tr>
              <td>{% trans 'Telechargeable' %}</td>
              <td><input type="checkbox" name="{{subdefgroup}}_{{subdefname}}_downloadable" {% if subdef.is_downloadable() %}checked="checked"{% endif %} value="1" /></td>
              <td></td>
            </tr>
            <tr>
              <td>
                {% trans 'classe' %}
              </td>
              <td>
                <select name="{{subdefgroup}}_{{subdefname}}_class">
                  <option>{% trans 'classe' %}</option>
                  <option value="document" {% if subdef.get_class() == "document" %}selected="selected"{% endif %}>{% trans 'document' %}</option>
                  <option value="preview" {% if subdef.get_class() == "preview" %}selected="selected"{% endif %}>{% trans 'preview' %}</option>
                  <option value="thumbnail" {% if subdef.get_class() == "thumbnail" %}selected="selected"{% endif %}>{% trans 'tout le monde' %}</option>
                </select>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>
                Path
              </td>
              <td>
                <input class="path_testable test_writeable" type="text" value="{{subdef.get_path()}}" name="{{subdefgroup}}_{{subdefname}}_path"/>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>
                {% trans 'Baseurl' %}
              </td>
              <td>
                <input class="url_testable can_empty same_domain" type="text" value="{{subdef.get_baseurl()}}" name="{{subdefgroup}}_{{subdefname}}_baseurl"/>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>
                {% trans 'Write Metas' %}
              </td>
              <td>
                <input type="checkbox" value="yes" {% if subdef.meta_writeable() %}checked="checked"{% endif %} name="{{subdefgroup}}_{{subdefname}}_meta"/>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>
                {% trans 'mediatype' %}
              </td>
              <td>
                <select onchange="select_mediatype('{{subdefgroup}}{{subdefname}}', this);" name="{{subdefgroup}}_{{subdefname}}_mediatype">
                  <option>{% trans 'Choisir' %}</option>

                  {% for mediatype, options in subdef.get_mediatype_options() %}
                  <option value="{{mediatype}}" {% if subdef.get_mediatype() == mediatype %}selected="selected"{% endif %}>{{mediatype}}</option>
                  {% endfor %}
                </select>
              </td>
              <td></td>
            </tr>
          </tbody>
        </table>
        {% for mediatype, options in subdef.get_mediatype_options() %}
        <div id="box{{subdefgroup}}{{subdefname}}{{mediatype}}" class="{{subdefgroup}}{{subdefname}}" {% if subdef.get_mediatype() != mediatype %}style="display:none;"{% endif %}>
             <table cellspacing="0" cellpading="0" border="0" style="width:500px;">
            {% for optionname, option in options%}
            {% set varname = subdefgroup~'_'~subdefname~'_'~mediatype~'['~optionname~']' %}
            <tr>
              <td style="width:120px;">
                {{optionname}}
              </td>
              <td style="width:250px;">
                {% set extradata = '' %}
                {% if option.type == 'range' %}
                <div style="width:250px;" id="slider{{subdefgroup}}{{subdefname}}{{mediatype}}{{optionname}}"></div>
                <script type="text/javascript">
                  $('#slider{{subdefgroup}}{{subdefname}}{{mediatype}}{{optionname}}').slider({
                    value:{% if option.value %}{{option.value}}{% else %}{{option.default}}{% endif %},
                      min: {{option.min}},
                      max: {{option.max}},
                      {% if option.step is not empty %}step : {{option.step}},{% endif %}
                      slide: function( event, ui ) {
                        $( "#slidervalue{{subdefgroup}}{{subdefname}}{{mediatype}}{{optionname}}" ).val( ui.value );
                      }

                    });
                </script>

                {% elseif option.type == 'enum' %}
                <select name="{{varname}}">
                  <option>{% trans 'Choisir' %}</option>
                  {% for pot_value in option.values %}
                  <option value="{{pot_value}}" {% if pot_value == option.value %}selected="selected"{% endif %}>{{pot_value}}</option>
                  {% endfor %}
                </select>
                {% elseif option.type == 'boolean' %}
                <input name="{{varname}}" type="radio" value="yes" {% if option.value %}checked="checked"{% endif %} /> {% trans 'yes' %}
                       <input name="{{varname}}" type="radio" value="no" {% if option.value is empty %}checked="checked"{% endif %}/> {% trans 'no' %}
                       {% else %}
                       <input name="{{varname}}" type="text" value="{{option.value}}"/>{{option.type}}
                {% endif %}
              </td>
              <td>
                {% if option.type == 'range' %}
                <input style="width:35px;" readonly value="{{option.value}}" id="slidervalue{{subdefgroup}}{{subdefname}}{{mediatype}}{{optionname}}" name="{{varname}}" />
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </table>
        </div>
        {% endfor %}
      </div>
      {% endfor %}

    </div>

    {% endfor %}
  </div>
  <input type="hidden" name="delete_subdef" id="delete_subdef" value=""/>
  <input type="hidden" name="add_subdef[group]" value=""/>
  <input type="hidden" name="add_subdef[name]" value=""/>
  <input type="hidden" name="add_subdef[class]" value=""/>
  <button type="submit">{% trans 'boutton::valider' %}</button>
</form>

<div style="display:none;">
  <div id="image_template">

  </div>

</div>
{% endblock %}