﻿
// ManagedCheckBox is an UI control with states of Checked/Unchecked, event 'checkedChanged'
// and fully customizable UI.

AppearanceMode = new Object();
AppearanceMode.Standard = 0;
AppearanceMode.Hover = 1;

function ManagedCheckBox(parent, label) {

    this.parent = parent;    
    this.Checked = false;
    this.CheckedChanged = new Event();
    this.Label = label;
    this.Enabled = true;
    
    this.loadPresentation();
}

function ManagedCheckBox_Prototype() {

    this.loadPresentation = function () {
        this.box = document.createElement('span');
        this.setBoxClass('managedCheckBox-unchecked');
        this.box.innerHTML = this.Label;        
        this.parent.appendChild(this.box);
        this.box.onselectstart = function () { return false; };
        this.initialize();
    }
    
    this.initialize = function () {
        this.addOnclickHandler();
        this.addAppearanceHandlers();
    }
    
    this.addOnclickHandler = function () {
    
        var _this = this;
        Sys.UI.DomEvent.addHandler(this.box, 'click', function () {
            if(_this.Enabled) {
                _this.Checked = !_this.Checked;
                _this.CheckedChanged.invokeHandlers();
            }
        });    
    }
    
    this.addAppearanceHandlers = function () {
        
        var _this = this;
        this.box.onmouseover = function () {
            _this.setAppearance(AppearanceMode.Hover);
        }
        this.CheckedChanged.addHandler(this.box.onmouseout = function () {
            _this.setAppearance(AppearanceMode.Standard);
        });
    }
    
    this.setAppearance = function (appearanceMode) {
        if(!this.Enabled) {
            this.setBoxClass(this.getRequiredBoxClassName() + '-disabled');
        }
        else {
            switch(appearanceMode) {
                case AppearanceMode.Hover:
                    this.setBoxClass(this.getRequiredBoxClassName() + '-hover');
                    break;
                case AppearanceMode.Standard:
                    this.setBoxClass(this.getRequiredBoxClassName());
                    break;
            }
        }
    }
    
    this.getRequiredBoxClassName = function () {
        if(this.Checked == true) return 'managedCheckBox-checked';
        else return 'managedCheckBox-unchecked';
    }
    
    this.setBoxClass = function (className) {
        this.box.className = 'managedCheckBox ' + className;
    }
    
    this.SetChecked = function (checkedValue) {
        if(this.Checked != checkedValue) {
            this.Checked = checkedValue;
            this.CheckedChanged.invokeHandlers();
        }
    }
    
    this.SetEnabled = function (value) {
        this.Enabled = value;
        this.setAppearance(AppearanceMode.Standard);
    }
}

ManagedCheckBox.prototype = new ManagedCheckBox_Prototype();