multiSelect = function (ControlID,inClass,SelectAll,SelectAllOnChange) 
{

  //  MyNewClass.superclass.constructor.call(ControlID);
  
   
    this.id = ControlID;
    this.el = Ext.get(ControlID);
    if (inClass) 
    {
        this.el.toggleClass(inClass);
    }
    else
    {
        this.el.toggleClass('button');
    }
    this.el.toggleClass('x-multiselect');
    
    this.box = this.el.getBox();
    
    if(this.box.width == 0)
    {
        this.box.width = this.el.dom.style.width.replace('px',"");
    }
    this.leftButton = Ext.get(document.createElement('DIV'));
    this.selectArea = Ext.get(document.createElement('DIV'));
    this.innerWindow = Ext.get(document.createElement('DIV'));
    
    this.leftButton.dom.id = this.id + "-button";
    this.selectArea.dom.id = this.id + "-selectArea";
    this.selectArea.dom.style.width = (this.box.width - 17 -3) + "px";
    this.selectArea.dom.style.height = "17px";
    
    this.leftButton.toggleClass('x-multiselect-button');
    this.selectArea.toggleClass('x-multiselect-selectarea');
    this.innerWindow.toggleClass('x-multiselect-innerwindow');
    
    //this.el.dom.innerHTML = 'dddd';
    this.leftButton.appendTo(this.el);
    this.selectArea.appendTo(this.el);
    
    this.showList();
    this.innerWindow.appendTo(this.el);
    this.leftButton.addListener('mousedown',this.showList,this);
    this.selectArea.addListener('mousedown',this.showList,this);
    
    /* add listenerts to use timer */
    this.el.addListener('mouseout',this.timerout,this);
    this.el.addListener('mouseover',this.timerin,this);
    this.el.addListener('click',this.timerin,this);
    this.innerWindow.addListener('mouseout',this.timerout,this);
    this.innerWindow.addListener('mouseover',this.timerin,this);
    
    
    this.boxes = [];
    this.checkNo = 0;
    this.boxIds = new Array();
    
    if (SelectAll)
    {
       this.addSelectAll(SelectAllOnChange);
    }
};


multiSelect.prototype = 
{
el: null,
id: null,
box: null,
leftButton: null,
selectArea: null,
innerWindow: null,
boxes: [],
checkNo: 0,
elSelectAll: null,
elSelectAllOnChange:null,

timerin : function()
{
    
        clearTimeout(this.timer);        
        var pointer = this;
        this.timer = setTimeout(function () { pointer.autoHideList(); }, 3500);    
    
},
timerout : function()
{
    if(   this.innerWindow.dom.className.indexOf("x-multiselect-hide") == -1)
    {
        clearTimeout(this.timer);
        var pointer = this;
        this.timer = setTimeout(function () { pointer.autoHideList(); }, 750);
        
    }
},
autoHideList : function()
{
    if(   this.innerWindow.dom.className.indexOf("x-multiselect-hide") == -1)
    this.showList();
},
showList: function()
    {
        var fixX =0;
        var fixY =0;
        if (Ext.isIE)
        {
           //fixX = -2;
           fixY = -3;
        }
        else
        {
           //fixX = -1;
           fixY = -2;
        }
        
        if(Ext.isIE6)
        {
            
            fixX = 3;
            fixY = -3;
        }
        this.box = this.el.getBox();
        if(this.box.width == 0)
    {
        this.box.width = this.el.dom.style.width.replace('px',"");
    }
        this.innerWindow.dom.style.height = '130px';
        this.innerWindow.dom.style.width = (this.box.width-2) + 'px';
        
        this.innerWindow.dom.style.top = (this.box.y + this.box.height + fixY) + "px";
        this.innerWindow.dom.style.left = (this.getDivPos() +fixX  ) + "px";
        this.innerWindow.toggleClass('x-multiselect-hide');
        
        
        
        if(Ext.isIE6 || 1==1)
        {
            if(!this.backiframe)
            {
                this.backiframe = Ext.get(document.createElement('iframe'));
                this.backiframe.dom.style.position = "absolute";
                this.backiframe.dom.style.display = "none";
                this.backiframe.appendTo(Ext.getBody());
            }
                
            this.backiframe.dom.style.top = this.innerWindow.dom.style.top;
            this.backiframe.dom.style.left = this.innerWindow.dom.style.left;
            this.backiframe.dom.style.width = this.innerWindow.dom.style.width;
            this.backiframe.dom.style.height = this.innerWindow.dom.style.height;
            this.backiframe.dom.className = this.innerWindow.dom.className;
            //this.backiframe.dom.style.display = "block";
            this.backiframe.dom.style.zIndex =99;  
            this.innerWindow.dom.style.zIndex =100;
        }
    },
    getDivPos : function ()
    {
      var obj = this.el.dom;
      var curleft = 0;
  		if (obj.offsetParent){
  			while (obj.offsetParent){
  				curleft += obj.offsetLeft;
  				obj = obj.offsetParent;
  			}
  		}
  		else if (obj.x)
  			curleft += obj.x;
  	return  curleft;
    },
    addBox: function (id,label,onchange,value)
    {
        var newCont = Ext.get(document.createElement('DIV'));
        newCont.toggleClass('inputbox');
        
        var newBox = Ext.get(document.createElement('INPUT'));
        newBox.dom.id = id;
        if(value)
        {  
           newBox.dom.val = value;
        }
         
        newBox.dom.type = 'checkbox';
        newBox.dom.style.border = "none";
        var newLabel = Ext.get(document.createElement('LABEL'));
        newLabel.dom.id = id + "-label";
        newLabel.dom.htmlFor = id;
        newLabel.dom.innerHTML = label;
               
        newBox.appendTo(newCont);
        newLabel.appendTo(newCont);
        newCont.appendTo(this.innerWindow);
        
        newBox.addListener('click',this.onchange,this);
        newLabel.addListener('click',this.onchange,this);
        
        this.boxes[id] = {
                            id:       id,
                            el:       newBox,
                            ellbl:    newLabel,
                            elwarp:   newCont,
                            onchange: onchange,
                            displayText : label
                         };
                         
        this.boxIds[this.boxIds.length] = id;
    },
    addSelectAll: function (onchange)
    {
       //id,label,onchange,value
       this.elSelectAllOnChange = onchange;
        var newCont = Ext.get(document.createElement('DIV'));
        newCont.toggleClass('inputbox');
        
        var newBox = Ext.get(document.createElement('INPUT'));
        //newBox.dom.id = id;
        //if(value)
        //{  
        //   newBox.dom.val = value;
        //}
         
        newBox.dom.type = 'checkbox';
        newBox.dom.style.border = "none";
        var newLabel = Ext.get(document.createElement('LABEL'));
        newLabel.dom.id = id + "-label";
        newLabel.dom.htmlFor = id;
        newLabel.dom.innerHTML = "בחר הכל";
               
        newBox.appendTo(newCont);
        newLabel.appendTo(newCont);
        newCont.appendTo(this.innerWindow);
        
        
        newBox.addListener('click',this.doSelectAllOnClick,this);
        newLabel.addListener('click',this.doSelectAllOnClick,this);
        
        this.elSelectAll = newBox;
        this.elSelectAllText = newLabel;
                            
       
    },
    cmdSelectAll : function()
    {
        this.elSelectAllText.dom.innerHTML= this.elSelectAllText.dom.innerHTML.replace("בחר","הסר");
        this.elSelectAll.dom.checked = true;
        for(var i=0; i<this.boxIds.length;i++)
        {
              this.boxes[this.boxIds[i]].el.dom.checked =  true;
        }
        this.setText();
    },
    doSelectAllOnClick : function (eve,sender)
    {
        if(sender.innerHTML == "בחר הכל" || sender.innerHTML == "הסר הכל" )
            this.elSelectAll.dom.checked = !(this.elSelectAll.dom.checked);
            
           
        if(this.elSelectAll.dom.checked == true)
        {
            this.elSelectAllText.dom.innerHTML= this.elSelectAllText.dom.innerHTML.replace("בחר","הסר");
        }
        else
        {
            this.elSelectAllText.dom.innerHTML= this.elSelectAllText.dom.innerHTML.replace("הסר","בחר");
        }
            
        
        for(var i=0; i<this.boxIds.length;i++)
        {
              this.boxes[this.boxIds[i]].el.dom.checked =  this.elSelectAll.dom.checked;
        }
        this.elSelectAllOnChange(eve,sender);
        this.checkNo =1;
        this.setText();
    },
    markSelectAll : function ()
    {
        if ( !(this.elSelectAll) ) return;
        var SelectAllFlag = true;
        for(var i=0; i<this.boxIds.length;i++)
        {
              SelectAllFlag = SelectAllFlag && this.boxes[this.boxIds[i]].el.dom.checked;
        }
        if (SelectAllFlag) 
        {
            this.elSelectAll.dom.checked = true;
            this.elSelectAllText.dom.innerHTML= this.elSelectAllText.dom.innerHTML.replace("בחר","הסר");
        }
        else
        {
            this.elSelectAll.dom.checked = false;
            this.elSelectAllText.dom.innerHTML= this.elSelectAllText.dom.innerHTML.replace("הסר","בחר");
            
        }
    },
    setData : function(value , prefix)
    {
        this.checkNo = 0;
        
        for(var i=0; i<this.boxIds.length;i++)
        {   
            this.boxes[this.boxIds[i]].el.dom.checked = false;
        }
        if(value && (prefix || prefix == '' ))
        {
            var valarray = value.split(",");
            for(var i=0; i<valarray.length;i++)
            {
                var obj = Ext.get(prefix + valarray[i]);
                if(obj != null)
                {
                    obj.dom.checked = true;
                    this.checkNo++;
                }
            }
        }
        
        this.setText();
        this.markSelectAll();
        
    },
    setText : function()
    {
        
        
        if (this.checkNo == 0)
        {
            this.selectArea.dom.innerHTML = '';        
        }
        else
        {
            var ret ="";
            for(var i=0; i<this.boxIds.length;i++)
            {
              if(this.boxes[this.boxIds[i]].el.dom.checked == true )
              {
                if(ret == "")
                {
                    ret+= this.boxes[this.boxIds[i]].displayText;
                }
                else
                {
                    ret+=','+this.boxes[this.boxIds[i]].displayText;
                }
              }
            }
            var width = (this.selectArea.dom.style.width.replace('px','') * 1) /8 ;
            if(ret.length > width)
            {
               ret =  '<acronym title="' + ret +'">' + ret.substr(0,width) + "..." + '</acronym>';
            }
            
            this.selectArea.dom.innerHTML = ret;
            this.selectArea.dom.style.overflow="hidden";
            this.selectArea.dom.style.textAlign = "right";
            this.selectArea.dom.style.fontSize = "13px";
        }
        
        
        //debugger;
        
    },
    setDataById : function(value)
    {
        this.checkNo = 0;
        
        for(var i=0; i<this.boxIds.length;i++)
        {   
            this.boxes[this.boxIds[i]].el.dom.checked = false;
        }
        if(value)
        {
            var valarray = value.split(",");
            for(var i=0; i<valarray.length;i++)
            {
                var obj = Ext.get(valarray[i]);
                if(obj != null)
                {
                    obj.dom.checked = true;
                    this.checkNo++;
                }
            }
        }
        
        this.setText();
        this.markSelectAll();
    },
    getStringValueByIds : function()
    {
        var ret ="";
        
        for(var i=0; i<this.boxIds.length;i++)
        {
                        //       box is checked                or       select all checked
          if(this.boxes[this.boxIds[i]].el.dom.checked == true )
          {
            if(ret != "") ret+=",";
            
            ret+=this.boxes[this.boxIds[i]].el.dom.id;
          }
        }
        return ret;
    },
    getStringValue : function()
    {
        //assetTymeMs.boxes[assetTymeMs.boxIds[0]].el.dom.checked
        var ret ="";
        
        for(var i=0; i<this.boxIds.length;i++)
        {
          if(this.boxes[this.boxIds[i]].el.dom.checked == true  )
          {
            if(ret != "") ret+=",";
            if(this.boxes[this.boxIds[i]].el.dom.val)
            {
                ret+=this.boxes[this.boxIds[i]].el.dom.val;
            }
            else
            {
                ret+=this.boxes[this.boxIds[i]].el.dom.id;
            }
            
          }
        }
        return ret;
    },
    onchange: function (eve, sender)
    {
        var id;
        if (sender.htmlFor)
        {
             id = sender.htmlFor;
        }
        else
        {
             id = sender.id;
        }
        sender = Ext.get(id).dom;
        if (sender.checked)
             this.checkNo += 1;
        else
             this.checkNo -= 1;
        
        if (this.checkNo == 0)
        {
            this.selectArea.dom.innerHTML = '';        
        }
        else
        {
        this.selectArea.dom.innerHTML = 'נבחרו ' +  this.checkNo + ' אפשרויות';
        }
        if (this.boxes[id].onchange)
        {
            this.boxes[id].onchange(eve,sender);
        }
        this.setText();
        this.markSelectAll();
    }
}