import templateString from './portrait.html';
import './portrait.less';

const getDOMfromString = (string) => {
	var div = document.createElement('div');
	div.innerHTML = string;
	return div.firstChild;
}

export default ({ id, name }) => {
	const state = {
		element: getDOMfromString(templateString),
		id,
		name
	}
	
	state.frontSource = require('../../images/'+name+'-front.jpg');
	state.backSource = require('../../images/'+name+'-back.jpg');
	
	state.element.querySelector('.Portrait-id').textContent = '#' + ('00' + id).substr(-3);
	
	const preloadFront = () => {
		const loader = state.element.querySelector('.Portrait-loader');
    	state.element.querySelector('.Portrait-mask').removeChild(loader);
		state.image.removeEventListener('load', preloadFront);
	    const frontImage = new Image();
	    frontImage.src = state.frontSource;
	}
	
	const unveil = () => {
		state.element.removeEventListener('unveil', unveil);
		const image = `<img src="${state.backSource}">`;
		state.image = getDOMfromString(image);
		state.image.addEventListener('load', preloadFront);
		state.element.appendChild(state.image);
	}
	state.element.addEventListener('unveil', unveil);
	
	const showFront = () => {
		state.image.setAttribute('src', state.frontSource);
	}
	
	const showBack = () => {
		state.image.setAttribute('src', state.backSource);
	}
	
    var mask = state.element.querySelector('.Portrait-mask');
	
	if ("ontouchstart" in window) {
	    mask.addEventListener('touchstart', () => {
			state.valseTimer = setTimeout(() => { showFront() }, 100);
		});
	    mask.addEventListener('touchleave', showBack);
	    mask.addEventListener('touchend', showBack);
	    mask.addEventListener('touchmove', () => {
			clearTimeout(state.valseTimer);
		});
	} else {
	    mask.addEventListener('mousedown', showFront);
	    mask.addEventListener('mouseleave', showBack);
	    mask.addEventListener('mouseup', showBack);
	}
	
	return state.element;
}

@@ -325,219 +325,396 @@
 ate.
-frontSource = require('../../images/'+name+'-front.jpg');%0A%09state.backSource = require('../../images/'+name+'-back.jpg');%0A%09%0A%09state.element.querySelector('.Portrait-id').textContent = '#' + ('00' + id).substr(-3);
+images = %5B480, 640, 800, 1080, 1280%5D.map(size =%3E %7B%0A%09%09return %7B%0A%09%09%09back: %60assets/$%7Bstate.name%7D-back-$%7Bsize%7Dw.jpg%60,%0A%09%09%09front: %60assets/$%7Bstate.name%7D-front-$%7Bsize%7Dw.jpg%60,%0A%09%09%09size%0A%09%09%7D%0A%09%7D);%0A%09%0A%09state.element.querySelector('.Portrait-id').textContent = '#' + ('00' + id).substr(-3);%0A%09%0A%09const getSrcset = (face) =%3E %7B%0A%09%09return state.images.map(image =%3E %60$%7Bimage%5Bface%5D%7D $%7Bimage.size%7Dw%60).join(',');%0A%09%7D
 %0A%09%0A%09
@@ -974,16 +974,58 @@
 mage();%0A
+%09%09frontImage.srcset = getSrcset('front');%0A
 %09    fro
@@ -1044,27 +1044,31 @@
 = state.
-frontSource
+images%5B0%5D.front
 ;%0A%09%7D%0A%09%0A%09
@@ -1157,46 +1157,170 @@
 nst 
-image = %60%3Cimg src=%22$%7Bstate.backSource%7D
+srcset = getSrcset('back');%0A%09%09const image = %60%3Cimg src=%22$%7Bstate.images%5B0%5D.back%7D%22 srcset=%22$%7Bsrcset%7D%22 sizes=%22(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw
 %22%3E%60;
@@ -1575,112 +1575,235 @@
 'src
-', state.frontSource);%0A%09%7D%0A%09%0A%09const showBack = () =%3E %7B%0A%09%09state.image.setAttribute('src', state.backSource
+set', getSrcset('front'));%0A%09%09state.image.setAttribute('src', state.images%5B0%5D.front);%0A%09%7D%0A%09%0A%09const showBack = () =%3E %7B%0A%09%09state.image.setAttribute('srcset', getSrcset('back'));%0A%09%09state.image.setAttribute('src', state.images%5B0%5D.back
 );%0A%09

Use srcset and sizes on img tags