function initPalette( colorGrid )
{
  var palette = $('palette');
  Object.extend( palette,
  {
    init: function( cgd )
    {
      this.hide();
      this.cGrid = cgd;
      
      var select = $('palette.fontfamily');
      Event.observe( select, 'change', this.fontFamily.bindAsEventListener( this ), true );

      select = $('palette.size');
      Event.observe( select, 'change', this.fontSize.bindAsEventListener( this ), true );

      var div = $('palette.fgcol');
      Event.observe( div, 'mouseover', this.mouseOverFg.bindAsEventListener( this ), true );

      div = $('palette.bgcol');
      Event.observe( div, 'mouseover', this.mouseOverBg.bindAsEventListener( this ), true );

      var a = $('palette.bold');
      a.href = "javascript:globalPalette.setStyleForSelection('fontWeight','bold','normal')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );
      
      a = $('palette.italic');
      a.href = "javascript:globalPalette.setStyleForSelection('fontStyle','italic','normal')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = $('palette.underline');
      a.href = "javascript:globalPalette.setStyleForSelection('textDecoration','underline','none')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = $('palette.linethrough');
      a.href = "javascript:globalPalette.setStyleForSelection('textDecoration','line-through','none')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = $('palette.plus');
      a.href = "javascript:globalPalette.setFontForSelection('fontSize',1)";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = $('palette.minus');
      a.href = "javascript:globalPalette.setFontForSelection('fontSize',-1)";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );
      
      a = $('palette.super');
      a.href = "javascript:globalPalette.setStyleForSelection('verticalAlign','super','')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );

      a = $('palette.sub');
      a.href = "javascript:globalPalette.setStyleForSelection('verticalAlign','sub','')";
      a.onmouseover = function(){ return true; }
      Event.observe( a, 'mouseover', this.mouseOverAnchor.bindAsEventListener( this ), true );
    },
    
    activate: function( ifrm )
    {
      this.cmeFrame = ifrm;

      var pos = Position.cumulativeOffset( ifrm.wrapper ); // ( position of the iframe element ) try wrapper;
//      var pos = Position.realOffset( ifrm.wrapper ); // ( position of the iframe element ) try wrapper;

      this.style.left = pos[0] - 1 + "px"
      this.style.top =  pos[1] - this.getHeight() - 4 + "px"

      this.cGrid.setRangeForColoring( ifrm.range );
      this.show();
    },
    
    deactivate: function()
    {
      this.cGrid.close();
      this.hide();
    },
    
    reset: function()
    {
      this.cGrid.close();
      var select = $('palette.fontfamily');
      select.selectedIndex = 0;
      select = $('palette.size');
      select.selectedIndex = 0;
    },
    
    fontFamily: function( event )
    {
      var element = Event.element( event );
      this.setStyleForSelection( 'fontFamily', element.value )
    },
    
    fontSize: function( event )
    {
      var element = Event.element( event );
      this.setStyleForSelection( 'fontSize', element.value )
    },
    
    mouseOverFg: function( event )
    {
      this.cGrid.open( Event.element(event) );
      window.status = 'FG'
    },
    
    mouseOverBg: function( event )
    {
      this.cGrid.open( Event.element(event) );
      window.status = 'BG'
    },

    mouseOverAnchor: function( event )
    {
      this.cGrid.close();
      window.status = 'A'
      return true;
    },
    
    setStyleForSelection: function( style, value, toggle )  
    {
      try
      {
        var range = this.cmeFrame.range;
        range.activate();
        range.applyCSSToSelection( style, value, toggle ); 
      }
      catch(e)
      {
        alert( 'setStyleForSelection :: ' + e);
      }
    },
    
    setFontForSelection: function( style, value )  
    {
      try
      {
        var range = this.cmeFrame.range;
        range.activate();
        range.applyFontSizeToSelection( value );
      }
      catch(e)
      {
        alert( 'setFontForSelection :: ' + e);
      }
    }
  })
  palette.init( colorGrid );
  return palette;
}