var HorizontalMenu = function(Handler, xml)
{
    var This = this;
    var d = document;
    var MenuDoc = null;
    var MenuXml = null;
    var OnClickHandler = Handler;
    if (arguments.length > 1) MenuXml = xml;        
        
    var Menu = new Table();
    var Row = null;
    var ItemOverColor = '#e0e0e0';  
        
    var MenuArray = new Array();       
    
    var BindTo = function(parent)
    {
        Menu.BindTo(parent);
        Menu.Visible(true);
        if (MenuXml != null)
        {
            MenuDoc = new XmlDom(MenuXml);
            var root = MenuDoc.documentElement;
            var MenuHeight = root.getAttribute('Height');
            var BackgroundColor = root.getAttribute('BackgroundColor')
            Menu.BackgroundColor(BackgroundColor);
            Row = Menu.AddRow(MenuHeight)
            var Items = root.childNodes;
            var Cell = null;
            
            for (var i=0;i<Items.length;i++)
            { 
                var Item = Items[i];
                var Text = Item.getAttribute('Text');
                var Width = Item.getAttribute('Width');
                var Value = Item.getAttribute('Value');
                if (!Text && !Width) {alert('problem'); return;}
                MenuArray[i] = Cell = AddItem(Width);
                var CellObj = Cell.DomCell;
                if (Value)
                {
                    Cell.Value = Value;
                    CellObj.onclick = function()
                    {
                        var sm = MenuArray[this.id];
                        if (sm && OnClickHandler) OnClickHandler(sm.Value);
                    }
                    
                }
                CellObj.id = i;
                SetStyle(CellObj,Width,BackgroundColor);
                CellObj.firstChild.innerHTML = Text;
                
                
                CellObj.onmouseover = function()
                {
                    var Cell = MenuArray[this.id];
                    var SubMenu = Cell.Reference;
                    if (SubMenu) SubMenu.Visible(true);
                    this.style.color = 'black';
                    this.style.backgroundColor = ItemOverColor;
                    this.style.cursor = 'hand';
                }
                    
                CellObj.onmouseout = function()
                {
                    var Cell = MenuArray[this.id];
                    var SubMenu = Cell.Reference;
                    if (SubMenu) SubMenu.Visible(false);
                    this.style.color = 'white';
                    this.style.backgroundColor = BackgroundColor;
                    this.style.cursor = 'pointer';
                }
                if (Item.firstChild)
                {
                    var SubItems = Item.firstChild.childNodes;
                    var NbrSubItems = SubItems.length;
                    if (NbrSubItems > 0)
                    {
                        var SubMenu = new VerticalMenu(Item.firstChild);
                        SubMenu.BackgroundColor = BackgroundColor;
                        SubMenu.RegisterHandler(OnClickHandler);
                        Cell.Reference = SubMenu;
                        SubMenu.BindTo(document.body);
                    }
                    else
                        SubMenu = null;
                    }
            }
            for (var i=0;i<Items.length;i++)
            {
                var Cell = MenuArray[i];
                var SubMenu = Cell.Reference;
                if (SubMenu)
                {
                    var Position = Cell.GetPosition();
                    SubMenu.Position('absolute',Position[0],Position[1]);
                }
            }
        }
        Visible(true);
        return This;
    }
        
    var AddItem = function(width)
    {
       return Row.AddCell(width);
    }
       
    var Visible = function(state)
    {
        Menu.Visible(state);
    }
    
    this.BackgroundColor = function(color)
    {
        Menu.BackgroundColor(color);
    }
    
    this.Visible = Visible;    
    this.BindTo = BindTo;    
    this.AddItem = AddItem;    
}
    var SetStyle = function(cell, width, bgColor)
    {
        var FontColor = '#ffffff';
        cell.style.backgroundColor = bgColor;
        cell.style.color = FontColor;
        cell.style.fontFamily = 'arial';
        cell.style.fontWeight = 'bold';
        cell.style.textAlign = 'center';
        cell.style.fontSize = '8pt';
        cell.style.borderWidth = '2px';
        cell.style.borderStyle = 'solid';
        cell.style.borderColor = bgColor;
        cell.style.padding = '0px';
        cell.style.margin = '0px';
        cell.style.width = width;
        //Item.style.backgroundImage = 'url(/images/sidebar_header.png)';
        var div = document.createElement("div");
        div.style.whiteSpace = "nowrap";
        div.style.overflow = 'hidden';
        div.style.textAlign = 'left'; 
        div.style.paddingLeft = '6px'; 
        div.style.paddingRight = '6px'; 
        cell.appendChild(div);
    }

var VerticalMenu = function(Menu)
{
    var RowHeight = Menu.getAttribute('Height');
    var ItemNodes = Menu.childNodes
    var Menu = new Table();
    this.ControlItem = null;
    var This = this;
    d = document;
    this.BackgroundColor = 'black';
    var ItemOverColor = '#e0e0e0';
    var CellArray = new Array();       
    var OnClickHandler = null;    
    var RegisterHandler = function(Handler)
    {
        OnClickHandler = Handler;
    }
    var BindTo = function(parent)
    {
        for (var i=0;i<ItemNodes.length;i++)
        { 
            var Item = ItemNodes[i];
            var Text = Item.getAttribute('Text');
            var Width = Item.getAttribute('Width');
                var ItemCell = CellArray[i] = AddItem(Width);
                var Value = Item.getAttribute('Value');
                if (Value) ItemCell.Value = Value;
                var CellObj = ItemCell.DomCell;
                CellObj.id = i;
                SetStyle(CellObj, Width, This.BackgroundColor);
                CellObj.firstChild.innerHTML = Text;
                CellObj.onmouseover = function()
                {
                    Visible(true);
                    this.style.color = 'black';
                    this.style.backgroundColor = ItemOverColor;
                    this.style.cursor = 'hand';
                }
                    
                CellObj.onclick = function()
                {
                    var sm = CellArray[this.id];
                    if (sm && OnClickHandler) OnClickHandler(sm.Value);
                }
                
                CellObj.onmouseout = function()
                {
                    Visible(false);
                    this.style.color = 'white';
                    this.style.backgroundColor = This.BackgroundColor;
                    this.style.cursor = 'pointer';
                }
        }
        Menu.BindTo(parent);
        return This;
    }
    
    var AddItem = function(width)
    {
        var Row = Menu.AddRow(RowHeight);
        return Row.AddCell(width);
    }
    
    var Visible = function(state)
    {
        Menu.Visible(state);
    }
    var Position = function(mode, left, top)
    {
        Menu.Position(mode, left, top);
    }
        
    var ShowHide = function(obj)
    {
        var div = obj.Div;
        if(div.style.display == 'none')
           div.style.display = 'show';
        else
           div.style.display = 'none';
    }

    this.Visible = Visible;    
    this.Position = Position;
    this.BindTo = BindTo;
    this.AddItem = AddItem;
    this.RegisterHandler = RegisterHandler;
}

var Table = function()
{
    var hello = null;
    var d = document;
    var ThisTable = this;
    var Tbl = d.createElement('table');
    Tbl.cellSpacing = '0';
    Tbl.style.zIndex = 10000;
    var DomTable = Tbl.appendChild(d.createElement('tbody'));
    DomTable.style.display = 'none';
    
    var Visible = function(state)
    {
        if (state) DomTable.style.display = 'block';
        else DomTable.style.display = 'none';
    }
    var Position = function(mode,left,top)
    {
        Tbl.style.position = mode;
        Tbl.style.left = left + 'px';
        Tbl.style.top = top + 'px';
    }
    
    var BackgroundColor = function(color)
    {
        BgColor = color;
    }
    
    var Style = function(style)
    {
        //Tbl.style;
    }
    var BindTo = function(parent)
    {
        parent.appendChild(Tbl)
    }
    
    var Row = function()
    {
        var ThisRow = this;
        this.Table = ThisTable;
        this.DomRow = DomTable.appendChild(d.createElement('tr'));
        //DomRow.style.height = '16px';
        var Cell = function(width)
        {
            var ThisCell = this;
            this.Row = ThisRow;
            this.DomCell = d.createElement('td');
            ThisRow.DomRow.appendChild(this.DomCell);
            
            var GetPosition = function()
            {
                return GetElementPosition(ThisCell.DomCell);
            }

            this.GetPosition = GetPosition;
        }
        
        var AddCell = function(width)
        {
            var cell = new Cell(width);
            return cell;
        }
        this.AddCell = AddCell;
    }
    
    var AddRow = function(height)
    {
        var row = new Row();
        row.DomRow.style.height = height + 'px';
        return row;
    }
    this.BindTo = BindTo;
    this.BackgroundColor = BackgroundColor;
    this.Style = Style;
    this.AddRow = AddRow;    
    this.Position = Position;
    this.Visible = Visible;
}