/***********************************************************************************/
/****** g5Box **********************************************************************/
/***********************************************************************************/
var gboxType; // type for public
var gboxTitle; // title for public
var gboxTitleLoading = "<img src='2aImages/gbox/titleloading.gif'>"; // default value of gboxTitle.innerHTML, must be ?loading.gif, just work for gboxHideBox function
var gboxHeaderHeight = 24;
var gboxContentPadding = 0; // default value, set the pix of padding with gboxcontent in css (ex:padding=5, the value=5x2). if type is photo, don't used this
var gboxBorder = 2; // setting with header[border-top,border-left,border-right] and content[border-left,border-right,border-bottom] in css
var gboxContentWidth = 0;
var gboxContentHeight = 0;
var gboxWidth = gboxContentWidth + gboxBorder;
var gboxHeight = gboxContentHeight + gboxHeaderHeight + gboxBorder;
var gboxBottomHeight = 0; // default value, the height of bottom
/***********************************************************************************/
/****** Importance! set the wrapper's id with div **********************************/
/***********************************************************************************/
var gbWrapper = 'maincontainer';
/***********************************************************************************/
/****** public variant *************************************************************/
/***********************************************************************************/
var gbCenterLat = '121.770108'; // the default longitude of map
var gbCenterLong = '24.687907'; // the default latitude of map
var gbPhotoSrc; // the current source of photo
var gbImgCurrent = 1; // default value for the current number of photo
var gbCurrentBottomHeight = 0; // variant for bottom default height, set the height of bottom for gboxCenterPosition function
var	gbTimeout = null;
var gbInterval = null;
var gbTimer = 5;
var gbAlpha = 0;
var gbAutoPhoto; // working for gboxAutoPhoto function, value in true or false
var gbAutoPhotoClick = 0; // working for gboxAutoPhoto function, check the times when auto play on clicked(if >1, the event will return false)
var gbAutoPhotoIdx = 6; // working for gboxPhotoBottomTimer function, set the value of speed with auto play
/***********************************************************************************/
/****** Start gbox setting *********************************************************/
/***********************************************************************************/
function g5box(title,message,type,w,h,autohide){
	try{
		// add the element to gbox
		g5addElement('div','gboxMask',$tag('body')[0]);
		g5addElement('div','gbox',$tag('body')[0]);
		g5addElement('div','gboxHeader','gbox');
		g5addElement('div','gboxTitle','gboxHeader');
		g5addElement('div','gboxClose','gboxHeader');
		g5addElement('div','gboxContent','gbox');
		$id('gboxClose').setAttribute('title','關閉 | 按頁面灰色區域亦可關閉');
		$id('gboxMask').onclick = gboxHideBox;
		$id('gboxClose').onclick = gboxHideBox;
		// set the gboxtype for public
		if (!type) {
			type = 'error';
			gboxType = 'error';
		} else if (type=='msn'&&message=='msn') {
			gboxType = 'msn';
		} else if (type=='msn'&&message=='yahoo') {
			gboxType = 'yahoo';
		} else if (type=='contact'&&message=='recruit') {
			gboxType = 'recruit';
		} else {
			gboxType = type;
		}
		// set the gboxTitle for public
		gboxTitle = title;
		// set style(default) of gbox
		if (gboxType=='photo') {
			$id('gboxContent').style.width = '150px';
			$id('gboxContent').style.height = '150px';
			$id('gbox').style.width = '152px';
			$id('gbox').style.height = '176px';
			$id('gboxContent').innerHTML = '相片載入中';
			gboxBottomHeight = 32; // set the height of gbox bottom
		} else if(gboxType=='map') {
			$id('gboxContent').style.width = '150px';
			$id('gboxContent').style.height = '150px';
			$id('gbox').style.width = '152px';
			$id('gbox').style.height = '176px';
			$id('gboxContent').innerHTML = '地圖載入中';
			gboxBottomHeight = 32; // set the height of gbox bottom
		} else if(gboxType=='video') {
			$id('gboxContent').style.width = '150px';
			$id('gboxContent').style.height = '150px';
			$id('gbox').style.width = '152px';
			$id('gbox').style.height = '176px';
			$id('gboxContent').innerHTML = '影音載入中';
			gboxBottomHeight = 32; // set the height of gbox bottom
		} else if(type=='msn') {  // attention: must be type, not gboxType (contain:msn or yahoo)
			$id('gboxContent').style.width = '150px';
			$id('gboxContent').style.height = '150px';
			$id('gbox').style.width = '152px';
			$id('gbox').style.height = '176px';
			$id('gboxContent').innerHTML = gboxTitleLoading + ' 資料載入中';
			gboxBottomHeight = 32; // set the height of gbox bottom
		} else if(!w&&!h) {
			gboxContentPadding = 10; // set the pix of padding with gboxcontent in css
			$id('gboxContent').style.width = '240px';
			$id('gboxContent').style.height = '140px';
			$id('gbox').style.width = parseInt($id('gboxContent').style.width,'px') + gboxContentPadding + gboxBorder + 'px';
			$id('gbox').style.height = parseInt($id('gboxContent').style.height,'px') + gboxContentPadding + gboxHeaderHeight + gboxBorder + 'px';
			$id('gboxContent').innerHTML = message;
			gboxBottomHeight = 0;
		} else {
			gboxContentPadding = 10;
			$id('gboxContent').style.width = parseInt(w) + 'px';
			$id('gboxContent').style.height = parseInt(h) + 'px';
			$id('gbox').style.width = parseInt($id('gboxContent').style.width,'px') + gboxContentPadding + gboxBorder + 'px';
			$id('gbox').style.height = parseInt($id('gboxContent').style.height,'px') + gboxContentPadding + gboxHeaderHeight + gboxBorder + 'px';
			$id('gboxContent').innerHTML = message;
			gboxBottomHeight = 0;
		}
		$id('gbox').style.opacity = .00;
		$id('gbox').style.filter = 'alpha(opacity=0)';
		$id('gboxHeader').className = type + 'header'; // attention: must be type, not gboxType
		$id('gboxContent').className = type; // attention: must be type, not gboxType
		$id('gboxTitle').innerHTML = gboxTitleLoading;
		// set the gbox position to center, set top & left of gbox with gboxCenterPosition function
		gboxCenterPosition('gbox');
		// set height of gboxMask
		var gboxWrapper = $id(gbWrapper);
		$id('gboxMask').style.height = document.body.clientHeight + 'px';
		// fade(in) the gbox
		gbInterval = window.setInterval('gboxFadeBox(1)', gbTimer);
		// set style.visibility of gboxClose
		if (autohide) {
			$id('gboxClose').style.visibility = 'hidden';
			gbTimeout = window.setTimeout('gboxHideBox()', (autohide * 1000));
		}else{
			$id('gboxClose').style.visibility = 'visible';
		}
		/***********************************************************************************/
		/****** select the gbox mode *******************************************************/
		/***********************************************************************************/
		if (gboxType=='photo') {
			gbImgCurrent = parseInt(message);
			gboxZoomBox(1);
		} else if (gboxType=='map') {
			gboxContentWidth = parseInt(w);
			gboxContentHeight = parseInt(h);
			gbCenterLat = message.split(',')[0];
			gbCenterLong = message.split(',')[1];
			gboxZoomBox(1);
		} else if (gboxType=='video') {
			gboxContentWidth = parseInt(w);
			gboxContentHeight = parseInt(h);
			gboxZoomBox(1);
		} else if (gboxType=='msn'||gboxType=='yahoo') {
			gboxContentWidth = parseInt(w);
			gboxContentHeight = parseInt(h);
			gboxZoomBox(1);
		} else if (gboxType=='query') {
			$id('gboxContent').innerHTML = '';
			// add the 'query.js' to gboxcontent
			g5loadJS('../2aJs/gbox/query.js');
		} else if (gboxType=='recruit') {
			$id('gboxContent').innerHTML = '';
			// add the 'recruit.js' to gboxcontent
			g5loadJS('../2aJs/gbox/recruit.js');
		} else {
			$id('gboxTitle').innerHTML = gboxTitle;
		}
		/***********************************************************************************/
		// when scroll moved
		window.onscroll = function(){
			if ($id('gbox')){
				gboxCenterPosition('gbox'); // set top & left of gbox with gboxCenterPosition function
			}
		}
		// when window onresize
		window.onresize = function(){
			if ($id('gbox')){
				gboxCenterPosition('gbox'); // set top & left of gbox with gboxCenterPosition function
				if (g5checkBrowser.ie){ // get the name of browser with g5checkBrowser public function
					$id('gboxMask').style.height = document.body.clientHeight + 'px';
				}else{
					$id('gboxMask').style.height = gboxWrapper.offsetHeight + 'px';
				}
			}
		}
	}catch(e){
		g5box('錯誤',"A javascript error has occured!<br>Please checked in g5box function<br>correct : " + e.message +
		"<p style='text-align:center;cursor:pointer;color:red;' onclick='g5reloadPage()'>[ close ]</p>",'error');
	}
}
/***********************************************************************************/
/****** hide the gbox **************************************************************/
/***********************************************************************************/
function gboxHideBox(){
	var str = $id('gboxTitle').innerHTML;
	if (str.indexOf('loading')>0){ // if gbox is loading, cancel the event
		return false;
	} else {
		gbCurrentBottomHeight = 0; // reset the variant value for gboxCenterPosition function
		clearTimeout(gbTimeout);
		clearInterval(gbInterval);
		gbInterval = window.setInterval('gboxFadeBox(0)', gbTimer);
		if (gbAutoPhoto==true) { // when photo show is working, reset teh variant to default value
			clearInterval(gbAutoPhotoInterval);
			gbAutoPhotoClick = 0;
			gbAutoPhotoIdx = 6;
			gbAutoPhoto = false;
		}
	}
}
/***********************************************************************************/
/****** fade-in the gbox (flag:1=in,0=out) *****************************************/
/***********************************************************************************/
function gboxFadeBox(flag){
	var value;
	var speed = 5;
	if(flag == null){flag = 1;}
	if(flag == 1){
		value = gbAlpha + speed;
	}else{
		value = gbAlpha - speed;
	}
	gbAlpha = value;
	g5setOpacity('gbox',value);// set opacity of gbox with g5setOpacity public function
	if(value >= 99){
		window.clearInterval(gbInterval);
		gbInterval = null;
	}else if(value <= 1){
		window.clearInterval(gbInterval);
		// remove object with g5removeElement public function
		g5removeElement('gbox');
		g5removeElement('gboxMask');
	}
}
/***********************************************************************************/
/****** set top & left of gbox *****************************************************/
/***********************************************************************************/
function gboxCenterPosition(inID){
	var obj = $id(inID);
	var gbinnHeight;
	if (window.innerHeight){
		gbinnHeight = window.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		gbinnHeight = document.documentElement.clientHeight;
	}else if (document.body) {
		gbinnHeight = document.body.clientHeight;
	}
	obj.style.left = f_scrollLeft() + (f_clientWidth() / 2) - (obj.offsetWidth / 2) + 'px';
	obj.style.top = (f_scrollTop() + (gbinnHeight - (obj.offsetHeight) + gbCurrentBottomHeight) / 2)  + 'px';
}
/***********************************************************************************/
/****** resize the gbox (flag:1=in,0=out) ******************************************/
/***********************************************************************************/
function gboxZoomBox(flag,mode){
	try{
		var currentWidth = 150;
		var currentHeight = 150;
		if (gboxType=='photo') { // when type is photo show, get the source & width & height of photo
			gbPhotoSrc = gbimgs[gbImgCurrent];
			gboxContentWidth = gbnewImg[gbImgCurrent].width;
			gboxContentHeight = gbnewImg[gbImgCurrent].height;
		}
		var maxWidth = gboxContentWidth;
		var maxHeight = gboxContentHeight;
		var minWidth = 150;
		var minHeight = 150;
		var speed = 10;
		function zoomIn() {
			function doZoom() {
				currentWidth = currentWidth + speed;
				currentHeight = currentHeight + speed;
				if (currentWidth >= maxWidth) {
					currentWidth = maxWidth;
				}
				if (currentHeight >= maxHeight) {
					currentHeight = maxHeight;
				}
				if ((currentWidth >= maxWidth) && (currentHeight >= maxHeight)){
					clearInterval(interval);
					if (gboxType=='photo') { // when type is photo show, add the photo
						addPhoto(); // go to addPhoto function
					} else if (gboxType=='map') { // when type is map show, add the map
						addMap(); // go to addMap function
					} else if (gboxType=='video') { // when type is video show, add the video
						addVideo(); // go to addVideo function
					} else if (gboxType=='msn') { // when type is Msn Live Messenger, add the msn
						addMsn(); // go to addMsn function
					} else if (gboxType=='yahoo') { // when type is Yahoo Live Messenger, add the yahoo
						addYahoo(); // go to addYahoo function
					} else {
						alert('The gboxType is null or out of setting. Error on zoomIn function');
						return false;
					}
				}
				getCurrentSize(); // go to getCurrentSize function
			}
			interval = window.setInterval(doZoom, 5);
		}
		function zoomOut() {
			gbCurrentBottomHeight = 0; // reset the height of bottom for gboxCenterPosition function
			currentWidth = $id('gboxContent').style.width.split('px')[0];
			currentHeight = $id('gboxContent').style.height.split('px')[0];
			function doZoom() {
				currentWidth = currentWidth - speed;
				currentHeight = currentHeight - speed;
				if (currentWidth <= minWidth) {
					currentWidth = minWidth;
				}
				if (currentHeight <= minHeight) {
					currentHeight = minHeight;
				}
				if ((currentWidth <= minWidth) && (currentHeight <= minHeight)){
					clearInterval(interval);
					if (gboxType=='photo') { /****** when type is photo show, do below line ******/
						$id('gboxContent').innerHTML = '相片載入中';
						if (mode=='previous') { // if show previous photo, current number = '-1', 'mode' come from gboxPrePhoto or gboxNextPhoto function
							gbImgCurrent = gbImgCurrent-1;
						} else { // if show next photo, current number = '+1'
							gbImgCurrent = gbImgCurrent+1;
						}
						if ((gbAutoPhoto==true)&&(gbImgCurrent>gbimgCount)){
							gbImgCurrent=1;
						}
						gboxZoomBox(1); // return gboxZoomBox function
					}/****** End photo ******/
				}
				getCurrentSize(); // go to getCurrentSize function
			}
			interval = window.setInterval(doZoom, 5);
		}
		/***********************************************************************************/
		/****** set gbox width & height & position *****************************************/
		/***********************************************************************************/
		function getCurrentSize(){
			$id('gboxContent').style.lineHeight = currentHeight + 'px';
			$id('gboxContent').style.width = currentWidth + 'px';
			$id('gboxContent').style.height = currentHeight + 'px';
			$id('gbox').style.width = currentWidth + gboxBorder + 'px';
			$id('gbox').style.height = currentHeight + gboxHeaderHeight + gboxBorder + 'px';
			gboxCenterPosition('gbox'); // return to gboxCenterPosition function
		}
		/***********************************************************************************/
		/****** add photo into gboxContent *************************************************/
		/***********************************************************************************/
		function addPhoto(){
			$id('gboxContent').innerHTML = '';
			// add the 'photo.js' to gboxcontent
			g5loadJS('../2aJs/gbox/photo.js');
		}
		/***********************************************************************************/
		/****** add map into gboxContent ***************************************************/
		/***********************************************************************************/
		function addMap(){
			$id('gboxContent').innerHTML = '';
			// add the 'map.js' to gboxcontent
			g5loadJS('../2aJs/gbox/map.js');
		}
		/***********************************************************************************/
		/****** add video into gboxContent ***************************************************/
		/***********************************************************************************/
		function addVideo(){
			$id('gboxContent').innerHTML = '';
			// add the 'video.js' to gboxcontent
			g5loadJS('../2aJs/gbox/video.js');
		}
		/***********************************************************************************/
		/****** add msn into gboxContent ***************************************************/
		/***********************************************************************************/
		function addMsn(){
			$id('gboxContent').innerHTML = '';
			g5addElement('div','gboxMsnPresence','gboxHeader');
			g5addElement('iframe','gboxMsnFrame','gboxContent');
			$id('gboxMsnFrame').src = 'http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=ae3c7be2cedc800b@apps.messenger.live.com&mkt=zh-tw';
			$id('gboxMsnFrame').frameBorder = 0;
			$id('gboxMsnFrame').scrolling = 'no';
			g5setStyle('gboxMsnFrame','display:block;width:' + gboxContentWidth + 'px;height:' + gboxContentHeight + 'px');
			$id('gboxTitle').innerHTML = gboxTitle + " <span style='font-size:12px;color:#888888'>(請按'開始對話', 選擇'傳送匿名訊息')</span>";
		}
		/***********************************************************************************/
		/****** add yahoo into gboxContent *************************************************/
		/***********************************************************************************/
		function addYahoo(){
			if (g5checkBrowser.chrome) {
				$id('gboxContent').innerHTML = '<object id="pingboxo213nodfd900" type="application/x-shockwave-flash"' + 
				' data="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" width="' + gboxContentWidth + 'px" height="' + gboxContentHeight + 'px">' + 
				'<param name="movie" value="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" /><param name="allowScriptAccess" value="always" />' + 
				'<param name="flashvars" value="wid=no9gPaW8FjNY5tnEsJ32SjESeLHIIzo5BA--" /></object>';
			} else {
				$id('gboxContent').innerHTML = '<embed id="pingbox1smyd1nguix0ї" type="application/x-shockwave-flash"' + 
				' src="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" width="' + gboxContentWidth + 'px" height="' + gboxContentHeight + 'px"' + 
				' flashvars="wid=no9gPaW8FjNY5tnEsJ32SjESeLHIIzo5BA--" allowScriptAccess="always" />';
			}
			$id('gboxTitle').innerHTML = gboxTitle + " <span style='font-size:12px;color:#888888'>( Yahoo!奇摩即時通對講機 )</span>";
		}
		/***********************************************************************************/
		/****** select flag to zoomin or zoomout for gboxPhoto *****************************/
		/***********************************************************************************/
		if(flag == null){flag = 1;}
		if(flag == 1){
			return zoomIn();
		}else{
			return zoomOut();
		}
	}catch(e){
		g5box('錯誤',"A javascript error has occured!<br>Please checked in gboxZoomBox function<br>correct : " + e.message +
		"<p style='text-align:center;cursor:pointer;color:red;' onclick='g5reloadPage()'>[ close ]</p>",'error');
	}
}