// treebar.js
//
// TreeBar V0.5
//
// usage:
//
//  var params = {
//      1:{
//         text:"item 1",						//<-- 文字
//         title:"item 1 title or alt",			//<-- 鼠标移上去时的提示内容
//         expand:false,						//<-- 如果此属性为true, 并且此项包含有子项时自动置为打开状态
//         icon:"icon_normal.gif",				//<-- 正常情况下的图标
//         icon_hover:"icon_hover.gif",			//<-- 鼠标移上去时的图标
//         icon_active:"icon_active.gif",		//<-- 当项目为活动状态时的图标
//         url:"/page1.html",					//<-- 点击打开的链接
//         target:"_self",						//<-- 链接打开的目标 _blank 为新窗口，_self为当前窗口
//         urls:["page2.html","page3.html"]		//<-- 当页面文件名包含在此数组时，认为此项为活动状态
//      },
//      "$1":"space",							//<-- 加入间隔 <br/><br/>
//      2:{
//         text:"item 2",
//         title:"item 1 title or alt",
//         expand:true,
//         icon:"icon_normal.gif",
//         subitems:{
//             "2.1":{
//                text:"sub item 2.1",
//                title:"",
//                expand:false,
//                url:"http://www.domain.com"
//             }
//         }
//      }
//  };
//
//  var styles = {
//  	1:{										//<-- 第一级树的样式
//  		classid:"tree_1st_normal",			//<-- 常规状态的class id
//  		classid_hover:"tree_1st_hover",		//<-- 鼠标盘旋状态的class id
//  		classid_active:"tree_1st_active"	//<-- 活动状态下的class id
//  	},
//  	2:{										//<-- 二级树样式
//  		classid:"tree_2nd_normal",
//  		classid_hover:"tree_2nd_hover",
//  		classid_active:"tree_2nd_active"
//  	}
//      										//<-- 可以添加更多级别
//  };
//
//  var bar = new TreeBar(params, "div");		//<-- 实例化
//
//  bar.setstyle(styles);						//<-- 设置样式
//  bar.build();								//<-- 生成html代码
//  bar.print();								//<-- 输出
//
//

var __instant__ = null;
var TreeBar = function()
{
	this.__menu__ = arguments.length>0 ? arguments[0] : {};
	this.__tagn__ = arguments.length>1 ? arguments[1] : "span";

	this.__html__ = "";
	this.__style__ = {};
	this.__level__ = 1;
	this.__root__  = document.createElement(this.__tagn__);

	this._build_ = function(arytree, parent)
	{
		var item = null;
		var elmt = null;
		var text = null;
		for(i in arytree)
		{
			item = arytree[i];
			if (item=="space")
			{
				var emptyline = document.createElement("br");
				parent.appendChild(emptyline);
				continue;
			}

			elmt = document.createElement(this.__tagn__);
			text = document.createElement("span");
			text.innerHTML = item.text;

			elmt.appendChild(text);
			elmt.className = this.__style__[this.__level__].classid;
			elmt.setAttribute("id", "item$"+i);
			elmt.setAttribute("onMouseOver", "mouseover(this);");
			elmt.setAttribute("onMouseOut",  "mouseout(this);");
			elmt.style.cursor= "default";

			if (typeof(item.title)=="string")
			{
				elmt.title = item.title;
			}

			if (typeof(item.url)=="string" && item.url!="")
			{
				elmt.style.cursor = "hand";
				elmt.setAttribute("target", typeof(item.target)=="string" ? item.target : "_self");
				elmt.setAttribute("onclick", "gotourl('" + item.url + "', '" + elmt.getAttribute("target") + "');");
			}

			if (typeof(item.icon)=="string")
			{
				var icon = document.createElement("img");
				icon.src = item.icon;
				icon.id  = "icon$"+i;
				icon.border = 0;
				//elmt.insertBefore(icon, text);
				elmt.appendChild(icon);
			}

			parent.appendChild(elmt);

			if (this.__tagn__=="span")
			    parent.appendChild(document.createElement("br"));


			if (typeof(item.subitems)=="object")
			{
				if (elmt.onClick==null)
					elmt.onClick =  "";
				elmt.style.cursor = "hand";
				elmt.setAttribute("onclick", "__instant__.collapseAll();var e=getElementById('sub$'+"+i+");if(e!=null){e.style.display=e.style.display=='none'?'block':'none';};");

				var droper = document.createElement("div");
				droper.id = "sub$"+i;
				droper.style.display = item.expand ? "block" : "none";
				this.__level__ ++;
				this._build_(item.subitems, droper);
				this.__level__ --;

				parent.appendChild(droper);
			}
		}
		if (this.__tagn__=="span")
		    parent.removeChild(parent.lastChild);

		return elmt;
	};

	this._getCurrentId_ = function(arytree)
	{
		var item = null;
		var lurl = location.href.toLowerCase();
		for(i in arytree)
		{
			item = arytree[i];

			if (typeof(item.url)=="string")
			{
				var filepath = item.url.substr(item.url.lastIndexOf("/")+1, item.url.length-item.url.lastIndexOf("/")).toLowerCase();
				if (filepath.length>0)
				{
					if (lurl.indexOf(filepath)>-1)
						return i;
				}
				else
				{
					if (lurl==item.url)
						return i;
				}

				if (typeof(item.urls)=="object")
				{
					for(v in item.urls)
					{
						if (lurl.indexOf(item.urls[v].toLowerCase())>-1)
							return i;
					}
				}
			}

			if (typeof(item.subitems)=="object")
			{
				var id = this._getCurrentId_(item.subitems);
				if (id!=-1)
				    return id;
			}
		}

		return -1;
	};

	this.__currid__ = null;

	__instant__ = this;
};

TreeBar.prototype.setstyle = function(style)
{
	this.__style__ = style;
};

TreeBar.prototype.build = function()
{
	this._build_(this.__menu__, this.__root__);
	document.write(this.__root__.outerHTML);
};

TreeBar.prototype.collapseAll = function(arytree)
{
	if (typeof(arytree)=="undefined")
	var arytree = this.__menu__;
	var item = null;
	for(i in arytree)
	{
		item = arytree[i];

		if (typeof(item.subitems)=="object")
		{
			var subtree = document.getElementById("sub$"+i);
			if (subtree!=null)
			{
				subtree.style.display = "none";
			}

			this.collapseAll(item.subitems);
		}
	}
};

TreeBar.prototype.print = function()
{
	document.write(this.__html__);

	this.refresh();
};

TreeBar.prototype.refresh = function()
{
	this.__currid__ = this._getCurrentId_(this.__menu__);
	if (this.__currid__==-1)
		return;

	var obj = document.getElementById("item$"+this.__currid__);
	var icon = document.getElementById("icon$"+this.__currid__);
	var item = getitem(obj);

	if (icon!=null && typeof(item.icon_active)=="string")
		icon.src = item.icon_active;

	if(this.__currid__.indexOf(".")>-1)
	{
		var tmp = this.__currid__.split(".");
		var tmpid = tmp[0];
		var sub = null;
		var item = null;
		for(var i=0;i<tmp.length;i++)
		{
			item = document.getElementById("item$"+tmpid);
			if (item!=null)
				item.className = this.__style__[i+1].classid_active;

			sub = document.getElementById("sub$"+tmpid);
			if(sub!=null)
				sub.style.display = "block";

			tmpid += "." + tmp[i+1];
		}
	}
	else // 只有一级项目
	{
		obj.className = this.__style__[1].classid_active;
	}
};

var gotourl = function(url, target)
{
	__instant__.__previd__ = __instant__.__currid__;
	__instant__.__currid__ = event.srcElement.id.split("$")[1];
	__instant__.refresh();

	var mysub = document.getElementById("sub$"+__instant__.__currid__);
	if(typeof(mysub)!="undefined" && mysub!=null)
	{
		mysub.style.display = mysub.style.display=="" || mysub.style.display=="block" ? "none" : "block";
	}

	if(""==url)
		return;

	if(target=="_self")
		location.href = url;
	else if(target=="_blank")
		window.open(url, "", "");
};

var getitem = function(obj)
{
	var id = obj.id.split("$")[1];
	var tmp = id.split(".");
	var item = __instant__.__menu__;
	var tmpid = tmp[0];
	for(var i=0;i<tmp.length;i++)
	{
		item = i==0 ? item[tmpid] : item["subitems"][tmpid];
		tmpid += "." + tmp[i+1];
	}

	return item;
};

var mouseover = function(obj)
{
	var id = obj.id.split("$")[1];
	if (typeof(__instant__.__currid__)=="string")
	if (__instant__.__currid__.indexOf(id)==0) return;

	var icon = document.getElementById("icon$"+id);
	var item = getitem(obj);

	if (icon!=null && typeof(item.icon_hover)=="string")
		icon.src = item.icon_hover;

	var level = id.split(".").length;
	obj.className = __instant__.__style__[level].classid_hover;
};

var mouseout = function(obj)
{
	var id = obj.id.split("$")[1];
	if (typeof(__instant__.__currid__)=="string")
	if (__instant__.__currid__.indexOf(id)==0) return;

	var icon = document.getElementById("icon$"+id);
	var item = getitem(obj);

	if (icon!=null && typeof(item.icon)=="string")
		icon.src = item.icon;

	var level = id.split(".").length;
	obj.className = __instant__.__style__[level].classid;
};


/******* example ******
var params = {
	1:{
		text:"HOME",
		title:"EASOL speaking test Homepage",
		expand:false,
		icon:"images/icon1.gif",
		icon_hover:"images/icon1.gif",
		icon_active:"images/icon1.gif",
		url:"index.htm"
	},
	2:{
		text:"ABOUT EASOL speaking test",
		title:"About EASOL speaking test",
		expand:false,
		icon:"images/icon2.gif",
		icon_hover:"images/icon2.gif",
		subitems:{
			"2.1":{
				text:"Introduction",
				url:"introduction.htm",
				target:"_self",
				title:"Introduction"
			},
			"2.2":{
				text:"\"Task\"",
				url:"task.htm",
				target:"_self",
				title:"Task"
			},
			"2.3":{
				text:"Scale",
				url:"scale.htm",
				target:"_self",
				title:"Scale"
			},
			"2.4":{
				text:"Mapping to CEF",
				url:"mapping.htm",
				target:"_self",
				title:"Mapping to CEF"
			},
			"2.5":{
				text:"Scoring",
				url:"scoring.htm",
				target:"_self",
				title:"Scoring"
			}
		}
	},
	3:{
		text:"PERSONAL ASSESSMENT",
		title:"Personal Assessment",
		expand:false,
		icon:"images/icon3.gif",
		icon_hover:"images/icon3.gif",
		subitems:{
			"3.1":{
				text:"Basic Assessment",
				url:"basic.htm",
				target:"_self",
				title:"Basic Assessment"
			},
			"3.2":{
				text:"Certification",
				url:"certification.htm",
				target:"_self",
				title:"Certification"
			}
		}
	},
	4:{
		text:"CORPORATE SERVICES",
		title:"Corporate Services",
		expand:false,
		icon:"images/icon4.gif",
		icon_hover:"images/icon4.gif",
		subitems:{
			"4.1":{
				text:"Introduction",
				url:"corporate.htm",
				target:"_self",
				title:"Corporate Services introduction"
			},
			"4.2":{
				text:"Case Studies",
				url:"case-study.htm",
				target:"_self",
				title:"Case Studies"
			}
		}
	},
	"$1":"space",
	5:{
		text:"TAKE TEST",
		title:"Tack Test",
		expand:false,
		icon:"images/icon5.gif",
		icon_hover:"images/icon5.gif",
		subitems:{
			"5.1":{
				text:"Introduction",
				url:"take-test.htm",
				target:"_self",
				title:"Tack Test introduction"
			},
			"5.2":{
				text:"Download Software",
				url:"download.htm",
				target:"_self",
				title:"Download Software"
			}
		}
	},
	6:{
		text:"VIEW RESULT",
		title:"View Result",
		expand:false,
		icon:"images/icon6.gif",
		icon_hover:"images/icon6.gif",
		subitems:{
			"6.1":{
				text:"Introduction",
				url:"view-result.htm",
				target:"_self",
				title:"View Result introduction"
			},
			"6.2":{
				text:"Login",
				url:"login.htm",
				urls:["my_account.htm","enter_code.htm","my_result.htm"],
				target:"_self",
				title:"Login"
			}
		}
	},
	"$2":"space",
	7:{
		text:"DEMONSTRATION",
		title:"Demonstration",
		expand:false,
		icon:"images/icon7.gif",
		icon_hover:"images/icon7.gif",
		url:"demonstration.htm"
	}
};

var styles = {
	1:{
		classid:"tree_1st_normal",
		classid_hover:"tree_1st_hover",
		classid_active:"tree_1st_active"
	},
	2:{
		classid:"tree_2nd_normal",
		classid_hover:"tree_2nd_hover",
		classid_active:"tree_2nd_active"
	}
};

var bar = new TreeBar(params, "div");

bar.setstyle(styles);
bar.build();
bar.print();
 **********************/
//-->