var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};


function init(){
    //init data
    var json = {
        id: "190_0",
        name: "Clever Resources",
        children: [ {
            id: "100",
            name: "Interior Designers",
            data: {
                relation: "."
            },
            children: [{
                id: "12",
                name: "A Room with a View Interiors",
                data: {
                    relation: "<h2>Michelle Stojanovich</h2><div class='info'>Phone: (408) 395-9101 | <a href='mailto:rwav@verizon.net' class='lt_text' style='line-height:14px'>email</a></div>"
                },
                children: []
            }, {
                id: "13",
                name: "Charles Allem Design",
                data: {
                    relation: "<h2>Charles Allem</h2><div class='info'>Phone: (310) 286-9605 | Fax: (310) 286-9664 | <a href='mailto:cpa@charlesallemdesigns.com'>email</a> | <a href='http://www.charlesallemdesigns.com' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "14",
                name: "Envision & Storytelling",
                data: {
                    relation: "<h2>Geoff Duyker </h2><div class='info'>Phone: (604) 913-2226 | Fax: (604) 913-2227 | <a href='mailto:geoff@e-and-s.com'>email</a> | <a href='http://www.e-and-s.com' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "15",
                name: "Garrett Ferguson",
                data: {
                    relation: "<h2>Christine Garrett</h2><div class='info'>Phone: (847) 866-6999</div>"
                },
                children: []
            }, {
                id: "16",
                name: "Lamb Design",
                data: {
                    relation: "<h2>Linda Lamb </h2><div class='info'>Phone: (831) 649-0404 | Fax: (831) 649-0607 | <a href='mailto:info@lambdesigngroup.com'>email</a> | <a href='http://www.lambdesigngroup.com' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "17",
                name: "McDonald & Moore",
                data: {
                    relation: "<h2>Marcia Moore </h2><div class='info'>Phone: (408) 292-6997 | Fax: (408) 292-5855 | <a href='mailto:mcmo@mcdonaldmoore.com'>email</a> | <a href='http://www.mcdonaldmoore.com' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "18",
                name: "Peggy Chesnut",
                data: {
                    relation: "<h2>Peggy Chesnut </h2><div class='info'>Phone: (808) 322-7878 | Fax: (808) 322-9941 | <a href='mailto:p-chesnut@hawaii.rr.com'>email</a></div>"
                },
                children: []
            }, {
                id: "19",
                name: "Philpotts & Assoc.",
                data: {
                    relation: "<h2>Mary Philpotts</h2><div class='info'>Phone: (808) 885-5587 | Fax: (808) 885-5512 | <a href='mailto:inquiries@philpotts.net'>email</a> | <a href='http://www.philpotts.net/' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "20",
                name: "St. Dizier Design",
                data: {
                    relation: "<h2>Jaques St. Dizier </h2><div class='info'>Phone: (707) 433-9900 | Fax: (707) 433-9906 | <a href='mailto:info@saintd.com' class='lt_text' style='line-height:14px'>email</a> | <a href='http://www.sdhdesign.com' target='_blank' class='lt_text'>website</a></div>"
                },
                children: []
            }, {
                id: "21",
                name: "Trans-Pacific Design",
                data: {
                    relation: "<h2>Sue Moss</h2><div class='info'>Phone: (808) 885-5587 | Fax:</strong> (808) 885-5512 | <a href='mailto:susan@trans-pacificdesign.com'>email</a> | <a href='http://www.trans-pacificdesign.com' target='_blank'>website</a></div>"
                },
                children: []
            }]
        }, {
            id: "200",
            name: "Architects",
            data: {
                relation: ".."
            },
            children: [{
                id: "2",
                name: "Laber Architects",
                data: {
                    relation: "<h2>Joel Laber</h2><div class='info'>Phone: (808) 883-9020 | Fax: (808) 883-2690 | <a href='mailto:jlaber@hawaii.rr.com' >email</a> | <a href='http://www.laberarchitects.com' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "3",
                name: "Riecke Sunnland Kono",
                data: {
                    relation: "<h2>Warren Sunnland</h2><div class='info'>Phone: (808) 523-1830 | Fax: (808) 523-0837 | <a href='mailto:sunnlandw001@hawaii.rr.com' >email</a> | <a href='http://www.rskarchitects.com' target='_blank' >website</a></div>"
                },
                children: []
            }, {
                id: "4",
                name: "Spencer Architects",
                data: {
                    relation: "<h2>Spencer Leinweber</h2><div class='info'>Phone: (808) 955-9595</div>"
                },
                children: []
            }, {
                id: "5",
                name: "Group 70",
                data: {
                    relation: "<h2>Sheryl Seaman</h2><div class='info'>Phone: (808) 523-5866 | Fax: (808) 523-5874 | <a href='mailto:sseaman@group70int.com' >email</a> | <a href='http://www.group70int.com' target='_blank' >website</a></div>"
                },
                children: []
            }, {
                id: "6",
                name: "Robert Nespor",
                data: {
                    relation: "<h2>Matt Graves </h2><div class='info'>Phone: (808) 322-0000 | <a href='mailto:chopper@hawaii.rr.com'>email</a></div>"
                },
                children: []
            }, {
                id: "7",
                name: "Todd Schooler",
                data: {
                    relation: "<h2>Todd Schooler</h2><div class='info'>Phone: (949) 646-8805 | Fax: (949) 646-8862 | <a href='mailto:skoooler@aol.com'>email</a></div>"
                },
                children: []
            }]
        }, {
            id: "300",
            name: "Landscape Designers",
            data: {
                relation: ".."
            },
            children: [{
                id: "8",
                name: "Greg Boyer",
                data: {
                    relation: "<h2>Greg Boyer</h2><div class='info'>Phone: (808) 239-8264 | Fax: (808) 239-7749 | <a href='mailto:greg@hawaiianlandscapes.com'>email</a> | <a href='http://www.hawaiianlandscapes.com' target='_blank' >website</a></div>"
                },
                children: []
            }, {
                id: "9",
                name: "David Y. Tamura",
                data: {
                    relation: "<h2>David Tamura</h2><div class='info'>Phone: (808) 935-3466 | Fax: (808) 961-3181 | <a href='mailto:landarch@gte.net'>email</a></div>"
                },
                children: []
            }, {
                id: "10",
                name: "PBR Hawaii",
                data: {
                    relation: "<h2>Stan Duncan</h2><div class='info'>Phone: (808) 521-5631 | Fax: (808) 523-1402 | <a href='mailto:sduncan@pbrhawaii.com'>email</a> | <a href='http://www.pbrhawaii.com' target='_blank'>website</a></div>"
                },
                children: []
            }, {
                id: "11",
                name: "Landscape Images",
                data: {
                    relation: "<h2>Kaz Shigezawa</h2><div class='info'>Phone: (808) 329-9295 | Fax: (808) 329-6708 | <a href='mailto:landscapeimages@verizon.net'>email</a> | <a href='http://www.hawaiianlandscapes.com' target='_blank'>website</a></div>"
                },
                children: []
            }]
        },  ],
        data: {
            relation: "<h2>Select a name to view their contact information.</h2>"
        }
    };
    //end
    
    //init RGraph
    var rgraph = new $jit.RGraph({
        //Where to append the visualization
        injectInto: 'infovis',
        //Optional: create a background canvas that plots
        //concentric circles.
        background: {
          CanvasStyles: {
            strokeStyle: '#555'
          }
        },
        //Add navigation capabilities:
        //zooming by scrolling and panning.
        Navigation: {
          enable: true,
          panning: true,
          zooming: 10
        },
        //Set Node and Edge styles.
        Node: {
            color: '#0084ff'
        },
        
        Edge: {
          color: '#ccc',
          lineWidth:1.5
        },

        onBeforeCompute: function(node){
            Log.write("centering " + node.name + "...");
            //Add the relation list in the right column.
            //This list is taken from the data property of each JSON node.
            $jit.id('inner-details').innerHTML = node.data.relation;
        },
        
        onAfterCompute: function(){
            Log.write("done");
        },
        //Add the name of the node in the correponding label
        //and a click handler to move the graph.
        //This method is called once, on label creation.
        onCreateLabel: function(domElement, node){
            domElement.innerHTML = node.name;
            domElement.onclick = function(){
                rgraph.onClick(node.id);
            };
        },
        //Change some label dom properties.
        //This method is called each time a label is plotted.
        onPlaceLabel: function(domElement, node){
            var style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';

            if (node._depth <= 1) {
                style.fontSize = "1em";
                style.color = "#000";
                style.fontFamily = "Lucida Grande, Verdana";
            
            } else if(node._depth == 2){
                style.fontSize = "0.6em";
                style.color = "#777";
                style.fontFamily = "Lucida Grande, Verdana";
            
            } else {
                style.display = 'none';
            }

            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
        }
    });
    //load JSON data
    rgraph.loadJSON(json);
    //trigger small animation
    rgraph.graph.eachNode(function(n) {
      var pos = n.getPos();
      pos.setc(-200, -200);
    });
    rgraph.compute('end');
    rgraph.fx.animate({
      modes:['polar'],
      duration: 2000
    });
    //end
    //append information about the root relations in the right column
    $jit.id('inner-details').innerHTML = rgraph.graph.getNode(rgraph.root).data.relation;
}