Labels for Radio Buttons and Checkboxes - IE ONLY

The following is the source changes for the addition of Radio Button and Checkboxes < labels >(unfortunately this is for IE Only at this time). This has been requested by a number of people for FCKEditor. CKEditor has this but upgrade to CKEditor is not feasible for many people so here you go - Merry Christmas.

BTW You will note I also have the addition of the Style data - I have the style changes available on the Checkbox and Radio button dialogs for selection. This is pretty slick to have for it allows you to modify the label text formatting without the necessity of a < span > being used. If there are any issues, please let me know.

//////////////////////////////////////////////////////////////////////////////////////////
/*******************
..\FCKEditor\editor\dialog\common\fck_dialog_common.js
********************/

function CreateNamedElement( oEditor, oOriginal, nodeName, oAttributes )
{
   var oNewNode ;
   var oNewLabelNode; // for use with checkbox labels

   // IE doesn't allow easily to change properties of an existing object,
   // so remove the old and force the creation of a new one.
   var oldNode = null ;
   if ( oOriginal && oEditor.FCKBrowserInfo.IsIE )
   {
      // Force the creation only if some of the special attributes have changed:
      var bChanged = false;
      for( var attName in oAttributes )
         bChanged |= ( oOriginal.getAttribute( attName, 2) != oAttributes[attName] ) ;

      if ( bChanged )
      {
         oldNode = oOriginal ;
         oOriginal = null ;
      }
   }

   // If the node existed (and it's not IE), then we just have to update its attributes
   if ( oOriginal )
   {
      oNewNode = oOriginal ;
   }
   else
   {
      // #676, IE doesn't play nice with the name or type attribute
      if ( oEditor.FCKBrowserInfo.IsIE )
      {
          // addition of the <label>
          var sName = "" ;
          var sID = "" ;
          var sType = "" ;
          var sValue = "" ;
            var sFontFamily = "" ; 
            var sFontSize = "" ;
            var bIsBold = false ; 
            var bIsItalic = false ;
            var bIsUnderline = false ;
          
         var sbHTML = [] ;
         sbHTML.push( '<' + nodeName ) ;
         for( var prop in oAttributes )
         {
            sbHTML.push( ' ' + prop + '="' + oAttributes[prop] + '"' ) ;
            
            // Get the type and name - if this is a checkbox then these will be used. 
            if (prop == 'type')
                sType = oAttributes[prop];
            if (prop == 'name')
                sName = oAttributes[prop];
            if (prop == 'id')
                sID = oAttributes[prop];
            if (prop == 'value')
                sValue = oAttributes[prop];
            if (prop == 'styleFontFamily')
                sFontFamily = oAttributes[prop];
            if (prop == 'styleFontSize')
                sFontSize = oAttributes[prop];
            if (prop == 'styleIsBold')
                bIsBold = oAttributes[prop];
            if (prop == 'styleIsItalic')
                bIsItalic = oAttributes[prop];
            if (prop == 'styleIsUnderline')
                bIsUnderline = oAttributes[prop];
         }
         sbHTML.push( '>' ) ;
         if ( !oEditor.FCKListsLib.EmptyElements[nodeName.toLowerCase()] )
            sbHTML.push( '</' + nodeName + '>' ) ;
            
            if(sType == 'checkbox' || sType == 'radio')
            {
                oNewLabelNode                   =  oEditor.FCK.EditorDocument.createElement( 'label' ) ;
                if(sType == 'radio')
                {
                    oNewLabelNode.htmlFor           = sID;
                    oNewLabelNode.id                = sID + "_L" ;
                }
                else
                {
                    oNewLabelNode.htmlFor           = sName;
                    oNewLabelNode.id                = sName + "_L" ;
                }
                
                oNewLabelNode.style.fontFamily  = sFontFamily ;
                oNewLabelNode.style.fontSize    = sFontSize ;
                
               if(bIsBold)
                   oNewLabelNode.style.fontWeight = 'bold';
               else
                   oNewLabelNode.style.fontWeight = '';
                   
               if(bIsItalic)
                   oNewLabelNode.style.fontStyle = 'italic';
               else
                   oNewLabelNode.style.fontStyle = 'normal';
                   
               if(bIsUnderline)
               {
                   oNewLabelNode.style.textDecorationNone = false;
                   oNewLabelNode.style.textDecorationUnderline = true;
               }else{
                   oNewLabelNode.style.textDecorationNone = true;
                   oNewLabelNode.style.textDecorationUnderline = false;
               }
               
                var oNewLabelTextNode = oEditor.FCK.EditorDocument.createTextNode( sValue ) ;
                oNewLabelNode.appendChild(oNewLabelTextNode);
            }      
            else
            {
                oNewLabelNode = null ;
            }
            
         oNewNode = oEditor.FCK.EditorDocument.createElement( sbHTML.join('') ) ;
         
         // Check if we are just changing the properties of an existing node: copy its properties
         if ( oldNode )
         {
             // if a checkbox then remove the label node first
             if(sType == 'checkbox' || sType == 'radio')
             {
                 // locate the id and remove
                 var oldlabel;
                 if(sType == 'radio')
                     oldlabel = oldNode.id + '_L';
                 else
                     oldlabel = oldNode.name + '_L';
                     
                 var oOldLabelNode = oEditor.FCK.EditorDocument.getElementById( oldlabel );
                 oldNode.parentNode.removeChild( oOldLabelNode ) ;
             }
             
            CopyAttributes( oldNode, oNewNode, oAttributes ) ;
            oEditor.FCKDomTools.MoveChildren( oldNode, oNewNode ) ;
            oldNode.parentNode.removeChild( oldNode ) ;
            oldNode = null ;
            if ( oEditor.FCK.Selection.SelectionData )
            {
               // Trick to refresh the selection object and avoid error in
               // fckdialog.html Selection.EnsureSelection
               var oSel = oEditor.FCK.EditorDocument.selection ;
               oEditor.FCK.Selection.SelectionData = oSel.createRange() ; // Now oSel.type will be 'None' reflecting the real situation
            }
         }
         
         oNewNode = oEditor.FCK.InsertElement( oNewNode ) ;
         
         // If Checkbox then we want to insert the Label
         if(sType == 'checkbox' || sType == 'radio')
             oNewLabelNode = oEditor.FCK.InsertElement( oNewLabelNode ) ;

         // FCK.Selection.SelectionData is broken by now since we've
         // deleted the previously selected element. So we need to reassign it.
         if ( oEditor.FCK.Selection.SelectionData )
         {
            var range = oEditor.FCK.EditorDocument.body.createControlRange() ;
            range.add( oNewNode ) ;
            oEditor.FCK.Selection.SelectionData = range ;
         }
      }
      else
      {
          // NON IE Browsers
         oNewNode = oEditor.FCK.InsertElement( nodeName ) ;
      }
   }

   // Set the basic attributes
   for( var attName in oAttributes )
      oNewNode.setAttribute( attName, oAttributes[attName], 0 ) ;   // 0 : Case Insensitive

   return oNewNode ;
}

//////////////////////////////////////////////////////////////////////////////////////////
/*******************
..\FCKEditor\editor\dialog\fck_checkbox.html
********************/

window.onload = function()
{
    ......
    if ( oActiveEl && oActiveEl.tagName == 'INPUT' && oActiveEl.type == 'checkbox' )
   {
       ......
        var oldlabel = oActiveEl.name + '_L';
        var oOldLabelNode = oDOM.getElementById( oldlabel );
        GetE('txtValue').value = oOldLabelNode.innerHTML;
        
        // you can also pull other settings for the style data

       ......
    }
    ......   
}

function Ok()
{
    ......
    
    // get style settings
    var fontFamily = ""; // whatever your default font family would be - you can figure this one out though following the rules for the others. 
    /* These are my styles used - you can add selection criteria for adding to yorus as well. 
   var strFontSize = GetE('selFontSize').value;
    var bIsBold = GetE('selFontBold').checked ;
    var bIsItalic = GetE('selFontItalic').checked ;
    var bIsUnderline = GetE('selFontUnderline').checked ;
    */
    
   oActiveEl = CreateNamedElement( oEditor, oActiveEl, 'INPUT', {name: GetE('txtName').value, type: 'checkbox', value: GetE('txtValue').value, 
       styleFontFamily: fontFamily, styleFontSize: strFontSize, styleIsBold: bIsBold, styleIsItalic: bIsItalic, styleIsUnderline: bIsUnderline} ) ;
    ......
}