var Gif_Load_Control = (function (window, d) {

    "use strict";

    // Wait until load event fires then go fetch large gifs.
    // On gif load replace the static jpg and add a pause button.
  
    // v1.2  - 27/09/2016
    //    To optimise verbalisation:
    //    Replaced ARIA and SVG titles with visually hidden text. 

    var dataAttr = "data-gif";

    var btnClass = "btn-anim";
    var btnOnClass = "btn-anim-on";

    var svgPlayIcon = "icon-play";
    var svgPauseIcon = "icon-pause";
    var svgClass = "svg-pausePlay";

    var txtPlay = "Play animation";
    var txtPause = "Pause animation";


    var _getSVG = function (icon, clss) {

        var svg = d.createElementNS("http://www.w3.org/2000/svg", "svg");

        svg.setAttribute("class", clss); // IE9 and Edge supported

        // Prevent IE focusing on SVG
        svg.setAttribute("focusable", "false");

        // Prevent "Graphic" from being spoken aloud by screen-reader
        svg.setAttribute("role", "presentational");

        var use = d.createElementNS("http://www.w3.org/2000/svg", "use");
        use.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + icon);
        svg.appendChild(use);
        return svg;
    };
  
  
    var _getSpan = function (txt, clss) {
        var span = d.createElement("span");
        span.setAttribute("class", clss); // IE9 and Edge supported
        span.textContent = txt;
        return span;
    }


    var _displayImage = function (newImg, origImg) {

        // Comment out requestAnimationFrame for IE9 support
        window.requestAnimationFrame(function () {
            origImg.src = newImg.src;
        });

    };


    var _toggleAnimation = function (e) {

        var target = e.target;
        var origImg = e.target.origImg;

        // Comment out requestAnimationFrame for IE9 support
        window.requestAnimationFrame(function () {

            if (origImg.src === origImg.staticSrc) {

                origImg.src = origImg.animatedSrc;
              
                // IE9+ support
                target.setAttribute("class", target.className + " " + btnOnClass);
                target.textContent = "";
                target.appendChild(_getSVG(svgPauseIcon, svgClass));
                target.appendChild(_getSpan(txtPause, "visually-hidden"));

            } else {

                origImg.src = origImg.staticSrc;

                // IE9+ support
                target.setAttribute("class", target.className.replace(" " + btnOnClass, ""));

                target.textContent = "";
                target.appendChild(_getSVG(svgPlayIcon, svgClass));
                target.appendChild(_getSpan(txtPlay, "visually-hidden"));
            }
        });
    };


    var _addPauseBtn = function (origImg) {

        var parentObj = origImg.parentElement;
        var btn = d.createElement("button");

        btn.origImg = origImg;
      
        // IE9+ support
        btn.setAttribute("class", btnClass + " " + btnOnClass);
      
        // Some screen-readers have issue reading the SVG title - don't use.
        btn.appendChild(_getSVG(svgPauseIcon, svgClass));

        // An aria-title doesn't work in all scenarios - don't use.
        // Instead use a visually-hidden span to contain play/pause text
        btn.appendChild(_getSpan(txtPause, "visually-hidden"));

        btn.addEventListener("click", _toggleAnimation, false);

        parentObj.appendChild(btn);
    };


    var _requestImage = function (src, origImg) {

        var newImg = new Image();

        origImg.staticSrc = origImg.src;
        origImg.animatedSrc = src;

        newImg.addEventListener("load", function () {

            _displayImage(newImg, origImg);
            _addPauseBtn(origImg);

        }, false);

        newImg.src = src;
    };


    var initialise = function () {

        var imgs = d.querySelectorAll("[" + dataAttr + "]");
        var i = imgs.length;
        while (i--) {
            _requestImage(imgs[i].getAttribute(dataAttr), imgs[i]);
        }
    };

    // Just run initialise() if this script is post-loaded.
    window.addEventListener("load", initialise, false);

}(window, document));