{% include "popups/headitem.html.twig" with {title: "GENERAL_ADMIN_TITLE"|translate} %}

<script type="text/javascript">
    initAoc = function()
    {

        YAHOO.oxid.container1 = new YAHOO.oxid.aoc( 'container1',
                                                    [ {% for iKey, aItem in oxajax.container1 %}
                                                       {{ sSep }}{% apply spaceless %}{ key:'_{{ iKey }}', ident: {% if aItem.4 %}true{% else %}false{% endif %}
                                                       {% if not aItem.4 %},
                                                       label: '{{ translate({ ident: "GENERAL_AJAX_SORT_"|cat(aItem.0)|upper }) }}',
                                                       visible: {% if aItem.2 %}true{% else %}false{% endif %}
                                                       {% endif %}}
                                                      {% endapply %}
                                                      {% set sSep = "," %}
                                                      {% endfor %} ],
                                                    '{{ oViewConf.getAjaxLink()|raw }}cmpid=container1&container=selectlist_main&synchoxid={{ oxid }}'
                                                    );

        {% set sSep = "" %}

        YAHOO.oxid.container2 = new YAHOO.oxid.aoc( 'container2',
                                                    [ {% for iKey, aItem in oxajax.container2 %}
                                                       {{ sSep }}{% apply spaceless %}{ key:'_{{ iKey }}', ident: {% if aItem.4 %}true{% else %}false{% endif %}
                                                       {% if not aItem.4 %},
                                                       label: '{{ translate({ ident: "GENERAL_AJAX_SORT_"|cat(aItem.0)|upper }) }}',
                                                       visible: {% if aItem.2 %}true{% else %}false{% endif %},
                                                       formatter: YAHOO.oxid.aoc.custFormatter
                                                       {% endif %}}
                                                      {% endapply %}
                                                      {% set sSep = "," %}
                                                      {% endfor %} ],
                                                    '{{ oViewConf.getAjaxLink()|raw }}cmpid=container2&container=selectlist_main&oxid={{ oxid }}'
                                                    );
        YAHOO.oxid.container1.modRequest = function( sRequest )
        {
            oSelect = $('artcat');
            if ( oSelect.selectedIndex ) {
                sRequest += '&oxid='+oSelect.options[oSelect.selectedIndex].value+'&synchoxid={{ oxid }}';
            }
            return sRequest;
        }
        YAHOO.oxid.container1.filterCat = function( e, OObj )
        {
            YAHOO.oxid.container1.getPage( 0 );
        }
        YAHOO.oxid.container1.getDropAction = function()
        {
            return 'fnc=addarttosel';
        }
        YAHOO.oxid.container2.getDropAction = function()
        {
            return 'fnc=removeartfromsel';
        }
        $E.addListener( $('artcat'), "change", YAHOO.oxid.container1.filterCat, $('artcat') );

        YAHOO.oxid.container3 = null;
        YAHOO.oxid.container2.subscribe( "dataReturnEvent", function( oParam ) {
            if ( YAHOO.oxid.container3.oContextMenu ) {
                YAHOO.oxid.container3.oContextMenu.destroy();
            }
            YAHOO.oxid.container3 = null;
            $('container3').innerHTML = '';
            $D.setStyle( $('orderup'), 'visibility', 'hidden' );
            $D.setStyle( $('orderdown'), 'visibility', 'hidden' );
        })
        //
        YAHOO.oxid.container2.subscribe( "rowSelectEvent", function( oParam )
        {
            var sOxid = oParam.record._oData._7;
            if ( YAHOO.oxid.container3 == null) {
                YAHOO.oxid.container3 = new YAHOO.oxid.aoc( 'container3',
                                                [ {% for iKey, aItem in oxajax.container3 %}
                                                   { key:'_{{ iKey }}', ident: {% if aItem.4 %}true{% else %}false{% endif %}
                                                   {% if not aItem.4 %},
                                                   label: '{{ translate({ ident: "GENERAL_AJAX_SORT_"|cat(aItem.0)|upper }) }}',
                                                   visible: {% if aItem.2 %}true{% else %}false{% endif %},
                                                   formatter: YAHOO.oxid.aoc.custFormatter,
                                                   sortable: false
                                                   {% endif %}},
                                                  {% endfor %} ],
                                                '{{ oViewConf.getAjaxLink()|raw }}cmpid=container1&container=selectlist_order&oxid='+sOxid,
                                                { selectionMode:'single' }
                                                )
                //
                YAHOO.oxid.container3._lastRecord = false;
                YAHOO.oxid.container3.subscribe( "dataReturnEvent", function()
                {
                    $D.setStyle( $('orderup'), 'visibility', 'hidden' );
                    $D.setStyle( $('orderdown'), 'visibility', 'hidden' );
                })
                YAHOO.oxid.container3.subscribe( "rowClickEvent", function( oParam )
                {
                    var sVisibility = 'hidden';
                    if ( YAHOO.oxid.container3.getSelectedRows().length ) {
                        sVisibility = '';
                    }
                    $D.setStyle($('orderup'), 'visibility', sVisibility );
                    $D.setStyle($('orderdown'), 'visibility', sVisibility );
                })
                YAHOO.oxid.container3.setOrderUp = function()
                {
                    var aSelRows = YAHOO.oxid.container3.getSelectedRows();
                    if ( aSelRows.length ) {
                        sOxid = YAHOO.oxid.container3.getRecord(aSelRows[0])._oData._4;
                        YAHOO.oxid.container3.modRequest = function( sRequest ) { return sRequest+'&fnc=setSorting&sortoxid='+sOxid+'&direction=up'; }
                        YAHOO.oxid.container3.getDataSource().flushCache();
                        YAHOO.oxid.container3.getPage( 0 );
                    }
                }
                YAHOO.oxid.container3.setOrderDown = function()
                {
                    var aSelRows = YAHOO.oxid.container3.getSelectedRows();
                    if ( aSelRows.length ) {
                        sOxid = YAHOO.oxid.container3.getRecord(aSelRows[0])._oData._4;
                        YAHOO.oxid.container3.modRequest = function( sRequest ) { return sRequest+'&fnc=setSorting&sortoxid='+sOxid+'&direction=down'; }
                        YAHOO.oxid.container3.getDataSource().flushCache();
                        YAHOO.oxid.container3.getPage( 0 );
                    }
                }

                $E.addListener( $('orderup'), "click", YAHOO.oxid.container3.setOrderUp, $('orderup') );
                $E.addListener( $('orderdown'), "click", YAHOO.oxid.container3.setOrderDown, $('orderdown') );
                YAHOO.oxid.container3._lastRecord = oParam.record;
            } else if ( !YAHOO.oxid.container3._lastRecord || YAHOO.oxid.container3._lastRecord != oParam.record ) {
                YAHOO.oxid.container3._lastRecord = oParam.record;
                YAHOO.oxid.container3.modRequest = function( sRequest ) { return sRequest+'&oxid='+sOxid; }
                YAHOO.oxid.container3.getPage( 0 );
            }
        })
    }
    $E.onDOMReady( initAoc );
</script>

    <table width="100%">
        <colgroup>
            <col span="3" width="32%" />
            <col span="1" width="4%" />
        </colgroup>
        <tr class="edittext">
            <td colspan="4">{{ translate({ ident: "GENERAL_AJAX_DESCRIPTION" }) }}<br>{{ translate({ ident: "GENERAL_FILTERING" }) }}<br /><br /></td>
        </tr>
        <tr class="edittext">
            <td align="center" valign="top"><b>{{ translate({ ident: "GENERAL_ALLITEMS" }) }}</b></td>
            <td align="center" valign="top">
              <b>{{ translate({ ident: "SELECTLIST_MAIN_ITEMSWITHCHOSLIST" }) }}</b><br />
              <b>{{ translate({ ident: "GENERAL_CLICKFORDETAILS" }) }}</b>
            </td>
            <td align="center" valign="top">{{ translate({ ident: "SELECTLIST_MAIN_CHOSENITEMSLIST" }) }}</td>
            <td></td>
        </tr>
        <tr>
            <td class="oxid-aoc-category">
                <select name="artcat" id="artcat">
                {% for pcat in artcattree.__get('aList') %}
                <option value="{{ pcat.oxcategories__oxid.value }}">{{ pcat.oxcategories__oxtitle.value }}</option>
                {% endfor %}
                </select>
            </td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td valign="top" id="container1"></td>
            <td valign="top" id="container2"></td>
            <td valign="top" id="container3"></td>
            <td valign="middle" rowspan="2">
            <input class="edittext" type="button" id="orderup" value="/\" style="visibility:hidden"><br><br>
            <input class="edittext" type="button" id="orderdown" value="\/" style="visibility:hidden">
            </td>
        </tr>
        <tr>
            <td class="oxid-aoc-actions"><input type="button" value="{{ translate({ ident: "GENERAL_AJAX_ASSIGNALL" }) }}" id="container1_btn"></td>
            <td class="oxid-aoc-actions"><input type="button" value="{{ translate({ ident: "GENERAL_AJAX_UNASSIGNALL" }) }}" id="container2_btn"></td>
        </tr>
    </table>

</body>
</html>