@extends('layouts.theme')

@foreach($movies as $movie)
    <div id="myDiv">

    </div>

    <ul id="playlists" style="display:none;">
			<li data-source="playlist1" data-playlist-name="MY HTML PLAYLIST 1" data-thumbnail-path="content/thumbnails/large1.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My HTML playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>HTML</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using html elements, videos are loaded and played from the server.</p>
			</li>

			<li data-source="list=PLxKHVMqMZqUQFbRO0VWaHMaWuQagIgpJe"  data-playlist-name="MY YOUTUBE PLAYLIST 1" data-thumbnail-path="content/thumbnails/large2.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My Youtube playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>YOUTUBE</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created by loading a Youtube playlist, videos are loaded and played from Youtube.</p>
			</li>

			<li data-source="mixedPlaylist" data-playlist-name="MY MIXED PLAYLIST 1" data-thumbnail-path="content/thumbnails/large3.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My mixed playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>MIXED</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using HTML elements, videos are loaded and played from the server or Youtube.</p>
			</li>

			<li data-source="http://www.webdesign-flash.ro/p/uvp/content/playlist_dark.xml" data-playlist-name="MY XML PLAYLIST 1" data-thumbnail-path="content/thumbnails/large4.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My XML playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>XML</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using a XML file, videos are loaded and played from the server or Youtube.</p>
			</li>

			<li data-source="vimeoPlaylist" data-playlist-name="VIMEO PLAYLIST" data-thumbnail-path="content/thumbnails/large19.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>MY VIMEO PLAYLIST 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>VIMEO</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using HTML elements, videos are loaded and played from Vimeo.</p>
			</li>

			<li data-source="folder=videos" data-playlist-name="MY FOLDER PLAYLIST 1" data-thumbnail-path="content/thumbnails/large5.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My folder playlist 1</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>FOLDER</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using a folder with mp4 files, videos are loaded and played from the server.</p>
			</li>

			<li data-source="playlist1" data-playlist-name="MY HTML PLAYLIST 2" data-thumbnail-path="content/thumbnails/large6.jpg">
				<p class="minimalDarkCategoriesTitle"><span class="minimialDarkBold">Title: </span>My HTML playlist 2</p>
				<p class="minimalDarkCategoriesType"><span class="minimialDarkBold">Type: </span>HTML</p>
				<p class="minimalDarkCategoriesDescription"><span class="minimialDarkBold">Description: </span>Created using html elements, videos are loaded and played from the server.</p>
			</li>

		</ul>

		<!--  HTML playlist -->
		<ul id="playlist1" style="display:none;">

				<li data-thumb-source="content/thumbnails/small-fwd.jpg" data-video-source="{{ $movie->trailer_url }}" data-start-at-subtitle="2" data-downloadable="yes">	<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">VIDEO TITLE</p>
							<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">VIDEO TITLE</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>

				<li data-thumb-source="content/thumbnails/small-grid.jpg" data-video-source="content/videos/grid.mp4,content/videos/grid-mobile.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="yes">
				<ul data-ads="">
						<li data-source="content/videos/ad.mp4" data-time-start="00:00:20" data-time-to-hold-ads=4 data-thumbnail-source="content/images/thumbnail.jpg" data-link="http://www.webdesign-flash.ro" data-target="_blank"></li>
						<li data-source="https://www.youtube.com/watch?v=Bv09DRd4lsM" data-time-start="00:00:32" data-time-to-hold-ads=4 data-thumbnail-source="content/images/thumbnail.jpg" data-link="http://www.webdesign-flash.ro" data-target="_blank"></li>
						<li data-source="content/images/ad.jpg" data-time-start="00:00:48" data-time-to-hold-ads=4 data-add-duration="00:00:20" data-thumbnail-source="" data-link="http://www.webdesign-flash.ro/p/evp/content/images/ad.jpg" data-target="_blank"></li>
					</ul>
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">HORIZONTAL GRIDFOLIO PRO</p>
							<p class="minimalDarkThumbnailDesc">Fully responsive media grid plugin with HTML content support.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">HORIZONTAL GRIDFOLIO PRO</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/horizontal-gridfolio-pro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>

				<li data-thumb-source="content/thumbnails/small-rap.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-start-at-video="2" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="yes">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">ROYAL AUDIO PLAYER</p>
						<p class="minimalDarkThumbnailDesc">HTML5 mp3 player for your website that runs on all major browsers and mobile devices.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">ROYAL AUDIO PLAYER</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/rap/" target="_blank">this link</a></p>
					</div>
				</div>
				<ul data-annotations="">
						<li data-start-time="00:00:01" data-end-time="00:00:29" data-left="8" data-top="96" data-show-close-button="yes" data-normal-state-class="UVPAnnotationNormal">
							<div> Annotations like this can be added with ease!</div>
						</li>

						<li data-start-time="00:00:02" data-end-time="00:00:29" data-left="10" data-top="135" data-show-close-button="yes" data-click-source="http://www.webdesign-flash.ro" data-click-source-target="_blank" data-normal-state-class="UVPAnnotationLinkNormal" data-selected-state-class="UVPAnnotationLinkSelected">
							<div><span style="font-weight:bold; text-decoration: underline;">LINK</span> support, href and target can be specified, also animation between annotation states is possible as you can see here on hover.</div>
						</li>

						<li data-start-time="00:00:03" data-end-time="00:00:29" data-left="10" data-top="222" data-show-close-button="yes" data-click-source="alert('This is a javascript function called using the annotations feature of Ultimate Video Player!');" data-click-source-target="_blank" data-normal-state-class="UVPAnnotationJavascriptNormal" data-selected-state-class="UVPAnnotationJavascriptSelected">
							<div><span <span style="font-weight:bold; text-decoration: underline;">JAVASCRIPT</span> support, a javascript function can be called on click.</div>
						</li>

						<li data-start-time="00:00:04" data-end-time="00:00:29" data-left="670" data-top="280" data-normal-state-class="UVPAnnotationCSSNormal">
							<div>
							<p><span style="color:#0099FF; font-familly:myFont; font-weight:bold;">FULL CSS SUPPORT</span></p>
							<p><span style="color:#FFFFFF; font-familly:myFont; font-weight:bold;">OPTIONAL CLOSE BUTTON</span></div></p>
							<p><span style="color:#0099FF; font-familly:myFont; font-weight:bold;">FULL HTML SUPPORT</span></div></p>
							<p>The <span style="color:#0099FF; font-familly:myFont; font-weight:bold; text-decoration: underline;">start</span> / <span style="color:#0099FF; font-familly:myFont; font-weight:bold; text-decoration: underline;">show</span> time and <span style="color:#FFFFFF; font-familly:myFont; font-weight:bold; text-decoration: underline;">end</span> / <span style="color:#FFFFFF; font-familly:myFont; font-weight:bold; text-decoration: underline;">stop</span> time for each annotation can be specified with ease.</p>
						</li>

						<li data-start-time="00:00:32" data-end-time="00:01:06" data-left="590" data-top="98" data-show-close-button="no" data-normal-state-class="UVPAnnotationAPINormal">
							<div>ANNOTATIONS CAN BE USED TO CALL API METHODS!</div>
						</li>

						<li data-start-time="00:00:33" data-end-time="00:01:06" data-left="790" data-top="132" data-show-close-button="no" data-click-source="player1.play();" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>play</div>
						</li>

						<li data-start-time="00:00:34" data-end-time="00:01:06" data-left="790" data-top="177" data-show-close-button="no" data-click-source="player1.pause();" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>pause</div>
						</li>

						<li data-start-time="00:00:35" data-end-time="00:01:06" data-left="790" data-top="222" data-show-close-button="no" data-click-source="player1.scrub(0.6);" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>scrub to 60%</div>
						</li>

						<li data-start-time="00:00:36" data-end-time="00:01:06" data-left="790" data-top="266" data-show-close-button="no" data-click-source="player1.setVolume(0.5);" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>set volume to 50%</div>
						</li>

						<li data-start-time="00:00:37" data-end-time="00:01:06" data-left="790" data-top="310" data-show-close-button="no" data-click-source="player1.goFullScreen();" data-normal-state-class="UVPAnnotationPlayNormal" data-selected-state-class="UVPAnnotationPlaySelected">
							<div>go full screen</div>
						</li>

					</ul>
			</li>


			<li data-thumb-source="content/thumbnails/small-r3dcov.jpg" data-video-source="content/videos/grid.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="yes">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">ROYAL 3D COVERFLOW</p>
						<p class="minimalDarkThumbnailDesc">Fully responsive 3D Coverflow that allows to display media or HTML content with an unique layout.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">ROYAL 3D COVERFLOW</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/royal-3d-coverflow/" target="_blank">this link</a></p>
					</div>
				</div>
				<div data-add-popup="">
				<p data-image-path="content/images/img.jpg" data-time-start="00:00:01" data-time-end="00:00:10" data-link="http://www.webdesign-flash.ro" data-target="_blank"></p>
					<p data-image-path="content/images/img2.jpg" data-time-start="00:00:11" data-time-end="00:00:20" data-link="http://www.google.com" data-target="_blank"></p>
					<p data-google-ad-client="ca-pub-9227170916808685" data-google-ad-slot="7711195609" data-google-ad-width=400 data-google-ad-height=100 data-time-start="00:00:21" data-time-end="00:00:30"></p>
					<p data-google-ad-client="ca-pub-9227170916808685" data-google-ad-slot="7711195609" data-google-ad-width=400 data-google-ad-height=300 data-time-start="00:00:31" data-time-end="00:00:40"></p>
				</div>
			</li>

			<li data-thumb-source="content/thumbnails/small-r3dcar.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-downloadable="yes">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">VIDEO TITLE</p>
						<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">VIDEO TITLE</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
					</div>
				</div>
				<ul data-cuepoints="">
					<li data-time-start="00:00:10" data-javascript-call="alert('cuepoint called at time: 00:00:10');"></li>
					<li data-time-start="00:00:20" data-javascript-call="alert('cuepoint called at time: 00:00:20');"></li>
				</ul>
			</li>

			<li data-thumb-source="content/thumbnails/small-msp.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-is-private="yes" data-private-video-password="428c841430ea18a70f7b06525d4b748a">
				<div data-video-short-description="">
					<div>
						<p class="minimalDarkThumbnailTitle">PRIVATE VIDEO EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">Support for private videos.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">MP3 STICKY PLAYER</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/msp/" target="_blank">this link</a></p>
					</div>
				</div>
			</li>

			<li data-thumb-source="content/thumbnails/small-rap.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-start-at-time="00:00:10" data-stop-at-time="00:00:40">
				<div data-video-short-description="">
					<div>
						<p class="minimalDarkThumbnailTitle">START / STOP AT TIME EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">UVP can be set to start or / and stop at a specified time.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="minimalDarkVideoTitleDesc">MP3 STICKY PLAYER</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/msp/" target="_blank">this link</a></p>
					</div>
				</div>
			</li>

			<li data-thumb-source="content/thumbnails/small-rap.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-advertisement-on-pause-source="http://www.webdesign-flash.ro/iframe.html">
				<div data-video-short-description="">
					<div>
						<p class="minimalDarkThumbnailTitle">ADVERTISEMENT WINDOW ON PAUSE EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">The source can be any webpage.</p>
					</div>
				</div>

			</li>

			<li data-thumb-source="content/thumbnails/small-s3dcov.jpg" data-video-source="content/videos2/fwd-1080p.mp4" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-downloadable="no" data-vast-url="content/vast-pod.xml" data-vast-clicktrough-target="_blank" data-vast-linear-astart-at-time="00:00:00">
				<div data-video-short-description="">
					<div>
						<p class="classicDarkThumbnailTitle">VAST XML EXAMPLE</p>
						<p class="minimalDarkThumbnailDesc">Support for VAST <span style='color:#FFFFFF'> "Video Ad Serving Template"</span> pre-roll, mid-roll, post roll with unique functionality.</p>
					</div>
				</div>
				<div data-video-long-description="">
					<div>
						<p class="classicDarkThumbnailTitle">VAST XML EXAMPLE</p>
						<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
						<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/p/s3dcov/" target="_blank">this link</a></p>
					</div>
				</div>
			</li>

		</ul>

		<!--  HTML mixed playlist -->
		<ul id="mixedPlaylist" style="display:none;">
				<li data-thumb-source="content/thumbnails/small-fwd.jpg" data-video-source="[{source:'content/videos2/fwd-480p.mp4', label:'small version'}, {source:'content/videos2/fwd-720p.mp4', label:'hd720'},{source:'content/videos2/fwd-1080p.mp4', label:'hd1080'}]" data-start-at-video="2" data-poster-source="content/posters/mp4-poster.jpg,content/posters/mp4-poster-mobile.jpg" data-subtitle-soruce="[{source:'content/english_subtitle.txt', label:'English'}, {source:'content/romanian_subtitle.txt', label:'Romanian'},{source:'content/spanish_subtitle.txt', label:'Spanish'}]"  data-start-at-subtitle="2" data-downloadable="no">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">VIDEO TITLE</p>
							<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">VIDEO TITLE</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>

				<li data-thumb-source="content/thumbnails/small-lora.jpg" data-video-source="https://www.youtube.com/watch?v=oIHyVibVwVA" data-poster-source="content/posters/youtube-poster.jpg,content/posters/youtube-poster-mobile.jpg" data-downloadable="no">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">LORA PUISOR</p>
							<p class="minimalDarkThumbnailDesc">Each video can contain a short description, the description can be formatted with CSS as you like.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">LORA - PUISOR</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>

				<li data-thumb-source="content/thumbnails/v1.jpg" data-video-source="https://vimeo.com/channels/top/62092214" data-poster-source="content/posters/vimeo-poster.jpg,content/posters/vimeo-poster-mobile.jpg">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">BITING ELBOWS</p>
							<p class="minimalDarkThumbnailDesc">Support 'Hardcore' - the spiritual sequel to Bad Motherfucker on Indiegogo.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">BITING ELBOWS</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
			</ul>

		<!--  HTML vimeo playlist -->
		<ul id="vimeoPlaylist" style="display:none;">
				<li data-thumb-source="content/thumbnails/v1.jpg" data-video-source="https://vimeo.com/channels/top/62092214" data-poster-source="content/posters/vimeo-poster.jpg,content/posters/vimeo-poster-mobile.jpg">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">BITING ELBOWS</p>
							<p class="minimalDarkThumbnailDesc">Support 'Hardcore' - the spiritual sequel to Bad Motherfucker on Indiegogo.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">BITING ELBOWS</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>

				<li data-thumb-source="content/thumbnails/v2.jpg" data-video-source="https://vimeo.com/channels/top/22439234" data-poster-source="content/posters/vimeo-poster.jpg,content/posters/vimeo-poster-mobile.jpg">
					<div data-video-short-description="">
						<div>
							<p class="classicDarkThumbnailTitle">THE MOUNTAIN</p>
							<p class="minimalDarkThumbnailDesc">This was filmed between 4th and 11th April 2011. I had the pleasure of visiting El Teide.</p>
						</div>
					</div>
					<div data-video-long-description="">
						<div>
							<p class="minimalDarkVideoTitleDesc">THE MOUNTAIN</p>
							<p class="minimalDarkVideoMainDesc">Each video can contain a detailed description, the description can be formatted with CSS as you like. The description window and description button can be disabled individually for each video or globally for all videos.</p>
							<p class="minimalDarkLink">For more information about this please follow <a href="http://www.webdesign-flash.ro/" target="_blank">this link</a></p>
						</div>
					</div>
				</li>
			</ul>


@endforeach
@section('script')
  <script>
        FWDUVPUtils.onReady(function(){

            new FWDUVPlayer({

            //main settings
            instanceName:"player1",
            parentId:"myDiv",
            playlistsId:"playlists",
            mainFolderPath:"http://localhost/nexthour/public/content",
            skinPath:"minimal_skin_dark",
            displayType:"responsive",
            initializeOnlyWhenVisible:"no",
            useVectorIcons:"no",
            fillEntireVideoScreen:"no",
            useHEXColorsForSkin:"no",
            normalHEXButtonsColor:"#FF0000",
            selectedHEXButtonsColor:"#000000",
            useDeepLinking:"yes",
            rightClickContextMenu:"default",
            addKeyboardSupport:"yes",
            showPreloader:"yes",
            preloaderBackgroundColor:"#000000",
            preloaderFillColor:"#FFFFFF",
            autoScale:"yes",
            useResumeOnPlay:"yes",
            showButtonsToolTip:"yes",
            stopVideoWhenPlayComplete:"no",
            playAfterVideoStop:"no",
            autoPlay:"no",
            loop:"no",
            shuffle:"no",
            showErrorInfo:"yes",
            maxWidth:980,
            maxHeight:552,
            buttonsToolTipHideDelay:1.5,
            volume:.8,
            backgroundColor:"#000000",
            videoBackgroundColor:"#000000",
            posterBackgroundColor:"#000000",
            buttonsToolTipFontColor:"#5a5a5a",
            //logo settings
            showLogo:"yes",
            hideLogoWithController:"yes",
            logoPosition:"topRight",
            logoLink:"http://www.webdesign-flash.ro/",
            logoMargins:5,
            //playlists/categories settings
            showPlaylistsSearchInput:"no",
            usePlaylistsSelectBox:"no",
            showPlaylistsButtonAndPlaylists:"no",
            showPlaylistsByDefault:"no",
            thumbnailSelectedType:"opacity",
            startAtPlaylist:0,
            buttonsMargins:0,
            thumbnailMaxWidth:350,
            thumbnailMaxHeight:350,
            horizontalSpaceBetweenThumbnails:40,
            verticalSpaceBetweenThumbnails:40,
            inputBackgroundColor:"#333333",
            inputColor:"#999999",
            //playlist settings
            showPlaylistButtonAndPlaylist:"yes",
            playlistPosition:"right",
            showPlaylistByDefault:"no",
            showPlaylistName:"yes",
            showSearchInput:"yes",
            showLoopButton:"yes",
            showShuffleButton:"yes",
            showNextAndPrevButtons:"yes",
            showThumbnail:"yes",
            forceDisableDownloadButtonForFolder:"yes",
            addMouseWheelSupport:"yes",
            startAtRandomVideo:"no",
            stopAfterLastVideoHasPlayed:"no",
            folderVideoLabel:"VIDEO ",
            playlistRightWidth:310,
            playlistBottomHeight:599,
            startAtVideo:0,
            maxPlaylistItems:50,
            thumbnailWidth:70,
            thumbnailHeight:70,
            spaceBetweenControllerAndPlaylist:2,
            spaceBetweenThumbnails:2,
            scrollbarOffestWidth:8,
            scollbarSpeedSensitivity:.5,
            playlistBackgroundColor:"#000000",
            playlistNameColor:"#FFFFFF",
            thumbnailNormalBackgroundColor:"#1b1b1b",
            thumbnailHoverBackgroundColor:"#313131",
            thumbnailDisabledBackgroundColor:"#272727",
            searchInputBackgroundColor:"#000000",
            searchInputColor:"#999999",
            youtubeAndFolderVideoTitleColor:"#FFFFFF",
            folderAudioSecondTitleColor:"#999999",
            youtubeOwnerColor:"#888888",
            youtubeDescriptionColor:"#888888",
            mainSelectorBackgroundSelectedColor:"#FFFFFF",
            mainSelectorTextNormalColor:"#FFFFFF",
            mainSelectorTextSelectedColor:"#000000",
            mainButtonBackgroundNormalColor:"#212021",
            mainButtonBackgroundSelectedColor:"#FFFFFF",
            mainButtonTextNormalColor:"#FFFFFF",
            mainButtonTextSelectedColor:"#000000",
            //controller settings
            showController:"yes",
            showControllerWhenVideoIsStopped:"yes",
            showNextAndPrevButtonsInController:"no",
            showRewindButton:"yes",
            showPlaybackRateButton:"yes",
            showVolumeButton:"yes",
            showTime:"yes",
            showQualityButton:"yes",
            showInfoButton:"yes",
            showDownloadButton:"yes",
            showFacebookButton:"yes",
            showEmbedButton:"yes",
            showFullScreenButton:"yes",
            disableVideoScrubber:"no",
            showDefaultControllerForVimeo:"no",
            showMainScrubberToolTipLabel:"yes",
            repeatBackground:"yes",
            controllerHeight:37,
            controllerHideDelay:3,
            startSpaceBetweenButtons:7,
            spaceBetweenButtons:8,
            scrubbersOffsetWidth:2,
            mainScrubberOffestTop:14,
            timeOffsetLeftWidth:5,
            timeOffsetRightWidth:3,
            timeOffsetTop:0,
            volumeScrubberHeight:80,
            volumeScrubberOfsetHeight:12,
            timeColor:"#888888",
            youtubeQualityButtonNormalColor:"#888888",
            youtubeQualityButtonSelectedColor:"#FFFFFF",
            scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
            scrubbersToolTipLabelFontColor:"#5a5a5a",
            //advertisement on pause window
            aopwTitle:"Advertisement",
            aopwWidth:400,
            aopwHeight:240,
            aopwBorderSize:6,
            aopwTitleColor:"#FFFFFF",
            //subtitle
            subtitlesOffLabel:"Subtitle off",
            //popup add windows
            showPopupAdsCloseButton:"yes",
            //embed window and info window
            embedAndInfoWindowCloseButtonMargins:0,
            borderColor:"#333333",
            mainLabelsColor:"#FFFFFF",
            secondaryLabelsColor:"#a1a1a1",
            shareAndEmbedTextColor:"#5a5a5a",
            inputBackgroundColor:"#000000",
            inputColor:"#FFFFFF",
            //audio visualizer
            audioVisualizerLinesColor:"#0099FF",
            audioVisualizerCircleColor:"#FFFFFF",
            //lightbox settings
            lightBoxBackgroundOpacity:.6,
            lightBoxBackgroundColor:"#000000",
            //sticky on scroll
            stickyOnScroll:"no",
            stickyOnScrollShowOpener:"yes",
            stickyOnScrollWidth:"700",
            stickyOnScrollHeight:"394",
            //sticky display settings
            showOpener:"yes",
            showOpenerPlayPauseButton:"yes",
            verticalPosition:"bottom",
            horizontalPosition:"center",
            showPlayerByDefault:"yes",
            animatePlayer:"yes",
            openerAlignment:"right",
            mainBackgroundImagePath:"http://localhost/nexthour/public/content/minimal_skin_dark/main-background.png",
            openerEqulizerOffsetTop:-1,
            openerEqulizerOffsetLeft:3,
            offsetX:0,
            offsetY:0,
            //loggin
            isLoggedIn:"no",
            playVideoOnlyWhenLoggedIn:"no",
            loggedInMessage:"Please login to view this video.",
            //playback rate / speed
            defaultPlaybackRate:1, //0.25, 0.5, 1, 1.25, 1.2, 2
            //cuepoints
            executeCuepointsOnlyOnce:"no",
            //ads
            openNewPageAtTheEndOfTheAds:"no",
            playAdsOnlyOnce:"no",
            adsButtonsPosition:"left",
            skipToVideoText:"You can skip to video in: ",
            skipToVideoButtonText:"Skip Ad",
            adsTextNormalColor:"#888888",
            adsTextSelectedColor:"#FFFFFF",
            adsBorderNormalColor:"#666666",
            adsBorderSelectedColor:"#FFFFFF",
            //a to b loop
            useAToB:"yes",
            atbTimeBackgroundColor:"transparent",
            atbTimeTextColorNormal:"#888888",
            atbTimeTextColorSelected:"#000000",
            atbButtonTextNormalColor:"#FFFFFF",
            atbButtonTextSelectedColor:"#FFFFFF",
            atbButtonBackgroundNormalColor:"#888888",
            atbButtonBackgroundSelectedColor:"#000000"
            });
        });

        //Register API (an setInterval is required because the player is not available until the youtube API is loaded).
    			var registerAPIInterval;
    			function registerAPI(){
    				clearInterval(registerAPIInterval);
    				if(window.player1){
    					player1.addListener(FWDUVPlayer.READY, readyHandler);
    					player1.addListener(FWDUVPlayer.ERROR, errorHandler);
    					player1.addListener(FWDUVPlayer.PLAY, playHandler);
    					player1.addListener(FWDUVPlayer.PAUSE, pauseHandler);
    					player1.addListener(FWDUVPlayer.STOP, stopHandler);
    					player1.addListener(FWDUVPlayer.UPDATE, updateHandler);
    					player1.addListener(FWDUVPlayer.UPDATE_TIME, updateTimeHandler);
    					player1.addListener(FWDUVPlayer.UPDATE_VIDEO_SOURCE, updateVideoSourceHandler);
    					player1.addListener(FWDUVPlayer.UPDATE_POSTER_SOURCE, updatePosterSourceHandler);
    					player1.addListener(FWDUVPlayer.START_TO_LOAD_PLAYLIST, startToLoadPlaylistHandler);
    					player1.addListener(FWDUVPlayer.LOAD_PLAYLIST_COMPLETE, loadPlaylistCompleteHandler);
    					player1.addListener(FWDUVPlayer.PLAY_COMPLETE, playCompleteHandler);
    				}else{
    					registerAPIInterval = setInterval(registerAPI, 100);
    				}
    			};

    			//API event listeners examples
    			function readyHandler(e){
    				//console.log("API -- ready to use");
    			}

    			function errorHandler(e){
    				console.log(e.error);
    			}

    			function playHandler(e){
    				//console.log("API -- play");
    			}

    			function pauseHandler(e){
    				//console.log("API -- pause");
    			}

    			function stopHandler(e){
    				//console.log("API -- stop");
    			}

    			function updateHandler(e){
    				//console.log("API -- update video, percent played: " + e.percent);
    			}

    			function updateTimeHandler(e){
    				//console.log("API -- update time: " + e.currentTime + "/" + e.totalTime);
    			}

    			function updateVideoSourceHandler(e){
    				//console.log("API -- video source update: " + player1.getVideoSource());
    			}

    			function updatePosterSourceHandler(e){
    				//console.log("API -- video source update: " + player1.getPosterSource());
    			}

    			function startToLoadPlaylistHandler(e){
    				//console.log("API -- start to load playlist: " + player1.getCurCatId());
    			}

    			function loadPlaylistCompleteHandler(e){
    				//console.log("API -- playlist load complete: " + player1.getCurCatId());
    			}

    			function playCompleteHandler(e){
    				//console.log("API -- play complete");
    			}


    			//API methods examples
    			function play(){
    				player1.play();
    			}

    			function playNext(){
    				player1.playNext();
    			}

    			function playPrev(){
    				player1.playPrev();
    			}

    			function playShuffle(){
    				player1.playShuffle();
    			}

    			function playVideo(videoId){
    				player1.playVideo(videoId);
    			}

    			function pause(){
    				player1.pause();
    			}

    			function stop(){
    				player1.stop();
    			}

    			function scrub(percent){
    				player1.scrub(percent);
    			}

    			function setVolume(percent){
    				player1.setVolume(percent);
    			}

    			function share(){
    				player1.share();
    			}

    			function download(){
    				player1.downloadVideo();
    			}

    			function goFullScreen(){
    				player1.goFullScreen();
    			}

    			function showCategories(){
    				player1.showCategories();
    			}



    			function loadPlaylist(playlistId){
    				player1.loadPlaylist(playlistId);
    			}
  </script>
@endsection