/**
 * Icon for backround page.
 */
 /* global  window,
            document,
            chrome
                      */
'use strict';

var icon = (function() {
	var canvas, context, w, h;
	var px = (window.devicePixelRatio > 1) ? 2 : 1;
	h = w = px * 128;

	canvas = document.createElement('canvas');
	canvas.width = w;
	canvas.height = h;
	context = canvas.getContext('2d');

	/**
	 * Replace icon
	 */
	var replaceIcon = function() {
		//console.log(canvas.toDataURL('image/png'));
		if (chrome.browserAction) {
			chrome.browserAction.setIcon({
				path : canvas.toDataURL('image/png')
			});
		} else {
			//fallback for demo page
			document.getElementById('chrome.popup.icon').setAttribute('src', canvas.toDataURL('image/png'));
		}
	};

	/**
	 * Size
	 */
	var size = function(value) {
		return Math.round((value / 4) * (w / 8));
	};
	/**
	 * Generate icon by values
	 * @param {Object} values
	 */
	var generate = function(eq) {
		var val, i
      , values = [];
		
    for (i = 0; i < 3; i++) {
			val = (parseFloat(eq[i * 3 + 1].gain, 10) + parseFloat(eq[i * 3 + 2].gain, 10) + parseFloat(eq[i * 3 + 3].gain, 10));
			val = (val !== 0) ? val / 3 : 0;
			val = Math.floor((val / 12) * 10);
			values.push(val);
		}
		//clear icon
		//console.log(values, eq);
		context.beginPath();
		context.clearRect(0, 0, size(32), size(32));
		context.closePath();
		//draw value by value
		var lines = [5, 15, 25];

		for ( i = 0; i < values.length; i++) {
			val = values[i];
			context.beginPath();
			context.fillStyle = 'rgb(120,120,120)';
			context.fillRect(size(lines[i]), size(0), size(3), size(11 - val));
			context.fill();
			context.closePath();

			context.beginPath();
			context.fillStyle = 'rgb(120,120,120)';
			context.fillRect(size(lines[i]), size(22 - val), size(3), size(10 + val));
			context.fill();
			context.closePath();

			context.beginPath();
			context.fillStyle = 'rgb(50,90,140)';
			context.fillRect(size(lines[i] - 2), size(13 - val), size(7), size(7));
			context.fill();
			context.closePath();

		}

		//replace icon
		replaceIcon();
	};

	//public methods
	return {
		generate : generate,
	};
})();

@@ -29,17 +29,16 @@
 ge.%0A */%0A
- 
 /* globa
@@ -53,69 +53,26 @@
 w,%0A 
-           document,%0A            chrome%0A                     
+document,%0A chrome%0A
  */%0A
@@ -551,147 +551,8 @@
 %7D);%0A
-%09%09%7D else %7B%0A%09%09%09//fallback for demo page%0A%09%09%09document.getElementById('chrome.popup.icon').setAttribute('src', canvas.toDataURL('image/png'));%0A
 %09%09%7D%0A
@@ -745,16 +745,24 @@
 ction(eq
+, status
 ) %7B%0A%09%09va
@@ -773,15 +773,8 @@
 l, i
-%0A      
 , va
@@ -788,20 +788,17 @@
 %5B%5D;%0A
+%0A
 %09%09
-%0A    
 for (
+ 
 i = 
@@ -1322,32 +1322,74 @@
 text.fillStyle =
+ (status == 'off' ? 'rgb(160, 160, 160)' :
  'rgb(120,120,12
@@ -1378,33 +1378,36 @@
  : 'rgb(120,
+ 
 120,
+ 
 120)'
+)
 ;%0A%09%09%09context
@@ -1553,24 +1553,66 @@
 .fillStyle =
+ (status == 'off' ? 'rgb(160, 160, 160)' :
  'rgb(120,12
@@ -1613,17 +1613,20 @@
 120,
+ 
 120,
+ 
 120)'
+)
 ;%0A%09%09
@@ -1791,16 +1791,58 @@
 lStyle =
+ (status == 'off' ? 'rgb(140, 140, 140)' :
  'rgb(50
@@ -1850,16 +1850,17 @@
 90,140)'
+)
 ;%0A%09%09%09con

Add status param to have enabled/disabled icon