<?php $application = $this->getApplication(); ?>
<?php $block = $this->getCurrentBlock(); ?>
<?php $option = $this->getCurrentOptionValue(); ?>
<?php $library = new Cms_Model_Application_Page_Block_Image_Library(); ?>
<?php $libraries = $library->findAll(array('library_id' => $block->getLibraryId()), 'image_id ASC', null); ?>
<div id="cms_block_<?php echo $this->getPosition(); ?>" class="category inner_content cms_block picture" rel="<?php echo $this->getPosition(); ?>">
    <div class="left">
        <a class="handle" href="javascript:void(0);"><i class="icon-move"></i></a>
    </div>
    <div class="left image_edit display_image" rel="<?php echo $this->getPosition(); ?>">
        <!--[if gte IE 10]><!-->
        <button type="button" class="left upload_picture upload editor_menu active image_left block" rel="<?php echo $this->getPosition(); ?>">
            <i class="icon-camera-retro"></i>
            <?php echo $this->_('Add<br /><span class="bold">Pictures</span>'); ?>
        </button>
        <!--<![endif]-->
        <input style="display:none" multiple enctype="multipart/form-data" rel="<?php echo $this->getPosition(); ?>" class="left fileupload fileupload_picture" type="file" name="files[]" data-url="<?php echo $this->getUrl('template/crop/upload'); ?>">
        <div class="clear"></div>
        <div style="margin-top:20px;<?php if(!count($libraries) > 0) : ?>display:none;<?php endif; ?>" class="param_cont description_cont" rel="<?php echo $this->getPosition() ?>">
            <div class="cont_title"><?php echo $this->_('Description:'); ?></div>
            <input type="text" name="block[<?php echo $this->getPosition(); ?>][description]" value="<?php echo $block->getDescription() ?>" class="description" />
        </div>
        <div class="image_cont">
            <?php foreach($libraries as $library) : ?>
                <div rel="<?php echo $block->getPosition(); ?>" class="image_cont_details left">
                    <a class="handle_image_type" href="javascript:void(0);"><i class="icon-move"></i></a>
                    <img src="<?php echo $library->getImage(); ?>" width="100px" height="50px" />
                    <a class="removeimg" onclick="deleteImageImage(this);" href="javascript:void(0);"><i class="icon-remove"></i></a>
                    <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][image_url][]" value="<?php echo $library->getData('image_url') ?>" class="picture" />
                    <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][image_fullsize_url][]" value="<?php echo $library->getData('image_fullsize_url') ?>" class="picture_fullsize" />
                </div>
            <?php endforeach; ?>
        </div>
        <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][block_id]" value="<?php echo $block->getBlockId(); ?>" />
        <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][value_id]" value="<?php echo $block->getValueId(); ?>" />
        <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][type]" value="<?php echo $block->getType(); ?>" />
        <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][position]" value="<?php echo $this->getPosition(); ?>" class="hidden_pos" rel="<?php echo $this->getPosition(); ?>"  />
        <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][library_id]" value="<?php echo $block->getLibraryId() ?>" class="hidden_library" rel="<?php echo $this->getPosition(); ?>" />
    </div>
    <div class="right">
        <a class="remove" href="javascript:void(0);"><i class="icon-remove"></i></a>
    </div>
    <div class="clear"></div>
    <script type="text/javascript">

        $('.upload_picture[rel="<?php echo $this->getPosition() ?>"]').click(function() {
            $('.fileupload[rel="<?php echo $this->getPosition() ?>"]').trigger('click');
        });

        $('.cms_block[rel="<?php echo $this->getPosition(); ?>"] input.description').keyup(function() {
            updateDesc(<?php echo $this->getPosition(); ?>);
        });

        $('.image_cont').sortable({
            handle : '.handle_image_type',
            axis: '',
            placeholder: "",
            helper: 'clone',
            tolerance: 'pointer',
            start: function (event, ui) {
            },
            stop: function(event, ui) {
            },
            update: function (e, ui) {
                var rel = $(ui.item).attr('rel');
                refreshGallery(rel);
                refreshCarousel(rel);
            }
        });
        var uploader = new Uploader();
        $('.fileupload[rel="<?php echo $this->getPosition() ?>"]').fileupload({
            dataType: 'json',
            add: function (e, data) {
                data.submit();
                uploader.showProgressbar();
            },
            progressall: function (e, data) {
                uploader.moveProgressbar(data);
            },
            done: function (e, data) {
                if(data.result.error) {
                    uploader.showError(data.result.message);
                } else {
                    uploader.hide();

                    //affiche le block description
                    $('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .description_cont').show();

                    reload(this, '<?php echo $this->getUrl('cms/application_page/resize') ?>?file='+data.result.files, true, function(datas) {
                        if (datas.success) {
                            //partie gauche edit
                            $('.cms_block[rel="<?php echo $this->getPosition(); ?>"]').find('.image_cont').append(
                                '<div class="image_cont_details left" rel="<?php echo $this->getPosition(); ?>">\n\
                                    <a class="handle_image_type" style="vertical-align:top;margin-right:5px;" href="javascript:void(0);"><i class="icon-move"></i></a>\n\
                                    <img height="50px" width="100px" src="<?php echo Core_Model_Directory::getTmpDirectory() ?>/'+datas.file+'"/>\n\
                                    <a style="vertical-align:top; margin-left:5px;display:inline-block;margin-right:10px;" onclick="deleteImageImage(this);" class="removeimg" href="javascript:void(0);">\n\
                                        <i class="icon-remove"></i>\n\
                                    </a>\n\
                                    <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][image_url][]" value="'+datas.file+'" />\n\
                                    <input type="hidden" name="block[<?php echo $this->getPosition(); ?>][image_fullsize_url][]" value="'+datas.fullsize_file+'" />\n\
                                </div>'
                            );

                            /*
                            //iframe
                            var id = iframe.content.find('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .image_ul').attr('rel');

                            //Existant
                            if(id != undefined) {
                                var li = $('<li />').attr('class', 'left image_li').css('width', iframe.content.find('#cms_page_content_<?php echo $option->getId(); ?>').width()+'px');
                                var a = $('<a />').css('display', 'block').css('overflow', 'hidden').attr('onclick', 'return false;').attr('href', 'javascript:void(0)');

                                var img_width = iframe.content.find('#cms_page_content_<?php echo $option->getId(); ?>').width();
                                if(img_width == 0) {
                                    img_width = iframe.content.find('.image_ul .image_li img').width();
                                }
                                var img = $('<img />').attr('width', img_width+'px').attr('src', '<?php echo Core_Model_Directory::getTmpDirectory() ?>/'+datas.file);
                                a.append(img);
                                li.append(a);
                                iframe.content.find('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .image_ul').append(li);

                                var li_gallery = $('<li />').attr('class', 'left gallery_li');
                                var img_gallery = $('<img />').css('display', 'inline-block').attr('src', '<?php echo Core_Model_Directory::getTmpDirectory() ?>/'+datas.fullsize_file);

                                if(iframe.content.find('.cms_block[rel="<?php echo $this->getPosition(); ?>"]').find('.controls').length < 1) {
                                    var controls = '\
                                        <button id="left_control_'+id+'" type="button" class="controls left relative" onclick="scrollviews.scrollToPage(\'carousel_scrollview_'+id+'\', \'prev\')" style="display:none;">\n\
                                            <img src="<?php echo $this->getImage('pictos/arrow_left.png'); ?>" width="15" height="15" />\n\
                                        </button>\n\
                                        <button id="right_control_'+id+'" type="button" class="controls right relative" onclick="scrollviews.scrollToPage(\'carousel_scrollview_\', \'next\')">\n\
                                                <img src="<?php echo $this->getImage('pictos/arrow_right.png'); ?>" width="15" height="15" />\n\
                                        </p>\n\
                                    ';
                                    iframe.content.find('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .image_ul').after(controls);
                                } else {
                                    iframe.content.find('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .image_ul').find('.controls').show();
                                }

                                li_gallery.append(img_gallery);
                                iframe.content.find('.gallery_ul[rel="'+id+'"]').append(li_gallery);

                            } else {

                                var img = $('<img />').attr('width', iframe.content.find('#cms_page_content_<?php echo $option->getId(); ?>').width()+'px').attr('src', '<?php echo Core_Model_Directory::getTmpDirectory() ?>/'+datas.file);
                                var scrollview_carousel = '\
                                    <div class="cms_block picture" rel="<?php echo $this->getPosition(); ?>">\n\
                                        <div style="overflow: hidden;" class="image_cont relative" rel="<?php echo $this->getPosition(); ?>" id="carousel_scrollview_<?php echo $this->getPosition(); ?>">\n\
                                            <ul class="image_ul" rel="<?php echo $this->getPosition(); ?>">\n\
                                                <li class="left image_li">\n\
                                                    <a href="javascript:void(0)" onclick="return false;" style="display: block; overflow: hidden;">\n\
                                                    '+img[0].outerHTML+'\n\
                                                    </a>\n\
                                                </li>\n\
                                            </ul>\n\
                                            <button id="left_control_carousel_scrollview_<?php echo $this->getPosition(); ?>" type="button" class="controls left relative" onclick="scrollviews.scrollToPage(\'carousel_scrollview_<?php echo $this->getPosition(); ?>\', \'prev\')" style="display:none;">\n\
                                                <img src="<?php echo $this->getImage('pictos/arrow_left.png'); ?>" width="15" height="15" />\n\
                                            </button>\n\
                                            <button id="right_control_carousel_scrollview_<?php echo $this->getPosition(); ?>" type="button" class="controls right relative" onclick="scrollviews.scrollToPage(\'carousel_scrollview_<?php echo $this->getPosition(); ?>\', \'next\')">\n\
                                                <img src="<?php echo $this->getImage('pictos/arrow_right.png'); ?>" width="15" height="15" />\n\
                                            </button>\n\
                                        </div>\n\
                                        <p width="100%" rel="<?php echo $this->getPosition(); ?>" class="description"></p>\n\
                                    </div>';

                                iframe.content.find('#cms_page_content_<?php echo $option->getId(); ?>').append(scrollview_carousel);

                                iframe.f.page.current_page.createCarousel('carousel_scrollview_<?php echo $this->getPosition(); ?>');//.refreshCarousel('carousel_scrollview_<?php echo $this->getPosition(); ?>');
                            }
                            */
                        }
                    });
                }
            }
        });

        $('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .remove').click(function(){
            removeElem(<?php echo $this->getPosition(); ?>);
        });

        $('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .handle').mousedown(function(){
            dragTransformMouseDown($(this));
        }).mouseup(function(){
            dragTransformMouseUp($(this));
        });

        //Fix IE
        if($('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .upload_picture').length < 1) {
            $('.cms_block[rel="<?php echo $this->getPosition(); ?>"] .fileupload_picture').show();
        }

    </script>
    <style>
        .cms_block.picture .image_edit {width:540px;}
        .cms_block.picture .image_cont {width: auto !important;margin: 20px 0 0 0 !important;}
        .cms_block.picture .image_cont_details {margin-bottom:20px; margin-right:20px; }
        .cms_block.picture a.removeimg {vertical-align:top;margin-left:5px;display:inline-block;margin-right:10px;}
        .cms_block.picture a.handle_image_type {vertical-align:top;margin-right:5px;}
    </style>
</div>