var expandTimeout;

function picob() {

	this.chopEdges = function() {
		var currentpic = this;
		var picheight = document.getElementById(this.ctxName).height;
		var ctx = document.getElementById(this.ctxName).getContext("2d");
		if(currentpic.expanded)
			var cropstart = 0;		
		else if(!currentpic.firstone && !currentpic.lastone)
			var cropstart = Math.floor(Math.random()*195);
		else if(currentpic.firstone) 
			var cropstart = 0;
		else 
			var cropstart = 195;
		ctx.drawImage(this.image,0,cropstart,375,picheight,0,0,375,picheight);
		ctx.fillStyle = "#000";
		if(!currentpic.firstone) {
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(375,0);
			ctx.lineTo(375,currentpic.topRight);
			ctx.lineTo(0,currentpic.topLeft);
			ctx.closePath();
			ctx.fill();
		} 
		if(!currentpic.lastone) {
			ctx.beginPath();
			ctx.moveTo(0,(picheight-currentpic.bottomLeft));
			ctx.lineTo(375,(picheight-currentpic.bottomRight));
			ctx.lineTo(375,picheight);
			ctx.lineTo(0,picheight);
			ctx.closePath();
			ctx.fill();
		}
	}
	this.highlight = function() {
		var currentpic = this;
		var picheight = document.getElementById(this.ctxName).height;
		var ctx = document.getElementById(this.ctxName).getContext("2d");
		if(currentpic.firstone) currentpic.topRight = currentpic.topLeft = 0;
		if(currentpic.lastone) currentpic.bottomLeft = currentpic.bottomRight = 0;
		ctx.beginPath();
		ctx.moveTo(0,currentpic.topLeft);
		ctx.lineTo(375,currentpic.topRight);
		ctx.lineTo(375,(picheight-currentpic.bottomRight));
		ctx.lineTo(0,(picheight-currentpic.bottomLeft));
		ctx.closePath();
		ctx.lineWidth = 2;
		ctx.strokeStyle = "rgb(0,123,164)";
		ctx.stroke();
	}
	this.expand = function() {
		var currentpic = this;
		if((currentpic.topLeft+currentpic.topRight+currentpic.bottomLeft+currentpic.bottomRight) > 0) {
			currentpic.chopEdges();
			expandTimeout = setTimeout(function() {currentpic.expand()},100);
		} else {
			var ctx = document.getElementById(currentpic.ctxName).getContext("2d");
			ctx.drawImage(currentpic.image,0,0);
		}
		currentpic.topLeft--;
		currentpic.topRight--;
		currentpic.bottomLeft--;
		currentpic.bottomRight--;
	}
}
var pics = new Array();
pics.length = 10;
for(var p = 0;p < pics.length; p++) {
	pics[p] = new picob();
	pics[p].image = new Image();
	pics[p].image.src = "pic"+p+".jpg";
	pics[p].ctxName = "pic"+p;
	if(p == 0) pics[p].firstone = true;
	if(p == (pics.length-1)) pics[p].lastone = true;
}

function loadpics() {
	for(var p in pics) {
		document.getElementById(pics[p].ctxName).height = 55;
		pics[p].topLeft = Math.floor(Math.random()*8+2);
		pics[p].topRight = Math.floor(Math.random()*8+2);
		pics[p].bottomLeft = Math.floor(Math.random()*8+2);
		pics[p].bottomRight = Math.floor(Math.random()*8+2);
		pics[p].chopEdges();
	}
}

function expandpic(whichpic) {
	if(!whichpic.expanded) {
		document.getElementById(whichpic.ctxName).height = 250;
		whichpic.expanded = true;
		whichpic.expand();
		for(var p in pics) {
			if(pics[p] != whichpic) {
				document.getElementById(pics[p].ctxName).height = 33;
				pics[p].chopEdges();
			}
		}
	} else {
		if(expandTimeout) clearTimeout(expandTimeout);
		whichpic.expanded = null;
		loadpics();
	} 
}
function highlight(which) {
	which.highlight();
}
function unlight(which) {
	which.chopEdges();
}