timeout = null;
function position_bubbles() {
	$target = $(this);
	$(".help", $target).each(function () {
		$this = $(this);
		data_for = $this.attr("data-pos");
		if (data_for) {
			$position = $(data_for, $target);
		} else {
			$position = $target;
		}
		position = $position.get(0);
		if (!position) {
			return;
		}
		$this.css({
			position: "absolute",
			top: (position.offsetTop + ((position.offsetHeight + 2) / 2) - 8) + "px",
			left: (position.offsetLeft - 25) + "px"
		});
	});
}

function refresh_all_bubbles() {
	$(".help").each(function () {
		$this = $(this);
		$target = $this.parent();
		data_for = $this.attr("data-pos");
		if (data_for) {
			$position = $(data_for, $target);
		} else {
			$position = $target;
		}
		position = $position.get(0);
		if (!position) {
			return;
		}
		$this.css({
			position: "absolute",
			top: (position.offsetTop + ((position.offsetHeight + 2) / 2) - 8) + "px",
			left: (position.offsetLeft - 25) + "px"
		});
	});
}

function activate_bubbles() {
	$.ajax({
		url: "/ajax.php?help",
		type: "get",
		success: function (data) {
			disabled = $.cookie("help-bubbles-disabled");
			if (!disabled) {disabled = "";}
			
			$("body").append(data);
			$(".help").each(function () {
				$this = $(this);
				data_for = $this.attr("data-for");
				//console.log(disabled, data_for);
				if (disabled.indexOf(data_for) > -1) {
					$this.remove();
					return;
				}
				$details = $this.children(".details").hide().detach().css({position: "absolute"});
				$("body").append($details);
				$details.mouseenter(function () {
					clearTimeout(timeout);
				});
				$details.mouseleave(function (event) {
					
					timeout = setTimeout($.proxy(function () {
						$(".details").stop(true, true).fadeOut();
					}, this), 400);
				});
				
				$this.data("details", $details);
				$target = $(data_for);
				if ($target.length) {
					
					$target.append($this);
					$this.hover(function () {
						$(".details").stop(true, true).fadeOut();
						clearTimeout(timeout);
						$help = $(this);
						offset = $help.offset();
						$details = $help.data("details").css({left: offset.left + 15, top: offset.top + 15}).stop(true, true).fadeIn();
					}, function (event) {
						timeout = setTimeout($.proxy(function () {
							$(".details").stop(true, true).fadeOut();
						}, this), 400);
						
					});
					
					$this = $this.detach(); /* remove from bottom and reattach to target's position element */
					$target.append($this);
					$details.children(".close").click($.proxy(function (event) {
						$(event.target).closest(".details").fadeOut();
						
						/* turn off only this bubble */
						$.cookie("help-bubbles-disabled", $.cookie("help-bubbles-disabled") + $(this).attr("data-for"), {expires: 365, path: "/"});
						$(this).remove();
						return false;
					}, this));
					$details.click(function() {return false;});
					data_for = $this.attr("data-pos");
					if (data_for) {
						$position = $(data_for, $target);
					} else {
						$position = $target;
					}

					fn = $.proxy(position_bubbles, $target);
					$target.mouseenter(fn);
					fn();
				} else {
					$this.remove();
					//console.log("Couldn't match", data_for, $this);
				}
			});
		}
	});
	refresh_all_bubbles();
}

function turn_help_on() {
	$.cookie("help-bubbles", "yes", {expires: 365, path: "/"});
	
	activate_bubbles();
	$("div.settings ul").append($("<li><a href='#'><img src='/lib/icons/help.png' class='list' />Turn help <b>off</b></a></li>").click(function () {
		turn_help_off();
		$(this).remove();

	}));

}

function turn_help_off() {
	$(".details, .help").fadeOut();
	$.cookie("help-bubbles", "no", {expires: 365, path: "/"});
	$.cookie("help-bubbles-disabled", null);
	$("div.settings ul").append($("<li><a href='#'><img src='/lib/icons/help.png' class='list' />Turn help <b>on</b></a></li>").click(function () {
		turn_help_on();
		$(this).remove();
	}));
}

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.outerHeight() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.outerWidth() ) / 2+$(window).scrollLeft() + "px");
    return this;
};

$(document).ready(function () {
	/* footer easter eggs */
	$("#footer-cont").hover(function () {
		$("#footer-eggs").stop(true, true).fadeIn();
	}, function () {
		$("#footer-eggs").stop(true, true).fadeOut();
	});

	/* settings */
	$("body").append(
	   $("<div/>").addClass("settings").append(
	       $("<b/>").text("Settings").append("<img src='/lib/icons/cog.png' class='icon' />").click(function () {$("div.settings ul").show(200);})        
	   )
	   .append(
	       $("<ul/>").append(
	           $("<li/>").append($("<a/>").text("Change font size").attr("href", "/departments/InfoSys/news3020/").prepend("<img src='/lib/icons/font.png' class='list' />"))
	       )
	       .append(
	           $("<li/>").append($("<a/>").text("Browser compatability").attr("href", "/departments/InfoSys/news3020/").prepend("<img src='/lib/icons/monitor.png' class='list' />"))        
	       ).hide()
	   )
	).click(function (e) {
	    if (!$(e.target).closest(".settings").length) {
	        $(".settings ul:visible").hide(200);
	    }
	});
	
	/* help bubbles */

	
	//help = $.cookie("help-bubbles");
	help = "no";
	if (!help) {
		/* display opt in/out message */
		msg = "Welcome to the new website of the Town of Sudbury. The site has been redesigned for easier and quicker access to important department information, as well as an overall cleaner feel. To help visitors adjust to the new layout, we recommend you turn on help bubbles to explain how new features work.<br /><div style='padding: 10px 0px; font-size: 12px; color: #666666; line-height: 110%;'>Ian Wetherbee and Adu Bhandaru, <a href='/departments/InfoSys/'>Information Systems</a><br /><a href='mailto:webmaster@sudbury.ma.us'>Feedback is appreciated</a></div>";
		$opt_in = $("<span><img src='/lib/icons/accept.png' /> Turn On Help</span>").click(function () {
			$(this).closest("#opt-in-bubble").remove();
			turn_help_on();
		});
		$opt_out = $("<span><img src='/lib/icons/delete.png' /> No Thanks</span>").click(function () {
			turn_help_off();
			$(this).closest("#opt-in-bubble").remove();
		});
		$opt_dialog = $("<div id='opt-in-bubble'/>").hide().append("<h2>Welcome!</h2>").append("<p>" + msg + "</p>").append($opt_in).append($opt_out);
		$("body").append($opt_dialog);

		setTimeout("$('#opt-in-bubble').center().fadeIn();", 700);
	} else if (help == "yes") {
		activate_bubbles();
		$("div.settings ul").append($("<li><a href='#'><img src='/lib/icons/help.png' class='list' /> Turn help <b>off</b></a></li>").click(function () {
			turn_help_off();
			$(this).remove();

		}));
	} else {
		$("div.settings ul").append($("<li><a href='#'><img src='/lib/icons/help.png' class='list' /> Turn help <b>on</b></a></li>").click(function () {
			turn_help_on();
			$(this).remove();
		}));
	}
	
});