var ContextMenu = Class.create();

ContextMenu.prototype={
  initialize: function(container,items)
  {

    this.builder = new DOMBuilder(null,"contextMenu");  
    this.container = $(container); 
    this.textItems = items;
    this.items = new Array();
    this.groupsCount = 0;
    this.render();
    
    this.bindHandlers();
  },
  hide:function()
  {
    Element.hide(this.element);
    if(this.onClose) this.onClose(this);
  },
  show:function()
  {
     this.checkdivider();
    Element.show(this.element);
  },
  bindHandlers:function()
  {

   if(isOpera)  this.container.onmousedown = this.onshow.bindAsEventListener(this);
    this.container.oncontextmenu = this.onshow.bindAsEventListener(this);
    document.onclick = this.hide.bindAsEventListener(this);
  },
  onshow:function(event)
  { 
   var e = event;

    this.contextElement = Event.element(event);
   if(this.onBeforeShow) this.onBeforeShow(this, this.contextElement,e);
    var x = Event.pointerX(e);
    var y = Event.pointerY(e);
    setPosition(this.element,x,y);
    this.show();
    Event.stop(e);

  },
  
  render:function()
  {
  
     this.element = this.builder.addTo(document.body,"1","show-pnav");
     this.hide();
     var groups =0;
     var group =  this.addGroup();
     for(var i=0;i<this.textItems.length;i++)
     {
     var ti = this.textItems[i];
     if(ti.type!="divider")
     {
      this.items.push(new ContextMenuItem(this,group,ti.text,ti.onclick,i));
     }
     else 
     {
       group =  this.addGroup();
     }
     
   
       
   }
   group.className ="last-t";
   this.groups= $A(this.element.childNodes);

    /*
      <div class="show-pnav" style="top:123px; left:694px">
						<ul>
							<li><a href="#">Select column</a></li>
							<li><a href="#">Select row</a></li>
							<li><a href="#">Edit column</a></li>
							<li><a href="#">Edit row</a></li>
						</ul>
						<ul>
							<li><a href="#">Filter by cell</a></li>
							<li><a href="#">Sort column ASC</a></li>
							<li><a href="#">Sort column DESC</a></li>
						</ul>
						<ul>
							<li><a href="#">Hide floating</a></li>
							<li><a href="#">Show floating left</a></li>
							<li><a href="#">Show floating top</a></li>
						</ul>
						<ul class="last-t">
							<li><a href="#">Outlets</a></li>
						</ul>
					</div>

    */
  },
  addGroup:function()
  {
  
    var num = this.groupsCount;
    this.groupsCount++;
    return this.builder.addTo(this.element,"group_"+num,"","ul");
  },
  checkdivider:function()
  {

      for(var i=0;i<this.groups.length;i++)
     {
       this.groups[i].style.display= this.groupIsEmpty(this.groups[i])?"none":"block";
       this.groups[i].className ="";
     }
     this.getLatestGroup().className="last-t";
     this.getLatestGroup().style.display = "block"; 
     
  },
  groupIsEmpty:function(group)
  {
      var isEmpty=true;
      var nodes = group.childNodes;
     for(var i=0;i<nodes.length;i++)
     {
        if(nodes[i].style.display!="none")isEmpty =false;  
     }
     return isEmpty;
  },
  getLatestGroup:function()
  {
    var latestIndex =0;
      for(var i=0;i<this.groups.length;i++)
     {
        if(this.groups[i].style.display!="none") latestIndex=i;
     }
     return this.groups[latestIndex];
  }
  
   
}
var ContextMenuItem = Class.create();
ContextMenuItem.prototype ={ 
 initialize : function(menu,group,text,onclick,index)
 {
   this.text = text;
   this.index = index;
   this.menu = menu;
   this.container = group;
   this.builder = menu.builder;
   this.onclick = onclick;
   this.render();
 },
 
 render:function()
 {
   this.element=this.builder.addTo(this.container,"item_"+this.index,"","li");   
   this.element.onclick = this.processOnclick.bindAsEventListener(this);
   this.element.innerHTML ="<a href='javascript:void(0);'>"+this.text+"</a>";
 },
 processOnclick:function(e)
 {
   this.menu.hide();
     this.onclick( this.menu.contextElement,this);
 },
 hide:function()
 {
   this.state="hidden";
   Element.hide(this.element);
 },
 show:function() 
 {
    this.state="visible";
   Element.show(this.element);
 }

}



var MenuWrapper = Class.create();
MenuWrapper.prototype ={ 
 initialize : function(id,items,onMenuItemClick)
 {
///debugger;
     this.grid = $(id);
     this.bodyId = this.grid.getElementsByTagName("tbody")[0].id;
     debugger;
     this.elem =createDiv("context",document.body);
 
     this.elem.style.position= "absolute";
 	this.contextMenu =new YAHOO.widget.ContextMenu( this.elem, { trigger:  this.bodyId  }); 
 	this.menuItems = items;
 	this.onMenuItemClick=onMenuItemClick;
    this.render();
 },
 getMenuItemsCount:function()
 {
   return this.menuItems.length;
 },
 
 createMenuItem:function(menuItem)
 {
    var item =  new YAHOO.widget.ContextMenuItem(menuItem.text);    
     item.clickEvent.subscribe(this.onMenuItemClick, item, true  );
     this.contextMenu.addItem(item);
 },
 createMenuItems:function()
 {
  //debugger;
  var count = this.getMenuItemsCount();
    for(var i=0; i<count; i++) 
   {
       this.createMenuItem(this.menuItems[i]);
   }
 },
 addHandlersToMenu:function()
 {
     // add events to menu
    this.contextMenu.moveEvent.subscribe(this.onContextMenuMove, this, true);
   
   // Add a "keydown" event handler to the context menu
      this.contextMenu.keyDownEvent.subscribe(this.onContextMenuKeyDown,this,true);
   
 
 },

 onContextMenuMove:function(eventName,eventObject,me)
 {
     //  debugger;
 },
 onContextMenuKeyDown:function()
 {
     //  debugger;
 },
 render:function()
 {   
    this.createMenuItems();
    this.addHandlersToMenu(); 
    this.contextMenu.render(this.grid.parentNode);  
 }
 };