<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY copy   "&#169;">
<!ENTITY nbsp "&#xa0;">
]>
<!--
07/26/2016	-	Don't display line if only one row.
07/26/2016	-	Center 1st column on 1st Row if not 2nd column 
-->

<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.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="updated-date" select="$ou:modified" />
		<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="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']" />
		
        <div id="HomeSlider" class="progress-carousel carousel slide with_video" data-interval="false">
            <div class="carousel-inner">
				
					<xsl:choose> <!-- Banner 1-->
						<xsl:when test="$banner_type_1 ='Image'">
							<div class="carousel-item active">
								<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 active">
								<div id="video_1" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					
						<!-- Banner 2-->
						<!-- 
                    <xsl:choose> 
						<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:if test="$video_banner != ''"> 
					<div class="carousel-item active">
						<div id="video"></div>
					</div>
					<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:if>
				<xsl:if test="$video_banner = ''"> 
                <div class="carousel-item active">
                    <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:if>
				
				<xsl:if test="$banner2 != ''"> 
				<div class="carousel-item">
					<img src="{banner-items/banner-2/ouc:div[@label='banner-image-2']}" alt="{banner-items/banner-1/ouc:div[@label='banner-image-alt-2']}" class="w-100"/>
				</div>
				</xsl:if>
				<xsl:if test="$banner3 != ''"> 
					<div class="carousel-item">
						<img src="{banner-items/banner-3/ouc:div[@label='banner-image-3']}" alt="{banner-items/banner-2/ouc:div[@label='banner-image-alt-3']}" class="w-100"/>
					</div>
				</xsl:if> -->
            
<!-- 
			<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>
		<!--             <hr class="transition-timer-carousel-progress-bar" /> -->
<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>
		<div class="container card-container undergraduate">
            <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>
			
			
		<p class="audienceHeader"><xsl:apply-templates select="ouc:div[@label = 'page-title']" /></p>
        <div class="row row-container row-top-md">
            <div class="col-md-8">
				
				<div>
					
					<xsl:apply-templates select="ouc:div[@label = 'page-content']" />
                </div>
				
                <div class="row padtop30px">
                    <div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image']" />
							
						</div>
						<!--
						<p>
							<xsl:apply-templates select="ouc:div[@label = 'acc']" />
							</p>
-->
                    </div>
					<div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image2']" />
						</div>
						<!--
						<p>
							<xsl:apply-templates select="ouc:div[@label = 'acc2']" />
							</p>
-->
                    </div>
                    
 </div>
                
				
				
				
				<div>
					
					<xsl:apply-templates select="ouc:div[@label = 'page-content']" />
                </div>
				
                <div class="row padtop30px">
                    <div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image3']" />
						</div>
                    </div>
					<div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image4']" />
						</div>
                    </div>
                    
<div class="col-sm-12 ratio-img-sm">
<!-- 						<xsl:apply-templates select="ouc:div[@label = 'image_1']" /> -->
                    </div>
					
                </div>
					
					
			<!--	
				
				<div>
					
					<xsl:apply-templates select="ouc:div[@label = 'page-content']" />
                </div>
				
                <div class="row padtop30px">
                    <div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image5']" />
						</div>
                    </div>
					<div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image6']" />
						</div>
                    </div>
                    

                </div>
-->
				
				
					
		</div>
	
		
			
			
            <div class="col-md-4">
                <div class="ratio-img-md">
					<xsl:apply-templates select="ouc:div[@label = 'image_1']" />
                </div>
				<xsl:apply-templates select="ouc:div[@label = 'apply-now']" />
            </div>
			

		</div>
			<xsl:apply-templates select="ouc:div[@label = 'page-title2']" />
	
			</div>
		
		

	</xsl:template>
</xsl:stylesheet>

