From 804483beac90976c61ce2f30ff89e3306442cc18 Mon Sep 17 00:00:00 2001
From: Connor Turland <connor@madhattertech.ca>
Date: Sat, 5 Jan 2013 14:07:46 -0500
Subject: [PATCH] made mousewheel scrolling for metacode selection work, and
 also added ability to use up and down arrow keys to pick metacode

---
 app/assets/javascripts/application.js         |  3 +-
 .../carousel/cloud-carousel.1.0.5.js          | 35 ++++++++++++++++---
 app/assets/stylesheets/base.css               |  8 ++---
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 86ffa8b5..07f5bf46 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -149,7 +149,8 @@ function addMetacode() {
 			yRadius:40,
 			xPos: 150,
 			yPos: 40,
-			speed:0.15, 
+			speed:0.15,
+			mouseWheel:true, 
 			bringToFront: true
 		});
 		metacodeIMGinit = true;
diff --git a/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js b/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js
index 491a4c37..7ca777ad 100644
--- a/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js
+++ b/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js
@@ -127,6 +127,30 @@
 			return false;
 		});
 		
+		// Add code that makes up and down arrows scroll through.
+		$('.new_topic').bind('keydown keypress',this,function(event) {
+			//console.log(event)
+			if (event.keyCode == 38 || event.keyCode == 40) 
+			{
+				//e.preventDefault();
+			}
+		});
+		$('.new_topic').bind('keyup',this,function(event){
+			console.log(event);
+			/*key navigation through elements*/
+			if (event.keyCode == 38 || event.keyCode == 40) {
+				switch ( event.keyCode ) {
+					case 38: // Up
+						event.data.rotate(-1);
+						break;
+					case 40: // Down
+						event.data.rotate(1);
+						break;
+				}
+				return;
+			}
+		});
+		
 		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
 		if (options.mouseWheel)
 		{
@@ -149,10 +173,10 @@
 				//$(options.titleBox).html( ($(event.target).attr('title') ));							
 				if ( options.bringToFront && event.type == 'click' )				
 				{
-          $(options.titleBox).html( ($(event.target).attr('title') ));
-				  // METAMAPS CODE
-			    $('#topic_metacode').val($(event.target).attr('title'));
-			    // NOT METAMAPS CODE
+                    $(options.titleBox).html( ($(event.target).attr('title') ));
+				    // METAMAPS CODE
+			        $('#topic_metacode').val($(event.target).attr('title'));
+			        // NOT METAMAPS CODE
 					var	idx = $(event.target).data('itemIndex');	
 					var	frontIndex = event.data.frontIndex;
 					//var	diff = idx - frontIndex;                    
@@ -188,7 +212,7 @@
 		this.showFrontText = function()
 		{	
 			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
-      // METAMAPS CODE
+            // METAMAPS CODE
 			$('#topic_metacode').val($(items[this.frontIndex].image).attr('title'));
 			// NOT METAMAPS CODE
 			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
@@ -213,6 +237,7 @@
 		this.rotate = function(direction)
 		{	
 			this.frontIndex -= direction;
+			if (this.frontIndex == -1) this.frontIndex = items.length - 1;
 			this.frontIndex %= items.length;					 			
 			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
 			this.showFrontText();
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index a0c2cf78..51f2ff5a 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -90,19 +90,19 @@
   text-overflow: ellipsis;
 }
 
-.best_in_place_desc {
+.CardOnGraph .best_in_place_desc {
   width:160px;
-  height:200px;
+  height:180px;
   display:block;
   margin-top:2px;	
 }
 
-.best_in_place_desc input {
+.CardOnGraph .best_in_place_desc input {
   float: right;
   margin: 2px 0px 0px 2px;
   padding: 1px 5px;	
 }
 
-.best_in_place_desc input[value="Save"] {
+.CardOnGraph .best_in_place_desc input[value="Save"] {
 margin-right: -8px;
 }