// Global variables
var items               = new Array();        // array of all items in the sitemap
var topItems            = new Array();        // top level items only
var browser             = "OTHER";            // browser version (DocAll, DocGet OTHER)
var selectedItem        = null;               // current selected item
var style               = null;               // site map style
var scriptURL           = null;               // URL to the script folder
var expandTopItems      = null;               // true to expand top level items
var mouseOverColor      = null;               // mouse over color
var selectedColor       = null;               // selected color
var selectedBackground  = null;               // selected background color


//////////////////////////////////////////////////////////////////
// Gives the top of an item.
//////////////////////////////////////////////////////////////////
function getTop( siteItem )
  {
    var this_parent=siteItem.parent;
    if (this_parent!=null) {return getTop(this_parent);}
    else return siteItem;
  }

//////////////////////////////////////////////////////////////////
// Expands all predecessors of a given item.
//////////////////////////////////////////////////////////////////
function expandPredecessors( siteItem )
  {
    var this_parent=siteItem.parent;
    while (this_parent!=null)
      {
      if ( !this_parent.opened ){itemClicked( this_parent );}
      this_parent=this_parent.parent;
      }
  }

//////////////////////////////////////////////////////////////////
// Collapses a given item, hiding its entire subtree.
//////////////////////////////////////////////////////////////////
function collapse( siteItem)
  {

//    if ( selectedItem == siteItem ){selectItem( null );}
    for ( var i=0; i<siteItem.children.length; i++ )
      {
        siteItem.children[i].obj.style.display = "none";
        collapse( siteItem.children[i]);
      }
  }


//////////////////////////////////////////////////////////////////
// Expands a given item, restoring its entire subtree.
//////////////////////////////////////////////////////////////////
function expand( siteItem )
  {
    for ( var i=0; i<siteItem.children.length; i++ )
      {
          siteItem.children[i].obj.style.display = "block";
        if ( siteItem.children[i].opened )
          expand( siteItem.children[i] );
      }
  }


//////////////////////////////////////////////////////////////////
// Expands a given item and collapses every other at the same level.
//////////////////////////////////////////////////////////////////
function expandCollapse( siteItem )
{
  var one_child_expanded=false;
  var children;
  if (one_child_expanded)
  {
    if ( siteItem.parent == null )
    {children = topItems;}else{children = siteItem.parent.children};
    for ( var i=0; i<children.length; i++ )
    if (children[i])
    {  if ( (children[i].opened) && (children[i] != siteItem))
        {
          children[i].opened = false;
          collapse( children[i] );
//          updateIcons( children[i] );
        }
    }
  }    
  expand( siteItem );
}

//////////////////////////////////////////////////////////////////
// Returns the tree icon for a given item.
//////////////////////////////////////////////////////////////////
function getTreeIcon( siteItem )
  {
    var icon;
    if ( siteItem.children.length == 0 )
    {
      if ( siteItem.last )
        icon = "images/tree/simplel.gif";
      else
        icon = "images/tree/simple.gif";
    }
    else if ( siteItem.opened )
    {
      if ( siteItem.last )
        icon = "images/tree/collapsel.gif";
      else
        icon = "images/tree/collapse.gif";
    }
    else if ( siteItem.last )
      icon = "images/tree/expandl.gif";
    else
      icon = "images/tree/expand.gif";
    return scriptURL+icon;
  }



  
//////////////////////////////////////////////////////////////////
// Called when the mouse moves out of an item.
//////////////////////////////////////////////////////////////////
function IMOu( siteItem )
{
	itemMouseOut(siteItem);
}

function itemMouseOut( siteItem )
  {
    siteItem.mouseOver = false;
//    updateIcons( siteItem );
    adjustY();
  }

 
//////////////////////////////////////////////////////////////////
// Called when the mouse moves over an item from outside.
//////////////////////////////////////////////////////////////////

function IMOv( siteItem )
{
	return itemMouseOver(siteItem);
}

function itemMouseOver( siteItem )
  {
    siteItem.mouseOver = true;
    updateIcons( siteItem );
    adjustY();
    var message = "";
    if ( siteItem.message != null )
      message = siteItem.message;
    else if ( siteItem.url != null )
      message = siteItem.url;
    return message;
  }


//////////////////////////////////////////////////////////////////
// Selects an item based on handle (and deselects whichever is selected).
//
// Parameters:
//   siteItem   handle to select
//////////////////////////////////////////////////////////////////

function SI( siteItem )
{
    if ( selectedItem != null )
      {
        selectedItem.selected = false;
        document.getElementById("style"+selectedItem.id).style.color = "";
        document.getElementById("style"+selectedItem.id).style.backgroundColor = "";
        updateIcons( selectedItem );
      }
    selectedItem = siteItem;
    if ( siteItem != null )
      {
      	
        siteItem.selected = true;
        document.getElementById("style"+siteItem.id).style.color = selectedColor;
        document.getElementById("style"+siteItem.id).style.backgroundColor = selectedBackground;
        updateIcons( siteItem );
      }
  }

//////////////////////////////////////////////////////////////////
// Selects an item based on identifier (instead of handle).
//////////////////////////////////////////////////////////////////

function SIBI/*SelectItemById*/( id,select,b_ExpandPredecessors,b_Cookie )
{
  // collapse old top if changing to another top
 for ( var i=0; i<topItems.length; i++ )
 {
    if ((topItems[i].id!=getTop(items[id]).id)&&topItems[i].opened)
    {
      topItems[i].opened = false;
      collapse(topItems[i]);
      updateIcons(topItems[i]);
    }
  }
  
  itemClicked(items[id],b_ExpandPredecessors,select);

//  if (select==false){selectItem(null);}

  if (b_Cookie==null){b_Cookie=true;}
  if (b_Cookie)
  {  
  
  var str="";
    for ( var i=0; i<items.length; i++ )
      {
        if (items[i])
        {
          if ( items[i].opened )
            {
              str+=items[i].id+".";

            }
        }
      }
    var exp = new Date(); 
    exp.setTime(exp.getTime() + (365*24*60*60*1000));

    if (selectedItem)
    {
      setCookie("nbdigitaal_tree", str+selectedItem.id, exp, "/")
    }
    else
    {
      setCookie("nbdigitaal_tree", str+'null', exp, "/")
    }
  }

} // end function

//////////////////////////////////////////////////////////////////
// ExpandTree get Cookie and reconstructs last known state
//////////////////////////////////////////////////////////////////

function ExpandTree()
{
 var str=getCookie("nbdigitaal_tree");
 if (str!=null)
 {
  str=str.split("."); 
  for ( var i=0; i<str.length-1; i++ )
  {
    if(items[str[i]]){SIBI(str[i],false,false,false);}
  }
  SI(items[str[str.length-1]]);
 }
}


//////////////////////////////////////////////////////////////////
// Called when an item is clicked. Expands/collapses the item and selects
// the item. if b_ExpandPredessors is false, it is possible to click items 
// that are not visible. Otherwise, visibility is forced by expanding
// predecessors
//////////////////////////////////////////////////////////////////
function itemClicked( siteItem,b_ExpandPredecessors,select )
  { 
  
   if ( (siteItem.children.length != 0) && (browser != "OTHER") )
      {
        if (siteItem.opened ){collapse( siteItem );}
        else {expandCollapse( siteItem );}
    siteItem.opened = !siteItem.opened;
      }


   if (b_ExpandPredecessors==null){b_ExpandPredecessors=true;}
   if (b_ExpandPredecessors)
   {   expandPredecessors( siteItem );} // open all predecessors to make item visible (recursion is not enough, because great-parent can be invisible)
   else 
   {
      if (siteItem.obj.style.display == "none")//inconsistency in visibility, so repair
      {collapse(siteItem);}
   }
      
    updateIcons( siteItem );
    if (select) {selectItem( siteItem );}
    adjustY();
  }



//////////////////////////////////////////////////////////////////
// Updates the icons of an item according to its state.
//////////////////////////////////////////////////////////////////
function updateIcons( siteItem )
  {
    if ( (style != "LIST") && (siteItem.children.length != 0) )
      document.getElementById("treeIcon"+siteItem.id).src = getTreeIcon(siteItem);
    if ( siteItem.icon == null )
      return;
    if ( (siteItem.selected) && (siteItem.selectedIcon != null) )
      siteItem.icon.src = scriptURL+siteItem.selectedIcon;
    else if ( (siteItem.mouseOver) && (siteItem.mouseOverIcon != null) )
      siteItem.icon.src = scriptURL+siteItem.mouseOverIcon;
    else if ( siteItem.opened )
      siteItem.icon.src = scriptURL+siteItem.expandedIcon;
    else
      siteItem.icon.src = scriptURL+siteItem.collapsedIcon;
  }

//////////////////////////////////////////////////////////////////
// Calculates the Y coordinates of all visible sitemap items.
//////////////////////////////////////////////////////////////////
function adjustY()
  {
      return;

    var y = 0;
    var minWidth = 0;
    var minHeight = 0;
    for ( var i=0; i<items.length; i++ )
      {
        items[i].obj.top = y;
        items[i].obj.left = 0;
        if ( items[i].obj.visibility == "show" )
          {
            y += items[i].obj.clip.height;
            if ( items[i].obj.clip.width > minWidth )
              minWidth = items[i].obj.clip.width;
            minHeight += items[i].obj.clip.height;
          }
      }
    document.sitemap.clip.right = minWidth;
    document.sitemap.clip.bottom = minHeight;
    
  }

    
//////////////////////////////////////////////////////////////////
// Writes a string to the sitemap document.
//////////////////////////////////////////////////////////////////
function _write( s )
  {
      document.write( s );
//      document.getElementById('treediv_inner').innerHTML+=s;
  }



//////////////////////////////////////////////////////////////////
// Writes a string and a CRLF to the sitemap document.
//////////////////////////////////////////////////////////////////
function _writeln( s )
  {
      document.writeln( s );
//      document.getElementById('treediv_inner').innerHTML+=s+String.fromCharCode(10);
  }



//////////////////////////////////////////////////////////////////
// Item object; packs together all item data for rendering and managing
//////////////////////////////////////////////////////////////////
function Item( Id, collapsedIcon, expandedIcon, mouseOverIcon, selectedIcon, iconWidth, iconHeight, text, font, bold, italic, size, color, message, url, target, onclick, last )
  {
    if (Id==null){this.id = items.length}else{this.id=Id};
    this.collapsedIcon = collapsedIcon;
    this.expandedIcon = expandedIcon;
    this.mouseOverIcon = mouseOverIcon;
    this.selectedIcon = selectedIcon;
//    this.iconWidth = iconWidth;
//    this.iconHeight = iconHeight;
    this.text = text;
//    this.font = font;
//    this.bold = bold;
//    this.italic = italic;
    this.size = size;
    this.color = color;
    this.message = message;
    this.url = url;
    this.target = target;

    this.onclick = onclick;

    this.opened = false;
    this.selected = false;
    this.mouseOver = false;

    this.children = new Array();
    this.last = last;
    this.obj = null;
    this.treeIcon = null;
    this.icon = null;
    this.style = null;
    this.parent = null;

    items[this.id] = this;
    
  }


//////////////////////////////////////////////////////////////////
// createItem
//////////////////////////////////////////////////////////////////
// usage: createItem(null,"Nokkie",1,"account","www.nbdigitaal.nl");
//
// id is identifier for object, if null, then it is previous+1
// description is description as shown in the tree structure
// levelnr is level of object..it will be connected to the last object with 
//      levelnr-1 or else to the top 
// group is one of {folder,account,nieuwsbrief,groep,nieuwe_groep,nieuwe_nieuwsbrief}
// link is the action when clicked
//////////////////////////////////////////////////////////////////

levelhandle = new Array();
prevhandle = new Array();

function createItem(id,description,levelnr,image,link,onclick,target)
{

  var image_size=12;
  if (!levelhandle[levelnr-1]){levelhandle[levelnr-1]=null;}

  message=description.replace("<b>","").replace("</b>","");
  
//id,collapsedIcon, expandedIcon, mouseOverIcon, selectedIcon, iconWidth, iconHeight, 
// text, font, bold, italic, size, color, message, url, target, last

  levelhandle[levelnr]=new Item(id,image,image,image,image,image_size,image_size,description,"",false,false,"1","",message,link,target,onclick,true);


  addItem(levelhandle[levelnr],levelhandle[levelnr-1]);
  if (window.prevhandle[levelnr]){if (prevlevelnr>=levelnr){prevhandle[levelnr].last=false;}}
  prevhandle[levelnr]=levelhandle[levelnr];
  prevlevelnr=levelnr;


}

//////////////////////////////////////////////////////////////////
// Adds a new item to the sitemap.
//
// Parameters:
//   siteItem     item to add
//   parent       item parent (if null, adds to top level)
//////////////////////////////////////////////////////////////////
function addItem( siteItem, parent )
  {
    if ( parent == null ||!parent.children)
      {topItems[topItems.length] = siteItem;}
    else
      {
        parent.children[parent.children.length] = siteItem;
    siteItem.parent = parent;
      }
  }



//////////////////////////////////////////////////////////////////
// Generates the HTML code for the entire sitemap. Notice that the "items"
// array must contain the sitemap items in the order they will appear.
//
// Parameters:
//   _style               sitemap style
//   _expandTopItems      true to create the sitemap with the top level items expanded
//   _mouseOverColor      color to use when the mouse is over an item
//   _selectedColor       color to use when an item is selected
//   _selectedBackground  background color to use when an item is selected
//   _scriptURL           URL to the script directory
//////////////////////////////////////////////////////////////////
function renderSitemap( _style, _expandTopItems, _mouseOverColor, _selectedColor, _selectedBackground, _scriptURL )
  {
    if ( document.getElementById )
      browser = "DocGet";
    else if ( document.all )
      browser = "DocAll";

    if ( browser == "OTHER" )
      _style = "LIST";
    style = _style;

    scriptURL = _scriptURL;
    expandTopItems = _expandTopItems;
    mouseOverColor = _mouseOverColor;
    selectedColor = _selectedColor;
    selectedBackground = _selectedBackground;


    display();
  }

//////////////////////////////////////////////////////////////////
// Displays the sitemap
//////////////////////////////////////////////////////////////////
function display()
  {
      _writeln( "<table cellspacing='0' cellpadding='0' class='tree'><tr><td valign=top>" );
      
    for ( var i=0; i<topItems.length; i++ )
      if (topItems[i]){renderItem( topItems[i], "" );}

      _writeln( "</td></tr></table>" );

    for ( var i=0; i<topItems.length; i++ )
    {  
     if (topItems[i])
      {
        var siteItem = topItems[i];
          siteItem.obj.style.display = "block";
        if ( (expandTopItems) && (siteItem.children.length != 0) )
          {
            expand( siteItem );
            siteItem.opened = true;
//            updateIcons( siteItem );
          }
      }
    }  
    adjustY();
  }
  
//////////////////////////////////////////////////////////////////
// Outputs an anchor (<A>) tag for one item.
//
// Parameters:
//   siteItem     item for which to output the link
//   element      HTML code to write inside the anchor tag
//////////////////////////////////////////////////////////////////
function outputItemAnchor( siteItem, element )
  {
    var text='';
    if ( siteItem.url != null){_url="href='"+siteItem.url+"' ";} else {_url="href='javascript:SIBI("+siteItem.id+");'";}
    if ( siteItem.onclick !=null){_onclick='onClick="'+siteItem.onclick+';" ';} else {_onclick="onClick='SI(items["+siteItem.id+"]);'";}

    text+="<td nowrap class='clsNode'><a "+_url+" "+_onclick+" ";
     if ( siteItem.target != null ){text+=" target='"+siteItem.target+"'" ;}
//    text+=" onMouseOver='window.status=IMOv(items["+siteItem.id+"]); return true'";
    text+=" onMouseOut='IMOu(items["+siteItem.id+"]); window.status=\"\"; return true'";
//    text+=" onMouseDown='show_options(event);' ";
    text+="  >"+element+"</a></td>";
  
    return text;
  }


  
//////////////////////////////////////////////////////////////////
// Generates the HTML code for a given item.
//
// Parameters:
//   siteItem   item for which to generate the HTML
//   left       piece of HTML to "ident" the item
//////////////////////////////////////////////////////////////////
function renderItem( siteItem, left )
  {
  
    var text='';
      text+="<table id='item"+siteItem.id+"' class='tree' style='display:none'>";
    text+="<tr>";
    text+=left;
        if ( siteItem.children.length > 0 )
          {text+="<td><a href='javascript:SIBI("+siteItem.id+",false)' onMouseOver='window.status=\"\"; return true'><img name='treeIcon"+siteItem.id+"' id='treeIcon"+siteItem.id+"' src='"+getTreeIcon(siteItem)+"' border='0' width='19' height='16'></a></td>";}
        else
          {text+="<td><img src='"+getTreeIcon(siteItem)+"' width='19' height='16'></td>";}
        text+="<td><img src='"+scriptURL+"images/tree/space.gif' width='3' height='16'></td>";
    
    var icon = siteItem.collapsedIcon;

    if ( icon != null&&icon!="")
      {
      	text+=outputItemAnchor( siteItem, "<img name='icon"+siteItem.id+"' src='"+scriptURL+icon+"' width='12' height='12'>" );
        text+=outputItemAnchor( siteItem, "<img src='"+scriptURL+"images/tree/space.gif' border='0' width='3' height='12'>" );
      }
    if ( siteItem.text != null )
      {
        var s = siteItem.text;
            var s1 = "<span";
            s1 += " id='style"+siteItem.id+"'";
            s1 += ">";
            s = s1+s+"</span>";
        text+=outputItemAnchor( siteItem, s );
      }
      
    text+="<td width=100%></td>";
    text+="</tr>";
        text+="</table>";
    _write(text);
    text='';
        siteItem.obj = document.getElementById("item"+siteItem.id);
        siteItem.treeIcon = document.getElementById("treeIcon"+siteItem.id);

    _writeln(text);
    text='';

    if ( (siteItem.last) )
      left += "<td><div class='t_bl'></div></td>";
    else
      left += "<td><div class='t_tl'></div></td>";
    for ( var i=0; i<siteItem.children.length; i++ )
      if (siteItem.children[i]){renderItem( siteItem.children[i], left );}
  }