var labelType, useGradients, nativeTextSupport, animate;
var soundOff = false;

(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');
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();


var ht;

function init(){
	
	/*
	document.getElementById("player").innerHTML = "<object type='application/x-shockwave-flash' data='player_mp3_multi.swf' width='400' height='300'>" +
		"<param name='movie' value='player_mp3_mini.swf' />" + 
		"<param name='FlashVars' value='mp3=hd.mp3&loop=1&title=no&autoplay=1&width=1&height=1'/>" +
	"</object>";		
	*/
	
	
	
	var container = document.getElementById('container');
	
    var infoGraph = document.getElementById('infoGraph');
	infoGraph.style.height = "70%";
	infoGraph.style.width = "70%";
	var json = textToTree();
    
    var w = infoGraph.offsetWidth, 
	h = infoGraph.offsetHeight;
    
    //init Hypertree
	
	ht = new $jit.Hypertree({
    
      //id of the visualization container
      injectInto: 'infoGraph',
	  
	  Navigation: {
      enable: true,
      //Enable panning events only if we're dragging the empty
      //canvas (and not a node).
      panning: true,
      zooming: 35 //zoom speed. higher is more sensible
    }, 
      //canvas width and height
      width: w,
      height: h,
      //Change node and edge styles such as
      //color, width and dimensions.
      Node: {
          dim: 4,
		  color: "white"
      },
      Edge: {
          lineWidth: 2,
          color: "gray"
      },
	  
	//Add Tips
    Tips: {
      enable: true,
      onShow: function(tip, node) {
        //count connections
        var count = 0;
        node.eachAdjacency(function() { count++; });
        //display node info in tooltip

        tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>"
          + "<div class=\"tip-text\">" + node.data.htmlText + "</div>";

	
      }
    }, 
	   //Update node positions when dragged
      onDragMove: function(node, eventInfo, e) {
        var pos = eventInfo.getPos();
        node.pos.setc(pos.x, pos.y);
        ht.plot();
      },
      onBeforeCompute: function(node){
          // Log.write("centering");
      },
      //Attach event handlers and add text to the
      //labels. This method is only triggered on label
      //creation
      onCreateLabel: function(domElement, node){
          domElement.innerHTML = node.name;
          $jit.util.addEvent(domElement, 'click', function () {
              ht.onClick(node.id);
          });
      },
      //Change node styles when labels are placed
      //or moved.
      onPlaceLabel: function(domElement, node){
          var style = domElement.style;
          style.display = '';
          style.cursor = 'pointer';
          if (node._depth <= 1) {
              style.fontSize = "0.8em";
              // style.color = "#ddd";
			  // style.color = "#555";

          } else if(node._depth == 2){
              style.fontSize = "0.7em";
              // style.color = "#555";

          } else {
              style.display = 'none';
          }

          var left = parseInt(style.left);
          var w = domElement.offsetWidth;
          style.left = (left - w / 2) + 'px';
      },
      
      onAfterCompute: function(){
          }
    });
    
    ht.loadJSON(json);
    //compute positions and plot.
    ht.refresh();
    //end
    ht.controller.onAfterCompute();
}


 function dataObj() {
	this.htmlText = "";
	this.htmlRef = "";
 }

 function textNode() {
	 this.id = "-1";
     this.name = "textNode";
	 this.data = new dataObj();
     this.children = new Array();
	 
   }


function zoomin() {
	ht.canvas.scale(2, 2, true);
	ht.plot();
}

function objectToJson() {
	textToTree();
	}
	
	
	
var idCtr = 0;	
	
function divToTree(objParent, topicText) {
	idCtr++;
	var topic = new textNode();
	objParent.children.push(topic);
	topic.id = idCtr;
	
	var children = topicText.childNodes;
	if (children) {
	for (var i = 0; i < children.length; i++) {
		var className = children[i].className;
		if (className) {
			if  (className.toLowerCase() == "topicname") {
				topic.name = children[i].innerHTML;
			//	alert("topicName: " + topic.name);
			}
			else if  (className.toLowerCase() == "topicdescription") {
				topic.data.htmlText = children[i].innerHTML;
			//	alert("topicDesc: " + topic.description);
			}
			else if (className.toLowerCase() == "topic") {
				divToTree(topic, children[i]);
		}
		}
	}
	}
} 
	
function textToTree() {
	var rootDiv = document.getElementById("root");
	var children = rootDiv.childNodes;
	var rootObj = new textNode();
	idCtr++;
	rootObj.id = idCtr;
	rootObj.name= "My Professional Coordinates";


	if (children) {
	for (var i = 0; i < children.length; i++) {
		var className = children[i].className;
		if (className) {
		
		if (className.toLowerCase() == "topic") {
			divToTree(rootObj, children[i]);
		}
		
		}
	
	}
	}
	rootDiv.style.visibility = 'hidden';
	return rootObj;
}	


function contactsContrast(on) {
	var contacts = document.getElementById("contact");
	if (on) {
		contacts.style.backgroundColor = "black";
	}
	else
	{	contacts.style.backgroundColor = "";
	}
	
			
}