{% load i18n %}
{% load url from future %}
var Bottom_bar = '<div id="bottom-bar">{% if groups %}<button id="recommend">{% trans "Recommend" %}</button><button id="click-into-group">{% trans "Back to group" %}</button>{% endif %}</div>';
$('#wrapper').append(Bottom_bar);
$('#main-panel').css('margin-bottom', $('#bottom-bar button').outerHeight() + 2);
$('#footer').addClass('hide');

{% if groups %}
var group_list = []
{% for group in groups %}
group_list.push('{{ group.props.group_name }} <{{ group.props.creator_name }}>');
{% endfor %}
$('#recommend').click(function() {
    if ($('#recommend-to-group-form').hasClass('hide')) {
        $('#recommend-to-group-form, #recommend-to-group-caret').removeClass('hide');
        $('#recommend-to-group-caret').css('left', $('#recommend').offset().left);
    } else {
        $('#recommend-to-group-form, #recommend-to-group-caret').addClass('hide');
    }
});
$(document).click(function(e) {
    var target = e.target || event.srcElement;
    if (!$('#recommend, #recommend-to-group-form, #recommend-to-group-caret').is(target) && !($('#recommend-to-group-form, #recommend-to-group-caret').find('*').is(target))) {
        $('#recommend-to-group-form, #recommend-to-group-caret').addClass('hide');
    }   
});

$('#recommend-submit').click(function() {
    if (!$.trim($('#recommend-to-group-form [name="message"]').val())) {
        apply_form_error('recommend-to-group-form', '{% trans "Please input recommend message." %}');
        return false;   
    }
});

$('#main').append('<div id="to-group" class="hide">{{ repo_group_str|escapejs }}</div><div id="to-group-caret" class="hide"><div class="outer-caret"><div class="inner-caret"></div></div></div>');
$('#click-into-group').click(function() {
    {% if groups|length == 1 %}
    // only one group, just turn to group page
    {% for group in groups %}
    location.href= "{% url 'group_info' group.id %}";
    {% endfor %}

    {% else %}
    // more than one group, then let user choose
    if ($('#to-group').hasClass('hide')) {
        $('#to-group, #to-group-caret').removeClass('hide');
        $('#to-group-caret').css('left', $('#click-into-group').offset().left + $('#click-into-group').width()/3);
        if ($('#to-group').offset().left > $('#click-into-group').offset().left) {
            $('#to-group').css('left', $('#click-into-group').offset().left);
        }
    } else {
        $('#to-group, #to-group-caret').addClass('hide');
    }
    {% endif %}
});
$(document).click(function(e) {
    var target = e.target || event.srcElement;
    if (!$('#click-into-group, #to-group, #to-group-caret').is(target) && !($('#to-group, #to-group-caret').find('*').is(target))) {
        $('#to-group, #to-group-caret').addClass('hide');
    }   
});
{% endif %}

$(function() {
    var btn_height = $('#bottom-bar button').outerHeight();
    $('#recommend-to-group-caret, #to-group-caret, #comment-caret').css({'bottom': btn_height + 1});
    $('#file-comment, #to-group, #recommend-to-group-form').css({'bottom': btn_height + 1 + $('.outer-caret').outerHeight()});
});