var colorsVal = 
[
 ['#FFFFFF','#FFFF7F','#FF7FFF','#AFFFFF','#FF7F7F','#7FFF7F'],
 ['#7F7FFF','#7F7F7F','#FF00FF','#FFFF00','#00FFFF','#FF7F00'],
 ['#7FFF00','#FF007F','#7F00FF','#00FF7F','#007FFF','#7F7F00'],
 ['#7F007F','#007F7F','#FF0000','#00FF00','#0000FF','#7F0000'],
 ['#007F00','#00007F','#00AFAF','#7F7F3F','#7F3F00','#000000']
]

function initColorGrid()
{
  var cGrid = Element.extend( document.createElement('div') );
  Object.extend( cGrid,
  {
    init: function()
    {
      this.className = 'colorGrid';
      this.id = 'colors';
      document.body.appendChild( this );
      for( var i = 0; i < 5; i++ )
      {
        var row = Element.extend( document.createElement('div') );
        row.className = 'colorRow';
        for( var j = 0; j < 6; j++ )
        {
          var ela = Element.extend( document.createElement('a') );
          row.appendChild( ela );
          ela.className = 'colitem';
          ela.style.backgroundColor = colorsVal[i][j];
          ela.title = colorsVal[i][j];
          ela.href = 'javascript:globalColorGrid.doOnClick(' + i + ',' + j + ');'  // TODO: :-(
//      window.status = Event.element(event).style.backgroundColor;
          ela.onmouseover = function(){ return true; }
          Event.observe( ela, 'mouseover', this.mouseOverColor.bindAsEventListener( this ), true );
        }
        this.appendChild( row );
      }
      this.visible = false;
      this.hide();
    },
    
    open: function( src )
    {
      if( ! (this.visible && (this.source == src)) )
      {
        this.close();
        
        this.source = src;
        this.visible = true;
        var pos = Position.cumulativeOffset( this.source ); // ( palette );
        this.style.left = pos[0] + "px"
        this.style.top =  pos[1] + this.source.getHeight() + 2 + "px"
        this.show();
      }
    },
    
    close: function()
    {
      this.hide();
      this.visible = false;
      if( this.source == null )
        return;
      if( this.source.id == 'palette.fgcol' )
      {
        this.source.style.color = 'black';
      }
      else  
      {
        this.source.style.backgroundColor = 'black';
      }   
    },
    
    setRangeForColoring: function( rg )
    {
      this.range = rg;
    },
    
    mouseOverColor: function( event )
    {
      if( this.source.id == 'palette.fgcol' )
        this.source.style.color = Event.element(event).style.backgroundColor;
      else  
        this.source.style.backgroundColor = Event.element(event).style.backgroundColor;
      window.status = Event.element(event).title;
      return true;  
    },
      
    doOnClick: function( i, j )
    {
      this.range.activate();
      if( this.source.id == 'palette.fgcol' )
      {
        this.range.applyCSSToSelection( 'color', colorsVal[i][j] ); 
      }
      else  
      {
        this.range.applyCSSToSelection( 'backgroundColor', colorsVal[i][j] );
      }   
      this.close();
      window.status = colorsVal[i][j];
    }
  });
  cGrid.init();
  return cGrid;  
}