function change(img, ref){
	document.images[img].src = ref;
}

function insertProjectThumb(projectDir, projectName, projectPage){
	var thumbName = projectDir+'_thumb';
	document.write('<a href="'+projectPage+'"><img name="'+thumbName+'" id="'+thumbName+'" width="80" height="80" alt="'+projectName+'" title="'+projectName+'" src="img/before_after/'+projectDir+'/thumb.jpg" onmouseover="change(\''+thumbName+'\', \'img/before_after/'+projectDir+'/thumb_on.jpg\');" onmouseout="change(\''+thumbName+'\', \'img/before_after/'+projectDir+'/thumb.jpg\');"></a>');
}

function shiftBeforeAfterPic(projectDir, picNum){
	var titleName = 'ba'+picNum+'_title';	
	var picName = 'ba'+picNum+'_pic';
	var picSrc = document.images[picName].src;
	var picFileName = picSrc.substring(picSrc.lastIndexOf('/') + 1, picSrc.length);;
	if (picFileName == ('before'+picNum+'.jpg')){
		change(picName, 'img/before_after/'+projectDir+'/after'+picNum+'.jpg');
		change(titleName, 'img/after.gif');
	}else{
		change(picName, 'img/before_after/'+projectDir+'/before'+picNum+'.jpg');		
		change(titleName, 'img/before.gif');		
	}
}

function insertProjectSection(projectDir, picNum){
	var titleName = 'ba'+picNum+'_title';
	var picName = 'ba'+picNum+'_pic';	
	document.write('<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">');
	document.write('<tr><td>');
	document.write('<a href="javascript:shiftBeforeAfterPic(\''+projectDir+'\', \''+picNum+'\');"><img border="0" id="'+titleName+'" name="'+titleName+'" src="img/before.gif" alt="Click on image below to see before/after pictures" title="Click on image below to see before/after pictures" width="450" height="24"></a>');
	document.write('</td></tr><tr><td>');
	document.write('<a href="javascript:shiftBeforeAfterPic(\''+projectDir+'\', \''+picNum+'\');"><img class="ba_pic" id="'+picName+'" name="'+picName+'" src="img/before_after/'+projectDir+'/before'+picNum+'.jpg" alt="Click on image below to see before/after pictures" title="Click on image below to see before/after pictures" width="448" height="286"></a>');
	document.write('</td></tr><tr><td>');																
	document.write('<img src="img/ba_underline.gif" alt="" width="95" height="10">');
	document.write('</td></tr><tr><td height="11">');	
	document.write('</td></tr>');																
	document.write('</table>');
}