enejb/devicepx-jetpack.js

## devicepx-jetpack.js
/* Detect-zoom
 * -----------
 * Cross Browser Zoom and Pixel Ratio Detector
 * Version 1.0.4 | Apr 1 2013
 * dual-licensed under the WTFPL and MIT license
 * Maintained by https://github/tombigel
 * Original developer https://github.com/yonran
 */

//AMD and CommonJS initialization copied from https://github.com/zohararad/audio5js
(function (root, ns, factory) {
    "use strict";

    if (typeof (module) !== 'undefined' && module.exports) { // CommonJS
        module.exports = factory(ns, root);
    } else if (typeof (define) === 'function' && define.amd) { // AMD
        define("detect-zoom", function () {
            return factory(ns, root);
        });
    } else {
        root[ns] = factory(ns, root);
    }

}(window, 'detectZoom', function () {

    /**
     * Use devicePixelRatio if supported by the browser
     * @return {Number}
     * @private
     */
    var devicePixelRatio = function () {
        return window.devicePixelRatio || 1;
    };

    /**
     * Fallback function to set default values
     * @return {Object}
     * @private
     */
    var fallback = function () {
        return {
            zoom: 1,
            devicePxPerCssPx: 1
        };
    };
    /**
     * IE 8 and 9: no trick needed!
     * TODO: Test on IE10 and Windows 8 RT
     * @return {Object}
     * @private
     **/
    var ie8 = function () {
        var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100) / 100;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    };

    /**
     * For IE10 we need to change our technique again...
     * thanks https://github.com/stefanvanburen
     * @return {Object}
     * @private
     */
    var ie10 = function () {
        var zoom = Math.round((document.documentElement.offsetHeight / window.innerHeight) * 100) / 100;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    };

	/**
	* For chrome
	*
	*/
    var chrome = function()
    {
    	var zoom = Math.round(((window.outerWidth) / window.innerWidth)*100) / 100;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    }

	/**
	* For safari (same as chrome)
	*
	*/
    var safari= function()
    {
    	var zoom = Math.round(((window.outerWidth) / window.innerWidth)*100) / 100;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    }


    /**
     * Mobile WebKit
     * the trick: window.innerWIdth is in CSS pixels, while
     * screen.width and screen.height are in system pixels.
     * And there are no scrollbars to mess up the measurement.
     * @return {Object}
     * @private
     */
    var webkitMobile = function () {
        var deviceWidth = (Math.abs(window.orientation) == 90) ? screen.height : screen.width;
        var zoom = deviceWidth / window.innerWidth;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    };

    /**
     * Desktop Webkit
     * the trick: an element's clientHeight is in CSS pixels, while you can
     * set its line-height in system pixels using font-size and
     * -webkit-text-size-adjust:none.
     * device-pixel-ratio: http://www.webkit.org/blog/55/high-dpi-web-sites/
     *
     * Previous trick (used before http://trac.webkit.org/changeset/100847):
     * documentElement.scrollWidth is in CSS pixels, while
     * document.width was in system pixels. Note that this is the
     * layout width of the document, which is slightly different from viewport
     * because document width does not include scrollbars and might be wider
     * due to big elements.
     * @return {Object}
     * @private
     */
    var webkit = function () {
        var important = function (str) {
            return str.replace(/;/g, " !important;");
        };

        var div = document.createElement('div');
        div.innerHTML = "1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0";
        div.setAttribute('style', important('font: 100px/1em sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;'));

        // The container exists so that the div will be laid out in its own flow
        // while not impacting the layout, viewport size, or display of the
        // webpage as a whole.
        // Add !important and relevant CSS rule resets
        // so that other rules cannot affect the results.
        var container = document.createElement('div');
        container.setAttribute('style', important('width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;'));
        container.appendChild(div);

        document.body.appendChild(container);
        var zoom = 1000 / div.clientHeight;
        zoom = Math.round(zoom * 100) / 100;
        document.body.removeChild(container);

        return{
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    };

    /**
     * no real trick; device-pixel-ratio is the ratio of device dpi / css dpi.
     * (Note that this is a different interpretation than Webkit's device
     * pixel ratio, which is the ratio device dpi / system dpi).
     *
     * Also, for Mozilla, there is no difference between the zoom factor and the device ratio.
     *
     * @return {Object}
     * @private
     */
    var firefox4 = function () {
        var zoom = mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001);
        zoom = Math.round(zoom * 100) / 100;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom
        };
    };

    /**
     * Firefox 18.x
     * Mozilla added support for devicePixelRatio to Firefox 18,
     * but it is affected by the zoom level, so, like in older
     * Firefox we can't tell if we are in zoom mode or in a device
     * with a different pixel ratio
     * @return {Object}
     * @private
     */
    var firefox18 = function () {
        return {
            zoom: firefox4().zoom,
            devicePxPerCssPx: devicePixelRatio()
        };
    };

    /**
     * works starting Opera 11.11
     * the trick: outerWidth is the viewport width including scrollbars in
     * system px, while innerWidth is the viewport width including scrollbars
     * in CSS px
     * @return {Object}
     * @private
     */
    var opera11 = function () {
        var zoom = window.top.outerWidth / window.top.innerWidth;
        zoom = Math.round(zoom * 100) / 100;
        return {
            zoom: zoom,
            devicePxPerCssPx: zoom * devicePixelRatio()
        };
    };

    /**
     * Use a binary search through media queries to find zoom level in Firefox
     * @param property
     * @param unit
     * @param a
     * @param b
     * @param maxIter
     * @param epsilon
     * @return {Number}
     */
    var mediaQueryBinarySearch = function (property, unit, a, b, maxIter, epsilon) {
        var matchMedia;
        var head, style, div;
        if (window.matchMedia) {
            matchMedia = window.matchMedia;
        } else {
            head = document.getElementsByTagName('head')[0];
            style = document.createElement('style');
            head.appendChild(style);

            div = document.createElement('div');
            div.className = 'mediaQueryBinarySearch';
            div.style.display = 'none';
            document.body.appendChild(div);

            matchMedia = function (query) {
                style.sheet.insertRule('@media ' + query + '{.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0);
                var matched = getComputedStyle(div, null).textDecoration == 'underline';
                style.sheet.deleteRule(0);
                return {matches: matched};
            };
        }
        var ratio = binarySearch(a, b, maxIter);
        if (div) {
            head.removeChild(style);
            document.body.removeChild(div);
        }
        return ratio;

        function binarySearch(a, b, maxIter) {
            var mid = (a + b) / 2;
            if (maxIter <= 0 || b - a < epsilon) {
                return mid;
            }
            var query = "(" + property + ":" + mid + unit + ")";
            if (matchMedia(query).matches) {
                return binarySearch(mid, b, maxIter - 1);
            } else {
                return binarySearch(a, mid, maxIter - 1);
            }
        }
    };

    /**
     * Generate detection function
     * @private
     */
    var detectFunction = (function () {
        var func = fallback;
        //IE8+
        if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
            func = ie8;
        }
        // IE10+ / Touch
        else if (window.navigator.msMaxTouchPoints) {
            func = ie10;
        }
		//chrome
		else if(!!window.chrome && !(!!window.opera || navigator.userAgent.indexOf(' Opera') >= 0)){
			func = chrome;
		}
		//safari
		else if(Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0){
			func = safari;
		}
        //Mobile Webkit
        else if ('orientation' in window && 'webkitRequestAnimationFrame' in window) {
            func = webkitMobile;
        }
        //WebKit
        else if ('webkitRequestAnimationFrame' in window) {
            func = webkit;
        }
        //Opera
        else if (navigator.userAgent.indexOf('Opera') >= 0) {
            func = opera11;
        }
        //Last one is Firefox
        //FF 18.x
        else if (window.devicePixelRatio) {
            func = firefox18;
        }
        //FF 4.0 - 17.x
        else if (firefox4().zoom > 0.001) {
            func = firefox4;
        }

        return func;
    }());


    return ({

        /**
         * Ratios.zoom shorthand
         * @return {Number} Zoom level
         */
        zoom: function () {
            return detectFunction().zoom;
        },

        /**
         * Ratios.devicePxPerCssPx shorthand
         * @return {Number} devicePxPerCssPx level
         */
        device: function () {
            return detectFunction().devicePxPerCssPx;
        }
    });
}));

var wpcom_img_zoomer = {
    zoomed: false,
    timer: null,
    interval: 1000, // zoom polling interval in millisecond

    // Should we apply width/height attributes to control the image size?
    imgNeedsSizeAtts: function( img ) {
        // Do not overwrite existing width/height attributes.
        if ( img.getAttribute('width') !== null || img.getAttribute('height') !== null )
            return false;
        // Do not apply the attributes if the image is already constrained by a parent element.
        if ( img.width < img.naturalWidth || img.height < img.naturalHeight )
            return false;
        return true;
    },

    init: function() {
        var t = this;
        try{
            t.zoomImages();
            t.listenForChangesToDom();
            //t.timer = setInterval( function() { t.zoomImages(); }, t.interval );
        }
        catch(e){
        }
    },

    listenForChangesToDom: function(){

        var t = this;

        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

        var observer = new MutationObserver( function( mutations ) {

            mutations.forEach( function( mutation ) {

                if( 'childList' === mutation.type  ) {
                    var numOfAddedNodes = mutation.addedNodes.length;
                    // console.log( numOfAddedNodes );
                    for( var i = 0; i < numOfAddedNodes; i++ ) {
                        // ignore any script and iframes and anything that is not a tag
                        if( typeof mutation.addedNodes[i].tagName != 'undefined'
                            && mutation.addedNodes[i].tagName != 'SCRIPT'
                            && mutation.addedNodes[i].tagName != 'IFRAME' ) {
                          t.zoomImagesInDom( mutation.addedNodes[i] );
                        }
                    }

                }
            } ); // end of for reach
        } );

       if( 'object' === typeof observer ) {
            // look at only the childList and the subtree changes
            var config = { attributes: false, childList: true, characterData: false, subtree: true }
            observer.observe( window.document.body, config );
        } else {
            try{
                // If the browser doesn't suppor the new DOM observer
                // lets try the zoomImages() method every interval
                // todo: check if IE support passing setInterval function call.
                t.timer = setInterval( function() { t.zoomImages(); }, t.interval );
            }
            catch(e){
            }

        }
    },

    stop: function() {
        if ( this.timer )
            clearInterval( this.timer );
    },

    getScale: function() {
        var scale = detectZoom.device();
        // Round up to 1.5 or the next integer below the cap.
        if      ( scale <= 1.0 ) scale = 1.0;
        else if ( scale <= 1.5 ) scale = 1.5;
        else if ( scale <= 2.0 ) scale = 2.0;
        else if ( scale <= 3.0 ) scale = 3.0;
        else if ( scale <= 4.0 ) scale = 4.0;
        else                     scale = 5.0;
        return scale;
    },

    shouldZoom: function( scale ) {
        var t = this;
        // Do not operate on hidden frames.
        if ( "innerWidth" in window && !window.innerWidth )
            return false;
        // Don't do anything until scale > 1
        if ( scale == 1.0 && t.zoomed == false )
            return false;
        return true;
    },
    zoomImagesInDom: function( dom ) {

        var t = this;
        var scale = t.getScale();
        if ( ! t.shouldZoom( scale ) ){
            return;
        }
        t.zoomed = true;
        // Loop through all the <img> elements on the page.
        var imgs = dom.getElementsByTagName("img");

        for ( var i = 0; i < imgs.length; i++ ) {
            try {
                 t.maybeScaleImage( imgs[i], scale );
            } catch(e) {}
        }
    },
    zoomImages: function() {
        var t = this;

        t.zoomImagesInDom( document );
    },
    maybeScaleImage: function ( img, scale ){
        var t = this;

        // Wait for original images to load
        if ( "complete" in img && ! img.complete ){

            // lets try the same image in a little bit
            setTimeout( function() {  t.maybeScaleImage( img, scale ) } , 100 );
            return;
        }

        // Skip images that don't need processing.
        var imgScale = img.getAttribute("scale");
        if ( imgScale == scale || imgScale == "0" )
            return;

        // Skip images that have already failed at this scale
        var scaleFail = img.getAttribute("scale-fail");
        if ( scaleFail && scaleFail <= scale )
            return;

        // Skip images that have no dimensions yet.
        if ( ! ( img.width && img.height ) )
            return;

        // Skip images from Lazy Load plugins
        if ( ! imgScale && img.getAttribute("data-lazy-src") && (img.getAttribute("data-lazy-src") !== img.getAttribute("src")))
            return;

        if ( t.scaleImage( img, scale ) ) {
            // Mark the img as having been processed at this scale.
            img.setAttribute("scale", scale);
        }
        else {
            // Set the flag to skip this image.
            img.setAttribute("scale", "0");
        }
    },

    scaleImage: function( img, scale ) {

        var t = this;
        var newSrc = img.src;

        // Skip slideshow images
        if ( img.parentNode.className.match(/slideshow-slide/) )
            return false;

        // Scale gravatars that have ?s= or ?size=
        if ( img.src.match( /^https?:\/\/([^\/]*\.)?gravatar\.com\/.+[?&](s|size)=/ ) ) {
            newSrc = img.src.replace( /([?&](s|size)=)(\d+)/, function( $0, $1, $2, $3 ) {
                // Stash the original size
                var originalAtt = "originals",
                originalSize = img.getAttribute(originalAtt);
                if ( originalSize === null ) {
                    originalSize = $3;
                    img.setAttribute(originalAtt, originalSize);
                    if ( t.imgNeedsSizeAtts( img ) ) {
                        // Fix width and height attributes to rendered dimensions.
                        img.width = img.width;
                        img.height = img.height;
                    }
                }
                // Get the width/height of the image in CSS pixels
                var size = img.clientWidth;
                // Convert CSS pixels to device pixels
                var targetSize = Math.ceil(img.clientWidth * scale);
                // Don't go smaller than the original size
                targetSize = Math.max( targetSize, originalSize );
                // Don't go larger than the service supports
                targetSize = Math.min( targetSize, 512 );
                return $1 + targetSize;
            });
        }

        // Scale resize queries (*.files.wordpress.com) that have ?w= or ?h=
        else if ( img.src.match( /^https?:\/\/([^\/]+)\.files\.wordpress\.com\/.+[?&][wh]=/ ) ) {
            if ( img.src.match( /[?&]crop/ ) )
                return false;
            var changedAttrs = {};
            var matches = img.src.match( /([?&]([wh])=)(\d+)/g );
            for ( var i = 0; i < matches.length; i++ ) {
                var lr = matches[i].split( '=' );
                var thisAttr = lr[0].replace(/[?&]/g, '' );
                var thisVal = lr[1];

                // Stash the original size
                var originalAtt = 'original' + thisAttr, originalSize = img.getAttribute( originalAtt );
                if ( originalSize === null ) {
                    originalSize = thisVal;
                    img.setAttribute(originalAtt, originalSize);
                    if ( t.imgNeedsSizeAtts( img ) ) {
                        // Fix width and height attributes to rendered dimensions.
                        img.width = img.width;
                        img.height = img.height;
                    }
                }
                // Get the width/height of the image in CSS pixels
                var size = thisAttr == 'w' ? img.clientWidth : img.clientHeight;
                var naturalSize = ( thisAttr == 'w' ? img.naturalWidth : img.naturalHeight );
                // Convert CSS pixels to device pixels
                var targetSize = Math.ceil(size * scale);
                // Don't go smaller than the original size
                targetSize = Math.max( targetSize, originalSize );
                // Don't go bigger unless the current one is actually lacking
                if ( scale > img.getAttribute("scale") && targetSize <= naturalSize )
                    targetSize = thisVal;
                // Don't try to go bigger if the image is already smaller than was requested
                if ( naturalSize < thisVal )
                    targetSize = thisVal;
                if ( targetSize != thisVal )
                    changedAttrs[ thisAttr ] = targetSize;
            }
            var w = changedAttrs.w || false;
            var h = changedAttrs.h || false;

            if ( w ) {
                newSrc = img.src.replace(/([?&])w=\d+/g, function( $0, $1 ) {
                    return $1 + 'w=' + w;
                });
            }
            if ( h ) {
                newSrc = newSrc.replace(/([?&])h=\d+/g, function( $0, $1 ) {
                    return $1 + 'h=' + h;
                });
            }
        }

        // Scale mshots that have width
        else if ( img.src.match(/^https?:\/\/([^\/]+\.)*(wordpress|wp)\.com\/mshots\/.+[?&]w=\d+/) ) {
            newSrc = img.src.replace( /([?&]w=)(\d+)/, function($0, $1, $2) {
                // Stash the original size
                var originalAtt = 'originalw', originalSize = img.getAttribute(originalAtt);
                if ( originalSize === null ) {
                    originalSize = $2;
                    img.setAttribute(originalAtt, originalSize);
                    if ( t.imgNeedsSizeAtts( img ) ) {
                        // Fix width and height attributes to rendered dimensions.
                        img.width = img.width;
                        img.height = img.height;
                    }
                }
                // Get the width of the image in CSS pixels
                var size = img.clientWidth;
                // Convert CSS pixels to device pixels
                var targetSize = Math.ceil(size * scale);
                // Don't go smaller than the original size
                targetSize = Math.max( targetSize, originalSize );
                // Don't go bigger unless the current one is actually lacking
                if ( scale > img.getAttribute("scale") && targetSize <= img.naturalWidth )
                    targetSize = $2;
                if ( $2 != targetSize )
                    return $1 + targetSize;
                return $0;
            });
        }

        // Scale simple imgpress queries (s0.wp.com) that only specify w/h/fit
        else if ( img.src.match(/^https?:\/\/([^\/.]+\.)*(wp|wordpress)\.com\/imgpress\?(.+)/) ) {
            var imgpressSafeFunctions = ["zoom", "url", "h", "w", "fit", "filter", "brightness", "contrast", "colorize", "smooth", "unsharpmask"];
            // Search the query string for unsupported functions.
            var qs = RegExp.$3.split('&');
            for ( var q in qs ) {
                q = qs[q].split('=')[0];
                if ( imgpressSafeFunctions.indexOf(q) == -1 ) {
                    return false;
                }
            }
            // Fix width and height attributes to rendered dimensions.
            img.width = img.width;
            img.height = img.height;
            // Compute new src
            if ( scale == 1 )
                newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?');
            else
                newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?zoom=' + scale + '&');
        }

        // Scale LaTeX images or Photon queries (i#.wp.com)
        else if (
            img.src.match(/^https?:\/\/([^\/.]+\.)*(wp|wordpress)\.com\/latex\.php\?(latex|zoom)=(.+)/) ||
            img.src.match(/^https?:\/\/i[\d]{1}\.wp\.com\/(.+)/)
        ) {
            // Fix width and height attributes to rendered dimensions.
            img.width = img.width;
            img.height = img.height;
            // Compute new src
            if ( scale == 1 )
                newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?');
            else
                newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?zoom=' + scale + '&');
        }

        // Scale static assets that have a name matching *-1x.png or *@1x.png
        else if ( img.src.match(/^https?:\/\/[^\/]+\/.*[-@]([12])x\.(gif|jpeg|jpg|png)(\?|$)/) ) {
            // Fix width and height attributes to rendered dimensions.
            img.width = img.width;
            img.height = img.height;
            var currentSize = RegExp.$1, newSize = currentSize;
            if ( scale <= 1 )
                newSize = 1;
            else
                newSize = 2;
            if ( currentSize != newSize )
                newSrc = img.src.replace(/([-@])[12]x\.(gif|jpeg|jpg|png)(\?|$)/, '$1'+newSize+'x.$2$3');
        }

        else {
            // console.log( 'Failed to scale image', newSrc);
            return false;
        }

        // Don't set img.src unless it has changed. This avoids unnecessary reloads.
        if ( newSrc != img.src ) {
            // Store the original img.src
            var prevSrc, origSrc = img.getAttribute("src-orig");
            if ( !origSrc ) {
                origSrc = img.src;
                img.setAttribute("src-orig", origSrc);
            }
            // In case of error, revert img.src
            prevSrc = img.src;
            img.onerror = function(){
                img.src = prevSrc;
                if ( img.getAttribute("scale-fail") < scale )
                    img.setAttribute("scale-fail", scale);
                img.onerror = null;
            };
            // Finally load the new image
            img.src = newSrc;
        }
        // console.log( 'scaled image', newSrc);
        return true;
    }
};

wpcom_img_zoomer.init();
	/* Detect-zoom
	* -----------
	* Cross Browser Zoom and Pixel Ratio Detector
	* Version 1.0.4 \| Apr 1 2013
	* dual-licensed under the WTFPL and MIT license
	* Maintained by https://github/tombigel
	* Original developer https://github.com/yonran
	*/

	//AMD and CommonJS initialization copied from https://github.com/zohararad/audio5js
	(function (root, ns, factory) {
	"use strict";

	if (typeof (module) !== 'undefined' && module.exports) { // CommonJS
	module.exports = factory(ns, root);
	} else if (typeof (define) === 'function' && define.amd) { // AMD
	define("detect-zoom", function () {
	return factory(ns, root);
	});
	} else {
	root[ns] = factory(ns, root);
	}

	}(window, 'detectZoom', function () {

	/**
	* Use devicePixelRatio if supported by the browser
	* @return {Number}
	* @private
	*/
	var devicePixelRatio = function () {
	return window.devicePixelRatio \|\| 1;
	};

	/**
	* Fallback function to set default values
	* @return {Object}
	* @private
	*/
	var fallback = function () {
	return {
	zoom: 1,
	devicePxPerCssPx: 1
	};
	};
	/**
	* IE 8 and 9: no trick needed!
	* TODO: Test on IE10 and Windows 8 RT
	* @return {Object}
	* @private
	**/
	var ie8 = function () {
	var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100) / 100;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	};

	/**
	* For IE10 we need to change our technique again...
	* thanks https://github.com/stefanvanburen
	* @return {Object}
	* @private
	*/
	var ie10 = function () {
	var zoom = Math.round((document.documentElement.offsetHeight / window.innerHeight) * 100) / 100;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	};

	/**
	* For chrome
	*
	*/
	var chrome = function()
	{
	var zoom = Math.round(((window.outerWidth) / window.innerWidth)*100) / 100;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	}

	/**
	* For safari (same as chrome)
	*
	*/
	var safari= function()
	{
	var zoom = Math.round(((window.outerWidth) / window.innerWidth)*100) / 100;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	}


	/**
	* Mobile WebKit
	* the trick: window.innerWIdth is in CSS pixels, while
	* screen.width and screen.height are in system pixels.
	* And there are no scrollbars to mess up the measurement.
	* @return {Object}
	* @private
	*/
	var webkitMobile = function () {
	var deviceWidth = (Math.abs(window.orientation) == 90) ? screen.height : screen.width;
	var zoom = deviceWidth / window.innerWidth;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	};

	/**
	* Desktop Webkit
	* the trick: an element's clientHeight is in CSS pixels, while you can
	* set its line-height in system pixels using font-size and
	* -webkit-text-size-adjust:none.
	* device-pixel-ratio: http://www.webkit.org/blog/55/high-dpi-web-sites/
	*
	* Previous trick (used before http://trac.webkit.org/changeset/100847):
	* documentElement.scrollWidth is in CSS pixels, while
	* document.width was in system pixels. Note that this is the
	* layout width of the document, which is slightly different from viewport
	* because document width does not include scrollbars and might be wider
	* due to big elements.
	* @return {Object}
	* @private
	*/
	var webkit = function () {
	var important = function (str) {
	return str.replace(/;/g, " !important;");
	};

	var div = document.createElement('div');
	div.innerHTML = "1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0";
	div.setAttribute('style', important('font: 100px/1em sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;'));

	// The container exists so that the div will be laid out in its own flow
	// while not impacting the layout, viewport size, or display of the
	// webpage as a whole.
	// Add !important and relevant CSS rule resets
	// so that other rules cannot affect the results.
	var container = document.createElement('div');
	container.setAttribute('style', important('width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;'));
	container.appendChild(div);

	document.body.appendChild(container);
	var zoom = 1000 / div.clientHeight;
	zoom = Math.round(zoom * 100) / 100;
	document.body.removeChild(container);

	return{
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	};

	/**
	* no real trick; device-pixel-ratio is the ratio of device dpi / css dpi.
	* (Note that this is a different interpretation than Webkit's device
	* pixel ratio, which is the ratio device dpi / system dpi).
	*
	* Also, for Mozilla, there is no difference between the zoom factor and the device ratio.
	*
	* @return {Object}
	* @private
	*/
	var firefox4 = function () {
	var zoom = mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001);
	zoom = Math.round(zoom * 100) / 100;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom
	};
	};

	/**
	* Firefox 18.x
	* Mozilla added support for devicePixelRatio to Firefox 18,
	* but it is affected by the zoom level, so, like in older
	* Firefox we can't tell if we are in zoom mode or in a device
	* with a different pixel ratio
	* @return {Object}
	* @private
	*/
	var firefox18 = function () {
	return {
	zoom: firefox4().zoom,
	devicePxPerCssPx: devicePixelRatio()
	};
	};

	/**
	* works starting Opera 11.11
	* the trick: outerWidth is the viewport width including scrollbars in
	* system px, while innerWidth is the viewport width including scrollbars
	* in CSS px
	* @return {Object}
	* @private
	*/
	var opera11 = function () {
	var zoom = window.top.outerWidth / window.top.innerWidth;
	zoom = Math.round(zoom * 100) / 100;
	return {
	zoom: zoom,
	devicePxPerCssPx: zoom * devicePixelRatio()
	};
	};

	/**
	* Use a binary search through media queries to find zoom level in Firefox
	* @param property
	* @param unit
	* @param a
	* @param b
	* @param maxIter
	* @param epsilon
	* @return {Number}
	*/
	var mediaQueryBinarySearch = function (property, unit, a, b, maxIter, epsilon) {
	var matchMedia;
	var head, style, div;
	if (window.matchMedia) {
	matchMedia = window.matchMedia;
	} else {
	head = document.getElementsByTagName('head')[0];
	style = document.createElement('style');
	head.appendChild(style);

	div = document.createElement('div');
	div.className = 'mediaQueryBinarySearch';
	div.style.display = 'none';
	document.body.appendChild(div);

	matchMedia = function (query) {
	style.sheet.insertRule('@media ' + query + '{.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0);
	var matched = getComputedStyle(div, null).textDecoration == 'underline';
	style.sheet.deleteRule(0);
	return {matches: matched};
	};
	}
	var ratio = binarySearch(a, b, maxIter);
	if (div) {
	head.removeChild(style);
	document.body.removeChild(div);
	}
	return ratio;

	function binarySearch(a, b, maxIter) {
	var mid = (a + b) / 2;
	if (maxIter <= 0 \|\| b - a < epsilon) {
	return mid;
	}
	var query = "(" + property + ":" + mid + unit + ")";
	if (matchMedia(query).matches) {
	return binarySearch(mid, b, maxIter - 1);
	} else {
	return binarySearch(a, mid, maxIter - 1);
	}
	}
	};

	/**
	* Generate detection function
	* @private
	*/
	var detectFunction = (function () {
	var func = fallback;
	//IE8+
	if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
	func = ie8;
	}
	// IE10+ / Touch
	else if (window.navigator.msMaxTouchPoints) {
	func = ie10;
	}
	//chrome
	else if(!!window.chrome && !(!!window.opera \|\| navigator.userAgent.indexOf(' Opera') >= 0)){
	func = chrome;
	}
	//safari
	else if(Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0){
	func = safari;
	}
	//Mobile Webkit
	else if ('orientation' in window && 'webkitRequestAnimationFrame' in window) {
	func = webkitMobile;
	}
	//WebKit
	else if ('webkitRequestAnimationFrame' in window) {
	func = webkit;
	}
	//Opera
	else if (navigator.userAgent.indexOf('Opera') >= 0) {
	func = opera11;
	}
	//Last one is Firefox
	//FF 18.x
	else if (window.devicePixelRatio) {
	func = firefox18;
	}
	//FF 4.0 - 17.x
	else if (firefox4().zoom > 0.001) {
	func = firefox4;
	}

	return func;
	}());


	return ({

	/**
	* Ratios.zoom shorthand
	* @return {Number} Zoom level
	*/
	zoom: function () {
	return detectFunction().zoom;
	},

	/**
	* Ratios.devicePxPerCssPx shorthand
	* @return {Number} devicePxPerCssPx level
	*/
	device: function () {
	return detectFunction().devicePxPerCssPx;
	}
	});
	}));

	var wpcom_img_zoomer = {
	zoomed: false,
	timer: null,
	interval: 1000, // zoom polling interval in millisecond

	// Should we apply width/height attributes to control the image size?
	imgNeedsSizeAtts: function( img ) {
	// Do not overwrite existing width/height attributes.
	if ( img.getAttribute('width') !== null \|\| img.getAttribute('height') !== null )
	return false;
	// Do not apply the attributes if the image is already constrained by a parent element.
	if ( img.width < img.naturalWidth \|\| img.height < img.naturalHeight )
	return false;
	return true;
	},

	init: function() {
	var t = this;
	try{
	t.zoomImages();
	t.listenForChangesToDom();
	//t.timer = setInterval( function() { t.zoomImages(); }, t.interval );
	}
	catch(e){
	}
	},

	listenForChangesToDom: function(){

	var t = this;

	var MutationObserver = window.MutationObserver \|\| window.WebKitMutationObserver \|\| window.MozMutationObserver;

	var observer = new MutationObserver( function( mutations ) {

	mutations.forEach( function( mutation ) {

	if( 'childList' === mutation.type ) {
	var numOfAddedNodes = mutation.addedNodes.length;
	// console.log( numOfAddedNodes );
	for( var i = 0; i < numOfAddedNodes; i++ ) {
	// ignore any script and iframes and anything that is not a tag
	if( typeof mutation.addedNodes[i].tagName != 'undefined'
	&& mutation.addedNodes[i].tagName != 'SCRIPT'
	&& mutation.addedNodes[i].tagName != 'IFRAME' ) {
	t.zoomImagesInDom( mutation.addedNodes[i] );
	}
	}

	}
	} ); // end of for reach
	} );

	if( 'object' === typeof observer ) {
	// look at only the childList and the subtree changes
	var config = { attributes: false, childList: true, characterData: false, subtree: true }
	observer.observe( window.document.body, config );
	} else {
	try{
	// If the browser doesn't suppor the new DOM observer
	// lets try the zoomImages() method every interval
	// todo: check if IE support passing setInterval function call.
	t.timer = setInterval( function() { t.zoomImages(); }, t.interval );
	}
	catch(e){
	}

	}
	},

	stop: function() {
	if ( this.timer )
	clearInterval( this.timer );
	},

	getScale: function() {
	var scale = detectZoom.device();
	// Round up to 1.5 or the next integer below the cap.
	if ( scale <= 1.0 ) scale = 1.0;
	else if ( scale <= 1.5 ) scale = 1.5;
	else if ( scale <= 2.0 ) scale = 2.0;
	else if ( scale <= 3.0 ) scale = 3.0;
	else if ( scale <= 4.0 ) scale = 4.0;
	else scale = 5.0;
	return scale;
	},

	shouldZoom: function( scale ) {
	var t = this;
	// Do not operate on hidden frames.
	if ( "innerWidth" in window && !window.innerWidth )
	return false;
	// Don't do anything until scale > 1
	if ( scale == 1.0 && t.zoomed == false )
	return false;
	return true;
	},
	zoomImagesInDom: function( dom ) {

	var t = this;
	var scale = t.getScale();
	if ( ! t.shouldZoom( scale ) ){
	return;
	}
	t.zoomed = true;
	// Loop through all the <img> elements on the page.
	var imgs = dom.getElementsByTagName("img");

	for ( var i = 0; i < imgs.length; i++ ) {
	try {
	t.maybeScaleImage( imgs[i], scale );
	} catch(e) {}
	}
	},
	zoomImages: function() {
	var t = this;

	t.zoomImagesInDom( document );
	},
	maybeScaleImage: function ( img, scale ){
	var t = this;

	// Wait for original images to load
	if ( "complete" in img && ! img.complete ){

	// lets try the same image in a little bit
	setTimeout( function() { t.maybeScaleImage( img, scale ) } , 100 );
	return;
	}

	// Skip images that don't need processing.
	var imgScale = img.getAttribute("scale");
	if ( imgScale == scale \|\| imgScale == "0" )
	return;

	// Skip images that have already failed at this scale
	var scaleFail = img.getAttribute("scale-fail");
	if ( scaleFail && scaleFail <= scale )
	return;

	// Skip images that have no dimensions yet.
	if ( ! ( img.width && img.height ) )
	return;

	// Skip images from Lazy Load plugins
	if ( ! imgScale && img.getAttribute("data-lazy-src") && (img.getAttribute("data-lazy-src") !== img.getAttribute("src")))
	return;

	if ( t.scaleImage( img, scale ) ) {
	// Mark the img as having been processed at this scale.
	img.setAttribute("scale", scale);
	}
	else {
	// Set the flag to skip this image.
	img.setAttribute("scale", "0");
	}
	},

	scaleImage: function( img, scale ) {

	var t = this;
	var newSrc = img.src;

	// Skip slideshow images
	if ( img.parentNode.className.match(/slideshow-slide/) )
	return false;

	// Scale gravatars that have ?s= or ?size=
	if ( img.src.match( /^https?:\/\/([^\/]*\.)?gravatar\.com\/.+[?&](s\|size)=/ ) ) {
	newSrc = img.src.replace( /([?&](s\|size)=)(\d+)/, function( $0, $1, $2, $3 ) {
	// Stash the original size
	var originalAtt = "originals",
	originalSize = img.getAttribute(originalAtt);
	if ( originalSize === null ) {
	originalSize = $3;
	img.setAttribute(originalAtt, originalSize);
	if ( t.imgNeedsSizeAtts( img ) ) {
	// Fix width and height attributes to rendered dimensions.
	img.width = img.width;
	img.height = img.height;
	}
	}
	// Get the width/height of the image in CSS pixels
	var size = img.clientWidth;
	// Convert CSS pixels to device pixels
	var targetSize = Math.ceil(img.clientWidth * scale);
	// Don't go smaller than the original size
	targetSize = Math.max( targetSize, originalSize );
	// Don't go larger than the service supports
	targetSize = Math.min( targetSize, 512 );
	return $1 + targetSize;
	});
	}

	// Scale resize queries (*.files.wordpress.com) that have ?w= or ?h=
	else if ( img.src.match( /^https?:\/\/([^\/]+)\.files\.wordpress\.com\/.+[?&][wh]=/ ) ) {
	if ( img.src.match( /[?&]crop/ ) )
	return false;
	var changedAttrs = {};
	var matches = img.src.match( /([?&]([wh])=)(\d+)/g );
	for ( var i = 0; i < matches.length; i++ ) {
	var lr = matches[i].split( '=' );
	var thisAttr = lr[0].replace(/[?&]/g, '' );
	var thisVal = lr[1];

	// Stash the original size
	var originalAtt = 'original' + thisAttr, originalSize = img.getAttribute( originalAtt );
	if ( originalSize === null ) {
	originalSize = thisVal;
	img.setAttribute(originalAtt, originalSize);
	if ( t.imgNeedsSizeAtts( img ) ) {
	// Fix width and height attributes to rendered dimensions.
	img.width = img.width;
	img.height = img.height;
	}
	}
	// Get the width/height of the image in CSS pixels
	var size = thisAttr == 'w' ? img.clientWidth : img.clientHeight;
	var naturalSize = ( thisAttr == 'w' ? img.naturalWidth : img.naturalHeight );
	// Convert CSS pixels to device pixels
	var targetSize = Math.ceil(size * scale);
	// Don't go smaller than the original size
	targetSize = Math.max( targetSize, originalSize );
	// Don't go bigger unless the current one is actually lacking
	if ( scale > img.getAttribute("scale") && targetSize <= naturalSize )
	targetSize = thisVal;
	// Don't try to go bigger if the image is already smaller than was requested
	if ( naturalSize < thisVal )
	targetSize = thisVal;
	if ( targetSize != thisVal )
	changedAttrs[ thisAttr ] = targetSize;
	}
	var w = changedAttrs.w \|\| false;
	var h = changedAttrs.h \|\| false;

	if ( w ) {
	newSrc = img.src.replace(/([?&])w=\d+/g, function( $0, $1 ) {
	return $1 + 'w=' + w;
	});
	}
	if ( h ) {
	newSrc = newSrc.replace(/([?&])h=\d+/g, function( $0, $1 ) {
	return $1 + 'h=' + h;
	});
	}
	}

	// Scale mshots that have width
	else if ( img.src.match(/^https?:\/\/([^\/]+\.)*(wordpress\|wp)\.com\/mshots\/.+[?&]w=\d+/) ) {
	newSrc = img.src.replace( /([?&]w=)(\d+)/, function($0, $1, $2) {
	// Stash the original size
	var originalAtt = 'originalw', originalSize = img.getAttribute(originalAtt);
	if ( originalSize === null ) {
	originalSize = $2;
	img.setAttribute(originalAtt, originalSize);
	if ( t.imgNeedsSizeAtts( img ) ) {
	// Fix width and height attributes to rendered dimensions.
	img.width = img.width;
	img.height = img.height;
	}
	}
	// Get the width of the image in CSS pixels
	var size = img.clientWidth;
	// Convert CSS pixels to device pixels
	var targetSize = Math.ceil(size * scale);
	// Don't go smaller than the original size
	targetSize = Math.max( targetSize, originalSize );
	// Don't go bigger unless the current one is actually lacking
	if ( scale > img.getAttribute("scale") && targetSize <= img.naturalWidth )
	targetSize = $2;
	if ( $2 != targetSize )
	return $1 + targetSize;
	return $0;
	});
	}

	// Scale simple imgpress queries (s0.wp.com) that only specify w/h/fit
	else if ( img.src.match(/^https?:\/\/([^\/.]+\.)*(wp\|wordpress)\.com\/imgpress\?(.+)/) ) {
	var imgpressSafeFunctions = ["zoom", "url", "h", "w", "fit", "filter", "brightness", "contrast", "colorize", "smooth", "unsharpmask"];
	// Search the query string for unsupported functions.
	var qs = RegExp.$3.split('&');
	for ( var q in qs ) {
	q = qs[q].split('=')[0];
	if ( imgpressSafeFunctions.indexOf(q) == -1 ) {
	return false;
	}
	}
	// Fix width and height attributes to rendered dimensions.
	img.width = img.width;
	img.height = img.height;
	// Compute new src
	if ( scale == 1 )
	newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?');
	else
	newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?zoom=' + scale + '&');
	}

	// Scale LaTeX images or Photon queries (i#.wp.com)
	else if (
	img.src.match(/^https?:\/\/([^\/.]+\.)*(wp\|wordpress)\.com\/latex\.php\?(latex\|zoom)=(.+)/) \|\|
	img.src.match(/^https?:\/\/i[\d]{1}\.wp\.com\/(.+)/)
	) {
	// Fix width and height attributes to rendered dimensions.
	img.width = img.width;
	img.height = img.height;
	// Compute new src
	if ( scale == 1 )
	newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?');
	else
	newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?zoom=' + scale + '&');
	}

	// Scale static assets that have a name matching -1x.png or @1x.png
	else if ( img.src.match(/^https?:\/\/[^\/]+\/.*[-@]([12])x\.(gif\|jpeg\|jpg\|png)(\?\|$)/) ) {
	// Fix width and height attributes to rendered dimensions.
	img.width = img.width;
	img.height = img.height;
	var currentSize = RegExp.$1, newSize = currentSize;
	if ( scale <= 1 )
	newSize = 1;
	else
	newSize = 2;
	if ( currentSize != newSize )
	newSrc = img.src.replace(/([-@])[12]x\.(gif\|jpeg\|jpg\|png)(\?\|$)/, '$1'+newSize+'x.$2$3');
	}

	else {
	// console.log( 'Failed to scale image', newSrc);
	return false;
	}

	// Don't set img.src unless it has changed. This avoids unnecessary reloads.
	if ( newSrc != img.src ) {
	// Store the original img.src
	var prevSrc, origSrc = img.getAttribute("src-orig");
	if ( !origSrc ) {
	origSrc = img.src;
	img.setAttribute("src-orig", origSrc);
	}
	// In case of error, revert img.src
	prevSrc = img.src;
	img.onerror = function(){
	img.src = prevSrc;
	if ( img.getAttribute("scale-fail") < scale )
	img.setAttribute("scale-fail", scale);
	img.onerror = null;
	};
	// Finally load the new image
	img.src = newSrc;
	}
	// console.log( 'scaled image', newSrc);
	return true;
	}
	};

	wpcom_img_zoomer.init();