{% extends "telemeta/base.html" %}
{% load telemeta_tags %}
{% load i18n %}

{% block head_title %}{% trans "Advanced Search" %} - {{ block.super }}{% endblock %}

{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/jquery.autocomplete.css" />
{% endblock %}

{% block extra_javascript %}
<script src="{{ STATIC_URL }}telemeta/js/jquery.bgiframe.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}telemeta/js/jquery.mb.browser.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}telemeta/js/jquery.autocomplete.js" type="text/javascript"></script>


<script type="text/javascript">

$(function(){
    var txt = ''
            +'jQuery.browser.ua  = '+jQuery.browser.ua+'<br>'
            +'jQuery.browser.name  = '+jQuery.browser.name+'<br>'
            +'jQuery.browser.fullVersion  = '+jQuery.browser.fullVersion+'<br>'
            +'jQuery.browser.version = '+jQuery.browser.version+'<br><br><br>'
            +'jQuery.browser.msie = '+jQuery.browser.msie+'<br>'
            +'jQuery.browser.mozilla = '+jQuery.browser.mozilla+'<br>'
            +'jQuery.browser.opera = '+jQuery.browser.opera+'<br>'
            +'jQuery.browser.webkit = '+jQuery.browser.webkit+'<br>'
            +'jQuery.browser.safari = '+jQuery.browser.safari+'<br>'
            +'jQuery.browser.chrome = '+jQuery.browser.chrome+'<br>';
    $("#result").html(txt);
});


function update_period(source, from_field, to_field) {
    var from_year = $(from_field);
    var to_year = $(to_field);

    if (from_year.val() == "0") {
        to_year.attr('disabled', '1');
        to_year.val('0');
    } else {
        to_year.removeAttr('disabled');
        if ($(source).is(to_field)) {
            if (parseInt(from_year.val()) > parseInt(to_year.val()))
                from_year.val(to_year.val());
        } else if (parseInt(from_year.val()) > parseInt(to_year.val())) {
            to_year.val(from_year.val());
        }
    }
}

$(document).ready(function () {
    $('#location').autocomplete('{% url "telemeta-complete-location" %}', {
        max: 20,
        formatResult: function(data) {
            return data[0].replace(/ *\([0-9]+.*\) *$/, '');
        }
    });
    update_period('#rec_year_from', '#rec_year_to');
    $('#rec_year_from, #rec_year_to').change(function () {
        update_period(this, '#rec_year_from', '#rec_year_to');
    });
    update_period('#pub_year_from', '#pub_year_to');
    $('#pub_year_from, #pub_year_to').change(function () {
        update_period(this, '#pub_year_from', '#pub_year_to');
    });
});

$(document).ready(function() {
    $(this).keydown(function(e) {
        if (e.keyCode == '13') {
            $("#searchform").submit();
        }
    });
});

</script>
{% endblock %}

{% block title %}
<div class='row'>
    <div class="col-md-12">
     <img src="{{ STATIC_URL }}telemeta/images/adv_search_red.png" alt="advanced-search" style="vertical-align:middle" /> {% trans "Advanced Search" %}
    </div>
</div>

{% endblock %}

{% block content %}
<form action="{% url "telemeta-search" %}" id="searchform" method="get">
<fieldset>

    <p>
    <label for="location">{% field_label "Location" %}</label>
    <input type="text" name="location" id="location" value="{{ criteria.location }}" />
    </p>

    <p>
    <label for="instrument">{% field_label "Instrument" %}</label>
    <input type="text" name="instrument" id="instrument" />
    </p>

    <p>
    <label for="ethnic_group">{% field_label "EthnicGroup" %}</label>
    <select id="ethnic_group" name="ethnic_group">
        <option value="">All ethnic groups</option>
    {% for group in ethnic_groups %}
        <option value="{{group.id}}" {% ifequal criteria.ethnic_group.id group.id %}selected {% endifequal %}>{{group|escape}}</option>
    {% endfor %}
    </select>
    </p>

    <p>
    <label for="title">{% trans "Title" %}</label>
    <input type="text" id="title" name="title" />
    </p>

    <p>
    <label for="creator">{% field_label "MediaCollection" "creator" %}</label>
    <input type="text" id="creator" name="creator" />
    </p>

    <p>
    <label for="collector">{% field_label "MediaCollection" "collector" %}</label>
    <input type="text" id="collector" name="collector" />
    </p>

    {% if rec_years %}
    <p>
    <label for="rec_date_from">{% trans "Year of recording" %}</label>
    <select id="rec_year_from" name="rec_year_from" class="tiny">
        <option value="0"></option>
        {% for year in rec_years %}
        <option value="{{ year }}" {% ifequal criteria.rec_year_from year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    {% trans "to" %}
    <select id="rec_year_to" name="rec_year_to" class="tiny">
        <option value="0"></option>
        {% for year in rec_years %}
        <option value="{{ year }}" {% ifequal criteria.rec_year_to year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    </p>
    {% endif %}

    {% if pub_years %}
    <p>
    <label for="pub_date_from">{% trans "Year of publication" %}</label>
    <select id="pub_year_from" name="pub_year_from" class="tiny">
        <option value="0"></option>
        {% for year in pub_years %}
        <option value="{{ year }}" {% ifequal criteria.pub_year_from year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    {% trans "to" %}
    <select id="pub_year_to" name="pub_year_to" class="tiny">
        <option value="0"></option>
        {% for year in pub_years %}
        <option value="{{ year }}" {% ifequal criteria.pub_year_to year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    </p>
    {% endif %}

    <p><label for="sound">{% trans "Digitized" %}</label>
    <input type="checkbox" name="sound" value="True" align="left" />
    </p>

</fieldset>

<p class="input">
<a href="#" class="component_icon button icon_search"
      onclick="document.getElementById('searchform').submit(); return false;">{% trans 'Search' %}</a>
</p>

</form>
{% endblock %}
