const imageFrames =  function () {
	const defaults = {
		wedgeHeight: 50
	};
	
};

class ImageCanvasModule  {
	constructor(module) {
		this.originalElement = module;
		this.defaults = {
			wedgeHeight: 50
		};
		if(this.isVideo) {
			/*drawFrame has a check where it'll only draw on reqAnimationFrame if video.paused === false,
			so we need to fire drawFrame on both events because that boolean will be false when it's paused, thus cancelling the animation frame
			*/
			this.media.addEventListener('play', ()=>{
				this.drawOnCanvas();
			});

			this.media.addEventListener('pause', ()=> {
				this.drawOnCanvas();
			});
		}
	}

	get imageFrames() {
return {

		//all wedges draw paths clockwise: top right, bottom right, bottom left, top left
		wedgeTop: (wedgeHeight = this.defaults.wedgeHeight) => {
			var wedge = new Path2D();

			wedge.moveTo(this.dimensions.width, 0);
			wedge.lineTo(this.dimensions.width, this.dimensions.height);
			wedge.lineTo(0, this.dimensions.height);
			wedge.lineTo(0, wedgeHeight);
			wedge.closePath();
			this.frameContext.clip(wedge);
		},

		wedgeTopReverse: (wedgeHeight = this.defaults.wedgeHeight) => {
			var wedge = new Path2D();

			wedge.moveTo(this.dimensions.width, wedgeHeight);
			wedge.lineTo(this.dimensions.width, this.dimensions.height);
			wedge.lineTo(0, this.dimensions.height);
			wedge.lineTo(0, 0);
			wedge.closePath();
			this.frameContext.clip(wedge);

		},

		wedgeBottom: (wedgeHeight = this.defaults.wedgeHeight) => {
			const wedge = new Path2D();

			wedge.moveTo(this.dimensions.width, 0);
			wedge.lineTo(this.dimensions.width, this.dimensions.height - wedgeHeight);
			wedge.lineTo(0, this.dimensions.height);
			wedge.lineTo(0,0);
			wedge.lineTo(this.dimensions.width,0);
			wedge.closePath();
			this.frameContext.clip(wedge);
		},

		wedgeBottomReverse: (wedgeHeight = this.defaults.wedgeHeight) => {
			const wedge = new Path2D();

			wedge.moveTo(this.dimensions.width, 0);
			wedge.lineTo(this.dimensions.width, this.dimensions.height);
			wedge.lineTo(0, this.dimensions.height - wedgeHeight);
			wedge.lineTo(0, 0);
			wedge.closePath();
			this.frameContext.clip(wedge);
		}
	};
	}
	get isPicture() {
		return (this.originalElement.nodeName === 'PICTURE');
	}

	get isVideo() {
		return (this.originalElement.nodeName === 'VIDEO');
	}

	get isFitParent() {
		return this.originalElement.dataset.hasOwnProperty('fitparent');
	}

	get media() {
		return this.isPicture ? this.originalElement.querySelector('img') : this.originalElement;
	}

	get hasMatchMedia() {
		return (this.originalElement.dataset.matchmedia && this.originalElement.dataset.matchmedia.length > 1) ;
	}

	get matchMediaResult() {
		return window.matchMedia(this.originalElement.dataset.matchmedia).matches;
	}

	get context() {
		return this.canvas.getContext('2d');
	}

	get dimensions() {
		return {
			width: this.originalElement.offsetWidth,
			height: this.originalElement.offsetHeight
		};
	}

	getPictureFillSrc() {
		const style = this.media.currentStyle || window.getComputedStyle(this.media, false); // #IE11-2
		return style.backgroundImage.slice(4, -1).replace(/"/g,'');
	}

	getPictureFillMedia(src) {
		const img = new Image(this.dimensions.width, this.dimensions.height); // #IE11-3

		img.src = src;
		return img;
	}

	createCanvas () {
		let canvas = document.createElement('canvas');
		let frameCanvas = document.createElement('canvas');


		this.originalElement.parentNode.insertBefore(canvas, this.originalElement.nextSibling);
		canvas.className = this.originalElement.className;

		this.canvas = canvas;
		this.frameCanvas = frameCanvas;
		this.frameContext = this.frameCanvas.getContext('2d');
	}

	sizeParent () {
		if (this.hasMatchMedia && this.matchMediaResult ) {
			this.originalElement.parentElement.style.height = `${this.dimensions.height}px` ;
		}
		if (this.hasMatchMedia && !this.matchMediaResult) {
			this.originalElement.parentElement.style.height = null;
		}
	}

	sizeCanvas () {
		this.canvas.height = this.dimensions.height;
		this.canvas.width = this.dimensions.width;

		this.frameCanvas.height = this.dimensions.height;
		this.frameCanvas.width = this.dimensions.width;

		if (this.isFitParent) this.sizeParent();
	}

	drawFrame (media) { //#IE11-4 
		if (this.isVideo && media.paused) return false;
		if (this.hasMatchMedia && !this.matchMediaResult ) return false;

		let imageFrames = this.originalElement.dataset.imageFrame.split(',');

		imageFrames.forEach((imageFrame)=>{
			imageFrame = imageFrame.replace(/\s/g, '');
			if (imageFrame in this.imageFrames) this.imageFrames[imageFrame]();
			this.frameContext.globalCompositeOperation = 'copy';

		});

		var _this = this;
		var toggle = false; // toggle is used b/c we don't need 60fps. 30 will do.

		(function loop() {
			toggle= !toggle;
			/*Firefox and IE will show DOMException error b/c video hasn't fully loaded. Video will still play, though. so only start drawing when width > 0 */
			if (toggle && _this.dimensions.width > 0) {

				let x = 0;
				let width = _this.media.offsetWidth;
				let y = 0;

			_this.frameContext.drawImage(media, x, y, width, _this.canvas.height);
			_this.context.drawImage(_this.frameCanvas, x, y, width, _this.canvas.height);
			}
			_this.context.globalCompositeOperation = 'source-atop'; //smooths out jagged edges
			if (_this.isVideo) {
				window.requestAnimationFrame(loop);
			}

		})(); // this is an IIFE so that it will execute at least once
	}

	drawOnCanvas (media = this.media) { // #IE11-4 
		this.sizeCanvas();
		this.drawFrame(media);
	}

	hideOriginal () {
		//don't use display: none .... you can't get image dimensions when you do that.
		this.originalElement.style.opacity = 0;
	}

	initImageFrame (media = this.media) { // #IE11-4 
		this.drawOnCanvas(media);
		this.hideOriginal();
	}

}

// stuff unrelated to module
console.clear();

window.addEventListener('DOMContentLoaded', ()=> {
	var els = document.querySelectorAll('.canvasify');
	window.canvasified = [];

	// loop through and apply methods. I prefer `for of` but even with Babel, IE doesn't like it. #ThanksIE
	for (let i = 0; i < els.length; i++) {
		let el = els[i];
		
		// don't go applying anything unless there's an imageFrame attribute
		if (el.dataset.imageFrame) {
			let imageModule = new ImageCanvasModule(el);
			console.log(imageModule.originalElement.dataset);
			if (imageModule.originalElement.dataset.defaultsWedgeHeight) {
				imageModule.defaults.wedgeHeight = imageModule.originalElement.dataset.defaultsWedgeHeight;
			}
			
			imageModule.createCanvas();
			imageModule.initImageFrame();
			window.canvasified.push(imageModule);
	
			window.addEventListener('resize', ()=> {
				imageModule.drawOnCanvas(imageModule.media);
			})
		}

	}
	console.log(canvasified);
});