Facebook Chat Emoticons Bar

By bitMAN — Last update Sep 28, 2009 — Installed 22,704 times.
There are 4 previous versions of this script.
// ==UserScript==
// @name              Facebook Chat Emoticons Bar
// @description       Adds an emoticon bar to Facebook chat
// @include           http://www.facebook.com/*
// @include           http://apps.facebook.com/*
// @author            bitMAN
// @version           0.0.12
// @license           (CC) Attribution Non-Commercial Share Alike; http://creativecommons.org/licenses/by-nc-sa/3.0/
// ==/UserScript==
//

// List of emoticons
// :) :( :D >:( -_- :/ o.O :p :'( >:O :v 3:) :o :3 ;) :* :|] 8) <3 :putnam: 8| ^_^ (^^^) O:) <(")

	var emotsInfo = new Array();
	emotsInfo[0] = ':)';	emotsInfo[1] = 590;
	emotsInfo[2] = ':(';	emotsInfo[3] = 606;
	emotsInfo[4] = ':p';	emotsInfo[5] = 622;
	emotsInfo[6] = ':D';	emotsInfo[7] = 638;
	emotsInfo[8] = '>:(';	emotsInfo[9] = 718;
	emotsInfo[10] = '-_-';	emotsInfo[11] = 846;
	emotsInfo[12] = ':/';	emotsInfo[13] = 734;
	emotsInfo[14] = 'o.O';	emotsInfo[15] = 862;
	emotsInfo[16] = ':\'(';	emotsInfo[17] = 750;
	emotsInfo[18] = '>:O';	emotsInfo[19] = 878;
	emotsInfo[20] = ':v';	emotsInfo[21] = 894;
	emotsInfo[22] = '3:)';	emotsInfo[23] = 766;
	emotsInfo[24] = ':o';	emotsInfo[25] = 654;
	emotsInfo[26] = ':3';	emotsInfo[27] = 910;
	emotsInfo[28] = ';)';	emotsInfo[29] = 670;
	emotsInfo[30] = ':*';	emotsInfo[31] = 798;
	emotsInfo[32] = '8)';	emotsInfo[33] = 686;
	emotsInfo[34] = '<3';	emotsInfo[35] = 814;
	emotsInfo[36] = '8|';	emotsInfo[37] = 702;
	emotsInfo[38] = '^_^';	emotsInfo[39] = 830;
	emotsInfo[40] = 'O:)';	emotsInfo[41] = 782;
	
	var fEmotBarDom = document.createElement('div');
	fEmotBarDom.setAttribute('class','chat_tab_emot_bar');
	fEmotBarDom.setAttribute('style','padding-bottom: 6px; line-height: 16px; padding-left: 2px; background:#EEEEEE none repeat scroll 0 0; border-bottom-style: solid; border-bottom-width: 1px; border-color: #CCCCCC; position: static;');
	
	var fEmotsListDom = document.createElement('div');
	fEmotsListDom.setAttribute('name','EmotsList');
	fEmotBarDom.appendChild(fEmotsListDom);
	
	for(i=0;i<emotsInfo.length;i+=2) {
		var fEmotsDom = document.createElement('img');
		fEmotsDom.setAttribute('alt',emotsInfo[i]);
		fEmotsDom.setAttribute('style','cursor: pointer; background: transparent url(http://static.ak.fbcdn.net/rsrc.php/z28K9/hash/wjc46okw.png) no-repeat scroll -'+ emotsInfo[i+1] +'px -84px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;');
		fEmotsDom.setAttribute('src','http://static.ak.fbcdn.net/images/blank.gif');
		fEmotsDom.setAttribute('class','emote_img');
		fEmotsListDom.appendChild(fEmotsDom);
	}
	var fEmotsDom = document.createElement('img');
	fEmotsDom.setAttribute('alt',':|]');
	fEmotsDom.setAttribute('src','http://static.ak.fbcdn.net/images/emote/robot.gif');
	fEmotsDom.setAttribute('style','cursor: pointer;');
	fEmotsDom.setAttribute('class','emote_img');
	fEmotsListDom.appendChild(fEmotsDom);
	var fEmotsDom = document.createElement('img');
	fEmotsDom.setAttribute('alt','(^^^)');
	fEmotsDom.setAttribute('src','http://static.ak.fbcdn.net/images/emote/shark.gif');
	fEmotsDom.setAttribute('style','cursor: pointer;');
	fEmotsDom.setAttribute('class','emote_img');
	fEmotsListDom.appendChild(fEmotsDom);
	var fEmotsDom = document.createElement('img');
	fEmotsDom.setAttribute('alt',':putnam:');
	fEmotsDom.setAttribute('src','http://static.ak.fbcdn.net/images/emote/putnam.gif');
	fEmotsDom.setAttribute('style','cursor: pointer;');
	fEmotsDom.setAttribute('class','emote_img');
	fEmotsListDom.appendChild(fEmotsDom);
	var fEmotsDom = document.createElement('img');
	fEmotsDom.setAttribute('alt','<(")');
	fEmotsDom.setAttribute('src','http://static.ak.fbcdn.net/images/emote/penguin.gif');
	fEmotsDom.setAttribute('style','cursor: pointer;');
	fEmotsDom.setAttribute('class','emote_img');
	fEmotsListDom.appendChild(fEmotsDom);

	var fArrow = document.createElement('img');
	fArrow.setAttribute('alt','');
	fArrow.setAttribute('src','http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif');
	fArrow.setAttribute('style','cursor: pointer; position: absolute; right: 10px;');
	fArrow.setAttribute('class','PagerArrow spritemap_icons sx_icons_up_arrow_blue');
	fEmotBarDom.appendChild(fArrow);
	
	document.addEventListener("DOMNodeInserted", fInsertedNodeHandler, false);

	function fInsertedNodeHandler(event) {
		if(event.target.getElementsByClassName && event.target.getElementsByClassName('chat_window')[0])
			fInsertEmotBar(event.target);
	}

	function fInsertEmotBar(fChatWrapper) {
		fChatToolBox = fChatWrapper.getElementsByClassName('chat_window')[0].getElementsByClassName('toolbox')[0];
		fNewEmotBar = fEmotBarDom.cloneNode(true);
		window.setTimeout(setVisibility, 0, fNewEmotBar);
		for(i=0;i<fNewEmotBar.firstChild.childNodes.length;i++) fNewEmotBar.firstChild.childNodes[i].addEventListener('click', fEmotClickHandler , false);
		fNewEmotBar.childNodes[1].addEventListener('click', fHideShowEmotBar , false);	
		if(fChatToolBox.childNodes) fChatToolBox.insertBefore(fNewEmotBar,fChatToolBox.firstChild);
		else fChatToolBox.appendChild(fNewEmotBar);
	}

	function fEmotClickHandler(event){
		var fChatInput = event.target.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('chat_input_div')[0].getElementsByClassName('chat_input')[0];
		fChatInput.value += event.target.getAttribute('alt')+' ';
		fChatInput.focus();
	}
	
	function fHideShowEmotBar(event){
		fChatBar = document.getElementsByName('EmotsList');
		if(fChatBar[0].getAttribute('style') == 'display: none;') {
			for(i=0;i<fChatBar.length;i++) {
				fChatBar[i].setAttribute('style','display: block;');
				fChatBar[i].parentNode.childNodes[1].setAttribute('class','PagerArrow spritemap_icons sx_icons_up_arrow_blue');
			}
		}
		else {
			for(i=0;i<fChatBar.length;i++) {
				fChatBar[i].setAttribute('style','display: none;');
				fChatBar[i].parentNode.childNodes[1].setAttribute('class','PagerArrow spritemap_icons sx_icons_down_arrow_blue');
			}
		}
		window.setTimeout(GM_setValue, 0, 'visible', !GM_getValue('visible',true));
	}
	
	function setVisibility(DOM) {
		if(GM_getValue('visible', true)) {
			DOM.firstChild.setAttribute('style','display: block;');
			DOM.childNodes[1].setAttribute('class','PagerArrow spritemap_icons sx_icons_up_arrow_blue');
		}
		else {
			DOM.firstChild.setAttribute('style','display: none;');
			DOM.childNodes[1].setAttribute('class','PagerArrow spritemap_icons sx_icons_down_arrow_blue');
		}
	}