/* Use
   Create a new menu, with optional title string
   m = new Menu("title");
   ... you can also associate the menu with an object (a marker, perhaps)
   by passing the object in as the second parameter to menu
   m = new Menu("title", marker);

   Then, add menu items to the menu:
   m.addItem("Non-selectable text")
   m.addItem("<hr/>");
    -or- selectable items:
   m.addItemSelectable("text", function);
   
   You can open the menu using
   m.openMenu(pixel, url, obj);
   ... which causes the menu to open at pixel. url and obj are not used
   "pixel" is same as you get from a mouse click event

   Closing a menu is probably not necessary -- it's done automatically
   when something is selected, or after a short timeout, if the mouse exits
   m.closeMenu()

   Generally, you hook in menus by having a click or right click callback:
   GEvent.addListener(map, "singlerightclick", makeMenu);
   ...
   function makeMenu(pixel, url, obj){
       var m = new Menu("title", obj)  //note that 'obj' would be a marker obj 
                                       //if clicked upon by event
       m.addItem...
       m.openMenu(pixel, null, obj);
   }

   For menu item call backs, they are:
   function callback(pixel, url, obj) {
       // pixel is the click point (probably not used, since you 
       // probably want the menu's pixel, not this call back menu item's pixel)
       // 'this' points to the menu item
       // that means...
       // var menu = this.menu
       // var obj  = this.menu.obj

       // when done, close the menu, by telling the item you've been clicked()
       this.clicked()
   }
 */

function Menu(title, obj) {
    var div = document.createElement("div");
    this.div = div;
    this.obj = obj; // 'obj' is whatever -- it is made available to the functions called on menu selection
    this.itemList = new Array();
    this.timeOut = null;
    div.className = "menu";
    div.menu = this;
    var mapDiv = map.getContainer();
    mapDiv.appendChild(div);
    GEvent.addDomListener(this.div, "mouseover", GEvent.callback(this, this.mouseover));
    GEvent.addDomListener(this.div, "mouseout", GEvent.callback(this, this.mouseout));
    if (title != null) {
	var d = this.addItem(title);
	d.div.className = "menu_title";
    }
    return this;
};

Menu.prototype.mouseover = function() {
    this.total++;
    if (this.timeOut) {
	clearTimeout(this.timeOut);
	this.timeOut = null;
    }
    //    GLog.write("Mouseover menu div "+ this.total);
};

Menu.prototype.mouseout = function() {
    this.total --;
    if (this.total < 1 && this.timeOut == null) {
	this.timeOut = setTimeout(GEvent.callback(this, this.tryCloseMenu), 800);
    }
    //    GLog.write("Mouseout menu div "+this.total);
};

Menu.prototype.addItem = function(str, call) {
    var item = new MenuItem(this, str);
    // non-selectable item
    item.div.className = "menu_item";
    return item;
};

Menu.prototype.addItemSelectable = function(str, callback) {
    var item = new MenuItem(this, "<a href='#' class='menu_item_a'>"+str+"</a>", callback);
    item.div.className = "menu_item_selectable";
    GEvent.addDomListener(item.div, "click", GEvent.callback(item, callback));
    return item;
};

Menu.prototype.addItemURL = function(str, url) {
    var item = new MenuItem(this, str, function(){window.open(url);});
    item.div.className = "menu_item_url";
    GEvent.addDomListener(item.div, "click", function() {window.open(url);});
    return item;
};

Menu.prototype.openMenu = function(pixel, url, obj) {
    // "this" is the menu instance, "obj" is the underlying map (where the click was)
    //    GLog.write("right click...");
    this.div.style.display = "block";
    this.div.style.left = pixel.x + "px";
    this.div.style.top = pixel.y + "px";
    this.total = 0;
    this.timeOut = setTimeout(GEvent.callback(this, this.tryCloseMenu), 2000);
};

Menu.prototype.tryCloseMenu = function(obj) {
    if (this.total > 0) {
	//	GLog.write('aborting close '+this.total);
	return;
    }
    //    GLog.write("closing menu");
    this.closeMenu();
};

Menu.prototype.closeMenu = function(obj) {
    this.div.style.display = "none"
};


// not called directly, but only from within Menu???
function MenuItem(menu, str, callback) {
    var div = document.createElement("div");
    this.total = 0;
    this.div = div;
    this.div.menuItem = this; // so clicks on the div will get back to MenuItem
    this.menu = menu; // my parent Menu
    this.str = str;
    div.innerHTML = str;
    menu.div.appendChild(div);
    menu.itemList.push(this);
    GEvent.addDomListener(this.div, "mouseover", GEvent.callback(this, this.mouseover));
    GEvent.addDomListener(this.div, "mouseout", GEvent.callback(this, this.mouseout));
    return this;
};

MenuItem.prototype.mouseover = function() {
    this.menu.total++;
    //        GLog.write("Mouseover "+this.str+' '+this.menu.total);
};
MenuItem.prototype.mouseout = function() {
    this.menu.total--;
    //        GLog.write("Mouseout "+this.str+' '+this.menu.total);
};

MenuItem.prototype.clicked = function () {
    this.menu.closeMenu(); // because I've selected something.
};