$(document).ready(function()
	{
		
		
		
		
		
		
		
	
	$(".overlay").css("opacity", "0");
	$(".overlay").css("display", "none");
	$(".overlay_help").css("opacity", "0.3");
	$("#preview").css("opacity", "0");
	$("#help").css("opacity", "0");
	$("#help").css("display", "none");
	$(".button_dochnicht").css("opacity", "0");
	$(".warenkorb_product").css("opacity", "0");
		
	$('#login_trigger').live("mouseover",function(){
		$("#overlay").css("display", "block");
		$(this).stop().animate({
						height: "202px"
						},{
						queue: false,
						duration: 500,
						easing:'swing'
		});
		$("#login").stop().animate({
						top: "0px"
						},{
						queue: false,
						duration: 500,
						easing:'swing'
		});
		$("#overlay").stop().animate({
						opacity: "0.4"
						},{
						queue: false,
						duration: 500,
						easing:'swing'
		});
	});
	$('#login_trigger').live("mouseout",function(){
		$(this).stop().animate({
						height: "50px"
						},{
						queue: false,
						duration: 500,
						easing:'swing'
		});
		$("#login").stop().animate({
						top: "-190px"
						},{
						queue: false,
						duration: 500,
						easing:'swing'
		});
		$("#overlay").stop().animate({
						opacity: "0"
						},{
						queue: false,
						duration: 500,
						easing:'swing',
						complete: function (){
							$("#overlay").css("display", "none");	
						}
		});
	}); // Login
		
	
	i = 0;
	$("#login .input").click(function(){
		if(i == 0)
		{
			$(this).css({
				background: "url(img/login_input2.png)",
				width: "236px",
				height: "151px"					
			});
			
			i = 1;
		}
		else
		{
			$(this).css({
				background: "url(img/login_input.png)",
				width: "219px",
				height: "168px"					
			});
			
			i = 0;
		}
	});
	
	$('#login .input').live("mouseover",function(){										  
		if(i == 0)
		{
		$(this).css({
				background: "url(img/login_input_hover.png)"
			});
		}else
		{
		$(this).css({
				background: "url(img/login_input2_hover.png)",
				height: "154px"
			});
		}
	});
	$('#login .input').live("mouseout",function(){										  
		if(i == 0)
		{
		$(this).css({
				background: "url(img/login_input.png)"				
			});
		}else
		{
		$(this).css({
				background: "url(img/login_input2.png)",
				height: "151px"
			});
		}
	}); // Login Input
	
	
	$('#nav ul li img').live("mouseover",function(){
		if($(this).attr("class") != "active"){
			var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
			$(this).attr("src", src);
		}
	});
	$('#nav ul li img').live("mouseout",function(){
		if($(this).attr("class") != "active"){
			var src = $(this).attr("src").replace("_hover", "");
			$(this).attr("src", src);
		}
	}); 
	
	$("#nav ul li img").click(function(){
		if($(this).attr("id") == "nav0"){
			$("#preview").stop().animate({
				opacity: "0"
				},{
				queue: false,
				duration: 500,
				easing:'swing'});
			$("#help").stop().animate({
				opacity: "0"
				},{
				queue: false,
				duration: 500,
				easing:'swing',
				complete: function(){
					$("#help").css("display", "none");			
				}
			});
		}
		else
		{
			$("#preview").stop().animate({
				opacity: "1"
				},{
				queue: false,
				duration: 500,
				easing:'swing'});
			$("#help").css("display", "block");
			$("#help").stop().animate({
				opacity: "1"
				},{
				queue: false,
				duration: 500,
				easing:'swing'});
		} //preview
		
		if($(this).attr("class") != "active"){
			var src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
			$("#nav ul li img.active").attr("src", src_active_old);
	
			$("#nav ul li img").attr("class", "");
			var src_active = $(this).attr("src").match(/[^\.]+/) + ".png";
			$(this).attr("src", src_active);
			$(this).attr("class", "active");
		}
	});	// Nav
	
	
	$("#nav ul li img").click(function(){
		var nav_id = parseFloat($(this).attr("id").replace("nav", ""));
		var new_top = nav_id*100*(-1);
		if($(this).attr("id") != "nav4"){
			$("#main div.wrapper div#warenkorb").stop().animate({
					marginTop: "0px"
					},{
					queue: false,
					duration: 500,
					easing:'swing'
					});
			$("#main div.wrapper").stop().animate({
				top: new_top+"%"
				},{
				queue: false,
				duration: 500,
				easing:'swing'
			});
		}
		else
		{
			$("#main div.wrapper").stop().animate({
				top: "-300%"
				},{
				queue: false,
				duration: 500,
				easing:'swing',
				complete: function(){
					$("#main div.wrapper div#warenkorb").stop().animate({
					marginTop: "-357px"
					},{
					queue: false,
					duration: 500,
					easing:'swing'
					});
					$("#overlay_warenkorb").css("display", "block");
					$("#overlay_warenkorb").stop().animate({
					opacity: "0.4"
					},{
					queue: false,
					duration: 500,
					easing:'swing',
					complete: function(){
						$(".warenkorb_product").stop().animate({
							opacity: "1"
							},{
							queue: false,
							duration: 500,
							easing:'swing'
							});
						}
					});
				}
			});
		}
	});
	
	$("div#warenkorb div#close").click(function(){
		$("#main div.wrapper div#warenkorb").stop().animate({
			marginTop: "0px"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
			});
			$("#overlay_warenkorb").stop().animate({
			opacity: "0"
			},{
			queue: false,
			duration: 500,
			easing:'swing',
			complete: function(){
				$("#overlay_warenkorb").css("display", "none");	
			}
		});
			
		var src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
		$("#nav ul li img.active").attr("src", src_active_old);

		$("#nav ul li img").attr("class", "");
		var src_active = $("#nav ul li img#nav3").attr("src").match(/[^\.]+/) + "_hover.png";
		$("#nav ul li img#nav3").attr("src", src_active);
		$("#nav ul li img#nav3").attr("class", "active");
	}); 
	$("div#overlay_warenkorb").click(function(){
		$("#main div.wrapper div#warenkorb").stop().animate({
			marginTop: "0px"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
			});
			$("#overlay_warenkorb").stop().animate({
			opacity: "0"
			},{
			queue: false,
			duration: 500,
			easing:'swing',
			complete: function(){
				$("#overlay_warenkorb").css("display", "none");	
			}
		});
			
		var src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
		$("#nav ul li img.active").attr("src", src_active_old);

		$("#nav ul li img").attr("class", "");
		var src_active = $("#nav ul li img#nav3").attr("src").match(/[^\.]+/) + "_hover.png";
		$("#nav ul li img#nav3").attr("src", src_active);
		$("#nav ul li img#nav3").attr("class", "active");
	}); // Main
	
	
	
	$(".button_up").click(function(){
		$("#select").stop().animate({
				scrollTop: "-=135px"
				},{
				queue: true,
				duration: 500,
				easing:'swing'
		});					   
	});
	
	$(".button_down").click(function(){
		$("#select").stop().animate({
				scrollTop: "+=135px"
				},{
				queue: true,
				duration: 500,
				easing:'swing'
		});					   
	});
	
	$('.button_up').live("mouseover",function(){
		$(".button_up").css("background-image", "url(img/button_up_hover.png");
	});
	$('.button_up').live("mouseout",function(){
		$(".button_up").css("background-image", "url(img/button_up.png");
	});
	$('.button_down').live("mouseover",function(){
		$(".button_down").css("background-image", "url(img/button_down_hover.png");
	});
	$('.button_down').live("mouseout",function(){
		$(".button_down").css("background-image", "url(img/button_down.png");
	});
		
		
	$(".drag").draggable({
		start: function(event, ui) {
		   $("#main div div div.cull div#select").css("overflow-y", "visible");
		   },
		stop: function(event, ui) {
		   $("#main div div div.cull div#select").css("overflow-y", "hidden");
		   $("#main div div div.cull div#select img.drag").css({left:"0px", top:"0px"});
		   $("#preview").css({background: "none"});
		   }
	});
	$(".drag2").draggable({
		start: function(event, ui) {
		   $("#main div div div.cull div#select2").css("overflow-y", "visible");
		   },
		stop: function(event, ui) {
		   $("#main div div div.cull div#select2").css("overflow-y", "hidden");
		   $("#main div div div.cull div#select2 img.drag2").css({left:"0px", top:"0px"});
		   $("#preview").css({background: "none"});
		   }
	});
	$(".drag3").draggable({
		start: function(event, ui) {
		   $("#main div div div.cull div#select3").css("overflow-y", "visible");
		   },
		stop: function(event, ui) {
		   $("#main div div div.cull div#select3").css("overflow-y", "hidden");
		   $("#main div div div.cull div#select3 img.drag3").css({left:"0px", top:"0px"});
		   $("#preview").css({background: "none"});
		   }
	});
	
	bildnr = 1;
	$("#preview").droppable({
		drop: function( event, ui ) {
			var bild = bildnr+".png";
			$("#preview img").stop().animate({
				opacity: "0"
				},{
				queue: true,
				duration: 500,
				easing:'swing',
				complete: function (){
					$("#preview img").attr("src", "img/preview/"+bild)	
				}
			}).animate({
				opacity: "1"
				},{
				queue: true,
				duration: 500,
				easing:'swing'
			});
			
			if(bildnr < 4){
				if(bildnr == 1){
					$(".change1").html("Tulpe (1)");
				}
				if(bildnr == 2){
					$(".change2").html("Gras (1)");
				}
				if(bildnr == 3){
					$(".change3").html("Vase gelb (1)");
				}
			}
			
			if(bildnr < 3){
				bildnr = bildnr+1;
				}
			},
		over: function(event, ui) {
			$("#preview").css({background: "url(img/preview/bg.png) 50% 50% no-repeat"});
			},
		out: function(event, ui) {
			$("#preview").css({background: "none"});
			}
	}); // product
	
	
	$('.zurkasse').live("mouseover",function(){
		$(this).css("background-image", "url(img/button_zurkasse_hover.png");
	});
	$('.zurkasse').live("mouseout",function(){
		$(this).css("background-image", "url(img/button_zurkasse.png");
	});
		
		
	
		
	$('.nav_button').live("mouseover",function(){
		var src = $(this).attr("id").match(/[^\.]+/) + "_hover.png";
		$(this).css("background-image", "url(img/"+src);
	});
	$('.nav_button').live("mouseout",function(){
		var src = $(this).attr("id")+".png";

		$(this).css("background-image", "url(img/"+src);
	}); 
		
	$("#button_los").click(function(){
		$("#preview").stop().animate({
			opacity: "1"
			},{
			queue: false,
			duration: 500,
			easing:'swing'});
		$("#help").css("display", "block");
		$("#help").stop().animate({
			opacity: "1"
			},{
			queue: false,
			duration: 500,
			easing:'swing'});
		$("#main div.wrapper").stop().animate({
			top: "-100%"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
		});
		
		src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
			$("#nav ul li img.active").attr("src", src_active_old);
	
			$("#nav ul li img").attr("class", "");
			var src_active = $("#nav1").attr("src").match(/[^\.]+/) + "_hover.png";
			$("#nav1").attr("src", src_active);
			$("#nav1").attr("class", "active");
	});
	
	$("#button_weiter").click(function(){
		$("#main div.wrapper").stop().animate({
			top: "-200%"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
		});
		src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
			$("#nav ul li img.active").attr("src", src_active_old);
	
			$("#nav ul li img").attr("class", "");
			var src_active = $("#nav2").attr("src").match(/[^\.]+/) + "_hover.png";
			$("#nav2").attr("src", src_active);
			$("#nav2").attr("class", "active");
	});
	
	$("#button_weiter2").click(function(){
		$("#main div.wrapper").stop().animate({
			top: "-300%"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
		});
		src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
			$("#nav ul li img.active").attr("src", src_active_old);
	
			$("#nav ul li img").attr("class", "");
			var src_active = $("#nav3").attr("src").match(/[^\.]+/) + "_hover.png";
			$("#nav3").attr("src", src_active);
			$("#nav3").attr("class", "active");
	});
	$("#button_warenkorb").click(function(){
		$("#main div.wrapper").stop().animate({
			top: "-300%"
			},{
			queue: false,
			duration: 500,
			easing:'swing',
			complete: function(){
				$("#main div.wrapper div#warenkorb").stop().animate({
				marginTop: "-357px"
				},{
				queue: false,
				duration: 500,
				easing:'swing'
				});
				$("#overlay_warenkorb").css("display", "block");
				$("#overlay_warenkorb").stop().animate({
				opacity: "0.4"
				},{
				queue: false,
				duration: 500,
				easing:'swing',
					complete: function(){
						$(".warenkorb_product").stop().animate({
							opacity: "1"
							},{
							queue: false,
							duration: 500,
							easing:'swing'
							});
						}
				});
			}
		});
		src_active_old = $("#nav ul li img.active").attr("src").replace("_hover", "");
			$("#nav ul li img.active").attr("src", src_active_old);
	
			$("#nav ul li img").attr("class", "");
			var src_active = $("#nav4").attr("src").match(/[^\.]+/) + "_hover.png";
			$("#nav4").attr("src", src_active);
			$("#nav4").attr("class", "active");
	}); // button
	
	
	$('#help').live("mouseover",function(){
		$("#help_overlay").css("display", "block");
		$("#help_overlay").stop().animate({
			opacity: "1"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
		});
	});
	$('#help').live("mouseout",function(){
		$("#help_overlay").stop().animate({
			opacity: "0"
			},{
			queue: false,
			duration: 500,
			easing:'swing',
			complete: function(){
				$("#help_overlay").css("display", "none");	
			}
		});
	});  // help
	
	
	$('.button_dochnicht').live("mouseover",function(){
		$(this).css("height", "70px");
		$(this).stop().animate({
			height: "55px",
			opacity: "1"
			},{
			queue: false,
			duration: 500,
			easing:'swing'
		});
	});
	$('.button_dochnicht').live("mouseout",function(){
		$(this).stop().animate({
			height: "70px",
			opacity: "0"
			},{
			queue: false,
			duration: 200,
			easing:'swing',
			complete: function(){
				$(this).css("height", "15px");	
			}
		});
	});
});