[CB] Message Icon: New Preview Style

[SubDevo]

Message Icon: New Preview Style by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

Preview

This code removes the Message Icon dropdown box, and replaces it with the actual message icons. Just click the icon to select it. Now you can see what an icon looks like without trying each one in the dropdown.

Custom Message Icons:
If you are using custom icons they do not show up in the original dropdown.
With this code you can see your custom icons!

Enjoy!!!
SubDevo

Variable Descriptions:

var tAlign="left"; // Description Column Text Alignment (left, center, right)
var tWidth="30%"; // Description Area Width. (default is 30%)

Look at THIS pic to see what the above options do.
These are optional. But they are here if you need them!

If you are NOT using any custom message icons, then you may skip the below. There is no need to edit anything else.

var bURL=""; // Base URL path for images.
This is here for convenience. If you have your custom icons in the same folder on your host, you may put the URL to it here. Then just use the filename in the rest of the variables instead of the complete URL.

Now you need to enter the URL's (of your custom icons), to any of the following.
Just leave the line(s) untouched if you don't have a custom icon for it.
The "xx" icon is the "Standard" message icon and "Laugh" is a smilie.

var nIco=[
   ["xx", ""],
   ["ThumbUp", ""],
   ["ThumbDown", ""],
   ["Exclamation", ""],
   ["Question", ""],
   ["Lamp", ""],
   ["Laugh", ""]
];
Don't touch the Red parts.
In between the Maroon quotes (""), enter the URL (or just filename if using a base URL).
If you leave it "", the code will use the default PB icon.

Location: Global Footer

<script type="text/javascript">
<!--
/* Message Icon: New Preview Style by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */

var tAlign="left"; // Description Column Text Alignment (left, center, right)
var tWidth="30%"; // Description Area Width. (default is 30%)
var bURL=""; // Base URL path for images.
var nIco=[
   ["xx", ""],
   ["ThumbUp", ""],
   ["ThumbDown", ""],
   ["Exclamation", ""],
   ["Question", ""],
   ["Lamp", ""],
   ["Laugh", ""]
];

function cIco(a){pic.value=a.alt.toLowerCase(); bic.src=a.src;}
function gIco(a){a.style.cursor="pointer"; a.onmousedown=function(){cIco(this);}
   with(pic.parentNode){appendChild(document.createTextNode(" "));appendChild(a);}
   if(a.alt.toLowerCase().match(pic.value)){bic.src=a.src;}
} var npF=document.postForm;
if(npF&&npF.iconImage){ var bic=npF.iconImage; var pic=npF.icon;
    pic.style.display="none"; var d=bic.parentNode.previousSibling;
   d.firstChild.innerHTML+=" "; d.appendChild(bic); var a=npF.attachment;
   if(a){with(a.parentNode){insertBefore(document.createElement("br"), childNodes[1]);}}
   var tr=npF.getElementsByTagName("table")[1].rows;
   if(tr){for(var x=1;x<tr.length-1;x++){with(tr[x].cells[0]){align=tAlign;width=tWidth;}}}
   var nI=pic.parentNode.parentNode.nextSibling.nextSibling.getElementsByTagName("img");
   var nx=nI[0].src; with(nx){var nb=slice(0,lastIndexOf("/")+1); var ne=slice(length-4);}
   for(var i=0;i<nIco.length;i++){ var neI=document.createElement("img"); var nIc=nIco[1];
      if(nIc){if(!nIc.match(/^http:\/\//i)){nIc=bURL+nIc;}
      }else{nIc=nb+nIco[0].toLowerCase()+ne;}
      with(neI){src=nIc;alt=nIco[0];} gIco(neI);
   }
   for(x=0;x<nI.length;x++){
      if(nI[x].alt.match(/^(smiley|angry|cheesy|sad|wink)$/i)){
         var nE=nI[x].cloneNode(false); gIco(nE);
}}}
//-->
</script>

EDIT: Updated 5/18/2010
Code updated to also work with the new PB v5 default icon set.

EDIT: Updated 3/24/2011
PB fixed the form nesting on the posting page, breaking the "width and align" in this code. Fixed.