{% import 'common/thumbnail.html.twig' as thumbnail %}
<div id="reorder_options" class="PNB" style="height:30px;bottom:auto;">
    <form id="reorder_options" class="form-inline" style="display:inline-block;">
        <span>{{ 'Reordonner automatiquement' | trans }}</span>
        <select id="auto_order">
          <option value="">{{ 'Choisir' | trans }}</option>
          <option value="default">{{ 'Re-initialiser' | trans }}</option>
          <option value="title">{{ 'Titre' | trans }}</option>
        </select>
        <button type="button" class="autoorder">{{ 'Re-ordonner' | trans }}</button>
        <button type="button" class="reverseorder">{{ 'Inverser' | trans }}</button>
    </form>
    <form  style="display:inline-block;" class="form-inline" name="reorder" method="POST" action="{{ path('prod_stories_story_reorder', { 'sbas_id' : story.get_sbas_id(), 'record_id' : story.get_record_id() }) }}">
        {% for element in story.get_children() %}
            <input type="hidden" name="element[{{ element.get_record_id() }}]" value="{{ element.getNumber() }}"/>
        {% endfor %}
        <button>{{ 'boutton::valider' | trans }}</button>
    </form>
</div>
<div style="top:45px;overflow:auto;" id="reorder_box" class="PNB">
    <div class="elements">
        {% for element in story.get_children() %}
            <div id="ORDER_{{ element.get_record_id() }}" class="CHIM diapo" style="height:130px;overflow:hidden;">
                <div class="title" title="{{ element.get_title() }}" style="position:relative;z-index:1200;height:30px;overflow:hidden;text-align:center;text-overflow: ellipsis; line-height: 15px;">
                    {{ element.get_title() }} {{ element.get_title() }} {{ element.get_title() }}
                </div>
                {{ thumbnail.format(element.get_thumbnail(), 80, 80, '', false, false) }}
                <form style="display:none;">
                    <input type="hidden" name="id" value="{{ element.get_record_id() }}"/>
                    <input type="hidden" name="title" value="{{ element.get_title() }}"/>
                    <input type="hidden" name="default" value="{{ element.getNumber() }}"/>
                </form>
            </div>
        {% endfor %}
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var optionsContainer = $('#reorder_options');
        var container = $('#reorder_box');

        $('button.autoorder', optionsContainer).bind('click', function(){
            autoorder();

            return false;
        });

        $('button.reverseorder', optionsContainer).bind('click', function(){
            reverse_order();

            return false;
        });

        function autoorder()
        {
            var val = $.trim($('#auto_order').val());

            if(val == '') {
                return;
            }

            var diapos = [];
            $('#reorder_box .diapo form').each(function(i,n){
                diapos.push({
                    "title": $('input[name=title]',n).val(),
                    "order" : parseInt($('input[name=default]',n).val()),
                    "id"  : $('input[name=id]',n).val()
                });
            });

            var sorterCallback;

            if (val === "default")  {
                sorterCallback = function(diapo) {return diapo.order;};
            } else {
                sorterCallback = function(diapo) {return diapo.title;};
            }

            var elements = [];

            _.chain(diapos)
                    .sortBy(sorterCallback)
                    .each(function(diapo) {
                        elements.push($('#ORDER_'+ diapo.id));
                    });

            $('#reorder_box .elements').append(elements);
        }

        function reverse_order() {
            var $container = $('#reorder_box .elements');
            $('#reorder_box .diapo').each(function() {
                $(this).prependTo($container);
            });
        }

        $('.elements', container).sortable({
            appendTo : container,
            placeholder: 'diapo ui-sortable-placeholder',
            distance:20,
            cursorAt: {
                top:10,
                left:-20
            },
            items:'div.diapo',
            scroll:true,
            scrollSensitivity:40,
            scrollSpeed:30,
            start:function(event, ui){
                var selected = $('.selected',container);

                selected.each(function(i,n){
                    $(n).attr('position',i);
                });

                var n = selected.length - 1;

                $('.selected:visible', container).hide();

                while(n > 0)
                {
                    $('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').after($('.diapo.ui-sortable-placeholder', container));
                    n--;
                }
            },
            stop:function(event, ui){

                $('.diapo.ui-sortable-placeholderfollow', container).remove();

                var main_id = $(ui.item[0]).attr('id');

                var selected = $('.selected',container);
                var sorter = new Array();


                selected.each(function(i,n){

                    var position = parseInt($(n).attr('position'));

                    if(position !== '')
                    {
                        sorter[position] = $(n);
                    }

                    var id = $(n).attr('id');
                    if(id == main_id)
                    {
                        return;
                    }

                });

                var before = true;
                var last_moved = $(ui.item[0]);
                $(sorter).each(function(i,n){
                    $(n).show().removeAttr('position');
                    if($(n).attr('id') == main_id)
                    {
                        before = false;
                    }
                    else
                    {
                        if(before)
                            $(n).before($(ui.item[0]));
                        else
                            $(n).after($(last_moved));

                    }
                    last_moved = sorter[i];
                });

            },
            change:function(){
                $('.diapo.ui-sortable-placeholderfollow', container).remove();

                var n = OrderSelection.length() - 1 ;
                while(n > 0)
                {
                    $('<div style="height:130px;" class="diapo ui-sortable-placeholderfollow"></div>').after($('.diapo.ui-sortable-placeholder', container));
                    n--;
                }
            }

        }).disableSelection();

        var OrderSelection = new Selectable($('.elements', container), {
            selector : '.CHIM'
        });


        $('form[name="reorder"] button').bind('click', function(event){
            var $form = $(this).closest("form");

            $('.elements form', container).each(function(i, el){
                var id = $('input[name="id"]', $(el)).val();
                $('input[name="element[' + id + ']"]', $form).val(i+1);
            });

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serializeArray(),
                dataType: 'json',
                beforeSend:function(){

                },
                success: function(data){
                    if(!data.success) {
                        alert(data.message);
                    }
                    p4.WorkZone.refresh('current', null, false, 'story');
                    p4.Dialog.get(1).Close();

                    return;
                },
                error: function(){

                },
                timeout: function(){

                }
            });

            return false;
        });
    });
</script>