// JavaScript Document

var btn;
var dir = "none";
var pageNr;
var next = 0;
var prev = 0;

function animate() {
	$("#back").fadeTo(1, 0.0);
	$("#forward").fadeTo(1, 0.0);
	$("#home").animate({ 
        marginTop: "+=450px",
    }, 1000 );
	$("#home").animate({ 
        marginTop: "-=350px",
    }, 1000 );
	$("#home").animate({ 
        marginTop: "+=50px",
    }, 1000 );
	$("#firstImp").animate({ 
        marginTop: "+=500px",
    }, 1200 );
	$("#firstImp").animate({ 
        marginTop: "-=300px",
    }, 1000 );
	$("#firstImp").animate({ 
        marginTop: "+=50px",
    }, 1300 );
	$("#preparing").animate({ 
        marginTop: "+=480px",
    }, 900 );
	$("#preparing").animate({ 
        marginTop: "-=180px",
    }, 1500 );
	$("#preparing").animate({ 
        marginTop: "+=50px",
    }, 1000 );
	$("#questions").animate({ 
        marginTop: "+=350px",
    }, 1500 );
	$("#questions").animate({ 
        marginTop: "-=50px",
    }, 800 );
	$("#questions").animate({ 
        marginTop: "+=150px",
    }, 1100 );
	$("#videos").animate({ 
        marginTop: "+=600px",
    }, 1300 );
	$("#videos").animate({ 
        marginTop: "-=300px",
    }, 800 );
	$("#videos").animate({ 
        marginTop: "+=250px",
    }, 1000 );
}

$(document).ready(function(){
	$("#home").hover(function(){
		$(this).fadeTo("normal", 0.7); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("normal", 1.0); // This should set the opacity back to 30% on mouseout
	});
	$("#firstImp").hover(function(){
		$(this).fadeTo("normal", 0.7); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("normal", 1.0); // This should set the opacity back to 30% on mouseout
	});
	$("#preparing").hover(function(){
		$(this).fadeTo("normal", 0.7); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("normal", 1.0); // This should set the opacity back to 30% on mouseout
	});
	$("#questions").hover(function(){
		$(this).fadeTo("normal", 0.7); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("normal", 1.0); // This should set the opacity back to 30% on mouseout
	});
	$("#videos").hover(function(){
		$(this).fadeTo("normal", 0.7); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("normal", 1.0); // This should set the opacity back to 30% on mouseout
	});
});

$(document).ready(function(){
	$("#home").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		btn = $(this).attr('id');
		pageNr = 1;
		dir = "none";
		resetMenu();
		$("#homeO").css({ visibility : "visible" });
		$("#homeO").animate({
			width: "70%"
        }, 500);
		$("#homeV").animate({ 
        	marginLeft: "699px",
    	}, 500);
		$("#homeV").animate({
			height: "76%"
        }, 500);
		sleep(50);
		$("#homeV").css({ visibility : "visible" });
	});
	$("#firstImp").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		btn = $(this).attr('id');
		pageNr = 1;
		dir = "none";
		resetMenu();
		$("#firstM").css({ visibility : "visible" });
		$("#firstH").css({ visibility : "visible" });
		$("#firstHW").css({ visibility : "visible" });
		$("#firstM").animate({
			width: "10%"
        }, 250);
		$("#firstO").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#firstO").animate({ 
        	marginTop: "-100px",
    	}, 250);
		$("#firstV").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#firstV").animate({ 
        	marginTop: "-100px",
    	}, 250);
		$("#firstHW").animate({ 
        	marginTop: "-10px",
    	}, 250);
		$("#firstHW").animate({ 
        	height: "0%",
    	}, 250);
		$("#firstO").animate({ 
        	width: "60%",
    	}, 250);
		$("#firstV").animate({ 
        	marginLeft: "699px",
    	}, 250);
		$("#firstV").animate({
			height: "76%"
        }, 250);
		$("#firstO").css({ visibility : "visible" });
		$("#firstV").css({ visibility : "visible" });
	});
	$("#preparing").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		btn = $(this).attr('id');
		pageNr = 1;
		dir = "none";
		resetMenu();
		$("#preparingM").css({ visibility : "visible" });
		$("#preparingH").css({ visibility : "visible" });
		$("#preparingHW").css({ visibility : "visible" });
		$("#preparingM").animate({
			width: "10%"
        }, 250);
		$("#preparingO").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#preparingO").animate({ 
        	marginTop: "-200px",
    	}, 250);
		$("#preparingV").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#preparingV").animate({ 
        	marginTop: "-200px",
    	}, 250);
		$("#preparingHW").animate({ 
        	marginTop: "-10px",
    	}, 250);
		$("#preparingHW").animate({ 
        	height: "0%",
    	}, 250);
		$("#preparingO").animate({ 
        	width: "60%",
    	}, 250);
		$("#preparingV").animate({ 
        	marginLeft: "699px",
    	}, 250);
		$("#preparingV").animate({
			height: "76%"
        }, 250);
		$("#preparingO").css({ visibility : "visible" });
		$("#preparingV").css({ visibility : "visible" });
	});
	$("#questions").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		btn = $(this).attr('id');
		pageNr = 1;
		dir = "none";
		resetMenu();
		$("#questionsM").css({ visibility : "visible" });
		$("#questionsH").css({ visibility : "visible" });
		$("#questionsHW").css({ visibility : "visible" });
		$("#questionsM").animate({
			width: "10%"
        }, 250);
		$("#questionsO").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#questionsO").animate({ 
        	marginTop: "-300px",
    	}, 250);
		$("#questionsV").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#questionsV").animate({ 
        	marginTop: "-300px",
    	}, 250);
		$("#questionsHW").animate({ 
        	marginTop: "-10px",
    	}, 250);
		$("#questionsHW").animate({ 
        	height: "0%",
    	}, 250);
		$("#questionsO").animate({ 
        	width: "60%",
    	}, 250);
		$("#questionsV").animate({ 
        	marginLeft: "699px",
    	}, 250);
		$("#questionsV").animate({
			height: "76%"
        }, 250);
		$("#questionsO").css({ visibility : "visible" });
		$("#questionsV").css({ visibility : "visible" });
	});
	$("#videos").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		btn = $(this).attr('id');
		pageNr = 1;
		dir = "none";
		resetMenu();
		$("#videosM").css({ visibility : "visible" });
		$("#videosH").css({ visibility : "visible" });
		$("#videosHW").css({ visibility : "visible" });
		$("#videosM").animate({
			width: "10%"
        }, 250);
		$("#videosO").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#videosO").animate({ 
        	marginTop: "-400px",
    	}, 250);
		$("#videosV").animate({ 
        	marginLeft: "100px",
    	}, 250);
		$("#videosV").animate({ 
        	marginTop: "-400px",
    	}, 250);
		$("#videosHW").animate({ 
        	marginTop: "-10px",
    	}, 250);
		$("#videosHW").animate({ 
        	height: "0%",
    	}, 250);
		$("#videosO").animate({ 
        	width: "60%",
    	}, 250);
		$("#videosV").animate({ 
        	marginLeft: "699px",
    	}, 250);
		$("#videosV").animate({
			height: "76%"
        }, 250);
		$("#videosO").css({ visibility : "visible" });
		$("#videosV").css({ visibility : "visible" });
	});
	$("#back").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		dir = $(this).attr('id');
		if (prev != 0) {
			pageNr = pageNr - 1;
			checkPrev();
		}
		
	});
	$("#forward").click(function(){
		if ($(':animated').length) {
        	return false;
    	}
		if (next != 0 ) {
			dir = $(this).attr('id');
			pageNr = pageNr + 1;
			checkPrev();
		}
		
	});
});

function resetMenu() {
	
	// Home
	$("#homeO").css({ width : "0px" , height : "10px" , left : "249px" , top : "150px" });
	$("#homeV").css({ width : "60px" , height : "0px" , left : "190px" , top : "150px" });
	
	// First Impression
	$("#firstM").css({ width : "0px" , height : "10px" , left : "249px" , top : "250px" });
	$("#firstO").css({ width : "0px" , height : "10px" , left : "249px" , top : "250px" });
	$("#firstV").css({ width : "60px" , height : "0px" , left : "190px" , top : "250px" });
	$("#firstHW").animate({ 
        	height: "110px",
    }, 1);
	$("#firstH").css({ visibility : "hidden" });
	$("#firstHW").css({ visibility : "hidden" });
	
	// Preparing
	$("#preparingM").css({ width : "0px" , height : "10px" , left : "249px" , top : "350px" });
	$("#preparingO").css({ width : "0px" , height : "10px" , left : "249px" , top : "350px" });
	$("#preparingV").css({ width : "60px" , height : "0px" , left : "190px" , top : "350px" });
	$("#preparingHW").animate({ 
        	height: "210px",
    }, 1);
	$("#preparingH").css({ visibility : "hidden" });
	$("#preparingHW").css({ visibility : "hidden" });
	
	// Questions
	$("#questionsM").css({ width : "0px" , height : "10px" , left : "249px" , top : "450px" });
	$("#questionsO").css({ width : "0px" , height : "10px" , left : "249px" , top : "450px" });
	$("#questionsV").css({ width : "60px" , height : "0px" , left : "190px" , top : "450px" });
	$("#questionsHW").animate({ 
        	height: "310px",
    }, 1);
	$("#questionsH").css({ visibility : "hidden" });
	$("#questionsHW").css({ visibility : "hidden" });
	
	// Videos
	$("#videosM").css({ width : "0px" , height : "10px" , left : "249px" , top : "550px" });
	$("#videosO").css({ width : "0px" , height : "10px" , left : "249px" , top : "550px" });
	$("#videosV").css({ width : "60px" , height : "0px" , left : "190px" , top : "550px" });
	$("#videosHW").animate({ 
        	height: "410px",
    }, 1);
	$("#videosH").css({ visibility : "hidden" });
	$("#videosHW").css({ visibility : "hidden" });
	
	checkPrev();
	
}

function checkPrev() {
	// check if has previous
	$.ajax({
    	type: "POST",
        url: "php/checkPrev.php",
        data: "btn=" + btn +"&pageNr=" + pageNr,
        success: function(content){
        	if (content == "has") {
        		prev = 1;
        	}
			else
				prev = 0;
			checkNext();
		}
	});
}

function checkNext() {
	
	// check if has next
	$.ajax({
    	type: "POST",
        url: "php/checkNext.php",
        data: "btn=" + btn +"&pageNr=" + pageNr,
        success: function(content){
        	if (content == "has") {
        		next = 1;
        	}
			else
				next = 0;
				loadContent();
		}
	});
}

function loadContent() {
	// Fade hidden the div that hides the text
	$("#textContainerAbove").fadeTo(1, 1.0);
	$("#textContainerAbove").fadeTo(2000, 0.0);
	if ( prev == 0 ) {
		$("#back").css({ "background-image" : "url(img/back.png)" });
		$("#back").hover(function(){
			$("#back").css({ "cursor" : "default" });
		},function(){
			$("#back").css({ "cursor" : "default" });
		});
	}
	else {
		$("#back").css({ "background-image" : "url(img/backPossible.png)" });
		$("#back").hover(function(){
			$("#back").css({ "cursor" : "pointer" });
		},function(){
			$("#back").css({ "cursor" : "default" });
		});
	}
	if ( next == 0 ) {
		$("#forward").css({ "background-image" : "url(img/next.png)" });
		$("#forward").hover(function(){
			$("#forward").css({ "cursor" : "default" });
		},function(){
			$("#forward").css({ "cursor" : "default" });
		});
	}
	else {
		$("#forward").css({ "background-image" : "url(img/nextPossible.png)" });
		$("#forward").hover(function(){
			$("#forward").css({ "cursor" : "pointer" });
		},function(){
			$("#forward").css({ "cursor" : "default" });
		});
	}
	$("#back").css({ visibility : "visible" });
	$("#forward").css({ visibility : "visible" });
	$("#back").fadeTo(1, 0.0);
	$("#forward").fadeTo(1, 0.0);
	$("#back").fadeTo(2000, 1.0);
	$("#forward").fadeTo(2000, 1.0);
	
	// load the content from the database
	$.ajax({
    	type: "POST",
        url: "php/check.php",
        data: "btn=" + btn +"&pageNr=" + pageNr,
        success: function(content){
        	if (content != "") {
        		$('#textContainer').html(content);
        	}
		}
	});
}

function sleep(delay) {
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}