/************************************************************************************************
 * Handle click functionality of videos in cases or services.
 */
function videoClick(event) {
	// stop bubbling (prevent this envent is called twice) 
	event = event || window.event; // IE
	event.stopImmediatePropagation();
	
	// retrieve title of link so we can compare with php file
	var page = $(this).attr("load");
	var id = $(this).attr("id");
	if (isNaN(id)) { id = 0;}
	
	loadContent(page, id);
}

/****
 * Handle click functionality of case tiles in case studies or service overview.
 * Case tile animates from small to full and then change content via ajax.
 */
function tileClick(event) {
	// stop bubbling (prevent this envent is called twice) 
	event = event || window.event; // IE
	event.stopImmediatePropagation();

	// retrieve title of link so we can compare with php file
	var page = $(this).attr("load");
	var id = $(this).attr("id");
	if (isNaN(id)) { id = 0;}

	// build overlay with elements of this tile
	var overlay = $('.pic_overview#overlaytile');
	$(this).children('img').clone().appendTo(overlay);
	$(this).children('div').clone().appendTo(overlay);
	var overlayContent = overlay.children();
	
	// proportions of clicked case tile
	var height 	= $(this).height(),
			width 	= $(this).width(),
			top 		= $(this).offset().top,
			left		= $(this).offset().left,
			margin 	= overlay.css('margin-top');
			
	// set overlay tile to clicked case tile position & proportion
	overlay.css({
					 'top' : top,
					 'left' : left,
					 'width' : width,
					 'height' : height
				 });
	overlayContent.filter('div').css({
					 'padding-left' : 1,
					 'padding-top': 2.5
				 });										 
	overlay.show();

	// target proportions of overlay
	height 	= $('#ajaxcontent').height(),
	width 	= $('#ajaxcontent').width(),
	top 		= $('#ajaxcontent').offset().top,
	left		= $('#ajaxcontent').offset().left;

	var overlayDone = false,
			imageDone = false;
			
	overlay.removeClass('ovelay');
	overlay.show();
	overlayContent.show();

	overlay.animate({
				scrollTop: 0,
				top: top,
				left: left,
				width: width,
				height: height
			}, { 
					duration: 480,
					easing: 'easeOutExpo',
					queue: true,	
					complete: function() { 
					 	overlayDone = true;
					 	if(imageDone && overlayDone) {
						 	loadContent(page, id);
						}
					 }
				}
		);
	// fade out image and text
	overlayContent.animate({
				opacity: 0.0
			}, {
				duration: 440,
				easing: 'easeOutExpo',
				// load case of tile
				queue: true,
				step: function() {
					if (false) {
						$.scrollTo($(this), 'slow');
					}
				},
				complete: function() { 
					 	imageDone = true;
				}
			}			
		);
	// fade out other tiles of overview
	$('#ajaxcontent:first').animate({
				opacity: 0.0
			}, {
				duration: 480,
				easing: 'easeOutExpo',
				queue: true
			}			
		);
	
	/* tint backgprund of page white */
	$('#html').removeClass('background_gray', fadeInSpeed);
	$('html, body').animate({scrollTop:0}, fadeInSpeed);
	
}



/************************************************************************************************
 * Go back to services overview or case studies from service or case.
 * Content animates from full to tile and fades out
 */
function animateBackToOverview(event, page) {
	// stop bubbling (prevent this envent is called twice) 
	event = event || window.event; // IE
	event.stopImmediatePropagation();
	
	var content = $('#ajaxcontent').children(':not(#overlaycontent)');
					
	//// build overlay with elements of the content
	var overlay = $('#overlaycontent'),
			imgContainer = overlay.children('#introimage');

	var img = content.filter('#introimage').find('img:first');
	// copy first case image
	if (img.length > 0) {
		img.clone().appendTo(imgContainer).show();
	}
	// no image in this case, so remove the container
	else {
		imgContainer.remove();
	}
	// copy text, awarads, ...
	content.filter('.left, .right').clone().appendTo(overlay);

	//// set overlay: proportions and position of content
	var properties = {
					'height' 	: $('#ajaxcontent').height(),
					'width' 	: $('#ajaxcontent').width(),
					'top'			: $('#ajaxcontent').children(':first').offset().top,
					'float'		: 'right'
					}
	overlay.css(properties);
	
	var image = overlay.find('img');
	image.css({'float' : 'left'});
	var imageWidth = content.width(); // donno, why image.width() doesn't work
	var text = overlay.find('p, h1, h2, h3, h4, ul');
	
	// hide content behind overlay
	content.hide(0);
	overlay.show();
	var disrupter = $('#footer');
	disrupter.hide();

	overlay.animate({
				opacity: 0
			}, {
				duration: 400,
				easing: 'easeOutExpo',
				queue: true,
				complete: function() { 
					loadContent(page, 0);	
				}
		});

/* FOR SPÄTER
	// not animateable things will be hidden instantly
	var disrupter = $('#awardlogo, .video_item, #footer');
//	fadeOutContent(disrupter, 0);
	disrupter.animate({
				opacity: 0
			}, {
				duration: 0,
				easing: 'easeOutExpo',
				queue: false
	});


	// scale down image & text and hide overlay
	overlay.animate({
				opacity: 0
			}, {
				duration: 400,
				easing: 'easeOutExpo',
				queue: true,
				step: function() {
					image.css('width', imageWidth -= 50);
					// scale container to conserve margin-bottom	
					imgContainer.height(image.height());
					if (imageWidth < 600) {
						//overlay.stop();
					}
					// scale down the text
					$.each(text, function() {
								var size = parseFloat($(this).css('font-size'));
								size -= 3;
								$(this).css({'font-size' : size + 'px'});
								// fade out text faster than tile
								$(this).css({'opacity' : $(this).css('opacity') - 0.5});
						});
				},
				complete: function() { 
					loadContent(event, page, 0);	
				}
		});
*/
	var overlayContent = overlay.find('.left, .right');
	overlayContent.effect('size', {height: 40}, 400);

	/* tint backgprund of page gray */
	$('#html').addClass('background_gray', fadeInSpeed);
}


/************************************************************************************************
 * Fades in tiles of case studies and services in horizontal order.
 * (normally, tiles are sorted in three lists (ul) in vertically order, 
 * 	so we have to reorder the tiles)
 */
function animateTiles() {
	if (isIE()) {	// lastPage == 'service' ||
		showTiles();
		return;
	}

	var u = 0, 
			l = 0, 
			maxLength = 0,
			wait = 0,
			delay = 120,
			speed = 120;

	// build 3d-Array
	var items = new Array();
	for (u = 0; u < 3; u++) { items[u] = new Array; }

	// get ul lists (ul | ul | ul) with items	
	var lists = $('#ajaxcontent').find('ul');		
	// save each ul list in items-array
	u = 0;
	$.each(lists, function() {
					items[u] = $(this).find('li');
					// find ul array with most entries and save number of entries
					if (items[u].length > maxLength) { 
						maxLength = items[u].length; 
					}
					u++;					
				});	
	// fade in items in horizontal order
	for (l = 0; l < maxLength; l++) {
		for (u = 0; u < 3; u++) {
			if (l < items[u].length) {
				var id = '#' + items[u][l].id;
				var tile = $('li').filter(id);
				fadeInTile(tile, wait, speed);
				wait += delay;
			}
		}
	}
}

/****
 * Shows tiles directily.
 * Used, if users navigates back from case/service to overview
 */
function showTiles() {
	var tiles = $('#ajaxcontent').find('li');
//	tiles.css({'opacity' : 1});
	fadeInContent(tiles, fadeInSpeed);
}

/****
 * Defines the animation of fading in a tile with a given delay
 */
function fadeInTile(tile, delay, speed) {
	tile.delay(delay).animate({
			opacity: 1
		}, {
			duration: speed,
			easing: 'easeInExpo',
			queue: true
		}
	);
}