function loadContent(title)
{
	var elem = document.getElementById('content');
	
	if (elem == null)
	{
		return;
	}
	
	if (title == 'abstract')
	{
		elem.innerHTML = '<table border="0" width="100%">'
						+'<tbody>'
						+'<tr>'
						+'<td><h2>Abstract</h2></td>'
						+'</tr>'
						+'</tbody>'
						+'</table>'
						+'<table border="0" width="100%">'
						+'<tbody>'
						+'<tr>'
						+'<td width="5%"></td>'
						+'<td>Texture mapping has been a fundamental problem in computer graphics from its early days. As online image databases have become increasingly accessible, the ability to texture 3D models using casual images has gained more importance. This will facilitate, for example, the task of texturing models of an animal using any of the hundreds of images of this animal found on the Internet, or enabling a naive user to create personal avatars using the user\'s own images.<br><br>We present a novel approach for performing texture mapping using casual images, which manages to account for the 3D geometry of the photographed object. Our method overcomes the limitation of both the constrained-parameterization approach, which does not account for the photography effects, and the photogrammetric approach, which cannot handle arbitrary images. The key idea of our algorithm is to formulate the mapping estimation as a Moving-Least-Squares problem for recovering local camera parameters at each vertex. The algorithm is realized in a FlexiStickers application, which enables fast interactive texture mapping using a small number of constraints.</td>'
						+'<td width="5%"></td>'
						+'<br>'
						+'</tr>'
						+'</tbody>'
						+'</table>';
						
	}

	if (title == 'motivation')
	{
		elem.innerHTML = '<table border="0" width="100%"><tbody><tr><td><h2>Motivation</h2></td></tr></tbody></table>'
						 +'<table border="0" width="100%" style="table-layout:fixed"><tbody><tr><td width="5%"></td><td width="90%">'
						 +'The task of texturing a 3D model from casual images presents two major challenges: First, the algorithm should overcome the differences in pose, proportion and articulation between the photographed object and the model. Second, photography effects presented in the image should be compensated for.<br>'
						 +'Practically, texturing the model is performed by computing a mapping from the surface to the image. Given user-defined constraints, there are two common approaches to establish this mapping: The <b>Constrained-parameterization</b> approach and the <b>Photogrammetric</b> approach.'
						 +'<br>'
						 +'<h4>The Constrained-parameterization approach</h4>'
						 +'This approach computes the mapping by embedding the mesh onto the image plane, while attempting to satisfy the constraints and minimize a specific geometric distortion metric. '
						 +'Since no prior assumptions regarding the source image and the camera are made, this approach is suitable for casual images. However, inherent distortions might be introduced due to photography effects that result from the viewpoint and the object’s 3D geometry. '
						 +'This is demonstrated in the following image:'
						 +'<br><br>'
						 +'<div align="center"><img src="syn_cyl.png" width="90%"></div><br>'
						 +'In this image, a ”photographed” cylinder (a) is used as a source image, in which the text appears curved and the squares in the center seem wider than those near the silhouettes. These photography effects result from the viewpoint and the object’s 3D geometry. '
						 +'The model is a cylinder with different proportions (b). The result of constrained parameterization (c) strives to minimize the parameterization distortions, ignoring the photography effects. Therfore the resulting texture mapping is incorrect (d).'
						 +'<br><br>'
						 +'<h4>The Photogrammetric approach</h4>'
						 +'In this approach, it is assumed that the photographed object is highly similar to the model to be textured and that it was acquired using a camera of a known model (e.g., a pinhole camera). '
						 +'The missing camera parameters are estimated and the recovered camera is used to reproject the model onto the source image, implicitly defining the model–image mapping. '
						 +'<br>'
						 +'<div align="center"><img src="reprojection_app.png" width="60%"><br><br></div>'
						 +'The major advantage of the photogrammetric approach is that it compensates for the photography effects introduced by the camera projection. However, the inherent limitation of the approach is the requirement that the photographed object and the model are similar, prohibiting the use of casual images.'
						 +'<br><br>'
						 +'<h3>Our contribution</h3>'
						 +'We present a new algorithm for texturing 3D models from casual images. The algorithm provides the advantages of the photogrammetric approach in compensating for the photography effects and the flexibility of the constrained-parameterization approach in using casual images.'
						 +'</td><td width="5%"></td></tbody></table>'		;			 
	}
	
	if (title == 'algorithm')
	{
		elem.innerHTML = '<table border="0" width="100%"><tbody><tr><td><h2>Algorithm</h2></td></tr></tbody></table>'
						 +'<table border="0" width="100%" style="table-layout:fixed"><tbody><tr><td width="5%"></td><td width="90%">'
						 +'The key idea of our algorithm is to perform the photogrammetic approach for texture mapping in a local manner.<br><br> In the photogrammetric approach, the model-image mapping is implicitly defined by a camera projection:<br>'
						 +'<div align="center"><img src="eq1.png"></div><br>'
						 +'To estimates the unknown camera parameters (e.g. position, orientation, focal length), the user constraints are used. This is performed by findinig the parameters that minimize the constraints projection error:<br>'
						 +'<div align="center"><img src="eq2.png" ></div><br>'
						 +'This approach inherently compensates for the photography distortions. However, it cannot be used with casual images, as the assumption of model-object similarity does not hold for such images.<br><br>'
						 +'Instead of estimating a single global camera for the entire model, our algorithm estimates a local camera for each vertex. The model-image mapping is then defined by projecting each vertex using its specific camera:'						 
						 +'<div align="center"><img src="eq3.png" ></div><br>'
						 +'The camera parameters are estimated <b><i>at each vertex independently</i></b> by minimizing the weighted constraints projection error:<br>'
						 +'<div align="center"><img src="eq4.png" ></div><br>'
						 +'where the constraints are weighted non-uniformly on each vertex, by giving higher weight to closer constraints:<br>'
						 +'<div align="center"><img src="eq5.png" ></div><br>'
						 +'This approach is shown to handle casual images as the contrainted-parameterizaion approach, while compensating for the photography effects as done in the photogrammetric approach. '
						 +'More details can be found in the <a href="javascript:loadContent(\'paper\')">paper</a>.'
						 +'</td><td width="5%"></tbody></table>'					 ;
	}
	if (title == 'results')
	{
		elem.innerHTML = '<table border="0" width="100%"><tbody><tr><td><h2>Results</h2></td></tr></tbody></table>'
					    +'<table border="0" width="100%"  style="table-layout:fixed"><tbody><tr><td width="5%"></td><td width="90%">'
						+'Here are a few results from the paper. All results were produced using <a href="javascript:loadContent(\'flexistickers\')">FlexiStickers</a>.<br>'
						+'More results, obtained during the faculty research day, can be found <a href="http://www.cs.technion.ac.il/~ytzur/flexiStickers/researchDay.htm">Here</a>.'
						+'<br><br>'

						+'<h3>The mug</h3><br>'
						+'<div align="center"><img src="mug.png" width="90%"></div><br>'
						+'Here, a model of a coffee mug is textured using a casual image of a mug. The image presents high distortions due to the viewpoint and the 3D geometry of the photographed mug. In particular, the text on the mug appears curved and the letters decrease in size as they get closer to the silhouettes. Our algorithm compensates for these effects and produces an undistorted and realistic result. This is done using only six features and less than a minute of user-time.'

						+'<h3>The men</h3><br>'
						+'<div align="center"><img src="men.jpg" width="90%"></div><br>'
						+'This example shows the results of texturing a model of a man using a variety of casual images. Our algorithm succeeds at handling the different proportions and articulations of the photographed men.'


						+'<h3>The car</h3><br>'
						+'<div align="center"><img src="car.png" width="90%"></div><br>'
						+'This example of texturing a car model using an image of a racing car can not be solved using photogrammetric methods, since the model is different in shape from the photographed car. '
						+'It is also very challenging for constrained-parameterization methods, due to the high 3D geometry presented in the image (resulting from the specific viewpoint). '
						+'Our algrithm succeeds in handling this task, and textures the model based on 26 constraints, with only 10 minutes of user interaction.'

				
						+'</td><td width="5%"></td></tr></tbody></table>';
	}
	if (title == 'paper')
	{
		elem.innerHTML = '<table border="0" width="100%"><tbody><tr><td><h2>Paper and Video</h2></td></tr></tbody></table>'
						 +'<table border="0" width="100%"  style="table-layout:fixed"><tbody><tr><td width="5%"></td>'
						 +'<td width="25%"><img src="flexiStickers_thumb.png" width="90%" border="1"></td>'
						 +'<td width="75%">TZUR, Y., TAL, A., <b>FlexiStickers - Photogrammetric Texture Mapping using Casual Images</b>, <i>SIGGRAPH 2009, ACM Transactions on Graphics, Volume 28, Issue 3, August 2009, accepted</i><br><br>'
						 +'<a href="FlexiStickers_Tzur_Tal.pdf">Download paper (PDF)</a><br>'
						 +'<a href="flexiStickers_movie.avi">Download video (avi)</a><br>'
						 +'<a href="http://www.youtube.com/watch?v=byXSdUM2q38">Watch video (Youtube)</a><br>'
						 +'</td><td width="5%"></td></tr></tbody></table>'					 ;
	}
	if (title == 'flexistickers')
	{
		elem.innerHTML = '<table border="0" width="100%"><tbody><tr><td><h2>FlexiStickers</h2></td></tr></tbody></table>'
						 +'<table border="0" width="100%"  style="table-layout:fixed"><tbody><tr><td width="5%"></td>'
						 +'<td width="65%" valign="top">FlexiStickers is an interactive application implementing the algorithm. It enables the user to easily texture a model using casual images.<br><br>'
						 +'<a href="FlexiStickers.zip">Download FlexiStickers (zip file, 17MB) </a><br><br>'
						 +'<td width="25%" ><img src="iconimage2_1.png" width="150px"></td></tbody></table>'
						 +'<table border="0" width="100%"><tbody><tr><td width="5%"></td>'
						 +'</td></tbody></table>';
	}
	if (title == 'comingsoon')
	{
		elem.innerHTML = '<table border="0" width="100%"><tbody><tr><td>Coming soon...</td></tr></tbody></table>'
	}
}
