/**
 * @author Dennis Korbginski
 */

var animation_duration = 500;
var easing = "swing";
var hideTimer;

function log(m) {
	/*
	try {console.log(m);}
	catch(e) {}
	*/
}

function addTeaserListener() {
	jQuery('.containerstartTeaser .indexcms').addClass('shrink')
	.bind("mouseover", function() {
		log('mouseover');
		window.clearTimeout(hideTimer);
		
		
		//elements.stop(true, false);
		var selectedElement = jQuery(this);
		
		if (selectedElement.hasClass('shrink')) {
			enlargeBox(selectedElement);
		}
		
		var elements = jQuery('.containerstartTeaser .indexcms');
		log(elements);
		
		elements.each(function() {
			var e = jQuery(this);
			
			if (e.get(0) != selectedElement.get(0)) {
				// Shrink
				//shrinkBox(e);
				shrinkBox(e);
			}
		});
		
	});
	
	jQuery('.containerstartTeaser .indexcms').bind("mouseout", function() {
		//var elements = jQuery('.containerstartTeaser .indexcms');
		//shrinkBox(elements);
		log('mouseout');
		
		hideTimer = window.setTimeout(function() {
			var elements = jQuery('.containerstartTeaser .indexcms.enlarged');
			shrinkBox(elements);
		}, 1500);
		
	});
}

function stopAnimations(elements) {
	elements.stop(true, false);
	elements.find('.piclarge').stop(true, false);
	elements.find('.picsmall').stop(true, false);
	elements.find('h1').stop(true, false);
}

function shrinkBox(box) {
	log('shrinkBox');
	log(box);
	log(box.hasClass('shrink'));
	if (box.hasClass('shrink')) return;
	box.removeClass('enlarged');
	box.addClass('shrink');
	
	log('size');
	
	box.stop(true)
		.animate(
		{
			width: '120px',
			height: '100px'
		},
		animation_duration,
		easing,
		function() {
			log('finished');
		}
	);
	
	log('animate 1');
	
	// Bild
	box.find('.piclarge')
		.stop(true)
		.css('opacity', '1')
		.css('display', 'block')
		.animate(
		{
			'opacity': '0'
		},
		animation_duration,
		easing,
		function() {
			jQuery(this).css('display', 'none');
		}
	);
	
	box.find('.picsmall')
		.stop(true)
		.css('opacity', '0')
		.css('display', 'block')
		.animate(
		{
			'opacity': '1'
		},
		animation_duration,
		easing,
		function() {
			jQuery(this).css('opacity', '1').css('display', 'block');
		}
	);
	
	/**
	 * Überschrift
	 * Quelle:
	 * 		font-size: 14px;
	 * 		line-height: 16px;
	 * 
	 * Ziel:
	 * 		font-size: 18px;
	 * 		line-height: 24px;
	 */
	box.find('h1')
		.stop(true)
		.animate(
		{
			'fontSize': '14px',
			'lineHeight': '16px'
		},
		animation_duration,
		easing
	);
	
	log('------------------');
}

function enlargeBox(box) {
	log('enlargeBox');
	log(box);
	if (box.hasClass('enlarged')) return;
	box.removeClass('shrink');
	box.addClass('enlarged');
	
	log('enlarging...');
	
	box.stop(true)
		.animate(
		{
			width: '225px',
			height: '220px'
		},
		animation_duration,
		easing,
		function() {
			log('is large');
		}
	);
	
	// Bild
	box.find('.picsmall')
		.stop(true)
		.css('opacity', '1')
		.css('display', 'block')
		.animate(
		{
			'opacity': '0'
		},
		animation_duration,
		easing,
		function() {
			jQuery(this).css('display', 'none');
		}
	);
	
	box.find('.piclarge')
		.stop(true)
		.css('opacity', '0')
		.css('display', 'block')
		.animate(
		{
			'opacity': '1'
		},
		animation_duration,
		easing
	);
	
	/**
	 * Überschrift
	 * Quelle:
	 * 		font-size: 14px;
	 * 		line-height: 16px;
	 * 
	 * Ziel:
	 * 		font-size: 18px;
	 * 		line-height: 24px;
	 */
	box.find('h1')
		.stop(true)
		.animate(
		{
			'fontSize': '18px',
			'lineHeight': '24px'
		},
		animation_duration,
		easing
	);
	log('###############');
}

jQuery(function() {
	addTeaserListener();
});