/*!
 * TouchPoint.js 1.0.0 Beta
 * A JavaScript library that visually shows taps/cicks on HTML prototypes.
 * http://jonahvsweb.com
 *
 * Copyright (c) 2015 Jonah Bitautas <jonahvsweb@gmail.com>
 *
 * Released under the MIT license
 * LICENSE.txt
 */
var TouchPoint;

(function () {

  'use strict';

  TouchPoint = {

    el: 'div', 
    styleEl: '',
    color: '#FFF', 
    opacity: 0.8, 
    size: 20, 
    scale: 8,
    tp: '', 
    z: 9999,

    init: function() {
      TouchPoint
        .createCss('.tp-init', 
          'position: absolute; width: ' + TouchPoint.size + 'px; height: ' + TouchPoint.size + 'px; background-color: ' + TouchPoint.color + '; opacity: ' + TouchPoint.opacity + '; border-radius: 20px; -ms-transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -ms-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; z-index: ' + TouchPoint.z + ';')
        .createCss('.tp-anim', 
          '-ms-transform: scale(' + TouchPoint.scale + '); -webkit-transform: scale(' + TouchPoint.scale + '); -moz-transform: scale(' + TouchPoint.scale + '); -o-transform: scale(' + TouchPoint.scale + '); transform: scale(' + TouchPoint.scale + '); opacity: 0;'
        );
    },

    create: function(e) {
      TouchPoint.tp = document.createElement(TouchPoint.el);
      TouchPoint.tp.style.left = (e.clientX - (TouchPoint.size * 0.5)) + 'px';
      TouchPoint.tp.style.top = (e.clientY - (TouchPoint.size * 0.5)) + 'px';
      TouchPoint.tp.className = 'tp-init';

      document.body.appendChild(TouchPoint.tp);

      requestNextAnimationFrame(function () {
        TouchPoint.tp.className += ' tp-anim';
      });
      TouchPoint.tp.addEventListener('transitionend', TouchPoint.gc, false);

      return TouchPoint;
    },

    gc: function(e) {
      e.target.removeEventListener('transitionend', TouchPoint.gc);
      document.body.removeChild(e.target);
      TouchPoint.tp = '';
    },

    createCss: function(name, rules) {
      var head = document.getElementsByTagName('head')[0];

      for(var i = 0; i < head.childNodes.length; i = i + 1) {
        if(head.getElementsByTagName('style')[i].tagName.toLowerCase() === 'style') {
          head.getElementsByTagName('style')[i].innerHTML += name + ' { ' + rules + ' }';
          TouchPoint.styleEl = head.getElementsByTagName('style')[i];
          break;
        } else {
          TouchPoint.styleEl = document.createElement('style');
          TouchPoint.styleEl.type = 'text/css';
          TouchPoint.styleEl.innerHTML = name + ' { ' + rules + ' }';
          head.appendChild(TouchPoint.styleEl);
          break;
        }
      }
      return TouchPoint;
    }
  };
  // requestNextAnimationFrame shim from: https://gist.github.com/getify/3004342
  var ids = {};

  function requestId() {
      var id;
      do {
          id = Math.floor(Math.random() * 1E9);
      } while (id in ids);
      return id;
  }

  if (!window.requestNextAnimationFrame) {
      window.requestNextAnimationFrame = function (callback, element) {
          var id = requestId();

          ids[id] = requestAnimationFrame(function () {
              ids[id] = requestAnimationFrame(function (ts) {
                  delete ids[id];
                  callback(ts);
              }, element);
          }, element);

          return id;
      };
  }

  if (!window.cancelNextAnimationFrame) {
      window.cancelNextAnimationFrame = function (id) {
          if (ids[id]) {
              cancelAnimationFrame(ids[id]);
              delete ids[id];
          }
      };
  }
})();
@@ -324,24 +324,38 @@
 el: 'div', %0A
+    dom: '', %0A
     styleEl:
@@ -473,20 +473,50 @@
 unction(
+el
 ) %7B%0A
+      TouchPoint.dom = el;%0A%0A
       To
@@ -1416,37 +1416,188 @@
     
-%7D,%0A%0A    create: function(e) %7B
+  TouchPoint.dom.addEventListener(%22click%22, TouchPoint.create, false);%0A    %7D,%0A%0A    create: function(e) %7B%0A      TouchPoint.dom.removeEventListener(%22click%22, TouchPoint.create, false);
 %0A   
@@ -1650,24 +1650,78 @@
 hPoint.el);%0A
+      TouchPoint.tp.setAttribute('id', 'touchpoint');%0A
       TouchP
@@ -2190,24 +2190,109 @@
 nction(e) %7B%0A
+      var currTP = document.body.querySelector('#touchpoint');%0A%0A      if(currTP) %7B%0A  
       e.targ
@@ -2344,19 +2344,28 @@
 Point.gc
+, false
 );%0A
+  
       do
@@ -2392,43 +2392,159 @@
 ild(
-e.target);%0A      TouchPoint.tp = ''
+currTP);%0A        TouchPoint.reInit();%0A      %7D%0A    %7D,%0A%0A    reInit: function() %7B%0A      TouchPoint.dom.addEventListener(%22click%22, TouchPoint.create, false)
 ;%0A  

Add main DOM access. Improve init() implementation. Fix bug, TouchPoint not always getting removed–improve creation/removal and garbage collection