<?xml version="1.0" encoding="utf-8"?>
<!--
OU GALLERIES

Transforms gallery asset XML into a dynamic gallery on the web page. 
Type of gallery is determined by page property.

Dependencies - see vars xsl
$galleryType
$production_root - remove if never publishing to subfolder
-->
<!DOCTYPE xsl:stylesheet SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
<xsl:stylesheet version="2.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:ou="http://omniupdate.com/XSL/Variables"
    xmlns:fn="http://omniupdate.com/XSL/Functions"
    xmlns:ouc="http://omniupdate.com/XSL/Variables"
    exclude-result-prefixes="ou xsl xs fn ouc">
	<xsl:variable name="production_root"></xsl:variable>
	<xsl:variable name="galleryType" select="ou:pcfparam('galleryType')"/>
<!-- The following template matches the LDP gallery nodes and outputs the proper HTML Code based on a specified parameter -->
<xsl:template match="gallery" mode="copy">

<div class="ougalleries"> <!-- start ougalleries -->

<xsl:variable name="galleryId" select="@asset_id"/>
	<xsl:choose>
		<xsl:when test="$galleryType = 'FlexSlider'">
			<!-- Start Flex Slider HTML Output -->
			<div class="flex-container" style="width:95%">
				<div class="flexslider">
	  				<ul class="slides"> 
		    				 <xsl:for-each select="images/image">
		      					<li data-thumb="{@url}">
		      					
		      					  <xsl:choose>
						               <!-- Determine if caption field is empty -->
						                    <xsl:when test="./caption != ''"> 
						                     <!-- Not empty, create a link -->
						                       <a href="{./caption}">
					                                  <img src="{@url}" alt="{./title}" title="{./title}" />
								       </a>
						                        </xsl:when>
						                        <xsl:otherwise>	
						               <img src="{@url}" alt="{./title}" title="{./title}" />                 
						                       </xsl:otherwise>
						         </xsl:choose>
								 <xsl:if test="./title != '' or ./description != ''">
						                        <!-- Only create a div caption for a div one that has a title or description -->
						                        <p class="flex-caption"><br/>
						                            <xsl:choose>
						                                <!-- Determine if caption field is empty -->
						                                <xsl:when test="./caption != ''"> 
						                                    <!-- Not empty, create a link -->
						                                    <a href="{./caption}">
						                                        <xsl:value-of select="./title" />
						                                        <xsl:if test="./description != ''">
						                                            - <xsl:value-of select="./description" />
						                                        </xsl:if>
						                                    </a>
						                                </xsl:when>
						                                <xsl:otherwise>	
						                                    <!-- Just output caption, no link -->
						                                    <xsl:value-of select="./title" /> 
						                                    <xsl:if test="./description != ''">
						                                        - <xsl:value-of select="./description" />
						                                    </xsl:if>
						                                </xsl:otherwise>
						                            </xsl:choose>
						                            <xsl:comment> Do not allow div to self close </xsl:comment>
						                        </p>
						                    </xsl:if>								
								
							</li>
						</xsl:for-each>
				 	 </ul>
				</div>
			</div>
			<!-- Output images -->
			
			<!-- End Flex Slider HTML Output -->
		</xsl:when>
		<xsl:when test="$galleryType = 'PrettyPhoto'">
			<!-- Uses Bootstrap Thumbnails -->
			
			
			<ul class="thumbnails">
			<xsl:for-each select="images/image">
				<li>
				<a class="thumbnail" href="{@url}" rel="prettyPhoto[{$galleryId}]" title="{./description}">
					<img src="{./thumbnail/@url}" alt="{./title}" style="height: {thumbnail/height}; width: {thumbnail/width};" />
				</a>
				</li>
			</xsl:for-each>
			</ul>
		
			<!-- End Pretty Photo Output -->
		</xsl:when>
		
		
		
		<xsl:otherwise>
			<!-- You've passed a parameter that isn't defined -->
			<xsl:comment> Undefined parameter for gallery match </xsl:comment>
		</xsl:otherwise>
	</xsl:choose>
	
	</div> <!-- end ougalleries -->
	
</xsl:template>

<!-- Includes the necessary Javascript and CSS based on the type of gallery that is chosen -->
<xsl:function name="ou:gallery-headcode">
	<xsl:param name="galleryType" />
	
	<!-- jquery is required for all gallery types, but make sure client doesn't already have it. -->
	<!-- jquery 1.8.0 is the most recent version supported by prettyPhoto -->
<!--	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>-->

	<xsl:choose>
	<xsl:when test="$galleryType = 'PrettyPhoto'">
			<!-- Start Pretty Photo -->
			<xsl:comment> Pretty Photo Includes </xsl:comment>
			<link rel="stylesheet" href="/_resources/galleries/prettyphoto/bootstrap-thumbnails.css" media="screen" /> 
			<link rel="stylesheet" href="/_resources/galleries/prettyphoto/prettyPhoto.css" media="screen"/>
			<script src="/_resources/galleries/prettyphoto/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" charset="utf-8">
			  $(document).ready(function(){
			    $("a[rel^='prettyPhoto']").prettyPhoto();    
			  });
			</script>
			
			<!-- End Pretty Photo -->
		</xsl:when>
		
	<xsl:when test="$galleryType = 'FlexSlider'">
			<!-- Start Flex Slider -->
			<link rel="stylesheet" href="/_resources/galleries/flex-slider/flexslider.css" type="text/css" media="screen"  /> 
			<script src="/_resources/galleries/flex-slider/ou-flexslider.js"></script>	
			<script type="text/javascript" charset="utf-8">
			  $(window).load(function() {
			    $('.flexslider').flexslider({
			          animation: "slide",
			          //controlsContainer: ".flex-container",
			          //controlNav: "thumbnails"
			    });
			  });
			</script>				
			<!-- End Flex Slider -->
		</xsl:when>
		
		<xsl:otherwise>
			<!-- You've passed a parameter that hasn't been defined -->
			<xsl:comment> Undefined parameter for gallery headcode </xsl:comment>
		</xsl:otherwise>
	</xsl:choose>
</xsl:function>
	
	
	<xsl:template match="gallery" mode="homepage-gallery">
		<div class="gallery">
			<div class="frame">
				<ul>
					<xsl:for-each select="images/image">
						<!-- remove instances of [L] from the title node -->
						<xsl:variable name="title-clean" select="replace(./title/node(),'\[L\]','')"/>		
						<!-- split the title into 2 different titles where the pipe symbol is -->
						<xsl:variable name="titles" select="tokenize($title-clean, '\|')"/>	
						<!-- if we came up with 2 different titiles, set the second one as the top title -->
						<xsl:variable name="title-top" select="if($titles[2]) then($titles[2]) else ($title-clean)"/>
						<!-- if we came up with 2 different titles, set the first one as the top title -->
						<xsl:variable name="title-main" select="if($titles[2]) then($titles[1]) else ($title-clean)"/>
						<li>
							<xsl:if test="contains(./title/node(),'[L]')">
								<xsl:attribute name="class">alignleft</xsl:attribute>	
							</xsl:if>
							<img src="{@url}" width="687" height="317" alt="{./description/node()}"/>
							
							<xsl:if test="string-length(title/node())>0 or string-length(description/node())>0">
							<strong class="head"><xsl:value-of select="$title-top"/></strong>
							<div class="description">								
								<div class="text-block">
									<div class="row">
										<strong class="title">
											<xsl:value-of select="$title-main"/>
										</strong>
										<xsl:if test=" not(normalize-space(./description/node())='')">
											<p>
												<xsl:value-of select="./description/node()"/>
											</p>
										</xsl:if>
										<xsl:if test="not(normalize-space(./caption/node())='')">
											<a href="{./caption/node()}" class="more">Learn more</a>
										</xsl:if>
									</div>
								</div>
							</div>								
							</xsl:if>

							
						</li>
					</xsl:for-each>
				</ul>
			</div>
			<div class="switcher">
				<ul>
					<xsl:for-each select="images/image">
					<li>
						<xsl:if test="position()=1"><xsl:attribute name="class">active</xsl:attribute></xsl:if>
						<a href="#"><xsl:value-of select="position()"/></a>
					</li>
					
					</xsl:for-each>
				</ul>
			</div>
			<a href="#" class="btn-prev">prev</a>
			<a href="#" class="btn-next">next</a>
		</div>
		
	</xsl:template>
	
		
	<xsl:template match="gallery" mode="homepage-4h-gallery">
		<div class="gallery">
			<div class="frame">
				<ul>
					<xsl:for-each select="images/image">
						<li>
							
							<img src="{@url}" width="687" height="317" alt="{description}"/>
							
							<xsl:choose>
								<xsl:when test="string-length(caption)>0">
									<a href="{caption/node()}"><strong class="head"><xsl:value-of select="title"/></strong></a>
								</xsl:when>
								<xsl:otherwise>
									<strong class="head"><xsl:value-of select="title"/></strong>
								</xsl:otherwise>
							</xsl:choose>
							
						</li>
					</xsl:for-each>
				</ul>
			</div>
			<strong class="logo-4-h"><a href="#">4-H</a></strong>
			<a href="#" class="btn-prev">prev</a>
			<a href="#" class="btn-next">next</a>
			<div class="switcher">
				<ul>
					<xsl:for-each select="images/image">
					<li>
						<xsl:if test="position()=1"><xsl:attribute name="class">active</xsl:attribute></xsl:if>
						<a href="#"><xsl:value-of select="position()"/></a>
					</li>
					
					</xsl:for-each>
				</ul>
			</div>
			
		</div>
		
	</xsl:template>

</xsl:stylesheet>	
