// JavaScript Document

$(document).ready(function() {
	
	$("div.tile, #logo").droppable();

    $("div.tile, #logo").draggable(
		{tolerance: 'fit' ,
    	containment: 'document',
		grid: [100,100]}
		);
	
	
	$('#impressum, #Produkte, #Referenzen, #Warum, img.navi').hide();
	

	var zufall=Math.random()*200;

		$("div.content").mouseenter(
			function() {
				$("#tileProdukte")
				.animate({
						opacity: 0.3
						},zufall)
					.slideDown({
						duration:zufall * 20 ,
						easing:"easeInOutExpo",
						}) 
			return false;
			}) ;
			
		$("div.content").mouseenter(
			function() {
				$("#tileReferenzen")
				.animate({
						opacity: 0.3
						},zufall)
					.slideDown({
						duration:zufall * 25,
						easing:"easeInOutExpo",
						}) 
			return false;
			}) ;
		
		$("div.content").mouseenter(
			function() {
				$("#tileWarum")
				.animate({
						opacity: 0.3
						},zufall)
					.slideDown({
						duration:zufall * 30,
						easing:"easeInOutExpo",
						}) 
			return false;
			}) ;
		
		$("div.content").mouseenter(
			function() {
				$("#tileKontakt")
				.animate({
						opacity: 0.3
						},zufall)
					.slideDown({
						duration:zufall * 35,
						easing:"easeInOutExpo",
						}) 
			return false;
			}) ;
			
	
	
	
		$(document).mouseleave(
			function() {
				$("img.navi")
				.animate({
						opacity: 0.1
						},zufall*20)	
				.slideUp({
						duration:zufall * 10,
						easing:"easeInOutExpo",
						}) 
			return false;
			}) ;
	
	


	
//	$( "#tile02, #tile15, #tile14, #tile25" ).toggle(
//			function() {
//				$( "#tile08,").hide();
//				$( "#tile01" ).animate({
//					backgroundColor: "#efefef",
//					color: "#000",
//					height: 290,
//			}, 1000, "easeOutExpo" ),
//				$( "#tile26,#tile21" ).animate({
//					width: 0,
//				}, 1000, "easeOutExpo"),
//				$( "h5").addClass( "contentVisible" )
//			},
//			function() {
//				$( "#tile01" ).animate({
//					backgroundColor: "#fff",
//					color: "#fff",
//					height: 99,
//				}, 1000, "easeOutExpo" ),
				//$( "#tile08" ).animate({
				//	height: 98,
				//}, 1000 );
				//$( "#tile08" ).show();
//				$( "#tile26,#tile21" ).animate({
//				width: 98,
//				}, 1000, "easeOutExpo"),
//				$( "h5").removeClass( "contentVisible" )
//			}
//		);
	
	$("#tile01").click(function() {
		$("#tile01").animate({
					backgroundColor: "#fff",
					color: "#fff",
					height: 99,
				}, 1000 ),
				$( "#tile26,#tile21").animate({
					width: 98,
				}, 1000, "easeOutExpo"),
				$( "h5").removeClass( "contentVisible" )
				//$( "#tile08" ).show();
		});
	
	
	
   	
	$('#tile07, #tile17').click(function() {
    	$('#impressum').slideToggle({
			duration:1000,
			easing:"easeInOutExpo",})
		$('#Produkte').slideUp(500, "easeOutBack")
		$('#Referenzen').slideUp(500, "easeOutBack")
		$('#Warum').slideUp(500, "easeOutBack")
   		});

   	$('#tile03, #tile19').click(function() {
    	$('#Produkte').slideToggle({
			duration:1000,
			easing:"easeInOutExpo",})
		$('#impressum').slideUp(500, "easeOutBack")
		$('#Referenzen').slideUp(500, "easeOutBack")
		$('#Warum').slideUp(500, "easeOutBack")
   		});
		
   	$('#tile04, #tile20').click(function() {
    	$('#Referenzen').slideToggle({
			duration:1000,
			easing:"easeInOutExpo",})
		$('#impressum').slideUp(500, "easeOutBack")
		$('#Produkte').slideUp(500, "easeOutBack")
		$('#Warum').slideUp(500, "easeOutBack")
   		});	
   	$('#tile06, #tile16').click(function() {
    	$('#Warum').slideToggle({
			duration:1000,
			easing:"easeInOutExpo",})
		$('#impressum').slideUp(500, "easeOutBack")
		$('#Produkte').slideUp(500, "easeOutBack")
		$('#Referenzen').slideUp(500, "easeOutBack")
   		});	
	
	$("#Referenzen, #impressum, #Produkte, #Warum")
		.mouseleave(function(){
		$("#Referenzen, #impressum, #Produkte, #Warum").slideUp(500,"easeOutBack")
	});
	
	$(".code")
		.click(function(){
		$('#Referenzen, #impressum, #Produkte, #Warum').slideUp(500,"easeOutBack")
	});
	
	
	
	$( ".code" ).click(
	function(event,target) {
		$(this)
			.animate({height:200, width:200},200)
			.find("img").animate({width:200,height:200},400)
	});
	
	$( ".code" ).mouseleave(
	function(event,target) {
		$(this)
			.animate({height:100, width:100},300)
			.find("img").animate({width:100,height:100},200)
	});
	
//	$( "#tile02, #tile15, #tile14, #tile25" ).click(
//	function() {
//		$('#Referenzen, #Kontakt, #Produkte,').hide()
//		$("#tile02, #tile15, #tile14, #tile25")
//			.animate({width:98,height:98},200)
//			.find("img").animate({width:98,height:98},500)
//	});
	
	
	$(function() {
		$( "#tile18" ).droppable({
			accept: "#tile15",
			drop: function( event, ui ) {
				$(  "#tile28"  )
					.addClass( "highlight" )
					.html( "Juhu!<br/>Du hast also mein Osterei gefunden!<br/>:-)" )
			}
		});
	});
	$( "#tile28, #tile15, #tile18" ).click(function() {
			$( "#tile28" ).removeClass( "highlight" )
			return false;
		});
		
		
});