// JavaScript Document

function flasche(element) {
	this.element = element;
	this.scale = flScale;
	this.init = flascheInit;
}

function flascheInit(top, left, width, height, percent) {
	this.top = top;
	this.left = left;
	this.width = width;
	this.height = height;
	this.percent = percent;
}

function flScale(percent) {	
	this.element.css({
		top: this.top +  ( 50 * (percent/100) * (-1) ),
		width: this.width * (percent/100),
		height: this.height * (percent/100)
	});
}

function animateFlScale(pObject,pStart,pStop,duration) {
	var int_speed = 500/(Math.sqrt((pStop-pStart)*(pStop-pStart)));
	var int_object = "";
	var direction = 1;
	var percent = pStart;
	
	if(pStart>pStop) {
		direction = -1
	} else {
		direction = 1;
	}
	
	int_object = setInterval(function(){
		percent = percent + (direction*int_speed);
		pObject.scale(percent);	
			
		if (direction==-1 && percent<=pStop) {
			clearInterval(int_object);	
		}
		
		if (direction==1 && percent>=pStop) {
			clearInterval(int_object);	
		}
	},int_speed);
}

$(document).ready(function(){
	var left_counter = 0;
	var right_counter = 0;
	var offset_top = 165;
	var flaschen_space = 5;
	var sin_laufweite = 60;
	var flasche_pos_left = 0;
	var flasche_pos_right = 0;
	
	var flaschen_width = parseInt($(".flasche:first").css("width").replace("px", ""));
	var flaschen_height = parseInt($(".flasche:first").css("height").replace("px", ""));
	var flaschen_container_width = parseInt($("#flaschen-left").css("width").replace("px", ""));
	
	$(".flasche .overlay").css({
		cursor: 'pointer'						 
	});
	
	$("#flaschen-left .flasche").each(function(i){
		left_counter++;
	});
	
	$("#flaschen-right .flasche").each(function(i){
		right_counter++;
	});
	
	$("#flaschen-left .flasche").each(function(i){
		var flaschen_object = new flasche($(this));
		var top = offset_top;
		var step_width = flaschen_container_width / left_counter;
		var scale_value = Math.sin((i*step_width)/sin_laufweite);
		var percent = Math.round(100 + (50 * scale_value));
					
		$(this).find(".relative").each(function(){
			this.parentNode.flaschen_object = flaschen_object;									 
		});

		$(this).css({
			top: top,
			left: flasche_pos_left
		});
				
		flaschen_object.init(top, flasche_pos_left, flaschen_width, flaschen_height, percent);
		
		flaschen_object.scale(percent);
		
		flasche_pos_left = flasche_pos_left + (flaschen_width*(percent/100)) + flaschen_space;
	});
	
	$("#flaschen-right .flasche").each(function(i){
		var flaschen_object = new flasche($(this));
		var top = offset_top;
		var step_width = flaschen_container_width / right_counter;
		var scale_value = Math.sin((i*step_width)/sin_laufweite);
		var percent = Math.round(100 + (50 * scale_value));

		
		$(this).find(".relative").each(function(){
			this.parentNode.flaschen_object = flaschen_object;									 
		});

		$(this).css({
			top: top,
			left: flasche_pos_right
		});
				
		flaschen_object.init(top, flasche_pos_right, flaschen_width, flaschen_height, percent);
		
		flaschen_object.scale(percent);
		
		flasche_pos_right = flasche_pos_right + (flaschen_width*(percent/100)) + flaschen_space;
	});
	
	$(".flasche .overlay").click(function(){
		if (!$(this).closest(".flasche").hasClass("fl-active")) {
			var content = $(this).prev(".description").html();
			var flaschen_object = this.parentNode.parentNode.flaschen_object;
			var animate_scale = "";
			var parentId = $(this).parent("div").parent("div").parent("div").attr("id");
			var target = 0;			
			
			if (parentId=="flaschen-left") {
				target = flaschen_container_width - (flaschen_width*2) - 0;	
			} else {
				target = 0;	
			}
			
			$(".flasche").css({
				zIndex: 0								 
			});
			
			$(this).parent("div").parent("div").css({
				zIndex: 10			
			});
					
			$(".fl-active").each(function(){
				var flaschen_object = this.flaschen_object;
				var animate_scale = "";
				
				$(this).css({
					zIndex: 5			
				});
				
				animateFlScale(flaschen_object,200,flaschen_object.percent,500);
				
				$(this).animate({
					left: this.flaschen_object.left
				}, 500, function(){
					$(this).removeClass("fl-active");
				});										  
			});
			
			animateFlScale(flaschen_object,flaschen_object.percent,200,500);
			
			$(this).parent().parent().animate({
				left: target				
			}, 500, function(){
				$("#flaschen-content").fadeOut(100, function(){
					$(this).html(content);
					$(this).fadeIn(500);
				});	
				$(this).addClass("fl-active");
			});	
		} else {
			$(".fl-active").each(function(){
				var flaschen_object = this.flaschen_object;
				var animate_scale = "";
				
				animateFlScale(flaschen_object,200,flaschen_object.percent,500);
				
				$("#flaschen-content").fadeOut(100, function(){
					$(this).html("");
					$(this).show();
				});		
				
				$(this).animate({
					left: this.flaschen_object.left
				}, 500, function(){
					$(this).removeClass("fl-active");
				});										  
			});
		}
	});
	
	$("#flaschen-left .flasche:nth-child(4) .overlay").each(function(){
		if (!$(this).closest(".flasche").hasClass("fl-active")) {
			var content = '<h1 class="align-center">Dwersteg Organic</h1><div class="fl-content align-left"><p>In der Produktreihe „Dwersteg Organic“ stellen wir als eines der ersten Unternehmen weltweit edle Liqueure und Spirituosen aus biologischen und fair gehandelten Rohstoffen her. Ein unvergleichliches Geschmackserlebnis ist garantiert!</p><p><b>Wählen Sie Ihre bevorzugte Geschmacksrichtung und besuchen Sie auch unseren <a href="http://shop.dwersteg.de/" alt="Dwersteg Shop">Onlineshop!</a></b></p></div>';
			content = $('#startupcontent').html();
            var flaschen_object = this.parentNode.parentNode.flaschen_object;
			var animate_scale = "";
			var parentId = $(this).parent("div").parent("div").parent("div").attr("id");
			var target = 0;			
			
			if (parentId=="flaschen-left") {
				target = flaschen_container_width - (flaschen_width*2) - 0;	
			} else {
				target = 0;	
			}
			
			$(".flasche").css({
				zIndex: 0								 
			});
			
			$(this).parent("div").parent("div").css({
				zIndex: 10			
			});
			
			animateFlScale(flaschen_object,flaschen_object.percent,200,1000);
			
			$(this).parent().parent().animate({
				left: target				
			}, 1000, function(){
				$("#flaschen-content").fadeOut(100, function(){
					$(this).html(content);
					$(this).fadeIn(500);
				});	
				$(this).addClass("fl-active");
			});	
		}
	});
	
	$(".menu ul li").hover(function(){
		$(this).find("ul").show();								
	},function(){
		$(this).find("ul").hide();	
	});
});