// JScript File
//**Utils//


function round(num)
{
 return Math.round(100*num)/100;
}
function endUpdate()
{
 if(!$("divIndicator")) return;
   $("divIndicator").style.display = "none";  
}
function Kig$(tag,id)
{
  var  nodes = document.getElementsByTagName(tag);
  for(var i=0; i<nodes.length;i++)
  {
    if(nodes[i].id.indexOf(id)!=-1) return nodes[i];
  }
}
function getTableRows(table)
{
   return getTbody(table).childNodes;
}
function getTbody(table)
{
 return table.getElementsByTagName("tbody")[0];
}
function elementFromEvent(event)
{
  if(!event) event = this.event;
    return event.target || event.srcElement;
}
function appendElementToAnother(element, newParent)
{
   $(element).parentNode.removeChild($(element));
   $(newParent).appendChild($(element));
}
function createElement(tag,id,parent,className)
{
  var element = document.createElement(tag);
 if(id!="")   
   element.id = id;
   if(className)
   {
     element.className =className; 
   }
   if(parent)
   {
     parent.appendChild(element);
   }
   return element;
}



function createDiv(id,parent,className)
{
   return createElement("div",id,parent,className);
}

/*utils*/
function setPosition(element,left,top)
{
  setTop(element,top);
  setLeft(element,left);  
}
function setSize(element,width,height)
{
  setHeight(element,height);
  setWidth(element,width);  
}
function setLeft(element,value)
{
  $(element).style.left = value+"px";
} function setTop(element,value)
{
  $(element).style.top = value+"px";
}
function setHeight(element,value)
{
  $(element).style.height = value+"px";
} function setWidth(element,value)
{
  if(value.toString().indexOf("%")!=-1) $(element).style.width = value;
  else
 
  $(element).style.width = value+"px";
} function getHeight(element)
{
  return parseInt($(element).style.height);
} function getWidth(element)
{
  return parseInt($(element).style.width);
}
function getTop(element)
{
  return parseInt($(element).style.top);
}
function getLeft(element)
{
  return parseInt($(element).style.left);
}
function setAbsolute(element)
{
   $(element).style.position ="absolute";
}
function appendElementToAnother(element, newParent)
{
   $(element).parentNode.removeChild($(element));
   $(newParent).appendChild($(element));
}
function destroyElement(element)
{
  element.parentNode.removeChild(element);
}

function deleteElementFromArray(array,index)
{
	var newArray = new Array();

 	
 	for(var i=0; i<array.length; i++) 
 	{
 		if(i!=index) newArray.push(array[i]);
 	}
 
 	
 	return newArray;
} 

var isIE  = navigator.userAgent.toLowerCase().indexOf("ie")!= -1; 
var isOpera = navigator.userAgent.indexOf("Opera") > -1
// ---------------------------------------------------


///


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 ="";
      }      
      
  }
  

}