Fixes, Perf improvements & Would like ideas about thumbnail generation data structure

Batch adding all stuff to the dial at once from a preparation array, refactoring and perf improvements all over, also done the .prop() migration so everything is unified and jQuery v2 style.

Mainly I'm wondering if anyone has any good ideas on how to detect or mark what dial would need updating if I implement thumbnailing?
You can put the following code in the eventPage.js and have it log all the websites to localstorage, but I've been trying to figure out a way to make the data-format or JSON object to hold the info and how to to check or trigger thumbnail refresh in some way because I am really unsure of how to make the JSON layout to store the right info to check for to get the thumbnail logic working.


```javascript
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
	if (tab.selected && tab.status == "complete") {
		chrome.tabs.captureVisibleTab(null, {format:"png"}, function(dataUrl) {
			var image = new Image();
			image.src = dataUrl;
			image.onload = function () {
				var canvas = document.createElement("canvas");
				var width = image.width /2;
				var height = image.height /2;
				canvas.width = width;
				//canvas.width = height * (4/3); // Auto-sizes to 4:3 aspect ratio
				canvas.height = height;
				var ctx = canvas.getContext("2d");
				ctx.drawImage(image, 0, 0, width, height);
				localStorage.setItem(tab.url, canvas.toDataURL("image/webp", 0.6));
			};
		});
	}
});
```


Maybe this?

```javascript
{
    "url1": {
        "data": "data:image/webp;base64",
        "refresh": 1 (or boolean true)
    },
    "url2": {
        "data": "data:image/webp;base64",
        "refresh": 1 (or boolean true)
    },
    "url3": {
        "data": "data:image/webp;base64",
        "refresh": 1 (or boolean true)
    }
}
```