(function ($) {
	$(function() {

		// General elements
		var $el = $('#productselector');
		var $head = $el.find('.header');
		var $head_el = $head.find('li:not(.first,.first-button)');
		var $main = $el.find('.elements');
		var $main_el = $main.find('>div');
	
		var $ani_inc = 50;
		var $ani_pos = $ani_inc/2;
		var $ani_txt = 12.5;
		
		var $opacity = $main_el.find('.text').css('opacity');
		if ($opacity == 1) $opacity = 0.4;
		
		var $init_running = true;
		
		// Init
		function init() {

			$main_el.hide();
			var $delay = 100;
			
			$main_el.each(function(i) {

				$(this).find('.text, .image').css('opacity', '1');
				$(this).delay($delay).fadeIn();
				$delay += 500;
				
				if (i == $main_el.length-1) {					
					$main_el.eq(0).delay($delay-250).show(function(){
						//animateOut($main_el);
						$main_el.eq(0).delay(200).show(function(){
							$init_running = false;
							/*
							$el.find('.elements >div').each(function() {						
								var temp = $(this).find('.text');
								$(this).find('.text').remove();
								$(this).find('.inner').prepend(temp);
							});
							*/
						});
					});
				}
				
			});

		}
		
		init();
	
		// Header section
		// Hover
		$head_el.hover(function() {
			$(this).toggleClass('hover');
			if ($(this).index() == 1) $head.find('.first').toggleClass('hover');
		});
		
		$head.find('li:not(.first,.last)').each(function() {
			$(this).append('<div class="plus"></div>');
		});
		
		// Click
		$head_el.click(function() {
			
			// Navigation
			var $remove = $(this).hasClass('active');
			
			$(this).toggleClass('active');			
			var $index = $(this).index();

			switch ($index) {
				
				case 1: 
					if ($remove === false) {
						$head.find('.first').addClass('first-active');
					} else {
						$head.find('.first').removeClass('first-active');
					}
					$head.find('li.last').removeClass('active');
					break;
					
				case 2:
					if ($remove === true) {
						$head.find('#e3').removeClass('active');
					}
					$head.find('li.last').removeClass('active');
					break;
					
				case 3:
					if ($remove === true) {
						$head.find('#e4').removeClass('active');
					}
					else {
						$head.find('#e2').addClass('active');
					}
					break;
				
				case $head_el.length+1:
					if ($remove === true) {
						$head_el.find('.last').removeClass('active');
					} else {
						$head_el.addClass('active');
					}
					break;
				
				default:
					$head.find('li.last').removeClass('active');
					break;

			}
			
			// Elements
			
			var $in = new Array();
			var $out = new Array();
			var $ani_in = new Array();
			var $ani_out = new Array();
			
			var $active = $('#productselector .header .active:not(.first-button)');
			$active.each(function (i) {
				$in.push($(this).attr('id'));
			});
			
			animateOut($main_el);
			
			if ($.inArray('e4', $in) != -1) {
				$ani_in.push(3);
			} else if ($.inArray('e3', $in) != -1) {
				$ani_in.push(2);
				$ani_in.push(3);
			} else if ($.inArray('e1', $in) != -1 || $.inArray('e2', $in) != -1 || $in.length == 0) {
				$ani_in.push(0);
				$ani_in.push(1);
				$ani_in.push(2);
				$ani_in.push(3);
			}
			
			$main_el.eq(0).delay(200).show(function(){
				$.each($ani_in, function(index, value) {
					animateIn($main_el.eq(value));
				});
			});
			
		});
		

		function animateIn(el) {

			el.find('.text, .image').css('opacity', '1').fadeOut('fast').fadeIn('fast', function() {
				el.addClass('active');
			});
			
		}
		
		function animateOut(el) {
			
			el.find('.text, .image').animate({
				opacity: $opacity
			}, 100, function() {
				el.removeClass('active');
				$main_el.not('.active').find('.text, .image').css('opacity', $opacity);
			});
			
		}

		
		// Main section
		// Hover
		var $hover = false;
		
		$main_el.hover(function() {

			if ($init_running === false) {

				// animate in
				$(this).find('.image').css('z-index', 200).stop(true, true).animate({
					opacity: 1,
					top: '-='+$ani_pos,
					left: '-='+$ani_pos,
					height: '+='+$ani_inc,
					width: '+='+$ani_inc
				}, 150, 'swing');
							
				$(this).find('.text').animate({
					opacity: 1
				}, 150, 'swing');
				
				$hover = true;
			
			}
		
		}, function() {
			
			if ($init_running === false && $hover === true) {
			
				if ($(this).hasClass('active')) $op = '1';
				else $op = $opacity;
								
				// animate out
				$(this).find('.inner .image').css('z-index', 0).animate({
					opacity: $op,
					top: '+='+$ani_pos,
					left: '+='+$ani_pos,
					height: '-='+$ani_inc,
					width: '-='+$ani_inc
				}, 100, 'swing');
				
				$(this).find('.text').animate({
					opacity: $op
				}, 150, 'swing');
				
			}
		
		});

	});
})(jQuery);