// variables
var nodes_array = new Array();
var current_document = -1;

var nav_div_id='sidebar';
var nav_root = 0;
var nav_tree = new Array();   // nav_tree
var nav_type = new Array();
var prev_id;
var prev_mark;

var outmsg="";
// var indentation
var indent_width = 20;
var indent_height = 10
// image file
var img_hsize = 40;
var img_vsize = 20;
var img_spacer  = "/i/nav_spacer.gif";

//--------------------------------------------------------------
// Define type of node
function DefineType(tname, img_prefix)
{   this.name = tname;
    this.img_prefix = img_prefix;
    // preload image
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = img_prefix + "_collapse.gif";
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = img_prefix + "_expand.gif";
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = img_prefix + "_open.gif";
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = img_prefix + "_close.gif";

}

function clearTree(){
	nav_tree = new Array();
	nav_type = new Array();	
}

function CreateType(tname, img_prefix)	
{   
	var tid = nav_type.length;
    nav_type[tid] = new DefineType(tname, img_prefix);
    return tid;
}

//--------------------------------------------------------------
// This function creates a node in the tree with the following arguments:
//    parent - parent node number
//    Type   -  F: folder    D: document
//    state - O: Open    C: Close
//    header -  header to be displayed when closed
//    content   -  detail data to be displayed when opened
function DefineNode(parent, type, state, header, content, image, category_id, checked)
{   this.parent = parent;
    this.state = state;
    this.type = type;
    this.header = header;
    this.content = content;
    this.child = 0;
    this.image = image;
    this.category_id = category_id;
    this.checked = checked;
    this.child_open = false;
}

function CreateNode(parent, type, state, header, content, image, category_id, checked)	
{   var id = nav_tree.length;
    nav_tree[id] = new DefineNode(parent, type, state, header, content, image, category_id, checked);
    if ( parent >= 0)
        nav_tree[parent].child ++;
    return id;
}

//--------------------------------------------------------------
function output(msg)
{   outmsg += msg;
}

//--------------------------------------------------------------
function WriteActionAll(nav_root, nav_root_level, nav_div_id)
{
    outmsg="";
    // Display collapse all, expand all icon
    output('<span class=navs_action>');
    output('<a href=\'javascript:change_all("open",'
            + nav_root+ ',' + nav_root_level + ',"'+nav_div_id+'")\'>');
    output('<img src='+img_plus+' border="0"></a>Expand All&nbsp;');
    output('<a href=\'javascript:change_all("close",'
            + nav_root+ ',' + nav_root_level + ',"'+nav_div_id+'")\'>');
    output('<img src='+img_minus+' border="0"></a>Collapse All<p>');
    output('<\/span>');
    // now print it out
    element = document.getElementById(nav_div_id); 
    element.innerHTML = outmsg;    
}



//--------------------------------------------------------------
function WriteMenu(nav_root, nav_root_level, nav_div_id, needSelect)
{  

  outmsg="";
  // Create a table for each node
  WriteSubTree(nav_root, nav_root_level, nav_root, nav_root_level, nav_div_id);
  // now print it out
   if (!(document.getElementById || document.all || document.layers)) {
       alert ('Your browser is not supported!');
   }  
  element = document.getElementById(nav_div_id);
  element.innerHTML = outmsg ;  
  if(needSelect == 1){
	  setBgColor('tree' + (nav_tree.length-1));
	  getAlbumSongs(playlist_id);
  }
  else{
  	markLine(prev_id);	
  }
  //getNear();
}


//----------------------------------------------------------------
// This function writes all the child node for whatever
// parent node is specified as the argument. Note that
// this function is called recursively whenever any
// child node has children of its own.
function WriteSubTree(id, level, nav_root, nav_root_level, nav_div_id)
{

    var child_id;
    var indent_space;

    // Write this node data first, don't write main node
    if ( level >= 0 )
    {   // use table for breaking up column
        output('<table class="navs_tree" border="0" cellspacing="0" cellpadding="0" width="100%">');
        //--- determine indentation level
        indent = level* indent_width + 1;
        output('<tr id="tree'+ id +'" align="left"><td width="'+indent+'"><img src="'+img_spacer+
           '" width="' +indent +
           '" height="'+indent_height+'"></td>');
        //--- display open/collapse action icon
        output('<td width="'+indent_width+'">');
        if ( nav_tree[id].child == 0 )
        {           		
        		output('<img src="'+img_spacer+
                   '" width="' + indent_width +
                   '" height="'+ indent_height +'">');
        }
        else
        {   // determine action
            if (nav_tree[id].state == "open")
                img_src = "_collapse.gif";
            else
                img_src = "_expand.gif";
            // extract image node type
            node_type = nav_tree[id].type;
            img_src = nav_type[node_type].img_prefix + img_src;
            // display it
            output('<a href=\'javascript:toggle_state('
                   + id + ',' + nav_root + "," + nav_root_level +
                   ',"' + nav_div_id+ '")\'>');            
            output('<img src="'+img_src+'" border="0"></a>')
        }
        //--- display item state
        output('</td><td width="1"><input id="check'+id+'" type="checkbox" onclick="setChecked('+id+', this.checked)" '+nav_tree[id].checked+'></td>');	   
        output('<td width="'+indent_width+'">');
        node_type = nav_tree[id].type;
        img_src= nav_tree[id].image == '' ? nav_type[node_type].img_prefix + "_"+nav_tree[id].state+".gif" : nav_tree[id].image;
        if(nav_tree[id].content != ''){
        	output('<a href=\'javascript:'+ nav_tree[id].content +';setBgColor("tree'+ id +'");\'>');
        }
        else{
        	output('<a href=\'javascript:toggle_state('
                   + id + ',' + nav_root + "," + nav_root_level +
                   ',"' + nav_div_id+ '")\'>');
        }
        output('<img src="'+img_src+'" height="16" width="22" border="0"></a></td>')
        //--- display header and detail
        if(nav_tree[id].content != ''){
	        output('<td nowrap>');
	        output('<a href=\'javascript:'+ nav_tree[id].content +';setBgColor("tree'+ id +'");\' style="text-decoration:none;color: #000000;">');
	        output(cat(nav_tree[id].header, 25));
	        output('</a></td></tr>');        
	    }
	    else{
	    	output('<td nowrap>'+cat(nav_tree[id].header, 25)+'</td></tr>');
	    }
        output('</table>');
    }
    //--- Run through all of the parent's child nodes
    if (nav_tree[id].state == "open" || level < 0)
    {   for (child_id = 0; child_id < nav_tree.length; child_id++)
        {   // skip if the parent is different >
            if ( nav_tree[child_id].parent == id && child_id != id )
                WriteSubTree(child_id, level+1, nav_root, nav_root_level, nav_div_id);
        } // for each node
    }    
} // function WriteSubTree

function setChecked(id, value){
	nav_tree[id].checked = value ? 'checked' : '';
	if(nav_tree[id].state != "open")
	{
		uncheck(id, nav_tree[id].checked);
	}
	setTreeChecked();
	getNear();
}

function uncheck(id, checked){
	if(nav_tree[id].child != 0){
		for (var child_id = 0; child_id < nav_tree.length; child_id++) {
    		if ( nav_tree[child_id].parent == id && child_id != id){
        		nav_tree[child_id].checked = checked;
        		if(document.getElementById('check'+child_id) != null){
        			document.getElementById('check'+child_id).checked = checked;
        		}
	        	uncheck(child_id, checked);
    	    }
    	}
    }
}

function setBgColor(id){	
	if(id != prev_id){
		document.getElementById(id).style.background = '#CCCCCC';
		if(document.getElementById(prev_id) != null){
			document.getElementById(prev_id).style.background = '#ffffff';	
		}
		prev_id = id;
		prev_mark = 1;
	}
	else{
		if(prev_mark == 1){
			document.getElementById(id).style.background = '#ffffff';
			prev_mark = 0;	
		}
		else{
			document.getElementById(prev_id).style.background = '#cccccc';	
			prev_mark = 1;
		}
	}
}

function markLine(id){
	if(document.getElementById(id) != null){
			var color = prev_mark == 1 ? '#cccccc' : '#ffffff';
			document.getElementById(prev_id).style.background = color;	
	}	
}

function cat(str, length){	
	return str.length > length ? str.substring(0, length-2) + '...' : str;
}

function toggle_state(id, root, root_level, nav_div_id)
{   // toggle the state
    current_state = nav_tree[id].state;
    if (current_state == "open")
        nav_tree[id].state = "close";
    else
        nav_tree[id].state = "open";

    setTreeChecked();

    // Rewrite the menu
    timeout_id = setTimeout('WriteMenu('+root+','+root_level+',"'+nav_div_id+'", 0)', 50);        
}

function change_all(new_state, root, root_level, nav_div_id)
{   var current_node;
    // change current nod
    nav_tree[root].state = new_state;
    // Run through the global nodes_array
    for (counter = 0; counter < nav_tree.length; counter++)
    {   if (nav_tree[counter].parent == root)
            change_all(new_state, counter, 0, "")
    }
    // Rewrite the menu
    if ( nav_div_id != "")
        timeout_id = setTimeout('WriteMenu('+root+','+root_level+',"'+nav_div_id+'", 0)', 50)
}