function createColorFX(container) {

 cleanUp();

 _originalwidth = $('editimg').width;

      var title = document.createElement("h3");
    var titleText = document.createTextNode("Color Effects");
    
    title.appendChild(titleText);
    
    $(container).appendChild(title);   
    var btnGrayscale = document.createElement("input"); 
    
    var btnSepia = document.createElement("input"); 
    
     var btngraycancel = document.createElement("input");
     
      var btnInvert = document.createElement("input");
      
      var btnRed = document.createElement("input");
      
      var btnGreen = document.createElement("input");
      
      var btnBlue = document.createElement("input");
      
    
    btnGrayscale.setAttribute("value","Grayscale");
      
    btnGrayscale.setAttribute("type","button"); 
    
    btnGrayscale.className = 'button';   
    
    btnSepia.setAttribute("value","Sepia");
      
    btnSepia.setAttribute("type","button");   
    
    btnSepia.className = 'button';   
    
     btnInvert.setAttribute("value","Invert");
      
    btnInvert.setAttribute("type","button");  
    
        btnInvert.className = 'button';   
 
    
     btnRed.setAttribute("value","Red");
      
    btnRed.setAttribute("type","button");   
    
            btnRed.className = 'button';
    
     btnGreen.setAttribute("value","Green");
      
    btnGreen.setAttribute("type","button");  
    
            btnGreen.className = 'button'; 
    
     btnBlue.setAttribute("value","Blue");
      
    btnBlue.setAttribute("type","button");   
    
            btnBlue.className = 'button';
      
    $(container).appendChild(btnGrayscale);  
    
    $(container).appendChild(btnSepia);  
    
    $(container).appendChild(btnInvert);  
    
    $(container).appendChild(btnRed);  
    
    $(container).appendChild(btnGreen);  
    
    $(container).appendChild(btnBlue);  
    
   
     
     Event.observe(btnGrayscale, 'click', function(e){ saveGrayscale(); });    
     
     Event.observe(btnSepia, 'click', function(e){ saveSepia(); });    
     
     Event.observe(btnInvert, 'click', function(e){ saveInvert(); });  
     
     Event.observe(btnRed, 'click', function(e){ saveChannel('red'); });  
     
     Event.observe(btnGreen, 'click', function(e){ saveChannel('green'); });  
     
     Event.observe(btnBlue, 'click', function(e){ saveChannel('blue'); });  

    new Element.show('controls');    
    

}

function cancelColorFX() {
        
    cleanUp();   

}


function saveGrayscale() {
    
    PixerMain.Grayscale(colorfx_callback);  

}

function saveChannel(e) {
    
    PixerMain.ChannelFiltering(e, colorfx_callback);  

}

function saveSepia() {
    
    PixerMain.Sepia(colorfx_callback);  

}

function saveInvert() {
    
    PixerMain.Invert(colorfx_callback);  

}

function colorfx_callback(e) {
    
     reloadImage();  
     
     cleanUp();     
     
     changesApplied();

}