'use strict';

/**
 * Parallax component
 *
 * @type {jQuery}
 * @param {int} data-speed - aspect of the motion
 * @param {string} data-start - from where start to render motion. Values: [page|top|center]
 * @example
 * <canvas data-parallax data-speed="4" data-start="page">
 *    <picture>
 *       <source media="(max-width: 768px)" srcset="images/homepage/hp-carousel-slide-1-sm.jpg?$staticlink$">
 *       <img alt="receipt banner" src="images/homepage/hp-carousel-slide-1-lg.jpg?$staticlink$" />
 *    </picture>
 * </canvas>
 */

var $ = require('jquery'),
    scrollListener = require('_core_ext/scroll-listener');

var $cache = {},
    instances = [];

/**
 * Creates new Parallax object
 * @constructor
 *
 * @param {object} canvas - DOM node. `canvas` is expected
 * @param {string} src - image src URI string
 * @param {int} top - position from the top of the instance
 * @param {object} options - options object
 */
var Parallax = function (canvas, src, top, options) {
    this.canvas = canvas[0];
    this.context = this.canvas.getContext('2d');
    this.options = options;
    this.src = src;
    this.top = top;
    this.preloadImg();
};

/**
 * @function
 * @description preload image from picture source
 */
Parallax.prototype.preloadImg = function () {
    var self = this;
    this.image = new Image();
    this.image.onload = function () {
        self.initSize();
        self.loaded = true;
        self.prerender();
    };
    this.image.src = this.src;
};

/**
 * @function
 * @description set sizes of loaded image to canvas element
 */
Parallax.prototype.initSize = function () {
    this.canvas.width = this.image.width;
    this.canvas.height = this.image.height;
};

/**
 * @function
 * @description prerended image on canvas
 */
Parallax.prototype.prerender = function () {
    if (!this.loaded) {
        return false;
    }

    this.context.drawImage(this.image, 0, 0);
};

/**
 * @function
 * @description render image on canvas according to scroll position
 * @param {int} scrollTop - scrolled position
 */
Parallax.prototype.render = function (scrollTop) {
    var start;

    if (!this.loaded || scrollTop > this.top + this.image.height) {
        return false;
    }

    switch (this.options.start) {
    case 'page':
        start = 0;
        break;
    case 'middle':
        start = this.canvas.getBoundingClientRect().top;
        break;
    default:
        start = this.top;
    }

    if (scrollTop >= start) {
        var localScroll = scrollTop - start;
        this.context.clearRect(0, 0, this.image.width, this.image.height);
        this.context.drawImage(this.image, 0, localScroll / this.options.speed);
    }
};

$.fn.parallax = function () {
    $(this).each(function () {
        var $this = $(this);
        var src = $this.find('img')[0].currentSrc || $this.find('img')[0].src;
        var top = $this.offset().top;
        var options = {
            speed: $this.attr('data-speed') || 2,
            start: $this.attr('data-start') || 'top'
        };

        instances.push(new Parallax($this, src, top, options));
    });

    return this;
};

/*
 * Initialize Cache
 */
function initializeCache() {
    $cache.document = $(document);
    $cache.canvas = $('canvas[data-parallax]');
}

/*
 * Initialize DOM
 */
function initializeDOM() {
    $cache.canvas.parallax();
}

/*
 * Initialize Events
 */
function initializeEvents() {
    window.onload = function () {
        instances.forEach(function (inst) {
            inst.prerender();
        });
    };

    instances.forEach(function (inst) {
        scrollListener.registerHandler(function () {
            inst.render(scrollY);
        });
    });

    $cache.document.on('window.modechanged', function() {
        initializeDOM();
    });
}

module.exports = {
    init: function () {
        initializeCache();
        initializeDOM();
        initializeEvents();
    }
};