Merge branch 'develop' of github.com:Connoropolous/metamaps_gen002 into develop

app/assets/javascripts/src/JIT.js

@@ -2498,7 +2498,11 @@ Extras.Classes.Navigation = new Class({
     if (!Metamaps.Mouse.boxStartCoordinates && (e.shiftKey || rightClick)) {
       Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos();
     }
+
     Metamaps.Mouse.didPan = false;
+    
+
+    
     // END METAMAPS CODE
     
     this.pos = eventInfo.getPos();
@@ -2570,6 +2574,8 @@ Extras.Classes.Navigation = new Class({
     
     // START METAMAPS CODE
     if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning();
+    
+    
     // END METAMAPS CODE
     
   }
@@ -7075,7 +7081,8 @@ Graph.Plot = {
         var l = Metamaps.Mouse.synapseStartCoordinates.length;
         for (var i = l - 1; i >= 0; i -= 1) {
             start = Metamaps.Mouse.synapseStartCoordinates[i];
-            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.5, true);
+            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.3, true);
+            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.7, true);
         }
         ctx.restore();
     }

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -366,6 +366,29 @@ Metamaps.GlobalUI.Search = {
                     self.close(0, true);
                 }
                 break;
+            case 65:
+            case 97:
+                
+                if (e.ctrlKey){
+                    Metamaps.Control.deselectAllNodes();
+                    Metamaps.Control.deselectAllEdges();
+
+                    e.preventDefault();
+                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                        Metamaps.Control.selectNode(n,e);
+                    });
+
+                    Metamaps.Visualize.mGraph.plot();
+                }
+                
+                break;
+            case 69:
+            case 101:
+                if (e.ctrlKey){
+                    e.preventDefault();
+                    Metamaps.JIT.zoomExtents();
+                }
+                break;
             default:
                 break; //console.log(e.which);
             }

app/assets/javascripts/src/Metamaps.JIT.js

@@ -20,6 +20,7 @@ Metamaps.JIT = {
      */
     prepareVizData: function () {
         var self = Metamaps.JIT;
+        var synapsesToRemove = [];
         var topic;
         var mapping;
         var node;
@@ -39,7 +40,12 @@ Metamaps.JIT = {
         Metamaps.Synapses.each(function (s) {
             edge = s.createEdge();
 
-            if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
+            if(Metamaps.Topics.get(s.get('node1_id')) === undefined || Metamaps.Topics.get(s.get('node2_id')) === undefined) {
+                // this means it's an invalid synapse
+                synapsesToRemove.push(s);
+            } 
+            else if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
+
                 existingEdge = _.findWhere(edges, {
                     nodeFrom: edge.nodeFrom,
                     nodeTo: edge.nodeTo
@@ -53,15 +59,24 @@ Metamaps.JIT = {
                     // for when you're dealing with multiple relationships between the same two topics
                     if (Metamaps.Active.Map) {
                         mapping = s.getMapping();
-                        existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                        existingEdge.data['$mappingIDs'].push(mapping.id);
                     }
-                    existingEdge['$synapseIDs'].push(s.id);
+                    existingEdge.data['$synapseIDs'].push(s.id);
                 } else {
                     // for when you're dealing with a topic that has relationships to many different nodes
                     nodes[edge.nodeFrom].adjacencies.push(edge);
+                    edges.push(edge);
                 }
             }
         });
+
+        // clean up the synapses array in case of any faulty data
+        _.each(synapsesToRemove, function (synapse) {
+            mapping = synapse.getMapping();
+            Metamaps.Synapses.remove(synapse);
+            Metamaps.Mappings.remove(mapping);
+        });
+
         _.each(nodes, function (node) {
             self.vizData.push(node);
         });
@@ -319,7 +334,7 @@ Metamaps.JIT = {
                     if (Metamaps.Mouse.boxStartCoordinates) {
                         Metamaps.Visualize.mGraph.busy = false;
                         Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
-                        Metamaps.JIT.selectWithBox(e);
+                        Metamaps.JIT.zoomToBox(e);
                         return;
                     }
 
@@ -672,8 +687,6 @@ Metamaps.JIT = {
 
             var scale = dist / lastDist;
 
-            console.log(scale);
-
             if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) {
                 Metamaps.Visualize.mGraph.canvas.scale(scale, scale);
             }
@@ -818,8 +831,8 @@ Metamaps.JIT = {
         } else if (tempInit && tempNode2 != null) {
             // this means you want to create a synapse between two existing topics
             Metamaps.Create.newTopic.addSynapse = false;
-            Metamaps.Create.newSynapse.topic1id = tempNode.id;
+            Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
-            Metamaps.Create.newSynapse.topic2id = tempNode2.id;
+            Metamaps.Create.newSynapse.topic2id = tempNode2.getData('topic').id;
             tempNode2.setData('dim', 25, 'current');
             Metamaps.Visualize.mGraph.plot();
             midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
@@ -940,7 +953,7 @@ Metamaps.JIT = {
 			Metamaps.Control.deselectAllEdges();
 		}
 
-		//select all nodes, and their edges, that are within the box
+		//select all nodes that are within the box
         Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
             var x = n.pos.x,
                 y = n.pos.y;
@@ -970,7 +983,7 @@ Metamaps.JIT = {
 			var toNodeX = synapse.get('edge').nodeTo.pos.x;
 			var toNodeY = -1 * synapse.get('edge').nodeTo.pos.y;
 
-			var maxX = fromNodeX;
+            var maxX = fromNodeX;
 			var maxY = fromNodeY;
 			var minX = fromNodeX;
 			var minY = fromNodeY;
@@ -988,7 +1001,7 @@ Metamaps.JIT = {
 			(eX > maxBoxX) ? (maxBoxX = eX):(minBoxX = eX);
 			(eY > maxBoxY) ? (maxBoxY = eY):(minBoxY = eY);
 			
-			//Fins the slopes from the synapse fromNode to the 4 corners of the selection box
+			//Find the slopes from the synapse fromNode to the 4 corners of the selection box
 			var slopes = [];
 			slopes.push( (sY - fromNodeY) / (sX - fromNodeX) );
 			slopes.push( (sY - fromNodeY) / (eX - fromNodeX) );
@@ -1006,39 +1019,43 @@ Metamaps.JIT = {
 			var synSlope = (toNodeY - fromNodeY) / (toNodeX - fromNodeX);
 			var b = fromNodeY - synSlope * fromNodeX;
 
-			var selectTest = false;
+            //Use the selection box edges as test cases for synapse intersection
+			var testX = sX;
+			var testY = synSlope * testX + b;
 
-			//if the synapse slope is within a range that would intersect with the selection box
+            var selectTest;
-			if (synSlope <= maxSlope && synSlope >= minSlope){
-				var testX = sX;
-				var testY = synSlope * testX + b;
 			
-				if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
-					selectTest = true;
+				selectTest = true;
-				}
-				
-				testX = eX;
-				testY = synSlope * testX + b;
-				
-				if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
-					selectTest = true;
-				}
-				
-				testY = sY;
-				testX = (testY - b)/synSlope;
-				
-				if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testY <= maxBoxX){
-					selectTest = true;
-				}
-				
-				testY = eY;
-				testX = (testY - b)/synSlope;
-				
-				if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testY <= maxBoxX){
-					selectTest = true;
-				}				
 			}
-			//The test synapse was selected!
+			
+			testX = eX;
+			testY = synSlope * testX + b;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
+				selectTest = true;
+			}
+			
+			testY = sY;
+			testX = (testY - b)/synSlope;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
+				selectTest = true;
+			}
+			
+			testY = eY;
+			testX = (testY - b)/synSlope;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
+				selectTest = true;
+			}
+
+            //Case where the synapse is wholly enclosed in the seldction box
+            if(fromNodeX >= minBoxX && fromNodeX <= maxBoxX && fromNodeY >= minBoxY && fromNodeY <= maxBoxY && toNodeX >= minBoxX && toNodeX <= maxBoxX && toNodeY >= minBoxY && toNodeY <= maxBoxY){
+                selectTest = true;
+            }			
+			
+            //The test synapse was selected!
 			if(selectTest){
 				if(e.ctrlKey){
 					if(Metamaps.Selected.Edges.indexOf(synapse.get('edge')) != -1 ){
@@ -1102,15 +1119,23 @@ Metamaps.JIT = {
             // wait a certain length of time, then check again, then run this code
             setTimeout(function () {
                 if (!Metamaps.JIT.nodeWasDoubleClicked()) {
-                    if (!e.shiftKey) {
+                    if (!e.shiftKey && !e.ctrlKey) {
                         Metamaps.Control.deselectAllNodes();
                         Metamaps.Control.deselectAllEdges();
                     }
-                    if (node.selected) {
+                    if(e.ctrlKey || e.shiftKey){
-                        Metamaps.Control.deselectNode(node);
+                        if (node.selected) {
-                    } else {
+                            Metamaps.Control.deselectNode(node);
+                        } else {
+                            Metamaps.Control.selectNode(node,e);
+                        } 
+                    }
+                    else{
+                        Metamaps.Control.deselectAllNodes();
+                        Metamaps.Control.deselectAllEdges();
                         Metamaps.Control.selectNode(node,e);
                     }
+                    
                     //trigger animation to final styles
                     Metamaps.Visualize.mGraph.fx.animate({
                         modes: ['edge-property:lineWidth:color:alpha'],
@@ -1138,7 +1163,6 @@ Metamaps.JIT = {
         // create new menu for clicked on node
         var rightclickmenu = document.createElement("div");
         rightclickmenu.className = "rightclickmenu";
-
         // add the proper options to the menu
         var menustring = '<ul>';
 
@@ -1170,8 +1194,7 @@ Metamaps.JIT = {
             top: e.clientY
         });
         //add the menu to the page
-        $('#wrapper').append(rightclickmenu);
+        $('#infovis-canvaswidget').append(rightclickmenu);
-
 
         // attach events to clicks on the list items
 
@@ -1406,9 +1429,9 @@ Metamaps.JIT = {
         var v2 = intermediatePoint.$add(normal.$scale(-1));
 
         if (newSynapse) {
-            ctx.strokeStyle = "#222222";
+            ctx.strokeStyle = "#4fc059";
             ctx.lineWidth = 2;
-            ctx.globalAlpha = 0.4;
+            ctx.globalAlpha = 1;
         }
         ctx.beginPath();
         ctx.moveTo(from.x, from.y);
@@ -1457,8 +1480,7 @@ Metamaps.JIT = {
                 y: posChild.y
             }, 13, false, canvas, 0.7);
         } else if (directionCat == "from-to") {
-            var direction = adj.data.$direction;
+            var inv = (direction[0] != adj.nodeFrom.id);
-            var inv = (direction && direction.length > 1 && direction[0] != adj.nodeFrom.id);
             self.renderMidArrow({
                 x: pos.x,
                 y: pos.y
@@ -1494,133 +1516,163 @@ Metamaps.JIT = {
 
         canvas.translate(-1*offsetX,-1*offsetY);
     },
+    zoomToBox: function (event) {
+        var sX = Metamaps.Mouse.boxStartCoordinates.x,
+            sY = Metamaps.Mouse.boxStartCoordinates.y,
+            eX = Metamaps.Mouse.boxEndCoordinates.x,
+            eY = Metamaps.Mouse.boxEndCoordinates.y;
+
+        Metamaps.JIT.centerMap();
+
+        var height = $(document).height(),
+            width = $(document).width();
+
+        var spanX = Math.abs(sX - eX);
+        var spanY = Math.abs(sY - eY);
+        var ratioX = width / spanX;
+        var ratioY = height / spanY;
+
+        var newRatio = Math.min(ratioX,ratioY);
+
+        var canvas = Metamaps.Visualize.mGraph.canvas;
+
+        if(canvas.scaleOffsetX *newRatio<= 5 && canvas.scaleOffsetX*newRatio >= 0.2){
+            canvas.scale(newRatio,newRatio);
+        }
+        else if(canvas.scaleOffsetX * newRatio > 5){
+            newRatio = 5/ canvas.scaleOffsetX;
+            canvas.scale(newRatio,newRatio);
+        }
+        else{
+            newRatio = 0.2/ canvas.scaleOffsetX;
+            canvas.scale(newRatio,newRatio);
+        } 
+
+        var cogX = (sX + eX)/2;
+        var cogY = (sY + eY)/2;
+
+        canvas.translate(-1* cogX, -1* cogY);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
+
+        Metamaps.Mouse.boxStartCoordinates = false;
+        Metamaps.Mouse.boxEndCoordinates = false;
+        Metamaps.Visualize.mGraph.plot();
+        
+    },
     zoomExtents: function (event) {
         Metamaps.JIT.centerMap();
         var height = $(document).height(),
             width = $(document).width(),
             maxX, minX, maxY, minY, counter = 0;
+        var canvas = Metamaps.Visualize.mGraph.canvas;  
 
         
         if (Metamaps.Selected.Nodes.length > 0) {
             var nodes = Metamaps.Selected.Nodes;
-
-            if(nodes.length > 1){
-                nodes.forEach(function (n) {
-                    var x = n.pos.x,
-                        y = n.pos.y;
-
-                    if (counter == 0){
-                        maxX = x;
-                        minX = x; 
-                        maxY = y;
-                        minY = y; 
-                    }
-
-                    maxX = Math.max(x,maxX);
-                    maxY = Math.max(y,maxY);
-                    minX = Math.min(x,minX);
-                    minY = Math.min(y,minY);
-
-                    counter++;
-                });
-
-                var spanX = maxX - minX;
-                var spanY = maxY - minY;
-                var ratioX = spanX / width;
-                var ratioY = spanY / height;
-
-                var newRatio = Math.max(ratioX,ratioY);
-
-                var canvas = Metamaps.Visualize.mGraph.canvas;
-
-                canvas.scale(1/newRatio*0.8,1/newRatio*0.8);
-
-                counter = 0;
-
-                nodes.forEach(function (n) {
-                    var x = n.pos.x,
-                        y = n.pos.y;
-
-                    if (counter == 0){
-                        maxX = x;
-                        minX = x; 
-                        maxY = y;
-                        minY = y; 
-                    }
-
-                    maxX = Math.max(x,maxX);
-                    maxY = Math.max(y,maxY);
-                    minX = Math.min(x,minX);
-                    minY = Math.min(y,minY);
-
-                    counter++;
-                });
-            }
         }
-        else{
+        else {
-            var nodes = Metamaps.Visualize.mGraph.graph;
+            var nodes = _.values(Metamaps.Visualize.mGraph.graph.nodes);
-
-            if(Object.keys(nodes).length >1){
-                nodes.eachNode(function (n) {
-                    var x = n.pos.x,
-                        y = n.pos.y;
-
-                    if (counter == 0){
-                        maxX = x;
-                        minX = x; 
-                        maxY = y;
-                        minY = y; 
-                    }
-
-                    maxX = Math.max(x,maxX);
-                    maxY = Math.max(y,maxY);
-                    minX = Math.min(x,minX);
-                    minY = Math.min(y,minY);
-
-                    counter++;
-                });
-
-                var spanX = maxX - minX;
-                var spanY = maxY - minY;
-                var ratioX = spanX / width;
-                var ratioY = spanY / height;
-
-                var newRatio = Math.max(ratioX,ratioY);
-
-                var canvas = Metamaps.Visualize.mGraph.canvas;
-
-                canvas.scale(1/newRatio*0.8,1/newRatio*0.8);
-
-                counter = 0;
-
-                nodes.eachNode(function (n) {
-                    var x = n.pos.x,
-                        y = n.pos.y;
-
-                    if (counter == 0){
-                        maxX = x;
-                        minX = x; 
-                        maxY = y;
-                        minY = y; 
-                    }
-
-                    maxX = Math.max(x,maxX);
-                    maxY = Math.max(y,maxY);
-                    minX = Math.min(x,minX);
-                    minY = Math.min(y,minY);
-
-                    counter++;
-                });
-            }   
         }
 
+        if(nodes.length > 1){
+            nodes.forEach(function (n) {
+                var x = n.pos.x,
+                    y = n.pos.y;
 
+                if (counter == 0){
+                    maxX = x;
+                    minX = x; 
+                    maxY = y;
+                    minY = y; 
+                }
 
+                var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'),
+                    dim = n.getData('dim'),
+                    ctx = canvas.getCtx();
 
-        var cogX = (maxX + minX)/2;
+                var height = 25 * arrayOfLabelLines.length;
-        var cogY = (maxY + minY)/2;
 
-        canvas.translate(-1* cogX, -1* cogY);
+                var index, lineWidths = [];
-        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
+                for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                    lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
+                }
+                var width = Math.max.apply(null, lineWidths) + 8;
+
+                maxX = Math.max(x + width /2,maxX);
+                maxY = Math.max(y + n.getData("height") + 5 + height,maxY);
+                minX = Math.min(x - width /2,minX);
+                minY = Math.min(y - dim,minY);
+
+                counter++;
+            });
+
+            var spanX = maxX - minX;
+            var spanY = maxY - minY;
+            var ratioX = spanX / width;
+            var ratioY = spanY / height;
+
+            var newRatio = Math.max(ratioX,ratioY);
+            var scaleMultiplier = 1/newRatio*0.9;
+
+            if(canvas.scaleOffsetX *scaleMultiplier<= 3 && canvas.scaleOffsetX*scaleMultiplier >= 0.2){
+                canvas.scale(scaleMultiplier,scaleMultiplier);
+            }
+            else if(canvas.scaleOffsetX * scaleMultiplier > 3){
+                scaleMultiplier = 3/ canvas.scaleOffsetX;
+                canvas.scale(scaleMultiplier,scaleMultiplier);
+            }
+            else{
+                scaleMultiplier = 0.2/ canvas.scaleOffsetX;
+                canvas.scale(scaleMultiplier,scaleMultiplier);
+            }
+            
+            counter = 0;
+
+            nodes.forEach(function (n) {
+                var x = n.pos.x,
+                    y = n.pos.y;
+
+                if (counter == 0){
+                    maxX = x;
+                    minX = x; 
+                    maxY = y;
+                    minY = y; 
+                }
+
+                var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'),
+                    dim = n.getData('dim'),
+                    ctx = canvas.getCtx();
+
+                var height = 25 * arrayOfLabelLines.length;
+
+                var index, lineWidths = [];
+                for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                    lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
+                }
+                var width = Math.max.apply(null, lineWidths) + 8;
+
+                maxX = Math.max(x + width /2,maxX);
+                maxY = Math.max(y + n.getData("height") + 5 + height,maxY);
+                minX = Math.min(x - width /2,minX);
+                minY = Math.min(y - dim,minY);
+
+                counter++;
+            });
+
+            var cogX = (maxX + minX)/2;
+            var cogY = (maxY + minY)/2;
+
+            canvas.translate(-1* cogX, -1* cogY);
+            $(document).trigger(Metamaps.JIT.events.zoom, [event]);
+        }
+        else if(nodes.length == 1){
+            nodes.forEach(function (n) {
+                var x = n.pos.x,
+                    y = n.pos.y;
+
+                canvas.translate(-1* x, -1* y);
+                $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
+            });
+        }
     }
 };

app/assets/javascripts/src/Metamaps.Router.js

@@ -130,6 +130,7 @@
             Metamaps.GlobalUI.Search.unlock();
             Metamaps.GlobalUI.Search.close(0, true);
 
+            Metamaps.Loading.show();
             Metamaps.Map.end();
             Metamaps.Map.launch(id);
         },

app/assets/javascripts/src/Metamaps.js

@@ -47,6 +47,7 @@ Metamaps.Touch = {
 
 Metamaps.Mouse = {
     didPan: false,
+    didBoxZoom: false,
     changeInX: 0,
     changeInY: 0,
     edgeHoveringOver: false,
@@ -216,15 +217,15 @@ Metamaps.Backbone.init = function () {
             else return false;
         },
         getTopic1: function () {
-            return Metamaps.Topic.get(this.get('node1_id'));
+            return Metamaps.Topics.get(this.get('node1_id'));
         },
         getTopic2: function () {
-            return Metamaps.Topic.get(this.get('node2_id'));
+            return Metamaps.Topics.get(this.get('node2_id'));
         },
         getDirection: function () {
             return [
-                    this.get('node1_id'),
+                    this.getTopic1().get('node').id,
-                    this.get('node2_id')
+                    this.getTopic2().get('node').id
                 ];
         },
         getMapping: function () {
@@ -1231,11 +1232,15 @@ Metamaps.Visualize = {
                 topic.updateNode();
 
                 n.eachAdjacency(function (edge) {
-                    l = edge.getData('synapseIDs').length;
+                    if(!edge.getData('init')) {
-                    for (i = 0; i < l; i++) {
+                        edge.setData('init', true);
-                        synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+
-                        synapse.set('edge', edge);
+                        l = edge.getData('synapseIDs').length;
-                        synapse.updateEdge();
+                        for (i = 0; i < l; i++) {
+                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            synapse.set('edge', edge);
+                            synapse.updateEdge();
+                        }
                     }
                 });
                 
@@ -1253,11 +1258,15 @@ Metamaps.Visualize = {
                 mapping = topic.getMapping();
 
                 n.eachAdjacency(function (edge) {
-                    l = edge.getData('synapseIDs').length;
+                    if(!edge.getData('init')) {
-                    for (i = 0; i < l; i++) {
+                        edge.setData('init', true);
-                        synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+
-                        synapse.set('edge', edge);
+                        l = edge.getData('synapseIDs').length;
-                        synapse.updateEdge();
+                        for (i = 0; i < l; i++) {
+                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            synapse.set('edge', edge);
+                            synapse.updateEdge();
+                        }
                     }
                 });
 
@@ -1273,7 +1282,6 @@ Metamaps.Visualize = {
     /**
      * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
      *
-     * @param vizData a json structure containing the data to be rendered.
      */
     render: function () {
         var self = Metamaps.Visualize, RGraphSettings, FDSettings;
@@ -1498,7 +1506,7 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        self.socket = io.connect('http://localhost:5001');  
+        self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');  
         self.startActiveMap();
     },
     toggleBox: function (event) {
@@ -2021,11 +2029,13 @@ Metamaps.Control = {
         if (Metamaps.Selected.Nodes.indexOf(node) != -1) return;
         node.selected = true;
         node.setData('dim', 30, 'current');
+        /*
 		if(!(e.ctrlKey) && !(e.altKey)){
 			node.eachAdjacency(function (adj) {
 				Metamaps.Control.selectEdge(adj);
 			});
 		}
+        */
 		
         Metamaps.Selected.Nodes.push(node);
     },
@@ -2899,6 +2909,8 @@ Metamaps.Topic = {
 
         var newnode = topic.createNode();
 
+        var midpoint = {}, pixelPos;
+
         if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) {
             Metamaps.Visualize.mGraph.graph.addNode(newnode);
             Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
@@ -2924,8 +2936,15 @@ Metamaps.Topic = {
                 nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
             }
             if (Metamaps.Create.newTopic.addSynapse) {
-                Metamaps.Create.newSynapse.topic1id = tempNode.id;
+                Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
-                Metamaps.Create.newSynapse.topic2id = nodeOnViz.id;
+                
+                // position the form
+                midpoint.x = tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - tempNode.pos.getc().x) / 2;
+                midpoint.y = tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - tempNode.pos.getc().y) / 2;
+                pixelPos = Metamaps.Util.coordsToPixels(midpoint);
+                $('#new_synapse').css('left', pixelPos.x + "px");
+                $('#new_synapse').css('top', pixelPos.y + "px");
+                // show the form
                 Metamaps.Create.newSynapse.open();
                 Metamaps.Visualize.mGraph.fx.animate({
                     modes: ["node-property:dim"],
@@ -2967,14 +2986,21 @@ Metamaps.Topic = {
             });
         }
 
+
+        var successCallback = function (topicModel, response) {
+            if (Metamaps.Active.Map) {
+                mapping.save({ topic_id: topicModel.id });
+            }
+
+            if (Metamaps.Create.newTopic.addSynapse) {
+                Metamaps.Create.newSynapse.topic2id = topicModel.id;
+            }
+        };
+
         if (!Metamaps.Settings.sandbox && createNewInDB) {
             if (topic.isNew()) {
                 topic.save(null, {
-                    success: function (topicModel, response) {
+                    success: successCallback,
-                        if (Metamaps.Active.Map) {
-                            mapping.save({ topic_id: topicModel.id });
-                        }
-                    },
                     error: function (model, response) {
                         console.log('error saving topic to database');
                     }
@@ -3113,12 +3139,13 @@ Metamaps.Synapse = {
         //for each node in this array we will create a synapse going to the position2 node.
         var synapsesToCreate = [];
 
-        node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
+        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
-        topic2 = node2.getData('topic');
+        node2 = topic2.get('node');
 
         var len = Metamaps.Selected.Nodes.length;
         if (len == 0) {
-            synapsesToCreate[0] = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
+            topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
+            synapsesToCreate[0] = topic1.get('node');
         } else if (len > 0) {
             synapsesToCreate = Metamaps.Selected.Nodes;
         }
@@ -3147,6 +3174,8 @@ Metamaps.Synapse = {
     },
     getSynapseFromAutocomplete: function (id) {
         var self = Metamaps.Synapse,
+            topic1,
+            topic2,
             node1,
             node2;
 
@@ -3158,8 +3187,10 @@ Metamaps.Synapse = {
         });
         Metamaps.Mappings.add(mapping);
 
-        node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
+        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
-        node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
+        node1 = topic1.get('node');
+        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+        node2 = topic2.get('node');
         Metamaps.Create.newSynapse.hide();
 
         self.renderSynapse(mapping, synapse, node1, node2, true);
@@ -3217,6 +3248,7 @@ Metamaps.Map = {
             Metamaps.Filter.checkMappers();
 
             Metamaps.Realtime.startActiveMap();
+            Metamaps.Loading.hide();
         }
 
         $.ajax({
@@ -3401,6 +3433,7 @@ Metamaps.Map.InfoBox = {
         });
 
         $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
+
     },
     createContributorList: function () {
         var self = Metamaps.Map.InfoBox;
@@ -3457,6 +3490,34 @@ Metamaps.Map.InfoBox = {
     }
 }; // end Metamaps.Map.InfoBox
 
+/*
+*
+* Account Settings
+*
+*/
+Metamaps.Account = {
+    init: function () {
+        var self = Metamaps.Account;
+
+        
+    },
+    changeName: function(){
+        $('.accountName').hide();
+        $('.changeName').show();
+    },
+    showPass: function(){
+        $(".toHide").show();
+        $(".changePass").hide();
+    },
+    hidePass: function(){
+        $(".toHide").hide();
+        $(".changePass").show();
+
+        $('#current_password').val('');
+        $('#user_password').val('');
+        $('#user_password_confirmation').val('');
+    }
+};
 
 /*
  *

app/assets/stylesheets/application.css

@@ -51,6 +51,22 @@ img {
     display: block;
     text-indent: -9999px;
 }
+
+::-webkit-input-placeholder { /* WebKit browsers */
+    color:    #BDBDBD;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+   color:    #BDBDBD;
+   opacity:  1;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+   color:    #BDBDBD;
+   opacity:  1;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+   color:    #BDBDBD;
+}
+
 html,
 body,
 .main,
@@ -74,9 +90,60 @@ body,
 /* forgot password fix */
 
 .forgotPassword input[type="submit"] {
-    padding: 0 5px;
+    width: 300px;
-    width: auto;
+    color: #f5f5f5;
+    font-family: din-regular;
+    top: 118px;
+    position: absolute;
 }
+
+.new_user input[type="submit"] {
+    width: 96px;
+    padding: 0px;
+    font-family: din-regular;
+    text-transform: uppercase;
+    color: #f5f5f5;
+    margin-top:16px;
+    float: right;
+}
+
+.login input[type="submit"]{
+    width:84px;
+    margin-top: 16px;
+    font-family: din-regular;
+    text-transform: uppercase;
+}
+
+.edit_user input[type="submit"]{
+    width: 96px;
+    padding: 0px;
+    font-family: din-regular;
+    text-transform: uppercase;
+    color: #f5f5f5;
+    margin-top:16px;
+    float: right;
+}
+
+.edit_user .userImage {
+    width: 84px;
+    margin: 0 auto;
+    position: relative;
+    margin-top: 32px;
+}
+.edit_user .editPhoto {
+    display: none;
+    width: 40px;
+    height: 40px;
+    background-image: url(photo.png);
+    position: absolute;
+    top: 22px;
+    left: 22px;
+    cursor: pointer;
+}
+.edit_user .userImage:hover .editPhoto {
+    display: block;
+}
+
 html {
 
 } 
@@ -181,6 +248,7 @@ input[type="submit"]:active {
 .new_session,
 .new_user,
 .edit_user,
+.login,
 .forgotPassword {
     display: block;
     width: 300px;
@@ -189,36 +257,159 @@ input[type="submit"]:active {
     border-radius: 5px;
     color: black;
     box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
+    position:absolute;
     top: 50%;
     left:50%;
-    position:absolute;
-    margin-left: -166px;
 }
+
+.login{
+    width: 200px;
+    height: 308px;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    margin-left:-100px;
+    margin-top:-158px;
+    font-family: din-medium;
+    font-size: 18px;
+    color: #424242;
+}
+
+.new_user{
+    height: 412px;
+    margin-left:-166px;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    font-family: din-medium;
+    line-height: 18px;
+    text-transform: uppercase;
+    color:#424242;
+    margin-top: -222px;
+}
+
+.edit_user {
+    width: 300px;
+    margin-top: -282px;
+    margin-left: -166px;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    text-transform: uppercase;
+    line-height: 18px;
+    font-family: din-medium;
+    color:#424242;
+}
+
+.toHide {
+    display:none;
+}
+
 .forgotPassword {
     height: 134px;
+    font-family: din-medium;
+    color:#424242;
+    text-transform: uppercase;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    margin-left: -166px;
     margin-top: -83px;
+    line-height: 18px;
 }
+
+.edit_user label.firstFieldText {
+    padding-top: 8px;
+}
+.firstFieldText{
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
+    color:#424242;
+    padding-top:24px;
+    padding-bottom: 6px;
+    text-transform: none;
+    margin: 0px;
+    line-height: 14px
+}
+.fieldText {
+    font-family: din-regular;
+    font-size: 14px;
+    color:#424242;
+    padding-top:16px;
+    padding-bottom: 6px;
+    text-transform: none;
+    margin: 0px;
+    line-height: 14px;
+}
+
+.smallText{
+    font-family: din-regular;
+    font-size: 12px;
+    line-height: 12px;
+    color: #c04f4f;
+    margin-top: 8px;
+    text-transform: none;
+}
+
+.accountName {
+    font-size: 24px;
+    text-align: center;
+    font-family: 'din-medium', helvetica, sans-serif;
+    color:#424242;
+    margin-top: 24px;
+    text-transform: none;
+
+}
+.accountName:hover .nameEdit:after {
+    background:url(edit.png)no-repeat;
+    content:" ";
+    position:absolute;
+    width:25px;
+    height:25px;
+    margin:5px 0px 0px 5px;
+}
+.changeName {
+    display: none;
+    margin-top: 24px;
+}
+
+.changePass {
+    font-family: din-regular;
+    font-size: 14px;
+    line-height: 14px;
+    color: #4fb5c0;
+    padding-top: 16px;
+    float: left;
+    text-transform: none;
+    cursor: pointer;
+}
+
+.noChangePass {
+    font-family: din-regular;
+    font-size: 12px;
+    line-height: 12px;
+    color: #c04f4f;
+    padding-top: 16px;
+    float: left;
+    text-transform: none;
+    cursor: pointer;
+
+}
+
 .centerGreyForm input[type="text"],
 .centerGreyForm input[type="email"],
 .centerGreyForm input[type="password"] {
-    width: 250px;
+    width: 300px;
     height: 32px;
-    font-size: 15px;
+    font-size: 14px;
     direction: ltr;
     -webkit-appearance: none;
     appearance: none;
     display: inline-block;
-    margin: 0;
+    margin: 0px 0px;
-    padding: 0 8px;
+    padding: 5px 0px 0px 9px;
     background: #fff;
-    border: 1px solid #d9d9d9;
+    color: #424242 !important;
-    border-top: 1px solid #c0c0c0;
+    border: none;
+    outline:none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    -webkit-border-radius: 1px;
+    -webkit-border-radius: 2px;
-    -moz-border-radius: 1px;
+    -moz-border-radius: 2px;
-    border-radius: 1px;
+    border-radius: 2px;
     font: -webkit-small-control;
     color: initial;
     letter-spacing: normal;
@@ -227,17 +418,27 @@ input[type="submit"]:active {
     text-indent: 0px;
     text-shadow: none;
     display: inline-block;
-    text-align: start;
+    font-family: 'din-regular', helvetica, sans-serif;
+    text-align: left;
 }
-.centerGreyForm input[type="text"]:hover,
+
-.centerGreyForm input[type="email"]:hover,
+.login input[type="email"],
-.centerGreyForm input[type="password"]:hover {
+.login input[type="password"] {
-    border: 1px solid #b9b9b9;
+    width: 200px;
-    border-top: 1px solid #a0a0a0;
+    height:32px;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    background-color:#ffffff;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    color: #424242 !important;
+    font-family: din-medium;
+    font-size: 14px;
+    text-align: left;
+    padding: 5px 0px 0px 10px;
 }
+
+.login input[type="email"] {
+    margin-bottom:10px;
+}
+
 .new_topic {
     /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
     top: -1000px;
@@ -551,6 +752,7 @@ li.accountInvite span {
     width:84px;
     margin: 24px auto;
 }
+
 .accountInput {
     margin: 0 35px 10px;
 }
@@ -567,8 +769,7 @@ li.accountInvite span {
     margin: 0;
     padding: 0 10px;
     background: #fff;
-    border: 1px solid #d9d9d9;
+    border: none;
-    border-top: 1px solid #c0c0c0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -576,7 +777,7 @@ li.accountInvite span {
     -moz-border-radius: 2px;
     border-radius: 2px;
     font: -webkit-small-control;
-    color: #BDBDBD;
+    color: #424242 !important;
     letter-spacing: normal;
     word-spacing: normal;
     text-transform: none;
@@ -585,35 +786,40 @@ li.accountInvite span {
     text-align: start;
     font-family: 'din-medium', helvetica, sans-serif;
 }
-.sidebarAccountBox input[type="email"]:hover,
-.sidebarAccountBox input[type="password"]:hover {
-    border: 1px solid #b9b9b9;
-    border-top: 1px solid #a0a0a0;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
 .accountSubmit {
-    margin-left: 35px;
     float:left;
 }
+.loginAnywhere .accountSubmit {
+    margin-left: 35px;
+}
 .accountRememberMe {
     float:right;
+}
+.login .accountRememberMe {
+    margin-top: 10px;
+}
+.loginAnywhere .accountRememberMe {
     margin-right: 35px;
 }
 #user_remember_me {
     margin-top: 11px;
+    display:inline;
 }
 #user_remember_me,
 label[for="user_remember_me"] {
-    float: left;
+    float: right;
     font-size: 12px;
     color: #424242;
 }
 .accountForgotPass {
-    margin: 8px 0 0 35px;
     font-size: 12px;
 }
+.loginAnywhere .accountForgotPass {
+    margin: 8px 0 0 35px;
+}
+.login .accountForgotPass {
+    margin: 8px 0 0 0;
+}
 .accountForgotPass a {
     color: #757575;
 }
@@ -656,7 +862,7 @@ label[for="user_remember_me"] {
 
 .sidebarFilterBox {
     display:none;
-    width: 304px;
+    width: 319px;
     padding: 16px 0;
     overflow-y: auto;
 }
@@ -2063,7 +2269,15 @@ float: left;
     display: none;
 }
 
+
 /* collabCompass section */
+.collabCompass {
+    position:fixed;
+    top:50%;
+    left:50%;
+    z-index: 4;
+}
+
 .collabCompass:hover p {
     display: block;
 }

app/assets/stylesheets/clean.css

@@ -606,6 +606,14 @@
     background-color: #9150bc;
 }
 
+.github-fork-ribbon-wrapper {
+    display:none;
+}
+
+.homePage .github-fork-ribbon-wrapper {
+    display: block;
+}
+
 /* end home page */
 
 /* infoAndHelp */
@@ -806,13 +814,3 @@ box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
 body a#barometer_tab:hover {
   background-position: 0 -110px;
 }
-
-
-/* REALTIME */
-
-.collabCompass {
-    position:fixed;
-    top:50%;
-    left:50%;
-    z-index: 4;
-}

app/views/layouts/_account.html.erb

@@ -38,14 +38,18 @@
         </div>
         <div class="accountSubmit"><%= f.submit "SIGN IN" %></div>
         <% if devise_mapping.rememberable? -%>
-        <div class="accountRememberMe"><%= f.check_box :remember_me %> <%= f.label :remember_me, "Stay signed in" %><div class="clearfloat"></div></div>
+        <div class="accountRememberMe">
+          <%= f.label :remember_me, "Stay signed in" %>
+          <%= f.check_box :remember_me %>
+          <div class="clearfloat"></div>
+        </div>
         <% end -%>
         <div class="clearfloat"></div>
+        <div class="accountForgotPass">
+          <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
+            <%= link_to "Forgot password?", new_password_path(resource_name), 
+              :data => { :bypass => 'true'} %>
+          <% end -%>
+        </div>
   <% end %>
-  <div class="accountForgotPass">
-    <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
-      <%= link_to "Forgot password?", new_password_path(resource_name), 
-        :data => { :bypass => 'true'} %>
-    <% end -%>
-  </div>
 <% end %>

app/views/shared/_filterBox.html.erb

@@ -33,9 +33,21 @@
       end
     end
 
-    @metacodes.sort! {|x,y| x.name <=> y.name }
+    @metacodes.sort! {|x,y| 
-    @synapses.sort! {|x,y| x.desc <=> y.desc }
+      n1 = x.name || ""
-    @mappers.sort! {|x,y| x.name <=> y.name }
+      n2 = y.name || ""
+      n1 <=> n2
+    }
+    @synapses.sort! {|x,y|
+      d1 = x.desc || ""
+      d2 = y.desc || ""
+      d1 <=> d2
+    }
+    @mappers.sort! {|x,y| 
+      n1 = x.name || ""
+      n2 = y.name || ""
+      n1 <=> n2 
+    }
     
     @metacodes.each_with_index do |metacode, index| 
         @metacodelist += '<li data-id="' + metacode.id.to_s + '">'

app/views/users/edit.html.erb

@@ -6,15 +6,33 @@
   
 <% content_for :title, @user.name + "'s Settings | Metamaps" %> 
 <div id="yield">
-<%= formula_form_for @user, url: user_url do |form| %>
+<%= form_for @user, url: user_url, :html =>{ :class => "edit_user centerGreyForm"} do |form| %>
   <h3>Edit Account</h3>
-  <label for="user_image">Profile Picture</label>
+  <div class="userImage">
-  <% if @user.image %><%= image_tag @user.image.url(:round), :size => "48x48" %><% end %>
+    <%= image_tag @user.image.url(:round), :size => "84x84" %>
-  <%= form.file_field :image %>
+    <div class="editPhoto"></div>
-  <%= form.input :name, label: "Name", class: "name" %>
+  </div>
-  <%= form.input :email, label: "Email", class: "email" %>
+  <div class="accountName" onclick="Metamaps.Account.changeName()">
-  <%= form.input :password, label: "Password", class: "password", :autocomplete => :off %>
+    <div class="nameEdit"><%= @user.name %></div>
+  </div>
+  <div class="changeName">
+    <%= form.label :name, "Name:", :class => "firstFieldText" %>
+    <%= form.text_field :name  %>
+  </div>
+  <div><%= form.label :email, "Email:", :class => "firstFieldText" %>
+  <%= form.email_field :email  %></div>
+  <div class="changePass" onclick="Metamaps.Account.showPass()">Change Password</div>
+  <div class="toHide">
+  <div>
+    <%= form.label :current_password, "Current Password:", :class => "firstFieldText" %>
+    <%= password_field_tag :current_password, params[:current_password] %>
+  </div>
+   <div><%= form.label :password, "New Password:", :class => "firstFieldText" %>
+  <%= form.password_field :password, :autocomplete => :off%></div>
+   <div><%= form.label :password_confirmation, "Confirm New Password:", :class => "firstFieldText" %>
+  <%= form.password_field :password_confirmation, :autocomplete => :off%></div>
+  <div class="noChangePass" onclick="Metamaps.Account.hidePass()">Oops, don't change password</div>
+</div>
   <%= form.submit "Update", class: "update" %>
 <% end %>
 </div>
-

app/views/users/passwords/new.html.erb

@@ -6,10 +6,10 @@
   
   <h3>FORGOT PASSWORD?</h3>
 
-  <div><%= f.label :email, "Enter Your Email:" %>
+  <div><%= f.label :email, "Enter your email:", :class => "firstFieldText" %>
   <%= f.email_field :email, :autofocus => true %></div>
 
-  <div><%= f.submit "Send Reset Password Instructions" %></div>
+  <div><%= f.submit "Send Password Reset Instructions" %></div>
   
 <% end %>
 </div>

app/views/users/registrations/new.html.erb

@@ -6,24 +6,24 @@
   
   <h3>Sign Up</h3>
 
-  <div><%= f.label :name %>
+  <div><%= f.label :name, "Name:", :class => "firstFieldText" %>
   <%= f.text_field :name, :autofocus => true %></div>
   
-  <div><%= f.label :email %>
+  <div><%= f.label :email, "Email:", :class => "fieldText" %>
   <%= f.email_field :email %></div>
 
-  <div><%= f.label :password %>
+  <div><%= f.label :password, "Password:", :class => "fieldText" %>
   <%= f.password_field :password %></div>
 
-  <div><%= f.label :password_confirmation %>
+  <div><%= f.label :password_confirmation, "Password Confirmation:", :class => "fieldText" %>
   <%= f.password_field :password_confirmation %></div>
   
-  <div><%= f.label "Access Code" %>
+  <div><%= f.label "Access Code:", :class => "fieldText" %>
   <%= f.text_field :joinedwithcode %></div>
 
-  <div><%= f.submit "Sign up" %></div>
+  <div><%= f.submit "Sign up!" %></div>
   
-  <div><br />Don't have an access code?<br /><a href="/request" data-bypass="true">Request an Invite</a></div>
+  <div class = "smallText"><br />Don't have an access code?<br /><a href="/request" data-bypass="true">Request an Invite</a></div>
 <% end %>
 </div>
 

app/views/users/sessions/new.html.erb

@@ -1,28 +1,32 @@
 <% content_for :title, "Sign In | Metamaps" %>
 
 <div id="yield">
-<%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :method => :post, :class => "new_user centerGreyForm" }) do |f| %>
+<%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :method => :post, :class => "centerGreyForm login" }) do |f| %>
-  <h3>Sign in</h3>
+  <h3>SIGN IN</h3>
   
-  <div><%= f.label :email %>
+  <div class="accountImage"></div>
-  <%= f.email_field :email, :autofocus => true %></div>
+  <div>
+  <%= f.email_field :email, :autofocus => true, :placeholder => "Email" %></div>
 
-  <div><%= f.label :password %>
+  <div>
-  <%= f.password_field :password %></div>
+  <%= f.password_field :password, :placeholder => "Password" %></div>
+
+  <div class="accountSubmit"><%= f.submit "Sign in" %></div>
   
   <% if devise_mapping.rememberable? -%>
-    <div><%= f.check_box :remember_me %> <%= f.label :remember_me %><div class="clearfloat"></div></div>
+  <div class="accountRememberMe">
+    <%= f.label :remember_me, "Stay signed in" %>
+    <%= f.check_box :remember_me %>
+    <div class="clearfloat"></div>
+  </div>
   <% end -%>
-
+  <div class="clearfloat"></div>
-  <div><%= f.submit "Sign in" %></div>
+  <div class="accountForgotPass">
-  
+    <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
-  <br />
+      <%= link_to "Forgot password?", new_password_path(resource_name), 
-  <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
+        :data => { :bypass => 'true'} %>
-    <%= link_to "Forgot your password?", new_password_path(resource_name), 
+    <% end -%>
-        :data => { :bypass => 'true'} %><br />
+  </div>
-  <% end -%>
-  <br />
-  <div>Don't have an account?<br /><a href="/request" data-bypass="true">Request an Invite</a></div>
 <% end %>
 </div>
 

diff.txt

@@ -0,0 +1,130 @@
+
+
+diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
+index bb0edb6..bb56ab0 100644
+--- a/app/assets/stylesheets/application.css
++++ b/app/assets/stylesheets/application.css
+@@ -74,8 +74,9 @@ body,
+ /* forgot password fix */
+ 
+ .forgotPassword input[type="submit"] {
+-    padding: 0 5px;
+-    width: auto;
++    width: 300px;
++    color: #f5f5f5;
++    font-family: din-regular;
+ }
+ html {
+ 
+@@ -189,36 +190,55 @@ input[type="submit"]:active {
+     border-radius: 5px;
+     color: black;
+     box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
++    position:absolute;
+     top: 50%;
+     left:50%;
+-    position:absolute;
+-    margin-left: -166px;
++    
+ }
++
+ .forgotPassword {
+     height: 134px;
+     margin-top: -83px;
++    font-family: din-medium;
++    color:#424242;
++    text-transform: uppercase;
++    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
++    font-size: 17px;
++    margin-left: -166px;
++
++}
++
++.emailText {
++    font-family: din-regular;
++    font-size: 14px;
++    color:#424242;
++    padding-top:24px;
++    padding-bottom: 6px;
++    text-transform: none;
++    margin: 0px;
+ }
+ .centerGreyForm input[type="text"],
+ .centerGreyForm input[type="email"],
+ .centerGreyForm input[type="password"] {
+-    width: 250px;
++    width: 300px;
+     height: 32px;
+     font-size: 15px;
+     direction: ltr;
+     -webkit-appearance: none;
+     appearance: none;
+     display: inline-block;
+-    margin: 0;
+-    padding: 0 8px;
++    margin: 0px 0px 6px 0px;
++    padding: 10px 0px 0px 9px;
+     background: #fff;
++    color: #bdbdbd;
+     border: 1px solid #d9d9d9;
+     border-top: 1px solid #c0c0c0;
+     -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+-    -webkit-border-radius: 1px;
+-    -moz-border-radius: 1px;
+-    border-radius: 1px;
++    -webkit-border-radius: 2px;
++    -moz-border-radius: 2px;
++    border-radius: 2px;
+     font: -webkit-small-control;
+     color: initial;
+     letter-spacing: normal;
+@@ -227,8 +247,10 @@ input[type="submit"]:active {
+     text-indent: 0px;
+     text-shadow: none;
+     display: inline-block;
+-    text-align: start;
++    font: din-medium;
++    text-align: left;
+ }
++
+ .centerGreyForm input[type="text"]:hover,
+ .centerGreyForm input[type="email"]:hover,
+ .centerGreyForm input[type="password"]:hover {
+@@ -237,7 +259,9 @@ input[type="submit"]:active {
+     -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
++    color: #424242;
+ }
++
+ .new_topic {
+     /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
+     top: -1000px;
+diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
+index 738d5c6..70d6de7 100644
+--- a/app/views/users/edit.html.erb
++++ b/app/views/users/edit.html.erb
+@@ -17,4 +17,3 @@
+   <%= form.submit "Update", class: "update" %>
+ <% end %>
+ </div>
+-
+diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb
+index 88dddb4..3238a81 100644
+--- a/app/views/users/passwords/new.html.erb
++++ b/app/views/users/passwords/new.html.erb
+@@ -6,10 +6,10 @@
+   
+   <h3>FORGOT PASSWORD?</h3>
+ 
+-  <div><%= f.label :email, "Enter Your Email:" %>
++  <div><%= f.label :email, "Enter your email:", :class => "emailText" %>
+   <%= f.email_field :email, :autofocus => true %></div>
+ 
+-  <div><%= f.submit "Send Reset Password Instructions" %></div>
++  <div><%= f.submit "Send Password Reset Instructions" %></div>
+   
+ <% end %>
+ </div>