{preload_replace:mychannel="project_detail"}
{preload_replace:myembedded="embeds"}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>One World Architecture: {exp:channel:entries channel="{mychannel}" limit="1"}{title}{/exp:channel:entries}</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Pax Rodentia">
	<!-- Date: 2011-05-25 -->
	
	{embed="{myembedded}/01-css"}
	<link href="{site_url}css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
	{embed="{myembedded}/01-js"}
	<script type="text/javascript" src="{site_url}js/jquery.lightbox-0.5.min.js"></script>
	
</head>
<body id="project-detail">
<div id="main-container">	
	{embed="{myembedded}/02-topnav"}
	<div class="container_16" id="content">
		{exp:channel:entries channel="{mychannel}" limit="1"}
		<div class="scrollable" id="project-detail-slider">
			<div class="items">
				<div class="project-detail twocol">
					{project_detail_page_1}
					<div class="grid_11 alpha">
						<img src="{image}" alt="Conway residence" id="image1" {if gallery_image > 0 } class="photo{gallery_image}" {/if}/>
					</div>
					<div class="grid_5" style="display:block; float: right;">
						{/project_detail_page_1}
							{if project_gallery != ""}	
							<span class="gallery">
							{project_gallery}
								<a href="{exp:ce_img:pair src="{image}" max_width="800" max_height="600" crop="no"}{made}{/exp:ce_img:pair}" title="{caption}" id="photo{row_count}">View Photo Gallery</a>
							{/project_gallery}
							</span>
							{/if}
						{project_detail_page_1}	
						{text}
						{if project_detail_page_3 =="" && project_detail_page_2 ==""}	<a class="return-link" href="{structure:parent:url}">Back to All {structure:parent:title} Projects</a>{/if}
					</div>
					<div class="project-slider-nav">
						<a class="prev browse left"></a>
						<a class="next browse right green">Next Page</a>
					</div>
					<div class="clear"></div>
					{/project_detail_page_1}
				</div>
				{project_detail_page_2}
				<div class="project-detail threecol">
					<div class="grid_5 alpha">
						<img src="{image_left}" alt="Conway residence" id="image2" {if gallery_image_left > 0}class="photo{gallery_image_left}"{/if} />
					</div>
					<div class="grid_5">
						<h3>&mdash; {title} Cont.</h3>
						{text}
						{if project_detail_page_3 ==""}	<a class="return-link" href="{structure:parent:url}">Back to All {structure:parent:title} Projects</a>{/if}
					</div>
					<div class="grid_6 omega" style="display:block; float: right;" align="right">
						<img src="{image_right}" alt="" style="margin-left:-1px" id="image3" {if gallery_image_right > 0}class="photo{gallery_image_right}"{/if} />
					</div>
					<div class="project-slider-nav">
						<a class="prev browse left green">Previous</a>
						<a class="next browse right grey">Next</a>
					</div>
					<div class="clear"></div>
				</div>
				{/project_detail_page_2}
				{project_detail_page_3}
				<div class="project-detail onecol">
					<img src="{image}" alt="" id="image4" {if gallery_image > 0}class="photo{gallery_image}"{/if} />
					<div class="clear"></div>
					<div class="grid_3">&nbsp;</div>
					<div class="grid_6">
						<h3>&mdash; {title} Cont.</h3>
						{text_left}
					</div>
					<div class="grid_6">
						{text_right}
						{if project_detail_page_3 !=""}	<a class="return-link" href="{structure:parent:url}">Back to All {structure:parent:title} Projects</a>{/if}
					</div>
					<div class="grid_1 omega"></div>
					<div class="project-slider-nav">
						<a class="prev browse left green">Previous</a>
						<a class="next browse right grey">Next</a>
					</div>
					<div class="clear"></div>
				</div>
				{/project_detail_page_3}
			</div>
			{/exp:channel:entries}
		</div> 
	</div>
	<div class="clear"></div>
</div>
{embed="{myembedded}/04-footer"}

	
	<!-- javascript coding -->
	
	<script type="text/javascript">
	$(document).ready(function() {

	// scrollable pages
	$("#project-detail-slider").scrollable()
	
	//lightbox gallery
	$('.gallery a').lightBox({
		imageLoading: '{site_url}js/images/lightbox-ico-loading.gif',
		imageBtnClose: '{site_url}js/images/lightbox-btn-close.gif',
		imageBtnPrev: '{site_url}js/images/lightbox-btn-prev.gif',
		imageBtnNext: '{site_url}js/images/lightbox-btn-next.gif'
		});
		
	$("p.intro-text").append($(".gallery"));
	
	var gallery_image1 = ".gallery #" + $('#image1').attr("class");
	var gallery_image2 = ".gallery #" + $('#image2').attr("class");
	var gallery_image3 = ".gallery #" + $('#image3').attr("class");
	var gallery_image4 = ".gallery #" + $('#image4').attr("class"); 
	
	$('#image1').click(function(){
		$(gallery_image1).click();
	});
	$('#image2').click(function(){
		$(gallery_image2).click();
	});
	$('#image3').click(function(){
		$(gallery_image3).click();
	});
	$('#image4').click(function(){
		$(gallery_image4).click();
	});
	/*
	var pg_count = $(".items").length;
	if (pg_count > 2) {
		$(".onecol p:last-child").append($("a.return-link"));
	}
	else if (pg_count = 2) {
		$(".threecol p:last-child").append($("a.return-link"));
	}
	if (pg_count < 2) {
		$(".twocol p:last-child").append($("a.return-link"));
	}*/
		
	
	});
	</script>
	
</body>
</html>
