text: (function() {
    'use strict';
  
    angular.module('foundation.popup', ['foundation.core'])
      .directive('zfPopup', zfPopup)
      .directive('zfPopupToggle', zfPopupToggle)
      .service('FoundationPopup', FoundationPopup)
    ;
  
    FoundationPopup.$inject = ['FoundationApi'];
  
    function FoundationPopup(foundationApi) {
      var service    = {};
  
      service.activate = activate;
      service.deactivate = deactivate;
  
      return service;
  
      //target should be element ID
      function activate(target) {
        foundationApi.publish(target, 'show');
      }
  
      //target should be element ID
      function deactivate(target) {
        foundationApi.publish(target, 'hide');
      }
  
      function toggle(target, popupTarget) {
        foundationApi.publish(target, ['toggle', popupTarget]);
      }
    }
  
    zfPopup.$inject = ['FoundationApi'];
  
    function zfPopup(foundationApi) {
      var directive = {
        restrict: 'EA',
        transclude: true,
        replace: true,
        templateUrl: 'components/popup/popup.html',
        scope: {
          pinTo: '@?',
          pinAt: '@?',
          target: '@?'
        },
        compile: compile
      };
  
      return directive;
  
      function compile() {
        return {
          pre: preLink,
          post: postLink
        };
  
        function preLink(scope, iElement, iAttrs) {
          iAttrs.$set('zf-closable', 'popup');
        }
  
        function postLink(scope, element, attrs) {
          scope.active = false;
          scope.target = scope.target || false;
  
          var attachment = scope.pinTo || 'top center';
          var targetAttachment = scope.pinAt || 'bottom center';
          var tetherInit = false;
          var tether     = {};
  
          //setup
          foundationApi.subscribe(attrs.id, function(msg) {
            if(msg[0] === 'show' || msg[0] === 'open') {
              scope.show(msg[1]);
            } else if (msg[0] === 'close' || msg[0] === 'hide') {
              scope.hide();
            } else if (msg[0] === 'toggle') {
              scope.toggle(msg[1]);
            }
  
            scope.$apply();
  
            return;
          });
  
  
          scope.hide = function() {
            scope.active = false;
            tetherElement();
            tether.disable();
            return;
          };
  
          scope.show = function(newTarget) {
            scope.active = true;
            tetherElement(newTarget);
            tether.enable();
  
            return;
          };
  
          scope.toggle = function(newTarget) {
            scope.active = !scope.active;
            tetherElement(newTarget);
  
            if(scope.active) {
              tether.enable();
            } else  {
              tether.disable();
            }
  
            return;
          };
  
          function tetherElement(target) {
            if(tetherInit) {
              return;
            }
  
            scope.target = scope.target ? document.getElementById(scope.target) : document.getElementById(target);
  
            tether = new Tether({
              element: element[0],
              target: scope.target,
              attachment: attachment,
              targetAttachment: targetAttachment,
              enable: false
            });
  
            tetherInit = true;
          }
  
        }
      }
    }
  
    zfPopupToggle.$inject = ['FoundationApi'];
  
    function zfPopupToggle(foundationApi) {
      var directive = {
        restrict: 'A',
        link: link
      };
  
      return directive;
  
      function link(scope, element, attrs) {
        var target = attrs.zfPopupToggle;
        var id = attrs.id || foundationApi.generateUuid();
        attrs.$set('id', id);
  
        element.on('click', function(e) {
          foundationApi.publish(target, ['toggle', id]);
          e.preventDefault();
        });
      }
    }
  
  })();
  