var startsize = 80;
var size = 200;
var secstep = 1;
var pxstep = 5;
var counter = 0;
var html5 = false;

function startup(){	
	var la = window.location.href.split("/");
	if(!la[3]){	
		preloadTiles();	
		setTimeout("addTiles('');", 500);
	}
	
	// Detect HTML5
	var elem = document.createElement('canvas'); 
	html5 = !!(elem.getContext && elem.getContext('2d'));

	welcome();
}

function preloadTiles(){
	for(l=0; l<m.length; l++){
		var limg = new Image();
		limg.src = "_site_files/tile_"+m[l].img+".png";
	}
}

function addTiles(filter){	
	var ta = document.getElementById("maincontent");
	ta.innerHTML = "";
	for(l=0; l<m.length; l++){
		if(m[l].tags.indexOf(filter) != -1){
			var re = "<div class='tile' id='tilediv"+m[l].img+"'";
			re += "onmouseover='tilehover(\""+l+"\");' ";
			re += "onclick='tileclick(\""+l+"\");' >";
			
			if(html5){
				re += "<canvas class='tile' id='tilecanvas"+m[l].img+"' ";
				re += "width='"+size+"' height='"+size+"' >";
			}
			
			re += "<img src='_site_files/tile_"+m[l].img+".png'>";
			
			if(html5){
				re += "</canvas>";
			}
			
			re += "</div>";
			ta.innerHTML += re;
			
			setTimeout("zoomin("+l+", startsize);", (l*20));
		}
	}	
}

function drawStaticTile(tid){
	var tt = document.getElementById("tilediv"+m[tid].img);
	tt.innerHTML = "<img src='_site_files/tile_"+m[tid].img+".png'>";
}

function zoomin(tid, lvl){
	var ctx = document.getElementById("tilecanvas"+m[tid].img).getContext("2d");
	var thisimg = new Image();
	thisimg.src = "_site_files/tile_"+m[tid].img+".png";
	ctx.clearRect(0,0,size,size);
	if(lvl<size){		
		var pos = (size-lvl)/2;
		ctx.globalAlpha = lvl/size;
		try{ ctx.drawImage(thisimg, pos, pos, lvl, lvl); } catch(err) {}
		setTimeout("zoomin("+tid+","+(lvl+pxstep)+");", secstep);
	} else {
		drawStaticTile(tid);
	}
}

function zoomout(tid, lvl){}

function tilehover(tid){	
	var co = "<table cellpadding=0 cellspacing=0><tr>";
	co += "<td rowspan='3'><img src='_site_files/tile_"+m[tid].img+".png'></td>";
	co += "<td><h1>"+m[tid].title + "</h1></td></tr>";
	co += "<tr><td>" + m[tid].text + "</td></tr>";
	co += "<tr><td class='linktype' valign='bottom'>";
	
	if(m[tid].type == 'link'){
		co += "<img src='_site_files/icon_link.png' style='width:20px; height:20px'><div>standalone page</div>";
	} else if (m[tid].type == 'page'){
		co += "<img src='_site_files/icon_page.png' style='width:20px; height:20px'><div>site page</div>";
	}	
	
	co += "</td></tr></table>";
	document.getElementById("description").innerHTML = co;
}
function tileclick(tid){	
	window.location.href=("http://www.mattlag.com/" + m[tid].link);
}

function welcome(){	
	var la = window.location.href.split("/");
	if(!la[3]){		
		var wel = "<h1>Welcome!</h1>";
		wel += "<p>";
 		wel += "My name is matt and I'm a designer living in Seattle. ";
		wel += "I do an odd assortment of stuff, some of which ends up online. ";
		wel += "If while browsing & exploring you come across any questions, ";
		wel += "feel free to get in contact with me.  Enjoy!<br>";
		wel += "&nbsp;&nbsp;&nbsp;&nbsp;::Matt";
 		wel += "</p>";
		document.getElementById("description").innerHTML = wel;
	}
}