From c09436897a397a6e9588048981b0fadfcfa9fa90 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Thu, 24 Apr 2014 15:52:28 +0000
Subject: [PATCH] Update styles for the videos

---
 Toolkit/Videos/WebPageDecorator.php           |  10 +-
 Toolkit/Videos/libjs/videos.js                |  18 ++-
 Toolkit/Videos/templates/webDecorator.html    |  22 ++--
 .../Videos/templates/webPageDecorator.html    | 108 +++++++++++++++---
 static/17.phtml                               |   6 +
 styles.css                                    |  10 +-
 6 files changed, 143 insertions(+), 31 deletions(-)
 create mode 100644 static/17.phtml

diff --git a/Toolkit/Videos/WebPageDecorator.php b/Toolkit/Videos/WebPageDecorator.php
index 689f220..89b38ff 100644
--- a/Toolkit/Videos/WebPageDecorator.php
+++ b/Toolkit/Videos/WebPageDecorator.php
@@ -53,10 +53,12 @@ class Toolkit_Videos_WebPageDecorator implements Toolkit_Videos_IDecorator
         PDO $dbh,
         $gateway = null
     ) {
-        $GLOBALS['styleSheets'][]
-            = MEDIA_APP_BASE_URL . 'gallery/colorbox/colorbox.css';
-        $GLOBALS['bottomScripts'][]
-            = MEDIA_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js';
+        //$GLOBALS['styleSheets'][]
+        //    = MEDIA_APP_BASE_URL . 'gallery/colorbox/colorbox.css';
+        //$GLOBALS['bottomScripts'][]
+        //    = MEDIA_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js';
+        $GLOBALS['styleSheets'][] = MEDIA_BASE_URL . 'fancybox/jquery.fancybox.css';
+        $GLOBALS['bottomScripts'][] = MEDIA_BASE_URL . "fancybox/jquery.fancybox.js";
         $GLOBALS['bottomScripts'][]
             = MEDIA_BASE_URL . 'Toolkit/Videos/libjs/videos.js';
         $dbh = Toolkit_Database::getInstance();
diff --git a/Toolkit/Videos/libjs/videos.js b/Toolkit/Videos/libjs/videos.js
index 6080caf..b0db468 100644
--- a/Toolkit/Videos/libjs/videos.js
+++ b/Toolkit/Videos/libjs/videos.js
@@ -1,6 +1,8 @@
 var GLMColorBox = {
     init: function() {
-        $('a.colorbox').colorbox({iframe: true, innerWidth:425, innerHeight:344});
+        var width = $(window).width() * .85;
+        var height = $(window).height() * .8;
+        //$('a.colorbox').colorbox({iframe: true, innerWidth:width, innerHeight:height});
         $('select.posSelect').each(function () {
             $(this).change(function(){
                 var id = $(this).attr('rel');
@@ -12,3 +14,17 @@ var GLMColorBox = {
 };
 
 $(document).ready(GLMColorBox.init);
+
+$(document).ready(function() {
+	$(".various").fancybox({
+		maxWidth	: 1200,
+		maxHeight	: 800,
+		fitToView	: false,
+		width		: '100%',
+		height		: '100%',
+		autoSize	: false,
+		closeClick	: false,
+		openEffect	: 'none',
+		closeEffect	: 'none'
+	});
+});
diff --git a/Toolkit/Videos/templates/webDecorator.html b/Toolkit/Videos/templates/webDecorator.html
index d7114d0..bc2b530 100644
--- a/Toolkit/Videos/templates/webDecorator.html
+++ b/Toolkit/Videos/templates/webDecorator.html
@@ -1,11 +1,17 @@
 <div id="v" class="hBox">
-	<h2>Check out our Video Spotlight</h2>
-	<h3>{title:h}</h3>
-	<a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox">
-		<img src="http://img.youtube.com/vi/{vCode}/0.jpg" width="400">
-		<img src="assets/videoOverlay.png" width="400" id="videoOverlay">
+	<!--<h2>Check out our Video Spotlight</h2>-->
+	<!--<a id="video_link_img" href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox" style="background: url(http://img.youtube.com/vi/{vCode}/0.jpg) 50% 50%; background-size: cover;">
+		<img src="http://img.youtube.com/vi/{vCode}/0.jpg">
 	</a>
-		<p>
-		<a href="{videoUrl}">See All Our Videos</a>
-	</p>
+	<a id="video_link_txt" href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="colorbox">{title}</a>
+    <p>{descr}</p>
+	<a id="video_link_main" href="{videoUrl}">See All Our Videos</a>
+	
+	-->
+	<a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="various fancybox.iframe" id="vidimg">
+		<img src="http://img.youtube.com/vi/{vCode}/0.jpg">
+		<span id="video_link_txt">Watch {title}</span>
+		<span id="vidoverlay"></span>
+	</a>
+	<a id="video_link_main" href="{videoUrl}">See All Our Videos</a>
 </div>
diff --git a/Toolkit/Videos/templates/webPageDecorator.html b/Toolkit/Videos/templates/webPageDecorator.html
index 71622ca..3152aab 100644
--- a/Toolkit/Videos/templates/webPageDecorator.html
+++ b/Toolkit/Videos/templates/webPageDecorator.html
@@ -1,14 +1,96 @@
-<div id="videoGallery">
-  {foreach:videos,v}
-  {if:v[firstInRow]}<div class="vRow">{end:}
-  <div class="vThumb">
-    <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="colorbox">
-      <img src="http://img.youtube.com/vi/{v[code]}/default.jpg">
-    </a>
-    <div class="vTitle">
-      {v[title]:h}
-    </div>
-  </div>
-  {if:v[lastInRow]}</div><!-- /.galleryRow --> {end:}
-  {end:}
+<div id="video_wrapper">
+<!--<h2>Videos</h2>-->
+<ul id="videoGallery">
+	{foreach:videos,v}
+		<li>
+			<a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="various fancybox.iframe" id="vidimg">
+				<img src="http://img.youtube.com/vi/{v[code]}/0.jpg">
+				<span class="vidtitle">{v[title]:h}<span class="play"></span></span>
+				
+			</a>
+		</li>
+	{end:}
+</ul>
 </div>
+
+<script type="text/javascript">
+var screenWidth = 0;
+var colCount = 0;
+var rowCount = 0;
+var cellCount = 0;
+var maxHeight = 0;
+
+$(window).load(function() {
+    getScreenWidth();
+    fixVidTitles();
+});
+
+$( window ).resize(debouncer(function(e) {
+    getScreenWidth();
+    $('#videoGallery #vidimg').css("height", "auto");
+    colCount = 0;
+    rowCount = 0;
+    cellCount = 0;
+    maxHeight = 0;
+    fixVidTitles();
+}));
+
+
+function fixVidTitles() {
+    /* Get the number of columns */
+    if(screenWidth >= 600) {
+        colCount = 4;
+    } else if (screenWidth < 599) {
+        colCount = 2;
+    }
+    $('#videoGallery #vidimg').each(function(index) {
+        /* Get the current row. */
+        if(index == 0) {
+            rowCount = 0;
+        } else {
+            rowCount = Math.floor(index / colCount);
+        }
+        /* Get the current cell withing this row. */
+        var intRegex = /^\d+$/;
+        if((intRegex.test(index / colCount)) && (cellCount != 0)) {
+            cellCount = 0;
+            maxHeight = 0;
+        } else {
+            if(index != 0) {
+                cellCount++;
+            }
+        }
+        /* Find the tallest height in this row. */
+        var currentHeight = $(this).outerHeight();
+        if(currentHeight > maxHeight) {
+            maxHeight = currentHeight;
+        }
+        /* Set other cells in this row to the new max height */
+        if((cellCount == colCount - 1) || (index + 1 == $('#videoGallery #vidimg').length)) {
+            for(i = 0; i < cellCount + 1; i++) {
+                var oldHeight = $('#videoGallery #vidimg').eq(index-i).height();
+                $('#videoGallery #vidimg').eq(index-i).css("height", maxHeight + "px");
+                var newPadding = maxHeight - oldHeight;
+                //$('#hHlines ul li a h3.hHlinesHeader').eq(index-i).css("padding-top", newPadding + "px");
+            }
+        }
+    });
+}
+
+/* Get screen Width and Send it to global variable. */
+function getScreenWidth() {
+    screenWidth = $.viewportW();
+}
+
+/* Run resize events only when the users pauses their resize movement. */
+function debouncer(func,timeout) {
+    var timeoutID , timeout = timeout || 200;
+    return function () {
+        var scope = this , args = arguments;
+        clearTimeout( timeoutID );
+        timeoutID = setTimeout( function () {
+                func.apply( scope , Array.prototype.slice.call( args ) );
+        } , timeout );
+    }
+}
+</script>
\ No newline at end of file
diff --git a/static/17.phtml b/static/17.phtml
new file mode 100644
index 0000000..76f114c
--- /dev/null
+++ b/static/17.phtml
@@ -0,0 +1,6 @@
+<?php
+$gallery = new Toolkit_Videos_WebPageDecorator();
+echo $gallery->toHtml(
+    Toolkit_Database::getInstance(),
+    null
+);
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 510a4f9..4d9543f 100644
--- a/styles.css
+++ b/styles.css
@@ -589,7 +589,7 @@ ul#videoGallery {
 ul#videoGallery li {
     display: block;
     float: left;
-    width: 22%;
+    width: 180px;
     margin: 0 1.5% 24px 1.5%;
     padding: 0;
     border: 1px solid #DDDFDD;
@@ -602,15 +602,15 @@ ul#videoGallery li:hover {
 ul#videoGallery li:nth-child(4n-3) {
     clear: left;
     width: 180px;
-    margin: 0 3% 24px 0;
+    margin: 0 1% 24px 0;
 }
 ul#videoGallery li:nth-child(4n-2) {
     width: 180px;
-    margin: 0 3% 24px 0;
+    margin: 0 1% 24px 0;
 }
 ul#videoGallery li:nth-child(4n-1) {
     width: 180px;
-    margin: 0 3% 24px 0;
+    margin: 0 1% 24px 0;
 }
 ul#videoGallery li:nth-child(4n) {
     width: 180px;
@@ -620,7 +620,7 @@ ul#videoGallery li a {
     position: relative;
     z-index: 10;
     display: block;
-    width: 100%;
+    width: 90%;
     overflow: hidden;
     padding: 10px;
     text-decoration: none;
-- 
2.17.1