var TreeFile = "js/new_tree_script.txt";
var onclicked;
var items=13;
var TmpStr_0, TmpStr_1, LastIndex;
var maxDepth=0;
var imgdown="style/new_tree_icon/btn_item_p.png";
var imgright="style/new_tree_icon/arrow_right2.png";
var opened;
var sgWin;
function modifyTree(scriptText)
{
	if(LED == "no")
	{
		scriptText = scriptText.replace("|-L_LED,item,system_led.htm,mainFrame\n","");		
	}
	if(MemoryCard == "no")
	{
		scriptText = scriptText.replace("|-L_LocalStorage,item,playback_local.htm,mainFrame\n","");
	}
	
  if(DISupport=="no"&&DOSupport=="no") 
  {
    scriptText = scriptText.replace("|-L_DigitalIO,item,system_DiDo.htm,mainFrame\n","");
  }

  if(AudioSupport == "no")
  {
    scriptText = scriptText.replace("|-L_Audio,item,basic_audio_set.htm,mainFrame\n",""); //Basic
    scriptText = scriptText.replace("|-L_Audio,item,basic_audio_set.htm,mainFrame\n",""); //Live View
    scriptText = scriptText.replace("|-L_AudioDetection,item,event_audio.htm,mainFrame\n","");
  }

  if(PTZtype.indexOf("no") != -1 || PTZtype.indexOf("none") != -1)
  {
    scriptText = scriptText.replace("|-L_PTZSetting,item,liveview_ptz_area.htm,mainFrame\n","");
  }
  
  scriptText = scriptText.replace("|-L_ClientPC,item,playback_pc.htm,mainFrame\n","");
  
  if(AudioDetection=="no")
  {
    scriptText = scriptText.replace("|-L_AudioDetection,item,event_audio.htm,mainFrame\n","");
  }
  
  if(OpenVPN=="no")
  {
    scriptText = scriptText.replace("|-L_CamDrive,item,network_vpn.htm,mainFrame\n","");
  }
//  if(TempTag=="no")
//  {
    scriptText = scriptText.replace("|-L_PoE,item,system_PoE.htm,mainFrame\n","");
//  }
  if(IVSSupport == "no")
  {
    scriptText = scriptText.replace("-L_IVS,folder,ivs_tripwire.htm,mainFrame\n","");
    scriptText = scriptText.replace("|-L_TamperingDetection,item,ivs_tampering.htm,mainFrame\n","");
    scriptText = scriptText.replace("|-L_Tripwire_Detection,item,ivs_tripwire.htm,mainFrame\n","");
    scriptText = scriptText.replace("|-L_Perimeter_Detection,item,ivs_perimeter.htm,mainFrame\n","");
  }
  
  if(TripwireSupport == "no")
  {
    scriptText = scriptText.replace("|-L_Tripwire_Detection,item,ivs_tripwire.htm,mainFrame\n","");
  }
  
  if(PerimeterSupport == "no")
  {
    scriptText = scriptText.replace("|-L_Perimeter_Detection,item,ivs_perimeter.htm,mainFrame\n","");
  }

  if(TamperingSupport == "yes")
  {
    if(IVSSupport == "yes")
    {
      scriptText = scriptText.replace("|-L_TamperingDetection,item,event_tampering.htm,mainFrame\n","");
    }
    else
    {
      scriptText = scriptText.replace("|-L_TamperingDetection,item,ivs_tampering.htm,mainFrame\n","");
    }
  }
  else
  {
    scriptText = scriptText.replace("|-L_TamperingDetection,item,event_tampering.htm,mainFrame\n","");
    scriptText = scriptText.replace("|-L_TamperingDetection,item,ivs_tampering.htm,mainFrame\n","");
  }
  return scriptText;
}
function onMouseTDOver(id,cur) 
{
   cur.className = "mouseover";
   if(document.getElementById('img'+id)!=null)
   {
     var imgsrc = document.getElementById('img'+id).src;
     imgsrc = imgsrc.replace("2.png","1.png");
     document.getElementById('img'+id).src = imgsrc;
   }
}

function onMouseTDOut(id,cur) 
{
  if(id==onclicked) {
    cur.className = "selected";
    if(document.getElementById('item'+id)!=null){
      document.getElementById('item'+id).className = "selectedTD";  
    }
  }
  else {
    cur.className = "item";
    if(document.getElementById('item'+id)!=null){
      document.getElementById('item'+id).className = "";
    }
  }
  if(document.getElementById('img'+id)!=null)
  {
    var imgsrc = document.getElementById('img'+id).src;
    imgsrc = imgsrc.replace("1.png","2.png"); 
    document.getElementById('img'+id).src = imgsrc;
  }
}
function onTDClick(start,end,cur, target,linkpath) 
{
  var i;
  var depth, curDepth = TmpStr_0[start].search("-");
  if(getType(start)=="folder") {
      closeAllItemWithMask(start,end,curDepth);
      if(document.getElementById('img'+start)!=null){
        if(opened[start]) {
          document.getElementById('img'+start).src=imgright.replace("2.png","1.png");
          opened[start]=false;
        } else {
          document.getElementById('img'+start).src=imgdown.replace("2.png","1.png");
          opened[start]=true;
        }
      }
      var j = start+1;
      for(j;j<=end; j++)
      {
          depth = TmpStr_0[j].search("-");
          if(depth>curDepth){
            if((document.getElementById('layer'+j).style.display=='none')&&(depth==curDepth+1)){
              var ie = (typeof window.ActiveXObject != 'undefined');
              if(ie && getOs() != "IE10"){
                document.getElementById('layer'+j).style.display='block'; 
              }else{
                document.getElementById('layer'+j).style.display='table-row';
                document.getElementById('layer'+j).style.cursor='pointer';
              }
            } else {
              document.getElementById('layer'+j).style.display='none';
            }
          }
          if(document.getElementById('img'+j)!=null)
              document.getElementById('img'+j).src=imgright;
          opened[j]=false;
      }
  }
  for(i=0; i<items; i++) 
  {
    if(i == start) {
      if(document.getElementById('item'+i)!=null)
        document.getElementById('item'+i).className = "selectedTD";
    }else {
      if(document.getElementById('layer'+i)!=null)
        document.getElementById('layer'+i).className = "item";
      if(document.getElementById('item'+i)!=null)
        document.getElementById('item'+i).className = "";
    }
  }
  linkpath += "?stamp=" + fwDate;

  if(target!=null){
      if(target=='_top')
        document.getElementById("setPage").src = linkpath;
      else if(target=='_self')
        document.getElementById("setPage").src = linkpath;
      else if(target=='_parent'){
        // for ABus
        document.getElementById("setPage").src = linkpath;
      }else if(target=='_blank')
        window.location=linkpath;
      else if(target=='_new') {
        sgWin = window.open(linkpath , "win2");
        this.focus();
      }else{
        // for ABus
        document.getElementById("setPage").src = linkpath;
      }
  }
  onclicked=start;
}
function onDownloadDone(scriptText){
  scriptText = modifyTree(scriptText);
  TmpStr_0 = scriptText.replace(/^[\s]+/g,"").replace(/[\s]+$/g,"").split("\n");
  items = TmpStr_0.length;
  initTree();
}
function initTree()
{
  var i, grupEnd;
  var TempHTML;
  var depth;
  var maxWidth=150;
  opened = new Array;
  for(i=0; i<items; i++) {
    depth = TmpStr_0[i].search("-");
    opened[i]=false;
    if(depth>maxDepth)
    maxDepth = depth;
  }
  maxDepth++;

  if(DetectMobile())
  {
    maxWidth = 10*maxDepth+133;      
  }
  else
  {
    maxWidth = 10*maxDepth+130;    
  }
  TempHTML="<table border=\"0\" width=\""+maxWidth+"\" cellpadding=\"0\" cellspacing=\"0\">";
  TempHTML+=BuildTree(0,items);
  TempHTML+=genTableHeader(maxDepth);
  TempHTML+="</table>";
  document.getElementById('TreeTmp').innerHTML = TempHTML;
}
function BuildTree(Tree_S,Tree_E){
      var i, grupEnd;
  var TempHTML="";
  var NodeType, NodeName, NodeLink, NodeTarget;
  var TmpStr = new Array;
  var depth;
  
  for(i=Tree_S; i<Tree_E; i++) {
    TmpStr = TmpStr_0[i].replace(/[-|¡@]/g,"").split(",");
    NodeName = TmpStr[0];
    NodeType = TmpStr[1];
    NodeLink = TmpStr[2];
    NodeTarget = TmpStr[3];
    depth = TmpStr_0[i].search("-");
    
    if(NodeType=="folder") 
    {
      grupEnd = findNextFolder(i,Tree_E);
      TempHTML+=genFolder(i,grupEnd,NodeName,NodeLink,NodeTarget,depth,maxDepth); 
    } else if(NodeType=="blockFrame") {
      //For ABus .Because genItem() default style is none. So I need create a new function and set default style is block. 
      TempHTML+=genBlockItem(i,NodeName,NodeLink,NodeTarget,depth,maxDepth); 
    } else {
      TempHTML+=genItem(i,NodeName,NodeLink,NodeTarget,depth,maxDepth); 
    }
  }
  return TempHTML;
}
function findNextFolder(Tree_S,Tree_E)
{
  var NodeType, NodeName, NodeLink, NodeTarget;
  var cntDepth = TmpStr_0[Tree_S].search("-");
  var depth;
  var TmpStr = new Array;
  for(i=Tree_S+1; i<Tree_E; i++) {
    //parse String
    TmpStr_1 = TmpStr_0[i].split(",");
    NodeName = TmpStr_1[0];
    NodeType = TmpStr_1[1];
    NodeLink = TmpStr_1[2];
    NodeTarget = TmpStr_1[3];
    depth = TmpStr_0[i].search("-");
    if(depth<=cntDepth) 
    {
      return (i-1);
    }
  }
  return (Tree_E-1);
}
function genTableHeader(maxDepth)
{
  var j;
  var tmp="<tr>";
  for(j=0;j<maxDepth;j++)
      tmp+="<td width=\"10\">&nbsp;</td>";
  tmp+="<td width=\"180\">&nbsp;</td></tr>";
  return tmp;
}

function genFolder(i,grupEnd,NodeName,NodeLink,NodeTarget,depth,maxDepth)
{
   var style="";
   if (depth>0) style="style=\"display:none\"";
   var rest = maxDepth-depth;
   var j = 15;//for tabindex
   j += i;
   depth++;
   var tmp = "<tr class=\"item\" id=\"layer"+i+"\" "+style+" onClick=\"onTDClick("+i+","+grupEnd+",this,'"+NodeTarget+"','"+NodeLink+"')\" onkeypress=\"onTDClick("+i+","+grupEnd+",this,'"+NodeTarget+"','"+NodeLink+"')\" onMouseOver=\"onMouseTDOver("+i+",this)\" onMouseOut=\"onMouseTDOut("+i+",this)\" style=\"cursor:pointer\" tabIndex="+j+"><td colspan=\""+depth+"\" class=\"item\" align=\"right\" valign=\"middle\"><img id=\"img"+i+"\" src=\""+imgright+"\"></td><td colspan=\""+rest+"\" class=\"item\" style=\"font-size:12px;\"  align=\"left\" valign=\"middle\">"+loadLangString(NodeName,false)+"</td></tr>";
   return tmp;
}
function genItem(i,NodeName,NodeLink,NodeTarget,depth,maxDepth)
{
  var rest = maxDepth-depth;
  var j = 15;//for tabindex
  depth++;
  j +=i;
  var tmp = "<tr class=\"item\" id=\"layer"+i+"\" style=\"display:none\" style=\"cursor:pointer;font-size:12px;\" tabIndex="+j+" onkeypress=\"onTDClick("+i+","+i+",this,'"+NodeTarget+"','"+NodeLink+"')\"><td colspan=\""+depth+"\" class=\"item\" align=\"center\" valign=\"middle\">&nbsp;</td><td id=\"item"+i+"\" class=\"item\" style=\"cursor:pointer;font-size:12px;\" colspan=\""+rest+"\" align=\"left\" valign=\"middle\"  onMouseOver=\"onMouseTDOver("+i+",this)\" onMouseOut=\"onMouseTDOut("+i+",this)\" onClick=\"onTDClick("+i+","+i+",this,'"+NodeTarget+"','"+NodeLink+"')\">"+loadLangString(NodeName,false)+"</td></tr>";
  return tmp;
}

//For ABus .Because genItem() default style is none. So I need create a new function and set default style is block. 
function genBlockItem(i,NodeName,NodeLink,NodeTarget,depth,maxDepth)
{
  var rest = maxDepth-depth;
  var block = 'table-row;cursor:pointer';
  var ie = (typeof window.ActiveXObject != 'undefined');
  depth++;

  if(ie)
  {
    block = 'block';
  }

  var tmp = "<tr class=\"item\" id=\"layer"+i+"\" style=\"display:" + block + "\" onClick=\"onTDClick("+i+","+i+",this,'"+NodeTarget+"','"+NodeLink+"')\" onMouseOver=\"onMouseTDOver("+i+",this)\" onMouseOut=\"onMouseTDOut("+i+",this)\" style=\"cursor:pointer\"><td colspan=\""+depth+"\" class=\"item\" align=\"center\" valign=\"middle\">&nbsp;</td><td id=\"item"+i+"\" style=\"font-size:12px;\" colspan=\""+rest+"\" align=\"left\" valign=\"middle\">"+loadLangString(NodeName,false)+"</td></tr>";
  return tmp;
}

function closeAllItemWithMask(maskFrom, maskTo, curDepth)
{
  var NodeType, NodeName, NodeLink, NodeTarget;
  var TmpStr = new Array;
  var depth;
  for(i=0; i<items; i++) {
      //parse String
    if((i>=maskFrom)&&(i<=maskTo))
       continue;
    TmpStr_1 = TmpStr_0[i].split(",");
        NodeName = TmpStr_1[0];
    NodeType = TmpStr_1[1];
    NodeLink = TmpStr_1[2];
    NodeTarget = TmpStr_1[3];
    depth = TmpStr_0[i].search("-");
    if(depth>curDepth) 
    {
      document.getElementById('layer'+i).style.display='none';
      if(document.getElementById('img'+i)!=null) {
        document.getElementById('img'+i).src=imgright;
        opened[i]=false;
      }
    }else if(depth==curDepth){
      if(document.getElementById('img'+i)!=null){
        document.getElementById('img'+i).src=imgright;
        opened[i]=false;
      }
    }
  }
}
function getType(idx)
{
  var NodeType, NodeName, NodeLink, NodeTarget;
  var TmpStr = new Array;
  TmpStr_1 = TmpStr_0[idx].split(",");
  NodeName = TmpStr_1[0];
  NodeType = TmpStr_1[1];
  NodeLink = TmpStr_1[2];
  NodeTarget = TmpStr_1[3];
  return NodeType;
}