/**
 *
 * effects for top page
 *
 */
$(function(){
	
	// left menu
	$("#navi").floater({
		marginTop:0,
		marginBottom:$(window).height() - $("#navi").height(),
		agility:0.3,
		speed:2000,
		easing:"easeOutCubic"
	});
	
	// scroll settings for left menu
	$('#naviEvent').click(function () { scrollTo('#event'); return false; });
	$('#naviMessage').click(function () { scrollTo('#message'); return false; });
	$('#naviTherapy').click(function () { scrollTo('#therapy'); return false; });
	$('#naviSelf').click(function () { scrollTo('#self'); return false; });
	$('#naviAudio').click(function () { scrollTo('#audio'); return false; });
	$('#naviBooks').click(function () { scrollTo('#books'); return false; });
	$('#naviInformation').click(function () { scrollTo('#information'); return false; });
	$('#naviAccess').click(function () { scrollTo('#access'); return false; });
	
	// Awkward Showcase
	$("#showcase").awShowcase({
		content_width:			590,
		content_height:			300,
		fit_to_parent:			false,
		auto:					true,
		interval:				6000,
		continuous:				true,
		loading:				true,
		tooltip_width:			200,
		tooltip_icon_width:		32,
		tooltip_icon_height:	32,
		tooltip_offsetx:		18,
		tooltip_offsety:		0,
		arrows:					false,
		buttons:				false,
		btn_numbers:			false,
		keybord_keys:			true,
		mousetrace:				false, /* Trace x and y coordinates for the mouse */
		pauseonover:			true,
		stoponclick:			true,
		transition:				'fade', /* hslide/vslide/fade */
		transition_delay:		300,
		transition_speed:		500,
		show_caption:			'onhover', /* onload/onhover/show */
		thumbnails:				true,
		thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
		thumbnails_direction:	'vertical', /* vertical/horizontal */
		thumbnails_slidex:		0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
		dynamic_height:			false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
		speed_change:			true, /* Set to true to prevent users from swithing more then one slide at once. */
		viewline:				false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
	});

});

$(window).load(function(){

	// parallax
	parallax.init();

});

/*======================================================
parallax effect
======================================================*/
var parallax = {
	
	// variables
	baseBgPos:[], // base position of background images
	stoid:0,
	
	// initialize parallax
	init:function () {
		$("#gbParallax")
			.prepend('<div class="layer pngbg" id="headerBg"></div>')
//			.prepend('<div class="layer pngbg" id="layer10"></div>')
			.prepend('<div class="layer pngbg" id="layer09"></div>')
			.prepend('<div class="layer pngbg" id="layer08"></div>')
			.prepend('<div class="layer pngbg" id="layer07"></div>')
			.prepend('<div class="layer pngbg" id="layer06"></div>')
			.prepend('<div class="layer pngbg" id="layer05"></div>')
			.prepend('<div class="layer pngbg" id="layer04"></div>')
			.prepend('<div class="layer pngbg" id="layer03"></div>')
			.prepend('<div class="layer pngbg" id="layer02"></div>')
			.prepend('<div class="layer pngbg" id="layer01"></div>');
		
		this.baseBgPos[0]  = this.getBgPos($('#layer01'));
		this.baseBgPos[1]  = this.getBgPos($('#layer02'));
		this.baseBgPos[2]  = this.getBgPos($('#layer03'));
		this.baseBgPos[3]  = this.getBgPos($('#layer04'));
		this.baseBgPos[4]  = this.getBgPos($('#layer05'));
		this.baseBgPos[5]  = this.getBgPos($('#layer06'));
		this.baseBgPos[6]  = this.getBgPos($('#layer07'));
		this.baseBgPos[7]  = this.getBgPos($('#layer08'));
		this.baseBgPos[8]  = this.getBgPos($('#layer09'));
//		this.baseBgPos[9]  = this.getBgPos($('#layer10'));
		
		if (!WebKitDetect.isMobile() && !($.browser.msie && $.browser.version < 7)) {
			$(window).bind("scroll", this.onScroll);
		}
		$(window).bind("resize", this.onResize);
		$(window).trigger("resize");
		
		this.stoid = setTimeout(parallax.onTick, 1000);
	},
	
	onTick:function () {
		parallax.setLayerHeight();
		clearTimeout(this.stoid);
	},
	
	setLayerHeight:function () {
		$("#gbParallax .layer").css('height', $('body').height());
	},
	
	// get background image postion from CSS
	getBgPos:function (o) {
		var pos = o.css("background-position"),
			posArray = [];
		
		if (pos) {
			posArray = pos.split(" ");
		} else { // ie
			posArray = [o.css("backgroundPositionX"), o.css("backgroundPositionY")];
		}
		return [parseInt(posArray[0]), parseInt(posArray[1])];
	},
	
	// set background image horizontal postion
	setBgHorPos:function () {
		var ww = $(window).width(),
			l01 = 1664, // width of bg for layer1
			l02 = 1299, // for layer2
			l03 = 1092, // for layer3
			l04 = 1788, // for layer4
			l05 = 1422, // for layer5
			l06 = 1670, // for layer6
			l07 = 1788, // for layer7
			l08 = 1437, // for layer8
			l09 = 1419, // for layer9
			l10 = 937,  // for layer10
			hbg = 1265, // for headerBg
			offset;
		
		// for layer1
		if (ww == l01) {
			offset = 0;
		} else {
			offset = Math.round((ww - l01) / 2);
		}
		this.baseBgPos[0][0] = offset;
		
		// for layer2
		if (ww == l02) {
			offset = 0;
		} else {
			offset = Math.round((ww - l02) / 2);
		}
		this.baseBgPos[1][0] = offset;
		
		// for layer3
		if (ww == l03) {
			offset = 0;
		} else {
			offset = Math.round((ww - l03) / 2);
		}
		this.baseBgPos[2][0] = offset;
		
		// for layer4
		if (ww == l04) {
			offset = 0;
		} else {
			offset = Math.round((ww - l04) / 2);
		}
		this.baseBgPos[3][0] = offset;
		
		// for layer5
		if (ww == l05) {
			offset = 0;
		} else {
			offset = Math.round((ww - l05) / 2);
		}
		this.baseBgPos[4][0] = offset;
		
		// for layer6
		if (ww == l06) {
			offset = 0;
		} else {
			offset = Math.round((ww - l06) / 2);
		}
		this.baseBgPos[5][0] = offset;
		
		// for layer7
		if (ww == l07) {
			offset = 0;
		} else {
			offset = Math.round((ww - l07) / 2);
		}
		this.baseBgPos[6][0] = offset;
		
		// for layer8
		if (ww == l08) {
			offset = 0;
		} else {
			offset = Math.round((ww - l08) / 2);
		}
		this.baseBgPos[7][0] = offset;
		
		// for layer09
		if (ww == l09) {
			offset = 0;
		} else {
			offset = Math.round((ww - l09) / 2);
		}
		this.baseBgPos[8][0] = offset;
		
		// for layer10
//		if (ww == l10) {
//			offset = 0;
//		} else {
//			offset = Math.round((ww - l10) / 2);
//		}
//		this.baseBgPos[9][0] = offset;
		
		// for headerBg (fixed image)
		if (ww == hbg) {
			offset = 0;
		} else {
			offset = Math.round((ww - hbg) / 2);
		}
		$('#headerBg').css("background-position", offset - 2 + "px " + "310px");
	},
	
	// set background image position
	parallaxScroll:function () {
		var scrollTop = $(window).scrollTop() * -1,
			bp = this.baseBgPos,
			np01, np11, np21, np31, np41, np51, np61, np71, np81, np91;
		
		np01 = bp[0][1] + scrollTop * 0.2;   // star
		np11 = bp[1][1] + scrollTop * 0.7;   // planet
		np21 = bp[2][1] + scrollTop * 0.23;  // cloud
		np31 = bp[3][1] + scrollTop * 0.4;   // cloud
		np41 = bp[4][1] + scrollTop * 0.6;   // star
		np51 = bp[5][1] + scrollTop * 0.8;   // star
		np61 = bp[6][1] + scrollTop * 0.6;   // cloud
		np71 = bp[7][1] + scrollTop * 0.85;  // note
		np81 = bp[8][1] + scrollTop * 0.5;   // planet
//		np91 = bp[9][1] + scrollTop * -0.01; // person
		
		$('#layer01').css("background-position", bp[0][0] + "px " + np01 + "px");
		$('#layer02').css("background-position", bp[1][0] + "px " + np11 + "px");
		$('#layer03').css("background-position", bp[2][0] + "px " + np21 + "px");
		$('#layer04').css("background-position", bp[3][0] + "px " + np31 + "px");
		$('#layer05').css("background-position", bp[4][0] + "px " + np41 + "px");
		$('#layer06').css("background-position", bp[5][0] + "px " + np51 + "px");
		$('#layer07').css("background-position", bp[6][0] + "px " + np61 + "px");
		$('#layer08').css("background-position", bp[7][0] + "px " + np71 + "px");
		$('#layer09').css("background-position", bp[8][0] + "px " + np81 + "px");
//		$('#layer10').css("background-position", bp[9][0] + "px " + np91 + "px");
	},
	
	// scroll event
	onScroll:function (e) {
		parallax.parallaxScroll();
	},
	
	// resize event
	onResize:function (e) {
		parallax.setLayerHeight();
		parallax.setBgHorPos();
		parallax.parallaxScroll();
	}
}