<a href="<?php echo WWW_ROOT; ?>menuclassique/ajouter" title="ajouter un element" class="awesome blue right ajax"
   id="menu-ajouter">ajouter un élément</a>
<a href="#" title="enregistrer" class="awesome green right" id="menu-enregistrer">modifications enregistrée !</a>
<h1>Edition du menu</h1>
<p id="menu-aide" class="text-info">Faites glisser les élements du menu pour les positionner.<br />
    Double-cliquer sur un élement pour le modifier.</p>
<div align="center">
    <ul id="sortable_parent" class="all-menu">
        <?php foreach ((array)v('items') as $MenuItem) {
        $hasSubMenu = sizeof($MenuItem->items) > 0;

        ?>
        <li class="p-menu" id="<?php echo $MenuItem->id; ?>">
            <div class="p-menu-title item" rel="<?php echo $MenuItem->id; ?>"><?php echo $MenuItem->nom; ?></div>
            <ul id="sub_<?php echo $MenuItem->id; ?>" class="all-sub-menu">
                <?php
                if ($hasSubMenu) {
                    foreach ($MenuItem->items as $SubItem) {
                        ?>
                        <li class="s-menu" id="<?php echo $SubItem->id; ?>">
                            <div class="s-menu-title item"
                                 rel="<?php echo $SubItem->id; ?>"><?php echo $SubItem->nom; ?></div>
                        </li>
                        <?php
                    }
                } ?>
                <li></li>
                <!--Empty So things can be dropped -->
            </ul>
        </li>
        <?php } ?>
    </ul>
</div>

<link rel="stylesheet" href="<?php echo WWW_ROOT; ?>app/modules/menuclassique/style.css">

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo WWW_ROOT; ?>app/layout/js/jquery.blockUI.js"></script>
<script type="text/javascript">
    var timeout;
    $(function () {

        $('#btn-fermer').live('click',function () {
            $.unblockUI();
        });

        $('.item').dblclick(function (e) {
            var elt = $(this);
            e.preventDefault();
            $("#box_ui").html("chargement en cours");
            $.ajax({
                url:'<?php echo WWW_ROOT; ?>menuclassique/modifier/' + $(this).attr('rel'),
                cache:false,
                success:function (html) {
                    $("#box_ui").html(html);
                },
                error:function (request, status, error) {
                    $.unblockUI();
                }
            });

            $.blockUI({
                message:$('#box_ui'),
                css:{ top:'10%', width:'500px', height:'160px' }
            });

            return false;
        });

        $("input[type=radio]").live('click', function () {
            $("#row-url-interne").hide();
            $("#row-url-externe").hide();

            if ($(this).val() == 'interne') {
                $("#row-url-interne").show();
            } else if ($(this).val() == 'externe') {
                $("#row-url-externe").show();
            }

        });

        $("#form-menu-ajouter").live('submit',function () {
            var url = " ";
            if ($("#row-url-interne").is(':visible')) {
                url = $("#url-interne").val();
            } else if ($("#row-url-externe").is(':visible')) {
                url = $("#url-externe").val();
            }
            $("input[name='url']").val(url);
            return true;
        });


        $('#sortable_parent').sortable({
            handle:'.p-menu-title',
            cursor:'hand',
            placeholder:'ui-state-highlight-top',
            update:enregistrerMenu
        });


        $(".all-sub-menu").sortable({
            connectWith:'.all-sub-menu',
            placeholder:'ui-state-highlight',
            dropOnEmpty:false,
            update:enregistrerMenu
        }).disableSelection();
        $("#menu-enregistrer").hide();
        function enregistrerMenu() {
            window.clearTimeout(timeout);
            var serialized = serialize();
            $.ajax({
                type:"POST",
                url:"<?php echo php_self(); ?>",
                data:{menu:serialized}
            }).done(function (msg) {
                        $("#menu-enregistrer").show();
                        timeout = window.setTimeout(function () {
                            $("#menu-enregistrer").fadeOut();
                        }, 2000);
                    });
        }
    });


    var serialize = function () {
        var menu = [];
        var roots = $("#sortable_parent").sortable("toArray");
        var position_root = 0;
        $.each(roots, function (indexRoot) {
            menu.push({
                id:roots[indexRoot],
                position:position_root++,
                parent:0
            });
            var items = $("#sub_" + roots[indexRoot]).sortable("toArray");
            var position_child = 0;
            $.each(items, function (indexItem) {
                if (items[indexItem] != '') {
                    menu.push({
                        id:items[indexItem],
                        position:position_child++,
                        parent:roots[indexRoot]
                    });
                }
            });
        });
        return menu;
    }
</script>