// ManagedLabeledControl is an UI control, which generates a structure similar to this HTML:
// 
// <div class="element">
//     <div class="label">Label text</div>
//     <div class="field">some input control such as <input/></div>
// </div>
//
// This class may be used as base class for other labeled controls (such as ManagedSelect).

function ManagedLabeledControl(parent, label) {
    this.parent = parent;
    this.Label = label;
    
    this.loadPresentation();
}

function ManagedLabeledControl_Prototype() {

    this.loadPresentation = function () {        
        this.box = document.createElement('div');
        this.box.className = 'labeled-control';
        
        this.labelBox = document.createElement('div');
        this.labelBox.className = 'label';
        
        this.fieldBox = document.createElement('div');
        this.fieldBox.className = 'field';
        
        this.box.appendChild(this.labelBox);
        this.box.appendChild(this.fieldBox);
        
        var nbspSpan = document.createElement('span');
        nbspSpan.innerHTML = '&nbsp;';
        this.box.appendChild(nbspSpan);
        
        this.refreshLabel();
        this.setParent();
    }
    
    this.refreshLabel = function () {
        this.labelBox.innerHTML = this.Label;
    }
    
    this.setParent = function () {
        if(this.parent != null) { // because derived classes may use this method after creation of prototype
            this.parent.appendChild(this.box);
        }
    }
    
    this.SetLabel = function(newLabel) {
        this.Label = newLabel;
        this.refreshLabel();
    }
    
    this.SetField = function(newField) {
        this.fieldBox.innerHTML = '';
        this.fieldBox.appendChild(newField);
    }
}

ManagedLabeledControl.prototype = new ManagedLabeledControl_Prototype();