{# Definimos as partes do Layout que desejamos exibir. #}
{% extends '@base/base.html' %}
{% set modulo = 'md_arquivo_grupo' %}

{% block title %}Imagem » Cortar{% endblock %}

{% block titulo_nav_bar %}Imagem » Cortar{% endblock %}

{% block stylesheets_extras %}
    <link href="/web/base/css/jquery.Jcrop.min.css" type="text/css" rel="stylesheet" />
{% endblock %}

{% block mensagem %}
    <div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>Aqui você pode <strong>Cortar</strong> as imagens.</p>
        <p>Para que as informações sejam gravadas no sistema, clique em <strong>Cortar</strong>.</p>
    </div>
{% endblock %}

{% block botao_inserir %}{% endblock %}

{% block botao_voltar %}{% endblock %}
{% block botao_voltar_grupo %}{% endblock %}
{% block botao_voltar_grupo_editar %}{% endblock %}

{% block body %}

    <div class="bs-docs-example">
        <ul class="nav nav-pills">
            <li><a href="#" onClick="$('#target').Jcrop({ setSelect: [ -800, -600, 800, 600 ], allowResize: true });"><small>Horizontal (800 x 600 px)</small></a></li>
            <li><a href="#" onClick="$('#target').Jcrop({ setSelect: [ -800, -1067, 800, 1067 ], allowResize: true });"><small>Vertical (800 x 1067 px)</small></a></li>
            <li><a href="#" onClick="$('#target').Jcrop({ setSelect: [ -800, -540, 800, 540 ], allowResize: true });"><small>Destaque (800 x 540 px)</small></a></li>
        </ul>
    </div>
        
    <div class="crop">
        <p align="center">
            <img src="/web/arquivos/{{ parametros.arquivo.nome }}" id="target">
        </p>
    </div>

    <hr />

    <form method="POST" action="/md_arquivo_grupo/inserir_crop/{{ parametros.hidden.tabela_referencia }}/{{ parametros.hidden.id_referencia }}/{{ parametros.hidden.tipo }}">
        <input type="hidden"  name="acao_crop" value="crop">
        <input type="hidden"  name="id" value="{{ parametros.arquivo.id }}">
        <input type="hidden"  name="x" id="x">
        <input type="hidden"  name="y" id="y">
        <input type="hidden"  name="w" id="w">
        <input type="hidden"  name="h" id="h">
        
        <button type="submit" class="btn btn-large btn-warning" tabindex="4">Cortar</button>
        
    </form>

    <br />&nbsp;<br />

{% endblock %}

{% block javascripts_extra %}
        <script src="/web/base/js/jquery.Jcrop.min.js"></script>
        <script type="text/javascript">
            jQuery(function()
            {
                $('#target').Jcrop(
                {
                    onSelect: updateCoords,
                    allowResize: true,
                    allowSelect: false,
                    aspectRatio: 0,
                    setSelect: [ -800, -600, 800, 600 ]
                });
                function updateCoords(c)
                {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                };
            });
        </script>

{% endblock %}