/****************************************
   Author:     yufei
   DateCreated: 2008.11.10
   ======================================

    var arr=[[1,'深圳'],[2,'广州'],[3,'佛山'],[4,'珠海']];
    var jsSelect=new JSDropDownList('targetId',arr,'elementId'); //创建对象
    jsSelect.callBack=function(value,text){alert('选中回调函数!注意要放在show()之前;');  }//重定义回调函数
    jsSelect.show();//显示下拉菜单
    jsSelect.addOption('valie','text');//在最后位置增加一个选项
    jsSelect.addOptions(arrValueText);//在最后位置增加多个选项,参数为二维数组,形如:[[1,'深圳'],[2,'广州']]
    jsSelect.setOption('valie','text');//设置一个选项,删除之前所有选项
    jsSelect.setOptions(arrValueText);//设置多个选项,删除之前所有选项
    jsSelect.setSelected(1,'深圳',isCallBack);//设置选中项,isCallBack决定是否调用回调函数
    jsSelect.setSelectedByValue(value,isCallBack);//通过值设置选中项,isCallBack决定是否调用回调函数
    jsSelect.setSelectedByIndex(index,isCallBack);//通过索引设置选中项,isCallBack决定是否调用回调函数
    jsSelect.getSelected();//获取选中项,返回数据形式 [value,text]
    jsSelect.getValue();//设置选中项的值
    jsSelect.getText();//设置选中项的文本
    jsSelect.setStyle(cssText);//设置下拉框的样式,cssText形如: {'width':'150px','border':'solid 1px #f00'}; 
    jsSelect.close();//关闭下拉菜单
    
 注： 重写回调函数 callBack 必须在 show()　方法之前
      所有方法调用都必须在 show() 方法之后调用
******************************************/

function JSDropDownList(targetId,arrValueText,elementId)
{
    this._eid='JSDropDownList'+elementId;
    this._targetId=targetId;
    this._arrValueText=arrValueText;
    this._Value=null;
    this._Text=null;
    if(elementId==null)
    {
        this._eid='JSDropDownList'+(new Date()).valueOf().toString();
    }       
}

JSDropDownList.prototype={
    responseHTML:function()
    {
        var html='';         
        html+='\r\n    <div class="cssTextDivDropDownList" id="Txt'+this._eid+'" >-请选择-</div>\r\n';  
        html+='    <div class="cssOptionDivDropDownList"  id="Option'+this._eid+'">\r\n';
        html+=this.addOptions(this._arrValueText);
        html+='    </div>\r\n';
        return html;
    },
    
    show:function()
    {
        var _obj=document.getElementById(this._eid);
        if(_obj)
        {
            document.removeChild(_obj);
        }
        var t=document.getElementById(this._targetId);
        var tDiv=document.createElement("DIV");
        tDiv.className='cssMainDivDropDownList';
        tDiv.id=this._eid;        
        tDiv.innerHTML=this.responseHTML();
        if(t)
        {
            document.getElementById(this._targetId).appendChild(tDiv);    
        }
        else
        {
            document.appendChild(tDiv);
        }
        
        var eId=this._eid;
        var evObj=document.getElementById('Txt'+eId);
        var __eClickEv=this.addClickEv;
        var __mouseEvent=this.addMouseEv;
        var __cbEvent=this.callBack;
        var __close=this.close;
        if(evObj)
        {
            evObj.onclick=function(event){__eClickEv(eId,__mouseEvent,__cbEvent,event);}; 
            
            if (document.addEventListener)
            {
                document.addEventListener('click', __close, false); 
            }
            else if(document.attachEvent)
            {
                document.attachEvent('onclick', __close);   
            }            
        }
    },
    
    addOption:function(value,text)
    {
        var op= '        <div class="cssOptionDivDropDownListOption" value="'+value+'">'+text+'</div>\r\n';  
        var tobj=document.getElementById('Option'+this._eid);
        if(tobj)
        {
            tobj.innerHTML+=op;
        }
        return op;
    },
    
    addOptions:function(arrValueText)
    {
        var ops='';
        for(var i=0;i<arrValueText.length;i++)
        {
            ops+=this.addOption(arrValueText[i][0],arrValueText[i][1]);
        }
        return ops;
    },
    
    setOption:function(value,text)
    {
        var op= '        <div class="cssOptionDivDropDownListOption" value="'+value+'">'+text+'</div>\r\n';  
        var tobj=document.getElementById('Option'+this._eid);
        if(tobj)
        {
            tobj.innerHTML=op;
        }
        return op;
    },
    
    setOptions:function(arrValueText)
    {
        var ops='';
        for(var i=0;i<arrValueText.length;i++)
        {
            ops+=this.addOption(arrValueText[i][0],arrValueText[i][1]);
        }
        var tobj=document.getElementById('Option'+this._eid);
        if(tobj)
        {
            tobj.innerHTML=ops;
        }
        return ops;
    },
        
    getSelected:function()
    {
        var tobj=document.getElementById('Txt'+this._eid);
        if(tobj)
        {
            return [tobj.getAttribute('value'),tobj.innerHTML];
        }
    },
    
    setSelected:function(value,text,isCallBack)
    {
        var tobj=document.getElementById('Txt'+this._eid);
        if(tobj)
        {
            tobj.innerHTML=text;
            tobj.setAttribute('value',value);
            if(isCallBack)
            {
                this.callBack(value,text);
            }
            return true;
        }
        return false;
    },  
    
    setSelectedByValue:function(value,isCallBack)
    {
        var tobjs=(document.getElementById('Option'+this._eid)).getElementsByTagName("DIV");
        for(var i=0;i<tobjs.length;i++)        
        {
            if(tobjs[i].getAttribute('value')==value)
            {
                var p=document.getElementById('Txt'+this._eid);
                if(p)
                {
                    p.innerHTML=tobjs[i].innerHTML;
                    p.setAttribute('value',value);
                    if(isCallBack)
                    {
                        this.callBack(value,text);
                    }
                    return true;
                }
            }
        }
        return false;
    }, 
   
    setSelectedByIndex:function(index,isCallBack)
    {
        var tobjs=(document.getElementById('Option'+this._eid)).getElementsByTagName("DIV");
        if(index>=(tobjs.length) || index<0)
        {
            return false;
        }
        var p=document.getElementById('Txt'+this._eid);
        if(p)
        {
            p.innerHTML=tobjs[index].innerHTML;
            p.setAttribute('value',tobjs[index].getAttribute('value'));
            if(isCallBack)
            {
                this.callBack(tobjs[index].getAttribute('value'),p.innerHTML);
            }
            return true;
        }
        return false;
    },
    getValue:function()
    { 
        var tobj=document.getElementById('Txt'+this._eid);
        if(tobj)
        {
            return tobj.getAttribute('value');
        }
        return null;    
    },
    
    getText:function()
    {
        var tobj=document.getElementById('Txt'+this._eid);
        if(tobj)
        {
            return tobj.innerHTML;
        }
        return null;  
    },    
    
    setStyle:function(cssText)
    {   
        var element=document.getElementById(this._eid);
        if(element)
        {
            var elementStyle = element.style;
            for (var property in cssText)
            {
                if (property == 'opacity') 
                {
                    element.setOpacity(cssText[property]);
                }
                else if(property=='border')
                {
                    var tobj=document.getElementById('Txt'+this._eid);
                    if(tobj)
                    {
                        tobj.style.border= cssText[property];
                    }
                }
                else
                {
                    elementStyle[property] = cssText[property];  
                }
            }  
            if(elementStyle['width'])
            {
                var eleOp=document.getElementById('Option'+this._eid);
                eleOp.style.width=elementStyle['width'];         
            }
            return true;
        }   
        return false;
    },
    close:function()
    {
        var Ops=document.getElementsByTagName('DIV');
        for(var i=0;i<Ops.length;i++)
        {
            if((Ops[i].id).indexOf('Option')>-1 && (Ops[i].className).indexOf('cssOptionDivDropDownList')>-1)
            {
                Ops[i].style.display='none';                 
            }
        }       
    }
    , 
    addClickEv:function(eid,addMouseEv,callBack,event)
    { 
        if (true)
        {
            var Ops=document.getElementsByTagName('DIV');
            for(var i=0;i<Ops.length;i++)
            {
                if((Ops[i].id).indexOf('Option')>-1 && (Ops[i].className).indexOf('cssOptionDivDropDownList')>-1)
                {
                    Ops[i].style.display='none';                 
                }
            }
        }    
        var p=document.getElementById('Option'+eid);
        var pText=document.getElementById('Txt'+eid);        
        
        p.style.display='block';
        
        
        p.style.borderBottom ='solid 1px #999';
        p.style.borderTop ='solid 0px #999'; 
        p.style.left=pText.style.left;        
        p.style.top=pText.style.height;        
        
        if(p.getAttribute('value')==null)
        {
            p.setAttribute('value',p.offsetHeight);
        }
        else
        {
             p.style.height=p.getAttribute('value')+'px';     
        }
        
        /*设置下拉列表显示位置开始*/
        
        var ScrollPos=getScroll();
        var WinSize=getWindowSize();
        var CtrlOffset=countOffset(p);     
        var CtrlPosTopInWin=CtrlOffset[1]-ScrollPos[1];
        var CtrlHeight=p.offsetHeight;
                
        var AvailableHeight=(CtrlPosTopInWin> ((WinSize[1])/2) ? (CtrlPosTopInWin-pText.offsetHeight) : (WinSize[1]-CtrlPosTopInWin));
        
        if(p.offsetHeight>=AvailableHeight)     
        {    
            p.style.height=AvailableHeight+'px';            
            p.style.overflow='auto';          
        }     
        if(CtrlHeight>AvailableHeight)
        {
            CtrlHeight=AvailableHeight;
        }                
        var showInTop=CtrlPosTopInWin> ((WinSize[1])/2) ? (CtrlHeight>(WinSize[1]-CtrlOffset[1] ) ? true:false) : false ;

        if(CtrlHeight<=(WinSize[1]-CtrlPosTopInWin))
        {
            showInTop=false;
        }
            
        if(showInTop)
        { 
            p.style.top=(CtrlOffset[1]-CtrlHeight-pText.offsetHeight)+'px';   
            p.style.borderBottom ='solid 1px #999';
            p.style.borderTop ='solid 1px #999';

        } 
        
        /*设置下拉列表显示位置结束*/
        
        /*定义内部函数开始*/        
        function getWindowSize()
        {
	        var myWidth=0,myHeight=0;
	        if(typeof(window.innerWidth)=='number'){
		        myWidth=window.innerWidth;
		        myHeight=window.innerHeight;
	        }else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){
		        myWidth=document.documentElement.clientWidth;
		        myHeight=document.documentElement.clientHeight;
	        }else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){
		        myWidth=document.body.clientWidth;
		        myHeight=document.body.clientHeight;
	        }
	        return [myWidth,myHeight];
        }
        
        function countOffset(element) 
        {
            var valueT = 0, valueL = 0;
            var stylePosition=element.style.position;
             element.style.position= 'absolute';
             valueT = element.offsetTop  || 0;
             valueL = element.offsetLeft || 0;
             element.style.position= stylePosition;
            return [valueL, valueT];
        }
        
        function getScroll()
        {
            var t,l;
            if (document.documentElement && document.documentElement.scrollTop) 
            {           
                t = document.documentElement.scrollTop;  
                l = document.documentElement.scrollLeft;    
            } 
            else if (document.body) 
            {         
                t = document.body.scrollTop;       
                l = document.body.scrollLeft;         
            }
            return [l,t];
        }
        /*定义内部函数结束*/   
        
                
        /*添加鼠标事件*/
        addMouseEv(callBack,eid);
        /*阻止冒泡事件*/
        var event=event|| window.event;
        event.cancelBubble = true;               
    }
    ,
    addMouseEv:function(callBack,elementId)  
    {
        var els=document.getElementById('Option'+elementId).getElementsByTagName("DIV");
        var txtDiv=document.getElementById('Txt'+elementId);
        var optDiv=document.getElementById('Option'+elementId);
        var __scolor='#000000';
        for(var i=0;i<els.length;i++)
        {
            els[i].onmouseover=function(){  
                __scolor=this.style.color;
                this.style.background='#506AAA';
                this.style.color='#ffffff';
            }
            els[i].onmouseout=function (){
                this.style.background='#ffffff';
                this.style.color=__scolor;
            }
            els[i].onclick=function (){               
               txtDiv.innerHTML=this.innerHTML;
               var isCallBack=(this.getAttribute('value')!=txtDiv.getAttribute('value'));
               txtDiv.setAttribute('value',this.getAttribute('value'));
               optDiv.style.display='none'; 
               if(isCallBack)
               {
                    callBack(this.getAttribute('value'),this.innerHTML);    
               }
            }         
        }
    }
    ,
        
    /*回调函数*/
    callBack:function (value,text)
    {
        var s='选中的值是: '+value+' 选中的文本是 '+text;
        alert(s)
    } 
}