/**
 * @author ausir
 */

 $().ready(function(){
 	//將燈箱區域隱藏起來-不使用任何動畫
	$(".lightbox").css("display","none");
	//將燈箱的背景亮度調到 0.8 ALPHA
	$(".background").fadeTo(0,0.8);
	
	
	//當九宮格內的圖片觸發滑鼠移入的時候
	$(".gridarea img").mouseover(function(){
		//將燈箱的高度寬度設定與文件的高度寬度相同
		$(".lightbox").css({
			height: $(document).height() + "px",
			width: $(document).width() + "px"
		});
		//將燈箱裡的圖片都先移除，做初始化動作
		$(".lightbox img").remove();
		//取得觸發者圖片的座標
		$position = $(this).offset();
		//將觸發者圖片 COPY 一份丟到燈箱的 IMAGES 區域
		$(".images").append($(this).clone());
		//將燈箱圖片給予相同的 CSS 效果，並且設定座標位置與來源相同(重疊在一起的意思)
		$(".images img").addClass("gridareaimg").css({
			top: $position.top + "px",
			left: $position.left + "px"
		}).mouseout(function(){
			//當滑鼠離開燈箱圖片的時候，把燈相關閉 -不使用任何動畫
			$(".lightbox").stop(false, true).css("display","none");
		});
		//當所有的資料與事件都準備好以後，將燈箱險是在畫面上
		$(".lightbox").stop(false, true).fadeIn("slow");
	})
	
	
	//如果滑鼠放在燈箱背景上的時候一樣移除效果
	$(".background").mouseover(function(){
		$(".lightbox").css("display","none");
	});
 });