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

@@ -150,6 +150,7 @@ function addMetacode() {
 			xPos: 150,
 			yPos: 40,
 			speed:0.15,
+			mouseWheel:true, 
 			bringToFront: true
 		});
 		metacodeIMGinit = true;

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)
 		{
@@ -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();

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;
 }