--- a/booket.js	Wed Sep 17 21:12:38 2014 +0200
+++ b/booket.js	Thu Sep 18 20:28:09 2014 +0200
@@ -490,10 +490,10 @@
             if (this._tagCount.has(tag)) {
                 tagCount = this._tagCount.get(tag) + 1;
                 this._tagCount.set(tag, tagCount);
-                this.notify('tag-count-changed', tag, tagCount);
+                this.notify('tag-count-changed', tag, this._tagCount);
             } else {
                 this._tagCount.set(tag, 1);
-                this.notify('tag-added', tag);
+                this.notify('tag-added', tag, this._tagCount);
             }
         }, this);
     }, this);
@@ -537,10 +537,10 @@
                     if (tagCount > 1) {
                         tagCount--;
                         this._tagCount.set(tag, tagCount);
-                        this.notify('tag-count-changed', tag, tagCount);
+                        this.notify('tag-count-changed', tag, this._tagCount);
                     } else {
                         this._tagCount.delete(tag);
-                        this.notify('tag-deleted', tag);
+                        this.notify('tag-deleted', tag, this._tagCount);
 
                         if (this._filterTags.has(tag)) {
                             this._filterTags.delete(tag);
@@ -886,10 +886,14 @@
  */
 
 var TagView = function () {
+    var tagsElement;
+
     ObservableMixin.call(this);
 
-    this.tagListElement = document.querySelector('#tags ul.tag-list');
-    this.tagListElement.addEventListener('click', this);
+    tagsElement = document.querySelector('#tags');
+    tagsElement.addEventListener('click', this);
+
+    this.tagListElement = tagsElement.querySelector('ul.tag-list');
 
     this.tagDatalistElement = document.querySelector('#tag-datalist');
 
@@ -898,7 +902,7 @@
 
 extend(TagView, ObservableMixin);
 
-TagView.prototype.onTagAdded = function (tag) {
+TagView.prototype.onTagAdded = function (tag, tagCount) {
     var newNode;
     var tagElement;
     var setTagButton;
@@ -938,7 +942,7 @@
         referenceNode.nextSibling : this.tagListElement.firstChild);
 
     // initialize tag count
-    this.onTagCountChanged(tag, 1);
+    this.onTagCountChanged(tag, tagCount);
 
     // add to datalist
     for (i = 0; i < this.tagDatalistElement.options.length; i++) {
@@ -954,18 +958,44 @@
     }
 };
 
+TagView.prototype.updateTagCloud = function (tagCount) {
+    var tagElements;
+    var i;
+    var j;
+    var tagCountMax = 1;
+
+    tagCount.forEach(function (count) {
+        if (count > tagCountMax) {
+            tagCountMax = count;
+        }
+    }, this);
+
+    tagElements = this.tagListElement.querySelectorAll('ul.tag-list > li');
+    for (i = 0; i < tagElements.length; i++) {
+        for (j = 1; j <= 10; j++) {
+            tagElements[i].classList.remove('tag-frequency-' + j);
+        }
+        tagElements[i].classList.add('tag-frequency-' +
+            (Math.floor(tagCount.get(tagElements[i].dataset.tag) /
+            (tagCountMax / 9)) + 1));
+    }
+};
+
 TagView.prototype.onTagCountChanged = function (tag, tagCount) {
     this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag) +
-        ' .tag-count').textContent = '(' + tagCount + ')';
+        ' .tag-count').textContent = '(' + tagCount.get(tag) + ')';
+    this.updateTagCloud(tagCount);
 };
 
-TagView.prototype.onTagDeleted = function (tag) {
+TagView.prototype.onTagDeleted = function (tag, tagCount) {
     var tagElement;
 
     // remove from tag list
     tagElement = this.tagListElement.querySelector('li' +
         createDatasetSelector('tag', tag));
     tagElement.parentNode.removeChild(tagElement);
+
+    this.updateTagCloud(tagCount);
 };
 
 TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks,
@@ -993,12 +1023,16 @@
 };
 
 TagView.prototype.handleEvent = function (e) {
-    if (e.type === 'click' && (e.target.name === 'set-tag' ||
-            e.target.name === 'toggle-tag')) {
+    if (e.type === 'click') {
+        if (e.target.name === 'set-tag' ||
+            e.target.name === 'toggle-tag') {
         e.target.blur();
 
         this.notify(e.target.name, getAncestorElementDatasetItem(e.target,
             'tag'));
+        } else if (e.target.name === 'show-tag-cloud') {
+            this.tagListElement.classList.toggle('tag-cloud', e.target.checked);
+        }
     }
 };