procedure print_menu as
  l_parent_id integer;
  cursor parents is
    select * from billing2_menu
    where parent is null
    order by disp_order;
  cursor children is
    select * from billing2_menu
    where parent = l_parent_id
    order by disp_order;
  begin
    for c in parents loop
      l_parent_id := c.menu_id;
      htp.p('<div class="item">');
      htp.p('<a class="' || c.class_name || '"></a>');
      htp.p('<div class="item_content"><h2>' || c.title || '</h2>');
      htp.p('<p>');
      for crow in children loop
        htp.p('<a href="#">' || crow.title || '</a>');
      end loop;
      htp.p('</p>');
      htp.p('</div>');
      htp.p('</div>');
    end loop;
  end print_menu;

$(document).ready(function(){
    var options = {
	 appProcess: 'LOAD_MENU',
     dataType: 'json',
	 success:
	   function(data){
           $('.menu').append(data);
           }
        };
	$.jApex.ajax(options);
});

procedure print_menu_json as
  l_parent_id integer;
  menu json_list;
  parent_node json;
  child_node json;
  child_list json_list;
  cursor parents is
    select menu_id, title, coalesce(class_name, 'none') as class_name from billing2_menu
    where parent is null
    order by disp_order;
  cursor children is
    select title, coalesce(class_name, 'none') as class_name, coalesce(target, 'none') as target  from billing2_menu
    where parent = l_parent_id
    order by disp_order;
  begin
    menu := json_list();
    for c in parents loop
      parent_node := json();
      l_parent_id := c.menu_id;
      child_list := json_list();
      for crow in children loop
        child_node := json();
        child_node.put('title', crow.title);
        child_node.put('classname', crow.class_name);
        child_node.put('target', crow.target);
        child_list.add_elem(child_node.to_json_value);
      end loop;
      parent_node.put('title', c.title);
      parent_node.put('classname', c.class_name);
      parent_node.put('childlist', child_list.to_json_value);
      menu.add_elem(parent_node.to_json_value);
    end loop;
    htp.p(menu.to_char);
  end print_menu_json;

$(document).ready(function(){
    var options = {
	 appProcess: 'LOAD_MENU',
     dataType: 'json',
	 success:
	   function(data){
           for (var i =  0 ; i < data.length; i++){
               var str;
               str = '<div class="item">' +
                     '<a class="' + data[i].classname + '"></a>' +
                     '<div class="item_content"><h2>' + data[i].title + '</h2>' +
                     '<p>';

               for (var c =  0 ; c < data[i].childlist.length; c++){
                   str += '<a href="#">' + data[i].childlist[c].title + '</a>';
               }
               str += '</p></div></div>';
               $('.menu').append(str);
           }
        $('.item').hover(
            function(){
                var $this = $(this);
                expand($this);
            },
            function(){
                var $this = $(this);
                collapse($this);
            });
         }
        };
	$.jApex.ajax(options);
});