var bgImgProportion;
var windowProportion;
var lowAlpha = 0.9;

$(document).ready(function(){
	

	bgImgProportions();
	
	$(window).resize(function(){
		bgImgProportions();
		arrangeDivs();
	});	

	$("h2 .hoverstate").fadeOut("fast");
	//$("#logo, h1").mouseenter(h1fadeIn);
	//$("#logo, h1").mouseleave(h1fadeOut);
	$(".contentblock").mouseenter(h2fadeIn);
	$(".contentblock").mouseleave(h2fadeOut);
	$(".icon").mouseenter(showTooltip);
	$(".icon").mouseleave(hideTooltip);
	$(".icon").click(gotoPage);
	tooltipHeight = $("#tooltip h2").outerHeight(true);
	$(".varcontent").fadeTo("fast", lowAlpha);
	$(".photoblock").click(startSlideShow);
	$(".videoblock").click(startVideo);
	$("#contact .mediablock").click(startMailform);
	$("#slideshow").click(hideSlideShow);
	$("#mailform").click(hideMailform);
	$("#btnMailNow").click(sendMailform);
	$(".noclick").click(function(){return false;});
	
	$("h1, .contentblock h2").each(function(){
		txt = $(this).text();
		nDiv = $("<div/>").text(txt);
		nDiv2 = nDiv.clone();
		
		$(this).html(nDiv.addClass("hoverstate"));
		$(this).append(nDiv2.addClass("blurstate"));
		
	});
	
	$.get("makepage.php");

});

function gotoPage(){
	$("#tooltip").height(0);
	$(".contentblock:not(#"+ $(this).attr("goto")+")").hide();
	$(".contentblock#"+ $(this).attr("goto")).slideDown("fast").find("h2 .hoverstate").show().fadeOut("slow");
	
	
	
	return false;

}

function h1fadeIn(){
	$("#logo .hoverstate, h1 .hoverstate").stop();
	$("#logo .hoverstate, h1 .hoverstate").fadeTo("fast",1);
}

function h1fadeOut(){
	$("#logo .hoverstate, h1 .hoverstate").stop();
	$("#logo .hoverstate, h1 .hoverstate").fadeTo("fast",0);
}

function h2fadeIn(){
	$(this).find("h2 .hoverstate").fadeIn("fast");
	$(this).find(".varcontent, h3").fadeTo("fast",1);

}

function h2fadeOut(){
	$(this).find("h2 .hoverstate").fadeOut("fast");
	$(this).find(".varcontent, h3").fadeTo("fast",lowAlpha);
}

function showTooltip(){
	h1fadeOut()
	$("#tooltip h2 div").text($(this).text())
	$("#tooltip").stop(true, false).width(0);	

	if($("#tooltip").outerHeight(true) != tooltipHeight) {
		$("#tooltip")		
			.animate({height:tooltipHeight}, "fast")
			.animate({width:"100%"}, "medium");
	} else {
		
		$("#tooltip")	
			.animate({width:"100%"}, "slow");
	}
		
}

function hideTooltip(){
		h1fadeIn()
		$("#tooltip")
			.animate({width:"100%"}, "slow")
			.animate({width:0}, "slow")
			.animate({height:0}, "fast");		
}


function bgImgProportions(){
	var newTop = 0;
	var newLeft = 0;
	
	var windowProportion = $(window).width() / $(window).height();
	var bgImgProportion = $("#bgImg").attr("proportion");
	
	if(windowProportion > bgImgProportion){
		$("#bgImg img").addClass("hori");
		$("#bgImg img").removeClass("verti");
		
		//newTop = -($("#bgImg img").height() - $(window).height())/2;
		newTop = -($(window).width()/bgImgProportion - $(window).height())/2
	} else {
		$("#bgImg img").removeClass("hori");
		$("#bgImg img").addClass("verti");
		newLeft = 	-($(window).height()*bgImgProportion - $(window).width())/2;
	}	
	
	
	
	$("#bgImg img").stop(true);
	$("#bgImg img").animate({top:newTop, left:newLeft},"fast");
			
}

function arrangeDivs(){
	//$("h1 .blurstate").css("left", $("h1 .hoverstate").css("left"));
}

function startSlideShow(){
	sTitle = $(this).children(".title").text();
	//sFlashvars = "host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0xffffff&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fchiroleffinge%2Falbumid%2F"+$(this).attr("id")+"%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US";
	oFlashvars = {
		host: "picasaweb.google.com",
		hl: "en_US",
		feat: "flashalbum",
		RGB: "0xffffff",
		feed: "http://picasaweb.google.com/data/feed/api/user/chiroleffinge/albumid/"+$(this).attr("id")+"?alt=rss&kind=photo&hl=en_US"
	};
	sSrc = "http://picasaweb.google.com/s/c/bin/slideshow.swf";
	
	startMedia(sTitle, oFlashvars, sSrc);
	return false;
}
function startVideo(){
	sTitle = $(this).children(".title").text();
	oFlashvars = "";
	sSrc = $(this).attr("player");

	startMedia(sTitle, oFlashvars, sSrc);
	return false;
}

function startMedia(sTitle, oFlashvars, sSrc){
	$("#slideshow h4").text(sTitle);

	//$("#slideshow #slideshowembed").attr({flashvars: sFlashvars, src: sSrc});
	//$("#slideshow #slideshowobject param[name='flashvars']").attr({value: sFlashvars});
	//$("#slideshow #slideshowobject param[name='movie']").attr({value: sSrc});	
	$("#slideshow #slideshowmedia").empty().flash({
		width:800,
		height:533,
		src: sSrc,
		flashvars: oFlashvars
	});
	$("#slideshow").show();	
}

function hideSlideShow(){
	$("#slideshow").hide();
	return false;
}

function startMailform(){
	$("#inpTag").val($(this).attr("leiderid"));
	$("#mailform h4 .name").text($(this).children("h4").text());
	$("#mailform, #mailform .active").show();
	return false;
}
function hideMailform(){
	$("#mailform, #mailform .confirmed").hide();
	return false;	
}

function fieldValid(field){
	
	if(field.val() == "") return false;
	
	if(field.hasClass("email")){
		var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
		if(!pattern.test(field.val())) return false;
	}
		
	return true;
}

function mailFormValid(){
	formValid = true;
	$("#mailform input, #mailform textarea").each(function(){
		if(!fieldValid($(this))) {
			formValid = false;	
			$(this).addClass("error");
			$("label[for='" + $(this).attr("id") + "']").addClass("error");
		} else {
			$(this).removeClass("error");	
			$("label[for='" + $(this).attr("id") + "']").removeClass("error");
		}			
	});		
	return formValid;	
}

function sendMailform(){
	if (mailFormValid()) {
		$.post(
			"contact.php", 
			{
				tag:$("#inpTag").val(),
				name:$("#inpName").val(),
				from:$("#inpEmail").val(),
				subject:$("#inpSubject").val(),
				message:$("#txtBody").val()	
			},
			mailCallback
		);
		$("#mailform .submit").hide();
		$("#mailform .wait").fadeIn();
	}
}

function mailCallback(data){			
	if(data=="OK") {
		$("#mailform .active").slideUp();
		$("#mailform .confirmed").slideDown();
		$("#inpSubject").val("");
		$("#txtBody").val("");					
	} else {
		alert("Uw bericht kon niet doorgestuurd worden");
	}	
	$("#mailform .submit").slideDown();
	$("#mailform .wait").slideUp();					
	
}