<?php

	require("vimeo.php-1.2.3/autoload.php");

	$clientId = 'e2112fed4ff03170d021e84578321f947abe29c2';
	$clientSecret = 'K6JM/74kFPN6MM5ji9J9B6VBBL3jjnwGxVKjpKdsQHJ758rmEbQyoagIWvbGoeNRikOV8qVv0yW453kRRu5FE2IMA8VpkOjNyT+2U2sAG6eaKifcFOzJgwUTib9i6pyY';
	$token = '9219e38b00a0e8bcfddf403b28711784';

	$vimeo = new \Vimeo\Vimeo($clientId, $clientSecret, $token );

	//$vimeo -> setToken( $token );

	$videos = $vimeo->request('/channels/1038300/videos', array('sort' => 'manual', 'per_page' => 100), 'GET')['body']['data'];
	//$videos = $vimeo->request('/channels/1038300/videos', array('sort' => 'manual', 'per_page' => 100), 'GET');

	//$videos = $vimeo -> request('/me/videos', array('per_page' => 6), 'GET')['body']['data'];

/*
var_dump($videos);
exit;
*/

	/* New array of videos to embed - 04/02/2025 */
	$videos_2025 = [
		207777439 => "https://i.vimeocdn.com/video/622944187-6c66e441e409c672d0137f8ebd95e6d800e142142e145a6cb88ac483f62c09f0-d_640x360?r=pad",
		207761056 => "https://i.vimeocdn.com/video/622924210-fb8960653b6edbacb9bd5e66cfca8569ec2dedaf5bbd3bd3e1ee2d28502457a8-d_640x360?r=pad",
		207306808 => "https://i.vimeocdn.com/video/622348643-be6d730f565fb8c685bdbb1268f0a8bd3508d976642383f130ec91c2105a0a98-d_640x360?r=pad",
		207089700 => "https://i.vimeocdn.com/video/622068720-64e95a50706c8a76366f7dee1f541a78193f3feb514af5d5bb6154a684e78877-d_640x360?r=pad",
		204022729 => "https://i.vimeocdn.com/video/618447341-671b98a229c98873b81d2dc2dc0154de5d0b855bd9bd1b442af8d12ad0ec47b9-d_640x360?r=pad",
		204021756 => "https://i.vimeocdn.com/video/618447450-a7cbb26bdb73da44090f5fae83df3acd20c9e0dce7586c4bfc67c12173d4b8f3-d_640x360?r=pad",
		204020364 => "https://i.vimeocdn.com/video/618447572-2a1f15b46b4414312ac3dc8d1be986128b371a74423b577d0644df2d3fa08ff7-d_640x360?r=pad",
		204019161 => "https://i.vimeocdn.com/video/618447694-6999ac3d43b513cf73ee66119c992331bf1776bca838a1f01a27936b69d35832-d_640x360?r=pad",
		200327090 => "https://i.vimeocdn.com/video/613802428-9d24cdf3bf2ebbe84d029abd0a7fca6c05931dff1e5cdbd2192ab7f7cc24a68f-d_640x360?r=pad",
		200326038 => "https://i.vimeocdn.com/video/613802680-57b3fcb66b0509d809b43506e45219b82db38250adbc1a40f2e6c86982c339e3-d_640x360?r=pad",
		200324342 => "https://i.vimeocdn.com/video/613801594-d848e8f938983f1f8512990841d4caef6041fdcfda85eba8096a49773f1bc435-d_640x360?r=pad",
		200323845 => "https://i.vimeocdn.com/video/613797998-8faa26bcf26dc9f69223e1c30642682cb5f68ac8d750be875bc4777adbe53b0d-d_640x360?r=pad",
		200322620 => "https://i.vimeocdn.com/video/613796800-ae736eebd11044b46b4cf43e864caaca6ba4ad2a9276218b9f868be806932bf1-d_640x360?r=pad"
	];

	function getEmbedUrl($video){
		$url = $video['uri'];
		$parts = explode('/', $url);
		$id = array_pop($parts);
		return 'https://player.vimeo.com/video/' . $id;// + "?autoplay=" + autoplay + '&loop=' + loop
	}
 /* New - 04/02/2025 */
	function getEmbedUrlNew($id){
		return 'https://player.vimeo.com/video/' . $id;// + "?autoplay=" + autoplay + '&loop=' + loop
	}

?>

<html>

	<head>

		<title>Creative Journeys</title>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="shortcut icon" href="img/icon.png">

		<style>

			@font-face{
				font-family: "GT Cinetype";
				src: url('GT-Cinetype-Light.eot') format('eot'), url('GT-Cinetype-Light.woff') format('woff'), url('GT-Cinetype-Light.ttf') format('truetype');
			}

			body{
				margin: 0;
				color: white;
				font-family: 'GT Cinetype', sans-serif;
				font-size: 16px;
				line-height: 1.5;
			}

			a, a:focus, a:visited{
				color: inherit;
				text-decoration: none;
				pointer-events: visible;
			}

			section{
				background: red;
				position: relative;
				-webkit-transition: padding-bottom 1s, margin-bottom 1s;
				        transition: padding-bottom 1s, margin-bottom 1s;
			}

			section.white{
				background: white;
				margin-bottom: 0 !important;
			}

			section.white p{
				text-align: center;
				color: #000;
				padding: 50px;
			}

			section.white p a, section.white p a:hover{
				color: #0080ff !important;
			}

			section.black{
				background: black;
			}

			section:first-child{
				height: 90vh;
			}

			section:not(:last-of-type){
				margin-bottom: 5px;
				margin-bottom: 0.33rem;
			}

			p{
				text-align: center;
				margin: 0;
			}

			#about a{
				color: cyan;
			}

			#about p{
				padding-left: 32px;
				padding-left: 2rem;
				padding-right: 32px;
				padding-right: 2rem;
				padding-bottom: 16px;
				padding-bottom: 1rem;
			}

			#about p:first-child{
				padding-top: 48px;
				padding-top: 3rem;
			}

			#about p:last-child{
				padding-bottom: 48px;
				padding-bottom: 3rem;
			}

			#sponsors{
				position: absolute;
				top: 32px;
				top: 2rem;
				width: 60%;
				left: 20%;
				z-index: 1;
			}

			#sponsors img{
				position: absolute;
			}

			#sorrell{
				width: 16%;
				left: 0;
			}

			#headtrust{
				width: 15%;
				left: 23%;
			}

			#artscouncil{
				width: 54%;
				left: 46%;
			}

			#logoimage{
				position: absolute;
				top: 50%;
				left: 5%;
				width: 90%;
				-webkit-transform: translateY(-50%);
				    -ms-transform: translateY(-50%);
				        transform: translateY(-50%);
			}

			#logovideo{
				display: none;
			}

			#hashtag{
				width: 100%;
				text-align: center;
				position: absolute;
				bottom: 48px;
				bottom: 3rem;
			}

			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			#copyright{
				padding-top: 32px;
				padding-top: 2rem;
				padding-bottom: 0;
			}

			#filmcredit{
				padding-bottom: 0;
				padding-top: 16px;
				padding-top: 1rem;
			}

			#credit{
				padding-top: 16px;
				padding-top: 1rem;
				padding-bottom: 32px;
				padding-bottom: 2rem;
			}

			.sixteen-nine{
				padding-bottom: 56.25%;
				position: relative;
			}

			.collapsed{
				padding-bottom: 0;
				margin-bottom: 0;
			}

			.video-thumb-container{
				width: calc(50% - 0.16666rem);
				display: inline-block;
				vertical-align: bottom;
				margin-bottom: 5px;
				margin-bottom: 0.333rem;
			}

			.video-thumb-container:nth-child(odd){
				margin-right: 5px;
				margin-right: 0.33333rem;
			}

			.video-thumb{
				position: relative;
				background-size: cover;
				cursor: pointer;
			}

			.video-thumb span{
				position: absolute;
				top: 50%;
				width: 80%;
				left: 10%;
				-webkit-transform: translateY(-50%);
				    -ms-transform: translateY(-50%);
				        transform: translateY(-50%);
				text-align: center;
				opacity: 0;
				filter: alpha(opacity=0);
				-webkit-transition: opacity 0.2s;
				        transition: opacity 0.2s;
			}

			@media screen and (min-width: 768px){

				body{
					font-size: 24px;
				}

				section:not(:last-of-type){
					margin-bottom: 0.45rem;
				}

				section:first-of-type{
					height: 85vh;
				}
				/*
				#logovideo{
					display: block;
					position: absolute;
					top: -1%;
					bottom: -1%;
					left: -1%;
					right: -1%;
				}

				video{
					background: red;
				}
				*/
				#sponsors{
					width: 36.5%;
					left: 3%;
				}

				#logoimage{
					width: 94%;
					left: 3%;
					/*display: none;*/
				}
				/*
				#hashtag{
					display: none;
				}
				*/
				.video-thumb-container{
					width: calc( 25% - 0.3375rem );
					margin-bottom: 0.45rem;
				}

				.video-thumb-container:nth-child(odd){
					margin-right: 0;
				}

				.video-thumb-container:nth-child(4n+1),
				.video-thumb-container:nth-child(4n+2),
				.video-thumb-container:nth-child(4n+3){
					margin-right: 0.45rem;
				}

				#about p{
					padding-left: 20%;
					padding-right: 20%;
				}

				#about p:first-child{
					padding-top: 6rem;
				}

				#about p:last-child{
					padding-bottom: 6rem;
				}

				section:last-of-type{
					height: 8.3rem;
				}

				#copyright, #filmcredit, #credit{
					position: absolute;
					top: 3rem;
					left: 3rem;
					right: 3rem;
					display: inline-block;
					padding: 0 !important;
					pointer-events: none;
				}

				#copyright{
					text-align: left;
					padding-left: 3rem;
					padding-right: 0;
				}

				#credit{
					text-align: right;
					padding-left: 0;
					padding-right: 0;
				}

			}

		</style>

	</head>

	<body>

		<section>

			<div id="sponsors">

				<a href="http://saturday-club.org/about-us/" target=_blank>
					<img id="sorrell" src="img/sorrell.svg">
				</a>

				<img id="headtrust" src="img/headtrust.svg">

				<a href="http://artscouncil.org.uk/" target=_blank>
					<img id="artscouncil" src="img/artscouncil.svg">
				</a>

			</div>
			<!--
			<a href="http://saturday-club.org/about-us/" target="_blank">
				<img id="sponsors" src="img/sponsors.svg">
			</a>
			-->
			<img id="logoimage" src="img/logo.svg">
			<!--
			<div id="logovideo">
				<video width="100%" height="100%" autoplay loop style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">
					<source src="logo.mp4" type="video/mp4">
				</video>
			</div>
			-->
			<a id="hashtag" href="http://www.twitter.com/hashtag/CreativeJourneys" target=_blank>#CreativeJourneys</a>

		</section>

		<section class="black sixteen-nine">

			<iframe src="https://player.vimeo.com/video/157617937" frameborder=0 allowfullscreen></iframe>

		</section>

		<section id="about">

			<p>We all know that studying subjects like Art & Design and Design & Technology can be fun and rewarding, They can even help you concentrate better and make you think more creatively. But can they lead to real jobs and careers?</p>

			<p>Yes, they absolutely can! In fact, the creative industries are some of the UK’s most successful, varied and fastest growing sectors. And they provide millions of fulfilling job opportunities.</p>

			<p>Watch this film and click on the links below to hear from some of the UK’s leading designers, architects, engineers and other creative professionals about how they got started, and learn how the options you choose for GCSE can help you begin your own creative journey. With thanks to all the creative professionals, National Art&Design Saturday Club members, tutors and parents who were interviewed.</p>

			<p>#CreativeJourneys is a Sorrell Foundation project supported by HEAD Trust (the Higher Education in Art and Design Foundation) and Arts Council England.</p>

		</section>

		<section class="black sixteen-nine collapsed">

			<iframe id="player" frameborder=0 allowfullscreen></iframe>

		</section>

		<section class="white">
<!--
			<? foreach($videos as $video) : ?><div class="video-thumb-container">

					<div
						class="video-thumb sixteen-nine"
						style="background-image: url(<?= $video['pictures']['sizes'][3]['link']?>)"
						data-video-embed="<?= getEmbedUrl($video) ?>"
					>
					</div>

				</div><? endforeach; ?>
-->

<? foreach($videos_2025 as $k => $v) : ?><div class="video-thumb-container">

		<div
			class="video-thumb sixteen-nine"
			style="background-image: url(<?= $v?>)"
			data-video-embed="<?= getEmbedUrlNew($k) ?>"
		>
		</div>

	</div><? endforeach; ?>

		</section>

		<section>

			<p id="copyright">&copy; The Sorrell Foundation</p><p id="filmcredit">Film: <a href="http://upclosefilms.com/" target=_blank>Up Close Films</a></p><p id="credit">Design: <a href="http://templo.co.uk/" target="_blank">TEMPLO</a></p>

		</section>

		<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
		<script>

			$(function(){

				var $player = $('#player');
				var $body = $('body, html');

				$('.video-thumb').one('click', function(){
					$('.collapsed').removeClass('collapsed');
				}).each(function(){

					var $this = $(this);
					var url = $this.data('video-embed');

					$this.click(function(){
						$player.attr('src', url);
						$body.animate({
							scrollTop: $player.offset().top
						})
					})

				})

			})

			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-93346629-1', 'auto');
			ga('send', 'pageview');

		</script>

	</body>

</html>
