// Click the link to change the background color

CDE.lnk('Click me!', function(){
  CDE.ColorPicker.show(this, {
    mixTarget: document.body,
    intOffsetY: 30,
    spriteUrl: '/img/cp/colorpicker_sprite.png',
    strBg0: 'https://pvdz.ee/project/cde/img/cp/bg1.png',
    strBg1: 'https://pvdz.ee/project/cde/img/cp/bg2.png',
    strBg2: 'https://pvdz.ee/project/cde/img/cp/bg3.png',
    strBg3: 'https://pvdz.ee/project/cde/img/cp/bg4.png',
    strBg4: 'https://pvdz.ee/project/cde/img/cp/bg5.png',
    boolColorBoxes: true,
    boolBackgrounds: true, // dont show bg for text color... :)
    onChangeColor: function(c){
      // remove the previous stylesheet (by closure)
      // prevents cluttering up the dom with unused sheets
      //if (cdeCss) cdeCss.del(true,true);
      //cdeCss = onChange(c, arrCurrent[strLabel].bg).dba();
    },
    onChangeBg: function(url){
      // update current color
      //arrCurrent[strLabel].bg = url;
      // remove the previous stylesheet (by closure)
      // prevents cluttering up the dom with unused sheets
      //if (cdeCss) cdeCss.del(true,true);
      //cdeCss = onChange(arrCurrent[strLabel].color, url).dba();
    }
  });
}).addTo("link");