<?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="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="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="weather-feed" select="if (ou:pcf-param('weather-feed') != '') then ou:pcf-param('weather-feed') else $ou:feed" />
		<xsl:variable name="events-feed" select="if (ou:pcf-param('events-feed') != '') then ou:pcf-param('events-feed') else $ou:feed" />
		
        <div id="HomeSlider" class="progress-carousel carousel slide with_video" data-interval="false" role="region" aria-label="Marquee Image Slider">
	
					<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>
					<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: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>

<style type="text/css">
	
/** Apply Now **/

.apply-now-content-advancement {
    /*position: relative;*/
    background: #fff;
    padding: 15px 20px;
    margin-left: 0;
	padding-right: 12px;

}

.apply-now-content-advancement .apply-now-advancement {
    max-width: 100%;
    padding: 0 6px;
    background-color: #ffffff;
    border-left: 4px solid #f8c23a;
}

.apply-now-content-advancement .apply-now-advancement h3 {
    font-size: 21px;
    text-transform: uppercase;
}

.apply-now-content-advancement .apply-now-advancement p {
    font-size: 12px;
}

.apply-now-content-advancement .apply-now-advancement .more-link {
    font-family: "Raleway-Bold";
    font-size: 18px;
    color: #6b0d0e;;
    text-transform: uppercase;
	margin-right: 20px;
}

.apply-now-content-advancement .apply-now-advancement p,
.apply-now-content-advancement .apply-now-advancement h3,
.apply-now-content-advancement .apply-now-advancement .more-link {
    margin: 0;
    padding: 0;
    line-height: inherit;
}







@media (min-width: 768px) {


    .apply-now-content-advancement {
        margin-left: -15px;
        padding: 0;
        background: transparent;
	padding-right: 18px;
    }
    .apply-now-content-advancement .apply-now-advancement {
        max-width: 247px;
        padding: 10px 20px;
        position: absolute;
        bottom: 50%;
        left: 15%;
    }
    .apply-now-content-advancement .apply-now-advancement p,
    .apply-now-content-advancement .apply-now-advancement h3,
    .apply-now-content-advancement .apply-now-advancement .more-link {
        line-height: inherit;
        font-size: 10.56px;
        padding: 0;
        margin: 0;
	margin-right: 20px;
    }
    .apply-now-content-advancement .apply-now-advancement h3 {
        font-size: 18.48px;
    }
}



@media (min-width: 1200px) {  
.apply-now-content-advancement {
        margin-left: -15px;
        padding: 0;
        background: transparent;
	padding-right: 18px;
    }
    .apply-now-content-advancement .apply-now-advancement {
        border-left: 8px solid #f8c23a;
        max-width: 400px;
        padding: 15px 30px;
        position: absolute;
        bottom: 50%;
        left: 15%;
    }
    .apply-now-content-advancement .apply-now-advancement h3 {
        font-size: 28px;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .apply-now-content-advancement .apply-now-advancement p,
    .apply-now-content-advancement .apply-now-advancement .more-link {
        font-size: 18px;
        padding-left: 10px;
        line-height: 28px;
	margin-right: 12px;
    }
}

	
</style>
		

		


		
			<!-- 
            <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="col-md-12">
<xsl:apply-templates select="ouc:div[@label = 'nav-bar']" />
			</div> -->			
		
		
			<xsl:apply-templates select="ouc:div[@label = 'nav-bar']" />
		
			<div class="col-md-12">&nbsp;</div>
		
			<div class="container card-container undergraduate" role="main" id="main">
		<xsl:apply-templates select="ouc:div[@label = 'page-title']" />
        <div class="row row-container row-top-md">
			
			
			
			
            <div class="col-md-12">
				
				<div>
					<xsl:apply-templates select="ouc:div[@label = 'page-content']" />
                </div>
				<!-- 
                <div class="row padtop30px">

                    <div class="col-sm-12 ratio-img-sm">

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

				<div class="row row-container row-top-md">
				<div class="col-md-12"><xsl:apply-templates select="ouc:div[@label = 'connect-copy']" /></div>
			</div>
		
		<!-- -->
			<div class="row row-container row-top-md">
				<div class="col-md-12"><xsl:apply-templates select="ouc:div[@label = 'flip-tiles']" /></div>
			</div>
			
				
				
				
				
		<!-- <div class="row row-container row-top-md" style="margin-top:-25px;"> -->
				
				<!--
			<div class="row row-container flip-image-container row-top-md">
				
            <div class="col-md-3">
                <div class="flip-item">
                    <img src="{flip-items/flip-1/ouc:div[@label='flip-image-1']}" alt="{flip-items/flip-1/ouc:div[@label='flip-image-alt-1']}"/>
					
					<div class="flip-item-content">
                        <h4 style="text-align:center;"><xsl:value-of select="flip-items/flip-1/ouc:div[@label='flip-title-1']" /></h4>
                    </div>
					
                    <div class="flip">
                        <h4 class="flip-title"><xsl:value-of select="flip-items/flip-1/ouc:div[@label='flip-title-1']" /></h4>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-1/ouc:div[@label='flip-description-1']" /></p>
                        <a href="{flip-items/flip-1/ouc:div[@label='flip-more-link-1']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-1/ouc:div[@label='flip-more-1']" /></a>
                    </div>
                </div>
            </div>
            
			
            <div class="col-md-3 top-sm">
                <div class="flip-item">
                    <img src="{flip-items/flip-2/ouc:div[@label='flip-image-2']}" class="img-fluid img-width" alt="{flip-items/flip-2/ouc:div[@label='flip-image-alt-2']}"/>
                    <div class="flip-item-content">
                        <h4 style="text-align:center;"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-title-2']" /></h4>
                    </div>
                    <div class="flip">
                        <h4 class="flip-title"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-title-2']" /></h4>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-description-2']" /></p>
                        <a href="{flip-items/flip-2/ouc:div[@label='flip-more-link-2']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-more-2']" /></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 top-sm">
                <div class="flip-item">
                    <img src="{flip-items/flip-3/ouc:div[@label='flip-image-3']}" class="img-fluid img-width" alt="{flip-items/flip-3/ouc:div[@label='flip-image-alt-3']}"/>
                    <div class="flip-item-content">
                        <h4 style="text-align:center;"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-title-3']" /><br/>
							<xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-title-desc-3']" /></h4>
                    </div>
                    <div class="flip">
                        <h4 class="flip-title"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-title-3']" /></h4>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-description-3']" /></p>
                        <a href="{flip-items/flip-3/ouc:div[@label='flip-more-link-3']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-more-3']" /></a>
                    </div>
                </div>
            </div>
				
				
				<div class="col-md-3 top-sm">
                <div class="flip-item">
                    <img src="{flip-items/flip-4/ouc:div[@label='flip-image-4']}" class="img-fluid img-width" alt="{flip-items/flip-4/ouc:div[@label='flip-image-alt-4']}"/>
                    <div class="flip-item-content">
                        <h4 style="text-align:center;"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-title-4']" /><br/>
							<xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-title-desc-4']" /></h4>
                    </div>
                    <div class="flip">
                        <h4 class="flip-title"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-title-4']" /></h4>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-description-4']" /></p>
                        <a href="{flip-items/flip-4/ouc:div[@label='flip-more-link-4']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-more-4']" /></a>
                    </div>
                </div>
            </div>

 </div>
-->
		
			 </div>


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

