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": [
       {
         "children": [
           {
             "children": [], 
             "data": {
               "description": "The client describes the website which is requested to be developed. Potential technologies and requirements are gathered by our research and development department. After the concept is established web developers create the website and provide feedback.",
               "$angularWidth": 4000, 
               "days": 1, 
               "$color": "#F1F1F1", 
               "size": "Analysis & Concepts"
             }, 
             "id": "step1", 
             "name": "STEP 1"
           }
         ], 
         "data": {
           "description": "The client describes the website which is requested to be developed. Potential technologies and requirements are gathered by our research and development department.", 
           "$color": "#F1F1F1", 
           "days": 1, 
           "$angularWidth": 4000, 
           "size": "Analysis"
         }, 
         "id": "analysis", 
         "name": "ANALYSIS"
       }, 
	   {
         "children": [], 
         "data": {
           "description": "After the concept is established web developers create the website and provide feedback.", 
           "$color": "#F1F1F1", 
           "days": 1, 
           "$angularWidth": 4000, 
           "size": "Concepts"
         }, 
         "id": "concepts", 
         "name": "CONCEPTS"
       }, 
       {
         "children": [
           {
             "children": [], 
             "data": {
               "description": "The website is developed and completed, then presented to the client for approval.",
               "$angularWidth": 3000, 
               "days": 2, 
               "$color": "#F1F1F1", 
               "size": "Development"
             }, 
             "id": "step2", 
             "name": "STEP 2"
           }
         ], 
         "data": {
           "description": "The website is developed and completed, then presented to the client for approval.", 
           "$color": "#F1F1F1", 
           "days": 2, 
           "$angularWidth": 3000, 
           "size": "Development"
         }, 
         "id": "develop", 
         "name": "DEVELOP"
       }, 
       {
         "children": [
           {
             "children": [], 
             "data": {
               "description": "If requested, the client may change aspects of the website before the final product is delivered; afterwhich, the final website is presented after the client approves it.",
               "$angularWidth": 2000, 
               "days": 3, 
               "$color": "#F1F1F1", 
               "size": "Revisions & Approval"
             }, 
             "id": "step3", 
             "name": "STEP 3"
           }
         ], 
         "data": {
           "description": "If requested, the client may change aspects of the website before the final product is delivered", 
           "$color": "#F1F1F1", 
           "days": 3, 
           "$angularWidth": 2000, 
           "size": "Revisions"
         }, 
         "id": "revisions", 
         "name": "REVISIONS"
       }, 
       {
         "children": [
           {
             "children": [], 
             "data": {
               "description": "The final website is presented after the client approves it.",
               "$angularWidth": 2000, 
               "days": 3, 
               "$color": "#F1F1F1", 
               "size": "Approval"
             }, 
             "id": "step3", 
             "name": "STEP 3"
           }
         ], 
         "data": {
           "description": "The final website is presented after the client approves it.", 
           "$color": "#F1F1F1", 
           "days": 3, 
           "$angularWidth": 2000, 
           "size": "Approval"
         }, 
         "id": "approval", 
         "name": "APPROVAL"
       }, 
       {
         "children": [
           {
             "children": [], 
             "data": {
               "description": "The final website is presented after the client approves it.",
               "$angularWidth": 2000, 
               "days": 4, 
               "$color": "#F1F1F1", 
               "size": "Delivery"
             }, 
             "id": "step4", 
             "name": "STEP 4"
           }
         ], 
         "data": {
           "description": "The final website is presented after the client approves it.", 
           "$color": "#F1F1F1", 
           "days": 4, 
           "$angularWidth": 2000, 
           "size": "Delivery"
         }, 
         "id": "delivery", 
         "name": "DELIVERY"
       }, 
     ], 
     "data": {
       "$type": "none"
     }, 
     "id": "IWD", 
     "name": ""
   };
    //end
    //init Sunburst
    var sb = new $jit.Sunburst({
        //id container for the visualization
        injectInto: 'infovis',
        //Distance between levels
        levelDistance: 90,
        //Change node and edge styles such as
        //color, width and dimensions.
        Node: {
          overridable: true,
          type: useGradients? 'gradient-multipie' : 'multipie'
        },
        //Select canvas labels
        //'HTML', 'SVG' and 'Native' are possible options
        Label: {
          type: labelType
        },
        //Change styles when hovering and clicking nodes
        NodeStyles: {
          enable: true,
          type: 'Native',
          stylesClick: {
            'color': '#F90'
          },
          stylesHover: {
            'color': '#F90'
          }
        },
        //Add tooltips
        Tips: {
          enable: true,
          onShow: function(tip, node) {
            var html = ""; 
            var data = node.data;
            if("days" in data) {
              html += "<div class=\"tip-title\"><b>Step " + data.days + "</b> - " + data.size + "</div>";
            }
            if("description" in data) {
              html += "<b>Description:<br/></b> " +  data.description;
            }
            tip.innerHTML = html;
          }
        },
        //implement event handlers
        Events: {
          enable: true,
          onClick: function(node) {
            if(!node) return;
            //Build detailed information about the file/folder
            //and place it in the right column.
            var html = "", data = node.data;
			if("days" in data) {
              html += "<h3 class=\"wdp-title\">Step " + data.days + "</h3> <p class=\"wdp-sub\">" + data.size + "</p>";
            }
            if("description" in data) {
              html += "<h3 class=\"wdp-title2\">Description:</h3><br/> " +  data.description;
            }
            $jit.id('inner-details').innerHTML = html;
            //hide tip
            sb.tips.hide();
            //rotate
            sb.rotate(node, animate? 'animate' : 'replot', {
              duration: 1000,
              transition: $jit.Trans.Quart.easeInOut
            });
          }
        },
        // Only used when Label type is 'HTML' or 'SVG'
        // Add text to the labels. 
        // This method is only triggered on label creation
        onCreateLabel: function(domElement, node){
          var labels = sb.config.Label.type,
              aw = node.getData('angularWidth');
          if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {
            domElement.innerHTML = node.name;
          } else if (labels === 'SVG' && (node._depth < 2 || aw > 2000)) {
            domElement.firstChild.appendChild(document.createTextNode(node.name));
          }
        },
        // Only used when Label type is 'HTML' or 'SVG'
        // Change node styles when labels are placed
        // or moved.
        onPlaceLabel: function(domElement, node){
          var labels = sb.config.Label.type;
          if (labels === 'SVG') {
            var fch = domElement.firstChild;
            var style = fch.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontSize = "0.8em";
			style.fontColor = "#000";
			style.color = "#000";
            fch.setAttribute('fill', "#fff");
          } else if (labels === 'HTML') {
            var style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontSize = "0.8em";
            style.color = "#000";
			style.fontColor = "#000";
            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
          }
        }
   });
    //load JSON data.
    sb.loadJSON(json);
    //compute positions and plot.
    sb.refresh();
    //end
}