/*
      CUSTOM STYLED CHECKBOX
  ================================

  You  should  use standart  "input"  object 
  with  some name like "test", also it should 
  have defined "styled" class like:

    .styled {
      display: none;
    }

  You can use the following styles (if it 
  is necessary, optional):

    .img_checkbox                - unchecked style;
    .img_checkbox_pushed         - mouse down unchecked style;
    .img_checkbox_checked        - checked style;
    .img_checkbox_checked_pushed - mouse down checked style;

    .test                        - .csc_checkbox style override (optional)
    (name is same as in input object)

  Checkbox images:
  (supported any extensions: gif, jpg, png, ...)

    <~image_name~>.ext                - unchecked view; 
    <~image_name~>_pushed.ext         - mouse down unchecked image;
    <~image_name~>_checked.ext        - checked image;
    <~image_name~>_checked_pushed.ext - mouse down checked image;
   
  To init checkboxes you should paste to your 
  page following code:  

    CSCheckboxList.init('<~path~>', '<~image_name~>', '<~extension~>');
*/

var CSCheckboxList = {
  init: function(path, image_name, extension) {                        
    this.path       = path;
    this.image_name = image_name;
    this.image_ext  = extension;

    if (!this.image_name || !this.image_ext) {
      alert('Custom styled checkbox init arguments are incorrect or absent');
      return false;
    } 

    try {
      var inputs = document.getElementsByTagName("input");
      for(var i = 0; i < inputs.length; i++)
        if ((inputs[i].type == "checkbox") && (inputs[i].className == "styled"))
          this.img_checkbox_init(inputs[i]);
    }
    catch (e) {}
  },
  
  img_checkbox_init: function(input) {
    var img_checkbox         = document.createElement("img");
    img_checkbox.id          = "img_checkbox_" + input.name;
    img_checkbox.src_init    = this.img_checkbox_src_int;
    img_checkbox.className   = "img_checkbox" + (input.checked?"_checked":"");
    img_checkbox.onclick     = this.img_checkbox_onclick;
    img_checkbox.onmousedown = this.img_checkbox_onmousedown;     
    img_checkbox.onmouseup   = this.img_checkbox_onmouseup;     
    img_checkbox.onmouseout  = this.img_checkbox_onmouseup;
    img_checkbox.pushed      = false;
    img_checkbox.input       = input;
    img_checkbox.manager     = this;

    img_checkbox.src_init();

    input.parentNode.insertBefore(img_checkbox, input);
  },

  img_checkbox_src_int: function () {
    this.src = this.manager.path + 
      this.manager.image_name +
      (this.input.checked?"_checked":"") +
      (this.pushed?"_pushed":"") +
      "." + this.manager.image_ext;
  },

  img_checkbox_onclick: function() {
    this.input.click();

    if (this.input.checked)
      this.className = "img_checkbox" + 
        (this.input.checked?"_checked":"");          

    this.src_init();    
  },

  img_checkbox_onmousedown: function () {
    this.pushed    = true;
    this.className = this.className + "_pushed";

    this.src_init();
  },

  img_checkbox_onmouseup: function () {
    this.pushed    = false;
    this.className = this.className.replace("_pushed", "");

    this.src_init();
  }
}