<a href="{$S:BASE_URL_COMPONENT}/hatch.html">Terug</a> naar het overzicht
<hr/>
<h2>Aanmaken/aanpassen van Header foto voor "{$hotelName}"</h2>
<p>Middels deze module kunnen header foto's toegevoegd worden voor een specifiek hotel, of juist voor de algemene
    pagina.</p>
{$message}
<div id="divUpload">
    <form method="post" enctype="multipart/form-data">
        <div class="form-field">
            <div class="label">
                Naam
            </div>
            <div class="field">
                <input type="text" name="txtTitle" value="{$txtTitle}"/>
            </div>
            <br style="clear:both;"/>
        </div>
        <hr/>
        <h3>Instellingen voor taal</h3>
        {$language-fields}
        <hr/>
        <h3>Selecteer een bestand</h3>

        <div class="form-field">
            <div class="label">
                Selecteer bestand
            </div>
            <div class="field">
                <input type="file" name="flPhoto"/>
            </div>
            <br style="clear:both;"/>
        </div>
        <input type="submit" name="btnUpload" value="Uploaden" class="button" style="{$displayUpload}"/>
</div>
<div id="divResize">
    <div id="divImage" style="width: 1024px; height: auto;">
        <img src="{$cropBox}" id="cropbox"/>
    </div>

    <input type="hidden" name="x"/>
    <input type="hidden" name="y"/>
    <input type="hidden" name="h"/>
    <input type="hidden" name="w"/>

    <input type="hidden" name="txtOrigImg" value="{$txtOrigImg}"/>


    <input type="submit" name="btnResize" value="Opslaan" class="button" style="{$displayResize}"/>
    </form>
</div>
<br/>
<table class="table-wrap">
    <thead>
    <tr>
        <td>Afbeelding</td>
        <td>Titel</td>
        <td>Beschrijving</td>
        <td>Verwijderen</td>
    </tr>
    </thead>
    <tbody>
    {$headerItems}
    </tbody>
</table>

<script type="text/javascript" src="{$S:SETTING_ROOT}/js/admin/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="{$S:SETTING_ROOT}/css/admin/jquery.Jcrop.css"/>
<script type="text/javascript">
    var jcrop_api;

    var vis = false;

    function showImages() {
        if (!vis) {
            $("#divImage").hide("fast");
            $("#divSelect").show("fast");
            vis = true;
        }
        else {
            $("#divImage").show("fast");
            $("#divSelect").hide("fast");
            vis = false;
        }
    }

    initJcrop();
    function initJcrop() {
        $('#cropbox').Jcrop({
                    onSelect:updateCoords,
                    aspectRatio:771 / 285,
                    minSize:[771, 285]
                },
                function () {
                    jcrop_api = this;
                    jcrop_api.animateTo([0, 0, 0, 0]);
                });
    }

    function updateCoords(c) {
        $("input[name='x']").val(c.x);
        $("input[name='y']").val(c.y);
        $("input[name='h']").val(c.h);
        $("input[name='w']").val(c.w);
    }

    function checkCoords() {
        if (parseInt($('#w').val()))
            return true;
        alert('Please select a crop region then press submit.');
        return
    }
</script>