[CB] Style UBBC Tags

[SubDevo]

Style UBBC Tags by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

This code is a direct replacement for iPokemon's Style Tags code.
With five main differences:

• You may now nest style tags within style tags without issue.
  You only need this code to create post templates. No need for a table or scrolling div code!
  
• You may post your post template in a code box for others to use and the style tags in the code box will not be replaced.
  
• This code uses DOM methods of adding the UBBC button. So it will not break the PB UBBC functions.
  
• Choice of adding the button to the end of the Top OR Bottom row of your UBBC icons.
  
• Ability to NOT show the UBBC button. Any style tags in a post are still replaced, but must be entered manually.
  

Enjoy!!!
SubDevo

Usage:

[style=CSS STYLE RULES ONLY]This is a message.[/style]

The style tag is replaced with a div with the styles that you put after the = sign.
Only use CSS style rules in here! THIS is a good reference.

Example:
[style=border: 1px solid #FF0000; width:200px; text-align: right;]This is a message.[/style]

The above creates a div with a width of 200px, a 1px Red border and "This is a message." is aligned to the right.
Of course you may still use any normal UBBC codes within the post.
Like, put [center][/center] around the above to center the div within the post.

Variables:

var styleImg="i52.tinypic.com/25psr5s.png"; // Style UBBC Icon Image URL
Use the Icon image provided or use your own. Enter the URL here.
To NOT show the UBBC button, simply set this to empty "". var styleImg=""; // Style UBBC Icon Image URL
The code will still replace the style tags within a post but will not add the UBBC button on the posting page.
In this case, you must enter the tags manually for use in a post.

var iPos=1; // Add icon to top row? 1=Yes, 0=No

Set to 1 to add to the TOP row of UBBC icons.
Set to 0 to add to the BOTTOM row of UBBC icons.

NOTE:
If you are using my New Color Picker v1.0, place this code ABOVE it.

Location: Global Footer

<script type="text/javascript">
/* Style UBBC Tags by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* [a href="http://interoceandesigns.com"]http://interoceandesigns.com[/a] or [a href="http://lsdp.proboards.com"]http://lsdp.proboards.com[/a] */

var styleImg="http://i52.tinypic.com/25psr5s.png"; // Style UBBC Icon Image URL
var iPos=1; // Add icon to top row? 1=Yes, 0=No

function keepCode(a,b){
   if(a.innerHTML.indexOf("Code:")==-1){return;}
   var n=a.getElementsByTagName("font"),m,d=-1,x=-1;
   while(n[++x]){m=n[x];
      if(m.className=="code"){ d++;
         if(b){nC[d]=(m.innerHTML);}
         else{m.innerHTML=nC[d];}
}}} var n=document.getElementsByTagName("font"),a,b,e,m,nC=[],x=-1;
if(/(calendar|pm|pre)view|search2|display/i.test(pb_action)){
   b=/\[style=(.+?)\]/gi; e=/\[\/style\]/gi;
   while(n[++x]){ a=n[x].innerHTML;
      if(b.test(a)&&a.indexOf("google_ad_section")!=-1){ keepCode(n[x],1);
         n[x].innerHTML=a.replace(b, function(m,p){return '<div class="stylediv" title="'+escape(p)+'" >';}).replace(e,"<\/div>");
         keepCode(n[x]); a=n[x].getElementsByTagName("div"),i=-1;
         while(a[++i]){if(a[i].className=="stylediv"){a[i].style.cssText=unescape(a[i].title); a[i].removeAttribute("title");}}
}}} e=document.postForm;
if(e&&/^http:/i.test(styleImg)){
   a=document.createElement("a"); b=document.createElement("img");
   a.href='javascript:add("[style=]","[/style]")';
   b.src=styleImg; b.alt=b.title="Style Tag"; b.border=0; a.appendChild(b);
   e=e.color; b=(iPos)?"insertBefore(a,e.previousSibling)":"appendChild(a)";
   eval("e.parentNode."+b);
}
</script>

EDIT: 08/05/2011
A security issue was discovered that allowed you to run other code with a malformed style tag.
Thank you Chris! This issue has been fixed. Special thanks to Eton Bones for help with the fix!