treeItem = function(id,text,value,parent)
  {
    this.id =id;
    this.text = text;
    this.value = value;
    this.parent = parent;
    this.type = "item";
    this.index = this.parent.items.length;
    this.div = null;
    this.drow = function()
    {
       
      for(var i=0;i<= this.parent.level;i++)
      {
          if(this.index == this.parent.items.length -1 && i==this.parent.level )
          {
            
           this.tdiv = this.parent.CreateDiv('sep-vertical-last',this.parent.treediv);
           this.tdiv.innerHTML = "&nbsp";
          }
          else
          {
            this.tdiv = this.parent.CreateDiv('sep-vertical',this.parent.treediv);
            this.tdiv.innerHTML = "&nbsp";
          }
      this.tdiv = null;
      } 
      this.tdiv = this.parent.CreateDiv('tree-item-icon',this.parent.treediv);
      this.tdiv.innerHTML = "&nbsp";
      this.tdiv = null;
      
      this.div = this.parent.CreateDiv('tree-item',this.parent.treediv);
      
      this.parent.addEvent(this.div,'mouseover',this.parent.createDelegate(this,this.mouseover));
      this.parent.addEvent(this.div,'mouseout',this.parent.createDelegate(this,this.mouseout));
      
      this.div.innerHTML = this.text;
      this.div.id=this.id;
    };
  this.mouseover = function(src)
  {
    this.div.className = "tree-item-hover";
    this.parent.itemEnter(this);
  };
  this.mouseout = function(src)
  {
    this.div.className = "tree-item";
    this.parent.itemLeave(this);
  };
}
// tree object create
var treescrollTimer = null;
var treescrollDistance = 0;
var treeScrollContainer = "";
tree = function(id,title,parent)
{
  this.id = id;
  this.titleName = title;
  this.parent = parent;
  this.items =null;        
  this.itemsCout = 0;
  this.titlediv = null;
  this.treediv = null;
  this.level = 0;
  this.windowScrollDown = false;
  this.windowScrollDownEventAdded = false;  
  if(this.parent)
  {
    this.level = this.parent.level +1;
  }
  if(this.parent == null)
    this.type = "tree";
  else
      this.type = "subtree";
  this.addItem = function(id,text,value)
  {
    if (this.items == null)
      {
        this.items = new Array();
      }
      var item = new treeItem(id,text,value,this);
      this.items[this.itemsCout] = item;
      this.itemsCout++;
      return item;
  }
  this.addSubTree = function(id,title)
  {
    if (this.items == null)
      {
        this.items = new Array();
      }
    var subtree = new tree(id,title,this);
    this.items[this.itemsCout] = subtree;
    this.itemsCout++;
    return subtree;
  }
  this.drow = function(divid, clearContainer,conobj)
  {//debugger;
      var con;
      if(!conobj)
      {
          if(!document.getElementById(divid))
          {
              alert("no container found");
              return;
          }
          else
          {
              con = document.getElementById(divid);
          }
      }
      else
      {
          con = conobj;
      }
      // clear containner if nedded
      
      if(clearContainer)
          if(clearContainer == true)
          {
             //this.clearTreeFromContainer(con);
          }
      // start drowing tree;
      
      this.container = this.CreateDiv('mecasa-tree',con);
      
      
      if(this.type=="tree")
      {
        this.con=con;
        this.titledivIcon = this.CreateDiv('tree-title-icon-open',this.container)
        this.titlediv = this.CreateDiv('tree-title-open',this.container);              
        this.titlediv.innerHTML = this.titleName;
        this.treediv = this.CreateDiv('tree-items-open',this.container);
        
        this.addEvent(con ,'mousewheel',this.createDelegate(this,this.scrollInTree));
        //this.addEvent(con ,'mouseover',this.createDelegate(this,this.noscroll));
        //this.addEvent(con ,'mouseout',this.createDelegate(this,this.yesscroll));
        
      }
      else
      {
        for(var i=0;i<= this.parent.level;i++)
        {
            this.tdiv = this.parent.CreateDiv('sep-vertical',this.container);
            this.tdiv.innerHTML = "&nbsp";
        }              
        this.titledivIcon = this.CreateDiv('tree-title-icon-close',this.container)
        this.titlediv = this.CreateDiv('tree-title-close',this.container);
        this.titlediv.innerHTML = this.titleName;
        this.treediv = this.CreateDiv('tree-items-close',this.container);
                     
      }
      
      
      this.addEvent(this.titlediv ,'click',this.createDelegate(this,this.showHideTreeItems));
      this.addEvent(this.titlediv ,'mouseover',this.createDelegate(this,this.mouseover));
      this.addEvent(this.titlediv ,'mouseout',this.createDelegate(this,this.mouseout));
      this.addEvent(this.titledivIcon ,'click',this.createDelegate(this,this.showHideTreeItems));
      for(var i=0; i<this.itemsCout;i++)
          {
            if(this.items[i].type == "item")
            {
              var item = this.items[i].drow(tree);
                 
            }
            else
            {
              this.items[i].drow('',false,this.treediv);   
            }                  
          }
      
  }
  this.scrollInTree = function(evt)
  {
    //debugger;
    if(evt.wheelDelta > 0 )
        Ext.get(this.con.id).scroll("t",40,true);
    else
        Ext.get(this.con.id).scroll("b",40,true);
    return false;
  }
  this.disableScroll = function(a)
  {
    
    if(this.windowScrollDown)
    {
        treeScrollContainer = this.con.id;
        if(a.wheelDelta > 0 )
        {
            treescrollDistance +=10;
        }
        else
        {
            treescrollDistance -=10;
        }
        clearTimeout(treescrollTimer);
        treescrollTimer =setTimeout(this.scrollInTree,50);
        return false;
    }   
    else
        return true;
  }
  this.noscroll = function()
  {
    
    if(this.windowScrollDown == false)
    {
        this.windowScrollDown = true;
        if(this.windowScrollDownEventAdded == false)
        {   
            this.addEvent(document.body ,'mousewheel',this.createDelegate(this,this.disableScroll));
            this.windowScrollDownEventAdded = true;
        }
    }
    else
        return;
    
  }
  this.yesscroll = function()
  { 
    this.windowScrollDown = false;
  }
  this.mouseover = function()
  {
    this.titlediv.className=this.titlediv.className + '-hover'; 
    this.treeEnter(this);
  }
  this.mouseout = function()
  {
    this.titlediv.className=this.titlediv.className.replace('-hover','');
    this.treeLeave(this);
  }
  this.showHideTreeItems = function(src)
  {
    
    if(this.titledivIcon.className == 'tree-title-icon-close')
    {
      this.treediv.className = 'tree-items-open';
      this.titledivIcon.className = 'tree-title-icon-open';
      this.titlediv.className = "tree-title-open";
    }
    else
    {
      this.treediv.className = 'tree-items-close';
      this.titledivIcon.className = 'tree-title-icon-close';
      this.titlediv.className = "tree-title-close";
    }
    
  }
  this.removeDivs = function()
  {
    if(this.divArray)
    {
        for(var i=0; i<this.divArray.length;i++)
        {
            try
            {
                var t = Ext.get(this.divArray[i]);
                t.removeAllListeners();
                t.dom.innerHTML="";
                t.remove();
                t=null;
                this.divArray[i]=null;
            }
            catch(e)
            {
                
            }
        }
    }
    
  }
  this.clearTreeFromContainer = function(con)
  {
    if(this.items)
    {
       for(var i=0; i<this.items.length;i++)
       {
         if(this.items[i].type == "subtree")
         {
            this.items[i].clearTreeFromContainer();
         }
       }
       this.removeDivs();
    }
    //if(!this.divArray)
    /*
      while(con.children.length != 0)
             {
              if(con.children[0].children.length != 0)
              {
                  this.clearTreeFromContainer(con.children[0]);
              }
              var t = Ext.get(con.children[0]);
              t.removeAllListeners();
              con.removeChild(con.children[0]);
             }
   */
  }
 this.addEvent= function(o, type, fn) 
 {
   
   if(o.addEventListener)
      o.addEventListener(type, fn, false);
   if(o.attachEvent)
    o.attachEvent("on"+type , fn);
   
  
 }
 this.removeEvent= function(o, type, fn) 
 {
    if(o.removeEventListener)
      o.removeEventListener(type, fn, false);
    if(o.detachEvent)
      o.detachEvent("on"+type , fn);
 }
 this.CreateDiv = function(className , parent)
  {
    
      if(!this.divArray)
        {
            this.divArray = new Array();
        }
      var div = document.createElement('div');
      div.className = className;
      if(parent) parent.appendChild(div);
      this.divArray[this.divArray.length] = div;
      return div;
  }
  
  this.createDelegate = function(instance, method) 
  {
		return function() {
			return method.apply(instance, arguments);
		}
	}
	
	// function to ovvride by user
	this.itemEnter = function(item)
	{   
	    if(this.parent)
	        this.parent.itemEnter(item);
    }
    this.itemLeave = function(item)
	{
	    if(this.parent)
	        this.parent.itemLeave(item);
    }
    this.treeEnter = function(tree)
	{
	    if(this.parent)
	        this.parent.treeEnter(tree);
    }
    this.treeLeave = function(tree)
	{
	    if(this.parent)
	        this.parent.treeLeave(tree);
    }

}