function main() {
	this.indexLoad = indexLoad;
	this.toWork    = toWork;
	this.toPlay    = toPlay;
	
	var workArray = new Array();
	var playArray = new Array();

$(".about").hover(function() {
				$(".about").css({"color":"#5f8baa"});
				$(this).css('cursor','pointer');
				arrowAnim("#arrowBlue1","#arrowBlue2","#arrowBlue3");
				$("#arrowPink1").stop(true,true);
				$("#arrowPink2").stop(true,true);
				$("#arrowPink3").stop(true,true);
				$(".arrowPink").fadeOut("slow");
				$("#arrowGreen1").stop(true,true);
				$("#arrowGreen2").stop(true,true);
				$("#arrowGreen3").stop(true,true);
				$(".arrowGreen").fadeOut("slow");
				$("#arrowYellow1").stop(true,true);
				$("#arrowYellow2").stop(true,true);
				$("#arrowYellow3").stop(true,true);
				$(".arrowYellow").fadeOut("slow");
			}, 
			function() {
				$(".about").css({"color":"#3b3b3b"});
				$(this).css('cursor','auto');
				$("#arrowBlue1").stop(true,true);
				$("#arrowBlue2").stop(true,true);
				$("#arrowBlue3").stop(true,true);
				$(".arrowBlue").fadeOut("slow");
});

$(".about").click(function() {
	$(".contet").fadeTo("slow",0);
	$(".content").html("<h2 class=blue>About me</h2><p style='clear:both;margin-top:10px;'>I am a designer and developer currently based in Boston, Massachusetts. I love variety and challenge so I especially enjoy projects that allow me to dip into both the design and the development processes.</p><p>My main area of interest is technology for learning. I have worked in educational software development for many years and I hold an Ed.M. in Technology, Innovation, and Education from Harvard Graduate School of Education. Since completing my Ed.M. I have provided design, programming, and content development services for several grant-funded university research projects and an education-focused non-profit. In the fall I will be beginning a PhD in Human Computer Interaction at University of Washington's Information School, where I hope to explore new interface technologies and their potential uses in education and learning in general.</p><p>When I'm not on the computer I can mostly be found <a href='http://freestylecraft.tumblr.com' target='_blank'>engaging in crafty endeavors like knitting or sewing</a>.</p><h3 class=blue>Software and languages</h3><ul><li><b>Software:</b>  Adobe Creative Suite, including Flash, Dreamweaver, Photoshop, Illustrator, InDesign, and Director;  Xcode;  Final Cut Pro; Adobe Director</li><li><b>Languages:</b>  Actionscript 2 & 3, Javascript, HTML, CSS, jQuery, JSON, PHP, MYSQL, XML, Objective C (for iPhone/iPad), and some Java.</li></ul><h3 class=blue>Contact me</h3><p style='margin-top:10px;'>Send me an email: <a href='mailto:abi@abievans.com'>abi@abievans.com</a></p>");
	shrinkBars();
	$(".content").fadeTo("slow",1,function(){
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});

});

$(".work").hover(function() {
				$(".work").css({"color":"#ed97b0"});
				$(this).css('cursor','pointer');
				arrowAnim("#arrowPink1","#arrowPink2","#arrowPink3");
				$("#arrowBlue1").stop(true,true);
				$("#arrowBlue2").stop(true,true);
				$("#arrowBlue3").stop(true,true);
				$(".arrowBlue").fadeOut("slow");
				$("#arrowGreen1").stop(true,true);
				$("#arrowGreen2").stop(true,true);
				$("#arrowGreen3").stop(true,true);
				$(".arrowGreen").fadeOut("slow");
				$("#arrowYellow1").stop(true,true);
				$("#arrowYellow2").stop(true,true);
				$("#arrowYellow3").stop(true,true);
				$(".arrowYellow").fadeOut("slow");
			}, 
			function() {
				$(".work").css({"color":"#3b3b3b"});
				$(this).css('cursor','auto');
				$("#arrowPink1").stop(true,true);
				$("#arrowPink2").stop(true,true);
				$("#arrowPink3").stop(true,true);
				$(".arrowPink").fadeOut("slow");
});

$(".work").click(function() {
	$(".content").fadeTo("fast",0.1, function() {
	$(".content").html("<h2 class=blue>Work</h2><div class=bigPic></div><div class=thumbnails></div>");
	shrinkBars();
	$(".bigPic").html("<img id=mainPic src='images/work/" + workArray[0][0] + ".jpg'/><div class=description><h3 class=blue style='margin-top:15px;'>" + workArray[0][1] + "</h3><i>" + workArray[0][2] + "</i><br/>" + workArray[0][3] + "</div>");
	var numThms = workArray.length;
	var numScreens = Math.ceil(numThms/12);
	var currentScreen = "screen1";
	var currentImg = "index0";
	$(".thumbnails").html(createScreenWork(numScreens));
	for (var i = numScreens; i > 0; i--) {
		$(".thumbnails").append("<div class='screenNum activeScr' id=screen" + i + ">" + i + "</div>");
	}
	for (var u = 2; u <= numScreens; u++) {
		$("#table" + u).hide();
	}
	$("#screen1").removeClass("activeScr");
	$("#screen1").addClass("inactiveScr");
	$(".inactiveScr").css({"border":"solid #ed97b0 3px"});
	$(".inactive").css({"border":"solid #ed97b0 3px"});
	
	$("#mainPic").load(function(){
					$(".content").fadeTo("slow",1,function(){
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
				});
	
	
	$(".thm").click(function(event) {
				
			if ($(".inactive").attr("id") != $(event.target).attr("id")) {
				
				$(".bigPic").fadeTo("fast", 0.01, function(){
				$(".inactive").css({"border":"double #bdbbb9 3px"});
				$(".inactive").addClass("active");
				$(".inactive").removeClass("inactive");
				$("#" + $(event.target).attr("id")).addClass("inactive");
				$(".inactive").removeClass("active");
				$(".inactive").css({"border":"solid #ed97b0 3px"});
				currentImg = $(event.target).attr("id");
				var newPic = currentImg.replace("index", "");
				var path = "images/work/" + workArray[newPic][0] + ".jpg";
				$("#mainPic").attr("src", path);
				$(".description").html("<div class=description><h3 class=blue style='margin-top:15px;'>" + workArray[newPic][1] + "</h3><i>" + workArray[newPic][2] + "</i><br/>" + workArray[newPic][3] + "</div>");
				$("#mainPic").load(function(){
					$(".bigPic").fadeTo("fast", 1);
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
			});
			}
		});
	
	$(".thm").hover(function() {
				if ($(event.target).hasClass("active")) {
					$(event.target).css({"border":"solid #3b3b3b 3px"});
					$(this).css('cursor','pointer');
				}
			},
			function() {
				if ($(event.target).hasClass("active")) {
					$(event.target).css({"border":"double #bdbbb9 3px"});
					$(this).css('cursor','auto');
				}
			});
	$(".screenNum").hover(function() {
				if ($(event.target).hasClass("activeScr")) {
					$(event.target).css({"border":"solid #3b3b3b 3px"});
					$(this).css('cursor','pointer');
				}
			},
			function() {
				if ($(event.target).hasClass("activeScr")) {
					$(event.target).css({"border":"double #bdbbb9 3px"});
					$(this).css('cursor','auto');
				}
			});
	$(".screenNum").click(function(event) {
			var screenN = $(event.target).attr("id").replace("screen","");
			if ($(".inactiveScr").attr("id") != "screen" + screenN) {
				$(".bigPic").hide();
				for (var i = numScreens; i > 0; i--) {
					if (screenN == i) {
						$("#table" + i).show();
					} else {
						$("#table" + i).hide();
					}
				}
				
				$(".inactiveScr").css({"border":"double #bdbbb9 3px"});
				$(".inactiveScr").addClass("activeScr");
				$(".inactiveScr").removeClass("inactiveScr");
				$("#" + $(event.target).attr("id")).addClass("inactiveScr");
				$(".inactiveScr").removeClass("activeScr");
				$(".inactiveScr").css({"border":"solid #ed97b0 3px"});
				
				var path = "images/work/" + workArray[screenN * 12 - 12][0] + ".jpg";
				$("#mainPic").attr("src", path);
				$(".description").html("<div class=description><h3 class=blue style='margin-top:15px;'>" + workArray[screenN * 12 - 12][1] + "</h3><i>" + workArray[screenN * 12 - 12][2] + "</i><br/>" + workArray[screenN * 12 - 12][3] + "</div>");
				$("#mainPic").load(function(){
					$(".bigPic").fadeTo("fast", 1);
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
			}	
			
		});
	});
});

$(".play").hover(function() {
				$(".play").css({"color":"#689e75"});
				$(this).css('cursor','pointer');
				arrowAnim("#arrowGreen1","#arrowGreen2","#arrowGreen3");
				$("#arrowBlue1").stop(true,true);
				$("#arrowBlue2").stop(true,true);
				$("#arrowBlue3").stop(true,true);
				$(".arrowBlue").fadeOut("slow");
				$("#arrowPink1").stop(true,true);
				$("#arrowPink2").stop(true,true);
				$("#arrowPink3").stop(true,true);
				$(".arrowPink").fadeOut("slow");
				$("#arrowYellow1").stop(true,true);
				$("#arrowYellow2").stop(true,true);
				$("#arrowYellow3").stop(true,true);
				$(".arrowYellow").fadeOut("slow");
			}, 
			function() {
				$(".play").css({"color":"#3b3b3b"});
				$(this).css('cursor','auto');
				$("#arrowGreen1").stop(true,true);
				$("#arrowGreen2").stop(true,true);
				$("#arrowGreen3").stop(true,true);
				$(".arrowGreen").fadeOut("slow");
});

$(".play").click(function() {
	$(".content").fadeTo("fast",0.1, function() {
	$(".content").html("<h2 class=blue>Play</h2><div class=bigPic></div><div class=thumbnails></div>");
	shrinkBars();
	$(".bigPic").html("<img id=mainPic src='images/play/" + playArray[0][0] + ".jpg'/><div class=description><h3 class=blue style='margin-top:15px;'>" + playArray[0][1] + "</h3><i>" + playArray[0][2] + "</i><br/>" + playArray[0][3] + "</div>");
	var numThms = playArray.length;
	var numScreens = Math.ceil(numThms/12);
	var currentScreen = "screen1";
	var currentImg = "index0";
	$(".thumbnails").html(createScreenPlay(numScreens));
	for (var i = numScreens; i > 0; i--) {
		$(".thumbnails").append("<div class='screenNum activeScr' id=screen" + i + ">" + i + "</div>");
	}
	for (var u = 2; u <= numScreens; u++) {
		$("#table" + u).hide();
	}
	$("#screen1").removeClass("activeScr");
	$("#screen1").addClass("inactiveScr");
	$(".inactiveScr").css({"border":"solid #689e75 3px"});
	$(".inactive").css({"border":"solid #689e75 3px"});

	$("#mainPic").load(function(){
					$(".content").fadeTo("slow",1,function(){
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
				});
	
	
	$(".thm").click(function(event) {
				
			if ($(".inactive").attr("id") != $(event.target).attr("id")) {
				
				$(".bigPic").fadeTo("fast", 0.01, function(){
				$(".inactive").css({"border":"double #bdbbb9 3px"});
				$(".inactive").addClass("active");
				$(".inactive").removeClass("inactive");
				$("#" + $(event.target).attr("id")).addClass("inactive");
				$(".inactive").removeClass("active");
				$(".inactive").css({"border":"solid #689e75 3px"});
				currentImg = $(event.target).attr("id");
				var newPic = currentImg.replace("index", "");
				var path = "images/play/" + playArray[newPic][0] + ".jpg";
				$("#mainPic").attr("src", path);
				$(".description").html("<div class=description><h3 class=blue style='margin-top:15px;'>" + playArray[newPic][1] + "</h3><i>" + playArray[newPic][2] + "</i><br/>" + playArray[newPic][3] + "</div>");
				$("#mainPic").load(function(){
					$(".bigPic").fadeTo("fast", 1);
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
			});
			}
		});
	
	$(".thm").hover(function() {
				if ($(event.target).hasClass("active")) {
					$(event.target).css({"border":"solid #3b3b3b 3px"});
					$(this).css('cursor','pointer');
				}
			},
			function() {
				if ($(event.target).hasClass("active")) {
					$(event.target).css({"border":"double #bdbbb9 3px"});
					$(this).css('cursor','auto');
				}
			});
	$(".screenNum").hover(function() {
				if ($(event.target).hasClass("activeScr")) {
					$(event.target).css({"border":"solid #3b3b3b 3px"});
					$(this).css('cursor','pointer');
				}
			},
			function() {
				if ($(event.target).hasClass("activeScr")) {
					$(event.target).css({"border":"double #bdbbb9 3px"});
					$(this).css('cursor','auto');
				}
			});
	$(".screenNum").click(function(event) {
			var screenN = $(event.target).attr("id").replace("screen","");
			if ($(".inactiveScr").attr("id") != "screen" + screenN) {
				$(".bigPic").hide();
				for (var i = numScreens; i > 0; i--) {
					if (screenN == i) {
						$("#table" + i).show();
					} else {
						$("#table" + i).hide();
					}
				}
				
				$(".inactiveScr").css({"border":"double #bdbbb9 3px"});
				$(".inactiveScr").addClass("activeScr");
				$(".inactiveScr").removeClass("inactiveScr");
				$("#" + $(event.target).attr("id")).addClass("inactiveScr");
				$(".inactiveScr").removeClass("activeScr");
				$(".inactiveScr").css({"border":"solid #689e75 3px"});
				
				var path = "images/play/" + playArray[screenN * 12 - 12][0] + ".jpg";
				$("#mainPic").attr("src", path);
				$(".description").html("<div class=description><h3 class=blue style='margin-top:15px;'>" + playArray[screenN * 12 - 12][1] + "</h3><i>" + playArray[screenN * 12 - 12][2] + "</i><br/>" + playArray[screenN * 12 - 12][3] + "</div>");
				$("#mainPic").load(function(){
					$(".bigPic").fadeTo("fast", 1);
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
			}	
			
		});
	});
});

$(".resume").hover(function() {
				$(".resume").css({"color":"#f7aa3b"});
				$(this).css('cursor','pointer');
				arrowAnim("#arrowYellow1","#arrowYellow2","#arrowYellow3");
				$("#arrowBlue1").stop(true,true);
				$("#arrowBlue2").stop(true,true);
				$("#arrowBlue3").stop(true,true);
				$(".arrowBlue").fadeOut("slow");
				$("#arrowPink1").stop(true,true);
				$("#arrowPink2").stop(true,true);
				$("#arrowPink3").stop(true,true);
				$(".arrowPink").fadeOut("slow");
				$("#arrowGreen1").stop(true,true);
				$("#arrowGreen2").stop(true,true);
				$("#arrowGreen3").stop(true,true);
				$(".arrowGreen").fadeOut("slow");
			}, 
			function() {
				$(".resume").css({"color":"#3b3b3b"});
				$(this).css('cursor','auto');
				$("#arrowYellow1").stop(true,true);
				$("#arrowYellow2").stop(true,true);
				$("#arrowYellow3").stop(true,true);
				$(".arrowYellow").fadeOut("slow");
});

$(".resume").click(function() {
	$(".contet").fadeTo("fast",0);
	$(".content").html("<h2>Resume</h2><h2 class=red>Professional Experience</h2><hr/><h3 class=blue style='margin-top:15px;'>Freelance Flash Development and Web Design</h3><p class=res>Highlights include: development of a Flash data collection tool for Harvard Graduate School of Education's Virtual Performance Assessments project; development of Java voice recording software to be used at Harvard Graduate School of Education as a data collection tool; and development of a prototype videogame for civic and moral education.</p><h3 class=blue style='margin-top:15px;'>Designer and Developer - Digital Visit, Cambridge, MA</h3><p class=res><i>Sep 2009 - May 2010</i><br/>User experience design, including iPhone/iPad applications, Flash-based mock-ups and jQuery/JavaScript prototypes.</p><h3 class=blue style='margin-top:15px;'>Graphic Designer - jsherman studio, Brookline, MA</h3><p class=res><i>June 2009 - July 2010</i><br/>Print and web design for a range of clients from small businesses to large non-profit organizations. All designs created using Adobe Creative Suite 4, especially InDesign, Illustrator, and Photoshop.</p><h3 class=blue style='margin-top:15px;'>Presidential Instructional Technology Fellow - Harvard University</h3><p class=res><i>Summer 2009</i><br/>Created Flash applications for two Harvard undergraduate courses - a vocabulary application for Modern Hebrew, and tools to allow art history students to interact with some of the course's visual materials. Also edited a video trailer for a course.</p><h3 class=blue style='margin-top:15px;'>Flash Developer - EcoMUVE, Harvard Graduate School of Education</h3><p class=res><i>Sep 2008 - May 2009</i><br/>EcoMUVE is an NSF-funded science education research project utilizing multi-user virtual environments. I created Flash applications (e.g. virtual microscope) as part of the design/prototyping process, built and maintained the project website using HTML, CSS, Javascript, and PHP, and participated in brainstorming around curriculum content and format of the MUVE.</p><h3 class=blue style='margin-top:15px;'>Interactive Curriculum Developer - LJ Create, Norwich, UK</h3><p class=res><i>Aug 2006 - Aug 2008</i><br/>LJ Create produces multimedia science learning materials for middle school and high school. I created interactive Flash applications and graphic content, researched and wrote presentations, experiments and assessment activities to meet US national and state specifications for science education, and reviewed and updated the company's older products.</p><h3 class=blue style='margin-top:15px;'>Research Assistant - The Forum Trust, Norwich, UK</h3><p class=res><i>Sept 2003 - July 2004</i><br/>Assisted with research and implementation on a number of educational technology projects for use in local schools.</p><h3 class=blue style='margin-top:15px;'>Project Coordinator - Age Concern Norfolk, Norwich, UK</h3><p class=res><i>Aug 2003 - May 2004</i><br/>Undertook a fixed term project researching and identifying ways to improve lifelong learning opportunities for older people in Norfolk. Also coordinated a second project providing grants for internet PCs and training to care homes.</p><h3 class=blue style='margin-top:15px;'>Design Assistant - Educational Technology Centre, Bowdoin College</h3><p class=res><i>Sept 2000 - May 2003</i><br/>Designed and created multimedia resources for use in educational settings; used HTML and a wide range of design packages to create multimedia resources and contribute to the development of websites; learned a number of software packages (Photoshop, Illustrator, Flash, Dreamweaver, Final Cut Pro, Avid Xpress) independently then trained colleagues.</p><h2 class=red>Education</h2><hr/><p class=res>2008 - 2009: Ed.M. Technology, Innovation, and Education, Harvard Graduate School of Education<br/>1999 - 2003: AB - English major with minor in Computer Science Bowdoin College, ME</p><h2 class=red>Other Activities</h2><hr/><h3 class=blue style='margin-top:15px;'>Volunteer Mentor - Computer Clubhouse, Museum of Science, Boston, MA</h3><p class=res><i>Jan 2009 - April 2010</i><br/>The Computer Clubhouse is an after school center where children aged 10 - 18 can learn and develop their skills using creative technology. Mentors assist members with their personal projects as needed.</p>");
	
	shrinkBars();
	$(".content").fadeTo("slow",1,function(){
					var newH = $(".content").offset().top + $(".content").height() + 75;
					$(".main").css({"height":newH});
					$(".footer").css({"top":newH});
					});
});

function arrowAnim(id1,id2,id3) {
	$(id1).fadeTo('fast',1).delay(50).fadeTo('fast',0.5,function () {
		$(id2).fadeTo('fast',1).delay(50).fadeTo('fast',0.5,function () {
			$(id3).fadeTo('fast',1).delay(50).fadeTo('fast',0.5,function () {	
				repeatAnim(id1,id2,id3);
			});													
		});														
	});
}

function repeatAnim(id1,id2,id3) {
	arrowAnim(id1,id2,id3)	
}

function shrinkBars() {
	$(".about").animate({"width":"200px","left":"800px"},400);
	$(".aboutBar").animate({"width":"200px"},400);
	$(".work").animate({"width":"200px","left":"800px"},400);
	$(".workBar").animate({"width":"200px"},400);
	$(".play").animate({"width":"200px","left":"800px"},400);
	$(".playBar").animate({"width":"200px"},400);
	$(".resume").animate({"width":"200px","left":"800px"},400);
	$(".resumeBar").animate({"width":"200px"},400);
	$("#arrowBlue1").stop(true,true);
	$("#arrowBlue2").stop(true,true);
	$("#arrowBlue3").stop(true,true);
	$(".arrowBlue").fadeOut("slow");
	$("#arrowPink1").stop(true,true);
	$("#arrowPink2").stop(true,true);
	$("#arrowPink3").stop(true,true);
	$(".arrowPink").fadeOut("slow");
	$("#arrowGreen1").stop(true,true);
	$("#arrowGreen2").stop(true,true);
	$("#arrowGreen3").stop(true,true);
	$(".arrowGreen").fadeOut("slow");
	$("#arrowYellow1").stop(true,true);
	$("#arrowYellow2").stop(true,true);
	$("#arrowYellow3").stop(true,true);
	$(".arrowYellow").fadeOut("slow");
}

function indexLoad() {
		$(".arrowBlue").hide();
		$(".arrowPink").hide();
		$(".arrowGreen").hide();
		$(".arrowYellow").hide();
		$(".content").hide();
	}
	
function toWork(message) {
	var messageArray = new Array();
	messageArray = message.split("&");
	var ct = 0;
	for (var i = 1; i < (messageArray.length - 5); i++) {
		workArray[ct] = new Array(5);
		workArray[ct][0] = messageArray[i];
		workArray[ct][1] = messageArray[i+1];
		workArray[ct][2] = messageArray[i+2];
		workArray[ct][3] = messageArray[i+3];
		workArray[ct][4] = messageArray[i+4];
		i+=4;
		ct++;
	}
}

function toPlay(message) {
	var messageArray = new Array();
	messageArray = message.split("&");
	var ct = 0;
	for (var i = 1; i < (messageArray.length - 5); i++) {
		playArray[ct] = new Array(5);
		playArray[ct][0] = messageArray[i];
		playArray[ct][1] = messageArray[i+1];
		playArray[ct][2] = messageArray[i+2];
		playArray[ct][3] = messageArray[i+3];
		playArray[ct][4] = messageArray[i+4];
		i+=4;
		ct++;
	}
}

function createScreenWork(numScreens) {
	var printString = "";
	for (var screenNum = 1; screenNum <= numScreens; screenNum++) {
	//Total number of thm spaces for this screen plus previous screens
	var possThmsOnScreen = 12 * screenNum;
	//Index of first thm
	var startThm = possThmsOnScreen - 12;
	//Index of last thm, assuming all spaces are used
	var endThm = possThmsOnScreen - 1;
	//If all spaces are not needed...
	if (workArray.length < possThmsOnScreen) {
		endThm = workArray.length - 1;
	}
	printString += "<table id=table" + screenNum + " width=290px cellspacing=0px cellpadding=0px border=0>";
	//create each cell
	var cellCt = 1;
	for (var i = startThm; i < possThmsOnScreen; i++) {
		//first cell in row
		if (cellCt == 1) {
			if (i == startThm) {
				printString += "<tr><td><img src='" + workArray[i][4] + "' class='thm inactive' id=index"+i+" /></td>";
			} else {
				if (i <= endThm) {
					printString += "<tr><td><img src='" + workArray[i][4] + "' class='thm active' id=index"+i+" /></td>";
				} else {
					printString += "<tr><td><div class=placeholder></div></td>";
				}
			}
		}
		//second cell in row
		else if (cellCt == 2) {
			if (i <= endThm) {
				printString += "<td><img src='" + workArray[i][4] + "' class='thm active' id=index"+i+" /></td>";
			} else {
				printString += "<td><div class=placeholder></div></td>"
			}
		}
		//third cell in row
		else {
			if (i <= endThm) {
				printString += "<td><img src='" + workArray[i][4] + "' class='thm active' id=index"+i+" /></td></tr>";
			} else {
				printString += "<td><div class=placeholder></div></td></tr>";
			}
			cellCt = 0;
		}
		cellCt++;
	}
	printString += "</table>";
	}
	return (printString);
}

function createScreenPlay(numScreens) {
	var printString = "";
	for (var screenNum = 1; screenNum <= numScreens; screenNum++) {
	//Total number of thm spaces for this screen plus previous screens
	var possThmsOnScreen = 12 * screenNum;
	//Index of first thm
	var startThm = possThmsOnScreen - 12;
	//Index of last thm, assuming all spaces are used
	var endThm = possThmsOnScreen - 1;
	//If all spaces are not needed...
	if (playArray.length < possThmsOnScreen) {
		endThm = playArray.length - 1;
	}
	printString += "<table id=table" + screenNum + " width=290px cellspacing=0px cellpadding=0px border=0>";
	//create each cell
	var cellCt = 1;
	for (var i = startThm; i < possThmsOnScreen; i++) {
		//first cell in row
		if (cellCt == 1) {
			if (i == startThm) {
				printString += "<tr><td><img src='" + playArray[i][4] + "' class='thm inactive' id=index"+i+" /></td>";
			} else {
				if (i <= endThm) {
					printString += "<tr><td><img src='" + playArray[i][4] + "' class='thm active' id=index"+i+" /></td>";
				} else {
					printString += "<tr><td><div class=placeholder></div></td>";
				}
			}
		}
		//second cell in row
		else if (cellCt == 2) {
			if (i <= endThm) {
				printString += "<td><img src='" + playArray[i][4] + "' class='thm active' id=index"+i+" /></td>";
			} else {
				printString += "<td><div class=placeholder></div></td>"
			}
		}
		//third cell in row
		else {
			if (i <= endThm) {
				printString += "<td><img src='" + playArray[i][4] + "' class='thm active' id=index"+i+" /></td></tr>";
			} else {
				printString += "<td><div class=placeholder></div></td></tr>";
			}
			cellCt = 0;
		}
		cellCt++;
	}
	printString += "</table>";
	}
	return (printString);
}

}