Adding visualization filter helper

doc/examples/originalComponents/static/admin/js/editor.js

 $(document).ready(function(){
-    var relPos = "../lodspeakr/components/";
+    var relPos = "../visualbox/components/";
     var currentXhr = null;    
     var templateBuffer = '';
     var queryBuffer = '';
@@ -19,7 +19,52 @@ $(document).ready(function(){
   };
   return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || 'text/html'), mustacheOverlay);
 });
-
+    var tip = $('<div></div>');
+        tip.css("width", "400px")
+           .css("height", "220px")
+           .css("font", "Monaco")
+           .css("font-size", "13px")
+           .css("text-wrap", "unrestricted")
+           .css("position", "absolute")
+           .css("z-index", "100")
+           .css("background","white")
+           .css("border", "1px solid black")
+           .css("-moz-border-radius", "8px 8px")
+           .css("border-radius", "8px 8px")
+           .css("font-family", "Helvetica Neue")
+           .css("color", "black")
+           .css("padding", "5px")
+           .css("opacity", 0);
+    $("body").append(tip);
+    var cheatSheet = $("body").append("<div id='cheat' class='cheat-sheet'></div>");
+    $("#cheat").on('mouseenter', function(){$(this).animate({right: '+=200'}, 180)})
+               .on('mouseleave', function(){$(this).animate({right: '-=200'}, 180);tip.css("top", 0).css("left", 0)}).html("<span class='cheat-title'>Visualization Filters</span>")
+               .on('mousemove', function(e){tip.css("top", e.pageY-100).css("left", e.pageX-430)});
+    
+    $("#cheat").append("<ul id='cheat-list' class='cheat-list'></ul>");
+    
+    var visualizationsEnabled = [ {name: 'D3CirclePacking', params: "childNode,parentNode", img: "circlepacking.png"}, 
+                                  {name: 'D3Dendrogram',  params: "childNode,parentNode", img: "dendrogram.png"},
+                                  {name: 'D3ForceGraph',  params: "sourceNode,TargetNode", img: "graph.png"},
+                                  {name: 'D3ParallelCoordinates',  params: "label,value1,value2,...,valueN", img: "parallelcoordinates.png"},
+                                  {name: 'GoogleMaps',  params: "latitude,longitude,label", img: "maps.png"},
+                                  {name: 'GoogleVizBarChart', params: "valuesInAxisX,valuesInAxisY", img: "barchart.png"},
+                                  {name: 'GoogleVizColumnChart', params: "valuesInAxisX,valuesInAxisY", img: "columnchart.png"},
+                                  {name: 'GoogleVizLineChart', params: "valuesInAxisX,valuesInAxisY", img: "linechart.png"},
+                                  {name: 'GoogleVizPieChart', params: "valuesInAxisX,valuesInAxisY", img: "piechart.png"},
+                                  {name: 'GoogleVizScatterChart', params: "valuesInAxisX,valuesInAxisY", img: "piechart.png"},
+                                  {name: 'GoogleVizTable', params: "column1,column2,...,columnN", img: "table.png"},
+                                  {name: 'Timeknots', params: "date,label[,image]", img: "timeknots.png"}];
+    $.each(visualizationsEnabled, function(index, value){
+      $("#cheat-list").append("<li><a href='#' class='cheat-link' data-params='"+value.params+"' data-img='"+value.img+"'>"+value.name+"</a></li>");
+    });
+    
+    $(".cheat-link").on('click', function(){
+      var visualFilter = '{{models.main|'+$(this).html()+':"'+$(this).attr("data-params")+'"}}';
+      templateEditor.replaceSelection(visualFilter);
+    })
+                    .on('mouseenter', function(){var visualFilter = '<h3>'+$(this).html()+'</h3><p style="background:#ccc">{{models.main|'+$(this).html()+':"'+$(this).attr("data-params")+'"}}</p><img src="img/'+$(this).attr("data-img")+'"/>';tip.html(visualFilter).animate({opacity: .95}, 200)})
+                    .on('mouseleave', function(){tip.animate({opacity: '0'}, 200)});
     //Create Template and Query Editor
     var templateEditor = CodeMirror.fromTextArea(document.getElementById('template-editor'), {mode: 'mustache',
     onChange:function(e){