/*!

* jQuery & Zepto Lazy - Picture Plugin - v1.3
* http://jquery.eisbehr.de/lazy/
*
* Copyright 2012 - 2017, Daniel 'Eisbehr' Kern
*
* Dual licensed under the MIT and GPL-2.0 licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl-2.0.html
*/

;(function($) {

var srcAttr = "data-src",
    srcsetAttr = "data-srcset",
    mediaAttr = "data-media",
    sizesAttr = "data-sizes",
    typeAttr = "data-type";
// loads picture elements like:
// <picture>
//   <data-src srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" media="(min-width: 600px)" type="image/jpeg"></data-src>
//   <data-src srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" media="(min-width: 400px)" type="image/jpeg"></data-src>
//   <data-img src="default.jpg" >
// </picture>
//
// or:
// <picture data-src="default.jpg">
//   <data-src srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" media="(min-width: 600px)" type="image/jpeg"></data-src>
//   <data-src srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" media="(min-width: 400px)" type="image/jpeg"></data-src>
// </picture>
//
// or just with attributes in one line:
// <picture data-src="default.jpg" data-srcset="1x.jpg 1x, 2x.jpg 2x, 3x.jpg 3x" data-media="(min-width: 600px)" data-sizes="" data-type="image/jpeg" />
$.lazy(["pic", "picture"], ["picture"], function(element, response) {
    var elementTagName = element[0].tagName.toLowerCase();
    if( elementTagName === "picture" ) {
        var sources = element.find(srcAttr),
            image = element.find("data-img"),
            imageBase = this.config("imageBase") || "";
        // handle as child elements
        if( sources.length ) {
            sources.each(function() {
                renameElementTag($(this), "source", imageBase);
            });
            // create img tag from child
            if( image.length === 1 ) {
                image = renameElementTag(image, "img", imageBase);
                // bind event callbacks to new image tag
                image.on("load", function() {
                    response(true);
                }).on("error", function() {
                    response(false);
                });
                image.attr("src", image.attr(srcAttr));
                if( this.config("removeAttribute") ) {
                    image.removeAttr(srcAttr);
                }
            }
            // create img tag from attribute
            else if( element.attr(srcAttr) ) {
                // create image tag
                createImageObject(element, imageBase + element.attr(srcAttr), response);
                if( this.config("removeAttribute") )
                    element.removeAttr(srcAttr);
            }
            // pass error state
            else {
                // use response function for Zepto
                response(false);
            }
        }
        // handle as attributes
        else if( element.attr(srcsetAttr) ) {
            // create source elements before img tag
            $("<source>").attr({
                media: element.attr(mediaAttr),
                sizes: element.attr(sizesAttr),
                type: element.attr(typeAttr),
                srcset: getCorrectedSrcSet(element.attr(srcsetAttr), imageBase)
            })
            .appendTo(element);
            // create image tag
            createImageObject(element, imageBase + element.attr(srcAttr), response);
            // remove attributes from parent picture element
            if( this.config("removeAttribute") ) {
                element.removeAttr(srcAttr + " " + srcsetAttr + " " + mediaAttr + " " + sizesAttr + " " + typeAttr);
            }
        }
        // pass error state
        else {
            // use response function for Zepto
            response(false);
        }
    }
    else {
        // pass error state
        // use response function for Zepto
        response(false);
    }
});
/**
 * create a new child element and copy attributes
 * @param {jQuery|object} element
 * @param {string} toType
 * @param {string} imageBase
 * @return {jQuery|object}
 */
function renameElementTag(element, toType, imageBase) {
    var attributes = element.prop("attributes"),
        target = $("<" + toType + ">");
    $.each(attributes, function(index, attribute) {
        // build srcset with image base
        if( attribute.name === "srcset" || attribute.name === srcAttr ) {
            attribute.value = getCorrectedSrcSet(attribute.value, imageBase);
        }
        target.attr(attribute.name, attribute.value);
    });
    element.replaceWith(target);
    return target;
}
/**
 * create a new image element inside parent element
 * @param {jQuery|object} parent
 * @param {string} src
 * @param {function} response
 * @return void
 */
function createImageObject(parent, src, response) {
    // create image tag
    var imageObj = $("<img>")
    // create image tag an bind callbacks for correct response
    .one("load", function() {
        response(true);
    })
    .one("error", function() {
        response(false);
    })
    // set into picture element
    .appendTo(parent)
    // set src attribute at last to prevent early kick-in
    .attr("src", src);
    // call after load even on cached image
    imageObj.complete && imageObj.load(); // jshint ignore : line
}
/**
 * prepend image base to all srcset entries
 * @param {string} srcset
 * @param {string} imageBase
 * @returns {string}
 */
function getCorrectedSrcSet(srcset, imageBase) {
    if( imageBase ) {
        // trim, remove unnecessary spaces and split entries
        var entries = srcset.split(",");
        srcset = "";
        for( var i = 0, l = entries.length; i < l; i++ ) {
            srcset += imageBase + entries[i].trim() + (i !== l - 1 ? "," : "");
        }
    }
    return srcset;
}

})(window.jQuery || window.Zepto);