<div id="menu_add_form">
    <div class="panel">
        <div class="title" id="menu_add_close">
            Add Menu - <a href="javascript:">Cancel</a>
        </div>
        <div class="content clear">
            <div>
                <?php echo $form->render(); ?>
            </div>
            <div>
                &nbsp;
            </div>
        </div>
    </div>
</div>

<div class="clear" id="menu_add_list">
    <?php foreach ($menus as $m) : ?>
        <div class="icon" id="menu_<?php echo htmlspecialchars($m['id']); ?>">
            <div class="content">
                <a href="menu_item/index/<?php echo htmlspecialchars($m['id']); ?>">
                    <img src="admin/skin/icon/folder1.png" /><br /><?php echo htmlspecialchars(ucfirst($m['name'])); ?>
                </a>
            </div>
            <div class="action">
                <a href="menu/edit/<?php echo htmlspecialchars($m['id']); ?>">Edit</a>
                <a href="javascript:delete_menu(<?php echo htmlspecialchars($m['id']); ?>);">Delete</a>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#menu_add_form form').submit(function() {
            form = this;
            $.post('menu/add', {
                    alias:$('input[name="alias"]', this).val(),
                    name:$('input[name="name"]', this).val(),
                    module:$('input[name="module"]:checked', this).val(),
                    position:$('select[name="position"]', this).val()
                },
                function(data, status) {
                    if (data.error != '')
                    {
                        alert(data.error);
                    }
                    else
                    {
                        $('#menu_add_form').toggle();
                        $('#menu_add_list').append('<div class="icon" id="menu_' + data.id + '"><div class="content"><a href="menu_item/index/' + data.id + '"><img src="admin/skin/icon/folder1.png" /><br />' + form.name.value + '</a></div><div class="action"><a href="menu/edit/' + data.id + '">Edit</a><a href="javascript:delete_menu(' + data.id + ');">Delete</a></div></div>');
                        form.name.value = '';
                        form.alias.value = '';
                    }
                }, 'json');
            return false;
        });
        $('#menu_add_form input[name=name]').bind('keyup', function() {
            $('#menu_add_form input[name=alias]').val($(this).val().replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]/g, '-').toLowerCase());
        });
        $('#menu_add_close a').click(function() {
            $('#menu_add_form').toggle();
        });
    });
    
    function delete_menu(id)
    {
        if (confirm('Are you sure?'))
        {
            $.post('menu/delete', { id:id },
                function(data, status) {
                    if (data.error != '')
                    {
                        alert(data.error);
                    }
                    else
                    {
                        $('#menu_' + id).remove();
                    }
                }, 'json');
        }
    }
</script>