//=====================================   MINI DEBUGGER - v2  ================================

/*
 * Author: Domenico Strazzullo - nst@dotuscomus.com
*/



/*
 * Uses the DOM helper at: 
 * http://www.dotuscomus.com/svg/lib/tinytools/DOM_Helper.html
 * which has to be loaded first. 
 * See also article at: http://svgmagazine.com/jul2011/dom-helper.html
*/



var $D,
    miniD,
    container,
    activateDebug,
    $C = pergola.createSVGElement;



// CONFIG
activateDebug = true;                     // values: true, false, or the number of lines. Default is 20.
container = document.documentElement;     // Any valid, existing container.



/* USE

$D({
  'myVar': myVar, 
  'this': this, 
  'evt.target': evt.target,
  ...
});

*/




miniD = function() {

  var lines,
      thumb,
      box,
      g;

  if (!activateDebug) return;
  else lines = (typeof activateDebug == "boolean") * 20 || activateDebug;


  miniD.toggleOn = function(evt) {
    thumb.setAttributeNS(null, "display", "none");
    box.setAttributeNS(null, "display", "block");
  }

  miniD.toggleOff = function(evt) {
    box.setAttributeNS(null, "display", "none");
    thumb.setAttributeNS(null, "display", "block");
  }

  miniD.vars = function(input) {
    var p = [],
        i = 0,
				output;

    for (var prop in input) p.push(prop);
    if (p.length > lines) {
      alert("The number of lines exceeds\n the max number of lines.")
      return;
    }
    for (var a in input) {
      output = (input[a] == undefined)? a + " is undefined" : a + " = " + input[a];
      miniD["var" + i++].firstChild.data = output;
    }
  }



// Visual
  g = $C({element: "g", id: "debugger", transform: "translate(0 54)", appendTo: container});

  thumb = $C({element: "g", appendTo: g});
  thumb.addEventListener("click", miniD.toggleOn, false);

  $C({
    element: "circle",
    cx: 4,
    cy: -6,
    r: 12,
    fill: "#FFFFFF",
    stroke: "#505090",
    'stroke-width': 4,
    appendTo: thumb
  });

  $C({
    element: "text",
    'font-size': 16,
    'font-weight': "bold",
    fill: "firebrick",
    'pointer-events': "none",
    textNode: "D",
    appendTo: thumb
  });

  box = $C({element: "g", fill: "firebrick", display: "none", appendTo: g});
  box.addEventListener("click", miniD.toggleOff, false);

  $C({
    element: "rect",
    x: 2,
    y: -20,
    rx: 4,
    width: 360,
    height: lines * 20 + 40,
    fill: "#F3F3F0",
    stroke: "gray",
    'stroke-width': 4,
    opacity: .4,
    'pointer-events': "none",
    appendTo: box
  });

  $C({
    element: "circle",
    cx: 16,
    cy: -6.5,
    r: 7,
    fill: "#505090",
    appendTo: box
  });

  $C({
    element: "path",
    d: "M11.5 -6.5h9",
    stroke: "#FFFFFF",
    'pointer-events': "none",
    appendTo: box
  });

  $C({
    element: "text",
    x: 180,
    'font-family': "Arial",
    'font-size': 14,
    'text-anchor': "middle",
    'pointer-events': "none",
    textNode: "MINI DEBUGGER",
    appendTo: box
  });

  g = $C({
    element: "g",
    transform: "translate(10 20)",
    'font-family': "'Courier New'",
    'font-size': "10pt",
    'font-weight': "bold",
    'pointer-events': "none",
    appendTo: box
  });

  for (var i = 0; i < lines; i ++) miniD["var" + i] = $C({element: "text", y: (i * 20), textNode: "\u00A0", appendTo: g});

  $D = miniD.vars;

}

miniD();