"use strict";
/**
 * Created by andey on 29-07-2016.
 * @ngdoc directive
 * @name imageToggle
 *
 * @description
 * imageToggle is a common UI Component that can be used to add show/hide link to any image.
 *
 * Example:
 * <img src="/imagePath/abc.jpg" image-toggle></img>
 *
 */
(function () {
    'use strict';
    angular.module('myitsmApp')
        .directive('imageToggle', ['$compile', '$filter', function ($compile, $filter) {
            return {
                restrict: 'A',
                scope: {},
                link: function (scope, element) {
                    var toggleImage = function (event) {
                        event.preventDefault();
                        var anchorTag = event.target;
                        if (anchorTag.nextSibling.style.display !== 'none') {
                            anchorTag.nextSibling.style.display = 'none';
                            anchorTag.innerText = $filter('i18n')('knowledge.decisionTree.showImage.label');
                        }
                        else {
                            anchorTag.nextSibling.style.display = '';
                            anchorTag.innerText = $filter('i18n')('knowledge.decisionTree.hideImage.label');
                        }
                    };
                    var src = element.attr('src');
                    var msg = $filter('i18n')('knowledge.decisionTree.hideImage.label');
                    var newHtml = "<div><a href='#'>" + msg + "</a><img src='" + src + "' class='rx-image-toggle__image'/></div>";
                    newHtml = angular.element(newHtml);
                    element = element.replaceWith(newHtml);
                    var imageSpan = newHtml.find('a');
                    imageSpan.bind('click', toggleImage);
                    imageSpan = $compile(imageSpan)(scope);
                    scope.$on('$destroy', function () {
                        imageSpan.off('click', toggleImage);
                        newHtml = null;
                        imageSpan = null;
                    });
                }
            };
        }]);
})();