/**
 * animation script for the kindt.ch Website (2011).
 * 
 * this animation is displayed on the first page
 * 
 */
//console.log(); 

// some configuration values
var default_tile_width = 200;
var dur_toDefPos = 5000; 
var dur_makeSpace = 500;
var dur_makeSpace_l = 1000;
var dur_SlideOut = 500;
var dur_SlideOut_m = 1000;
var dur_SlideOut_l = 3000;

var margin_left =  226;

//the three DOM-objects of the boxes [  bRED = $('#box-red); ]
var bRED = 0;
var bGRE = 0;
var bBRO = 0;

//the three DOM-objects of the claims [  cRED = $('#claim-red); ]
var cRED = 0;
var cGRE = 0;
var cBRO = 0;


var clearForInput = false;
var redIsOpen = false;
var greenIsOpen = false;
var brownIsOpen = false;


var cycleCounter = 0;

var theQueue = $({});


// precaching images
var images = [
		"/fileadmin/bilder/animation_images/drehen_200x385Pixel_Bild1.jpg",
		"/fileadmin/bilder/animation_images/schieben_200x385Pixel_Bild1.jpg",
		"/fileadmin/bilder/animation_images/falten_200x385Pixel_Bild1.jpg",
		"/fileadmin/bilder/animation_images/drehen_600x385Pixel_Bild2.jpg",
		"/fileadmin/bilder/animation_images/schieben_600x385Pixel_Bild2.jpg",
		"/fileadmin/bilder/animation_images/falten_600x385Pixel_Bild2.jpg",
		"/fileadmin/bilder/animation_images/drehen_600x385Pixel_Bild3.jpg",
		"/fileadmin/bilder/animation_images/schieben_600x385Pixel_Bild3.jpg",
		"/fileadmin/bilder/animation_images/falten_600x385Pixel_Bild3.jpg" ];

$({}).imageLoader({
	images : images,
	async : true,
	allcomplete : function(e, ui) {
		//console.log('images loaded');

		 bRED = $('#box-red');
		 bGRE = $('#box-green');
		 bBRO = $('#box-brown');
		 
		 cRED = $('#claim-red');
		 cBRO = $('#claim-brown');
		 cGRE = $('#claim-green');
		
		 cRED.html('Drehladen...');
		 cBRO.html('Schiebeladen...');
		 cGRE.html('Faltschiebeladen...');
		 
		$('.loadingbox').css('display', 'none');

		// position red and green on the right,
		// "outside" the browser-window
		var margin_left = $(window).width();
		bGRE.css('left', margin_left);
		bBRO.css('left', margin_left);
		bRED.css('left', 0);

		/** start the animation * */
		animateBlocksToDefPosition(
		   function(){
			   
			clearForInput = true;
			
			var dur_openTime = 2000;
			
			theQueue.delay(200,'tq');
			theQueue.queue('tq',function(next){slideOutRed(next,dur_makeSpace_l,dur_SlideOut_m);});
			theQueue.delay(dur_openTime,'tq');
			theQueue.queue('tq',function(next){slideInRed(next,dur_makeSpace_l,dur_SlideOut_m);});
			theQueue.queue('tq',function(next){slideOutBrown(next,dur_makeSpace_l,dur_SlideOut_m);});
			theQueue.delay(dur_openTime,'tq');
			theQueue.queue('tq',function(next){slideInBrown(next,dur_makeSpace_l,dur_SlideOut_m);});
			theQueue.queue('tq',function(next){slideOutGreen(next,dur_makeSpace_l,dur_SlideOut_m);});
			theQueue.delay(dur_openTime,'tq');
			theQueue.queue('tq',function(next){slideInGreen(next,dur_makeSpace_l,dur_SlideOut_m);});
			theQueue.queue('tq',function(next){onDefPosReached();next();});
			theQueue.delay(2000,'tq');
			theQueue.queue('tq',slideOutCycle);
			theQueue.dequeue('tq');
			
		   }		
		);
	}
});

/**
 * callback when default position is reached
 */
function onDefPosReached(){
	bGRE.addClass('pointer');
	bRED.addClass('pointer');
	bBRO.addClass('pointer');
	
	bRED.bind('click',function(){
		triggerClickRed();
	});
	bBRO.bind('click',function(){
		triggerClickBrown();
	});
	bGRE.bind('click',function(){
		triggerClickGreen();
	});
}

function triggerClickRed(){
	theQueue.clearQueue('tq_rr');
	if(redIsOpen) window.location = 	'index.php?id=22';
	if(!clearForInput || redIsOpen )return;
	if(greenIsOpen){
		theQueue.queue('tq_r',function(next){slideInGreen(next,dur_makeSpace,dur_SlideOut);});
	}else if(brownIsOpen){
		theQueue.queue('tq_r',function(next){slideInBrown(next,dur_makeSpace,dur_SlideOut);});
	}
	theQueue.queue('tq_r',function(next){slideOutRed(next,dur_makeSpace,dur_SlideOut);});
	theQueue.dequeue('tq_r');
}

function triggerClickBrown(){
	theQueue.clearQueue('tq_rr');
	if(brownIsOpen)window.location = 	'index.php?id=8';
	if(!clearForInput || brownIsOpen )return;
	if(redIsOpen){
		theQueue.queue('tq_b',function(next){slideInRed(next,dur_makeSpace,dur_SlideOut);});
	}else if(greenIsOpen){
		theQueue.queue('tq_b',function(next){slideInGreen(next,dur_makeSpace,dur_SlideOut);});
	}
	theQueue.queue('tq_b',function(next){slideOutBrown(next,dur_makeSpace,dur_SlideOut);});
	theQueue.dequeue('tq_b');
}

function triggerClickGreen(){
	theQueue.clearQueue('tq_rr');
	if(greenIsOpen)window.location = 	'index.php?id=20';
	if(!clearForInput || greenIsOpen )return;
	if(redIsOpen){
		theQueue.queue('tq_g',function(next){slideInRed(next,dur_makeSpace,dur_SlideOut);});
	}else if(brownIsOpen){
		theQueue.queue('tq_g',function(next){slideInBrown(next,dur_makeSpace,dur_SlideOut);});
	}
	theQueue.queue('tq_g',function(next){slideOutGreen(next);});
	theQueue.dequeue('tq_g');
}


function slideOutCycle(){
	
	var openTime = 15000; 
	var closedTime = 1000;
	
	//console.log('slideOutCycle');
	
	if(cycleCounter == 0){
		theQueue.queue('tq_rr',function(next){slideOutRed(next,dur_makeSpace_l,dur_SlideOut_l);});
		theQueue.delay(openTime,'tq_rr');
		theQueue.queue('tq_rr',function(next){slideInRed(next,dur_makeSpace_l,dur_SlideOut_l);});
		theQueue.delay(closedTime,'tq_rr');
		theQueue.queue('tq_rr',slideOutCycle);
		theQueue.dequeue('tq_rr');
		cycleCounter = 1;
	}else if(cycleCounter == 1){
		theQueue.queue('tq_rr',function(next){slideOutBrown(next,dur_makeSpace_l,dur_SlideOut_l);});
		theQueue.delay(openTime,'tq_rr');
		theQueue.queue('tq_rr',function(next){slideInBrown(next,dur_makeSpace_l,dur_SlideOut_l);});
		theQueue.delay(closedTime,'tq_rr');
		theQueue.queue('tq_rr',slideOutCycle);
		theQueue.dequeue('tq_rr');
		cycleCounter = 2;
	}else{
		theQueue.queue('tq_rr',function(next){slideOutGreen(next,dur_makeSpace_l,dur_SlideOut_l);});
		theQueue.delay(openTime,'tq_rr');
		theQueue.queue('tq_rr',function(next){slideInGreen(next,dur_makeSpace_l,dur_SlideOut_l);});
		theQueue.delay(closedTime,'tq_rr');
		theQueue.queue('tq_rr',slideOutCycle);
		theQueue.dequeue('tq_rr');
		cycleCounter = 0;
	}
}

/**
 * "open" the red (drehen) box:
 * red to left, green+brown to right, make space, then slideout red 
 * 
 */
function slideOutRed(callback,speedMakeSpace,speedSlideOut) {
	clearForInput = false;
	//console.log('start slideOutRed');
	
	var dur_so = speedSlideOut;
	var dur_ms = speedMakeSpace;
	
	//slide green + brown to right
	bGRE.animate({
		left : '860px'
	}, dur_ms, 'easeOutQuad');
	bBRO.animate({
		left : '660px'
	}, dur_ms, 'easeOutQuad');
	
	//slide red to left
	bRED.animate({
		left : '60px'
	}, dur_ms, 'easeOutQuad',function(){
		//now open red
		// change the bg pic
		bRED.css('background-image','url(/fileadmin/bilder/animation_images/drehen_600x385Pixel_Bild2.jpg)');
		
		showClaim(cRED);
		// slide it out
		bRED.animate({
			width : '600px'
		}, dur_so, 'swing',function(){
			bRED.css('background-image','url(/fileadmin/bilder/animation_images/drehen_600x385Pixel_Bild3.jpg)');
			redIsOpen = true;
			clearForInput = true;
			if(callback)callback();
		});
	});
}



/**
 * "open" the brown (schieben) box:
 * red and brown to left, green to right, make space, then slideout brown 
 * 
 */
function slideOutBrown(callback,speedMakeSpace,speedSlideOut) {
	clearForInput = false;
	//console.log('start slideOutBrown');
	
	var dur_so = speedSlideOut;
	var dur_ms = speedMakeSpace;
	
	//slide green  to right
	bGRE.animate({
		left : '860px'
	}, dur_ms, 'easeOutQuad');
	
	//slide red to left
	bRED.animate({
		left : '60px'
	}, dur_ms, 'easeOutQuad');
	
	//slide brown to left
	bBRO.animate({
		left : '260px'
	}, dur_ms, 'easeOutQuad',function(){
		//now open brown
		// change the bg pic
		bBRO.css('background-image','url(/fileadmin/bilder/animation_images/schieben_600x385Pixel_Bild2.jpg)');
		
		showClaim(cBRO);
		// slide it out
		bBRO.animate({
			width : '600px'
		}, dur_so, 'swing',function(){
			bBRO.css('background-image','url(/fileadmin/bilder/animation_images/schieben_600x385Pixel_Bild3.jpg)');
			brownIsOpen = true;
			clearForInput = true;
			if(callback)callback();
		});
	});
}

/**
 * "open" the green (falten) box:
 * all three boxes to left,  then slideout green  
 * 
 */
function slideOutGreen(callback,speedMakeSpace,speedSlideOut) {
	clearForInput = false;
	//console.log('start slideOutGreen');
	
	var dur_so = speedSlideOut;
	var dur_ms = speedMakeSpace;
	
	//slide brown  to left
	bBRO.animate({
		left : '260px'
	}, dur_ms, 'easeOutQuad');
	
	//slide red to left
	bRED.animate({
		left : '60px'
	}, dur_ms, 'easeOutQuad');
	
	//slide green to left
	bGRE.animate({
		left : '460px'
	}, dur_ms, 'easeOutQuad',function(){
		//now open green
		// change the bg pic
		bGRE.css('background-image','url(/fileadmin/bilder/animation_images/falten_600x385Pixel_Bild2.jpg)');
		
		showClaim(cGRE);
		// slide it out
		bGRE.animate({
			width : '600px'
		}, dur_so, 'swing',function(){
			bGRE.css('background-image','url(/fileadmin/bilder/animation_images/falten_600x385Pixel_Bild3.jpg)');
			greenIsOpen = true;
			clearForInput = true;
			if(callback)callback();
		});
	});
}

function showClaim(el){
	el.animate({
		opacity:1
	},1000);
}
function hideClaim(el){
	el.animate({
		opacity:0
	},1000);
}

/**
 * "closes red box:
 * 
 */
function slideInRed(callback,speedMakeSpace,speedSlideOut){
	clearForInput = false;
	
	var dur_so = speedSlideOut;
	var dur_ms = speedMakeSpace;
	
	hideClaim(cRED);
	
	bRED.css('background-image','url(/fileadmin/bilder/animation_images/drehen_600x385Pixel_Bild2.jpg)');
	bRED.animate({
		width : '200px'
	}, dur_so, 'swing',function(){
		bRED.css('background-image','url(/fileadmin/bilder/animation_images/drehen_200x385Pixel_Bild1.jpg)');
		
		//now slide all three to default position
		bRED.animate({
			'left':margin_left+'px'
		},dur_ms,'easeOutQuad',function(){
			redIsOpen = false;
			clearForInput = true;
		});
		
		bBRO.animate({
			'left':margin_left+default_tile_width+'px'
		},dur_ms,'easeOutQuad');
		bGRE.animate({
			'left':margin_left+default_tile_width+default_tile_width+'px'
		},dur_ms,'easeOutQuad',callback);
	});
}

/**
 * closes brown box
 * @param callback
 */
function slideInBrown(callback,speedMakeSpace,speedSlideOut){
	clearForInput = false;
	
	var dur_so = speedSlideOut;
	var dur_ms = speedMakeSpace;
	
	hideClaim(cBRO);
	
	bBRO.css('background-image','url(/fileadmin/bilder/animation_images/schieben_600x385Pixel_Bild2.jpg)');
	bBRO.animate({
		width : '200px'
	}, dur_so, 'swing',function(){
		bBRO.css('background-image','url(/fileadmin/bilder/animation_images/schieben_200x385Pixel_Bild1.jpg)');
		
		//now slide all three to default position
		bRED.animate({
			'left':margin_left+'px'
		},dur_ms,'easeOutQuad',function(){
			brownIsOpen = false;
			clearForInput = true;
		});
		bBRO.animate({
			'left':margin_left+default_tile_width+'px'
		},dur_ms,'easeOutQuad');
		bGRE.animate({
			'left':margin_left+default_tile_width+default_tile_width+'px'
		},dur_ms,'easeOutQuad',callback);
	});
}
/**
 * closes green box
 */
function slideInGreen(callback,speedMakeSpace,speedSlideOut){
	clearForInput = false;
	
	var dur_so = speedSlideOut;
	var dur_ms = speedMakeSpace;
	
	hideClaim(cGRE);
	
	bGRE.css('background-image','url(/fileadmin/bilder/animation_images/falten_600x385Pixel_Bild2.jpg)');
	bGRE.animate({
		width : '200px'
	}, dur_so, 'swing',function(){
		bGRE.css('background-image','url(/fileadmin/bilder/animation_images/falten_200x385Pixel_Bild1.jpg)');
		
		//now slide all three to default position
		bRED.animate({
			'left': margin_left+'px'
		},dur_ms,'easeOutQuad',function(){
			greenIsOpen = false;
			clearForInput = true;
		});
		bBRO.animate({
			'left':margin_left+default_tile_width+'px'
		},dur_ms,'easeOutQuad');
		bGRE.animate({
			'left':margin_left+default_tile_width+default_tile_width+'px'
		},dur_ms,'easeOutQuad',callback);
	});	
}


/**
 * slides the boxes from the sides to the default position (is invoked at the
 * beginning of the animation)
 */
function animateBlocksToDefPosition(callback) {
	// red
	bRED.animate({
		left : '600px'
	}, dur_toDefPos / 2, 'easeOutQuad', function() {
		bRED.css('z-index', 400).animate({
			left : margin_left+'px'
		}, dur_toDefPos / 2, 'easeOutQuad',function(){
			if(callback)callback();
		});
	});
	// green
	bGRE.animate({
		left : margin_left+default_tile_width+default_tile_width+'px'
	}, dur_toDefPos, 'easeOutQuad');
	// brown
	bBRO.animate({
		left : '80px'
	}, dur_toDefPos / 2, 'easeOutQuad').animate({
		left : margin_left+default_tile_width+'px'
	}, dur_toDefPos / 2, 'easeOutQuad');
}