/*  
	file: expand.js 
	update log: 
	20070809: remember expand collapse by session cookie
*/

/* 
	CAUTION 1): this javascript MUST put AFTER "combine.js"
	Dependent Global variables and examples
	1) lang = 0
	2) lang_prefix = '/en'; 

	CAUTION 2) firefox may not have default value on objects
	like: x.style.display = "none" or a.disabled = true
	set a default value when necessary
*/

// Global Variable for THIS FILE

// var for Expand Collapse - Online Service and Sitemap needed
var modeCollapse = 'collapse';
var modeExpand = 'expand'; 
var clusterarray = new Array();
var mypagetypecluster = '';
var mycluster = '';
var mypagetypebuttonall = '';
var mybuttonall = '';

// ID for the ex-coll all, html MUST use this ID
var clusteridAll = 'ex0' ; 

// Expand ONE cluster Button Text
/* var expandMsgOne= [
		['Expand', '展開', '展开', 'but_expand2.gif'],
		['Collapse', '關閉', '关闭', 'but_collapse2.gif']		
]; */

/* 20080212: change expandMsgOne and expandMsgAll from 2 to 4 rows, 
   to suit the new chinese wording */
var expandMsgOne= [
		['Display Content of ', '顯示', '显示', 'but_expand2.gif'],
		['Display Headings of ', '只顯示', '只显示', 'but_collapse2.gif'],
		['', '全部內容', '全部内容', ''],
		[' Only', '標題', '标题', '']
];

// "Expand All" Button Text
var expandMsgAll= [
	['Display All Content', '顯示全部內容', '显示全部内容', 'but_expandall2.gif'],
	['Display Headings Only', '只顯示標題', '只显示标题', 'but_collapseall2.gif'],
	['', '', '', ''],
	['', '', '', '']		
];

/*
	function: getElementsByClassName
	
	Written by Jonathan Snook, http://www.snook.ca/jonathan
	Add-ons by Robert Nyman, http://www.robertnyman.com

	Some ways to call it
	
	To get all an element in the document with a “info-links” class. 
	getElementsByClassName(document, "a", "info-links"); 
	
	To get all div elements within the element named “container”, with a “col” class. 
	getElementsByClassName(document.getElementById("container"), "div", "col"); 
	
	To get all elements within in the document with a “click-me” class. 
	getElementsByClassName(document, "*", "click-me"); 
*/

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/-/g, "\-");
	var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements);
}

/*
	function: loadClusterExpand
	usage: 
	1) when page load, load the expand cluster from cookie to array
	2) expand those cluster
*/
function loadClusterExpand() {

	// get all clusterid ("ID" inside mainArea, with class "toggleSingle")
	// this does NOT INCLUDE the "Expand all" Button
	var ts=getElementsByClassName(document.getElementById("mainArea"),"a","toggleSingle");	

	// 20070816: assume all collapse first (move out from if statement)
	var mode2=modeCollapse;

	// mark all cluster as collapse first (default)
	for (var j=0; j<ts.length; j++) {
		tsid = ts[j].id ;
		clusterarray[tsid]=modeCollapse;
	} 

	// special handling for all collapse or all expand
	if (mycluster==null || mycluster=='' || mycluster.indexOf(modeCollapse)>=0 || mycluster.indexOf(modeExpand)>=0 ) {
		
		// if cookie have "expand" string, means all button expand
		if (mycluster.indexOf(modeExpand)>=0) { 
			mode2=modeExpand;
			for (i in clusterarray) {
				clusterarray[i] = mode2; 
			}
		}

		// no need below, keep for reference
		//createCookie(mypagetypecluster,mode);
		
	} else {
		// have some clusters expands and some collapses
		mode2 = 'array';
		
		// split "mycluster" string, modify array value to expand according to "mycluster" value
		// "ta" means temparray 
		var ta = mycluster.split('|');	
		for(var i=0;i < ta.length;i++) {
			var t = ta[i];
			// put the expand cluster id to cluster array
			clusterarray[t] = modeExpand;
			//alert('loadClusterExpand: i='+i+' t='+t);
		}
	}

	// 20070816: display all button by 'collapse','expand' or 'array' 
	displayAllExpand(mode2);

}

/*
	function: changeClusterExpand
	usage: 2 input method:
	1) pass single clusterID, change it to "mode"
	2) pass "clusteridAll", change all to "mode"
	remark: consider one button collapse and all other expands, 
	expand the last one means "expand all", so this function also handle it.
*/
function changeClusterExpand(clusterid, mode) {
	var expand_string = '';		// it MUST BE empty string
	var expand_count = 0;
	var collapse_count = 0;
		
	// check it is not "clusteridAll"
	if (clusterid!=clusteridAll) { 
	
		// set the single cluster to array
		clusterarray[clusterid] = mode;
		
		// make the expand string
		for (i in clusterarray) {
			if ( clusterarray[i] == modeExpand ) {
				// add 'bar' for second to last item
				if (expand_string.length > 0) { expand_string += '|'; }
				// add all item
				expand_string += i ; 
				expand_count++;
			} else { 
				collapse_count++;
			}
		}
		
	} else {
		// clusterid=clusteridAll
		
		// set all array to "mode" (ex-coll)
		for (i in clusterarray) {		
			clusterarray[i] = mode;
		}
		// arbitary set ex-coll_count > 0 when it is 'ex-coll all'
		if (mode==modeExpand) { expand_count = 99; } else { collapse_count = 99; }
	}
	
	var allflag = 0;	// all ex-coll flag
	
	// see finally whether ex-coll one will lead to ex-coll all
	if (expand_count==0) { expand_string='collapse'; allflag=1; }
	else if (collapse_count==0)  { expand_string='expand'; allflag=1; }
	else { /* do nothing*/ }
	
	//alert('changeClusterExpand: expand_string='+expand_string);
	
	// Create Cookie by expand_string
	var cookieName = "govhk" + getPageType() + "cluster"
	createCookie(cookieName,expand_string,null);
	// createCookie(mypagetypecluster,expand_string,null);
	
	// call display functions 
	if (allflag==0) {
		displayOneExpand(clusterid,mode,expandMsgOne);
	} else {
		// create cookie "all"
		cookieName = "govhk" + getPageType() + "buttonall"
		createCookie(cookieName,mode,null);
		// createCookie(mypagetypebuttonall,mode,null);
		mybuttonall = mode;
		
		// then display 
		displayAllExpand(mode);
	}
}

// function to get the Image Status ('expand' or 'collapse')
function getImageExpandStatus(clusterid)
{
	ex_obj=document.getElementById(clusterid);
	img_obj=document.getElementById("i"+clusterid);

	// assume collapse first, then check for expand
	// can check filename "but_expand2.gif" and "but_expandall2.gif" (one and all) 
	var status = modeCollapse;
	if (img_obj.src.indexOf('but_expand')>=0) {
		status = modeExpand;
	}

	return status;
}

// not use, but keep first
function reverseExpandStatus(mode)
{
	var mode2='' ;
	if (mode==modeExpand) { mode2=modeCollapse; } else { mode2=modeExpand; }
	return mode2;
}

// function to handle display for ONE button ex-coll status
// can handle "ex-coll All" button also
function displayOneExpand(clusterid, mode, expandMsgIn ) {

	// ex_obj is the remote (the button)
	// img_obj is the img for ex-coll
	// rex_div is content to be ex-coll (not exist for "expand all")
	
	ex_obj=document.getElementById(clusterid);
	img_obj=document.getElementById("i"+clusterid);
	if (clusterid!=clusteridAll) {
		rex_div=document.getElementById("r"+clusterid);
	}
	
	// do the ex-coll variable	
	if (mode==modeCollapse) {
		 // div change to collapse (what user click/image display)
		 // button change to reverse status
		 if (clusterid!=clusteridAll) {
			 rex_div.style.display="none";
		 }
		 btn_from = 1;
		 btn_to = 0;
	
	} else {
		 // change to expand, button is collapse
		 if (clusterid!=clusteridAll) {
			rex_div.style.display="block"; 
		 }
		 btn_from = 0;
		 btn_to = 1;
	}

	// set replace strings
	toggle_from = new RegExp( expandMsgIn[btn_from][lang] );
	toggle_from_str = expandMsgIn[btn_from][lang];
	toggle_to = expandMsgIn[btn_to][lang];

	// 20080212: add for new chinese wording, since now seperate to two parts
	toggle_from2 = new RegExp( expandMsgIn[btn_from+2][lang] );
	toggle_from2_str = expandMsgIn[btn_from+2][lang];
	toggle_to2 = expandMsgIn[btn_to+2][lang];

	gif_from = new RegExp( expandMsgIn[btn_from][3] );
	gif_to =  expandMsgIn[btn_to][3] ;		 
	
	// get the texts
	altText = img_obj.alt;
	srcText = img_obj.src;

	// replace the texts
	img_obj.src = srcText.replace(gif_from,gif_to);		 

	// altText = altText.replace(toggle_from,toggle_to);
	// 20080212: add for new chinese wording, since now seperate to two parts
	//altText2 = altText.replace(toggle_from,toggle_to);
	//img_obj.alt = altText2.replace(toggle_from2,toggle_to2);
	// 1st test the leading string
	var altText2;
	if (toggle_from_str.length > 0) {
		altText2 = altText.replace(toggle_from,toggle_to);
	} else {
		altText2 = toggle_to + altText;
	}
	// 2nd test the trailing string
	if (toggle_from2_str.length > 0) {
		img_obj.alt = altText2.replace(toggle_from2,toggle_to2);
	} else {
		img_obj.alt = altText2 + toggle_to2;
	}

	// set the variable "title", for Firefox only
	try {
		ex_obj.title = img_obj.alt;
	} catch (e) {}
		   
}

function displayAllExpand(mode) {

	// CAUTION: Online Services: "Residents" only
	// "Business" and "NonResidents" have not the expand function
	// so try-catch here.
	
	// mode can be 'collpase', 'expand' and 'array' (use array value)

	try { 

		// for ex-coll all
		var mode2 = mode;

		// for all clusterid (except the "clusteridAll")
		for (i in clusterarray) {
			
			// for page load, should use 'array value'
			if (mode=='array') { mode2 = clusterarray[i]; } 
			
			// handle display each one by "displayOneExpand"
			displayOneExpand(i,mode2,expandMsgOne);
		}
	
		// for ex-coll all button, get cookie status
		if (mode=='array') { mode2 = mybuttonall; }
	
		// handle 'ex-coll All' Button Display
		displayOneExpand(clusteridAll,mode2,expandMsgAll);

	} catch (e) {}
   
}

/* 
	function: toggleExpand 
	this is a FRONT-END function (user input) 
	this function can handle "clusteridAll" Button 
*/
function toggleExpand( clusterid ) {

	// get current image status
	imgMode = getImageExpandStatus(clusterid);

	// e.g. image is "expand", then user what to "expand" (so currently cluster is collapsed)
	changeClusterExpand(clusterid,imgMode);
}

function initExpand() {

	// only online service and sitemap will have function "getPageType" pass from HTML HEAD tag
	// so check the existance of function
	var currentPageType = "";
	if (typeof(getPageType) == "function") {
		currentPageType = getPageType();
	}

	// 20071224: check if have URL get variable
	var getVar = []
	getVar = getUrlVars();		// function from "combine.js"

	// 'anchor' is special element EXIST in the array (may be empty string)
	// if have 'anchor', anchor override cookie setting
	if (getVar['anchor'].length > 0 )	{
		
		mycluster = 'ex1'+getVar['anchor'];
		//alert('mycluster ' + mycluster);
		mybuttonall = modeCollapse ; 
		//changeClusterExpand(clusterid,modeExpand);
		
		// store the anchor to cookie
		mypagetypecluster = "govhk" + currentPageType + "cluster";
		mypagetypebuttonall = "govhk" + currentPageType + "buttonall";
		
		//alert('mypagetypecluster '+mypagetypecluster);
		
		// store the anchor to cookies
		createCookie(mypagetypecluster,mycluster,null);		
		createCookie(mypagetypebuttonall,mybuttonall,null);				

		// 20071228: handle expand display when page load (move from combine.js)
		loadClusterExpand(); 	// hander pageLoad-ClusterExpand

		// for Firefox2, move to the anchor position 
		// Remark: firefox cannot just come to anchor by "#cluster" when "collapse/expand" (page length changed)
		//         have to use below code to move to anchor position
		//         IE7 is no harm for this code
		window.location.hash= '#' + getVar['anchor'];
	
	} else {
		
		// 20071227: if have not anchor, read from cookie
		
		/* get the "govhksitemapcluster" or "govhkos_residentscluster" cookie value to "mycluster" */
		mypagetypecluster = "govhk" + currentPageType + "cluster";
		mycluster = readCookie(mypagetypecluster);
		if (mycluster==null || mycluster=='') {mycluster=modeCollapse; } 
		
		// get the "govhksitemapbuttonall" cookie value to "mybuttonall" 
		mypagetypebuttonall = "govhk" + currentPageType + "buttonall";
		mybuttonall = readCookie(mypagetypebuttonall);
		if (mybuttonall==null || mybuttonall=='') {mybuttonall=modeExpand; } 
		
		//alert ('mycluster:'+mycluster+'   mybuttonall:'+mybuttonall);

		// 20071228: handle expand display when page load (move from combine.js)
		loadClusterExpand(); 	// hander pageLoad-ClusterExpand
	}

}