Fix broken CSS/JS in documentation + misc. fixes and cleanup

1 files changed, 760 insertions, 0 deletions

diff --git a/docs/juxtapose.js b/docs/juxtapose.js
new file mode 100644
index 00000000..240e8b26
--- /dev/null
+++ b/docs/juxtapose.js
@@ -0,0 +1,760 @@
+/* juxtapose - v1.2.2 - 2020-09-03
+ * Copyright (c) 2020 Alex Duner and Northwestern University Knight Lab
+ */
+/* juxtapose - v1.1.2 - 2015-07-16
+ * Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab
+ */
+
+(function(document, window) {
+
+    var juxtapose = {
+        sliders: [],
+        OPTIMIZATION_ACCEPTED: 1,
+        OPTIMIZATION_WAS_CONSTRAINED: 2
+    };
+
+    var flickr_key = "d90fc2d1f4acc584e08b8eaea5bf4d6c";
+    var FLICKR_SIZE_PREFERENCES = ['Large', 'Medium'];
+
+    function Graphic(properties, slider) {
+        var self = this;
+        this.image = new Image();
+
+        this.loaded = false;
+        this.image.onload = function() {
+            self.loaded = true;
+            slider._onLoaded();
+        };
+
+        this.image.src = properties.src;
+        this.image.alt = properties.alt || '';
+        this.label = properties.label || false;
+        this.credit = properties.credit || false;
+    }
+
+    function FlickrGraphic(properties, slider) {
+        var self = this;
+        this.image = new Image();
+
+        this.loaded = false;
+        this.image.onload = function() {
+            self.loaded = true;
+            slider._onLoaded();
+        };
+
+        this.flickrID = this.getFlickrID(properties.src);
+        this.callFlickrAPI(this.flickrID, self);
+
+        this.label = properties.label || false;
+        this.credit = properties.credit || false;
+    }
+
+    FlickrGraphic.prototype = {
+        getFlickrID: function(url) {
+            if (url.match(/flic.kr\/.+/i)) {
+                var encoded = url.split('/').slice(-1)[0];
+                return base58Decode(encoded);
+            }
+            var idx = url.indexOf("flickr.com/photos/");
+            var pos = idx + "flickr.com/photos/".length;
+            var photo_info = url.substr(pos);
+            if (photo_info.indexOf('/') == -1) return null;
+            if (photo_info.indexOf('/') === 0) photo_info = photo_info.substr(1);
+            id = photo_info.split("/")[1];
+            return id;
+        },
+
+        callFlickrAPI: function(id, self) {
+            var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes' +
+                '&api_key=' + flickr_key +
+                '&photo_id=' + id + '&format=json&nojsoncallback=1';
+
+            var request = new XMLHttpRequest();
+            request.open('GET', url, true);
+            request.onload = function() {
+                if (request.status >= 200 && request.status < 400) {
+                    data = JSON.parse(request.responseText);
+                    var flickr_url = self.bestFlickrUrl(data.sizes.size);
+                    self.setFlickrImage(flickr_url);
+                } else {
+                    console.error("There was an error getting the picture from Flickr");
+                }
+            };
+            request.onerror = function() {
+                console.error("There was an error getting the picture from Flickr");
+            };
+            request.send();
+        },
+
+        setFlickrImage: function(src) {
+            this.image.src = src;
+        },
+
+        bestFlickrUrl: function(ary) {
+            var dict = {};
+            for (var i = 0; i < ary.length; i++) {
+                dict[ary[i].label] = ary[i].source;
+            }
+            for (var j = 0; j < FLICKR_SIZE_PREFERENCES.length; j++) {
+                if (FLICKR_SIZE_PREFERENCES[j] in dict) {
+                    return dict[FLICKR_SIZE_PREFERENCES[j]];
+                }
+            }
+            return ary[0].source;
+        }
+    };
+
+    function getNaturalDimensions(DOMelement) {
+        if (DOMelement.naturalWidth && DOMelement.naturalHeight) {
+            return { width: DOMelement.naturalWidth, height: DOMelement.naturalHeight };
+        }
+        // https://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
+        var img = new Image();
+        img.src = DOMelement.src;
+        return { width: img.width, height: img.height };
+    }
+
+    function getImageDimensions(img) {
+        var dimensions = {
+            width: getNaturalDimensions(img).width,
+            height: getNaturalDimensions(img).height,
+            aspect: function() { return (this.width / this.height); }
+        };
+        return dimensions;
+    }
+
+    function addClass(element, c) {
+        if (element.classList) {
+            element.classList.add(c);
+        } else {
+            element.className += " " + c;
+        }
+    }
+
+    function removeClass(element, c) {
+        element.className = element.className.replace(/(\S+)\s*/g, function(w, match) {
+            if (match === c) {
+                return '';
+            }
+            return w;
+        }).replace(/^\s+/, '');
+    }
+
+    function setText(element, text) {
+        if (document.body.textContent) {
+            element.textContent = text;
+        } else {
+            element.innerText = text;
+        }
+    }
+
+    function getComputedWidthAndHeight(element) {
+        if (window.getComputedStyle) {
+            return {
+                width: parseInt(getComputedStyle(element).width, 10),
+                height: parseInt(getComputedStyle(element).height, 10)
+            };
+        } else {
+            w = element.getBoundingClientRect().right - element.getBoundingClientRect().left;
+            h = element.getBoundingClientRect().bottom - element.getBoundingClientRect().top;
+            return {
+                width: parseInt(w, 10) || 0,
+                height: parseInt(h, 10) || 0
+            };
+        }
+    }
+
+    function viewport() {
+        var e = window,
+            a = 'inner';
+        if (!('innerWidth' in window)) {
+            a = 'client';
+            e = document.documentElement || document.body;
+        }
+        return { width: e[a + 'Width'], height: e[a + 'Height'] }
+    }
+
+    function getPageX(e) {
+        var pageX;
+        if (e.pageX) {
+            pageX = e.pageX;
+        } else if (e.touches) {
+            pageX = e.touches[0].pageX;
+        } else {
+            pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+        }
+        return pageX;
+    }
+
+    function getPageY(e) {
+        var pageY;
+        if (e.pageY) {
+            pageY = e.pageY;
+        } else if (e.touches) {
+            pageY = e.touches[0].pageY;
+        } else {
+            pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+        }
+        return pageY;
+    }
+
+    function checkFlickr(url) {
+        if (url.match(/flic.kr\/.+/i)) {
+            return true;
+        }
+        var idx = url.indexOf("flickr.com/photos/");
+        if (idx == -1) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    function base58Decode(encoded) {
+        var alphabet = '123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ',
+            base = alphabet.length;
+        if (typeof encoded !== 'string') {
+            throw '"base58Decode" only accepts strings.';
+        }
+        var decoded = 0;
+        while (encoded) {
+            var alphabetPosition = alphabet.indexOf(encoded[0]);
+            if (alphabetPosition < 0) {
+                throw '"base58Decode" can\'t find "' + encoded[0] + '" in the alphabet: "' + alphabet + '"';
+            }
+            var powerOf = encoded.length - 1;
+            decoded += alphabetPosition * (Math.pow(base, powerOf));
+            encoded = encoded.substring(1);
+        }
+        return decoded.toString();
+    }
+
+    function getLeftPercent(slider, input) {
+        if (typeof(input) === "string" || typeof(input) === "number") {
+            leftPercent = parseInt(input, 10);
+        } else {
+            var sliderRect = slider.getBoundingClientRect();
+            var offset = {
+                top: sliderRect.top + document.body.scrollTop + document.documentElement.scrollTop,
+                left: sliderRect.left + document.body.scrollLeft + document.documentElement.scrollLeft
+            };
+            var width = slider.offsetWidth;
+            var pageX = getPageX(input);
+            var relativeX = pageX - offset.left;
+            leftPercent = (relativeX / width) * 100;
+        }
+        return leftPercent;
+    }
+
+    function getTopPercent(slider, input) {
+        if (typeof(input) === "string" || typeof(input) === "number") {
+            topPercent = parseInt(input, 10);
+        } else {
+            var sliderRect = slider.getBoundingClientRect();
+            var offset = {
+                top: sliderRect.top + document.body.scrollTop + document.documentElement.scrollTop,
+                left: sliderRect.left + document.body.scrollLeft + document.documentElement.scrollLeft
+            };
+            var width = slider.offsetHeight;
+            var pageY = getPageY(input);
+            var relativeY = pageY - offset.top;
+            topPercent = (relativeY / width) * 100;
+        }
+        return topPercent;
+    }
+
+    // values of BOOLEAN_OPTIONS are ignored. just used for 'in' test on keys
+    var BOOLEAN_OPTIONS = { 'animate': true, 'showLabels': true, 'showCredits': true, 'makeResponsive': true };
+
+    function interpret_boolean(x) {
+        if (typeof(x) != 'string') {
+            return Boolean(x);
+        }
+        return !(x === 'false' || x === '');
+    }
+
+    function JXSlider(selector, images, options) {
+
+        this.selector = selector;
+
+        var i;
+        this.options = { // new options must have default values set here.
+            animate: true,
+            showLabels: true,
+            showCredits: true,
+            makeResponsive: true,
+            startingPosition: "50%",
+            mode: 'horizontal',
+            callback: null // pass a callback function if you like
+        };
+
+        for (i in this.options) {
+            if (i in options) {
+                if (i in BOOLEAN_OPTIONS) {
+                    this.options[i] = interpret_boolean(options[i]);
+                } else {
+                    this.options[i] = options[i];
+                }
+            }
+        }
+
+        if (images.length == 2) {
+
+            if (checkFlickr(images[0].src)) {
+                this.imgBefore = new FlickrGraphic(images[0], this);
+            } else {
+                this.imgBefore = new Graphic(images[0], this);
+            }
+
+            if (checkFlickr(images[1].src)) {
+                this.imgAfter = new FlickrGraphic(images[1], this);
+            } else {
+                this.imgAfter = new Graphic(images[1], this);
+            }
+
+        } else {
+            console.warn("The images parameter takes two Image objects.");
+        }
+
+        if (this.imgBefore.credit || this.imgAfter.credit) {
+            this.options.showCredits = true;
+        } else {
+            this.options.showCredits = false;
+        }
+    }
+
+    JXSlider.prototype = {
+
+        updateSlider: function(input, animate) {
+            var leftPercent, rightPercent;
+
+            if (this.options.mode === "vertical") {
+                leftPercent = getTopPercent(this.slider, input);
+            } else {
+                leftPercent = getLeftPercent(this.slider, input);
+            }
+
+            leftPercent = leftPercent.toFixed(2) + "%";
+            leftPercentNum = parseFloat(leftPercent);
+            rightPercent = (100 - leftPercentNum) + "%";
+
+            if (leftPercentNum > 0 && leftPercentNum < 100) {
+                removeClass(this.handle, 'transition');
+                removeClass(this.rightImage, 'transition');
+                removeClass(this.leftImage, 'transition');
+
+                if (this.options.animate && animate) {
+                    addClass(this.handle, 'transition');
+                    addClass(this.leftImage, 'transition');
+                    addClass(this.rightImage, 'transition');
+                }
+
+                if (this.options.mode === "vertical") {
+                    this.handle.style.top = leftPercent;
+                    this.leftImage.style.height = leftPercent;
+                    this.rightImage.style.height = rightPercent;
+                } else {
+                    this.handle.style.left = leftPercent;
+                    this.leftImage.style.width = leftPercent;
+                    this.rightImage.style.width = rightPercent;
+                }
+                this.sliderPosition = leftPercent;
+            }
+        },
+
+        getPosition: function() {
+            return this.sliderPosition;
+        },
+
+        displayLabel: function(element, labelText) {
+            label = document.createElement("div");
+            label.className = 'jx-label';
+            label.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document
+
+            setText(label, labelText);
+            element.appendChild(label);
+        },
+
+        displayCredits: function() {
+            credit = document.createElement("div");
+            credit.className = "jx-credit";
+
+            text = "<em>Photo Credits:</em>";
+            if (this.imgBefore.credit) { text += " <em>Before</em> " + this.imgBefore.credit; }
+            if (this.imgAfter.credit) { text += " <em>After</em> " + this.imgAfter.credit; }
+
+            credit.innerHTML = text;
+
+            this.wrapper.appendChild(credit);
+        },
+
+        setStartingPosition: function(s) {
+            this.options.startingPosition = s;
+        },
+
+        checkImages: function() {
+            if (getImageDimensions(this.imgBefore.image).aspect() ==
+                getImageDimensions(this.imgAfter.image).aspect()) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        calculateDims: function(width, height) {
+            var ratio = getImageDimensions(this.imgBefore.image).aspect();
+            if (width) {
+                height = width / ratio;
+            } else if (height) {
+                width = height * ratio;
+            }
+            return {
+                width: width,
+                height: height,
+                ratio: ratio
+            };
+        },
+
+        responsivizeIframe: function(dims) {
+            //Check the slider dimensions against the iframe (window) dimensions
+            if (dims.height < window.innerHeight) {
+                //If the aspect ratio is greater than 1, imgs are landscape, so letterbox top and bottom
+                if (dims.ratio >= 1) {
+                    this.wrapper.style.paddingTop = parseInt((window.innerHeight - dims.height) / 2) + "px";
+                }
+            } else if (dims.height > window.innerHeight) {
+                /* If the image is too tall for the window, which happens at 100% width on large screens,
+                 * force dimension recalculation based on height instead of width */
+                dims = this.calculateDims(0, window.innerHeight);
+                this.wrapper.style.paddingLeft = parseInt((window.innerWidth - dims.width) / 2) + "px";
+            }
+            if (this.options.showCredits) {
+                // accommodate the credits box within the iframe
+                dims.height -= 13;
+            }
+            return dims;
+        },
+
+        setWrapperDimensions: function() {
+            var wrapperWidth = getComputedWidthAndHeight(this.wrapper).width;
+            var wrapperHeight = getComputedWidthAndHeight(this.wrapper).height;
+            var dims = this.calculateDims(wrapperWidth, wrapperHeight);
+            // if window is in iframe, make sure images don't overflow boundaries
+            if (window.location !== window.parent.location && !this.options.makeResponsive) {
+                dims = this.responsivizeIframe(dims);
+            }
+
+            this.wrapper.style.height = parseInt(dims.height) + "px";
+            this.wrapper.style.width = parseInt(dims.width) + "px";
+        },
+
+        optimizeWrapper: function(maxWidth) {
+            var result = juxtapose.OPTIMIZATION_ACCEPTED;
+            if ((this.imgBefore.image.naturalWidth >= maxWidth) && (this.imgAfter.image.naturalWidth >= maxWidth)) {
+                this.wrapper.style.width = maxWidth + "px";
+                result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED;
+            } else if (this.imgAfter.image.naturalWidth < maxWidth) {
+                this.wrapper.style.width = this.imgAfter.image.naturalWidth + "px";
+            } else {
+                this.wrapper.style.width = this.imgBefore.image.naturalWidth + "px";
+            }
+            this.setWrapperDimensions();
+            return result;
+        },
+
+        _onLoaded: function() {
+
+            if (this.imgBefore && this.imgBefore.loaded === true &&
+                this.imgAfter && this.imgAfter.loaded === true) {
+
+                this.wrapper = document.querySelector(this.selector);
+                addClass(this.wrapper, 'juxtapose');
+
+                this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width;
+                this.setWrapperDimensions();
+
+                this.slider = document.createElement("div");
+                this.slider.className = 'jx-slider';
+                this.wrapper.appendChild(this.slider);
+
+                if (this.options.mode != "horizontal") {
+                    addClass(this.slider, this.options.mode);
+                }
+
+                this.handle = document.createElement("div");
+                this.handle.className = 'jx-handle';
+
+                this.rightImage = document.createElement("div");
+                this.rightImage.className = 'jx-image jx-right';
+                this.rightImage.appendChild(this.imgAfter.image);
+
+
+                this.leftImage = document.createElement("div");
+                this.leftImage.className = 'jx-image jx-left';
+                this.leftImage.appendChild(this.imgBefore.image);
+
+                this.labCredit = document.createElement("a");
+                this.labCredit.setAttribute('href', 'https://juxtapose.knightlab.com');
+                this.labCredit.setAttribute('target', '_blank');
+                this.labCredit.setAttribute('rel', 'noopener');
+                this.labCredit.className = 'jx-knightlab';
+                this.labLogo = document.createElement("div");
+                this.labLogo.className = 'knightlab-logo';
+                this.labCredit.appendChild(this.labLogo);
+                this.projectName = document.createElement("span");
+                this.projectName.className = 'juxtapose-name';
+                setText(this.projectName, 'JuxtaposeJS');
+                this.labCredit.appendChild(this.projectName);
+
+                this.slider.appendChild(this.handle);
+                this.slider.appendChild(this.leftImage);
+                this.slider.appendChild(this.rightImage);
+                this.slider.appendChild(this.labCredit);
+
+                this.leftArrow = document.createElement("div");
+                this.rightArrow = document.createElement("div");
+                this.control = document.createElement("div");
+                this.controller = document.createElement("div");
+
+                this.leftArrow.className = 'jx-arrow jx-left';
+                this.rightArrow.className = 'jx-arrow jx-right';
+                this.control.className = 'jx-control';
+                this.controller.className = 'jx-controller';
+
+                this.controller.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document
+                this.controller.setAttribute('role', 'slider');
+                this.controller.setAttribute('aria-valuenow', 50);
+                this.controller.setAttribute('aria-valuemin', 0);
+                this.controller.setAttribute('aria-valuemax', 100);
+
+                this.handle.appendChild(this.leftArrow);
+                this.handle.appendChild(this.control);
+                this.handle.appendChild(this.rightArrow);
+                this.control.appendChild(this.controller);
+
+                this._init();
+            }
+        },
+
+        _init: function() {
+
+            if (this.checkImages() === false) {
+                console.warn(this, "Check that the two images have the same aspect ratio for the slider to work correctly.");
+            }
+
+            this.updateSlider(this.options.startingPosition, false);
+
+            if (this.options.showLabels === true) {
+                if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); }
+                if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); }
+            }
+
+            if (this.options.showCredits === true) {
+                this.displayCredits();
+            }
+
+            var self = this;
+            window.addEventListener("resize", function() {
+                self.setWrapperDimensions();
+            });
+
+
+            // Set up Javascript Events
+            // On mousedown, call updateSlider then set animate to false
+            // (if animate is true, adds css transition when updating).
+
+            this.slider.addEventListener("mousedown", function(e) {
+                e = e || window.event;
+                e.preventDefault();
+                self.updateSlider(e, true);
+                animate = true;
+
+                this.addEventListener("mousemove", function(e) {
+                    e = e || window.event;
+                    e.preventDefault();
+                    if (animate) { self.updateSlider(e, false); }
+                });
+
+                this.addEventListener('mouseup', function(e) {
+                    e = e || window.event;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.removeEventListener('mouseup', arguments.callee);
+                    animate = false;
+                });
+            });
+
+            this.slider.addEventListener("touchstart", function(e) {
+                e = e || window.event;
+                e.preventDefault();
+                e.stopPropagation();
+                self.updateSlider(e, true);
+
+                this.addEventListener("touchmove", function(e) {
+                    e = e || window.event;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    self.updateSlider(event, false);
+                });
+
+            });
+
+            /* keyboard accessibility */
+
+            this.handle.addEventListener("keydown", function(e) {
+                e = e || window.event;
+                var key = e.which || e.keyCode;
+                var ariaValue = parseFloat(this.style.left);
+
+                //move jx-controller left
+                if (key == 37) {
+                    ariaValue = ariaValue - 1;
+                    var leftStart = parseFloat(this.style.left) - 1;
+                    self.updateSlider(leftStart, false);
+                    self.controller.setAttribute('aria-valuenow', ariaValue);
+                }
+
+                //move jx-controller right
+                if (key == 39) {
+                    ariaValue = ariaValue + 1;
+                    var rightStart = parseFloat(this.style.left) + 1;
+                    self.updateSlider(rightStart, false);
+                    self.controller.setAttribute('aria-valuenow', ariaValue);
+                }
+            });
+
+            //toggle right-hand image visibility
+            this.leftImage.addEventListener("keydown", function(event) {
+                var key = event.which || event.keyCode;
+                if ((key == 13) || (key == 32)) {
+                    self.updateSlider("90%", true);
+                    self.controller.setAttribute('aria-valuenow', 90);
+                }
+            });
+
+            //toggle left-hand image visibility
+            this.rightImage.addEventListener("keydown", function(event) {
+                var key = event.which || event.keyCode;
+                if ((key == 13) || (key == 32)) {
+                    self.updateSlider("10%", true);
+                    self.controller.setAttribute('aria-valuenow', 10);
+                }
+            });
+
+            juxtapose.sliders.push(this);
+
+            if (this.options.callback && typeof(this.options.callback) == 'function') {
+                this.options.callback(this);
+            }
+        }
+
+    };
+
+    /*
+      Given an element that is configured with the proper data elements, make a slider out of it.
+      Normally this will just be used by scanPage.
+    */
+    juxtapose.makeSlider = function(element, idx) {
+        if (typeof idx == 'undefined') {
+            idx = juxtapose.sliders.length; // not super threadsafe...
+        }
+
+        var w = element;
+
+        var images = w.querySelectorAll('img');
+
+        var options = {};
+        // don't set empty string into options, that's a false false.
+        if (w.getAttribute('data-animate')) {
+            options.animate = w.getAttribute('data-animate');
+        }
+        if (w.getAttribute('data-showlabels')) {
+            options.showLabels = w.getAttribute('data-showlabels');
+        }
+        if (w.getAttribute('data-showcredits')) {
+            options.showCredits = w.getAttribute('data-showcredits');
+        }
+        if (w.getAttribute('data-startingposition')) {
+            options.startingPosition = w.getAttribute('data-startingposition');
+        }
+        if (w.getAttribute('data-mode')) {
+            options.mode = w.getAttribute('data-mode');
+        }
+        if (w.getAttribute('data-makeresponsive')) {
+            options.mode = w.getAttribute('data-makeresponsive');
+        }
+
+        specificClass = 'juxtapose-' + idx;
+        addClass(element, specificClass);
+
+        selector = '.' + specificClass;
+
+        if (w.innerHTML) {
+            w.innerHTML = '';
+        } else {
+            w.innerText = '';
+        }
+
+        slider = new juxtapose.JXSlider(
+            selector, [{
+                    src: images[0].src,
+                    label: images[0].getAttribute('data-label'),
+                    credit: images[0].getAttribute('data-credit'),
+                    alt: images[0].alt
+                },
+                {
+                    src: images[1].src,
+                    label: images[1].getAttribute('data-label'),
+                    credit: images[1].getAttribute('data-credit'),
+                    alt: images[1].alt
+                }
+            ],
+            options
+        );
+    };
+
+    //Enable HTML Implementation
+    juxtapose.scanPage = function() {
+        var elements = document.querySelectorAll('.juxtapose');
+        for (var i = 0; i < elements.length; i++) {
+            juxtapose.makeSlider(elements[i], i);
+        }
+    };
+
+    juxtapose.JXSlider = JXSlider;
+    window.juxtapose = juxtapose;
+
+    juxtapose.scanPage();
+
+}(document, window));
+
+
+// addEventListener polyfill / jonathantneal
+!window.addEventListener && (function(WindowPrototype, DocumentPrototype, ElementPrototype, addEventListener, removeEventListener, dispatchEvent, registry) {
+    WindowPrototype[addEventListener] = DocumentPrototype[addEventListener] = ElementPrototype[addEventListener] = function(type, listener) {
+        var target = this;
+
+        registry.unshift([target, type, listener, function(event) {
+            event.currentTarget = target;
+            event.preventDefault = function() { event.returnValue = false };
+            event.stopPropagation = function() { event.cancelBubble = true };
+            event.target = event.srcElement || target;
+
+            listener.call(target, event);
+        }]);
+
+        this.attachEvent("on" + type, registry[0][3]);
+    };
+
+    WindowPrototype[removeEventListener] = DocumentPrototype[removeEventListener] = ElementPrototype[removeEventListener] = function(type, listener) {
+        for (var index = 0, register; register = registry[index]; ++index) {
+            if (register[0] == this && register[1] == type && register[2] == listener) {
+                return this.detachEvent("on" + type, registry.splice(index, 1)[0][3]);
+            }
+        }
+    };
+
+    WindowPrototype[dispatchEvent] = DocumentPrototype[dispatchEvent] = ElementPrototype[dispatchEvent] = function(eventObject) {
+        return this.fireEvent("on" + eventObject.type, eventObject);
+    };
+})(Window.prototype, HTMLDocument.prototype, Element.prototype, "addEventListener", "removeEventListener", "dispatchEvent", []);
\ No newline at end of file