/*
Класс ImgCheckbox
В конструктор передаются параметры:
    imgId        id картинки, которая будет служить чекбоксом
    inputId      id "настоящего" чекбокс-элемента формы
    imgOn        url картинки "включённого" чекбокса
    imgOff       url картинки "выключённого" чекбокса

<input type="checkbox" id="chbox" name="chbox" value="1" checked>
<img src="off.png" onclick="myCheckBox.flip()" style="display:none" id="imgchbox">
<script>myCheckBox = new ImgCheckbox("imgchbox", "chbox", "on.png", "off.png")</script>
*/
function ImgCheckbox(imgId, inputId, imgOn, imgOff) {
    this.imgOn   = imgOn
    this.imgOff  = imgOff
    this.image   = document.getElementById(imgId)
    this.input   = document.getElementById(inputId)

    // предзагрузка картинок
    this.preload_imgOn      = new Image()
    this.preload_imgOn.src  = imgOn
    this.preload_imgOff     = new Image()
    this.preload_imgOff.src = imgOff

    // скрываем обычный чекбокс…
    this.input.style.display = "none"
    // и показываем чекбокс-картинку
    this.image.style.display = "inline"
    
    // установка начального состояния чекбокса
    this.setState(this.input.checked)
}

// установка состояния чекбокса
ImgCheckbox.prototype.setState = function(state) {
    // меняем состояние скрытого чекбокса
    this.input.checked     = state
    // меняем картинку
    this.image.src   = state ? this.imgOn : this.imgOff
}

// изменение состояния чекбокса на обратное (вкл -> выкл и наоборот)
ImgCheckbox.prototype.flip = function() {
    this.setState(!this.input.checked)
}