From 08889d3241fa7b58f9be0a5061b921b05e752b19 Mon Sep 17 00:00:00 2001
From: Ruud <ruud@crashdummy.nl>
Date: Sun, 22 Jan 2012 00:11:03 +0100
Subject: [PATCH] backtotop button

---
 .../static/scripts/block/navigation.js        | 28 +++++++++++++++++--
 couchpotato/static/style/main.css             | 22 +++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/couchpotato/static/scripts/block/navigation.js b/couchpotato/static/scripts/block/navigation.js
index 6167f494..d659cfd8 100644
--- a/couchpotato/static/scripts/block/navigation.js
+++ b/couchpotato/static/scripts/block/navigation.js
@@ -5,7 +5,31 @@ Block.Navigation = new Class({
 	create: function(){
 		var self = this;
 
-		self.el = new Element('ul.navigation');
+		self.el = new Element('div.navigation').adopt(
+			self.nav = new Element('ul'),
+			self.backtotop = new Element('a.backtotop', {
+				'text': 'back to top',
+				'events': {
+					'click': function(){
+						window.scroll(0,0)
+					}
+				},
+				'tween': {
+					'duration': 100
+				}
+			})
+		)
+		
+		new ScrollSpy({
+			min: 400,
+			onLeave: function(){
+				self.backtotop.fade('out')
+			},
+			onEnter: function(){
+				self.backtotop.fade('in')
+			}
+		})
+	
 	},
 
 	addTab: function(tab){
@@ -13,7 +37,7 @@ Block.Navigation = new Class({
 
 		return new Element('li').adopt(
 			new Element('a', tab)
-		).inject(self.el)
+		).inject(self.nav)
 
 	}
 
diff --git a/couchpotato/static/style/main.css b/couchpotato/static/style/main.css
index b4b1fc52..b0adee38 100644
--- a/couchpotato/static/style/main.css
+++ b/couchpotato/static/style/main.css
@@ -178,6 +178,8 @@ body > .spinner, .mask{
 	.header .navigation {
 		display: inline-block;
 		width: 75%;
+	}
+	.header .navigation ul {
 		margin: 0;
 		padding: 0;
 	}
@@ -218,6 +220,26 @@ body > .spinner, .mask{
 		.header .navigation li a:hover, .header .navigation li a:active {
 			color: #b1d8dc;
 		}
+		
+		.header .navigation .backtotop {
+			opacity: 0;
+			display: block;
+			width: 80px;
+			left: 50%;
+			position: absolute;
+			text-align: center;
+			margin: -10px 0 0 -40px;
+			background: #4e5969;
+			padding: 5px 0;
+			
+		    border-radius: 0 0 5px 5px;
+		    -moz-border-radius: 0 0 5px 5px;
+		    -webkit-border-radius: 0 0 5px 5px;
+		    color: rgba(255,255,255,.4);
+		    text-shadow: none;
+		    font-weight: normal;
+		}
+			.header:hover .navigation .backtotop { color: #fff; }
 	
 	.header .message.update {
 		text-align: center;