// save style before / after expand / collapse operations
var styleBefore = [];

// flag indicating if menues are toggled on / off
var menusActive = true;

// references to the currently active menues
var activeMenu = [];

// maximum menu nesting level
var maxLevels = 10;

// timer
var ID_Timer = null;
// Toggle menus on/off.


function start_close(minLevel) {
	if(ID_Timer==null) {
		ID_Timer=setTimeout('collapseMenus('+ minLevel + ')',1000);
	}
}

function toggleMenus(menu)
{
    menusActive = ! menusActive;
    if (menusActive)
    {
        activeMenu[0] = menu;
        expand(activeMenu[0], 0);
    }
    else
    {
        collapseMenus(0);
    }
}

// Collapses all active menus from minLevel (to maxLevels)
function collapseMenus(minLevel)
{
    for(i = maxLevels; i >= minLevel; i--)
    {
        if (activeMenu[i] != null)
        {
            collapse(activeMenu[i], i);
            activeMenu[i] = null;
        }
    }                
}

// activates a menu if menus are active. Deactivates any previously selected menu.
function activateMenu(menu, level)
{
	clearTimeout(ID_Timer);
	ID_Timer = null;
    if (menusActive && activeMenu[level] != menu)
    {
        collapseMenus(level);
        expand(menu, level);
    }
    activeMenu[level] = menu; 
}

// marks an item as non-selected
function deselect(menu)
{
    menu.className = "menuNormal";
}

// highlights menus and expands submenus
function expand(menu, level)
{
  var d = menu.getElementsByTagName("div").item(0);
  
  styleBefore[level] = menu.className;

  menu.className = "menuHover";
  if (d != null)
  {   
	d.className = "menuHover";
  }
}

// deselects menus and collapses any submenus
function collapse(menu, level)
{
  var d = menu.getElementsByTagName("div").item(0);
  menu.className = styleBefore[level];
  d.className = "menuNormal";
}

function display_editable_contextual_menu()
{
	var d = document.getElementById('editable_contextual_menu');
	var menu_id;
	var menu_count ;
	var menu_list = [];
	var str_menu_list =[] ;
	
	d.innerHTML="";
	result= ""; 
	menu_count=0;
  	string_menu_list ='';

	var info_div = document.getElementById('debug');
	//info_div.innerHTML = editable_contextual_menu.toJSON() ;
	
	result = "<ul id=\"menu\">";
	editable_contextual_menu.each(function(item) {
		  result += "<li id=\"menu_" + item.id + "\" style=\"margin:0px; padding:0px;\">";
		  result += "<input id='name_menu_" + item.id + "' name='name_menu_" + item.id + "' type=text value='" +  item.name + "' class=\"menu_title\" />";
		  result += "<a href=\"javascript:remove('menu_" + item.id +"');\" class=\"menu_entry\" ><img src='/admin/img/poubelle.gif' style='border:0px;height:18px; margin-bottom:-4px;'></a>";
		  result += "<ul id=\"submenu_" + item.id + "\">";
		  
		  menu_list[menu_count] = { id: 'submenu_' + item.id } ;
		  str_menu_list[menu_count] = 'submenu_' + item.id  ;
		  menu_count++;
		  
		  var menu_entries = item.sub_menus ;
		  if(menu_entries == '') {
		  	result += "-";
		  }
		  
		  menu_entries.each(function(sub_item) {
		  	result += "<li style=\"margin:0px; padding:0px;\" id=\"submenu_" + item.id + "_" + sub_item.id + "\">";
		  	result += "<input id='id_submenu_" + item.id + "_" + sub_item.id + "' type=hidden value='" + sub_item.menu_id + "' />";
		  	result += "<input id='name_submenu_" + item.id + "_" + sub_item.id + "' type=text value='" + sub_item.name + "' class=\"menu_entry\" />" ;
		  	result += "<a href=\"javascript:remove('submenu_" + item.id + "_" + sub_item.id + "');\" class=\"menu_entry\" ><img src='/admin/img/poubelle.gif' style='border:0px;height:18px; margin-bottom:-4px;'></a>";
		  	result += "</li>";
			});
		  result += "</ul>";
		  result += "</li>";

	});
	result += "</ul>";
	result += "<a href=\"javascript:add_url();\" class=\"menu_entry\">add url</a> | ";
	result += "<a href=\"javascript:add_block();\" class=\"menu_entry\">add block</a>";
	d.innerHTML=result;
	
	
	
	menu_list.each(function(item) {
		Sortable.create(item.id,{containment: str_menu_list , dropOnEmpty:true , onUpdate: function () {
			store_menus(item.id);
			display_editable_contextual_menu();
			}
		});
	});
	Sortable.create('menu',{containment:['menu'], dropOnEmpty:true , onUpdate: function () {
			store_menus('menu');
			display_editable_contextual_menu();
			}
		});
}

function add_url() {
	window.open('/admin/menu_chooser.php','URL Chooser','width=300, height=550, status=no, directories=no, toolbar=no, location=no, menubar=no, scrollbars=yes, resizable=yes') ;
}

function add_url_callback(selection,title,desc) {
	
	store_menus();
	//Find last block
	count=1;
	editable_contextual_menu.each(function(item) {
		count++;
	});
	
	count--;
	sub_menu_count=1;
	var subelems = editable_contextual_menu[count].sub_menus ;
	
	subelems.each(function(item) {
			sub_menu_count++;
	});	
	
	subelems[sub_menu_count] = { id: sub_menu_count, menu_id: selection , name: title  } ;
	display_editable_contextual_menu();
}


function remove(what) {
	menu = $(what);
	menu.remove();
	store_menus();
	display_editable_contextual_menu();
}

function add_block() {
	
	store_menus();
	count=1;
	editable_contextual_menu.each(function(item) {
		count++;
	});	
	
	editable_contextual_menu[count]={ id: count, name: 'Nouveau Bloc', sub_menus: [] } ;
	
	display_editable_contextual_menu();
}

function store_menus(what) {
	
	//window.alert(what);
	menu = $('menu');
	elems = menu.immediateDescendants()
	
	menu_count=1;
	editable_contextual_menu = [] ;
	//First Level
	elems.each(function(item) {
		menu_title = document.getElementById('name_' + item.id) ;
		subelem=$('sub' + item.id);
		subelems = subelem.immediateDescendants()
		sub_menu_count = 1;
		sub_menu =[];
		subelems.each(function(item) {
				submenu_title = document.getElementById('name_' + item.id) ;
				submenu_id = document.getElementById('id_' + item.id) ;
				sub_menu[sub_menu_count]= { id: sub_menu_count, menu_id: submenu_id.value , name:submenu_title.value  } ;
				sub_menu_count++;
		});
					
		editable_contextual_menu[menu_count] = { id: menu_count, name : menu_title.value, sub_menus: sub_menu } ;
		menu_count ++ ;
	});
	
	$('menu_JSON').value=editable_contextual_menu.toJSON();
}