// JScript File

var dataSource = {

nodes:[

{name:'Category1',hint:'hint',url:'url',expanded:true,selected:true, onclick:function(){}, childNodes:[
      {name:'CategoryChild',hint:'hint',url:'url',expanded:true, onclick:function(){},
       childNodes:[{name:'CategoryChildChi',hint:'hint',url:'url',expanded:true, onclick:function(){},
       childNodes:[{name:'CategoryChildChidfs s',hint:'hint',url:'url',expanded:true, onclick:function(){}}]}]
      },
      {name:'CategoryChild2',hint:'hint',url:'url',expanded:true, onclick:function(){} }      
    ] },

{name:'Category2',hint:'hint',url:'url',expanded:false, onclick:function(){}, childNodes:[
      {name:'CategoryChild3',hint:'hint',url:'url',onclick:function(){}},
      {name:'CategoryChild4',hint:'hint',url:'url',onclick:function(){}}      
    ] }

]}


var Tree = Class.create();



Tree.prototype = {
    initialize:function(container,dataSource)
    {
       this.el = $(container);
       this.data= dataSource;
       this.el.className = "tree";
       this.childNodes =new Array();                 
       this.el.onclick = this.deselectAll.bindAsEventListener(this);
      this.render();
         this.selectedNode = this;
     
    },
    render:function()
    {
        this.nodesEl =createElement("ul","",this.el,"ul_maincategory");
        this.createChilds();
        this.renderChilds();
         this.updateConnectors();
              
    },
    createChilds:function()
    {
     for(var i=0;i<this.data.nodes.length;i++)
     {
       this.appendNode(new TreeNode(this.data.nodes[i],this,this));
     }
    },
   
    renderChilds:function()
    {
     for(var i=0;i<this.childNodes.length;i++)
     {
        this.childNodes[i].render();
     }
    },
    appendNode:function(child)
  {
     this.childNodes.push(child);       
  },  
  appendNodeToSelected:function(config)
  {
    var selectedNode = this.selectedNode?this.selectedNode:this;
     node = new TreeNode(config, this,selectedNode);
     if(selectedNode){
       selectedNode.appendNode(node);
       
       selectedNode.updateNodesEl();
       }
     else {this.appendNode(node);}
     node.render();
     
      this.updateConnectors();
   return node;
     
  },
  updateNodesEl:function()
  {},
  setSelectedNode:function(node)
  {
  if(this.selectedNode&&this.selectedNode!=this)  this.selectedNode.deselectNode();
       this.selectedNode = node;
       
       if(this.onSelect) this.onSelect(node);
  },
  selectFirstNode:function()
  {
  this.childNodes[0].onClickHandler();
 
  },
  
  deselectAll:function()
  {
  this.setSelectedNode(this);
  },
  
  deleteSelectedNode:function()
  {
     if(!this.selectedNode) return;
     this.selectedNode.deleteNode();
     this.updateConnectors();    
  },
  updateConnectors:function()
  {
      //update recursively  childs
    for(var i=0;i<this.childNodes.length;i++) 
    {
   
     this.childNodes[i].updateConnectors();
     
     }
  } 
}

/*
  
               <li>
                <div><p>
                <a href="#" class="sc" onclick="return UnHide(this)">&#9660;</a>
                Раздел 1
                </p>
                </div>
                   
               </li>
            

*/
var COLLAPSED ="<span class='collapsed_node'></span>";//"&#9658;";
var EXPANDED = "<span class='expanded_node'></span>";
var VOID_EXPAND ="javascript:expand_or_collapse();"
var OPEN_ITEM ="javascript:open_item();"

function expand_or_collapse(){return void(0);};
function open_item() {return void(0);};

var TreeNode = Class.create();
TreeNode.prototype = {
  
  initialize:function(data,tree,parentNode)
  {
     this.data = data;
     this.tree = tree;
     this.parentNode = parentNode;
     
     
     this.expanded = data.expanded ||false;
     this.title = data.name;
     this.hint = data.hint;
     this.onclick = data.onclick;
     
     this.collapsedCss ="cl"; 
     
     this.childNodes =new Array();
     
     this.createChilds();
     
  },
  deleteNode:function()
  {
    this.parentNode.childNodes=deleteElementFromArray(this.parentNode.childNodes,this.getIndex());
     destroyElement(this.el);
     this.el = null;
     if(this.parentNode.childNodes.length==0) {destroyElement(this.parentNode.nodesEl); this.parentNode.nodesEl=null;};
  if(this.parentNode!=this.tree)
     this.parentNode.updateNodesEl();
     this.tree.selectedNode = null;
     
 
     
  },
  createChilds:function()
  {
  if(!this.hasChilds()) return;
     for(var i=0;i<this.data.childNodes.length;i++)
     {
       this.appendNode(new TreeNode(this.data.childNodes[i],this.tree,this));
     }
  },  
  render:function()
  {
  

     this.setParentEl();
   this.el = createElement("li","",this.parentEl);
   
   var div = createElement("div","",this.el);
   var p = createElement("p","",div);
   this.p = p;
   
   this.marker =  createElement("a","",p,"sc");
   this.marker.href=VOID_EXPAND;
   this.marker.onclick = this.setExpandedState.bindAsEventListener(this);
   
   this.titleEl = createElement("a","",p,"title");
   //  this.titleEl.style.fontWeight ="bold";

      this.titleEl.href=OPEN_ITEM;
      this.titleEl.onclick = this.onClickHandler.bindAsEventListener(this);
       this.titleEl.innerHTML = this.title;
      this.titleEl.title = this.hint;
      
    this.updateNodesEl();
 
   
    this.renderChilds();
   
   this.setExpandedState();
   

     
  },
  setTitle:function(title)
  {
     this.titleEl.innerHTML = title;
     this.data.name = title;
     this.title = title;
  },
  setHint:function(hint)
  {
     this.titleEl.title = hint;
     this.data.hint = hint;
     this.hint = hint;
  },
  setUrl:function(url)
  {
     this.data.url = url;
  },
  
  
  updateNodesEl:function()
  {
     if(this.hasChilds()&&!this.nodesEl) 
     {
      this.nodesEl = createElement("ul","",this.el,"ul_subcategory");
      this.setExpandedState(); 
     }
     if(!this.hasChilds())
     {
       this.marker.innerHTML ="";
     }
  //   if(this.hasChilds())    this.setExpandedState();  ;
  },
  updateConnectors:function()
  {

   
   if(this.nodesEl)
   {

    
    if(this.hasLittleBrother()) 
    {
      this.drawConnector();
       this.p.style.left = "";
    }
     else
    { 
      this.clearConnector();
     // if(!isIE)
      this.p.style.left = "1.89em";
     
    }
   }
    //update recursively  childs
    for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].updateConnectors();}
    
  },
  clearConnector:function()
  {
     var style = this.nodesEl.style;   
      style.marginLeft="-1px";
      style.borderLeft = "2px solid white";
  },
  drawConnector:function()
  {
      var style = this.nodesEl.style;   
      style.marginLeft="";
      style.borderLeft = "";
  },
  
  
  onClickHandler:function(e)
  {
   
     this.tree.setSelectedNode(this);
    
     if(this.onclick) this.onclick(this,e);
      this.selectNode();
  },
  selectNode:function()
  {  
    if(!this.parentOfTitle)this.parentOfTitle = $(this.titleEl.parentNode); 
    Element.replace(this.titleEl,"<b style='font-weight:bold;font-size:100%;'  class='title'>"+this.title+"</b>");

    this.titleEl = this.parentOfTitle.getElementsByClassName("title")[0];
  },
  deselectNode:function()
  {
 
     Element.replace(this.titleEl,"<a  href='"+OPEN_ITEM+"' title='"+this.hint+"'  class='title'>"+this.title+"</a>");
     this.titleEl = this.parentOfTitle.getElementsByClassName("title")[0];
     this.titleEl.onclick = this.onClickHandler.bindAsEventListener(this);
    
  },
  
  renderChilds:function()
  {
     for(var i=0;i<this.childNodes.length;i++)
     {
        this.childNodes[i].render();
     }
  },
  
  appendNode:function(child)
  {
     this.childNodes.push(child);       
  },  
  setParentEl:function()
  {
     if(this.hasParent()) 
     {
      this.parentEl  = this.parentNode.nodesEl;
     } 
     
     else 
     {
      this.parentEl = this.tree.nodesEl;
     }
  },
  hasChilds:function()
  {
  
    var hasChilds = this.childNodes.length>0
    if(hasChilds) return true;
    
    if(!hasChilds&&this.data.childNodes)
    {
     return  this.data.childNodes.length>0;
    }
   return false;     
  },
  hasParent:function()
  {
    if(this.parentNode) return true;
  },
  getIndex:function()
  {
     return this.parentNode.childNodes.indexOf(this);;
  },
  hasLittleBrother:function()
  {
    
    var index = this.getIndex();
    
    var hasBrother = this.parentNode.childNodes.length>index+1;
    
   // this.setTitle (this.title+" "+hasBrother.toString());
    return hasBrother;
  },
  
  setExpandedState:function()
  {
     if(!this.hasChilds()) return;
      if(this.expanded)
      {
         this.expanded = false;
         this.marker.innerHTML = COLLAPSED;
         this.el.className =this.collapsedCss;
      }
      else
      {
         this.expanded = true;
         this.marker.innerHTML = EXPANDED;
         this.el.className ="";
      }      
      
  }
  

}