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 = {
	"children": [
	 
	 {
	   "data":{"cap":"$15,566,000","sec": "No","$area": 12298652,"$color":"#182951"}, 
	   "id": "Espanola Del Zinc Sa", 
	   "name": "Espanola Del Zinc Sa"
	 },	 
	 {
	   "data":{"cap":"$319,791,000","sec": "No","$area": 252659680,"$color":"#182D49"}, 
	   "id": "Tubacex Sa", 
	   "name": "Tubacex Sa"
	 },	 
	 {
	   "data":{"cap":"$3,325,842,000","sec": "No","$area": 2627670016,"$color":"#142C63"}, 
	   "id": "Acerinox Sa", 
	   "name": "Acerinox Sa"
	 },	 
	 {
	   "data":{"cap":"$128,930,910,000","sec": "Yes","$area": 101865299968,"$color":"#009900"}, 
	   "id": "Vale Sa-Pref A <sup>*</sup>", 
	   "name": "Vale Sa-Pref A <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"}, 
	   "id": "Vale Sa <sup>*</sup>", 
	   "name": "Vale Sa <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$7,964,213,000","sec": "No","$area": 6292338688,"$color":"#1A3258"}, 
	   "id": "Usinas Sider Minas Ger-pf A", 
	   "name": "Usinas Sider Minas Ger-pf A"
	 },	 
	 {
	   "data":{"cap":"$7,936,187,000","sec": "No","$area": 6270196224,"$color":"#1C2C44"}, 
	   "id": "Usinas Siderurgicas De Minas <sup>*</sup>", 
	   "name": "Usinas Siderurgicas De Minas <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$182,287,147,000","sec": "Yes","$area": 144020815872,"$color":"#009900"}, 
	   "id": "Petrobras - Petroleo Bras-Pr <sup>*</sup>", 
	   "name": "Petrobras - Petroleo Bras-Pr <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$4,274,685,000","sec": "No","$area": 3377328896,"$color":"#163147"}, 
	   "id": "Volcan Cia Minera Saa-cmn B", 
	   "name": "Volcan Cia Minera Saa-cmn B"
	 },	 
	 {
	   "data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"}, 
	   "id": "Petrobras - Petroleo Bras <sup>*</sup>", 
	   "name": "Petrobras - Petroleo Bras <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$1,194,341,000","sec": "No","$area": 943621248,"$color":"#162853"}, 
	   "id": "Aperam <sup>*</sup>", 
	   "name": "Aperam <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$15,226,875,000","sec": "Yes","$area": 12030398464,"$color":"#009900"}, 
	   "id": "Gerdau Sa-pref", 
	   "name": "Gerdau Sa-pref"
	 },	 
	 {
	   "data":{"cap":"$31,017,700,000","sec": "Yes","$area": 24506359808,"$color":"#009900"}, 
	   "id": "Arcelormittal <sup>*</sup>", 
	   "name": "Arcelormittal <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$336,062,000","sec": "No","$area": 265514960,"$color":"#192C5A"}, 
	   "id": "Tubos Reunidos Sa", 
	   "name": "Tubos Reunidos Sa"
	 },	 
	 {
	   "data":{"cap":"$34,505,362,000","sec": "No","$area": 27261880320,"$color":"#182D40"}, 
	   "id": "Repsol Ypf Sa", 
	   "name": "Repsol Ypf Sa"
	 },	 
	 {
	   "data":{"cap":"","sec": "No","$area": 1,"$color":"#162849"}, 
	   "id": "Minerales Productos Derivado <sup>*</sup>", 
	   "name": "Minerales Productos Derivado <sup>*</sup>"
	 },	 
	 {
	   "data":{"cap":"$35,784,000","sec": "No","$area": 28272000,"$color":"#1B2A42"}, 
	   "id": "Lingotes Especiales S.A.", 
	   "name": "Lingotes Especiales S.A."
	 },	 
	 {
	   "data":{"cap":"","sec": "No","$area": 1,"$color":"#153132"}, 
	   "id": "Hullera Vasco Leonesa Sa <sup>*</sup>", 
	   "name": "Hullera Vasco Leonesa Sa <sup>*</sup>"
	 }
   ] 
   };
  //end
  //init TreeMap
  var tm = new $jit.TM.Squarified({
	//where to inject the visualization
	injectInto: 'infovis',

	//parent box title heights
	titleHeight: 0,
	//enable animations
	animate: false,
	//box offsets
	offset: 1,
	//Attach left and right click events
	Events: { enable: false },
	duration: 1000,
	//Enable tips
	Tips: {
	  enable: true,
	  //add positioning offsets
	  offsetX: 20,
	  offsetY: 20,
	  //implement the onShow method to
	  //add content to the tooltip when a node
	  //is hovered
	  onShow: function(tip, node, isLeaf, domElement) {
		var html = "<div class=\"tip-title\">" + node.name 
		  + "</div><div class=\"tip-text\">";
		var data = node.data;
		if(data.cap) {
		  html += "Market Cap: " + data.cap;
		}
		if(data.sec) {
		  html += "<br />SEC Coverage: " + data.sec;
		}
		tip.innerHTML =  html; 
	  }  
	},
	//Add the name of the node in the correponding label
	//This method is called once, on label creation.
	onCreateLabel: function(domElement, node){
//		if (node.data.$width > 10) {
			domElement.innerHTML = node.name;
//		}
		var style = domElement.style;
		style.display = '';
		style.border = '1px solid transparent';
		domElement.onmouseover = function() {
		  style.border = '1px solid #9FD4FF';
		};
		domElement.onmouseout = function() {
		  style.border = '1px solid transparent';
		};
	}
  });
  tm.loadJSON(json);
  tm.refresh();
  //end
  //add events to radio buttons
  var sq = $jit.id('r-sq'),
	  st = $jit.id('r-st'),
	  sd = $jit.id('r-sd');
  var util = $jit.util;
  util.addEvent(sq, 'change', function() {
	if(!sq.checked) return;
	util.extend(tm, new $jit.Layouts.TM.Squarified);
	tm.refresh();
  });
  util.addEvent(st, 'change', function() {
	if(!st.checked) return;
	util.extend(tm, new $jit.Layouts.TM.Strip);
	tm.layout.orientation = "v";
	tm.refresh();
  });
  util.addEvent(sd, 'change', function() {
	if(!sd.checked) return;
	util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
	tm.layout.orientation = "v";
	tm.refresh();
  });
  //add event to the back button
  var back = $jit.id('back');
  $jit.util.addEvent(back, 'click', function() {
	tm.out();
  });
}