<a href="{$S:SETTING_ROOT}/admin/component/header/overview">terug</a> naar het overzicht
<hr/>
{$message}
<div id="divAll" style="display: {$divall_display};">
<form method="post" enctype="multipart/form-data">
    <div id="divHeaderUpload" style="display: {$btnsave_visible}">
        <h2>Header foto's toevoegen of verwijderen</h2>
        <p>Eerst een foto uploaden, daarna selecteren wat in de header te zien wordt</p>
        <div class="form-field">
            <div class="label">
                Foto
            </div>
            <div class="field">
                <input type="file" name="flPhoto" value="Foto uplaoden"/>
            </div>
            <br style="clear:both;"/>
        </div>
        <input type="submit" name="btnSave" value="Opslaan" class="button"/>
        <hr/>
    </div>
    <div style="display:{$header_to_crop_visible}; width: 1024px; height: auto;">
        <h2>Foto bewerken</h2>
        <img src="{$header_src}" id="cropbox"/>
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="submit" name="btnCrop" class="button" value="Opslaan" />
        <script type="text/javascript" src="{$S:SETTING_ROOT}/js/jquery.Jcrop.min.js"></script>
        <script type="text/javascript" src="{$S:SETTING_ROOT}/js/jquery.Jcrop.js"></script>
        <link rel="stylesheet" href="{$S:SETTING_ROOT}/css/jquery.Jcrop.css"/>
        <script type="text/javascript">
            var jcrop_api;
            $(function(){
                initJcrop();
            });

            function initJcrop(){
                $('#cropbox').Jcrop({
                    onSelect    : updateCoords,
                    allowResize : false,
                    maxSize     : [880, 332],
                    minSize     : [880, 332]
                },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);
            };

            function checkCoords(){
                if (parseInt($('#w').val())) return true;
                alert('Please select a crop region then press submit.');
                return false;
            };
        </script>
    </div>
    <br style="clear:both;"/>
</form>
</div>