define(
    [
      'de_epages/guidedtour/js/hopscotch',
    ],
    function(hopscotch){

        /**
         * More convenient form for the help center link in the last step of the guided tour.
         *
         * @param { string } [link] the url the user jumps to, when clicking the CTA button
         *
         * @example
         * ["goToHelpCenter","{ GuidedTourHelpLink }"]
         *
         * {
         *     title          : "{ Congratulations }",
         *     content        : "{ CongratulationsContent }",
         *     target         : ".ContentList",
         *     showCTAButton  : true,
         *     ctaLabel       : "{ openHelpCenterBtn }",
         *     onCTA          : ["goToHelpCenter","{ GuidedTourHelpLink }"]
         *  }
         */
        hopscotch.registerHelper('goToHelpCenter',function(link){
            window.open(link);
            hopscotch.endTour();
         });

        /**
         * Lets you target multiple elements, which are then highlighted together.
         *
         * This is achieved by creating a new element as bounding rectangle of all the given elements.
         * This means, that the elements need to be "connected" or you will have a lot of space,
         * which will be highlighted for no reason!
         *
         * @param { string } [selector] css selector for the DOM elements to be selected
         *
         * @returns { Element } A new DOM element, which represents the bounding rectangle of the the input elements
         *
         * @example
         * The helper is already required in the MBOGuidedTours/Tempaltes/MBO/GuidedTours.html as "h".
         * So you have to return the target from an anonymous function like following:
         *
         * function(){ return h.multiSelect( <css-selector> ) }
         * or
         * ()=>h.multiSelect(<css-selector>) // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
         *
         * {
         *     title       : "{ Settings }",
         *     content     : "{ SettingsContent }",
         *     target      : function(){ return h.multiSelect( <css-selector> ) },
         *     placement   : "right",
         *  }
         */
        function multiSelect(selector){

            var MULTIELEMENTCLASS = "multiElement";
            var DATASET = "guidedtourelements";

            // check, if the element container has already been created and attached to the DOM
            // if yes, return it instead of recalculating everything
            var el = document.querySelector("."+MULTIELEMENTCLASS+"[data-"+DATASET+"='"+selector+"']");
            if (el){ return el; }

            // the list of the "real" elements
            var sourceElements = document.querySelectorAll(selector);
            if (!sourceElements.length){ return null; }

            el = createMultiboundingRect(sourceElements);
            window.addEventListener("resize",updateMultiBoundingRect);
            return el;

            function updateMultiBoundingRect(){
                var dim = findMultiBoundingRectDimensions(sourceElements);
                setMultiBoundingRectDimensions(el,dim);
            }

            function createMultiboundingRect(els){
                var newEl = document.createElement("div");
                //newEl.classList.add("rect");
                var dim = findMultiBoundingRectDimensions(els);
                setMultiBoundingRectDimensions(newEl,dim);
                newEl.style.position = "absolute";
                // setting attributes
                // (relies on having access to the scoped variables, so do not move this function!)
                newEl.classList.add(MULTIELEMENTCLASS);
                newEl.dataset[DATASET] = selector;
                document.body.appendChild(newEl);
                return newEl;
            }

            function setMultiBoundingRectDimensions(el,dim){
                el.style.top = dim.top +"px";
                el.style.left = dim.left +"px";
                el.style.width = dim.width +"px";
                el.style.height = dim.height +"px";
            }

            function findMultiBoundingRectDimensions(els){
                var dim = {top:null,left:null,right:null,bottom:null}
                for (var i = 0; i < els.length;i++){
                    var bound = els[i].getBoundingClientRect();
                    dim.top = (!dim.top || bound.top < dim.top)?bound.top:dim.top;
                    dim.left = (!dim.left || bound.left < dim.left)?bound.left:dim.left;
                    dim.right = (!dim.right || bound.right > dim.right)?bound.right:dim.right;
                    dim.bottom = (!dim.bottom || bound.bottom > dim.bottom)?bound.bottom:dim.bottom;
                    dim.width = dim.right - dim.left;
                    dim.height = dim.bottom - dim.top;
                }
                return dim;
            }
        };

        return {
            multiSelect : multiSelect
        }

    }
);