got filtering/finding system working, and node creation happening in place.

app/assets/javascripts/Jit/graphsettings.js

@@ -85,7 +85,7 @@ function graphSettings(type) {
                if (node) {
                  selectNodeOnClickHandler(node);
                } else {
-                 canvasDoubleClickHandler(e);
+                 canvasDoubleClickHandler(eventInfo.getPos(), e);
                }//if
             }//onClick
          },
@@ -111,6 +111,19 @@ function graphSettings(type) {
 			
 			// add some events to the label
 			showCard.onclick = function(){
+				delete node.selected;
+			    node.setData('dim', 25, 'current');
+			    node.eachAdjacency(function (adj) {
+				   adj.setDataset('end', {
+					  lineWidth: 0.5,
+					  color: '#222222'
+				   });
+				   adj.setData('showDesc', false, 'current');
+			    });
+				Mconsole.fx.animate({
+				  modes: ['edge-property:lineWidth:color'],
+				  duration: 500
+			   });
 				$('.showcard.item_' + node.id).fadeOut('fast', function(){
 					$('.name').css('display','block');
 					Mconsole.plot();
@@ -128,8 +141,8 @@ function graphSettings(type) {
 			style.color = "#222222";
 			
 			// add some events to the label
-			nameContainer.onmouseover = function(){
+			nameContainer.onclick = function(){
-                if (node.id == 0) return;
+				node.setData('dim', 1, 'current');
 				$('.showcard').css('display','none');
 				$('.name').css('display','block');
 				$('.name.item_' + node.id).css('display','none');
@@ -144,9 +157,8 @@ function graphSettings(type) {
             var left = parseInt(style.left);
             var top = parseInt(style.top);
             var w = domElement.offsetWidth;
-            var dim = node.getData('dim');
             style.left = (left - w / 2) + 'px';
-            style.top = (top + dim) + 'px';
+            style.top = (top+25) + 'px';
             style.display = '';
          }
       };
@@ -393,10 +405,17 @@ var nodeSettings = {
 	}
 	
 function selectNodeOnClickHandler(node) {
+   
+    $('.showcard').css('display','none');
+	$('.name').css('display','block');
+	$('.name.item_' + node.id).css('display','none');
+	$('.showcard.item_' + node.id).fadeIn('fast');
+	Mconsole.plot();
+				
    //set final styles  
    Mconsole.graph.eachNode(function (n) {
       if (n.id != node.id) delete n.selected;
-      n.setData('dim', 25, 'end');
+      n.setData('dim', 25, 'current');
       n.eachAdjacency(function (adj) {
          adj.setDataset('end', {
             lineWidth: 0.5,
@@ -407,7 +426,7 @@ function selectNodeOnClickHandler(node) {
    });
    if (!node.selected) {
       node.selected = true;
-      node.setData('dim', 35, 'end');
+      node.setData('dim', 1, 'current');
       node.eachAdjacency(function (adj) {
          adj.setDataset('end', {
             lineWidth: 3,
@@ -416,12 +435,12 @@ function selectNodeOnClickHandler(node) {
          adj.setData('showDesc', true, 'current');
       });
    } else {
+	  node.setData('dim', 25, 'current');
       delete node.selected;
    }
    //trigger animation to final styles  
    Mconsole.fx.animate({
-      modes: ['node-property:dim',
+      modes: ['edge-property:lineWidth:color'],
-         'edge-property:lineWidth:color'],
       duration: 500
    });
 }//selectNodeOnClickHandler
@@ -430,8 +449,7 @@ function selectNodeOnClickHandler(node) {
 var canvasDoubleClickHandlerObject = new Object();
 canvasDoubleClickHandlerObject.storedTime = 0;
 
-function canvasDoubleClickHandler(e) {
+function canvasDoubleClickHandler(canvasLoc,e) {
-   console.log(e);
    var TOLERANCE = 300; //0.3 seconds
 
    //grab the location and timestamp of the click
@@ -442,11 +460,12 @@ function canvasDoubleClickHandler(e) {
       //pop up node creation :)
       document.getElementById('new_item').style.left = e.x + "px";
       document.getElementById('new_item').style.top = e.y + "px";
-      $('#item_x').val(e.x);
+      $('#item_x').val(canvasLoc.x);
-      $('#item_y').val(e.y);
+      $('#item_y').val(canvasLoc.y);
       $('#new_item').fadeIn('fast');
       $('#item_name').focus();
    } else {
       canvasDoubleClickHandlerObject.storedTime = now;
+	  $('#new_item').fadeOut('fast');
    }
 }//canvasDoubleClickHandler

app/assets/javascripts/application.js

@@ -21,6 +21,50 @@ var viewMode = "list";
 
  $(document).ready(function() {
    
+   $('.sideOption').bind('click',function(){
+	  $('.sideOption').animate({
+		width: '245px',
+		height: '76px'
+	  }, 700, function() {
+		$('#by_name_input').focus();
+	  });
+	  $('#closeFind').css('display','block');
+	  $('.sideOption').unbind('click');
+	  $('.sideOption').css('cursor','default');
+   });
+   
+   $('#closeFind').click(function(){
+	   $('#closeFind').css('display','none');
+	   $('.sideOption').css('cursor','pointer');
+	   $('.sideOption').animate({
+		width: '45px',
+		height: '32px'
+	  }, 700, function() {
+		    $('.sideOption').bind('click',function(){
+				  firstVal = $('.sideOption option[value="name"]').attr('selected');
+				  secondVal = $('.sideOption option[value="metacode"]').attr('selected');
+				  if ( firstVal === 'selected') {
+					  $('.sideOption').animate({
+						width: '245px',
+						height: '76px'
+					  }, 700, function() {
+						$('#by_name_input').focus();
+					  });
+				  } else if ( secondVal === 'selected') {
+					  $('.sideOption').animate({
+						width: '380px',
+						height: '463px'
+					  }, 700, function() {
+						// Animation complete.
+					  });
+				  }
+				  $('#closeFind').css('display','block');
+				  $('.sideOption').unbind('click');
+				  $('.sideOption').css('cursor','default');
+			   });
+	  });
+   });
+   
    $('.sideOption .select_type').change(function() {
 	      firstVal = $(this).children("option[value='name']").attr('selected');
 		  secondVal = $(this).children("option[value='metacode']").attr('selected');
@@ -31,23 +75,35 @@ var viewMode = "list";
 				  for (var catVis in categoryVisible) {
 					  categoryVisible[catVis] = true;
 				  }
+				  $('.sideOption').animate({
+					width: '245px',
+					height: '76px'
+				  }, 700, function() {
+					// Animation complete.
+				  });
 				  $('.find_topic_by_name').fadeIn('fast');  
 			  });
 		  }
 		  else if ( secondVal === 'selected' ) {
 			  $('.find_topic_by_name').fadeOut('fast', function() {
+				  $('.sideOption').animate({
+					width: '380px',
+					height: '463px'
+				  }, 700, function() {
+					// Animation complete.
+				  });
 				  $('.find_topic_by_metacode').fadeIn('fast');  
 			  });
 		  }
 	});
    
-   $('.find_topic_by_name #item_name').bind('railsAutocomplete.select', function(event, data){
+   $('.find_topic_by_name #by_name_input').bind('railsAutocomplete.select', function(event, data){
       /* Do something here */
       if (data.item.user_id != undefined && data.item.id != undefined) {
         window.open("/users/" + data.item.user_id + "/items/" + data.item.id)
       }
       else if (data.item.value == "no existing match"){
-        $('.find_topic_by_name #item_name').val('');
+        $('.find_topic_by_name #by_name_input').val('');
       }
     });
     
@@ -60,28 +116,6 @@ var viewMode = "list";
 	
 	$('.nodemargin').css('padding-top',$('.focus').css('height'));	
 	
-	
-	// if there's an add topic directly to page form loaded on the page you're on then let the user add one
-	$('#newtopic').click(function(event){
-		obj1 = document.getElementById('new_item');
-		if (obj1 != null) {
-			  $('#new_synapse').css('display','none');
-			  $('#new_item').fadeIn('fast');
-			  event.preventDefault();
-		}
-	});
-	
-	// if there's an add synapse directly to page form loaded on the page you're on then let the user add one
-	$('#newsynapse').click(function(event){
-		obj2 = document.getElementById('new_synapse');
-		if (obj2 != null) {
-			  $('#new_item').css('display','none');
-			  $('#new_synapse').fadeIn('fast');
-			  event.preventDefault();
-		}
-	});
-	
-	
 	// controls the sliding hover of the filters
     var sliding1 = false; 
     $(".accountWrap").hover( 
@@ -123,50 +157,6 @@ var viewMode = "list";
         } 
     );
 
-	var sliding3 = false; 
-    $(".exploreWrap").hover( 
-        function () { 
-          if (! sliding3) { 
-            sliding3 = true; 
-            $(".explore").slideDown('slow', function() { 
-              sliding3 = false; 
-            }); 
-          } 
-        },  
-        function () { 
-          if (! sliding3) { 
-            sliding3 = true; 
-            $(".explore").slideUp('slow', function() { 
-              sliding3 = false; 
-            }); 
-          } 
-        } 
-    );
-	
-	var sliding4 = false; 
-	var lT;
-    $(".legend").hover( 
-        function () { 
-		  clearTimeout(lT);
-          if (! sliding4) { 
-			  sliding4 = true; 
-			  $("#iconLegend ul").slideDown('slow', function() { 
-				sliding4 = false; 
-			  });
-          } 
-        },  
-        function () { 
-          lT = setTimeout(function() { 
-			  if (! sliding4) { 
-					sliding4 = true; 
-					$("#iconLegend ul").slideUp('slow', function() { 
-					  sliding4 = false; 
-					});		
-			  }
-		  },800); 
-        } 
-    ); 
-
 	// toggle visibility of item categories based on status in the filters list
 	$('.find_topic_by_metacode ul li').click(function(event) {
 		obj = document.getElementById('container');

app/assets/stylesheets/application.css

@@ -94,7 +94,7 @@ input[type="submit"] { margin-top:5px; }
 #menus { margin:0 7px; }
 .accountWrap, .createWrap, .exploreWrap { display:block; position:relative; cursor: pointer;}
 
-#menus .account, #menus .create, #menus .explore { display:none; position:absolute; right:0; z-index:12; width:auto; color: #67AF9F;
+#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;
@@ -123,9 +123,10 @@ border: 1px solid rgba(0, 0, 0, 0.2);
 
 
 /* --- styling the FIND section ---*/
-.sideOption { position:fixed; top:20%; left:0px; display:block; width:auto; background: url('bg.png') repeat 0 0; padding:15px; border-bottom-right-radius:10px; border-top-right-radius:10px; color:#000; border:1px solid #000; overflow:visible;}
+.sideOption { position:fixed; top:25%; left:0px; display:block; width:45px; height:32px; background: url('bg.png') repeat 0 0; padding:0 0 0 15px; border-bottom-right-radius:10px; border-top-right-radius:10px; color:#000; border:1px solid #000; overflow:hidden; cursor:pointer; }
-.sideOption select, .sideOption span { float:left; }
+#closeFind { position:fixed; top:25%; left:4px; display:none; margin-top:-20px; cursor:pointer; }
-.sideOption .spacer { margin:0 8px; }
+.sideOption select, .sideOption span { float:left; margin-top:10px; }
+.sideOption .spacer { margin:10px 10px 0; }
 .sideOption .find_key { margin-right:8px; }
 .find_topic_by_name { display: block; }
 .find_topic_by_name input { 
@@ -138,9 +139,6 @@ border: 1px solid rgba(0, 0, 0, 0.2);
 	}
 
 .find_topic_by_metacode { z-index:12; display:none; width:auto; color: #67AF9F; }
-
-#iconLegend { width:inherit; height:inherit; }
-
 .find_topic_by_metacode ul { display:block; }
 .find_topic_by_metacode ul li {clear:both; list-style-type:none; display:block; padding:3px; }
 .find_topic_by_metacode ul img { width:40px; height:40px; float:left; }

app/controllers/items_controller.rb

@@ -74,9 +74,8 @@ class ItemsController < ApplicationController
     end		
 
     @position = Hash.new()
-    @position.x = params[:item][:x]
+    @position['x'] = params[:item][:x]
-    @position.y = params[:item][:y]
+    @position['y'] = params[:item][:y]
-    @position.save
 	
 	@mapping = Mapping.new()
 	if params[:item][:map]

app/views/items/create.js.erb

@@ -3,8 +3,9 @@ $('#new_item')[0].reset();
 
 if(viewMode == "graph") {
 	  var newnode = <%= @item.self_as_json.html_safe %>;
-      var x = <%= position.x %>;
+      var x = <%= @position['x'] %>;
-      var y = <%= position.y %>;
+      var y = <%= @position['y'] %>;
+      
 		
 		if (Mconsole != null) {
       Mconsole.graph.addNode(newnode);
@@ -21,9 +22,9 @@ if(viewMode == "graph") {
         temp.setData('xloc',0);
         temp.setData('yloc',0);
         temp.setData('mappingid', '<%= @mapping.id %>');
-        temp.setPos(new $jit.Complex(0, 0), 'current');
+        temp.setPos(new $jit.Complex(x, y), 'current');
-        temp.setPos(new $jit.Complex(0, 0), 'start');
+        temp.setPos(new $jit.Complex(x, y), 'start');
-        temp.setPos(new $jit.Complex(0, 0), 'end');
+        temp.setPos(new $jit.Complex(x, y), 'end');
       }
       
 			Mconsole.fx.plotNode(temp, Mconsole.canvas);
@@ -42,7 +43,6 @@ if(viewMode == "graph") {
 
 }
 else {
-  alert('wrong!');
 	$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
 	$(".scroll").mCustomScrollbar(); 
 }

app/views/layouts/application.html.erb

@@ -55,22 +55,23 @@
 			<%= yield %>
 		</div>
 		
+		<span id="closeFind">close</span>
 		<div class="sideOption" id="sideOptionFind">
 			<span class="find_key">Find...</span>
 			<select class="select_content">
-				<option value="topics">Topics</option>
+				<option value="topics" selected="selected">Topics</option>
 				<!-- <option value="synapses">Synapses</option>
 				<option value="maps">Maps</option>
 				<option value="mappers">Mappers</option> -->
 			</select>
 			<span class="spacer">by</span>
 			<select class="select_type">
-				<option value="name">Name</option>
+				<option value="name" selected="selected">Name</option>
 				<option value="metacode">Metacode</option>
 			</select>
 			<div class="clearfloat"></div>
 			<%= form_for Item.new, :html => { :class => "find_topic_by_name", :id => "find_topic_by_name" } do |f| %>
-				<%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %>
+				<%= f.autocomplete_field :name, autocomplete_item_name_items_path, :id => "by_name_input", :placeholder => "Search for topics..." %>
 			<% end %>
 			<div class="find_topic_by_metacode" id="find_topic_by_metacode">
 				   <ul id="filters-one">