1 var labelType, useGradients, nativeTextSupport, animate;
4 var ua = navigator.userAgent,
5 iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
6 typeOfCanvas = typeof HTMLCanvasElement,
7 nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
8 textSupport = nativeCanvasSupport
9 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
10 //I'm setting this based on the fact that ExCanvas provides text support for IE
11 //and that as of today iPhone/iPad current text support is lame
12 labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
13 nativeTextSupport = labelType == 'Native';
14 useGradients = nativeCanvasSupport;
15 animate = !(iStuff || !nativeCanvasSupport);
20 write: function(text){
22 this.elem = document.getElementById('log');
23 this.elem.innerHTML = text;
24 this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
33 var tm = new $jit.TM.Squarified({
34 //where to inject the visualization
35 injectInto: 'infovis',
36 //show only one tree level
38 //parent box title heights
48 family: 'Tahoma, Verdana, Arial'
50 //enable specific canvas styles
51 //when rendering nodes
58 //Attach left and right click events
61 onClick: function(node) {
62 if(node) tm.enter(node);
64 onRightClick: function() {
67 //change node styles and canvas styles
68 //when hovering a node
69 onMouseEnter: function(node, eventInfo) {
71 //add node selected styles and replot node
72 node.setCanvasStyle('shadowBlur', 7);
73 node.setData('color', '#888');
74 tm.fx.plotNode(node, tm.canvas);
75 tm.labels.plotLabel(tm.canvas, node);
78 onMouseLeave: function(node) {
80 node.removeData('color');
81 node.removeCanvasStyle('shadowBlur');
86 //duration of the animations
92 //add positioning offsets
95 //implement the onShow method to
96 //add content to the tooltip when a node
98 onShow: function(tip, node, isLeaf, domElement) {
99 var html = "<div class=\"tip-title\">" + node.name
100 + "</div><div class=\"tip-text\">";
101 var data = node.data;
103 html += "Artist: " + data.artist + "<br />";
106 html += "Play count: " + data.playcount;
109 html += "<img src=\""+ data.image +"\" class=\"album\" />";
111 tip.innerHTML = html;
114 //Implement this method for retrieving a requested
115 //subtree that has as root a node with id = nodeId,
116 //and level as depth. This method could also make a server-side
117 //call for the requested subtree. When completed, the onComplete
118 //callback method should be called.
119 request: function(nodeId, level, onComplete){
121 jQuery.getJSON('jit_tree/'+nodeId+'/3', function(data) {
122 onComplete.onComplete(nodeId, data);
126 var tree = memnodes[0];
127 var subtree = $jit.json.getSubtree(tree, nodeId);
128 $jit.json.prune(subtree, 2);
129 onComplete.onComplete(nodeId, subtree);
132 //Add the name of the node in the corresponding label
133 //This method is called once, on label creation and only for DOM labels.
134 onCreateLabel: function(domElement, node){
135 domElement.innerHTML = node.name;
140 jQuery.getJSON('jit_tree/1/2', function(data) {
147 //var pjson = eval('(' + json + ')');
148 var pjson = memnodes[0];
149 $jit.json.prune(pjson, 2);
155 var sq = $jit.id('r-sq'),
156 st = $jit.id('r-st'),
157 sd = $jit.id('r-sd');
158 var util = $jit.util;
159 util.addEvent(sq, 'change', function() {
160 if(!sq.checked) return;
161 util.extend(tm, new $jit.Layouts.TM.Squarified);
164 util.addEvent(st, 'change', function() {
165 if(!st.checked) return;
166 util.extend(tm, new $jit.Layouts.TM.Strip);
167 tm.layout.orientation = "v";
170 util.addEvent(sd, 'change', function() {
171 if(!sd.checked) return;
172 util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
173 tm.layout.orientation = "v";
176 //add event to the back button
177 var back = $jit.id('back');
178 $jit.util.addEvent(back, 'click', function() {