{!--
Site: chrysalis-designs.com
Page: portfolio.group/index.php
===========================================================
masugadesign.com | Copyright 2007-2012
=========================================================== --}
{if segment_2 == ""}{redirect="/portfolio/client-services/corporate"}{/if}
{snip_global_header}
{exp:stash:set name="stash_body_class"}client-services{/exp:stash:set}
{exp:stash:set name="stash_body_id"}portfolio{/exp:stash:set}

<ul id="portfolio-subnav">
	<li id="client-services"><a{if "{segment_2}" == "client-services"} class="active"{/if} href="/portfolio/client-services/corporate">Client Services</a></li>
	<li id="our-approach"><a{if "{segment_2}" == "our-approach"} class="active"{/if} href="/portfolio/our-approach/approach">Our Approach</a></li>
	<li id="wedding-album"><a{if "{segment_2}" == "wedding-album"} class="active"{/if} href="/portfolio/wedding-album/yale-divinity-wedding">Wedding Albums</a></li>
	<li id="case-studies"><a{if "{segment_2}" == "case-studies"} class="active"{/if} href="/portfolio/case-studies/taste-of-the-nation-2010-new-haven-ct">Case Studies</a></li>
</ul>
<br style="clear:both;" />

<div id="gallerywrap2">
	<ul id="albums">
	{exp:channel:entries channel="portfolio" dynamic="no" disable="custom_fields|categories|category_fields|member_data|pagination|trackbacks" category="{segment_2_category_id}" orderby="entry_date" sort="asc"}
			<li><a{if "{segment_3}" == "{url_title}"} class="active"{/if} href="/portfolio/{segment_2}/{url_title}">{title}</a></li>
		{/exp:channel:entries}
	</ul>
	<div id="gallery3">
		{exp:channel:entries channel="portfolio" dynamic="no" disable="categories|category_fields|member_data|pagination|trackbacks" category="{segment_2_category_id}" url_title="{segment_3}" limit="1"}
		{exp:stash:set name="stash_page_title"}{title}{/exp:stash:set}
		<div id="main-image" style="width: 465px; height: 350px; overflow: hidden;">
			{exp:channel_images:images entry_id="{entry_id}" field="portfolio-images" local:remove_domain="yes"}
				<div class="gallery-item">
					<img src="{image:url:large}" name="addonimg_pic" width="{image:width:large}" height="{image:height:large}" alt="{image:title}" />

					{if "{image:description}" != ""}
						<div class="caption" style="width: {image:width:large}px;">
							<span>{image:description}</span>
						</div>
					{/if}
				</div>
			{/exp:channel_images:images}
		</div>
		<ul id="image-thumbs" class="jcarousel" style="height: 380px; overflow: hidden;">
			{exp:channel_images:images entry_id="{entry_id}" field="portfolio-images" local:remove_domain="yes"}
				<li><a href="#"><img src="{image:url:thumbnail}" width="75" height="75" /></a></li>
			{/exp:channel_images:images}
		</ul>
		<div id="gallery-text">
			<h2>{title}</h2>
			{portfolio-description}
		</div>
	{/exp:channel:entries}
	</div>
</div>

{exp:stash:set name="close_footer"}no{/exp:stash:set}
{snip_global_footer}
	<script type="text/javascript">
	$(document).ready(function() {
		$('#main-image').cycle({
			timeout: 0,
			slideExpr: '.gallery-item',
			pager:   '#image-thumbs', // id of element to use as pager container

				// callback fn that creates a thumbnail to use as pager anchor
			pagerAnchorBuilder: function(idx, slide) {
				return '#image-thumbs li:eq(' + idx + ') a';
			}
		});
		$('#image-thumbs').jcarousel({
			vertical: true,
			easing: 'easeOutBack',
			scroll: 4
		});
		// Centers images vertically and horizontally in their frames.
		$("#main-image .gallery-item img").each(function () {

			 var width = $(this).attr("width");
			 var height = $(this).attr("height");

			if  (height < 350) {
				var top = (350 - height) / 2;
				$(this).css({'padding-top' : top});
				$(this).siblings('.caption').css({'top' : top});
			}
			if (width < 465) {
				 var left = (465 - width) / 2;
				$(this).css({'padding-left' : left});
				$(this).siblings('.caption').css({'left' : left});
			}
		});
		$("#main-image .gallery-item").hover(
		  	function () {
		    	$(this).children('.caption').fadeIn(300);
		  	},
		  	function () {
		  	  	$(this).children('.caption').fadeOut(300);
		  	}
		);
	});
	</script>
</body>
</html>