(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ?
		module.exports = factory() :
		typeof define === 'function' && define.amd ? define(factory) :
			(global = typeof globalThis !== 'undefined' ? globalThis :
				global || self, global.mapboxgl1.CanvasLayer = factory());
}(window,(function(){

	function loadAllImages(imgUrls) {
		var _load = function (imgUrl) {
			//创建img标签
			var img = new Image();
			img.src = imgUrl;
			//跨域选项
			img.setAttribute('crossOrigin', 'Anonymous');
			return new Promise((resolve, reject) => {
				//文件加载完毕
				img.onload = function () {
					resolve(img);
				};
				//文件加载失败处理
				img.onerror = function () {
					console.log(imgUrl);
					reject();
				};
			});
		};
		var _loadAll = function (imgUrls) {
			var loadedImageUrls = [];
			for (var i = 0, len = imgUrls.length; i < len; i++) {
				loadedImageUrls.push(_load(imgUrls[i]));
			}
			return loadedImageUrls;
		};
		return Promise.all(_loadAll(imgUrls));
	}

	function generateUUID() {
		let d = new Date().getTime();
		let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			let r = (d + Math.random()*16)%16 | 0;
			d = Math.floor(d/16);
			return (c=='x' ? r : (r&0x3|0x8)).toString(16);
		});
		return uuid;
	}

	return class CanvasLayer {
		id=null;
		map=null;
		images=[];
		type="raster";
		canvas=null;
		params=null;
		index=0;
		loaded=false;
		constructor(options={id:'',canvasId:'',bbox:undefined,images:undefined,width:undefined,height:undefined,callback:()=>{}}) {
			this.canvas = document.getElementById(options.canvasId);
			if(!(this.canvas)) {
				this.canvas  = document.createElement('canvas');
				this.canvas.setAttribute("id", options.canvasId || generateUUID());
			}
			if(!(options.images.length)) console.warn(`Please set the photo set! → images:${options.images}`);
			if(!(options.bbox)) console.warn(`Please set the bbox! → images:${options.bbox}`);
			if(!options.width || !options.height) console.warn(`Please set the canvas width and height! → width:${options.width};height:${options.height}`);
			this.params = options;
			this.id = options.id || generateUUID();
			loadAllImages(options.images).then(res => this.images = res, this.loaded = true,options.callback && options.callback());
		}

		remove(){
			if(!this.map) return console.warn(`Please trigger "addTo" This method is called after the "map" instance is passed in;`);
			let layer = this.map.getLayer(this.id);
			if(!layer) return console.warn(`The current layer has not been added to the map;`);
			this.map.removeLayer(this.id);
			this.map.removeSource(this.id);
		}

		addTo(map){
			if(!map) return console.warn(`Configure the map instance;`);
			this.map = map;
			if(!this.params.bbox || !this.params.bbox.length) return console.error(`The current object is missing important parameters. Please add them and trigger the method again; url:${this.params.url};url:${this.params.layers}`);
			let coordinates = [
				[this.params.bbox[0],this.params.bbox[3]],
				[this.params.bbox[2],this.params.bbox[3]],
				[this.params.bbox[2],this.params.bbox[1]],
				[this.params.bbox[0],this.params.bbox[1]],
			];
			this.map.addSource(this.id, {'type':'canvas',coordinates,canvas:this.canvas,animate:true});
			this.map.addLayer({'id':this.id, 'type':this.type, 'source': this.id});
		}

		show(){
			this.setLayerParams({visibility:'visible'});
		}

		hide(){
			this.setLayerParams({visibility:'none'});
		}

		setOpacity(opacity){
			this.setLayerParams({},{'raster-opacity':opacity});
		}

		async setInitializeParams(params={}){
			this.loaded = false;
			this.params = Object.assign(this.params,params);
			let res = await loadAllImages(this.params.images);
			if(this.params.bbox) this.map.getSource(this.id).setCoordinates([[this.params.bbox[0],this.params.bbox[3]], [this.params.bbox[2],this.params.bbox[3]], [this.params.bbox[2],this.params.bbox[1]], [this.params.bbox[0],this.params.bbox[1]]]);
			this.images = res;
			this.loaded = true;
			this.index= 0;
			params.callback && params.callback();
		}

		setLayerParams(layout={},paint={}){
			let layoutKeys = Object.keys(layout);
			let paintKeys = Object.keys(paint);
			layoutKeys.forEach(key => this.map.setLayoutProperty(this.id,key,layout[key]));
			paintKeys.forEach(key => this.map.setPaintProperty(this.id,key,paint[key]));
		}

		prev(time=1000){
			let flag =false;
			let opacity = 1;
			let step = 1;
			let stepNum = opacity / step;
			let interval = setInterval(()=> {
				if(!flag) opacity = Number((opacity - stepNum).toFixed(2));
				if(opacity == 0) flag = true,this.setIndex(this.index - 1);
				// console.log(opacity,this.index);
				if(flag) opacity = Number((opacity + stepNum).toFixed(2));
				this.refresh(opacity);
				if(opacity == 1) clearInterval(interval);
			},time / step);
		}

		next(time=1000){
			let flag =false;
			let opacity = 1;
			let step = 1;
			let stepNum = opacity / step;
			let interval = setInterval(()=> {
				if(!flag) opacity = Number((opacity - stepNum).toFixed(2));
				if(opacity == 0) flag = true,this.setIndex(this.index + 1);
				// console.log(opacity,this.index);
				if(flag) opacity = Number((opacity + stepNum).toFixed(2));
				this.refresh(opacity);
				if(opacity == 1) clearInterval(interval);
			},time / step);
		}

		setIndex(index){
			index = index<0?this.params.images.length-1:index;
			index = this.params.images.length<=index?0:index;
			this.index = index;
		}

		refresh(alpha=1){
			if(!this.loaded) return;
			this.canvas.width = this.params.width;
			this.canvas.height = this.params.height;
			let context = this.canvas.getContext('2d');
			context.globalAlpha = alpha;
			context.drawImage(this.images[this.index], 0, 0, this.params.width, this.params.height);
		}
	}
})));