<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY copy   "&#169;">
<!ENTITY nbsp "&#xa0;">
]>

<xsl:stylesheet version="3.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"
	xmlns="http://www.w3.org/1999/xhtml"
	exclude-result-prefixes="ou xsl xs fn ouc">

	<xsl:import href="common-cvpa.xsl"/>

	<xsl:template name="common-layout">
			<xsl:call-template name="common-header" />
			<xsl:call-template name="page-content" />
			<xsl:call-template name="common-footer" />
	</xsl:template>

	<xsl:template name="page-content">	
		
		<xsl:param name="path" select="$dirname" />
		
		<xsl:param name="title" select="ou:pcf-param('breadcrumb')" />
		<xsl:param name="heading" select="ou:pcf-param('heading')" />
		<xsl:param name="updated-user" select="$ou:username" />
		<xsl:param name="updated-date" select="$ou:modified" />
		<xsl:variable name="profile_image_no" select="profile-image/profile-info/ouc:div[@label='no-of-profile-image']" />
		<xsl:variable name="profile-type" select="profile-image/profile-info/ouc:div[@label='profile-type']" />
		
		<xsl:variable name="banner_type_1" select="banner-items/banner-1/ouc:div[@label='display-type-1']" />
		<xsl:variable name="banner_type_2" select="banner-items/banner-2/ouc:div[@label='display-type-2']" />
		<xsl:variable name="banner_type_3" select="banner-items/banner-3/ouc:div[@label='display-type-3']" />	
		<xsl:variable name="banner_type_4" select="banner-items/banner-4/ouc:div[@label='display-type-4']" />
		<xsl:variable name="banner_type_5" select="banner-items/banner-5/ouc:div[@label='display-type-5']" />
		<xsl:variable name="banner_type_6" select="banner-items/banner-6/ouc:div[@label='display-type-6']" />
		<xsl:variable name="banner_type_7" select="banner-items/banner-7/ouc:div[@label='display-type-7']" />
        <xsl:variable name="banner_type_8" select="banner-items/banner-8/ouc:div[@label='display-type-8']" />
        <xsl:variable name="banner_type_9" select="banner-items/banner-9/ouc:div[@label='display-type-9']" />
        <xsl:variable name="banner_type_10" select="banner-items/banner-10/ouc:div[@label='display-type-10']" />
			
		<xsl:variable name="video_banner_1" select="banner-items/banner-1/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_2" select="banner-items/banner-2/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_3" select="banner-items/banner-3/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_4" select="banner-items/banner-4/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_5" select="banner-items/banner-5/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_6" select="banner-items/banner-6/ouc:div[@label='banner-video']" />
        <xsl:variable name="video_banner_7" select="banner-items/banner-7/ouc:div[@label='banner-video']" />
        <xsl:variable name="video_banner_8" select="banner-items/banner-8/ouc:div[@label='banner-video']" />
        <xsl:variable name="video_banner_9" select="banner-items/banner-9/ouc:div[@label='banner-video']" />
        <xsl:variable name="video_banner_10" select="banner-items/banner-10/ouc:div[@label='banner-video']" />
		
		<xsl:variable name="this-props-path" select="concat($ou:root, $ou:site, $path, $props-file)"/>	<!-- props-file is defined in vars xsl -->
		<xsl:variable name="iframe-link" select="iframe-video/ouc:div[@label='iframe-video-link']" />
		
		<div class="col-sm-12-cvpa marquee-content-cvpa" role="region" aria-label="Marquee Header">
         <div class="marquee-cvpa">
			 <div class="hmove">
			 <div class="marquee-vert-center">
            <!-- <h1>ARTS ADMINISTRATION</h1> -->
				 <h1>
				<!-- <xsl:value-of select="ouc:properties[@label='config']/parameter[@name='marquee']"/> --> <!-- This would need to be set if you want the marquee on individual pages -->
				<xsl:value-of select="document($this-props-path)/document/ouc:properties[@label='config']/parameter[@name='marquee']"/> <!-- This sets the header scrolling marquee on the section level -->
				
				 
				 </h1>
				 
				 </div>
				 </div>
         </div>
      </div>
		
		
		
		<div id="HomeSliderSec" class="carousel slide innerPageSlider" data-ride="carousel">
		
		
            
				<div class="carousel-inner" role="region" aria-label="Marquee Image Slider">

					


					<xsl:choose> <!-- Banner 1-->
						<xsl:when test="$banner_type_1 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-1/ouc:div[@label='banner-image-1']}" alt="{banner-items/banner-1/ouc:div[@label='banner-image-alt-1']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_1 ='Video'">
							<div class="carousel-item">
								<div id="video_1" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					<xsl:choose> <!-- Banner 2-->
						<xsl:when test="$banner_type_2 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-2/ouc:div[@label='banner-image-2']}" alt="{banner-items/banner-2/ouc:div[@label='banner-image-alt-2']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_2 ='Video'">
							<div class="carousel-item">
								<div id="video_2" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					<xsl:choose> <!-- Banner 3-->
						<xsl:when test="$banner_type_3 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-3/ouc:div[@label='banner-image-3']}" alt="{banner-items/banner-3/ouc:div[@label='banner-image-alt-3']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_3 ='Video'">
							<div class="carousel-item">
								<div id="video_3" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
			
			<xsl:choose> <!-- Banner 4-->
						<xsl:when test="$banner_type_4 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-4/ouc:div[@label='banner-image-4']}" alt="{banner-items/banner-4/ouc:div[@label='banner-image-alt-4']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_4 ='Video'">
							<div class="carousel-item">
								<div id="video_4" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
			
			<xsl:choose> <!-- Banner 5-->
						<xsl:when test="$banner_type_5 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-5/ouc:div[@label='banner-image-5']}" alt="{banner-items/banner-5/ouc:div[@label='banner-image-alt-5']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_5 ='Video'">
							<div class="carousel-item">
								<div id="video_5" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
			
			<xsl:choose> <!-- Banner 6-->
						<xsl:when test="$banner_type_6 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-6/ouc:div[@label='banner-image-6']}" alt="{banner-items/banner-6/ouc:div[@label='banner-image-alt-6']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_6 ='Video'">
							<div class="carousel-item">
								<div id="video_6" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					
				<xsl:choose> <!-- Banner 7-->
						<xsl:when test="$banner_type_7 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-7/ouc:div[@label='banner-image-7']}" alt="{banner-items/banner-7/ouc:div[@label='banner-image-alt-7']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_7 ='Video'">
							<div class="carousel-item">
								<div id="video_7" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					
					<xsl:choose> <!-- Banner 8-->
						<xsl:when test="$banner_type_8 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-8/ouc:div[@label='banner-image-8']}" alt="{banner-items/banner-8/ouc:div[@label='banner-image-alt-8']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_8 ='Video'">
							<div class="carousel-item">
								<div id="video_8" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					
					<xsl:choose> <!-- Banner 9-->
						<xsl:when test="$banner_type_9 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-9/ouc:div[@label='banner-image-9']}" alt="{banner-items/banner-9/ouc:div[@label='banner-image-alt-9']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_9 ='Video'">
							<div class="carousel-item">
								<div id="video_9" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					
            <xsl:choose> <!-- Banner 10-->
						<xsl:when test="$banner_type_10 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-10/ouc:div[@label='banner-image-10']}" alt="{banner-items/banner-10/ouc:div[@label='banner-image-alt-10']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_10 ='Video'">
							<div class="carousel-item">
								<div id="video_10" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>

			 <xsl:choose>
     <xsl:when test="$banner_type_2 ='Image' or $banner_type_2 ='Video'">
					<a class="carousel-control-prev" href="#HomeSliderSec" role="button" data-slide="prev" onClick="pauseVideo()">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#HomeSliderSec" role="button" data-slide="next" onClick="pauseVideo()">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
					</xsl:when>
     <xsl:otherwise>
		  </xsl:otherwise>
   </xsl:choose>
					
					
			<!--		
			<a class="carousel-control-prev" href="#HomeSlider" role="button" data-slide="prev" onClick="pauseVideo()">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#HomeSlider" role="button" data-slide="next" onClick="pauseVideo()">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
-->
		</div>
</div>

		
			<!--             <hr class="transition-timer-carousel-progress-bar" /> -->
			
		
	<!-- <script type="text/javascript" src="/_resources/js/gallery-secondary.js"></script>  -->
	<script src="/_resources/js/header-randomSlideShow.js"></script>	
	<script type="text/javascript" src="/js/youtubebackground.js"></script>
			
			<script type="text/javascript">

				$('#video_1').YTPlayer({
					playerVars: {
					  controls: 0,
					  showinfo: 0,
					  branding: 0,
					  rel: 0
    				},
					fitToBackground: true,
					videoId: '<xsl:value-of select="$video_banner_1" />'
				});
				$('#video_2').YTPlayer({
					playerVars: {
					  controls: 0,
					  showinfo: 0,
					  branding: 0,
					  rel: 0
    				},
					fitToBackground: true,
					videoId: '<xsl:value-of select="$video_banner_2" />'
				});
				$('#video_3').YTPlayer({
					playerVars: {
					  controls: 0,
					  showinfo: 0,
					  branding: 0,
					  rel: 0
    				},
					fitToBackground: true,
					videoId: '<xsl:value-of select="$video_banner_3" />'
				});
			function pauseVideo()
			{
			/*
				if($('#video_1'))
				{
					var player1 = $('#video_1').data('ytPlayer').player;
					player1.pauseVideo();
				}
				if($('#video_2'))
				{
					var player2 = $('#video_2').data('ytPlayer').player;
					player2.pauseVideo();
				}
				if($('#video_3'))
				{
					var player3 = $('#video_3').data('ytPlayer').player;
					player3.pauseVideo();
				}
			*/
			}
</script>
		<div class="container card-container" role="main" id="main">
            <nav class="nav-breadcrumb" aria-label="breadcrumb">
            	<ol class="breadcrumb">
					<xsl:call-template name="breadcrumb" />
				</ol>
			</nav>
			<div class="row sm-hide">
                <div class="col-sm-12 padding-lrt">
   					<xsl:call-template name="navigation" /> 
				</div>
			</div>
			
			<div class="row top-pad" role="region" aria-label="Profile Content">
				<div class="col-lg-12 col-md-12 col-sm-12 padding-lrt">
                    <div class="profile-content">
						
						
						<xsl:if test="not($heading='')">
    <h1><xsl:value-of select="$heading" /></h1>
</xsl:if>
<xsl:if test="$heading=''">

</xsl:if>
						
 						<!-- <h2><xsl:value-of select="$heading" /></h2> -->
						
						
						
						
						<div id="profile" class="profile-image carousel slide" data-ride="carousel">
							<div class="carousel-inner">
								<div class="carousel-item-no-marquee active">
									<img src="{profile-image/profile-1/ouc:div[@label='profile-image-1']}" alt="{profile-image/profile-1/ouc:div[@label='profile-text-1']}" class="img-lft img-fluid profileImg facultyProfileBioPics"/>
								</div>
								<xsl:if test="$profile_image_no &gt;= '2'">
									<div class="carousel-item-no-marquee">
										<img src="{profile-image/profile-2/ouc:div[@label='profile-image-2']}" alt="{profile-image/profile-2/ouc:div[@label='profile-text-2']}" class="img-lft img-fluid profileImg facultyProfileBioPics"/>
									</div>
								</xsl:if>
								<xsl:if test="$profile_image_no &gt;= '3'">
									<div class="carousel-item-no-marquee">
										<img src="{profile-image/profile-3/ouc:div[@label='profile-image-3']}" alt="{profile-image/profile-3/ouc:div[@label='profile-text-3']}" class="img-lft img-fluid profileImg facultyProfileBioPics"/>
									</div>
								</xsl:if>
								<xsl:if test="$profile_image_no &gt;= '4'">
									<div class="carousel-item-no-marquee">
										<img src="{profile-image/profile-4/ouc:div[@label='profile-image-4']}" alt="{profile-image/profile-4/ouc:div[@label='profile-text-4']}" class="img-lft img-fluid profileImg facultyProfileBioPics"/>
									</div>
								</xsl:if>
								<xsl:if test="$profile_image_no &gt;= '5'">
									<div class="carousel-item-no-marquee">
										<img src="{profile-image/profile-5/ouc:div[@label='profile-image-5']}" alt="{profile-image/profile-5/ouc:div[@label='profile-text-5']}" class="img-lft img-fluid profileImg facultyProfileBioPics"/>
									</div>
								</xsl:if>
							</div>
							<xsl:if test="$profile_image_no = '1'">
								<span style="padding-bottom: 10px;">&nbsp;</span>
								</xsl:if>
							<xsl:if test="$profile_image_no &gt; '1'">
							<ol class="profile-count carousel-indicators">
								<li data-target="#profile" data-slide-to="0" class="active">1</li>
								<xsl:if test="$profile_image_no &gt;= '2'">
									<li data-target="#profile" data-slide-to="1" class="">2</li>
								</xsl:if>
								<xsl:if test="$profile_image_no &gt;= '3'">
								<li data-target="#profile" data-slide-to="2" class="">3</li>
								</xsl:if>
								<xsl:if test="$profile_image_no &gt;= '4'">
								<li data-target="#profile" data-slide-to="3" class="">4</li>
								</xsl:if>
								<xsl:if test="$profile_image_no &gt;= '5'">
								<li data-target="#profile" data-slide-to="4" class="">5</li>
								</xsl:if>
								
							</ol>
								</xsl:if>
						</div>
						<div class="profile-block">
							
                            <div class="profile-text"> 
								
								
								<xsl:if test="$profile-type = 'Student'">
									<xsl:apply-templates select="ouc:div[@label = 'profile-text-student']" />
								</xsl:if>
								<xsl:if test="$profile-type = 'Donor'">
									<xsl:apply-templates select="ouc:div[@label = 'profile-text-donor']" />
								</xsl:if>
								<xsl:if test="$profile-type = 'Faculty'">
									<xsl:apply-templates select="ouc:div[@label = 'profile-text-faculty']" />
								</xsl:if>
								<xsl:if test="$profile-type = 'Alumni'">
									<xsl:apply-templates select="ouc:div[@label = 'profile-text-alumni']" />
								</xsl:if>
								<xsl:if test="$profile-type = 'Staff'">
									<xsl:apply-templates select="ouc:div[@label = 'profile-text-staff']" />
								</xsl:if>
							</div>
						</div>
						<xsl:apply-templates select="ouc:div[@label = 'profile-content']" />
						<!-- <p class="font-text">Last updated by <xsl:value-of select="$updated-user" />&nbsp;<xsl:value-of select="format-dateTime($updated-date,'[M01]/[D01]/[Y0001]')" /> </p> -->
						
						<!-- <a href="#" class="button btn" title="See All Profiles"><img src="/_resources/images/left_Arrow_Icon.png" class="arrow-icon img-fluid" alt="Button Arrow"/>
							<span class="padlft10px">SEE ALL PROFILES</span>
						</a> -->
					</div>
				</div>
			</div>
		</div>
	</xsl:template>

	<xsl:template name="common-footer">
	<script type="text/javascript" src="/_resources/js/cvpa-remove-marquee.js"></script> 
	<script type="text/javascript" src="/_resources/js/cvpa-social-media-links-and-ticket-stub-for-dept-template.js"></script> 
		<xsl:call-template name="unparsed-include-file">
			<xsl:with-param name="path">/_resources/includes/footer-cvpa.inc</xsl:with-param>
		</xsl:call-template>
	</xsl:template>

	<xsl:template name="common-header">
		<xsl:call-template name="unparsed-include-file">
				<xsl:with-param name="path">/_resources/includes/header-cvpa.inc</xsl:with-param> 
		</xsl:call-template>
	</xsl:template>
	
</xsl:stylesheet>
