/* global Module */

/* Magic Mirror
 * Module: MMM-RandomPhoto
 *
 * By Diego Vieira <diego@protos.inf.br>
 * ICS Licensed.
 */

Module.register("MMM-RandomPhoto",{
	defaults: {
		opacity: 0.3,
		animationSpeed: 500,
		updateInterval: 60,
		url: 'https://unsplash.it/1920/1080/?random'
	},

        start: function() {
                var self = this;
                self.tag = $('<img />');
                self.tag.on('load', function() {
                                $('#mmm-photos-placeholder1').attr('src', self.tag.attr('src')).animate({
                                        opacity: self.config.opacity
                                }, self.config.animationSpeed, function() {
                                        $(this).attr('id', 'mmm-photos-placeholder2');
                                });

                                $('#mmm-photos-placeholder2').animate({
                                        opacity: 0
                                }, self.config.animationSpeed, function() {
                                        $(this).attr('id', 'mmm-photos-placeholder1');
                                });
                });
				self.load();
        },

        load: function() {
                var self = this;
                var url = self.config.url + (self.config.url.indexOf('?') > -1 ? '&' : '?') + (new Date().getTime());
                self.tag.attr('src', url);
                setTimeout(function() {
                        self.load();
                }, (self.config.updateInterval * 1000));

        },

	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.style = "position:absolute; width:100%; height:100%"
		wrapper.innerHTML = '<img id="mmm-photos-placeholder1" style="opacity: 0; max-height: 100%; max-width:100%; margin-left: auto; margin-right: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" /><img id="mmm-photos-placeholder2" style="opacity: 0; max-height: 100%; max-width:100%; margin-left: auto; margin-right: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />';
		return wrapper;
	},
	getScripts: function() {
    return [
			this.file('node_modules/jquery/dist/jquery.min.js')
    ]
	}
});