// ==UserScript==
// @name        Twitter - adds unread notifications count in the tab title
// @namespace   rikkie
// @description Adds unread notifications count in the tab title
// @include     https://twitter.com/
// @version     2
// @grant       none
//
// Thanks a lot to wOxxOm for his valuable help 
// @downloadURL none
// ==/UserScript==

/// ---------------------------------
// Initial display of counter
/// ---------------------------------
var nCount = document.querySelector('.count > span:nth-child(1)').innerHTML;
if (nCount != '0') {
  document.title = nCount + '|' + document.title;
  document.querySelector('.count > span:nth-child(1)').unread = true;
};

/// ---------------------------------
/// 1st mutation observer -monitors the tab title- (if tab title doesn't contain '|' and nCount not 0 and unread flag is true, then display counter)
/// ---------------------------------
var target1 = document.querySelector('head > title');

var observer1 = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    nCount = document.querySelector('.count > span:nth-child(1)').innerHTML;
    if (document.title.indexOf('|') == -1 
        && nCount != '0'
        && document.querySelector('.count > span:nth-child(1)').unread) {
      document.title = nCount + '|' + document.title;
    }
  });
})

var config = { attributes: true, childList: true, characterData: true }

observer1.observe(target1, config);


/// ---------------------------------
/// 2st mutation observer -monitors the HTML notification counter value- 
/// (on every value change, add a class Attribute with the name "unread")
/// ---------------------------------
var target2 = document.querySelector('.count > span:nth-child(1)');

var observer2 = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (!target2.unread)
      target2.unread = true;      
  });
})

// var config = { attributes: true, childList: true, characterData: true }

observer2.observe(target2, config);


/// ---------------------------------
/// Three "click" event listeners, attached on the "Notifications" button (one for each of it's 3 parts)
/// (if the clicked element has the "unread" attribute, then clear the attribute and decrement the unread count-make it 0 again)
/// ---------------------------------
var target3a = document.querySelector('.Icon--notifications');
var target3b = document.querySelector('.people > a:nth-child(1) > span:nth-child(2)');
var target3c = document.querySelector('.people > a:nth-child(1)');
target3a.addEventListener("click", decrementCounter, false);
target3b.addEventListener("click", decrementCounter, false);
target3c.addEventListener("click", decrementCounter, false);

function decrementCounter(){
  counter = document.querySelector('.count > span:nth-child(1)');
  if (counter.unread)    
     delete counter.unread; 
  document.querySelector('.count > span:nth-child(1)').innerHTML = '0';
  document.title = "Twitter";    
}