moved all the menus in the upper right to the logo. created the console at /console. changed synapse creation to be either on right click and drag or alt+left click. fixed scrolling and spacing on list pages of maps and topics. added ability to clear the canvas on the console and to save to map. removed metamap page, and extraneous controllers.

app/assets/javascripts/Jit/filters.js

@@ -128,57 +128,44 @@ function onCanvasSearch(name,mapID,mapperID) {
 
 	Mconsole.graph.eachNode( function (n) {
 		  if (name != null) {
-		     if (n.name.indexOf(name) !== -1) {
-				 n.setData('alpha', 1, 'end');
-				 n.eachAdjacency(function(adj) {  
-				   adj.setData('alpha', 0.4, 'end');  
-				 });
+		     if (n.name.indexOf(name) !== -1 && name != "") {
+				 n.setData('onCanvas', true);
+				 //$('.name.item_' + n.id).css('display','block');
 		     }
 			 else {
-				 n.setData('alpha', 0.4, 'end');
-				 n.eachAdjacency(function(adj) {  
-				   adj.setData('alpha', 0.4, 'end');  
-				 }); 
+				 n.setData('onCanvas', false);
+				 //$('.name.item_' + n.id).css('display','none'); 
 			 }
 		  }
 		  else if (mapID != null) {
 		     if (n.getData('inmaps').indexOf(parseInt(mapID)) !== -1) {
-				 n.setData('alpha', 1, 'end');
-				 n.eachAdjacency(function(adj) {  
-				   adj.setData('alpha', 0.4, 'end');  
-				 });
+				 n.setData('onCanvas', true);
+				 //$('.name.item_' + n.id).css('display','block');
 		     }
 			 else {
-				 n.setData('alpha', 0.4, 'end');
-				 n.eachAdjacency(function(adj) {  
-				   adj.setData('alpha', 0.4, 'end');  
-				 }); 
+				 n.setData('onCanvas', false);
+				 //$('.name.item_' + n.id).css('display','none'); 
 			 }
 		  }
 		  else if (mapperID != null) {
 		     if (n.getData('userid').toString() == mapperID) {
-			    n.setData('alpha', 1, 'end');
-		        n.eachAdjacency(function(adj) {  
-		           adj.setData('alpha', 0.4, 'end');  
-		        });
+			    n.setData('onCanvas', true);
+				 //$('.name.item_' + n.id).css('display','block');
 			 }
 			 else {
-				 n.setData('alpha', 0.4, 'end');
-				 n.eachAdjacency(function(adj) {  
-				   adj.setData('alpha', 0.4, 'end');  
-				 }); 
+				 n.setData('onCanvas', false);
+				 //$('.name.item_' + n.id).css('display','none'); 
 			 }
 		  }
+		  Mconsole.plot();
 	});
-	Mconsole.fx.animate({  
-		modes: ['node-property:alpha',  
-				'edge-property:alpha'],  
-		duration: 500  
-	});	
 }
 
 
-
+function clearCanvas() {
+	Mconsole.graph.eachNode( function(n) { Mconsole.graph.removeNode(n.id); $('#'+n.id).remove(); });	
+	Mconsole.plot();
+}
 
 
 
@@ -205,7 +192,9 @@ $(document).ready(function() {
    // this sets up the closing of the find box, and the toggling between open and closed.
    $('#closeFind').click(function(){
 	   Mconsole.graph.eachNode( function (n) {
-		  n.setData('isNew', false);	
+		  n.setData('inCommons', false);
+		  n.setData('onCanvas', false);
+		  //$('.name.item_' + n.id).css('display','block');
 	   });
 	   Mconsole.plot();
 	   $('#closeFind, #findWhere').css('display','none');
@@ -544,7 +533,7 @@ $(document).ready(function() {
 //				  }
 //			  }
 //			}
-					// toggle the image and the boolean array value
+			// toggle the image and the boolean array value
 			if (categoryVisible[category] == true) {
 				$(this).addClass('toggledOff');
 				categoryVisible[category] = false;

app/assets/javascripts/Jit/graphsettings.js

@@ -63,6 +63,7 @@ function graphSettings(type) {
 				if (tempInit && tempNode2 == null) {
 					$('#item_addSynapse').val("true");
 					$('#new_item').fadeIn('fast');
+					addMetacode();
 					$('#item_name').focus();
 				}
 				else if (tempInit && tempNode2 != null) {
@@ -408,11 +409,20 @@ var nodeSettings = {
 			  var pos = node.pos.getc(true),
 			  dim = node.getData('dim'),
 			  cat = node.getData('itemcatname'),
-			  isNew = node.getData('isNew'),
+			  inCommons = node.getData('inCommons'),
+			  onCanvas = node.getData('onCanvas'),
 			  ctx = canvas.getCtx();
 			  
-			  // if the topic is temporary draw a green circle around it
-			  if (isNew) {
+			  // if the topic is from the Commons draw a green circle around it
+			  if (inCommons) {
+				  ctx.beginPath();
+				  ctx.arc(pos.x, pos.y, dim+3, 0, 2 * Math.PI, false);
+				  ctx.strokeStyle = '#67be5f'; // green
+				  ctx.lineWidth = 2;
+				  ctx.stroke();
+			  }
+			  // if the topic is on the Canvas draw a white circle around it
+			  if (onCanvas) {
 				  ctx.beginPath();
 				  ctx.arc(pos.x, pos.y, dim+3, 0, 2 * Math.PI, false);
 				  ctx.strokeStyle = 'white';
@@ -547,6 +557,7 @@ function canvasDoubleClickHandler(canvasLoc,e) {
       $('#item_x').val(canvasLoc.x);
       $('#item_y').val(canvasLoc.y);
       $('#new_item').fadeIn('fast');
+	  addMetacode();
       $('#item_name').focus();
    } else {
       canvasDoubleClickHandlerObject.storedTime = now;
@@ -567,13 +578,14 @@ function clickDragOnTopicForceDirected(node, eventInfo, e) {
 	   $('#new_synapse').fadeOut('fast');
 	   $('#new_item').fadeOut('fast');
 	   var pos = eventInfo.getPos();
+	   console.log(e);
 	   // if it's a left click, move the node
-	   if (e.button == 0) {
+	   if (e.button == 0 && !e.altKey ) {
 		   node.pos.setc(pos.x, pos.y);
 		   Mconsole.plot();
 	   }
 	   // if it's a right click, start synapse creation
-	   else if (e.button == 2) {
+	   else if (e.button == 2 || (e.button == 0 && e.altKey)) {
 		   if (tempInit == false) {
 			  tempNode = node;
 			  tempInit = true;   

app/assets/javascripts/application.js

@@ -19,15 +19,17 @@
 // other options are 'graph'
 var viewMode = "list";
 
-var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, gType, tempNode = null, tempInit = false, tempNode2 = null;
+var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, gType, tempNode = null, tempInit = false, tempNode2 = null, metacodeIMGinit = false;
 
  $(document).ready(function() {
+	 
+	document.ontouchmove = function(e){ e.preventDefault(); }
  
     $('#new_item, #new_synapse').bind('contextmenu', function(e){
 		return false;
 	});
 	
-	/// this is for the topic creation autocomplete fielf
+	/// this is for the topic creation autocomplete field
 	$('#item_name').bind('railsAutocomplete.select', function(event, data){  
       if (data.item.id != undefined) {
         $('#item_grabItem').val(data.item.id);
@@ -41,47 +43,44 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
 	$('.nodemargin').css('padding-top',$('.focus').css('height'));	
 	
 	// controls the sliding hover of the menus at the top
-    var sliding1 = false; 
-    $(".accountWrap").hover( 
+	var sliding1 = false; 
+	var lT;
+    $(".logo").hover( 
         function () { 
+		  clearTimeout(lT);
           if (! sliding1) { 
             sliding1 = true; 
-            $(".account").slideDown('slow', function() { 
-              sliding1 = false; 
-            }); 
+			if (userid != null) {
+              $('.footer .menu').animate({
+				height: '243px'
+			  }, 300, function() {
+				sliding1 = false;
+			  });
+			}
+			else {
+			  $('.footer .menu').animate({
+				height: '55px'
+			  }, 300, function() {
+				sliding1 = false;
+			  });
+			}
           } 
         },  
         function () { 
-          if (! sliding1) { 
-            sliding1 = true; 
-            $(".account").slideUp('slow', function() { 
-              sliding1 = false; 
-            }); 
-          } 
+          lT = setTimeout(function() { 
+			  if (! sliding1) { 
+				sliding1 = true; 
+				$('.footer .menu').animate({
+					height: '0px'
+				  }, 300, function() {
+					sliding1 = false;
+				  });
+			  } 
+		  },800); 
         } 
     );
 	
-	var sliding2 = false; 
-    $(".createWrap").hover( 
-        function () { 
-          if (! sliding2) { 
-            sliding2 = true; 
-            $(".create").slideDown('slow', function() { 
-              sliding2 = false; 
-            }); 
-          } 
-        },  
-        function () { 
-          if (! sliding2) { 
-            sliding2 = true; 
-            $(".create").slideUp('slow', function() { 
-              sliding2 = false; 
-            }); 
-          } 
-        } 
-    );
-	
-	// this is to save the layout of maps
+	// this is to save the layout of maps when you're on a map page
 	var coor = "";
 	$("#saveLayout").click(function(event) {
 	  event.preventDefault();
@@ -96,6 +95,40 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
 		  
 	  }
 	});
+	
 });
+
+// this is to save your console to a map
+function saveToMap() {
+  var Coor = "";
+  Mconsole.graph.eachNode(function(n) {
+    Coor = Coor + n.id + '/' + n.pos.x + '/' + n.pos.y + ',';
+  });
+  Coor = Coor.slice(0, -1);
+  $('#map_topicsToMap').val(Coor);
+  $('#new_map').fadeIn('fast');
+}
+
+function addMetacode() {
+	// code from http://www.professorcloud.com/mainsite/carousel-integration.htm
+	if (!metacodeIMGinit) {		
+		$("#metacodeImg").CloudCarousel( { 
+			//reflHeight: 10,
+			//reflGap: 2,
+			titleBox: $('#metacodeImgTitle'),
+			//buttonLeft: $('#left-but'),
+			//buttonRight: $('#right-but'),
+			yRadius:40,
+			xPos: 150,
+			yPos: 40,
+			speed:0.15,
+			mouseWheel:true,
+			bringToFront: true
+		});
+		metacodeIMGinit = true;
+	}
+}
+
+
  
  

app/assets/javascripts/carousel/cloud-carousel.1.0.5.js

@@ -0,0 +1,362 @@
+//////////////////////////////////////////////////////////////////////////////////
+// CloudCarousel V1.0.5
+// (c) 2011 by R Cecco. <http://www.professorcloud.com>
+// MIT License
+//
+// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
+//
+// Please retain this copyright header in all versions of the software
+//////////////////////////////////////////////////////////////////////////////////
+
+(function($) {
+
+	// START Reflection object.
+	// Creates a reflection for underneath an image.
+	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.	
+	// The position and size of the reflection gets updated by updateAll() in Controller.
+	function Reflection(img, reflHeight, opacity) {				
+		
+		var	reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
+	
+		parent = $(img.parentNode);
+		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
+        if ( !reflection.getContext &&  $.browser.msie) {
+			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];					
+			reflection.src = img.src;			
+			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";	
+			
+        } else {							
+			cntx = reflection.getContext("2d");
+			try {
+				
+				
+				$(reflection).attr({width: imageWidth, height: reflHeight});
+				cntx.save();
+				cntx.translate(0, imageHeight-1);
+				cntx.scale(1, -1);				
+				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);				
+				cntx.restore();
+				cntx.globalCompositeOperation = "destination-out";
+				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
+				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
+				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+				cntx.fillStyle = gradient;
+				cntx.fillRect(0, 0, imageWidth, reflHeight);				
+			} catch(e) {			
+				return;
+			}		
+		}
+		// Store a copy of the alt and title attrs into the reflection
+		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );	
+				
+	}	//END Reflection object
+
+	// START Item object.
+	// A wrapper object for items within the carousel.
+	var	Item = function(imgIn, options)
+	{								
+		this.orgWidth = imgIn.width;			
+		this.orgHeight = imgIn.height;		
+		this.image = imgIn;
+		this.reflection = null;					
+		this.alt = imgIn.alt;
+		this.title = imgIn.title;
+		this.imageOK = false;		
+		this.options = options;				
+						
+		this.imageOK = true;	
+		
+		if (this.options.reflHeight > 0)
+		{													
+			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);					
+		}
+		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!					
+	};// END Item object
+	
+	
+	// Controller object.
+	// This handles moving all the items, dealing with mouse clicks etc.	
+	var Controller = function(container, images, options)
+	{						
+		var	items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
+		this.controlTimer = 0;
+		this.stopped = false;
+		//this.imagesLoaded = 0;
+		this.container = container;
+		this.xRadius = options.xRadius;
+		this.yRadius = options.yRadius;
+		this.showFrontTextTimer = 0;
+		this.autoRotateTimer = 0;
+		if (options.xRadius === 0)
+		{
+			this.xRadius = ($(container).width()/2.3);
+		}
+		if (options.yRadius === 0)
+		{
+			this.yRadius = ($(container).height()/6);
+		}
+
+		this.xCentre = options.xPos;
+		this.yCentre = options.yPos;
+		this.frontIndex = 0;	// Index of the item at the front
+		
+		// Start with the first item at the front.
+		this.rotation = this.destRotation = Math.PI/2;
+		this.timeDelay = 1000/options.FPS;
+								
+		// Turn on the infoBox
+		if(options.altBox !== null)
+		{
+			$(options.altBox).css('display','block');	
+			$(options.titleBox).css('display','block');	
+		}
+		// Turn on relative position for container to allow absolutely positioned elements
+		// within it to work.
+		$(container).css({ position:'relative', overflow:'hidden'} );
+	
+		$(options.buttonLeft).css('display','inline');
+		$(options.buttonRight).css('display','inline');
+		
+		// Setup the buttons.
+		$(options.buttonLeft).bind('mouseup',this,function(event){
+			event.data.rotate(-1);	
+			return false;
+		});
+		$(options.buttonRight).bind('mouseup',this,function(event){															
+			event.data.rotate(1);	
+			return false;
+		});
+		
+		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
+		if (options.mouseWheel)
+		{
+			$(container).bind('mousewheel',this,function(event, delta) {					 
+					 event.data.rotate(delta);
+					 return false;
+				 });
+		}
+		$(container).bind('mouseover click',this,function(event){
+			
+			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
+			var	text = $(event.target).attr('alt');		
+			// If we have moved over a carousel item, then show the alt and title text.
+		
+			if ( text !== undefined && text !== null )
+			{
+					
+				clearTimeout(event.data.showFrontTextTimer);			
+				$(options.altBox).html( ($(event.target).attr('alt') ));
+				$(options.titleBox).html( ($(event.target).attr('title') ));							
+				if ( options.bringToFront && event.type == 'click' )				
+				{
+				
+					var	idx = $(event.target).data('itemIndex');	
+					var	frontIndex = event.data.frontIndex;
+					//var	diff = idx - frontIndex;                    
+                    var        diff = (idx - frontIndex) % images.length;
+                    if (Math.abs(diff) > images.length / 2) {
+                        diff += (diff > 0 ? -images.length : images.length);
+                    }
+                    
+					event.data.rotate(-diff);
+				}
+			}
+		});
+		// If we have moved out of a carousel item (or the container itself),
+		// restore the text of the front item in 1 second.
+		$(container).bind('mouseout',this,function(event){
+				var	context = event.data;				
+				clearTimeout(context.showFrontTextTimer);				
+				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
+				context.autoRotate();	// Start auto rotation.
+		});
+
+		// Prevent items from being selected as mouse is moved and clicked in the container.
+		$(container).bind('mousedown',this,function(event){	
+			
+			event.data.container.focus();
+			return false;
+		});
+		container.onselectstart = function () { return false; };		// For IE.
+
+		this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
+	
+		// Shows the text from the front most item.
+		this.showFrontText = function()
+		{	
+			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
+			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
+			// METAMAPS CODE
+			$('#item_metacode').val( $(items[this.frontIndex].image).attr('title'));
+			// NOT METAMAPS CODE
+			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
+		};
+						
+		this.go = function()
+		{				
+			if(this.controlTimer !== 0) { return; }
+			var	context = this;
+			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);					
+		};
+		
+		this.stop = function()
+		{
+			clearTimeout(this.controlTimer);
+			this.controlTimer = 0;				
+		};
+		
+		
+		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
+		this.rotate = function(direction)
+		{	
+			this.frontIndex -= direction;
+			this.frontIndex %= items.length;					 			
+			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
+			this.showFrontText();
+			this.go();			
+		};
+		
+		
+		this.autoRotate = function()
+		{			
+			if ( options.autoRotate !== 'no' )
+			{
+				var	dir = (options.autoRotate === 'right')? 1 : -1;
+				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
+			}
+		};
+		
+		// This is the main loop function that moves everything.
+		this.updateAll = function()
+		{											
+			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
+			var smallRange = (1-minScale) * 0.5;
+			var	w,h,x,y,scale,item,sinVal;
+			
+			var	change = (this.destRotation - this.rotation);				
+			var	absChange = Math.abs(change);
+	
+			this.rotation += change * options.speed;
+			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
+			var	itemsLen = items.length;
+			var	spacing = (Math.PI / itemsLen) * 2; 
+			//var	wrapStyle = null;
+			var	radians = this.rotation;
+			var	isMSIE = $.browser.msie;
+		
+			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
+			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3			
+			this.innerWrapper.style.display = 'none';		
+			
+			var	style;
+			var	px = 'px', reflHeight;	
+			var context = this;
+			for (var i = 0; i<itemsLen ;i++)
+			{
+				item = items[i];
+								
+				sinVal = funcSin(radians);
+				
+				scale = ((sinVal+1) * smallRange) + minScale;
+				
+				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
+				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);		
+		
+				if (item.imageOK)
+				{
+					var	img = item.image;
+					w = img.width = item.orgWidth * scale;					
+					h = img.height = item.orgHeight * scale;
+					img.style.left = x + px ;
+					img.style.top = y + px;
+					img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
+					if (item.reflection !== null)
+					{																										
+						reflHeight = options.reflHeight * scale;						
+						style = item.reflection.element.style;
+						style.left = x + px;
+						style.top = y + h + options.reflGap * scale + px;
+						style.width = w + px;								
+						if (isMSIE)
+						{											
+							style.filter.finishy = (reflHeight / h * 100);				
+						}else
+						{								
+							style.height = reflHeight + px;															
+						}																													
+					}					
+				}
+				radians += spacing;
+			}
+			// Turn display back on.					
+			this.innerWrapper.style.display = 'block';
+
+			// If we have a preceptable change in rotation then loop again next frame.
+			if ( absChange >= 0.001 )
+			{				
+				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);		
+			}else
+			{
+				// Otherwise just stop completely.				
+				this.stop();
+			}
+		}; // END updateAll		
+		
+		// Create an Item object for each image	
+//		func = function(){return;ctx.updateAll();} ;
+
+		// Check if images have loaded. We need valid widths and heights for the reflections.
+		this.checkImagesLoaded = function()
+		{
+			var	i;
+			for(i=0;i<images.length;i++) {
+				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
+				{
+					return;					
+				}				
+			}
+			for(i=0;i<images.length;i++) {				
+				 items.push( new Item( images[i], options ) );	
+				 $(images[i]).data('itemIndex',i);
+			}
+			// If all images have valid widths and heights, we can stop checking.			
+			clearInterval(this.tt);
+			this.showFrontText();
+			this.autoRotate();	
+			this.updateAll();
+			
+		};
+
+		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);	
+	}; // END Controller object
+	
+	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
+	$.fn.CloudCarousel = function(options) {
+			
+		this.each( function() {			
+			
+			options = $.extend({}, {
+							   reflHeight:0,
+							   reflOpacity:0.5,
+							   reflGap:0,
+							   minScale:0.5,
+							   xPos:0,
+							   yPos:0,
+							   xRadius:0,
+							   yRadius:0,
+							   altBox:null,
+							   titleBox:null,
+							   FPS: 30,
+							   autoRotate: 'no',
+							   autoRotateDelay: 1500,
+							   speed:0.2,
+							   mouseWheel: false,
+								 bringToFront: false
+			},options );									
+			// Create a Controller for each carousel.		
+			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
+		});				
+		return this;
+	};
+
+})(jQuery);

app/assets/stylesheets/application.css

@@ -98,6 +98,15 @@ a {
   border:2px solid #000;
 }
 
+.onConsole .new_map {
+  display:none;	
+}
+
+.onConsole .new_map button, .onConsole .new_map input.add {
+  float:left;
+  margin-top:5px;	
+}
+
 .invite p {
   margin:10px 0;
 }
@@ -114,12 +123,45 @@ a {
   right:3px;
 }
 
+.anypage .new_item {
+  width:300px;	
+  margin:-40px 0 0 -50px;
+}
+
 .anypage .new_item,
 .anypage .new_synapse {
-  display: none;
+  display: block;
   position: absolute;
-  background: url('bg.png');
-  border: 2px solid #000;
+}
+
+.anypage #item_name {
+  width:200px;
+  position:absolute;
+  top:40px;
+  left:50px;
+  z-index:9999;	
+}
+
+#metacodeImg {
+  height:120px;	
+}
+
+#metacodeImgTitle {
+  color:#000;
+  float:left;
+  width:120px;
+  text-align:center;
+  margin-left:90px;
+}
+
+#left-but {
+  position:absolute;
+  left:50px;
+}
+
+#right-but {
+  position:absolute;
+  right:50px;	
 }
 
 label, select, input, textarea {
@@ -160,7 +202,7 @@ input[type="submit"] {
 }
 
 .main {
-  overflow:hidden;
+  /*overflow:hidden; */
 }
 
 /* --- top options --*/
@@ -170,26 +212,13 @@ input[type="submit"] {
   top:0;
   right:0;
   z-index:10;
-  height:38px;
   width:auto;
-  background: url(topbg2.png) repeat-x top left;
   border-radius:15px;
   margin:10px;
 }
 
-.headertop ul {
-  display:block;
-  float: right;
-}
-
-.headertop ul li {
-  display:block;
-  float:right;
-  margin:10px 5px 0 5px;
-}
-
-.headertop ul li a {
-  color:#FFF;
+.headertop button {
+  float:left;	
 }
 
 .wrapper {
@@ -198,8 +227,11 @@ input[type="submit"] {
   margin:0 0;
 }
 
-.wrapper h1 {
-  margin-top:50px;
+.wrapper h1.index {
+  position:absolute;
+  top:50px;
+  left:50px;
+  z-index:9999;
 }
 
 .nodemargin {
@@ -311,60 +343,12 @@ input[type="submit"] {
   margin:0 7px;
 }
 
-.accountWrap,
-.createWrap,
-.exploreWrap {
-  display:block;
-  position:relative;
-  cursor: pointer;
+#cards {
+  margin:100px 0;	
 }
 
-#menus .account,
-#menus .create {
-  display:none;
-  position:absolute;
-  right:0;
-  z-index:12;
-  width:auto;
-  color: #67AF9F;
-  white-space: nowrap;
-  text-align: center;
-  font-size: 16px;
-  overflow: hidden;
-  padding: 3px 8px;
-  margin: 0;
-  border: 2px solid #AAA;
-  background: white;
-  border-radius: 6px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
-  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
-  -moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
-  background: -moz-linear-gradient( center top, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.03) 0% ) repeat scroll 0 0 white;
-  background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(white), to(rgba(0, 0, 0, 0.03)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(0, 0, 0, 0.03)) ) repeat scroll 0 0 white;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-#menus ul li {
-  margin:0;
-  clear:both;
-  float:none;
-  list-style-type:none;
-  display:block;
-  padding:3px;
-  text-align:center;
-  border-top:1px solid #999;
-}
-#menus ul li.first {
-  border:none;
-}
-#menus ul li a:hover {
-  color:#2d6a5d;
-}
-#menus ul li a {
-  color: #67AF9F;
-  display:block;
+#cards p.empty {
+  margin-left:50px;	
 }
 
 /* --- styling the FIND section ---*/
@@ -406,6 +390,10 @@ input[type="submit"] {
   float:left; 
 }
 
+.findWhereField.inCommons {
+  color:#67be5f;	
+}
+
 .sideOption select,
 .sideOption span {
   float:left;
@@ -498,7 +486,6 @@ input[type="submit"] {
   z-index:12;
   display:block;
   width:auto;
-  overflow: hidden;
   padding: 3px 8px;
   margin: -0.75em 0 0;
 }
@@ -519,3 +506,49 @@ input[type="submit"] {
   float:left;
   margin-left: 7px;
 }
+
+.footer .menu {
+  display:block;
+  position:absolute;
+  bottom:40px;
+  left:0;
+  height:0px;
+  z-index:12;
+  width:124px;
+  color: #67AF9F;
+  white-space: nowrap;
+  text-align: center;
+  font-size: 16px;
+  overflow: hidden;
+  padding: 0 8px;
+  margin: 0;
+  background: white;
+  border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
+  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
+  -moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
+  background: url('bg.png') no-repeat 0 0;
+}
+
+.footer ul li {
+  margin:0;
+  clear:both;
+  float:none;
+  list-style-type:none;
+  display:block;
+  padding:3px;
+  text-align:center;
+  border-top:1px solid #999;
+}
+.footer ul li.first {
+  border:none;
+}
+.footer ul li a:hover {
+  color:#2d6a5d;
+}
+.footer ul li a {
+  color: #67AF9F;
+  display:block;
+}

app/controllers/items_controller.rb

@@ -14,9 +14,9 @@ class ItemsController < ApplicationController
     
     if params[:user_id]
       @user = User.find(params[:user_id])
-  	  @items = Item.visibleToUser(@current, @user)
+  	  @items = Item.order("name ASC").visibleToUser(@current, @user)
     elsif      
-      @items = Item.visibleToUser(@current, nil)
+      @items = Item.order("name ASC").visibleToUser(@current, nil)
     end
      
     respond_with(@user,@items)
@@ -62,8 +62,7 @@ class ItemsController < ApplicationController
       @item.desc = ""
       @item.link = ""
       @item.permission = 'commons'
-      @item.item_category = ItemCategory.all.first
-      #@item.item_category = ItemCategory.find(params[:category])
+      @item.item_category = ItemCategory.find_by_name(params[:item][:metacode])
       @item.user = @user
 
       @item.save

app/controllers/main_controller.rb

@@ -5,24 +5,8 @@ class MainController < ApplicationController
    
   respond_to :html, :js, :json
   
-  #homepage pick a random map and show it
   def console	
 	
-    @current = current_user
-    
-    if authenticated? 
-	    
-    else 
-      @maps = Map.visibleToUser(@current, nil)
-      @map = @maps.sample
-    
-      @mapjson = @map.self_as_json(@current).html_safe if @map
-    
-      respond_to do |format|
-        format.html { respond_with(@map) }
-        format.json { respond_with(@mapjson) }
-      end
-    end
   end
   
   def search
@@ -40,27 +24,6 @@ class MainController < ApplicationController
     end
   end
   
-  def metamap
-    @current = current_user
-    
-	@item = Item.visibleToUser(@current, nil).first
-	@alljson = all_as_json(@current).html_safe
-	
-	respond_to do |format|
-      format.html { respond_with(@item) }
-      format.json { respond_with(@alljson) }
-    end
-  end
-  
-  def allmaps	
-	@current = current_user
-    @maps = Map.visibleToUser(@current, nil)
-	
-	respond_to do |format|
-      format.html { respond_with(@maps) }
-    end
-  end
-  
   def invite	
 	@user = current_user
 	

app/controllers/maps_controller.rb

@@ -14,9 +14,9 @@ class MapsController < ApplicationController
     
     if params[:user_id]
       @user = User.find(params[:user_id])
-      @maps = Map.visibleToUser(@current, @user)
+      @maps = Map.order("name ASC").visibleToUser(@current, @user)
     elsif 
-      @maps = Map.visibleToUser(@current, nil)
+      @maps = Map.order("name ASC").visibleToUser(@current, nil)
     end
     
 	  respond_with(@maps,@user)
@@ -52,14 +52,38 @@ class MapsController < ApplicationController
   def create
     
     @user = current_user
-	  @map = Map.create(params[:map])
-    @map.user = @user    
-	  @map.arranged = false
-	  @map.save   
-    
-    respond_to do |format|
-      format.html { respond_with(@user, location: map_path(@map)) }
-    end
+	  @map = Map.new()
+    @map.name = params[:map][:name]
+    @map.desc = params[:map][:desc]
+    @map.permission = params[:map][:permission]
+    @map.user = @user
+    @map.arranged = false    
+    @map.save    
+	  
+    if params[:map][:topicsToMap]
+		  @all = params[:map][:topicsToMap]
+  		@all = @all.split(',')
+		  @all.each do |item|
+			  item = item.split('/')
+			  @mapping = Mapping.new()
+        @mapping.category = "Item"
+        @mapping.user = @user
+        @mapping.map  = @map
+        @mapping.item = Item.find(item[0])
+        @mapping.xloc = item[1]
+        @mapping.yloc = item[2]
+        @mapping.save
+		  end
+		  @map.arranged = true
+      @map.save
+      respond_to do |format|
+        format.js { respond_with(@map) }
+      end
+    else
+      respond_to do |format|
+        format.html { respond_with(@user, location: map_path(@map)) }
+      end
+	  end	
   end
   
   # GET maps/:id/edit
@@ -114,7 +138,7 @@ class MapsController < ApplicationController
 	  end	
   end
   
-  # DELETE /users/:user_id/maps/:id
+  # DELETE maps/:id
   def destroy
 	  @map = Map.find(params[:id])
 	

app/controllers/sessions_controller.rb

@@ -22,11 +22,10 @@ class SessionsController < ApplicationController
     
     @user = User.new
 	
-	@connor = User.find(555629996)
-	@map = Map.first(:conditions => [ "id = ?", 5])
+	  @map = Map.first(:conditions => [ "id = ?", 5])
 		
     if @map
-      respond_with(@user, @session, location: user_map_url(@connor,@map)) do |format| 
+      respond_with(@user, @session, location: map_url(@map)) do |format| 
       end
     else
       respond_with(@user, @session, location: root_url) do |format| 

app/views/items/_new.html.erb

@@ -1,9 +1,15 @@
 <div class="anypage">
 <%= form_for Item.new, url: items_url, remote: true do |form| %>
+  <div id="metacodeImg"><img class="cloudcarousel" width="40" height="40" src="/assets/action.png" alt="Action" title="Action"/><img class="cloudcarousel" width="40" height="40" src="/assets/activity.png" alt="Activity" title="Activity"/><img class="cloudcarousel" width="40" height="40" src="/assets/bizarre.png" alt="Bizarre" title="Bizarre"/><img class="cloudcarousel" width="40" height="40" src="/assets/catalyst.png" alt="Catalyst" title="Catalyst"/><img class="cloudcarousel" width="40" height="40" src="/assets/closed.png" alt="Closed" title="Closed"/><img class="cloudcarousel" width="40" height="40" src="/assets/experience.png" alt="Experience" title="Experience"/><img class="cloudcarousel" width="40" height="40" src="/assets/futuredev.png" alt="Future Dev" title="Future Dev"/><img class="cloudcarousel" width="40" height="40" src="/assets/group.png" alt="Group" title="Group"/><img class="cloudcarousel" width="40" height="40" src="/assets/idea.png" alt="Idea" title="Idea"/><img class="cloudcarousel" width="40" height="40" src="/assets/implication.png" alt="Implication" title="Implication"/><img class="cloudcarousel" width="40" height="40" src="/assets/insight.png" alt="Insight" title="Insight"/><img class="cloudcarousel" width="40" height="40" src="/assets/intention.png" alt="Intention" title="Intention"/><img class="cloudcarousel" width="40" height="40" src="/assets/knowledge.png" alt="Knowledge" title="Knowledge"/><img class="cloudcarousel" width="40" height="40" src="/assets/location.png" alt="Location" title="Location"/><img class="cloudcarousel" width="40" height="40" src="/assets/openissue.png" alt="Open Issue" title="Open Issue"/><img class="cloudcarousel" width="40" height="40" src="/assets/opinion.png" alt="Opinion" title="Opinion"/><img class="cloudcarousel" width="40" height="40" src="/assets/opportunity.png" alt="Opportunity" title="Opportunity"/><img class="cloudcarousel" width="40" height="40" src="/assets/person.png" alt="Person" title="Person"/><img class="cloudcarousel" width="40" height="40" src="/assets/platform.png" alt="Platform" title="Platform"/><img class="cloudcarousel" width="40" height="40" src="/assets/problem.png" alt="Problem" title="Problem"/><img class="cloudcarousel" width="40" height="40" src="/assets/question.png" alt="Question" title="Question"/><img class="cloudcarousel" width="40" height="40" src="/assets/reference.png" alt="Reference" title="Reference"/><img class="cloudcarousel" width="40" height="40" src="/assets/requirement.png" alt="Requirement" title="Requirement"/><img class="cloudcarousel" width="40" height="40" src="/assets/resource.png" alt="Resource" title="Resource"/><img class="cloudcarousel" width="40" height="40" src="/assets/role.png" alt="Role" title="Role"/><img class="cloudcarousel" width="40" height="40" src="/assets/task.png" alt="Task" title="Task"/><img class="cloudcarousel" width="40" height="40" src="/assets/tool.png" alt="Tool" title="Tool"/><img class="cloudcarousel" width="40" height="40" src="/assets/trajectory.png" alt="Trajectory" title="Trajectory"/></div> 
   <%= form.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "What is the name of your topic?" %>
+  <%= form.hidden_field :metacode, :value => "Action" %>
   <%= form.hidden_field :x, :value => 0 %>
   <%= form.hidden_field :y, :value => 0 %>
   <%= form.hidden_field :grabItem, :value => "null" %>
   <%= form.hidden_field :addSynapse, :value => false %>
+  <!--<input id="left-but"  type="button" value="Left" />-->
+  <div id="metacodeImgTitle"></div>
+  <!--<input id="right-but" type="button" value="Right" />-->
+  <div class="clearfloat"></div>
 <% end %>
 </div>

app/views/items/index.html.erb

@@ -1,15 +1,11 @@
-<h1>Topics</h1>
+<h1 class="index"><% if @user %><%= @user.name %>'s<% end %> Topics</h1>
 
 <div class="items" id="cards">
   <% @items.each do |item| %>
     <%= render item %>
   <% end %>
   <% if @items.empty? %>
-	 <p><br>Shucks, there are no topics.<p>
+	 <p class="empty"><br>Shucks, there are no topics. <% if authenticated? %><%= link_to "Create some if you want.", console_url %><% end %></p>
   <% end %>
 </div>
-<div class="clearfloat"></div>
-
-<% if authenticated? %>
-	<%= render :partial => 'items/new' %>
-<% end %>
+<div class="clearfloat"></div>

app/views/layouts/application.html.erb

@@ -7,6 +7,11 @@
       var userid = "<%= user.id %>";
       var username = "<%= user.name %>";
     </script>
+  <% else %>
+    <script type="text/javascript">
+      var userid = null;
+      var username = null;
+    </script>  
   <% end %>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
@@ -19,48 +24,38 @@
 <body>
   <%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
 
-    <div class="headertop">
-			<% unless authenticated? %>
-				<ul id="menus">
-					<li><%= link_to "Login", new_session_path, id: "Login" %></li>
-				</ul>
-			<% end %>
-			<% if authenticated? %>
-				<ul id="menus">
-					<li class="accountWrap">
-						<p id="account">ACCOUNT</p>
-						<ul class="account">
-							<li class="first"><%= link_to "My Topics", user_items_url(user) %></li>
-							<li><%= link_to "My Synapses", user_synapses_url(user) %></li>
-							<li><%= link_to "My Maps", user_maps_url(user) %></li>
-							<li><%= link_to "Invite", invite_path %></li>
-							<li><%= link_to "Settings", edit_user_url(user) %></li>
-							<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
-							   <li><%= link_to "Feedback", map_path(Map.find(7)) %></li>
-						    <% end %>
-							<li class="last"><%= link_to "Logout", session_path, method: 'delete', id: "Login" %></li>
-						</ul>
-					</li>
-					<li>|</li>
-					<li class="createWrap">
-						<p id="create">CREATE</p>
-						<ul class="create">
-							<li class="first"><%= link_to "Add Map", new_map_path, id: "newmap" %></li>
-						</ul>	
-					</li>					
-				</ul>
-			<% end %>
-		</div>
-		<div class="clearfloat"></div> 
-    
-		<div class="wrapper" id="wrapper">
+    <div class="wrapper" id="wrapper">
 			<%= yield %>
 		</div>
 		
 		<div class="footer">
-	  <div class="logo"><h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div></div>
+      <div class="logo">
+          <% unless authenticated? %>
+            <ul class="menu">
+              <li class="first"><%= link_to "Console", console_url %></li>
+              <li class="last"><%= link_to "Login", new_session_path, id: "Login" %></li>
+            </ul>
+          <% end %>
+          <% if authenticated? %>
+            <ul class="menu">
+                <li class="first"><%= link_to "Console", console_url %></li>
+                <li><%= link_to "Create Map", new_map_url %></li>
+                <li><%= link_to "My Topics", user_items_url(user) %></li>
+                <li><%= link_to "My Synapses", user_synapses_url(user) %></li>
+                <li><%= link_to "My Maps", user_maps_url(user) %></li>
+                <li><%= link_to "Invite", invite_path %></li>
+                <li><%= link_to "Settings", edit_user_url(user) %></li>
+                <% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
+                  <li><%= link_to "Feedback", map_path(Map.find(7)) %></li>
+                <% end %>
+                <li class="last"><%= link_to "Logout", session_path, method: 'delete', id: "Login" %></li>
+            </ul>
+          <% end %>
+          <h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div>
+      </div>
     </div>
     
   <% end %>
   <%= render :partial => 'layouts/ga' if Rails.env.production? %>
 </body>
+</html>

app/views/main/console.html.erb

@@ -1,43 +1,8 @@
-<% if @map %>
-<div class="focus">
-	<div class="focusleft">
-		<p># of Topics: <%= @map.items.count %></p>
-		<p># of Synapses: <%= @map.synapses.count %></p>
-	</div>
-	<div class="focusmiddle">
-		<h1 class="title"><%= @map.name %></h1>
-		<div class="desc">
-			<p><%= @map.desc %></p>
-		</div>
-	</div>
-	<div class="focusright">
-		<div class="link"><p>Permissions:<%= @map.permission %></p></div>
-	</div>
-</div>
-<div class="clearfloat nodemargin"></div>
-
-<div class="maps" id="container">
-  <div id="center-container">
-    <div id="infovis"></div>    
+  <div class="headertop">
+    <% if authenticated? %><button onclick="saveToMap();">Save to Map</button><% end %>
+    <button onclick='clearCanvas();'>Clear Canvas</button>
   </div>
-</div>
-<div class="clearfloat"></div>
-
-<script>
-	json = <%= @mapjson %>;
-	if (json.length > 0) {
-		$(document).ready(function() {
-			<% if (@map.arranged) %>
-				initialize("arranged");
-			<% else %>
-				initialize("chaotic");
-			<% end %>
-		});
-		
-	}
-</script>
-
-<% elsif authenticated? %>
+  <div class="clearfloat"></div>
   <div class="maps" id="container">
     <div id="center-container">
       <div id="infovis"></div>    
@@ -47,6 +12,7 @@
   <% if authenticated? %>
     <%= render :partial => 'items/new' %>
     <%= render :partial => 'synapses/new' %>
+    <%= render :partial => 'maps/new' %>
   <% end %>
   <script>
 	//if (json.length > 0) {
@@ -55,15 +21,11 @@
 		});	
 	//}
 </script>
-  
-<% else %>
-  <h1><br>Shucks, there are no maps.<h1>
-<% end %>
 
 <span id="closeFind">close</span>
 <form id="findWhere">
-  <span class="findWhereField"><input type="checkbox"  id="onCanvas"><p>On my Canvas</p></span>
-  <span class="findWhereField"><input type="checkbox" id="inCommons" checked="checked"><p>In the Commons</p></span>
+  <span class="findWhereField onCanvas"><input type="checkbox"  id="onCanvas"><p>On my Canvas</p></span>
+  <span class="findWhereField inCommons"><input type="checkbox" id="inCommons" checked="checked"><p>In the Commons</p></span>
 </form>
 <div class="sideOption" id="sideOptionFind">
   <span class="find_key">Find...</span>
@@ -132,4 +94,4 @@
       <%= text_field_tag(:topics_by_user_id, "", :id => "topicsByUser", :class => "getTopicsInput") %>
       <%= text_field_tag(:topics_by_map_id, "", :id => "topicsByMap", :class => "getTopicsInput") %>
     <% end %>
-</div>
+</div>

app/views/main/search.js.erb

@@ -3,8 +3,9 @@ $('.getTopicsInput').attr('value','');
 var h = Mconsole.canvas.element.clientHeight / 2;
 var w = Mconsole.canvas.element.clientWidth / 2;
 
-var myX = -w + 100;
+var myX = -w + 400;
 var myY = -h + 100;
+var even = true;
 
 <% @items.each do |item| %>
   if ($.isEmptyObject(Mconsole.graph.nodes)) {
@@ -13,12 +14,13 @@ var myY = -h + 100;
     var temp = Mconsole.graph.getNode('<%= item.id %>');
     temp.setData('dim', 1, 'start');
     temp.setData('dim', 25, 'end');
-    temp.setData('isNew',true);
+    temp.setData('inCommons',true);
     temp.setPos(new $jit.Complex(myX, myY), 'current');
     temp.setPos(new $jit.Complex(myX, myY), 'start');
     temp.setPos(new $jit.Complex(myX, myY), 'end');
     Mconsole.fx.plotNode(temp, Mconsole.canvas);
     myX += 100;
+    even = !even;
   }
   else {
     var temp = Mconsole.graph.getNode('<%= item.id %>');
@@ -28,16 +30,25 @@ var myY = -h + 100;
       var temp = Mconsole.graph.getNode('<%= item.id %>');
       temp.setData('dim', 1, 'start');
       temp.setData('dim', 25, 'end');
-      temp.setData('isNew',true);
+      temp.setData('inCommons',true);
       if (myX > (w-100)) {
-        myX = -w + 100;
-        myY += 100
+        myX = -w + 400;
+        myY += 200;
+        even = true;
+      }
+      if (even) {
+        temp.setPos(new $jit.Complex(myX, myY), 'current');
+        temp.setPos(new $jit.Complex(myX, myY), 'start');
+        temp.setPos(new $jit.Complex(myX, myY), 'end');
+      }
+      else if (!even) {
+        temp.setPos(new $jit.Complex(myX, myY+100), 'current');
+        temp.setPos(new $jit.Complex(myX, myY+100), 'start');
+        temp.setPos(new $jit.Complex(myX, myY+100), 'end');
       }
-      temp.setPos(new $jit.Complex(myX, myY), 'current');
-      temp.setPos(new $jit.Complex(myX, myY), 'start');
-      temp.setPos(new $jit.Complex(myX, myY), 'end');
       Mconsole.fx.plotNode(temp, Mconsole.canvas);
       myX += 100;
+      even = !even;
     }
   }
 <% end %>

app/views/maps/_new.html.erb

@@ -0,0 +1,15 @@
+<div class="onConsole">
+<%= form_for @map || Map.new, url: maps_url, remote: true do |form|%>
+  <h3>Save to Map</h3>
+  <label for="map_name">Name</label>
+  <%= form.text_field :name %>
+  <label for="map_desc">Description</label>
+  <%= form.text_area :desc, class: "description", :rows => 5 %>
+  <label for="map_permission">Permission</label>
+  <%= form.select(:permission, options_for_select(['commons', 'public', 'private'])) %>
+  <%= form.hidden_field :topicsToMap, :value => 0 %>
+  <%= form.submit "Save", class: "add" %>
+  <button onclick="$('#new_map').fadeOut('fast'); event.preventDefault();">Cancel</button>
+  <div class="clearfloat"></div>
+<% end %>
+</div>

app/views/maps/_newtopic.html.erb

@@ -1,9 +1,16 @@
 <div class="anypage">
 <%= form_for Item.new, url: items_url, remote: true do |form| %>
+  <div id="metacodeImg"><img class="cloudcarousel" width="40" height="40" src="/assets/action.png" alt="Action" title="Action"/><img class="cloudcarousel" width="40" height="40" src="/assets/activity.png" alt="Activity" title="Activity"/><img class="cloudcarousel" width="40" height="40" src="/assets/bizarre.png" alt="Bizarre" title="Bizarre"/><img class="cloudcarousel" width="40" height="40" src="/assets/catalyst.png" alt="Catalyst" title="Catalyst"/><img class="cloudcarousel" width="40" height="40" src="/assets/closed.png" alt="Closed" title="Closed"/><img class="cloudcarousel" width="40" height="40" src="/assets/experience.png" alt="Experience" title="Experience"/><img class="cloudcarousel" width="40" height="40" src="/assets/futuredev.png" alt="Future Dev" title="Future Dev"/><img class="cloudcarousel" width="40" height="40" src="/assets/group.png" alt="Group" title="Group"/><img class="cloudcarousel" width="40" height="40" src="/assets/idea.png" alt="Idea" title="Idea"/><img class="cloudcarousel" width="40" height="40" src="/assets/implication.png" alt="Implication" title="Implication"/><img class="cloudcarousel" width="40" height="40" src="/assets/insight.png" alt="Insight" title="Insight"/><img class="cloudcarousel" width="40" height="40" src="/assets/intention.png" alt="Intention" title="Intention"/><img class="cloudcarousel" width="40" height="40" src="/assets/knowledge.png" alt="Knowledge" title="Knowledge"/><img class="cloudcarousel" width="40" height="40" src="/assets/location.png" alt="Location" title="Location"/><img class="cloudcarousel" width="40" height="40" src="/assets/openissue.png" alt="Open Issue" title="Open Issue"/><img class="cloudcarousel" width="40" height="40" src="/assets/opinion.png" alt="Opinion" title="Opinion"/><img class="cloudcarousel" width="40" height="40" src="/assets/opportunity.png" alt="Opportunity" title="Opportunity"/><img class="cloudcarousel" width="40" height="40" src="/assets/person.png" alt="Person" title="Person"/><img class="cloudcarousel" width="40" height="40" src="/assets/platform.png" alt="Platform" title="Platform"/><img class="cloudcarousel" width="40" height="40" src="/assets/problem.png" alt="Problem" title="Problem"/><img class="cloudcarousel" width="40" height="40" src="/assets/question.png" alt="Question" title="Question"/><img class="cloudcarousel" width="40" height="40" src="/assets/reference.png" alt="Reference" title="Reference"/><img class="cloudcarousel" width="40" height="40" src="/assets/requirement.png" alt="Requirement" title="Requirement"/><img class="cloudcarousel" width="40" height="40" src="/assets/resource.png" alt="Resource" title="Resource"/><img class="cloudcarousel" width="40" height="40" src="/assets/role.png" alt="Role" title="Role"/><img class="cloudcarousel" width="40" height="40" src="/assets/task.png" alt="Task" title="Task"/><img class="cloudcarousel" width="40" height="40" src="/assets/tool.png" alt="Tool" title="Tool"/><img class="cloudcarousel" width="40" height="40" src="/assets/trajectory.png" alt="Trajectory" title="Trajectory"/></div> 
   <%= form.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "What is the name of your topic?" %>
+  <%= form.hidden_field :metacode, :value => "Action" %>
   <%= form.hidden_field :x, :value => 0 %>
   <%= form.hidden_field :y, :value => 0 %>
   <%= form.hidden_field :map, :value => @map.id %>
   <%= form.hidden_field :grabItem, :value => "null" %>
+  <%= form.hidden_field :addSynapse, :value => false %>
+  <!--<input id="left-but"  type="button" value="Left" />-->
+  <div id="metacodeImgTitle"></div>
+  <!--<input id="right-but" type="button" value="Right" />-->
+  <div class="clearfloat"></div>
 <% end %>
 </div>

app/views/maps/create.js.erb

@@ -0,0 +1,13 @@
+$('#map_name').val('');
+$('#map_desc').val('');
+$('#map_permission').val('commons');
+$('#map_topicsToMap').val('0');
+
+var tempForm = $('#new_map').html();
+$('#new_map').html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); event.preventDefault();'>Stay on the Console?</a>");
+
+function closeIt() {
+  $('#new_map').fadeOut('fast', function(){
+    $('#new_map').html(tempForm);
+  }); 
+}

app/views/maps/index.html.erb

@@ -1,11 +1,11 @@
-<h1>Maps</h1>
+<h1 class="index"><% if @user %><%= @user.name %>'s<% end %> Maps</h1>
 
 <div class="maps" id="cards">
   <% @maps.each do |map| %>
     <%= render map %>
   <% end %>
   <% if @maps.empty? %>
-	 <p><br>Shucks, there are no maps.<p>
+	 <p class="empty"><br>Shucks, there are no maps. <% if authenticated? %><%= link_to "Create one if you want.", new_map_url %><% end %></p>
   <% end %>
 </div>
 <div class="clearfloat"></div>

app/views/maps/show.html.erb

@@ -42,6 +42,11 @@
 			<% end %>
 		});
 	}
+  else {
+		$(document).ready(function() {
+				initialize("chaotic", true);
+		});
+	}
 </script>
 
 <%= render :partial => 'newtopic' %>

app/views/synapses/index.html.erb

@@ -1,3 +1,5 @@
+<h1 class="index"><% if @user %><%= @user.name %>'s<% end %> Synapses</h1>
+
 <div class="synapses" id="container">
   <div id="center-container">
     <div id="infovis"></div>    

config/routes.rb

@@ -2,7 +2,7 @@ ISSAD::Application.routes.draw do
 
   root to: 'main#console', via: :get
   
-  match 'metamap', to: 'main#metamap', via: :get, as: :metamap
+  match 'console', to: 'main#console', via: :get, as: :console
   
   match 'invite', to: 'main#invite', via: :get, as: :invite
   

public/assets/manifest.yml

@@ -0,0 +1,49 @@
+---
+48px-all.zip: 48px-all-2dd6aaa6c99e01af92fd7aa61fbf642a.zip
+96px-gen001.zip: 96px-gen001-a2e2d959694d5f3c98e717eb4f82d5dd.zip
+action.png: action-02bd981b8466a7b2cb167afffc284703.png
+activity.png: activity-27aedb9b5baea69ea88f1f2b5303862c.png
+background.jpg: background-2fcc9f96ace4764a02278ada04bc0d9d.jpg
+background2-for-repeating.jpg: background2-for-repeating-8d022369a362b364c9395039167f1ffd.jpg
+background2.jpg: background2-c2b46d9ebc7d31aea8135e3c505aa1e9.jpg
+bg.png: bg-eea3f1ec61623cbc3833f8fcbf114bf8.png
+bizarre.png: bizarre-4154e4b7b2e0169cfc4af24c32119305.png
+catalyst.png: catalyst-21e04cdb0f34140b3e00d0b98aca240c.png
+closed.png: closed-11f6970ed42d52bc9352fa8860ab7479.png
+col2.png: col2-4f58f5695026bcc1789ef2a87be40897.png
+experience.png: experience-8068d2c812493d1852ee7e3c992365ce.png
+futuredev.png: futuredev-e3c62458cfd457b0501dddc6d9b2d8d4.png
+gradient.png: gradient-6c6f5be85356b9e5ff76658e56ccc0f9.png
+group.png: group-70155e13e72ec389d64a4f80a8d62d24.png
+idea.png: idea-283b58d94b9166856f2734e3c5426ca4.png
+implication.png: implication-652ece8bc0b1060dd5ca0756393cf21e.png
+insight.png: insight-858ccca7357b37837a257e0202319b27.png
+intention.png: intention-a487d116bfcf64c7ac559ef89ed61544.png
+junto.png: junto-3bca283ec5fe80ef34d6a888b7c676b4.png
+knowledge.png: knowledge-eb4b1dc4412b210c286b934737b04f80.png
+location.png: location-e1642892214a5cb4b2891f3837f437de.png
+old icons/action.png: old icons/action-d55838ce24528a56dd241c285ef2349a.png
+old icons/group.png: old icons/group-bd3f38a2d40c7aef4123fd61caa833c7.png
+old icons/intention.png: old icons/intention-6fc1087e39981084643eb9d713f82d90.png
+old icons/location.png: old icons/location-4f88b890ffc41fea38627f59f2c19a3e.png
+old icons/person.png: old icons/person-be021351add736f73b07acc5880ecbf4.png
+old icons/resource.png: old icons/resource-9e40d89dbf5a02859533b6c02eabe2d8.png
+openissue.png: openissue-d9c50446b2dbd0587942ae298bda2a75.png
+opinion.png: opinion-c65d63ce63d9c1dc01f60b2f9a4fecfe.png
+opportunity.png: opportunity-4fe7c2f4f5cbe678058c76924ec43a7f.png
+person.png: person-2cb4eace780426c21c109ca6475431ce.png
+platform.png: platform-29f4dc32fb5f2a9f369b92d2f51ba005.png
+problem.png: problem-d660aa3522f737dfd25487937bed6db1.png
+question.png: question-bc1ccabf1e7cb8b4b6d6744fe096760c.png
+reference.png: reference-c840b77477e0dc3fd431236766793a5f.png
+requirement.png: requirement-d200e129a41fff36f64111f554abea72.png
+resource.png: resource-4017b1e9535d80d205ceff916930cf5d.png
+role.png: role-c474b1fcb4b4f836e7ca0db67e744dc3.png
+task.png: task-0ac599d122a709a5e73990f1745019e0.png
+tool.png: tool-45532482693a381d4da31c103392ee5b.png
+topbg.png: topbg-eb18f5cf8dcfaf7dfd7e47f503956a5d.png
+topbg2.png: topbg2-f9640f6cb183bb610d0954c7759ecc23.png
+trajectory.png: trajectory-a7c520e746d4c1ffe401805b3d0cb6cd.png
+application.js: application-e96800b4ab0c2a86ef96d9a460e898fa.js
+scroll/mCSB_buttons.png: scroll/mCSB_buttons-6eb1e766df3b6b28f5cb2a218697658f.png
+application.css: application-d95c136b90ec89004bc1220f162d3694.css