$(function () {
	$(".rounded").corners();
	
	$("#about-det").slideDown("slow");
	
	$(".sub").click(function() {
		if($(this).attr("id") == "sub-about") {
			if($("#rules-text").css("display") != "none") {
				$("#rules-text").fadeOut("normal", function() {
					$("#about-text").fadeIn("normal");
					$("#sub-about").css("font-weight", "bold");
					$("#sub-about").css("color", "#FFFFFF");
					$("#sub-rules").css("font-weight", "normal");
					$("#sub-rules").css("color", "#666666");
				});
			}
		} else {
			if($("#about-text").css("display") != "none") {
				$("#about-text").fadeOut("normal", function() {
					$("#rules-text").fadeIn("normal");
					$("#sub-rules").css("font-weight", "bold");
					$("#sub-rules").css("color", "#FFFFFF");
					$("#sub-about").css("font-weight", "normal");
					$("#sub-about").css("color", "#666666");
				});
			}
		}
	});
	
	$(".tooltip").each(function () {
		var distance  = 10;
	    var time 	  = 250;
	    var hideDelay = 500;

	    var hideDelayTimer = null;

	    var beingShown = false;
	    var shown 	   = false;
	    var trigger    = $('.trigger', this);
	    var info 	   = $('#popup', this).css('opacity', 0);

	    $([trigger.get(0), info.get(0)]).mouseover(function () {
	    	if (hideDelayTimer) {
				clearTimeout(hideDelayTimer);
			}
	        if (beingShown || shown) {
				// don't trigger the animation again
	         	return;
	        } else {
	        	// reset position of info box
	            beingShown = true;

	            info.css({
	            	"top": 55,
	                "left": 60,
	                "display": "block"
	            }).animate({
	                 "top": "-=" + distance + "px",
	                 "opacity": 1
	            }, time, "swing", function() {
	             	 beingShown = false;
	                 shown 	   = true;
	            });
	        }

	        return false;
	    }).mouseout(function () {
	    	if (hideDelayTimer) {
				clearTimeout(hideDelayTimer);
			}
			
	        hideDelayTimer = setTimeout(function () {
	        	hideDelayTimer = null;
	
	        	info.animate({
	        		"top": "-=" + distance + "px",
	            	"opacity": 0
	        	}, time, "swing", function () {
	        		shown = false;
	            	info.css('display', 'none');
	        	});

	        }, hideDelay);
	        return false;
	    });
	});
	
	$("area").click(function() {
		var clicked = $(this).attr("id");
		var step	= clicked.split("_");
		var indic	= step[0].split("-");
				
		$(".step").each(function() {
			if($(this).css("display") === "block") {
				$(this).fadeOut("normal", function() {
					$("#"+step[0]).fadeIn("normal");
					$("#indicate").attr("src", "img/indicate"+indic[1]+".png");
				});
			}
		});
	});
	
	$(".togg").click(function() {
		var id = $(this).attr("id") + "-det";
		$(".details").each(function() {
			if($(this).css("display") != "none") {
				$(this).slideUp("slow");
			}
		});
		if($("#"+id).css("display") == "none") {
			$("#" + id).slideDown("slow");
		}
	});
	
	$(".step-click").click(function() {
		if($(this).attr("id") == "click-step-1") {
			$("#step-1").fadeOut("normal", function(){
				$("#step-2").fadeIn("normal");
			});
			$("#indicate").attr("src", "img/indicate2.png");
		} else if($(this).attr("id") == "click-step-2") {
			$("#step-2").fadeOut("normal", function(){
				$("#step-3").fadeIn("normal");
			});
			$("#indicate").attr("src", "img/indicate3.png");
		} else if($(this).attr("id") == "click-step-3") {
			$("#step-3").fadeOut("normal", function(){
				$("#step-4").fadeIn("normal");
			});
			$("#indicate").attr("src", "img/indicate4.png");
		} else if($(this).attr("id") == "click-step-4") {
			$("#step-4").fadeOut("normal", function(){
				$("#step-1").fadeIn("normal");
			});
			$("#indicate").attr("src", "img/indicate1.png");
		}
	});
});