From afffa3bf0d83d29baf2d12aa0bb2b87d2c55536c Mon Sep 17 00:00:00 2001
From: Leif Hanson <leif@gaslightmedia.com>
Date: Fri, 14 Jun 2013 20:56:44 +0000
Subject: [PATCH] Styled the blog rotator.

---
 Toolkit/Page.php        |  6 ++++
 libjs/blogRotate.js     | 10 ++++++
 styles.css              | 72 +++++++++++++++++++++++++++++++++++++----
 templates/template.html | 21 +++++++-----
 4 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100755 libjs/blogRotate.js

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index ede62cb..b26921f 100755
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -366,6 +366,12 @@ class Toolkit_Page
         } else {
             $this->isHomePage = false;
         }
+        
+        if($this->isHomePage) {
+            $GLOBALS['bottomScripts'][] = $this->glmAppBaseURL . "libjs/plugins/cycle/2.73/jquery.cycle.all.min.js";
+            $GLOBALS['bottomScripts'][] = $this->baseURL . "libjs/blogRotate.js";
+        }
+        
         if ($this->_catid != HOME_ID) {
             $this->parentPageId = $this->_pageGateway->findTopParent($this->_catid);
             $this->pageId = $this->_catid;
diff --git a/libjs/blogRotate.js b/libjs/blogRotate.js
new file mode 100755
index 0000000..62aac48
--- /dev/null
+++ b/libjs/blogRotate.js
@@ -0,0 +1,10 @@
+$(document).ready(function(){
+    $('#blog_wrapper').cycle({
+        fx: 'scrollHorz',
+        pause: 1,
+        timeout: 7000,
+        next: '#prev-blog',
+        prev: '#next-blog',
+        rev: 1
+    });
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
index dabe396..346246d 100755
--- a/styles.css
+++ b/styles.css
@@ -715,17 +715,32 @@ header {
 	text-indent: -9000px;
 	background: url(assets/go.gif) no-repeat;
 }
-#action2 #blog_wrapper {
+#action2 h2 {
+	display: block;
+	font-size: 22px;
+	font-size: 2.2rem;
+	padding-top: 20px;
+	padding-left: 16px;
+}
+#action2 #blog_wrapper_outer {
 	float: right;
 	margin: 30px 30px 20px 0;
-	padding: 0 12px 10px 20px;
 	width: 410px;
-	overflow: hidden;
+	height: 166;
 }
-#action2 #blog_wrapper h2 {
-	font-size: 22px;
-	font-size: 2.2rem;
-	padding-top: 0;
+#action2 #blog_wrapper {
+	float: right;
+	width: 410px;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	height: 140px;
+}
+#action2 #blog_wrapper article {
+	display: block;
+	width: 96%;
+	padding: 0px 2%;
+	height: 140px;
 }
 #action2 #blog_wrapper p.blog_date {
 	color: #000;
@@ -750,6 +765,49 @@ header {
 	margin-top: 5px;
 	padding-top: 5px;
 }
+#action2 #blog_wrapper_outer {
+	float: right;
+	width: 410px;
+	margin: 0 30px 20px 0;
+	height: 166px;
+	position: relative;
+}
+#blog_wrapper_outer #prev-blog {
+	font-family: Arial, Helvetica, sans-serif;
+	position: absolute;
+	z-index: 25;
+	background: #B8C728;
+	width: auto;
+	bottom: 0;
+	left: 2%;
+	height: 26px;
+	cursor: pointer;
+	background: #8A1E03;
+	border: 2px solid #FFF;
+	border-radius: 6px;
+	color: #FFF;
+	font-weight: bold;
+	text-transform: uppercase;
+	padding: 3px 8px;
+}
+#blog_wrapper_outer #next-blog {
+	font-family: Arial, Helvetica, sans-serif;
+	position: absolute;
+	z-index: 25;
+	background: #B8C728;
+	width: auto;
+	bottom: 0;
+	right: 2%;
+	height: 26px;
+	cursor: pointer;
+	background: #8A1E03;
+	border: 2px solid #FFF;
+	border-radius: 6px;
+	color: #FFF;
+	font-weight: bold;
+	text-transform: uppercase;
+	padding: 3px 8px;
+}
 /* Photo Gallery */
 .gallery {
 	list-style: none;
diff --git a/templates/template.html b/templates/template.html
index aef9625..cd45179 100755
--- a/templates/template.html
+++ b/templates/template.html
@@ -154,14 +154,19 @@
 							<p>Now open - the <a href="baseurl/shop-4/">MichiganTrailMaps.com Trail Shop</a> with personally autographed books by the authors that wrote them! It's the best and most affordable way to purchase maps and trail guides to Michigan.</p>
 							<a id="goToShop" href="baseurl/shop-4/">Go</a>
 						</div><!--/#trailshop_wrapper-->
-						<div id="blog_wrapper">
-							<h2>Trail Talk Blog</h2>
-                            <article flexy:foreach="feed,item">
-                                <p class="blog_date">{item.getPubdateFormated(#D, F j, Y g:iA#)}</p>
-                                <a class="blog_link" href="{item.getGuid():h}">{item.getTitle()}</a>
-                                <p class="blog_desc">{item.getDescription():h}</p>
-                            </article>
-						</div><!--/#blog_wrapper-->
+						<h2>Trail Talk Blog</h2>
+						<div id="blog_wrapper_outer">
+							<div id="blog_wrapper">
+								<article flexy:foreach="feed,item">
+									<p class="blog_date">{item.getPubdateFormated(#D, F j, Y g:iA#)}</p>
+									<a class="blog_link" href="{item.getGuid():h}">{item.getTitle()}</a>
+									<p class="blog_desc">{item.getDescription():h}</p>
+								</article>
+								
+							</div><!--/#blog_wrapper-->
+							<div id="prev-blog">Prev</div>
+							<div id="next-blog">Next</div>
+						</div>
 					</div><!--/#action2-->
 				</div><!--/hHlines_wrapper-->
 			</div><!--/#content-->
-- 
2.17.1