<style>

    #drop-target {
        border: 5px dashed #999;
        text-align: center;
        color: #999;
        font-size: 20px;
        width: 230px;
        height: 100px;
        line-height: 50px;
        cursor: pointer;
    }

    .placeholder {
        background-color: #999;
    }

    .result {
        display: inline;
    }

    .result li {
        border:1px solid #999;
        width: 130px;
        height: 170px;
        float: left;
        margin: 5px;
    }


</style>

<section class="grid_3" id="main">
    <div id="catalog-tree" class="box menu">
        <h2><?= __('Opcje') ?></h2>
        <section>
            <div id="catalog-tree-wrapper">

                <script type="text/javascript">
                    $(document).ready(function() {

                        $("ul.result").sortable({
                            onDrop: function(item, container, _super) {
                                var order = [];

                                $("ul.result li").each(function(i) {
                                    order.push($(this).attr("id"));
                                });
                                $.post("/Gallery/admin_index/save-order", {order: order});

                            },
                        });

                        $("#description").attr("cols", 30);

                        $.post("/Gallery/admin_index/get/id/<?= Zend_Controller_Front::getInstance()->getRequest()->getParam('id') ?>", function(data) {
                            $(".result").html(data);
                        });

                        $(document).on("click", '.remove-image', function() {
                            $.post("/Gallery/admin_index/remove-image/id/" + $(this).attr("nr"), function(data) {
                                $(".result").html(data);
                            });
                            $.post("/Gallery/admin_index/get/id/<?= Zend_Controller_Front::getInstance()->getRequest()->getParam('id') ?>", function(data) {
                                $(".result").html(data);
                            });
                        });

                    });
                </script>
                <div>
                    <?php echo $this->form ?>
                </div>
                
                <div>
                    <?php if (file_exists($this->thumbGallery . 'img.jpg')):?>
                    <b>Miniatura galerii:</b><br/>
                    <img style="width:150px;" src="/Gallery/admin_index/get-thumb-gallery/id/<?=Zend_Controller_Front::getInstance()->getRequest()->getParam('id')?>" />
                    <?php else: ?>
                    brak miniatury
                    <?php endif; ?>
                </div>

            </div>
        </section>
    </div>
    <div class="box search">
        <div id="drop-target">Przeciągnij zdjęcie</div>
        <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
        <br />

        <div id="container">
            <a id="pickfiles" href="javascript:;">[Dodaj zdjęcia] </a> 
            <a id="uploadfiles" href="javascript:;"> [Wyślij]</a>
        </div>

        <br />
        <pre id="console"></pre>
    </div>


</section>
<section class="grid_9 " id="main">
    <article>
        <h1 id="up"><?= __('Edytuj galerię') ?></h1>
        <pre id="serialize_output"></pre>
        <ul class="result"></ul>

        <div style="clear:both;"></div>

        </div><!-- End demo -->

        <div style="clear:both;"></div>

        <script type="text/javascript">

            // Custom example logic

            var uploader = new plupload.Uploader({
                dragdrop: true,
                drop_element: 'drop-target',
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'pickfiles', // you can pass in id...
                container: document.getElementById('container'), // ... or DOM Element itself
                url: '/Gallery/admin_index/upload?id=<?= Zend_Controller_Front::getInstance()->getRequest()->getParam('id') ?>',
                flash_swf_url: '/Moxie.swf',
                silverlight_xap_url: '/Moxie.xap',
                filters: {
                    max_file_size: '10mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"},
                        {title: "Zip files", extensions: "zip"}
                    ]
                },
                init: {
                    PostInit: function() {
                        document.getElementById('filelist').innerHTML = '';

                        document.getElementById('uploadfiles').onclick = function() {
                            uploader.start();
                            return false;
                        };
                    },
                    FilesAdded: function(up, files) {
                        plupload.each(files, function(file) {
                            document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
                        });
                    },
                    ondrop: function(up, files) {
                        uploader.start();
                    },
                    UploadProgress: function(up, file) {
                        $.post("/Gallery/admin_index/get/id/<?= Zend_Controller_Front::getInstance()->getRequest()->getParam('id') ?>", function(data) {
                            $(".result").html(data);
                        });
                        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                    },
                    Error: function(up, err) {
                        document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
                    }
                }
            });

            uploader.init();

        </script>
    </article>
</section>
