// JavaScript Document
function init(){
	$(window).bind("resize scroll", fitBgn);
	function fitBgn(){
		var bgn = $("#bgn");
		var img = bgn.find("img");
		var imgRatio = img.width()/img.height();
		var bgnRatio = bgn.width()/bgn.height();
		if(imgRatio>=bgnRatio){
			img.css({
				width: "auto", 
				height: "100%"
			});
		}else{
			img.css({
				width: "100%", 
				height: "auto"
			});
		}
		img.css({
			left: -(img.width()-bgn.width())/2, 
			top: -(img.height()-bgn.height())/2
		});
	}
	fitBgn();
	$("#bgn img").bind("load", fitBgn);
	
	var overlayColors = ["#000000", "#040112", "#040112", "#100e01", "#061001", "#01100b", "#010d10", "#050110", "#0b0110", "#100101", "#0d0d01"];
	var bgnOverlay = $("#bgn-overlay");
	var overSlogan = $("#content > .layer > .hover-slogan");
	bgnOverlay.css({
		display: "block", 
		opacity: 0
	});
	overSlogan.css({
		display: "block", 
		opacity: 0
	});
	$("#content > .layer").bind("mouseenter", function(){
		bgnOverlay.dequeue().css({
			background: overlayColors[Math.floor(Math.random()*overlayColors.length)]
		}).animate({
			opacity: 0.8
		}, 500);
		overSlogan.dequeue().animate({
			opacity: 1
		}, 200);
	}).bind("mouseleave", function(){
		bgnOverlay.dequeue().animate({
			opacity: 0
		}, 500);
		overSlogan.dequeue().animate({
			opacity: 0
		}, 200);
	});
}
$().ready(init);