//get the show status
var show_status = false;

/**
 * show layer when mouse over image to show the brithday text
 * 
 * @param id
 * @param baby_name
 * @param text
 * @param img_width
 * @param img_height
 * @param text_div
 * @return
 */
function birthdayIndexShow(id, baby_name, text, text_div) {
	if (!show_status) {
		//check ie version, the function not work on ie8
		var ie = ieVersion();
		// get browser name
		browser = navigator.appName;
		// browser version
		browser_version = navigator.userAgent;

		// not work on chrome and safari
		if (browser_version.search(/Chrome/i) != -1
				|| browser_version.search(/Safari/i) != -1 || browser_version.search(/MSIE/i) != -1) {
		} else {
			
			//add pixels
			if(browser_version.search('Firefox') != -1)
				box_extra = 11;
			else
				box_extra = 1;
			

			// check img width by browser bane
			img_width = document.getElementById('img'+id).width + box_extra + 'px';
			img_height = document.getElementById('img'+id).height + box_extra + 'px';

			// show thumb text , fix size and postion
			document.getElementById(id).style.visibility = 'visible';
			document.getElementById(id).style.width = img_width;
			document.getElementById(id).style.height = img_height;

			// fix text layer style
			document.getElementById(text_div).style.visibility = 'visible';
			document.getElementById(text_div).style.width = img_width;
			document.getElementById(text_div).style.height = img_height;

			// fix position on IE
			// if (browser == 'Microsoft Internet Explorer')
			// document.getElementById(text_div).style.marginLeft -= '146px';

			// add text
			document.getElementById(text_div).innerHTML = '<br>' + text
					+ ' <br>' + baby_name;
		}
	}
}
/**
 * hide cong. box after mouse out box
 * 
 * @param id
 * @param text_div
 * @return
 */
function birthdayIndexHide(id, text_div) {
	if (!show_status) {
		document.getElementById(id).style.visibility = 'hidden';
		document.getElementById(text_div).style.visibility = 'hidden';
		document.getElementById(id).style.width = '';
		document.getElementById(id).style.height = '';
		document.getElementById(id).style.top = '';
		document.getElementById(id).style.left = '';
		document.getElementById(id).style.opacity = '';
		document.getElementById(id).className = 'thumb_text_container';
		document.getElementById(text_div).className = 'thumb_text';
		document.getElementById(id).style.background = '#000';
		document.getElementById(id).innerHTML = '';
	}
}
/**
 * animate birthday box for baby on click div
 * 
 * @param id
 * @param group_id
 * @return
 */
function indexBoxBirthday(id, group_id) {
	if (!show_status) {
		//current opened layer 
		opened_layer = id;
		
		// change show status
		show_status = true;

		// change background to white
		document.getElementById(id).style.background = '#FFF';
		document.getElementById('script' + id).innerHTML = '';
		$('#' + id).animate( {
			width :'500px',
			height :'500px',
			top :'50%',
			left :'30%',
			opacity :1
		}, 1500);

		// call ajax page
		setTimeout(
				'ajaxImageLoading("images/loader.gif","ajax/indexBirthday.ajax.php","group_id='
						+ group_id + '",' + id + ')', 1500);
				//play music
				setTimeout('play()', 5000);
	}
}
/**
 * create div for firefox to fix divs positions
 */
function createDiv(type) {
	// get browser name
	browser = navigator.appName;
	// browser version
	browser_version = navigator.userAgent + '';

	if (type == 'start') {
		// not work on chrome and safari
		if (browser_version.search('Firefox') != -1
				|| browser_version.search('Opera') != -1)
			document.write('<div style="float:left">');
	} else {
		// not work on chrome and safari
		if (browser_version.search('Firefox') != -1
				|| browser_version.search('Opera') != -1)
			document.write('</div>');
	}
}
/**
* close birthday box
**/
function closeBox() {
	show_status = false;
	id = opened_layer;
	document.getElementById(id).style.visibility = 'hidden';
	document.getElementById(id).style.width = '';
	document.getElementById(id).style.height = '';
	document.getElementById(id).style.top = '';
	document.getElementById(id).style.left = '';
	document.getElementById(id).style.opacity = '';
	document.getElementById(id).className = 'thumb_text_container';
	document.getElementById(id).style.background = '#000';
	document.getElementById(id).innerHTML = '';
	stop();
}