/*============  ON HOVER =================*/

$(function() {
    $('#menu1_btn').animate({"width" : "95%", "height" : "92%"}, 1);
    $('#menu1_btn').hover(function() {
        $(this).stop().animate({"width" : "100%", "height" : "100%"}, 500);
		$('#menu2_btn').stop().animate({"width" : "60%", "height" : "60%"}, 500);
		$('#menu3_btn').stop().animate({"width" : "60%", "height" : "60%"}, 500);
		$('#menu4_btn').stop().animate({"width" : "43%", "height" : "43%"}, 500);
    }, function() {
        $(this).stop().animate({"width" : "95%", "height" : "92%"}, 500);
		$('#menu2_btn').stop().animate({"width" : "64%", "height" : "66%"}, 500);
		$('#menu3_btn').stop().animate({"width" : "67%", "height" : "67%"}, 500);
		$('#menu4_btn').stop().animate({"width" : "46%", "height" : "46%"}, 500);
    });
});

$(function() {
    $('#menu2_btn').animate({"width" : "64%", "height" : "66%"}, 1);
    $('#menu2_btn').hover(function() {
        $(this).stop().animate({"width" : "100%", "height" : "100%"}, 500);
		$('#menu1_btn').stop().animate({"width" : "50%", "height" : "50%"}, 500);
		$('#menu3_btn').stop().animate({"width" : "82%", "height" : "82%"}, 500);
		$('#menu4_btn').stop().animate({"width" : "68%", "height" : "68%"}, 500);
    }, function() {
        $(this).stop().animate({"width" : "64%", "height" : "66%"}, 500);
		$('#menu1_btn').stop().animate({"width" : "95%", "height" : "95%"}, 500);
		$('#menu3_btn').stop().animate({"width" : "67%", "height" : "67%"}, 500);
		$('#menu4_btn').stop().animate({"width" : "46%", "height" : "46%"}, 500);
    });
});

$(function() {
	$('#menu3_btn').animate({"width" : "67%", "height" : "67%"}, 1);
    $('#menu3_btn').hover(function() {
        $(this).stop().animate({"width" : "95%", "height" : "95%"}, 500);
		$('#menu1_btn').stop().animate({"width" : "60%", "height" : "60%"}, 500);
		$('#menu2_btn').stop().animate({"width" : "78%", "height" : "78%"}, 500);
		$('#menu4_btn').stop().animate({"width" : "50%", "height" : "50%"}, 500);

    }, function() {
        $(this).stop().animate({"width" : "110px", "height" : "140px"}, 500);
		$('#menu1_btn').stop().animate({"width" : "95%", "height" : "95%"}, 500);
		$('#menu2_btn').stop().animate({"width" : "64%", "height" : "66%"}, 500);
		$('#menu4_btn').stop().animate({"width" : "46%", "height" : "46%"}, 500);
    });
});

$(function() {
    $('#menu4_btn').animate({"width" : "46%", "height" : "46%"}, 1);
    $('#menu4_btn').hover(function() {
        $(this).stop().animate({"width" : "100%", "height" : "100%"}, 500);
		$('#menu1_btn').stop().animate({"width" : "78%", "height" : "78%"}, 500);
		$('#menu2_btn').stop().animate({"width" : "60%", "height" : "60%"}, 500);
		$('#menu3_btn').stop().animate({"width" : "50%", "height" : "50%"}, 500)

    }, function() {
        $(this).stop().animate({"width" : "46%", "height" : "46%"}, 500);
		$('#menu1_btn').stop().animate({"width" : "95%", "height" : "95%"}, 500);
		$('#menu2_btn').stop().animate({"width" : "64%", "height" : "66%"}, 500);
		$('#menu3_btn').stop().animate({"width" : "67%", "height" : "67%"}, 500);
		$('#sub_4').fadeOut(250);
    });
});


/*============  SET CLASS ACTIVE =================*/



$(function() {
	$('#menu1_btn, #menu2_btn, #menu3_btn, #menu4_btn').addClass("notactive");
});


$(function() {
	$('#menu1_btn').click(function() {
		$(this).removeClass("notactive").addClass("active");
		$('#menu2_btn, #menu3_btn, #menu4_btn').removeClass("active").addClass("notactive");
	});
});

$(function() {
	$('#menu2_btn').click(function() {
		$(this).removeClass("notactive").addClass("active");
		$('#menu1_btn, #menu3_btn, #menu4_btn').removeClass("active").addClass("notactive");
	});
});

$(function() {
	$('#menu3_btn').click(function() {
		$(this).removeClass("notactive").addClass("active");
		$('#menu1_btn, #menu2_btn, #menu4_btn').removeClass("active").addClass("notactive");
	});
});

$(function() {
	$('#menu4_btn').click(function() {
		$(this).removeClass("notactive").addClass("active");
		$('#menu1_btn, #menu2_btn, #menu3_btn').removeClass("active").addClass("notactive");
	});
});

$(function() {
	$('.logo').click(function() {
		$('#menu1_btn, #menu2_btn, #menu3_btn, #menu4_btn').removeClass("active").addClass("notactive");
	});
});

/*============  intext btn =================*/

$(function() {
	$('.readmore').click(function() {
		$('#menu1_btn').removeClass("notactive").addClass("active");
		$('#menu4_btn, #menu2_btn, #menu3_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left:0,
			bottom:-1200
		}, 3000);
	});
});

/*============  intext btn back =================*/

$(function() {
	$('#text_1 .back').click(function() {
		$('#menu1_btn, #menu2_btn, #menu3_btn, #menu4_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left:-1920,
			bottom:-1200
		}, 3000);
	});
});
$(function() {
	$('#text_2 .back').click(function() {
		$('#menu1_btn').removeClass("notactive").addClass("active");
		$('#menu2_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left:-0,
			bottom:-1200
		}, 3000);
	});
});
$(function() {
	$('#text_3 .back').click(function() {
		$('#menu2_btn').removeClass("notactive").addClass("active");
		$('#menu3_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left:-3840,
			bottom: -1200
		}, 3000);
	});
});


/*============  intext btn next =================*/

$(function() {
	$('#text_1 .next').click(function() {
		$('#menu2_btn').removeClass("notactive").addClass("active");
		$('#menu4_btn, #menu1_btn, #menu3_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left:-3840,
			bottom: -1200
		}, 3000);
	});
});
$(function() {
	$('#text_2 .next').click(function() {
		$('#menu3_btn').removeClass("notactive").addClass("active");
		$('#menu4_btn, #menu1_btn, #menu2_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left:0 ,
			bottom: 0
		}, 3000);
	});
});
$(function() {
	$('#text_3 .next').click(function() {
		$('#menu4_btn').removeClass("notactive").addClass("active");
		$('#menu1_btn, #menu2_btn, #menu3_btn').removeClass("active").addClass("notactive");
		$('#bg').stop().animate({
			left: -3840,
			bottom: 0
		}, 3000);
	});
});


/*============  background =================*/

$(function() {
	$('#menu1_btn').click(function() {
		$('#bg').stop().animate({
			left:-0,
			bottom:-1200
		}, 3000);
	});
});

$(function() {
	$('#menu2_btn').click(function() {
		$('#bg').stop().animate({
			left:-3840,
			bottom: -1200
		}, 3000);
	});
});

$(function() {
	$('#menu3_btn').click(function() {
		$('#bg').stop().animate({
			left:0 ,
			bottom: 0
		}, 3000);
	});
});

$(function() {
	$('#menu4_btn').click(function() {
		$('#bg').stop().animate({
			left: -3840,
			bottom: 0
		}, 3000);
	});
});

/*============  lightbox =================*/

$(function() {
	$('#bayer').click(function() {
		$('#layer').stop().fadeIn(500);
		$('#chrissy').stop().fadeIn(500);
	});
});

$(function() {
	$('#hartm').click(function() {
		$('#layer').stop().fadeIn(500);
		$('#tim').stop().fadeIn(500);
	});
});

$(function() {
	$('#impressum-btn').click(function() {
		$('#layer').stop().fadeIn(500);
		$('#impressum').stop().fadeIn(500);
	});
});

$(function() {
	$('.close').click(function() {
		$('#layer').stop().fadeOut(500);
		$('#tim').stop().fadeOut(500);
		$('#chrissy').stop().fadeOut(500);
		$('#impressum').stop().fadeOut(500);
	});
});