var opacity = Array("0", "1");
var v = 0;

$(document).ready(function()
{	
	
	$("#playground .square").mouseover(function()
	{
		if ($(this).css("opacity") !== "0")
		{
				$(this).css("position", "relative")
						;//.detach().attachTo($("body"));
				$(this).animate(
				{
					opacity: "0"//,
					//width: "0px",
					//height: "0px",
					//top: "-=20px",
					//left: "+=4px"
				},
				100);
		}
		var id = $(this).attr("id");
		v == 0 ? $.jStorage.set(id, v) : "";
		v == 1 ? $.jStorage.deleteKey(id) : "";
	});
		
	$("#playground").click(function()
	{
		$("#playground .square").css("opacity", "1")
					.css("width", "8px")
					.css("height", "8px");
		$.jStorage.flush();
		return false;
	});
	
	$("#playground .square").each(function()
	{
		var id = $(this).attr("id");
		var value = $.jStorage.get(id, 1);
		if (value == 0)
		{
			$(this).css("opacity", "0");
		}
	});
	
});