var font = require('./font.json'),
	Theme = require('./theme');

var FONT_CLASS = 'tfa';
var dp;

function IconButton(size, icon, tooltip, dp) {
	var button = document.createElement('button');
	button.className = FONT_CLASS;

	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');

	button.appendChild(canvas);

	this.ctx = ctx;
	this.dom = button;
	this.canvas = canvas;

	var me = this;
	this.size = size;

	this.resize = function() {
		var dpr = window.devicePixelRatio;
		var height = size;

		var glyph = font.fonts[icon];

		canvas.height = height * dpr;
		canvas.style.height = height + 'px';

		var scale = height / font.unitsPerEm;
		var width = glyph.advanceWidth * scale + 0.5 | 0;

		canvas.width = width * dpr;
		canvas.style.width = width + 'px';

		ctx.fillStyle = Theme.c;
		me.draw();
	};
	if (dp) dp.on('resize', this.resize);

	this.setSize = function(s) {
		size = s;
		this.resize();
	};

	this.setIcon = function(icon) {
		me.icon = icon;

		if (!font.fonts[icon]) console.warn('Font icon not found!');
		this.resize();
	};

	this.onClick = function(e) {
		button.addEventListener('click', e);
	};

	var LONG_HOLD_DURATION = 500;
	var longHoldTimer;

	this.onLongHold = function(e) {
		
	};


	button.addEventListener('mousedown', function(e) {
		e.preventDefault();
		e.stopPropagation();
		longHoldTimer = setTimeout(function() {
			if (longHoldTimer) {
				console.log('LONG HOLD-ED!');
				clearTimeout(longHoldTimer);
			}
		}, LONG_HOLD_DURATION);
	});

	function clearLongHoldTimer() {
		clearTimeout(longHoldTimer);
	}
	
	button.addEventListener('mouseup', clearLongHoldTimer);
	button.addEventListener('mouseout', clearLongHoldTimer);


	this.setTip = function(tip) {
		tooltip = tip;
	};

	button.addEventListener('mouseover', function() {
		ctx.fillStyle = Theme.d;
		me.draw();

		if (tooltip && dp) dp.fire('status', 'button: ' + tooltip);
	});

	button.addEventListener('mousedown', function() {
		ctx.fillStyle = Theme.b;
		me.draw();
	});

	button.addEventListener('mouseup', function() {
		ctx.fillStyle = Theme.d;
		me.draw();
	});

	button.addEventListener('mouseout', function() {
		ctx.fillStyle = Theme.c;
		me.draw();
	});

	if (icon) this.setIcon(icon);
}

IconButton.prototype.CMD_MAP = {
	M: 'moveTo',
	L: 'lineTo',
	Q: 'quadraticCurveTo',
	C: 'bezierCurveTo',
	Z: 'closePath'
};

IconButton.prototype.draw = function() {
	if (!this.icon) return;

	var ctx = this.ctx;
	ctx.save();

	var glyph = font.fonts[this.icon];

	var height = this.size;
	var dpr = window.devicePixelRatio;
	var scale = height / font.unitsPerEm * dpr;
	var path_commands =  glyph.commands.split(' ');

	ctx.clearRect(0, 0, this.canvas.width * dpr, this.canvas.height * dpr);
	ctx.scale(scale, -scale);
	ctx.translate(0, -font.ascender);
	ctx.beginPath();

	for (var i = 0, il = path_commands.length; i < il; i++) {
		var cmds = path_commands[i].split(',');
		var params = cmds.slice(1);

		ctx[this.CMD_MAP[cmds[0]]].apply(ctx, params);
	}
	ctx.fill();
	ctx.restore();
};

module.exports = IconButton;
@@ -1227,74 +1227,76 @@
 ion(
-e
+f
 ) %7B%0A%09%09
-%0A%09%7D;%0A%0A%0A%09button.addEventListener('mousedown', function
+// not most elagent but oh wells.%0A%09%09function startHold
 (e) %7B%0A
+%09
 %09%09e.
@@ -1315,16 +1315,17 @@
 lt();%0A%09%09
+%09
 e.stopPr
@@ -1337,16 +1337,17 @@
 tion();%0A
+%09
 %09%09longHo
@@ -1383,16 +1383,17 @@
 () %7B%0A%09%09%09
+%09
 if (long
@@ -1401,24 +1401,25 @@
 oldTimer) %7B%0A
+%09
 %09%09%09%09console.
@@ -1448,42 +1448,21 @@
 %09%09%09%09
-clearTimeout(longHoldTimer
+%09f(
 );%0A%09%09%09
+%09
 %7D%0A
+%09
 %09%09%7D,
@@ -1484,21 +1484,21 @@
 TION);%0A%09
+%09
 %7D
-);
 %0A%0A
+%09
 %09functio
@@ -1522,16 +1522,17 @@
 mer() %7B%0A
+%09
 %09%09clearT
@@ -1558,13 +1558,119 @@
 r);%0A
+%09
 %09%7D%0A%09
+%09
 %0A
+%09%09button.addEventListener('mousedown', startHold);%0A%09%09button.addEventListener('touchstart', startHold);%0A%09
 %09but
@@ -1722,16 +1722,17 @@
 Timer);%0A
+%09
 %09button.
@@ -1781,16 +1781,78 @@
 Timer);%0A
+%09%09button.addEventListener('touchend', clearLongHoldTimer);%0A%09%7D;
 %0A%0A%09this.

Make long press/hold work with touch