text: export const snowflakeTextArea = document.querySelector("#snowflake");
  export const nonReceptivePartTextArea =  document.querySelector("#non_receptive_part");
  export const receptivePartTextArea =  document.querySelector("#receptive_part");
  export const animateButton = document.querySelector("#animate");
  export const cancelButton = document.querySelector("#cancel");
  export const newSnowflakeButton = document.querySelector("#new_snowflake");
  export const randomizeButton = document.querySelector("#randomize");
  export const importSnowflakeParamsButton  = document.querySelector("#import_snowflake_params");
  
  export let snowflakeCanvas = document.querySelector("#canvas");
  
  export const bgFreezeLevelText = document.querySelector("#bg_freeze_level");
  export const fgFreezeSpeedText = document.querySelector("#fg_freeze_speeed");
  export const rndBgNoiseText = document.querySelector("#rnd_bg_noise");
  export const diffusionSpeedText = document.querySelector("#diffusion_speed");
  export const diffusionAsymmetryText = document.querySelector("#diffusion_asymmetry");
  export const rndSeedText = document.querySelector("#rnd_seed");
  
  export const snowflakeContainer = document.querySelector("#snowflake_container");
  export const snowflakeContainerRefElement = document.querySelector("#snowflake_container_ref");
  
  export const snowflakeParamTextArea = document.querySelector("#snowflake_params");
  
  const COLOR_PICKER_WIDTH = 240;
  const COLOR_PICKER_HANDLE_RADIUS = 10;
  
  export const fgColorPicker = new iro.ColorPicker("#fgColor", {
    color: "#ffffff",
    layout: [
      { 
        component: iro.ui.Slider,
        options: {
          width: COLOR_PICKER_WIDTH,
          handleRadius: COLOR_PICKER_HANDLE_RADIUS,
          // can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin'
          sliderType: 'hue',
          sliderDirection: 'vertical'
        }
      },
      { 
        component: iro.ui.Box,
        options: {
          width: COLOR_PICKER_WIDTH,
          boxHeight: COLOR_PICKER_WIDTH / 2,
          handleRadius: COLOR_PICKER_HANDLE_RADIUS
        }
      }
    ]
  });
  export const bgColorPicker = new iro.ColorPicker("#bgColor", {
    color: "#000000",
    layout: [
      { 
        component: iro.ui.Slider,
        options: {
          width: COLOR_PICKER_WIDTH,
          handleRadius: COLOR_PICKER_HANDLE_RADIUS,
          // can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin'
          sliderType: 'hue',
          sliderDirection: 'vertical'
        }
      },
      { 
        component: iro.ui.Box,
        options: {
          width: COLOR_PICKER_WIDTH,
          boxHeight: COLOR_PICKER_WIDTH / 2,
          handleRadius: COLOR_PICKER_HANDLE_RADIUS
        }
      }
    ]
  });
  
  export const setCurrCanvas = (canvas) => {
    snowflakeCanvas = canvas;
  }
  
  export const bgFreezeLevelSlider = document.querySelector('#bg_freeze_level_range');
  export const fgFreezeSpeedSlider = document.querySelector('#fg_freeze_speeed_range');
  
  export const rndBgNoiseSlider = document.querySelector('#rnd_bg_noise_range');
  export const diffusionSpeedSlider = document.querySelector('#diffusion_speed_range');
  export const diffusionAsymmetrySlider = document.querySelector('#diffusion_asymmetry_range');
  export const rndSeedSlider = document.querySelector('#rnd_seed_range');
  
  export const initSlider = (slider, onSlide, onSlideEnd, minValue, maxValue, valueStep, initialValue) => {
    rangeSlider.create(slider, {
        polyfill: true,     // Boolean, if true, custom markup will be created
        root: document,
        rangeClass: 'rangeSlider',
        disabledClass: 'rangeSlider--disabled',
        fillClass: 'rangeSlider__fill',
        bufferClass: 'rangeSlider__buffer',
        handleClass: 'rangeSlider__handle',
        startEvent: ['mousedown', 'touchstart', 'pointerdown'],
        moveEvent: ['mousemove', 'touchmove', 'pointermove'],
        endEvent: ['mouseup', 'touchend', 'pointerup'],
        vertical: false,    // Boolean, if true slider will be displayed in vertical orientation
        min: minValue,
        max: maxValue,
        step: valueStep, 
        value: initialValue,
        buffer: null,       // Number, in percent, 0 by default
        stick: null,        // [Number stickTo, Number stickRadius] : use it if handle should stick to ${stickTo}-th value in ${stickRadius}
        borderRadius: 10,   // Number, if you're using buffer + border-radius in css
        onSlide: onSlide,
        onSlideEnd: onSlideEnd     
    });
  }
  
  export const updateModel = (model) => {
    if(model.snowFlakeWidth > 1024) {
      model.snowFlakeWidth = 1024;
    }
    model.bgFreezeLevel = parseFloat(bgFreezeLevelText.value);
    model.fgFreezeSpeed = parseFloat(fgFreezeSpeedText.value);
    model.diffusionSpeed = parseFloat(diffusionSpeedText.value);
  
    model.diffusionAsymmetry = parseFloat(diffusionAsymmetryText.value);
    model.rndBgNoise = parseFloat(rndBgNoiseText.value);
    model.rndSeed = parseInt(rndSeedText.value);
  
    model.fgColor =fgColorPicker.color.hexString;
    model.bgColor = bgColorPicker.color.hexString; 
  }
  
  export const updateControls = (model) => {
    // model.snowFlakeWidth
    bgFreezeLevelText.value = model.bgFreezeLevel;
    if(bgFreezeLevelSlider.rangeSlider) {
      bgFreezeLevelSlider.rangeSlider.update({value : model.bgFreezeLevel}, false);
    }
  
    fgFreezeSpeedText.value = model.fgFreezeSpeed;
    if(fgFreezeSpeedSlider.rangeSlider) {
      fgFreezeSpeedSlider.rangeSlider.update({value : model.fgFreezeSpeed}, false);
    }
  
    diffusionSpeedText.value = model.diffusionSpeed;
    if(diffusionSpeedSlider.rangeSlider) {
      diffusionSpeedSlider.rangeSlider.update({value : model.diffusionSpeed}, false);
    }
  
    diffusionAsymmetryText.value = model.diffusionAsymmetry;
    if(diffusionAsymmetrySlider.rangeSlider) {
      diffusionAsymmetrySlider.rangeSlider.update({value : model.diffusionAsymmetry}, false);
    }
    
    rndBgNoiseText.value = model.rndBgNoise;
    if(rndBgNoiseSlider.rangeSlider) {
      rndBgNoiseSlider.rangeSlider.update({value : model.rndBgNoise}, false);
    }
  
    rndSeedText.value = model.rndSeed;
    if(rndSeedSlider.rangeSlider) {
      rndSeedSlider.rangeSlider.update({value : model.rndSeed}, false);
    }
  
    fgColorPicker.color.hexString = model.fgColor;
    bgColorPicker.color.hexString = model.bgColor;
  }
  
  export const updateSnowflakeParamStr = (model) => {
    if(model) {
      snowflakeParamTextArea.value = JSON.stringify(model);
    }
    else {
      snowflakeParamTextArea.value = '';
    }  
  }
   