/*
      CUSTOM STYLED RADIOBUTTON
  =================================

  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_radiobutton                - unchecked style;
    .img_radiobutton_pushed         - mouse down unchecked style;
    .img_radiobutton_checked        - checked style;
    .img_radiobutton_checked_pushed - mouse down checked style;

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

  Radio 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 radio buttons you should paste to your 
  page following code:  

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

var CSRadioButtons = {
  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 radiobuttons 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 == "radio") && (inputs[i].className == "styled"))
          this.img_radiobutton_init(inputs[i]);
    }
    catch (e) {}
  },
  
  img_radiobutton_init: function(input) {
    var name = "img_radiobutton_" + input.name;
    if (document.all)
      var img_radiobutton = document.createElement('<img name="' + name + '">');
    else {
      var img_radiobutton  = document.createElement("img");      
      img_radiobutton.name = name;
    }
    img_radiobutton.src_init    = this.img_radiobutton_src_int;
    img_radiobutton.className   = "img_radiobutton" + (input.checked?"_checked":"");
    img_radiobutton.onclick     = this.img_radiobutton_onclick;
    img_radiobutton.onmousedown = this.img_radiobutton_onmousedown;     
    img_radiobutton.onmouseup   = this.img_radiobutton_onmouseup;     
    img_radiobutton.onmouseout  = this.img_radiobutton_onmouseup;
    img_radiobutton.pushed      = false;
    img_radiobutton.input       = input;
    img_radiobutton.manager     = this;

    img_radiobutton.src_init();

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

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

  img_radiobutton_onclick: function() {       
    var coll = document.getElementsByName(this.name), obj;
    for (var i = 0; i < coll.length; i++) {
      obj = coll.item(i);
      obj.className = "img_radiobutton";
      obj.input.checked = false;
      obj.src_init();
    }

    this.className = "img_radiobutton_checked";
    this.input.checked = true;
    this.src_init();
  },

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

    this.src_init();
  },

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

    this.src_init();
  }
}