diff --git a/BlueStone.ttf b/BlueStone.ttf
new file mode 100644
index 0000000..c404e4a
Binary files /dev/null and b/BlueStone.ttf differ
diff --git a/cat.html b/cat.html
index d6b9b9a..f30dfc9 100644
--- a/cat.html
+++ b/cat.html
@@ -28,11 +28,17 @@ canvas {
 	border:1px solid #d3d3d3;
 	background-color: #000000;
 }
+@font-face {
+	font-family: "BlueStone";
+	src: url("BlueStone.ttf");
+}
 </style>
 </head>
 <body onload="startGame()">
 <script>
 
+var FONT = "BlueStone";
+
 // game vars
 var things = [];
 var score = 0;
@@ -46,6 +52,11 @@ var curlevel = 1;
 var lastmx = -1, lastmy = -1;
 
 
+// for background
+var catalpha = 1.0;
+
+var ctx = null;
+
 // goal types
 var GOALVERB = {
 	'food': 'Eat',
@@ -59,6 +70,61 @@ var GOALVERB = {
 	'sun cycles': 'Wait out',
 };
 
+var wipe = { 
+	to: "",
+	dir: "",
+	count: 0,
+	active: false,
+
+	isactive : function() {
+		if (this.active) {
+			return this.dir;
+		}
+		return false;
+	},
+
+	// howin and howoutout should be 'up' or 'down'
+	getval : function(fullamt, howin, howout, def) {
+		var num,how;
+		if (this.active) {
+			if (this.dir == "in") {
+				how = howin;
+			} else if (this.dir == "out") {
+				how = howout;
+			}
+		} else {
+			return def;
+		}
+
+		num = (this.count / this.max) * fullamt;
+		if (how == "down") {
+			num = fullamt - num;
+		}
+		return num;
+	},
+
+	start : function(nextstate, dir, howlong) {
+		this.to = nextstate;
+		this.count = 0;
+		this.max = howlong;
+		this.dir = dir;
+		this.active = true;
+	},
+
+	tick : function() {
+		this.count++;
+		if (this.count >= this.max) {
+			var nextstate = this.to;
+			this.active = false;
+			this.to = "";
+			this.count = 0;
+			if (nextstate != "") {
+				game.setstate(nextstate);
+			}
+		}
+	},
+};
+
 var FULLSTAR = "\u2605";
 var EMPTYSTAR = "\u2606";
 
@@ -104,7 +170,8 @@ var HELPLINEWIDTH=4;
 var HELPARROWSIZE=15;
 var HELPTITLESIZE = 18;
 var HELPSUBTITLESIZE = 14;
-var HELPTEXTSIZE = 12;
+//var HELPTEXTSIZE = 12;
+var HELPTEXTSIZE = 9;
 
 var GOALTEXTSIZE = 16;
 
@@ -131,15 +198,23 @@ var SHRINKLOSE= (DEF_THINGSIZE / SHRINKTICKS);
 var LINEWIDTH=2;
 var CROSSWIDTH=2;
 
+var BOTTOMBORDERWIDTH=5;
 
 var LEVSELGRIDW = 5;
 var LEVSELGRIDH = 6;
 
 var PATHARROWSIZE = 10;
+var PATHLINECOLGOOD = "#00ee00";
+var PATHLINECOLBAD = "#ee0000";
+
 
 var PARADELENGTH = 3;
 
-var BOARDX = (SCREENW - (DEF_GRIDW * DEF_GRIDSIZE)) / 2;
+var LEVSEL_X = Math.floor((SCREENW - (DEF_GRIDW * DEF_GRIDSIZE)) / 2);
+var LEVSEL_Y = 64;
+
+var DEF_BOARDX = Math.floor((SCREENW - (DEF_GRIDW * DEF_GRIDSIZE)) /2 );
+var BOARDX = DEF_BOARDX;
 var BOARDY = 64;
 
 // 'tap to continue' button
@@ -151,7 +226,6 @@ var levsel_conty = BOARDY + (DEF_GRIDSIZE*DEF_GRIDH) + DEF_GRIDSIZE + DEF_GRIDSI
 var levsel_contw = SCREENW - (BOARDX*2);
 var levsel_conth = (DEF_GRIDSIZE/2);
 
-
 var FOODPOINTS = 10;
 var LLAMAPOINTS = 100;
 var GOATPOINTS = 50;
@@ -493,6 +567,10 @@ function startGame() {
 
 	loadimage('lock', 'images/lock.png');
 
+	loadimage('catwalkl', 'images/catwalkl.png');
+	loadimage('catwalkr', 'images/catwalkr.png');
+
+
 	game.init();
 	game.initlevels();
 
@@ -599,24 +677,65 @@ function getmousexy(event) {
 	var e,scale;
 	var x,y;
 	var adjustx, adjusty;
+	var xoff=0,yoff=0;
+	var element = game.canvas;
 
 	scale = game.curw / SCREENW;
 
+	//var rect = game.canvas.getBoundingClientRect();
+
+
+	if (element.offsetParent !== undefined) {
+	    do {
+	      xoff += element.offsetLeft;
+	      yoff += element.offsetTop;
+	    } while ((element = element.offsetParent));
+	  }
+
+	// Add padding and border style widths to offset
+	// Also add the <html> offsets in case there's a position:fixed bar
+
+	var _stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(game.canvas, null)['paddingLeft'], 10)      || 0;
+	var _stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(game.canvas, null)['paddingTop'], 10)       || 0;
+	var _styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(game.canvas, null)['borderLeftWidth'], 10)  || 0;
+	var _styleBorderTop   = parseInt(document.defaultView.getComputedStyle(game.canvas, null)['borderTopWidth'], 10)   || 0;
+	var html = document.body.parentNode;
+	var _htmlTop = html.offsetTop;
+	var _htmlLeft = html.offsetLeft;
+
+
+	xoff += _stylePaddingLeft + _styleBorderLeft + _htmlLeft;
+	yoff += _stylePaddingTop + _styleBorderTop + _htmlTop;
+
+
+
 	if (event.type == "touchup") {
-		x = (event.changedTouches[0].pageX) / scale;
-		y = (event.changedTouches[0].pageY) / scale;
-		adjustx = (event.changedTouches[0].pageX - BOARDX) / scale;
-		adjusty = (event.changedTouches[0].pageY - BOARDY) / scale;
+		//x = (event.changedTouches[0].pageX - xoff) / scale;
+		//y = (event.changedTouches[0].pageY - yoff) / scale;
+		//adjustx = (event.changedTouches[0].pageX - xoff - BOARDX) / scale;
+		//adjusty = (event.changedTouches[0].pageY - yoff -BOARDY) / scale;
+		x = (event.touches[0].clientX - xoff) / scale;
+		y = (event.touches[0].clientY - yoff) / scale;
+		//adjustx = (event.changedTouches[0].clientX - xoff - BOARDX) / scale;
+		//adjusty = (event.changedTouches[0].clientY - yoff -BOARDY) / scale;
 	} else if (event.touches != undefined) {
-		x = (event.touches[0].clientX) / scale;
-		y = (event.touches[0].clientY) / scale;
-		adjustx = (event.touches[0].clientX - BOARDX) / scale;
-		adjusty = (event.touches[0].clientY - BOARDY) / scale;
+		x = (event.touches[0].clientX - xoff) / scale;
+		y = (event.touches[0].clientY - yoff) / scale;
+		//adjustx = (event.touches[0].clientX - xoff - BOARDX) / scale;
+		//adjusty = (event.touches[0].clientY - yoff - BOARDY) / scale;
 	} else {
-		x = (event.pageX) / scale;
-		y = (event.pageY) / scale;
-		adjustx = (event.pageX - BOARDX) / scale;
-		adjusty = (event.pageY - BOARDY) / scale;
+		x = (event.pageX - xoff) / scale;
+		y = (event.pageY - yoff) / scale;
+		//adjustx = (event.pageX - xoff - BOARDX) / scale;
+		//adjusty = (event.pageY - yoff - BOARDY) / scale;
+	}
+
+	if (game.state == "levselect") {
+		adjustx = x - LEVSEL_X;
+		adjusty = y - LEVSEL_Y;
+	} else {
+		adjustx = x - BOARDX;
+		adjusty = y - BOARDY;
 	}
 
 	return [ adjustx, adjusty, x, y ];
@@ -826,6 +945,7 @@ var game = {
 	state: "title",
 	cheat: 0,
 	winimgsize: 0,
+	frameNo: 0,
 
 
 	canvas : document.createElement("canvas"),
@@ -840,6 +960,7 @@ var game = {
 
 		this.context = this.canvas.getContext("2d");
 
+		ctx = this.context;
 
 		// find ipad/android/iphone so we can hide the address bar 
 		this.ua = navigator.userAgent.toLowerCase();
@@ -864,18 +985,20 @@ var game = {
 
 		this.resize();
 
-		window.requestAnimFrame = (function(){
-		  return  window.requestAnimationFrame       || 
-			  window.webkitRequestAnimationFrame || 
-			  window.mozRequestAnimationFrame    || 
-			  window.oRequestAnimationFrame      || 
-			  window.msRequestAnimationFrame     || 
-			  function( callback ){
-			    window.setTimeout(callback, 1000 / 60);
-			  };
-		})();
-
-		//this.interval = setInterval(mainloop, 20);
+		//if (game.ios) {
+		//	this.interval = setInterval(mainloop, 20);
+		//} else {
+			window.requestAnimFrame = (function(){
+			  return  window.requestAnimationFrame       || 
+				  window.webkitRequestAnimationFrame || 
+				  window.mozRequestAnimationFrame    || 
+				  window.oRequestAnimationFrame      || 
+				  window.msRequestAnimationFrame     || 
+				  function( callback ){
+					    window.setTimeout(mainloop, 1000 / 60);
+				  };
+			})();
+		//}
 
 		this.canvas.addEventListener('mousedown', this.handlemousedown, false);
 		this.canvas.addEventListener('mouseup', this.handlemouseup, false);
@@ -960,11 +1083,13 @@ var game = {
 			THINGSIZE = DEF_THINGSIZE;
 			GRIDW = DEF_GRIDW;
 			GRIDH = DEF_GRIDH;
+			BOARDX = DEF_BOARDX;
 		} else {
 			GRIDSIZE = game.levels[curlevel].gridsize;
 			THINGSIZE = game.levels[curlevel].thingsize;
 			GRIDW = game.levels[curlevel].gridw;
 			GRIDH = game.levels[curlevel].gridh;
+			BOARDX = game.levels[curlevel].boardx;
 		}
 	},
 
@@ -976,26 +1101,39 @@ var game = {
 		mylevel.thinglist = new Array();
 		mylevel.forcelist = new Array();
 		mylevel.allowedthings = new Array();
-		mylevel.gridsize = DEF_GRIDSIZE;
-		mylevel.thingsize = DEF_THINGSIZE;
-		mylevel.gridw = DEF_GRIDW;
-		mylevel.gridh = DEF_GRIDH;
+
+		if (lev == 1) {
+			mylevel.gridsize = DEF_GRIDSIZE;
+			mylevel.thingsize = DEF_THINGSIZE;
+			mylevel.gridw = DEF_GRIDW;
+			mylevel.gridh = DEF_GRIDH;
+			mylevel.boardx = (SCREENW - (DEF_GRIDW * DEF_GRIDSIZE))/2;
+		} else {
+			// default to size of previous one
+			mylevel.gridsize = this.levels[lev-1].gridsize;
+			mylevel.thingsize = this.levels[lev-1].thingsize;
+			mylevel.gridw = this.levels[lev-1].gridw;
+			mylevel.gridh = this.levels[lev-1].gridh;
+			mylevel.boardx = this.levels[lev-1].boardx;
+		}
 
 		this.levels[lev] = mylevel; 
 
 		playerdata.levscore[lev] = 0;
 	},
 
-	// TODO: specify newwid instead of newgridsize
-	addlevelgridsize: function (lev, newgridsize) {
+	addlevelgridwid: function (lev, newwid) {
 		var ratio;
 
-		ratio = newgridsize / DEF_GRIDSIZE;
+		ratio = newwid / DEF_GRIDW;
 
-		this.levels[lev].gridsize = newgridsize;
-		this.levels[lev].thingsize = DEF_THINGSIZE * ratio;
-		this.levels[lev].gridw = (DEF_GRIDW * DEF_GRIDSIZE) / newgridsize;
-		this.levels[lev].gridh = (DEF_GRIDH * DEF_GRIDSIZE) / newgridsize;
+console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
+
+		this.levels[lev].gridsize = DEF_GRIDSIZE / ratio;
+		this.levels[lev].thingsize = DEF_THINGSIZE / ratio;
+		this.levels[lev].gridw = DEF_GRIDW * ratio;
+		this.levels[lev].gridh = DEF_GRIDH * ratio;
+		this.levels[lev].boardx = Math.floor((SCREENW - (this.levels[lev].gridw * this.levels[lev].gridsize)) / 2);
 	},
 
 	//                  thingtype  pct
@@ -1118,7 +1256,7 @@ var game = {
 					break;
 				case "turns":
 					// assume you'll get a parade on most turns.
-					num = (Math.min(CATPOINTS, SLEEPYCATPOINTS) * 3 * this.levels[lev].goals[i].count);
+					num = (Math.min(CATPOINTS, SLEEPYCATPOINTS) *  this.levels[lev].goals[i].count);
 					if (!game.isbanned(curlevel, "door")) {
 						num *= 1.5;
 					}
@@ -1190,7 +1328,7 @@ var game = {
 		this.addlevelallowedthings(4, "cat", "food", "llama");
 
 		this.addlevel(5, false); 
-		this.addlevelgridsize(5, 70);
+		this.addlevelgridwid(5, 6);
 		this.addlevelgoals(5, "turns", 10);
 		//this.addlevelgoals(5, "points", 600);
 		this.addlevelallowedthings(5, "cat", "food", "llama");
@@ -1219,6 +1357,7 @@ var game = {
 		this.addlevelforcethings(9, "door", 1);
 
 		this.addlevel(10, false); 
+		this.addlevelgridwid(10, 7);
 		this.addlevelallowedthings(10,"goat", "cat", "food", "llama", "door");
 		//this.addlevelgoals(10, "points", 2000);
 		this.addlevelgoals(10, "turns", 15);
@@ -1256,6 +1395,7 @@ var game = {
 		*/
 	},
 
+/*
 	startlevel : function() {
 		this.initlevelvars();
 		this.populategrid();
@@ -1263,6 +1403,7 @@ var game = {
 		this.setstate("running");
 		this.dirty = true;
 	},
+*/
 
 	populategrid : function() {
 		var i;
@@ -1314,9 +1455,9 @@ var game = {
 	drawtop : function() {
 		var texttodraw = overdesc;
 		var col = "#aaaaaa";
-		var i,n,ctx;
+		var i,n;
 
-		ctx = this.context;
+		//ctx = this.context;
 
 		// clear
 		ctx.clearRect(0, 0, this.canvas.width-1, BOARDY-1);
@@ -1427,14 +1568,14 @@ var game = {
 	},
 
 	drawbottom : function() {
-		var bx = 0,by = BOARDY + GRIDH*GRIDSIZE + 15;
-		var bw = SCREENW, bh = SCREENH - by;
+		var bx = 0,by = BOARDY + GRIDH*GRIDSIZE + 25;
+		var bw = SCREENW - BOTTOMBORDERWIDTH, bh = SCREENH - by - BOTTOMBORDERWIDTH;
 
-		var x,y,ctx;
+		var x,y;
 		var margin = 10; 
 		var indent = 50; 
 		var boxindent = 20;
-		ctx = this.context;
+		//ctx = this.context;
 
 		if ((game.state == "running") || (game.state == "levelcomplete") || (game.state == "gameover")) {
 			var texth = GOALTEXTSIZE+10;
@@ -1451,7 +1592,7 @@ var game = {
 
 			//outline
 			ctx.strokeStyle = "cyan";
-			ctx.lineWidth = 5;
+			ctx.lineWidth = BOTTOMBORDERWIDTH;
 			ctx.beginPath();
 			ctx.rect(bx+(borderwidth/2), by+(borderwidth/2), bw-(borderwidth/2), bh-(borderwidth/2));
 			ctx.stroke();
@@ -1544,7 +1685,7 @@ var game = {
 
 	drawcontinuebutton : function() {
 		var borderwidth = 5;
-		var ctx = this.context;
+		//var /ctx = this.context;
 		var col,y;
 
 
@@ -1630,33 +1771,93 @@ var game = {
 		}
 	},
 
-	drawtitle : function() {
-		var ratio,w,h;
-		var img = image['title'];
-		var gradient;
-
+	drawbg : function() {
+		var gradient,x,y,off;
+		var catscale,catsize,catspeed;
+		var wantalpha,alphaspeed;
 		// background
+		/*
 		gradient = this.context.createLinearGradient(0, 0, 0, SCREENH);
 		gradient.addColorStop(0, "black");
 		gradient.addColorStop(1, "blue");
 
 		this.context.fillStyle = gradient;
+		*/
+		this.context.fillStyle = "#005051";
 		this.context.fillRect(0, 0, SCREENW, SCREENH);
 
-		// title image
+		// moving cats
+		catscale = 0.3;
+		catspeed = 0.5;
+		alphaspeed = 0.02;
+
+		catsize = DEF_GRIDSIZE * catscale;
+		if (game.state == "help" ){
+			wantalpha = 0.2;
+		} else if (game.state == "levselect") {
+			wantalpha = 0.6;
+		} else {
+			wantalpha = 1.0;
+		}
+
+		if (catalpha > wantalpha) {
+			catalpha -= alphaspeed;
+			if (catalpha < wantalpha) catalpha = wantalpha;
+		} else if (catalpha < wantalpha) {
+			catalpha += alphaspeed;
+			if (catalpha > wantalpha) catalpha = wantalpha;
+		}
+
+		ctx.globalAlpha = catalpha;
+		off = game.frameNo % (catsize / catspeed);
+		for (y = -catsize*2; y < SCREENH; y += catsize*2) {
+			for (x = -catsize*2; x < SCREENW+catsize*2; x += catsize) {
+				//ctx.fillStyle = "red";
+				//ctx.fillRect(x +(catsize/4)+off, y +(catsize/4)+off, catsize/2, catsize/2);
+				this.context.drawImage(image['catwalkr'], x +(catsize/4)+off*catspeed, y +(catsize/4), 
+							image['catwalkr'].width*catscale,
+							image['catwalkr'].height*catscale);
+
+				this.context.drawImage(image['catwalkl'], x +(catsize/4)-off*catspeed, y +(catsize/4)+catsize, 
+							image['catwalkl'].width*catscale,
+							image['catwalkl'].height*catscale);
+			}
+		}
+		ctx.globalAlpha = 1.0;
+	},
+
+	drawtitle : function() {
+		var ratio,w,h;
+		var img = image['title'];
+		var catyoff = 0;
+		var titlexoff = 0;
+		var titley = 10;
+		var creditsy = 64;
+		var textgrad;
+
+		// background
+		this.drawbg();
+
+		// big cat 
 		ratio = SCREENW / img.width;
 		w = img.width * ratio;
 		h = img.height * ratio;
-		this.context.drawImage(img, SCREENW/16, SCREENH - h, w, h);
+		
+		catyoff = wipe.getval(h,  "down", "up", 0);
+		this.context.drawImage(img, SCREENW/16, SCREENH - h + catyoff, w, h);
 
 		// text
 		this.context.textAlign = "center";
 		this.context.textBaseline = "top";
-		shadowtext(this.context, "Cat Parade", TITLETEXTSIZE,"red", SCREENW / 2, 5);
-		shadowtext(this.context, "rpearce, 2016", TITLECREDITTEXTSIZE, "#00aaee", SCREENW / 2, 64);
+
+		titlexoff = wipe.getval(SCREENW, "down", "up", 0);
+
+
+		shadowtext(this.context, "Cat Parade", TITLETEXTSIZE,"red", SCREENW / 2 - titlexoff, titley, "#ff0000", "#ffff00", "white");
+		shadowtext(this.context, "rpearce, 2016", TITLECREDITTEXTSIZE, "#00aaee", SCREENW / 2 - titlexoff, creditsy);
 
 		this.context.textBaseline = "bottom";
-		shadowtext(this.context, "Tap to start", TITLESTARTTEXTSIZE, "#00dd00", SCREENW / 2, SCREENH - 64);
+		shadowtext(this.context, "Tap to start", TITLESTARTTEXTSIZE, "#00dd00", SCREENW / 2 + titlexoff, SCREENH - 64);
 	},
 
 	levelexists : function (lev) {
@@ -1684,7 +1885,7 @@ var game = {
 
 	// returns new y val
 	drawhelpsubtitle : function(ctx, text, y) {
-		var subtitlecol = "#00cc00";
+		var subtitlecol = "#cc00cc";
 		var xindent = 10;
 
 		ctx.textAlign = "center";
@@ -1698,7 +1899,7 @@ var game = {
 		var divamt = 2;
 		var imgsize = THINGSIZE / divamt;
 		var gridsize = GRIDSIZE / divamt;
-		var gradient,ctx,x,y,x2,y2,curx,cury;
+		var gradient,x,y,x2,y2,curx,cury;
 		var row1y,row2y,row3y;
 		var i;
 		var linex = [];
@@ -1708,20 +1909,24 @@ var game = {
 
 		var midpoint1 = SCREENW/8 * 5;
 		var midpoint2 = SCREENW/8 * 4;
-		var titlecol = "#00aaee";
-		var helpcol = "#00aa00";
+		var titlecol = "#00ccff";
+		var helpcol = "#00cc00";
 		var pointscoldark = "#888800";
-		var pointscol = "#cccc00";
+		var pointscol = "#dddd00";
 
-		ctx = this.context;
+		//ctx = this.context;
 
 		// background
+		/*
 		gradient = this.context.createLinearGradient(0, 0, 0, SCREENH);
 		gradient.addColorStop(0, "black");
 		gradient.addColorStop(1, "blue");
 
 		ctx.fillStyle = gradient;
 		ctx.fillRect(0, 0, SCREENW, SCREENH);
+		*/
+
+		this.drawbg();
 
 		// top text
 		cury = HELPTEXTYSPACE*2;
@@ -1741,10 +1946,12 @@ var game = {
 			shadowtext(ctx, "Drag a cat to eat cheese.", HELPTEXTSIZE,helpcol, textxspace, cury); 
 			cury += HELPTEXTYSPACE;
 
-			shadowtext(ctx, " - Cats can eat any amount of cheese, but only in a straight line.", HELPTEXTSIZE,helpcol, textxspace, cury); 
+			shadowtext(ctx, "Cats can eat any amount of cheese.", HELPTEXTSIZE,helpcol, textxspace, cury); 
+			cury += HELPTEXTYSPACE;
+			shadowtext(ctx, "Cats can only eat cheese in a straight line.", HELPTEXTSIZE,helpcol, textxspace, cury); 
 			cury += HELPTEXTYSPACE;
 
-			shadowtext(ctx, " - Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,helpcol, textxspace, cury); 
+			shadowtext(ctx, "Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,helpcol, textxspace, cury); 
 			cury += HELPTEXTYSPACE;
 			
 
@@ -1759,7 +1966,7 @@ var game = {
 			y2 = y;
 			ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
 
-			ctx.strokeStyle = "green";
+			ctx.strokeStyle = PATHLINECOLGOOD;
 			ctx.lineWidth = LINEWIDTH;
 			ctx.beginPath();
 			ctx.moveTo(x + imgsize/2, y + imgsize/2);
@@ -1767,7 +1974,7 @@ var game = {
 			ctx.stroke();
 
 			drawarrow(ctx, x + (imgsize/2),  y + (imgsize/2), 
-				       x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
+				       x2 + (imgsize/2), y2 + (imgsize/2), PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			cury = y2 + gridsize;
 
@@ -1790,7 +1997,7 @@ var game = {
 			ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
 
 			drawarrow(ctx, x + (imgsize/2),  y + (imgsize/2), 
-				       x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
+				       x2 + (imgsize/2), y2 + (imgsize/2), PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			cury = y2 + gridsize;
 
@@ -1908,9 +2115,9 @@ var game = {
 			cury = y + HELPTEXTYSPACE;
 
 			for (i = 0; i < 4; i++) {
-				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], PATHLINECOLGOOD, LINEWIDTH);
 			}
-			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], "green", LINEWIDTH, PATHARROWSIZE);
+			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			// arrow to middle
 			x = x + gridsize;
@@ -1954,10 +2161,13 @@ var game = {
 			ctx.textAlign = "left";
 			ctx.textBaseline = "bottom";
 			shadowtext(ctx, "Drag a cat to eat cheese.", HELPTEXTSIZE,helpcol, textxspace, cury); 
+			cury += HELPTEXTYSPACE*1.5;
+
+			shadowtext(ctx, "Cats can eat any amount of cheese, but cannot turn", HELPTEXTSIZE,helpcol, textxspace, cury); 
 			cury += HELPTEXTYSPACE;
 
-			shadowtext(ctx, "Cats can eat any amount of cheese, but only in a straight line.", HELPTEXTSIZE,helpcol, textxspace, cury); 
-			cury += HELPTEXTYSPACE;
+			shadowtext(ctx, "corners whilst doing so.", HELPTEXTSIZE,helpcol, textxspace, cury); 
+			cury += HELPTEXTYSPACE*1.5;
 
 			shadowtext(ctx, "Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,helpcol, textxspace, cury); 
 			cury += HELPTEXTYSPACE;
@@ -1974,7 +2184,7 @@ var game = {
 			y2 = y;
 			ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
 
-			ctx.strokeStyle = "green";
+			ctx.strokeStyle = PATHLINECOLGOOD;
 			ctx.lineWidth = LINEWIDTH;
 			ctx.beginPath();
 			ctx.moveTo(x + imgsize/2, y + imgsize/2);
@@ -1982,7 +2192,7 @@ var game = {
 			ctx.stroke();
 
 			drawarrow(ctx, x + (imgsize/2),  y + (imgsize/2), 
-				       x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
+				       x2 + (imgsize/2), y2 + (imgsize/2), PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			cury = y2 + gridsize;
 
@@ -2005,7 +2215,7 @@ var game = {
 			ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
 
 			drawarrow(ctx, x + (imgsize/2),  y + (imgsize/2), 
-				       x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
+				       x2 + (imgsize/2), y2 + (imgsize/2), PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			cury = y2 + gridsize;
 
@@ -2056,6 +2266,7 @@ var game = {
 			shadowtext(ctx, "Complete all goals to progress to the next level!", HELPTEXTSIZE,helpcol, textxspace, cury);
 			cury += HELPTEXTYSPACE;
 			cury += HELPTEXTYSPACE;
+			cury += HELPTEXTYSPACE;
 
 			// GAME OVER HELP
 			cury = this.drawhelpsubtitle(ctx, "End of Game", cury);
@@ -2116,9 +2327,9 @@ var game = {
 			cury = y + HELPTEXTYSPACE;
 
 			for (i = 0; i < 4; i++) {
-				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], PATHLINECOLGOOD, LINEWIDTH);
 			}
-			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], "green", LINEWIDTH, PATHARROWSIZE);
+			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			// arrow to middle
 			x = x + gridsize;
@@ -2149,7 +2360,7 @@ var game = {
 
 			ctx.textAlign = "left";
 			ctx.textBaseline = "bottom";
-			shadowtext(ctx, "Cats are scared of " + llamatext + "s and can't move when near them.", HELPTEXTSIZE,helpcol, textxspace, cury); 
+			shadowtext(ctx, "Cats are scared of " + llamatext + "s and can't move while nearby.", HELPTEXTSIZE,helpcol, textxspace, cury); 
 			cury += HELPTEXTYSPACE;
 
 			x = (SCREENW / 2) - gridsize/2 - gridsize;
@@ -2168,6 +2379,8 @@ var game = {
 			cury += HELPTEXTYSPACE;
 			cury += HELPTEXTYSPACE;
 			cury += HELPTEXTYSPACE;
+			cury += HELPTEXTYSPACE;
+			cury += HELPTEXTYSPACE;
 
 			cury = this.drawhelpsubtitle(ctx, "Cat + " + llamatitle + " Parades", cury);
 
@@ -2215,9 +2428,9 @@ var game = {
 			cury = y + HELPTEXTYSPACE;
 
 			for (i = 0; i < 4; i++) {
-				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], PATHLINECOLGOOD, LINEWIDTH);
 			}
-			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], "green", LINEWIDTH, PATHARROWSIZE);
+			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			// arrow to middle
 			x = x + gridsize;
@@ -2260,11 +2473,11 @@ var game = {
 			ctx.drawImage(image['goat'], textxspace, cury, THINGSIZE, THINGSIZE);
 			cury += GRIDSIZE;
 
-			shadowtext(ctx, "Doors", HELPTEXTSIZE,pointscol, THINGSIZE*1.5, cury + THINGSIZE/2 - HELPTEXTYSPACE/2); 
+			shadowtext(ctx, "Doors (level 9)", HELPTEXTSIZE,pointscol, THINGSIZE*1.5, cury + THINGSIZE/2 - HELPTEXTYSPACE/2); 
 			ctx.drawImage(image['door'], textxspace, cury, THINGSIZE, THINGSIZE);
 			cury += GRIDSIZE;
 
-			shadowtext(ctx, "Sunlight", HELPTEXTSIZE,pointscol, THINGSIZE*1.5, cury + THINGSIZE/2 - HELPTEXTYSPACE/2); 
+			shadowtext(ctx, "Sunlight (level 11)", HELPTEXTSIZE,pointscol, THINGSIZE*1.5, cury + THINGSIZE/2 - HELPTEXTYSPACE/2); 
 			ctx.drawImage(image['sunlight'], textxspace, cury, THINGSIZE, THINGSIZE);
 			cury += GRIDSIZE;
 		} else if (curlevel == 6) {
@@ -2342,9 +2555,9 @@ var game = {
 
 			// parade lines
 			for (i = 0; i < 7; i++) {
-				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], PATHLINECOLGOOD, LINEWIDTH);
 			}
-			drawarrow(ctx, linex[7], liney[7], linex[8], liney[8], "green", LINEWIDTH, PATHARROWSIZE);
+			drawarrow(ctx, linex[7], liney[7], linex[8], liney[8], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			// arrow to middle
 			x = x + gridsize;
@@ -2395,8 +2608,8 @@ var game = {
 			y += gridsize;
 			cury = y;
 
-			drawarrow(ctx, linex[0], liney[0], linex[1], liney[1], "red", LINEWIDTH, PATHARROWSIZE);
-			drawcross(ctx, x+imgsize/8, row1y+imgsize/8, x + imgsize-imgsize/8, row1y + imgsize-imgsize/8, "red", 3);
+			drawarrow(ctx, linex[0], liney[0], linex[1], liney[1], PATHLINECOLBAD, LINEWIDTH, PATHARROWSIZE);
+			drawcross(ctx, x+imgsize/8, row1y+imgsize/8, x + imgsize-imgsize/8, row1y + imgsize-imgsize/8, PATHLINECOLBAD, 3);
 
 			// good example
 			x = imgsize;
@@ -2415,8 +2628,8 @@ var game = {
 			x += gridsize*2;
 
 
-			drawarrow(ctx, linex[0], liney[0], linex[1], liney[1], "green", LINEWIDTH, PATHARROWSIZE);
-			drawtick(ctx, x, row2y, x + imgsize, row2y + imgsize, "#00ff00", 3);
+			drawarrow(ctx, linex[0], liney[0], linex[1], liney[1], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
+			drawtick(ctx, x, row2y, x + imgsize, row2y + imgsize, PATHLINECOLGOOD, 3);
 
 			y += gridsize;
 			cury = y;
@@ -2472,9 +2685,9 @@ var game = {
 			// parade lines
 			cury = y + HELPTEXTYSPACE;
 			for (i = 0; i < 5; i++) {
-				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+				drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], PATHLINECOLGOOD, LINEWIDTH);
 			}
-			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], "green", LINEWIDTH, PATHARROWSIZE);
+			drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			// arrow to middle
 			x = x + gridsize;
@@ -2537,7 +2750,7 @@ var game = {
 			ctx.drawImage(image['cheese'], x, y, imgsize, imgsize);
 
 			// cat eating food line
-			drawarrow(ctx, linex[0], liney[0], linex[1], liney[1], "green", LINEWIDTH, PATHARROWSIZE);
+			drawarrow(ctx, linex[0], liney[0], linex[1], liney[1], PATHLINECOLGOOD, LINEWIDTH, PATHARROWSIZE);
 
 			// arrow to middle
 			x = x + gridsize;
@@ -2676,60 +2889,68 @@ var game = {
 	drawlevselect : function() {
 		var titley = 5;
 		var pstarsy = 32;
-		var x,y,ctx,i;
+		var x,y,i;
 		var levnum = 1;
 		var levcol = "#555500";
 		//var gridcol = "#aaaa00";
-		var gridcol = "#cccccc";
+		var gridcol = "#000000";
+		var crosscol = "#bbbbbb";
 		var textcol = "#dddd00";
 		var titlecol = "#00aaee";
 		var scorecol = "#00dd00";
 		var starcol = "#dddd00";
-		var gradient,gridgrad,buttongrad;
+		var buttontextcol = "#bbbbbb";
 
-		ctx = this.context;
+		var gridblack = "#111111";
+
+		var gridgrad,buttongrad;
+
+		var titleyoff = 0;
+		var buttonyoff = 0;
+		var gridalpha = 1.0;
+
+		//ctx = this.context;
 
 		// background
-		gradient = this.context.createLinearGradient(0, 0, 0, SCREENH);
-		gradient.addColorStop(0, "black");
-		gradient.addColorStop(1, "blue");
-		ctx.fillStyle = gradient;
-		ctx.fillRect(0, 0, SCREENW, SCREENH);
+		this.drawbg();
 
 		ctx.textAlign = "center";
 		ctx.textBaseline = "top";
-		shadowtext(ctx, "Level Selection", TITLESIZELEVSELECT,titlecol, SCREENW / 2, titley); 
+
+		titleyoff = wipe.getval(titley*5, "down", "up", 0);
+		shadowtext(ctx, "Level Selection", TITLESIZELEVSELECT,titlecol, SCREENW / 2, titley - titleyoff); 
 
 		ctx.textAlign = "left";
 		ctx.textBaseline = "top";
-		shadowtext(ctx, FULLSTAR + " " + playerdata.totstars, TEXTSIZETOTSTARS,starcol, BOARDX, pstarsy); 
+		shadowtext(ctx, FULLSTAR + " " + playerdata.totstars, TEXTSIZETOTSTARS,starcol, LEVSEL_X, pstarsy - titleyoff);
 		
+		gridalpha = wipe.getval(1.0, "up", "down", 1.0);
 
 		// grid
+		ctx.globalAlpha = gridalpha;
 		for (y = 0; y < LEVSELGRIDH*GRIDSIZE; y += GRIDSIZE) {
 			for (x = 0; x < LEVSELGRIDW*GRIDSIZE; x += GRIDSIZE) {
 				if (this.levelexists(levnum)) {
-
 					ctx.beginPath();
 					ctx.lineWidth = 3;
 					ctx.strokeStyle = gridcol;
-					gridgrad = this.context.createLinearGradient(x, y, BOARDX+x+GRIDSIZE, BOARDY+y+GRIDSIZE);
+					gridgrad = this.context.createLinearGradient(x, y, LEVSEL_X+x+GRIDSIZE, LEVSEL_Y+y+GRIDSIZE);
 					//gridgrad.addColorStop(0, "#eeee00");
-					if (playerdata.levscore[levnum] > 0) {
+					if ((playerdata.levscore[levnum] > 0) && !this.levellocked(levnum)) {
 						gridgrad.addColorStop(0, "#00ee00");
 					} else {
 						gridgrad.addColorStop(0, "#eeeeee");
 					}
-					gridgrad.addColorStop(1, "black");
+					gridgrad.addColorStop(1, gridblack);
 					ctx.fillStyle = gridgrad;
-					ctx.fillRect(BOARDX + x, BOARDY + y, GRIDSIZE-1, GRIDSIZE-1);
+					ctx.fillRect(LEVSEL_X + x, LEVSEL_Y + y, GRIDSIZE-1, GRIDSIZE-1);
 					ctx.stroke();
 
 					if (this.levellocked(levnum)) {
 						// locked
 						ctx.drawImage(image['lock'], 
-							BOARDX + x + GRIDSIZE/2 - image['lock'].width/3, 
-							BOARDY + y + GRIDSIZE/3 - image['lock'].height/3, 
+							LEVSEL_X + x + GRIDSIZE/2 - image['lock'].width/3, 
+							LEVSEL_Y + y + GRIDSIZE/3 - image['lock'].height/3, 
 							GRIDSIZE/2, GRIDSIZE/2);
 
 						// # stars to unlock
@@ -2737,13 +2958,13 @@ var game = {
 						ctx.textBaseline = "middle";
 						shadowtext(ctx, FULLSTAR + " " + this.levels[levnum].starsrequired, 
 							TEXTSIZELEVSTARS, starcol, 
-							BOARDX + x + GRIDSIZE/2, BOARDY + y + GRIDSIZE - (GRIDSIZE/4));
+							LEVSEL_X + x + GRIDSIZE/2, LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4));
 				
 
 					} else {
 						var hiscore,starcount,stars = "";
-						var levy = BOARDY + y + GRIDSIZE/4;
-						var scorey = BOARDY + y + GRIDSIZE - 5;
+						var levy = LEVSEL_Y + y + GRIDSIZE/4;
+						var scorey = LEVSEL_Y + y + GRIDSIZE - 5;
 
 						var stary = levy + ((scorey - levy) / 2); // half way between
 
@@ -2751,7 +2972,7 @@ var game = {
 						ctx.textAlign = "center";
 						ctx.textBaseline = "middle";
 						shadowtext(ctx, levnum, TEXTSIZELEVSELECT, textcol, 
-							BOARDX + x + GRIDSIZE/2,levy);
+							LEVSEL_X + x + GRIDSIZE/2,levy);
 
 						// get player hiscore
 						hiscore = playerdata.getlevscore(levnum);
@@ -2763,14 +2984,14 @@ var game = {
 							starcount = 0;
 						}
 						
-						game.drawstars(ctx, BOARDX + x + GRIDSIZE/2, stary, TEXTSIZELEVSTARS, starcount);
+						game.drawstars(ctx, LEVSEL_X + x + GRIDSIZE/2, stary, TEXTSIZELEVSTARS, starcount);
 			
 						/*
 						stars = game.calcstartext(starcount);
 						ctx.textAlign = "center";
 						ctx.textBaseline = "middle";
 						shadowtext(ctx, stars, TEXTSIZELEVSTARS, starcol, 
-							BOARDX + x + GRIDSIZE/2,stary);
+							LEVSEL_X + x + GRIDSIZE/2,stary);
 						*/
 
 						
@@ -2781,11 +3002,11 @@ var game = {
 							ctx.textBaseline = "bottom";
 							if (hiscore == 0) {
 								shadowtext(ctx, "NEW!", TEXTSIZELEVSCORE, "#ee44ee", 
-									BOARDX + x + GRIDSIZE/2,scorey);
+									LEVSEL_X + x + GRIDSIZE/2,scorey);
 							} else {
 								hiscore = addcommas(hiscore) + "pts";
 								shadowtext(ctx, hiscore, TEXTSIZELEVSCORE, scorecol, 
-									BOARDX + x + GRIDSIZE/2,scorey);
+									LEVSEL_X + x + GRIDSIZE/2,scorey);
 							}
 						}
 					}
@@ -2794,51 +3015,62 @@ var game = {
 					ctx.beginPath();
 					ctx.lineWidth = 3;
 					ctx.strokeStyle = gridcol;
-					gridgrad = this.context.createLinearGradient(x, y, BOARDX+x+GRIDSIZE, BOARDY+y+GRIDSIZE);
+					gridgrad = this.context.createLinearGradient(x, y, LEVSEL_X+x+GRIDSIZE, LEVSEL_Y+y+GRIDSIZE);
 					gridgrad.addColorStop(0, "#eeeeee");
-					gridgrad.addColorStop(1, "black");
+					gridgrad.addColorStop(1, gridblack);
 					ctx.fillStyle = gridgrad;
-					ctx.fillRect(BOARDX + x, BOARDY + y, GRIDSIZE-1, GRIDSIZE-1);
+					ctx.fillRect(LEVSEL_X + x, LEVSEL_Y + y, GRIDSIZE-1, GRIDSIZE-1);
 					ctx.stroke();
 
 					// cross it out
-					drawcross(ctx,BOARDX + x, BOARDY + y, BOARDX + x + GRIDSIZE-1, BOARDY + y + GRIDSIZE-1, gridcol, 3);
+					drawcross(ctx,LEVSEL_X + x, LEVSEL_Y + y, LEVSEL_X + x + GRIDSIZE-1, BOARDY + y + GRIDSIZE-1, crosscol, 3);
 				} 
 
 				// outline square
 				ctx.beginPath();
 				ctx.lineWidth = 3;
 				ctx.strokeStyle = gridcol;
-				ctx.rect(BOARDX + x, BOARDY + y, GRIDSIZE-1, GRIDSIZE-1);
+				ctx.rect(LEVSEL_X + x, LEVSEL_Y + y, GRIDSIZE-1, GRIDSIZE-1);
 				ctx.stroke();
 					
 				levnum++;
 			}
 		}
+		ctx.globalAlpha = 1.0;
 
 		buttongrad = this.context.createLinearGradient(0, 0, levsel_contx + levsel_contw, 0);
 		buttongrad.addColorStop(0, "#999999");
 		buttongrad.addColorStop(1, "black");
 
+		if (wipe.isactive()) {
+			var fullamt = SCREENH - levsel_conty;
+			buttonyoff = fullamt - ((wipe.count / wipe.max) * fullamt);
+		}
+
+		buttonyoff = wipe.getval(SCREENH - levsel_conty, "down", "up", 0);
+
+
 		ctx.beginPath();
 		ctx.fillStyle = buttongrad;
-		ctx.fillRect(levsel_contx, levsel_conty, levsel_contw, levsel_conth);
+		ctx.fillRect(levsel_contx, levsel_conty + buttonyoff, levsel_contw, levsel_conth);
 		ctx.stroke();
 		ctx.beginPath();
 		ctx.lineWidth = 3;
 		ctx.strokeStyle = gridcol;
-		ctx.rect(levsel_contx, levsel_conty, levsel_contw, levsel_conth);
+		ctx.rect(levsel_contx, levsel_conty + buttonyoff, levsel_contw, levsel_conth);
 		ctx.stroke();
 
 		ctx.textAlign = "center";
 		ctx.textBaseline = "middle";
-		shadowtext(ctx, "Back to title screen", BACKTOTITLESIZE, gridcol, 
-			levsel_contx + levsel_contw/2, levsel_conty + levsel_conth/2);
+		shadowtext(ctx, "Back to title screen", BACKTOTITLESIZE, buttontextcol, 
+			levsel_contx + levsel_contw/2, levsel_conty + levsel_conth/2 + buttonyoff);
 		
 	},
 
 	drawgrid : function() {
-		this.context.strokeStyle = "black";
+/*
+		this.context.strokeStyle = "red";
+		this.context.lineWidth = 2;
 		this.context.beginPath();
 		// draw grid
 		for (y = 0; y < GRIDH*GRIDSIZE; y += GRIDSIZE) {
@@ -2848,10 +3080,11 @@ var game = {
 		}
 
 		this.context.stroke();
+*/
 	},
 
 	drawpath : function() {
-		var ctx = this.context;
+		//var ctx = this.context;
 		var col;
 		var i;
 
@@ -2860,9 +3093,9 @@ var game = {
 		}
 
 		if (pathvalid) {
-			col = "green";
+			col = PATHLINECOLGOOD;
 		} else {
-			col = "red";
+			col = PATHLINECOLBAD;
 		}
 		ctx.strokeStyle = col;
 		ctx.lineWidth = LINEWIDTH;
@@ -2940,6 +3173,10 @@ var game = {
 			lastmy = adjusty;
 		}
 
+		if (wipe.isactive()) {
+			return;
+		}
+
 		if (game.state == "running") {
 			// ignore multi-touch
 			//if ((curpath != undefined) && curpath.length >= 1) return;
@@ -2967,24 +3204,29 @@ var game = {
 			if ((realx >= tapx) && (realx <= tapx + tapw) && 
 			   (realy >= tapy) && (realy <= tapy + taph)) {
 				game.clearlevelprogress(curlevel);
-				game.setstate("levselect");
+				
+				wipe.start("levselect", "out", 20);
+				//game.setstate("levselect");
 			}
 		} else if (game.state == "title") {
-			game.setstate("levselect");
-		} else if (game.state == "levselect") {
-
+			wipe.start("levselect", "out", 15);
+		} else if (game.state == "levselect")  {
 			// find where you clicked
 			if ((realx >= levsel_contx) && (realx <= levsel_contx + levsel_contw) &&
 			    (realy >= levsel_conty) && (realy <= levsel_conty + levsel_conth)) {
-				game.setstate("title");
+				/* TODO: this currently works on ios */
+				//game.setstate("title");
+				wipe.start("title", "out", 15);
 			} else { 
+				/* TODO: this DOESN'T works on ios */
 				var gridx,gridy,levsel;
 
 				gridx = Math.floor(adjustx / GRIDSIZE);
 				gridy = Math.floor(adjusty / GRIDSIZE);
+				//gridx = Math.floor((realx - BOARDX) / GRIDSIZE);
+				//gridy = Math.floor((realy - BOARDY) / GRIDSIZE);
 
 				levsel = (gridy*LEVSELGRIDW) + gridx + 1;
-				console.log("clicked level " + levsel);
 
 				if (game.levelexists(levsel) && !game.levellocked(levsel)) {
 					curlevel = levsel;
@@ -2994,7 +3236,7 @@ var game = {
 				}
 			}
 		} else if (game.state == "help") {
-			game.startlevel();
+			game.setstate("running");
 		} else if (game.state == "levelcomplete") {
 			if ((realx >= tapx) && (realx <= tapx + tapw) && 
 			   (realy >= tapy) && (realy <= tapy + taph)) {
@@ -3009,9 +3251,11 @@ var game = {
 
 	helporstartlev : function() {
 		if (hashelp(curlevel)) {
-			game.setstate("help");
+			wipe.start("help", "out", 15);
+			//game.setstate("help");
 		} else {
-			game.startlevel();
+			//game.startlevel();
+			wipe.start("running", "out", 15);
 		}
 	},
 
@@ -3045,13 +3289,18 @@ var game = {
 			tapx = 0;
 			tapy = BOARDY;
 		} else if (newstate == "running") {
+
+			this.initlevelvars();
+			this.populategrid();
+
 			// get a new cat picture for if we win
 			if (winimg != undefined) delete winimg;
 			winimg = new Image();
 			var n = rnd(MAXWINIMAGES);
 			winimg.src = "images/win" + n + ".png";
 			this.winimgsize = 0.1;
-			//console.log("winimage is " + winimg.src);
+
+			wipe.start("", "in", 50);
 		} else if (newstate == "levselect") {
 			// reset grid size
 			GRIDSIZE = DEF_GRIDSIZE;
@@ -3061,6 +3310,12 @@ var game = {
 
 			// count player stars
 			playerdata.settotstars(game.countplayerstars());
+
+			// start fade in
+			wipe.start("", "in", 15);
+		} else if (newstate == "title") {
+			// start fade in
+			wipe.start("", "in", 15);
 		}
 
 		this.state = newstate;
@@ -3285,12 +3540,41 @@ function isonscreen(x,y) {
 }
 
 function gettextw(ctx, text, size) {
-	ctx.font = size + "pt Futura";
+	ctx.font = size + "pt " + FONT;
 	return ctx.measureText(text).width + 2; // add space for shadow
 }
 
+//     extra args are gradient
 function shadowtext(ctx, text, size, col, x, y) {
-	ctx.font = size + "pt Futura";
+	var i,textcol,gradidx = 0;
+
+	if (arguments.length > 6) {
+		var y1,y2,adjsize,gradinc;
+
+		adjsize = size*2;
+		if (game.context.textBaseline == "top") {
+			y1 = y;
+			y2 = y + adjsize;
+		} else {
+			y1 = y - adjsize/2;
+			y2 = y + adjsize/2;
+		}
+		textcol = game.context.createLinearGradient(0, y1, 0, y2);
+
+		gradinc = 1.0 / (arguments.length - 6-1);
+
+		for (i = 6 ; i < arguments.length; i ++) {
+			textcol.addColorStop(gradidx, arguments[i]);
+
+			gradidx += gradinc;
+		}
+
+	} else {
+		textcol = col;
+	}
+
+	ctx.font = size + "pt " + FONT;
+//console.log("shadowtest() - font: " + ctx.font + " text:  " + text);
 	// shadows
 	ctx.fillStyle = "black";
 	ctx.fillText(text, x-1, y-1); 
@@ -3298,7 +3582,7 @@ function shadowtext(ctx, text, size, col, x, y) {
 	ctx.fillText(text, x+1, y+1); 
 	ctx.fillText(text, x-1, y+1); 
 	// real text
-	ctx.fillStyle = col;
+	ctx.fillStyle = textcol;
 	ctx.fillText(text, x, y); 
 }
 
@@ -3346,6 +3630,11 @@ function getrandomtype() {
 	for (i = 0; i < thinglist.length; i++) {
 		maxroll += thinglist[i].pct;
 		//console.log(thinglist[i].type + ":  " + thinglist[i].pct + " [" + maxroll + "]");
+
+	}
+
+	for (i = 0; i < thinglist.length; i++) {
+		console.log(thinglist[i].type + ":  " + ((thinglist[i].pct / maxroll)*100) + "% [roll " + maxroll + "/" + maxroll + "]");
 	}
 
 	roll = rnd(maxroll);
@@ -3622,7 +3911,7 @@ function thing(gridx, gridy, type, text) {
 		var inpath = false;
 		var howbig,myx,myy;
 
-		ctx = game.context;
+		//ctx = game.context;
 
 		// check whether I'm in the drawn path
 		if (pathcontains(this)) {
@@ -3630,7 +3919,9 @@ function thing(gridx, gridy, type, text) {
 		}
 
 		// set opacity
-		ctx.globalAlpha = this.opacity;
+		if (!wipe.isactive()) {
+			ctx.globalAlpha = this.opacity;
+		}
 
 		// draw myself
 		if (this.type == "text") {
@@ -3674,6 +3965,15 @@ function thing(gridx, gridy, type, text) {
 				myy -= (growpct/2/100) * this.size;
 			}
 
+			/* hilight non-snapped things 
+			var snapto = Math.floor((this.gridy * GRIDSIZE) + (GRIDSIZE/2) - (howbig/2));
+			if (myy != snapto) {
+				console.log("not aligned");
+				ctx.fillStyle = "green";
+				ctx.fillRect(BOARDX + myx, BOARDY + myy, howbig, howbig);
+			}
+			*/
+
 			ctx.drawImage(myimage, BOARDX + myx, BOARDY + myy, howbig, howbig);
 		}
 
@@ -3719,7 +4019,9 @@ function thing(gridx, gridy, type, text) {
 		*/
 
 		// back to full opacity
-		ctx.globalAlpha = 1.0;
+		if (!wipe.isactive()) {
+			ctx.globalAlpha = 1.0;
+		}
 
 		/*
 		// path outline
@@ -3748,14 +4050,22 @@ function thing(gridx, gridy, type, text) {
 
 	// return TRUE if we did something
 	this.snaptogrid = function() {
-		var snapto = Math.floor(this.gridy * GRIDSIZE + (GRIDSIZE/2) - (THINGSIZE/2));
+		var moved = false;
+		var snaptox = Math.floor(this.gridx * GRIDSIZE + (GRIDSIZE/2) - (this.size/2));
+		var snaptoy = Math.floor(this.gridy * GRIDSIZE + (GRIDSIZE/2) - (this.size/2));
 		//var snapto = (GRIDSIZE + (GRIDSIZE/2) - (THINGSIZE/2);
 		//if (this.y % (GRIDSIZE + (GRIDSIZE/2) - (THINGSIZE/2)) != 0) {
-		if (this.y % snapto != 0) {
-			this.y = snapto;
-			return true;
+		//if (this.y % snapto != 0) {
+		if (this.y != snaptoy) {
+			this.y = snaptoy;
+			var moved = true;
 		}
-		return false;
+		if (this.x != snaptox) {
+			this.x = snaptox;
+			var moved = true;
+		}
+
+		return moved;
 	}
 
 	this.getstoppedbelowthing = function() {
@@ -4037,13 +4347,18 @@ function mainloop() {
 	var x, height, gap, minHeight, maxHeight, minGap, maxGap;
 	var i;
 
+	
 	requestAnimFrame(mainloop);
 
 	game.frameNo += 1;
+	if (wipe.isactive()) {
+		wipe.tick();
+	}
 
 	if (game.state == "title") {
 		game.clear();
 		game.drawtitle();
+			///game.setstate("levselect");
 	} else if (game.state == "help") {
 		game.clear();
 		game.drawhelp();
@@ -4051,11 +4366,15 @@ function mainloop() {
 		game.clear();
 		game.drawlevselect();
 	} else if ((game.state == "running") || (game.state == "gameover") || (game.state == "levelcomplete")) {
+		var gridalpha = 1.0;
 		// move objects
 		for (i = 0; i < things.length; i += 1) {
 			things[i].move();
 		}
-		if (game.dirty) {
+
+		gridalpha = wipe.getval(1.0, "up", "down", 1.0);
+		ctx.globalAlpha = gridalpha;
+		if (game.dirty || wipe.isactive()) {
 			// clear
 			game.clear();
 			// draw grid
@@ -4087,6 +4406,7 @@ function mainloop() {
 			// draw dragged arrow
 			game.drawpath();
 		}
+		ctx.globalAlpha = 1.0;
 		game.dirty = false;
 
 		if (game.state == "levelcomplete") {
@@ -4177,11 +4497,6 @@ function anyvalidmoves() {
 	return gotmoves;
 }
 
-function everyinterval(n) {
-	if ((game.frameNo / n) % 1 == 0) {return true;}
-	return false;
-}
-
 //<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
 </script>
 <br>
diff --git a/images/catwalkl.png b/images/catwalkl.png
new file mode 100644
index 0000000..01226b2
Binary files /dev/null and b/images/catwalkl.png differ
diff --git a/images/catwalkr.png b/images/catwalkr.png
new file mode 100644
index 0000000..53c3c82
Binary files /dev/null and b/images/catwalkr.png differ
diff --git a/todo b/todo
index 7ddea9c..bbe8d46 100644
--- a/todo
+++ b/todo
@@ -30,18 +30,41 @@ phone fixes as per http://www.html5rocks.com/en/mobile/touch/
 
 https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
 
-allow specifying gridw instead of gridsize
+*fix tap coords to work on an iphone.
+*change font
+*wipes between game states 
+*make levels specify gridw instead of gridsize
+*make levels default to gridsize of previous one
+*bug - things not x snapped to grid sometimes?!
+*animated bg on title screen
 
-make levels default to gridsize of previous one
+----------
 
-implement grid sizes for later levels
+fireworks when you achieve a goal
+
+turn limit.
+	... then get rid of 'form x parades' goal, just have 'clear x cats'
+	... then get rid of 'survive x turns'
+	ticks down on l/r of board.
+
+
+show total points on path ??
+
+
+---------------
+when a parade is going in to a door, they seem to disappear at the wrong place
+	... try slowing them down
+thing added at top with x = -1 !!!!
+
+---------------
+
+goats and llamas seem too common
+	make randomtype function show a pct chance.....
+
+implement grid sizes for later levels - increases every 5 levels
 
 turn limits for later levels?
 
-getting cats with x not aligned to gridx!
-
-finishing a level with no stars should be gameover ???
-
 wipes between screens
 
 -- some kind of cat that doesn't fall?
