// JavaScript Document
var features_array = new Array ();
var ii = 0;
var title = "";
var count = 0;
var counter = init;
var val = 0;

function feature(uid, feature_title, page_content) {
 	this.feature_string = feature_title;
	this.feature_title= "<p><a class='linkMemory' href='javascript:insert_data("+count+")' onclick='find_icon_btn(event)'>"+feature_title+"</a></p>";
    this.page_content = page_content;
	this.uid = uid;
	count++;
}

function heading(heading) {
 	this.heading= "<h3 class='linkMemory'>"+heading+"</h3>";
	count++;	
}

///// Introduction
features_array[ii++] = new feature("0", "Introduction", "  <h3>Introduction</h3>  <p>&nbsp;</p>  <p>RenderZone allows you to create photorealistic renderings based on the LightWorks® rendering engine. It offers three levels of rendering: simple, z-buffer, and raytrace. A user can start developing the image of a 3D model at the simple level and gradually turn on features and render it at the most photorealistic level.</p>  <p>&nbsp;</p>  <p>RenderZone also includes the ability to produce images based on global illumination techniques, which create renderings with the most realism, as the illumination of a scene takes into account the accurate distribution of light in the environment. In RenderZone, global illumination includes final gather, ambient occlusion, and radiosity techniques, which can be applied separately or can be combined.</p>  <p>&nbsp;</p> <p>One or more lights can be used, which can be ambient, distant (sun), cone, point, projector, area, custom, line, environment, and atmospheric lights. Lights may appear to glow in images, simulating the reflection of lights off dust particles in the air. Environment and atmospheric lights are advanced lights, which are especially optimized for global illumination. Other light types produce soft (mapped) or hard (raytraced) shadows. </p>  <p>&nbsp;</p>  <p>Cubic and spherical environment mapping, bumps, backgrounds that include alpha channel support, depth effects, and post processing effects can be applied. Blur is an example of a post processing effect that simulates focusing your camera to a particular area of your modeling scene. Sky backgrounds that are procedurally generated come close to real skies that you may have captured with your camera.<br />  </p>  <p>&nbsp;</p>  <p>State of the art shaders are used to render surfaces and other effects. A Material is defined by up to four layers of shaders, which produce color, reflections, transparency, and bump effects. Patterns in shaders can be pre-captured images or can be produced by a procedure.<br />  </p>  <p>Transparencies, reflections, and refractions can be applied at the z-buffer and raytrace levels. The reflections and refractions are always correctly raytraced, even when they are produced by the z-buffer rendering. This is achieved by applying a mixed rendering method, where surfaces with no reflections are rendered using z-buffer and the rendering effects of reflective surfaces are produced using raytracing.<br />  </p> <p>&nbsp;</p>  <p>Raytraced renderings can be accelerated by the use of multiple processors.</p>  <p>&nbsp;</p> <p>Also available is a sketch rendering mode that produces non photorealistic images, which appear as if they were drawn by manual rendering techniques, such as oil painting, water color, or pencil hatches.</p>");

//// HEADING
features_array[ii++] = new heading("Key Features");

///////Final Gather
features_array[ii++] = new feature("2", "Final Gather", "<h3>Final Gather</h3>  <p>&nbsp;</p>  <p>Final gather creates ambient light by distributing it non uniformly.  It does this by calculating a single bounce of light in the scene. As a result, areas which are otherwise not reached by light directly are now illuminated. If one desires, a more accurate illumination can be calculated through radiosity, by allowing light to bounce more than once. Final gather will incorporate the extra illumination from radiosity together with light from advanced light types, such as environment and atmospheric lights to create illumination with a high degree of realism. It may be combined with ambient occlusion for images of the best quality.</p>  <p>&nbsp;</p>  <div align='center'>  <p><img src='../../../images/products/renderzone/features/Final Gather/JPEG/St-Ignatius-Chapel-Interior-3.jpg' width='465' height='713' /></p>  <p>&nbsp;</p>  <p><img src='../../../images/products/renderzone/features/Final Gather/JPEG/DDMartinHouseDay_13.jpg' width='465' height='349' /></p>  <p>&nbsp;</p>  <h6><img src='../../../images/products/renderzone/features/Final Gather/JPEG/Living Room.jpg' width='465' height='288' />Final gather and radiosity were used to compute multiple bounces of the sun and atmospheric light in the interior spaces.</h6>  <p>&nbsp;</p>  <p><img src='../../../images/products/renderzone/features/Final Gather/JPEG/St Ignatius Chapel Interior 2.jpg' width='465' height='311' /></p>  <p>&nbsp;</p>  <p><img src='../../../images/products/renderzone/features/Final Gather/JPEG/largelighttower-view 6-1.jpg' width='465' height='349' /></p>  <h6>Final Gather creates a dramatic effect of light pouring in from small exterior openings.</h6>");

///Ambient Occlusion
features_array[ii++] = new feature("3", "Ambient Occlusion", "<h3>Ambient Occlusion</h3><p>&nbsp;</p>  <p>Ambient occlusion is the simplest of all global illumination methods in RenderZone. Control of ambient occlusion is easy and straight forward. By manipulating just a few parameters, one may turn an otherwise flat shaded image into a detailed, shaded rendering with a high degree of realism. It can be used for both interior and exterior scenes. Rendering times increase only slightly.</p> <p>&nbsp;</p>  <div align='center'>  <p><img src='../../../images/products/renderzone/features/Ambient Occlusion/JPEG/AO interior.jpg' width='465' height='357' /></p>  <h6>Ambient occlusion in this interior scene adds subtle shadows to corners and around furniture.</h6>  <p>&nbsp;</p>  <p align='center'><img src='../../../images/products/renderzone/features/Ambient Occlusion/JPEG/AO Sketch.jpg' width='465' height='254' border='1' /></p> <h6>Ambient occlusion may be used for artistic effects, such as pencil stipples.</h6>  <p>&nbsp;</p> <p><img src='../../../images/products/renderzone/features/Ambient Occlusion/JPEG/stignatiuschurchexterday-view 14-10.jpg' width='465' height='280' /></p>  <p>&nbsp;</p> <h6><img src='../../../images/products/renderzone/features/Ambient Occlusion/JPEG/Calatrava.jpg' width='465' height='353' />In these exterior renderings, ambient occlusion enhances details in the facade and building volumes.</h6>");

////////Advanced Lights
features_array[ii++] = new feature("4", "Advanced Lights", "<h3>Advanced Lights</h3>  <p>&nbsp;</p>  <p>In addition to basic light types, such as distant, point and cone lights, RenderZone offers advanced lighting which more accurately simulates atmospheric and non uniformly distributed light sources. These light types include sky, area, line and environmental lights.</p>  <div align='center'>    <p>&nbsp;</p>   <p><img src='../../../images/products/renderzone/features/Advanced Lights/JPEG/CHAISELO-view 3-4.jpg' width='465' height='349' border='1' /></p>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Advanced Lights/JPEG/puma-proto-HDRI.jpg' width='465' height='349' /></p>    <h6>Atmospheric light effects are used in these images to create very soft shadows and realistic illumination.</h6>   <h6>&nbsp;</h6>    <p><img src='../../../images/products/renderzone/features/Advanced Lights/JPEG/alpha.jpg' width='465' height='345' border='1' /></p>   <h6>An environment light map is used to illuminate the scene with a photographic image.</h6>    <h6>&nbsp;</h6>    <h6><img src='../../../images/products/renderzone/features/Advanced Lights/JPEG/house-chmar-kitchen-brighter.jpg' width='465' height='328' /></h6>    <h6>Multiple light sources of different types are mixed in this interior.</h6> ");

////////Advanced Lights
features_array[ii++] = new feature("5", "High Dynamic Range Images (HDRI)", "<h3>High Dynamic Range Images (HDRI)</h3>  <p>&nbsp;</p>  <p>High Dynamic Range Images (HDRI) can be used as the source for environment lights leading to realistic images with smooth shadows and complex illumination. HDRI  may also be used as environment reflections and image backgrounds combining all three aspects in a single rendering. </p>  <p>&nbsp;</p>  <div align='center'>    <h6><img src='../../../images/products/renderzone/features/HDRI/JPEG/Mercedes_2.jpg' width='465' height='311' border='1' /></h6>    <h6>&nbsp;</h6>    <h6><img src='../../../images/products/renderzone/features/HDRI/JPEG/envAll.jpg' width='465' height='348' /></h6>    <h6>&nbsp;</h6>    <h6>For different HDRI maps were used in these renderings as environment lights, reflective environments and background. </h6>");

////////Volumetric shadows
features_array[ii++] = new feature("6", "Volumetric shadows", "<h3>Volumetric shadows</h3>  <p>&nbsp;</p>  <p>RenderZone may simulate the interaction of light and dust particles in the air to create a volumetric glowing effect, also known as volumetric shadows. This effect can be enabled on a per light basis for certain light types.</p>  <div align='center'>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Volumetric Shadows/JPEG/Copy-of-Window.Copy-view-8.jpg' width='465' height='279' /></p>    <p>&nbsp;</p>    <img src='../../../images/products/renderzone/features/Volumetric Shadows/JPEG/HH_CGTalk_Lighting_Challenge.jpg' width='465' height='632' />");

//////Materials
features_array[ii++] = new feature("7", "Materials", "<h3>Materials</h3>  <p>&nbsp;</p>  <p>State of the art shaders are used to render surfaces and other effects. A material is defined by up to four layers of shaders, which produce color, reflections, transparency, and bump effects. Shaders are either procedural or precaptured texture maps.  Procedural shaders generate a pattern by executing a procedure. These effects are generated from scratch and do not use a prestored image.  In contrast, precaptured texture maps use an image file which is mapped onto a surface, either for painting the image on the surface, or for using the image as a transparency filter or as a bump map. </p>  <p>&nbsp;</p>  <div align='center'>  <p><img src='../../../images/products/renderzone/features/Materials/JPEG/Solid_textures.jpg' width='465' height='358' border='1' /></p>  <h6>This image was produced with numerous variations of the procedural wood color and bump shaders.</h6>  <p>&nbsp;</p>  <p><img src='../../../images/products/renderzone/features/Materials/JPEG/Wood_iface.jpg' width='465' height='506' /></p>  <h6>The interface of the Solid Wood color shader.</h6>  <p>&nbsp;</p>  <p>Surface reflections may be simulated by fast shaders for simple effects or may recreate accurate glass like and metallic effects using raytrace algorithms. The later calculate the reflection of light using the Fresnel filtering  method, which specifies how the specularly reflected fraction of incident light varies with the angle of incidence on a given surface material. </p>  <p>&nbsp;</p>  <p><img src='../../../images/products/renderzone/features/Materials/JPEG/tea-set-HDRI.jpg' width='465' height='349' /></p>  <h6>Accurate glass, metal and mirror reflections with raytrace shaders.</h6>  <p>&nbsp;</p>  <p><img src='../../../images/products/renderzone/features/Materials/JPEG/Mercedes_formZ.jpg' width='465' height='178' /></p>  <h6>The car body was rendered using the multi layer paint reflection shader.</h6> ");

//////Material Libraries
features_array[ii++] = new feature("8", "Material Libraries", "<h3>Material Libraries</h3>  <p>&nbsp;</p>  <p>Materials can be created from scratch or may be chosen from a set of libraries containing metals, glass, brick, stone, wood and other commonly used materials. Predefined materials are added to a project with a simple drag and drop mechanism.</p>  <p>&nbsp;</p>  <div align='center'><img src='../../../images/products/renderzone/features/Material Libraries/JPEG/Material_libraries.jpg' width='464' height='641' />   <h6>The Material Library interface in RenderZone </h6>");

///////Decals
features_array[ii++] = new feature("9", "Decals", "<h3>Decals</h3>  <p>&nbsp;</p>  <p>Decals can be attached on top of other materials to produce a variety of rendering effects, such as labels on objects, graffiti on walls, partially reflective surfaces, masked transparencies, and more. Up to thirty-two decals can be applied to a single object and, because these decals may freely overlap, the rendering effects can be combined in virtually unlimited ways.</p>  <div align='center'>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Decals/JPEG/BottlesPartTwo1.jpg' width='465' height='582' /></p>    <h6>The labels were added as decals.</h6>");

///////Postprocessing Effects
features_array[ii++] = new feature("10", "Postprocessing Effects", "<h3>Postprocessing Effects</h3>  <p>&nbsp;</p>  <p>Certain rendering effects can be added to a completed image without the need of re-rendering the scene. Effects such as depth blur, lens flares and exposure correction can be enabled one at a time or in combination with each other. Each effect executes very fast allowing for many alternatives to be explored interactively. </p>  <p>&nbsp;</p>  <div align='center'>    <p><img src='../../../images/products/renderzone/features/Postprocessing/JPEG/Dice_formZ.jpg' width='465' height='466' /></p>    <h6>Postprocessing blur was added to this image to enhance the depth preception.</h6>    <h6>&nbsp;</h6>    <p><img src='../../../images/products/renderzone/features/Postprocessing/JPEG/Mercedes_lflare1.jpg' width='465' height='311' /></p>    <h6>Lens flares give the impression of light artifacts from an optical camera lens.</h6>");

///////Decals
features_array[ii++] = new feature("11", "Rendering Development", "<h3>Rendering Development</h3>  <p>&nbsp;</p>  <p>Renderings can be developed by adding effects one at a time, trading increased realism for rendering speed. Initial renderings may be simply shaded. To increase realism, global illumination effects may be added one at a time. Portions of the scene may be rendered with the Render Area rectangle, allowing for small snapshots of scene to be generated at much reduced rendering speed.</p>  <p>&nbsp;</p>  <div align='center'>    <p><img src='../../../images/products/renderzone/features/Rendering Development/JPEG/basic.jpg' width='465' height='330' /></p>    <h6>Starting with a basic rendering and a sun light only.</h6>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Rendering Development/JPEG/basic_fg.jpg' width='465' height='330' /></p>    <h6>Adding final gather gives better light distribution</h6>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Rendering Development/JPEG/basic_fg_sky.jpg' width='465' height='330' /></p>    <h6>Enabling atmoshperic light adds illumination from directions  other than the direct sun light.</h6>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Rendering Development/JPEG/basic_fg_sky_rads.jpg' width='465' height='330' /></p>    <h6>A short amount of time spent by radiosity distributes the light further.</h6>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Rendering Development/JPEG/basic_fg_sky_rads_AO.jpg' width='465' height='330' /></p>    <h6>In the final stages, ambient occlusion adds subtle shading in corners and around the furniture.</h6>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Rendering Development/JPEG/area_rect.jpg' width='465' height='331' /></p>    <h6>Testing different floor materials using the Render Area feature.</h6>");

//////Sketch Render
features_array[ii++] = new feature("12", "Sketch Render", "<h3>Sketch Render</h3>  <p>&nbsp;</p>  <p>Sketch is a separate rendering plugin, which is based on an initial RenderZone rendering. It adds effects which make the image appear as if it were drawn by hand using various traditonal paint and pencil methods.</p>  <p>&nbsp;</p>  <div align='center'>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Sketch Render/JPEG/i_RonchampStipple.jpg' width='465' height='317' /></p>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Sketch Render/JPEG/Picture-1.jpg' width='465' height='387' /></p>    <p>&nbsp;</p>    <p><img src='../../../images/products/renderzone/features/Sketch Render/JPEG/f_StIggsLinesandStrokes2.jpg' width='465' height='340' /></p> ");


for ( i = 0; i < features_array.length; i++)
{
	if (features_array[i].heading == undefined)
	{
		title=title+features_array[i].feature_title;
		//alert ("something");
	}
	else 
	{
		title=title+features_array[i].heading;
		//alert ("something else");
	}
}
document.getElementById('featureListDiv').innerHTML=title;


function prevBtn()
{
	counter--;
	if (counter < 0)
	{
		counter = count - 1;
	}
	if (features_array[counter].feature_title == undefined)
	{
		counter--;
	}
	link_highlight_func();
 	insert_data(counter);
}
function nextBtn()
{
	counter++;
	if (counter >  count - 1)
	{
		counter = 0;
	}
	if (features_array[counter].feature_title == undefined)
	{
		counter++;
	}
	link_highlight_func();
	insert_data(counter);
}


function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	var j;
	var i;
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

function find_icon_btn(e)
{
	var evt=window.event || e
	if (!evt.target) //if event obj doesn't support e.target, presume it does e.srcElement
 	evt.target=evt.srcElement //extend obj with custom e.target prop
	//do something with evt.target, which is cross browser
	var i = 0;
	for(i = 0; i < links.length; i++)
	{	
		if(links[i] == evt.target)
		{   
			val = i;
			counter = val;
			links[i].className="linkMemory linked";
		}
		else
		{
			links[i].className="linkMemory";
		}
	}
	return(val);
}


function link_highlight_func()
{	
	val = counter;
	for(i = 0; i < links.length; i++)
	{
		links[i].className="linkMemory";
	}
	links[val].className="linkMemory linked";

}

function get_link()
{
	var artist_link = "http://www.formz.com/products/renderzone/renderzoneFeatures.php?init=" + counter;
	artist_link = escape(artist_link);

	var mailto_link ="mailto:someone@somewhere.com?subject= Check out this cool RenderZone feature: "+features_array[counter].feature_string+". &body=" + artist_link;
	win = window.open(mailto_link,'emailWindow');
	if (win && win.open &&!win.closed) win.close();	
}

function insert_data(count)
{
	counter = count;
	document.getElementById('content_div').innerHTML=features_array[counter].page_content;
}


var links = getElementsByClass('linkMemory', document, '*');
for ( i = 0; i < features_array.length; i ++)
{
	if (features_array[i].uid == init)
	{
		links[i].className="linkMemory linked";
		document.getElementById('content_div').innerHTML=features_array[i].page_content;
	}	
}
