//　关联菜单控件
//
//　初始化控件：    var menu = new RelateMenu({el: "元素id",css: "菜单样式",ifSet:false}); //其中 el 必须
//  清空控件内容：  menu.Clear() 
//　添加内容：      menu.Add({data : "显示"，css: "样式", click: "点击事件"}) //  其中data 必须
//  显示控件 ：     menu.Show()
function RelateMenu(params)
{
    //当有控件指定时，执行绑定menu初始化操作
    if(params.el)
    {        
        this.RecordCount = 0;
        This = this;

        //返回jquery的父元素对象            
        this.parentElement = $("#" + params.el);
        
        //doc的父元素对象
        this.doc_parentElement = document.getElementById(params.el);
        
        //元素不存在。返回
        if(!this.doc_parentElement)
            return;
        
        //返回父元素的位置          
        var offset = this.parentElement.offset();
        //创建关联菜单
        var div = document.createElement("div");
        
        this.padding_top = (this.doc_parentElement.style.paddingTop != "")
                           ?parseInt(this.doc_parentElement.style.paddingTop.substr(0, this.doc_parentElement.style.paddingTop.length-1))
                           :0;
                           
        this.padding_left = (this.doc_parentElement.style.paddingLeft != "")
                            ?parseInt(this.doc_parentElement.style.paddingLeft.substr(0, this.doc_parentElement.style.paddingLeft.length-1))
                            :0;
        this.divMenu = $(div);
        //设置菜单样式
        this.divMenu.css("position","absolute")
                .css("top",offset.top + this.parentElement.height() + this.padding_top)
                .css("left",offset.left)
                .css("width",this.parentElement.width() + this.padding_left-2)
                .css("border","1px solid #ccccff")
                .css("display","none")
                .css("background","white").css("z-index","10000");  
                          
      
        //如果有传入样式，设置该样式  
        if(params.css)              
            this.divMenu.attr("class",params.css);   
        //将菜单添加到表单中     
        document.body.appendChild(div);        
      
        
        //创建关闭 
        var divClose = document.createElement("div");            
        this.divClose = $(divClose);
        this.divClose.css("text-align","right");
        var aClose = document.createElement("a");
        aClose.onclick = function(){
            This.Hide();
        }
        aClose.href = "###";
        aClose.innerHTML = "关闭";
        this.divClose.append(aClose);     
        
        //设置点击时表单其它地方时，隐藏菜单            
        $(document).click(function()
        {            
            This.OtherClick(This.divMenu);
        })
        
        if(params.ifSet)
            this.ifSet = false;
        else
            this.ifSet = true;
        //十字光标键  不支持FF
        this.objLast = null;
        window.document.getElementById(params.el).onkeydown = function()
        {
            var code  = getEvent().which || getEvent().keyCode; 
            if(code == 13)
                This.Hide();
            if(div.childNodes[This.RecordCount-1] == undefined)
                return; 
            var lht = div.childNodes.length;
            switch(code)
            {
                //向上光标
                case 38:
                    if(lht == 1)
                        break;
                    if(!This.objLast)
                    {
                        This.objLast = div.childNodes[This.RecordCount-1];
                        This.objLast.style.background = "#ff99ff";
                    }
                    else
                    {
                        This.objLast.style.background = "#ffffff";
                        if(This.objLast.previousSibling)
                        {
                            This.objLast = This.objLast.previousSibling;
                            This.objLast.style.background = "#ff99ff";
                        }
                        else
                        {
                            This.objLast = div.childNodes[This.RecordCount-1];
                            div.childNodes[This.RecordCount-1].style.background = "#ff99ff";    
                        }
                    }
                    if(This.ifSet)
                        This.parentElement.val(This.objLast.childNodes[0].childNodes[0].rows[0].cells[0].innerHTML);  
                    This.parentElement.focus();
                    break;
                //向下光标
                case 40: 
                    if(lht == 1)
                        break;
                    if(!This.objLast)
                    {
                        This.objLast = div.childNodes[0];
                        This.objLast.style.background = "#ff99ff";
                    }
                    else
                    {
                        This.objLast.style.background = "#ffffff";
                        if(This.objLast.nextSibling.nodeName == "DIV")
                        {
                            This.objLast = This.objLast.nextSibling;
                            This.objLast.style.background = "#ff99ff";
                        }
                        else
                        {
                            This.objLast = div.childNodes[0];
                            div.childNodes[0].style.background = "#ff99ff";  
                        }
                    }
                    if(This.ifSet)
                        This.parentElement.val(This.objLast.childNodes[0].childNodes[0].rows[0].cells[0].innerHTML);  
                    This.parentElement.focus();
                    break;
            }        
        } 
    }
    
    //页面大小发生改变
    var  resizeTimer = null; 
      
    $(window).resize(function(){
         if(resizeTimer) clearTimeout(resizeTimer);   
            resizeTimer = setTimeout("This._onresize()",50);   
    })
      
   
}

RelateMenu.prototype._onresize = function()
{
    if(this.divMenu)
    this.divMenu.css("top",this.parentElement.offset().top + this.parentElement.height() + this.padding_top)
                .css("left",this.parentElement.offset().left);
}

//其它元素点击事件，用于隐藏菜单
RelateMenu.prototype.OtherClick = function(menu)
{
    if($(document.activeElement) != this.parentElement)
    {
        this.Hide();
    }
}
//隐藏
RelateMenu.prototype.Hide = function()
{
    if(this.divMenu)
    {
        this.divMenu.hide();    
        this.Clear();
    }
}
//清空菜单
RelateMenu.prototype.Clear = function()
{
    if(this.divMenu)
        this.divMenu.empty();   
}
//显示菜单
RelateMenu.prototype.Show = function(recordcount)
{
    
    this.divMenu.css("top",this.parentElement.offset().top + this.parentElement.height() + this.padding_top)
                .css("left",this.parentElement.offset().left);
                
    this.RecordCount = recordcount; 
     
    //添加防select遮挡的iframe
    this.divMenu.append("<iframe   src= \"about:blank\"  frameborder=\"0\"  style= \"position:absolute;   visibility:inherit;   top:2px;   left:0px;  height:"+(this.divMenu.height()+14)+";   width:101%;    z-index:-1;   filter= 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"> </iframe>");
        //创建关闭div   
    this.divMenu.append(this.divClose);
    this.divMenu.show();
}
//添加菜单内容
//RelateMenu.prototype.Add = function(params)
//{
//    This = this;   
//    
//    var divOption = document.createElement("div");        
//    $(divOption).css("width","100%")
//        .mouseover(function(){$(This.objLast).css("background","#ffffff");This.objLast = this,$(This.objLast).css("background","#ff99ff")})
//        .mouseout(function(){$(this).css("background","#ffffff")});

//    //设置div样式
//    if(params.css)
//        divOption.className = params.css;
//    //设置div的text
//    if(params.data)
//        divOption.innerHTML = params.data;
//    //设置div点击事件
//    divOption.onclick = function()
//    {
//        This.parentElement.val(divOption.innerText);
//        This.divMenu.show();
//        
//        if(params.click)
//            params.click(divOption.innerHTML);
//    }        
//    
//    This.divMenu.append(divOption);
//}

//添加菜单内容Add重载
RelateMenu.prototype.AddList = function(params)
{
    This = this;   
 
    var _divOption = document.createElement("div");
    $(_divOption).css("float","left").css("width","50%")
    var _tableOption  = document.createElement("table");
    $(_tableOption).css("vertical-align","middle")
                   .css("float","left")
                   .css("width","100%")               
    var _tbodyOption  = document.createElement("tbody");
    var _trOption     = document.createElement("tr");
    var _tdOption     = document.createElement("td");
    $(_tdOption).css("height","22px").css("width","100%");
    $(_trOption).append(_tdOption); 
    $(_tbodyOption).append(_trOption);
    $(_tableOption).append(_tbodyOption);
    $(_divOption).append(_tableOption);    
    
    var _divCount = document.createElement("div");
    $(_divCount).css("width","49%").css("text-align","right");
    var _tableCount  = document.createElement("table");
    $(_tableCount).css("vertical-align","middle")
                   .css("float","left")
                   .css("width","100%")                
    var _tbodyCount  = document.createElement("tbody");
    var _trCount     = document.createElement("tr");
    var _tdCount     = document.createElement("td");
    $(_tdCount).css("height","22px").css("width","100%");
    $(_trCount).append(_tdCount); 
    $(_tbodyCount).append(_trCount);
    $(_tableCount).append(_tbodyCount);
    $(_divCount).append(_tableCount);     
    
    var divOption = document.createElement("div");
    $(divOption).css("width","100%")
        .mouseover(function(){$(This.objLast).css("background","#ffffff");
    This.objLast = this,$(This.objLast).css("background","#ff99ff")})
        .mouseout(function(){$(this).css("background","#ffffff")});
    $(divOption).append(_divOption);
    $(divOption).append(_divCount);
    
    this.objLast = divOption;
   
    //设置div样式
    if(params.css1)
        _divOption.className = params.css1;
    if(params.css2)
        _divCount.className = params.css2;
    //设置div的text
    if(params.data1)
        _tdOption.innerHTML = params.data1;
    if(params.data2)
        _tdCount.innerHTML = params.data2;
    //设置div点击事件
    divOption.onclick = function()
    {
        if(This.ifSet)
            This.parentElement.val(_tdOption.innerText);
        This.divMenu.show();
        
        if(params.click)
            params.click(_tdOption.innerHTML);
    }       
    
    This.divMenu.append(divOption);
}