Site.Widgets.RichCheckbox = Class.create
(   
    Site.Base,
    {
        initialize: function($super, element, options)
        {
            $super();
            
            this.element = element;
            
            this.setOptions
            (
                options,
                {
                    checkedClassName: "checked",
                    text: ""
                }
            );

            this.addObservers("elementOnClick");
            
            this.className = this.element.className;
            this.text = this.options.text;
            this.id = this.element.id;
            
            this.label = this.element.next();
            
            if (this.label)
            {
                this.text = this.label.innerHTML;
            }
            
            this._setup();
            
        },
    
        _getTemplate: function()
        {
            return Site.Widgets.RichCheckbox.TEMPLATE;
        },
        
        _setup: function()
        {
            this.valueElement = null;
            
            
            var html = this._getTemplate().interpolatep
            (
                {
                    id: this.element.id,
                    className: this.element.className,
                    name: this.element.name || this.element.id,
                    value: this.element.value,
                    checked: this.element.checked ? 'checked="checked"' : '',
                    label: this.text
                }
            );
            
            var originalElement = this.element.replace(html);
            originalElement = null;
            
            if (this.label)
                this.label = this.label.remove();
        
            this.valueElement = $(this.id);
            this.element = $(this.id + '-link');
            
            if (this.valueElement.checked)
                this.check();
            
            addEvent(this.element, "click", this.observers.elementOnClick);
        },
        
        elementOnClick: function(event)
        {
            var element = Event.element(event);
            
            if (this.checked)
            {
                this.uncheck();
            }   
            else
            {
                this.check();
            }
            
            if (element.blur)
                element.blur();
                
            element = null;
            
            if (this.options.onClick)
            {
                this.options.onClick(this);
            }
           
            Event.stop(event);
        },
        
        getValue: function()
        {
            return this.valueElement.value;
        },
        
        check: function()
        {
            this.checked = true;
            this.valueElement.checked = true;
            
            this.element.addClassName(this.options.checkedClassName);
        },
        
        uncheck: function()
        {
            this.checked = false;
            this.valueElement.checked = false;
            
            this.element.removeClassName(this.options.checkedClassName);
        },
        
        destroy: function()
        {
            //this.options.onClick = null;
            removeEvent(this.element, "click", this.observers.elementOnClick);

            //this.element = null;
        }
    }
);

Object.extend
(
    Site.Widgets.RichCheckbox,
    {
        TEMPLATE: '<input id="#{id}" name="#{name}" type="checkbox" value="#{value}" #{checked} style="display: none" /><a href="#" id="#{id}-link" class="#{className}"><span>' + 
                  '#{label}' + 
                  '</span></a>'
    }
);