// JScript File
// Business / Address GUI objects
/// <reference path="lib.js"/>

// Need to make the addresses look nice.

var siteRootUrl = getSiteRootUrl();
//alert('siteRootUrl ' + siteRootUrl);
var wsUrl = 'http://' + siteRootUrl + 'WS.asmx';

AddressDisplay = function(container, address, title) {
    this.container = container;
    this.address = address;
    this.title = title;
    this.init(0);
}
var p = AddressDisplay.prototype;
p.inheritFrom(CDiv);
p.init = function(depth) {
    this.superInit(depth);
    this.setClass('AddressDisplay');
    
    var o = new Object();
    o.text = this.title;
    this.cdTitle = new CDTitleBar(this, o);
    
    this.cdAddress = new CDiv(this, {'cssClass':'cdAddress'});
    
    var btnEdit = nBtn('Edit');
    btnEdit.control = this;
    this.btnEdit = btnEdit;
    btnEdit.onclick = function() {this.control.btnEdit_click(); return false};
    
    this.addMyEl();
}

p.btnEdit_click = function() {
    if(this.onedit) this.onedit();
}

p.setAddress = function(value) {
    //alert ('setAddress value: ' + value);
    this.address = value;
    if (this.address) {
        this.cdAddress.setInnerHTML(this.address.toHTML());
    } else {
        this.cdAddress.setInnerHTML('');
    }
}

AddressEntry = function(container, options) {
    //this.div = div;
    this.container = container;
    this.options = options;
    //div.control = this;
    //this.addressType = addressType;
    //this.postcodeFirst = postcodeFirst;
    this.init(0);
}
var p = AddressEntry.prototype;
p.inheritFrom(CDiv);
p.init = function(depth) {
    //alert ('init AddressEntry');
    this.superInit(depth);
    
    setClass(this.el, 'AddressEntry');
    //var spanTitle = nS();
    //setClass(spanTitle, 'spanTitle');
    
//    var titleText = '';
//    if (this.addressType == 'contact') {
//        titleText = 'Contact Address';
//    }
//    if (this.addressType == 'billing') {
//        titleText = 'Billing Address';
//    }
    
    //spanTitle.innerHTML = titleText;
    
    //this.el.appendChild(spanTitle);
    
    // regex for validating there is more than 1 character?
    // put all of these inside a cdValidator?
    //labelText, rxValidation, isRequired
    //alert ('(this.options.labelWidth) ' + (this.options.labelWidth));
    
    // This needs to allow the address to be obtained from the postcode.
    // Will call a webservice to do this.
    
    // Does this through a modal dialog box.
    
    var o = new Object();
    o.labelText = 'Address line 1:';
    o.isRequired = true;
    if (this.options.labelWidth) o.labelWidth = this.options.labelWidth;
    
    if (this.options.getAddressFromPostcode == true) {
        //alert('this.options.getAddressFromPostcode ' + this.options.getAddressFromPostcode);
        
        o = {'labelText':'Post Code:','isRequired':true,'labelWidth':this.options.labelWidth}
        //alert ('this.options.type ' + this.options.type);
        if (this.options.type == 'businessDetails') {
            
            o.questionMarkText = 'This should be the post code of the address at which the phone is located.';
            //o.q
        }
        
        this.tfPostcode = new TextField(this, o);
        this.tfPostcode.setClass('tfPostcode');
        
        // a listBox for the postcodes
        //this.selectPostcode = new CSelect(this, true, 12);

        // probably best to use a link styled button, blue.
        // want to use an ImageButton.

        //this.btnGetAddressFromPostcode = new CButton(this, { 'text': 'Find address' });
        //this.btnGetAddressFromPostcode.setClass('btnGetAddressFromPostcode');
        //this.btnGetAddressFromPostcode.onclick = function() { this.container.btnGetAddressFromPostcode_onclick(); }
        
        this.btnGetAddressFromPostcode = new ImageButton(this, { 'src': '/images/btn-find-address.gif' });
        this.btnGetAddressFromPostcode.setClass('btnGetAddressFromPostcode');
        this.btnGetAddressFromPostcode.onclick = function() { this.container.btnGetAddressFromPostcode_onclick(); }
        
        this.cdc2 = new CDClear(this);
        this.selectPostcode = new CSelect(this, {'multiple': true, 'size': 12});
        this.selectPostcode.hide();
        
        //this.selectPostcode = new CSelect(this, true, 12);
        //this.btnUseAddressFromPostcode = new CButton(this, { 'text': 'Use address' });
        this.btnUseAddressFromPostcode = new ImageButton(this, { 'src': '/images/btn-use-address.gif' });
        this.btnUseAddressFromPostcode.setClass('btnUseAddressFromPostcode');
        this.btnUseAddressFromPostcode.onclick = function() {this.container.btnUseAddressFromPostcode_onclick();}
        this.btnUseAddressFromPostcode.hide();
        
        o = new Object();
        o.labelText = 'Address line 1:';
        o.isRequired = true;
        if (this.options.type == 'businessDetails') {
            o.questionMarkText = 'This should be the address at which the phone is located.';
        }
        
        this.tfAddress1 = new TextField(this, o);
        //this.tfAddress2 = new TextField(this, 'Address line 2');
        
        // maybe there would be better ways of creating these options objects - particularly when they share lots of properties
        //  and those properties are derived from the control's options.
        
        this.tfAddress2 = new TextField(this, {'labelText':'Address line 2:','labelWidth':this.options.labelWidth});
        this.tfAddress3 = new TextField(this, {'labelText':'Address line 3:','labelWidth':this.options.labelWidth});
        //this.tfAddress4 = new TextField(this, {'labelText':'Address line 4:','labelWidth':this.options.labelWidth});
        //this.tfTown = new TextField(this, {'labelText':'Town/City:','isRequired':true,'labelWidth':this.options.labelWidth});
        this.tfPostTown = new TextField(this, {'labelText':'Town/City:','isRequired':true,'labelWidth':this.options.labelWidth});
        this.tfCounty = new TextField(this, {'labelText':'County:','labelWidth':this.options.labelWidth});
        
    } else {
        this.tfAddress1 = new TextField(this, o);
        //this.tfAddress2 = new TextField(this, 'Address line 2');
        
        // maybe there would be better ways of creating these options objects - particularly when they share lots of properties
        //  and those properties are derived from the control's options.
        
        this.tfAddress2 = new TextField(this, {'labelText':'Address line 2:','labelWidth':this.options.labelWidth});
        this.tfAddress3 = new TextField(this, {'labelText':'Address line 3:','labelWidth':this.options.labelWidth});
        //this.tfAddress4 = new TextField(this, {'labelText':'Address line 4:','labelWidth':this.options.labelWidth});
        //this.tfTown = new TextField(this, {'labelText':'Town/City:','isRequired':true,'labelWidth':this.options.labelWidth});
        this.tfPostcode = new TextField(this, {'labelText':'Post Code:','isRequired':true,'labelWidth':this.options.labelWidth});
        this.tfPostTown = new TextField(this, {'labelText':'Town/City:','isRequired':true,'labelWidth':this.options.labelWidth});
        this.tfCounty = new TextField(this, {'labelText':'City/County:','isRequired':true,'labelWidth':this.options.labelWidth});
        
    }
    
    // maybe a postcode control that can call the WS and provide the address as an object after it has been selected.
    var postcodeID = UID();
    
    // Perhaps a PostcodeField would do the job.
    
    var btnOK = nBtn('OK');
    btnOK.control = this;
    btnOK.onclick = function() {this.control.btnOK_click();};
    
    this.addMyDiv();
}

p.btnUseAddressFromPostcode_onclick = function() {
    //var url = ws
    var methodName = 'GetAddress';
    var id = this.selectPostcode.getValue();
    var sr = new SoapRequest(wsUrl, methodName);
    // name, value
    //alert ('id ' + id);
    sr.addNewParam('id', id);
    
    postcodeEntry = this;
    
    sr.send(this.cbGetAddress);
    
}


p.cbGetAddress = function(rx) {
    var address = rx.getElementsByTagName('Address')[0];
    //alert ('address.getAttribute(address1)' + address.getAttribute('address1'));
    //alert (rx.dfgfsfd.fdsgsgfds);
    postcodeEntry.tfAddress1.setValue(address.getAttribute('line1'));
    postcodeEntry.tfAddress2.setValue(address.getAttribute('line2'));
    postcodeEntry.tfAddress3.setValue(address.getAttribute('line3'));
    //postcodeEntry.tfAddress4.setValue(address.getAttribute('line4'));
    //postcodeEntry.tfAddress4.setValue(address.getAttribute('address4'));
    postcodeEntry.tfPostTown.setValue(address.getAttribute('postTown'));
    postcodeEntry.tfCounty.setValue(address.getAttribute('county'));
    
    postcodeEntry.btnUseAddressFromPostcode.hide()
    postcodeEntry.selectPostcode.hide()

}


p.btnGetAddressFromPostcode_onclick = function() {
    //alert ('btnGetAddressFromPostcode_onclick');
    
    // use the webservice to get the result.
    //url, methodName
    
    // the URL? Get the root URL.
    //var url = 'http://continentaltelecom.co.uk.local/WS.asmx';
    //var url = 'http://continentaltelecom.co.uk/WS.asmx';
    
    var methodName = 'GetPostcodeAddresses';
    var postcode = this.tfPostcode.getValue();
    var sr = new SoapRequest(wsUrl, methodName);
    // name, value
    sr.addNewParam('postcode', postcode);
    
    postcodeEntry = this;
    
    sr.send(this.cbGetAddresses);
    
}

p.cbGetAddresses = function(rx) {
    //alert ('cbGetAddress');
    //alert (rx.xml);
    // get all Address elements
    var addresses = rx.getElementsByTagName('Address');
    postcodeEntry.selectPostcode.options.items = new Array();
    for (var c = 0; c < addresses.length; c++) {
        var description = addresses[c].getAttribute('description');
        var id = addresses[c].getAttribute('id');
        postcodeEntry.selectPostcode.add(new AOption({'text':description, 'value':id}));
    }
    postcodeEntry.selectPostcode.render();
    postcodeEntry.selectPostcode.show();
    //this.selectPostcode.render();
    //this.selectPostcode.show();
    //this.lbPostcodeAddresses.show();
    postcodeEntry.btnUseAddressFromPostcode.show();
}

// validate all fields

p.getValue = function() {
    return new Address(this.tfAddress1.value, this.tfAddress2.value, this.tfAddress3.value, this.tfCounty.value, this.tfPostcode.value);
}

p.validate = function() {
    var isValid = true;
    //var res = true;
    var res = new ValidationResult();
    var res1;
    
    // may need to validate more than one field.
    
    res1 = this.tfAddress1.validate();
    isValid = isValid && res1.options.isValid;
    res.add(res1);
    
    // need to validate the postcode field.
    
    // check with a regular expression
    var postCode = this.tfPostcode.getValue();
    
    var rxMatch = postCode.match(/^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) ?[0-9][A-Za-z]{2})$/);
    
    //alert ('rxMatch ' + rxMatch);
    // if it is not a valid postcode, add the validation result error.
    if (!rxMatch) {
        res.add(new ValidationResult({'isValid': false, 'fieldName': 'Postcode'}));
    }
    
    
    
    
    
    
    
    
    // check with regex.
    
    
    
    
    
    
    //alert ('this.tfAddress1.validate() ' + this.tfAddress1.validate());
//    if (!this.tfAddress1.validate()) {
//        //alert ('false ' + false);
//        res = false;
//    }
    
    
    
//    if (res) {
//        // should probably use getValue.
//        this.address = 
//    }
    
    res.options.isValid = isValid;
    return res;
}

p.btnOK_click = function() {

    // Validate
    if (this.validate()) {
        // create the address objects.
        this.address = new Address(this.tfAddress1.value, this.tfAddress2.value, this.tfAddress3.value, this.tfTown.value, this.tfCounty.value, this.tfPostcode.value);
        
        if (this.proceed) this.proceed();
    } else {
        
    }
}

p.btnFindAddress_click = function() {
    //alert ('yo');
    // get the list of possible addresses from the server.
}

// Telecom related

var lineRental = 9.99;

Tariff = function(id, name, price, questionMarkText) {
    this.id = id;
    this.name = name;
    this.price = price;
    this.questionMarkText = questionMarkText;
    this.init(0);
}
var p = Tariff.prototype;
p.getPrice = function() {
    return this.price;
}
p.init = function(depth) {
    
}

tariffs = new Array();
tariffs.push(new Tariff(1, 'Pay As You Go', 0, 'Only pay for what you use.'));
//tariffs.push(new Tariff(2, 'Evenings &amp; Weekends', 2.99, '500 Minutes of UK Evenings & Weekend calls'));
//tariffs.push(new Tariff(3, 'Anytime 500', 4.99, '500 Minutes of UK Local and National calls'));
tariffs.push(new Tariff(4, 'Unlimited UK Calls', 7.99, 'Unlimited UK Local & National Calls'));

// why not pass in one parameter, an object (more easily specified with JSON) and this has its values copied into this object?

mergeParams = function(target, params) {
    
    var applicationObjects = new Object();
    applicationObjects['getSuperClass'] = true;
    applicationObjects['superInit'] = true;
    applicationObjects['getSuperInit'] = true;
    applicationObjects['instanceOf'] = true;
    applicationObjects['inheritFrom'] = true;
    for (param in params) {
        //if (typeof fnClass.prototype[prop] == "function") {
        //    this[prop] = fnClass.prototype[prop];
        //}
        //target
        //alert ('typeof params[param] ' + typeof params[param]);
        
        //alert ('param ' + param);
        
        
        
        if (!applicationObjects[param]) {
            target[param] = params[param];
        }
        
    }
    
}

//AddOn = function(id, name, price) {
AddOn = function(options) {
    //this.id = id;
    //this.name = name;
    //this.price = price;
    //alert ('p ' + p);
    //mergeParams(this, p);
    // mergeParams could work well in future objects.
    // json will make code more dense.
    
    this.options = options;
    
}

addOns = new Array();

addOnCategories = new Object();
addOnCategories.standard = new Object();
addOnCategories.feature = new Object();

// what about specifying parameters to the in JSON and having the object apply those to itself upon construction?

// These will be downloaded separately.

//addOns.push(new AddOn({'id':1,'name':'International Call Plan', 'price': 0.99, 'category': 'standard'}))
addOns.push(new AddOn({'id':2,'name':'Caller Display', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':3,'name':'Call Waiting', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':4,'name':'Call Return (1471)', 'price': 1.49, 'category': 'feature'}))
//addOns.push(new AddOn({'id':5,'name':'Answer (1571)', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':6,'name':'Call Diversion', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':7,'name':'Choose To Refuse', 'price': 2.99, 'category': 'feature'}))
addOns.push(new AddOn({'id':8,'name':'Call Sign', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':9,'name':'Reminder Call', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':10,'name':'Three Way Calling', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':11,'name':'Call Barring', 'price': 1.49, 'category': 'feature'}))
addOns.push(new AddOn({'id':12,'name':'Level 2 Care', 'price': 3.99, 'category': 'feature'}))
addOns.push(new AddOn({'id':13,'name':'Level 3 Care', 'price': 4.99, 'category': 'feature'}))

// Telecom GUI

RegisterBox = function(container) {
    this.container = container;
    //alert ('this.container ' + this.container);
    //alert ('typeof(this.container) ' + typeof(this.container));
    
    //div.control = this;
    this.init(0);
}

var p = RegisterBox.prototype;
p.inheritFrom(CDiv);
p.init = function(depth) {
    this.superInit(depth);
    
    var rgCustomerType = new RadioGroup(this, 'customertype')
    
    //var divRBRes = nS();
    //var divRBBus = nS();
    
    var cb_ctbrResidential_click = new Callback(this, 'ctbrResidential_click');
    var ctbrResidential = new RadioButton(rgCustomerType, 'Residential', cb_ctbrResidential_click);
    
    var cb_ctbrBusiness_click = new Callback(this, 'ctbrBusiness_click');
    var ctbrBusiness = new RadioButton(rgCustomerType, 'Business', cb_ctbrBusiness_click);

    //this.residentialOrder = new RegisterBox.ResidentialOrder(this);
    //this.residentialOrder.hide();

    this.businessOrder = new RegisterBox.BusinessOrder(this);
    this.businessOrder.hide();

    this.addMyDiv();
}

p.ctbrResidential_click = function() {
    //alert('ctbrResidential_click');
    this.setCustomerType('residential');
}
p.ctbrBusiness_click = function() {
    //alert('ctbrResidential_click');
    this.setCustomerType('business');
}

p.setCustomerType = function(customerType) {
    if (this.cusotmerType != customerType) {
        this.customerType = customerType;
        if (this.customerType == 'business') {
            this.showBusinessOrder();
        }
        if (this.customerType == 'residential') {
            this.showResidentialOrder();
        }
    }
}

p.showResidentialOrder = function() {
    this.residentialOrder.show();
    this.businessOrder.hide();
}
p.showBusinessOrder = function() {
    this.residentialOrder.hide();
    this.businessOrder.show();
}

RegisterBox.Tariffs = function(div, phoneNumber) {
    this.div = div;
    this.phoneNumbers = phoneNumbers;
    this.init();
}
var p = RegisterBox.Tariffs.prototype;
p.init = function() {
    
}

AddonsSelectionChoice = function() {
    this.init();
}
var p = AddonsSelectionChoice.prototype;
p.init = function() {
    
}

// No need for this, can be much more easily described as a JavaScript object.

Address = function(line1, line2, line3, town, county, postcode) {
    this.line1 = line1;
    this.line2 = line2;
    this.line3 = line3;
    this.town = town;
    this.county = county;
    this.postcode = postcode;
}
var p = Address.prototype;
p.toHTML = function() {
    
    var res = '';
    //if (this.line1 && this.line1 != '') res = res + this.line1;
    var ra = new Array();
    if (this.line1 && this.line1 != '') ra.push(this.line1);
    if (this.line2 && this.line2 != '') ra.push(this.line2);
    if (this.line3 && this.line3 != '') ra.push(this.line3);
    if (this.town && this.town != '') ra.push(this.town);
    if (this.county && this.county != '') ra.push(this.county);
    
    //alert (
    if (this.postcode && this.postcode != '') ra.push(this.postcode);   
    
    //var first = true;
    for (var c = 0; c < ra.length; c++) {
        //alert ('ra[c] ' + ra[c]);
        if (c > 0) res = res + '<br />'
        res = res + ra[c];
    }
    //alert ('res ' + res);
    return res;
}

SingleAddressInput = function() {
    
}

// Model

// Order does not need to be defined like this.

Order = function() {
    this.init();
}
var p = Order.prototype;
p.inheritFrom(EventRaiser);
p.init = function() {
    this.phoneNumbers = new Order.PhoneNumbers();
}

// need to be able to tell the order that certain things have been added / removed.
//  order then needs to tell various GUI components that this has happenned, which will then update themselves.
p.addPhoneNumber = function(phoneNumber) {
    this.phoneNumbers.add(phoneNumber);
    this.raiseEvent('AddPhoneNumber');
    
}

// number, numLines, tariff, addOns, index
Order.PhoneNumber = function(options) {
    //tariff
//    this.number = number;
//    this.numLines = parseInt(numLines);
//    this.tariff = tariff;
//    
//    //this.addOnsMenuValues = addOnsMenuValues;
//    this.addOns = addOns;
    
    this.options = options;
    
    // calculate the price from the input parameters
    //alert('this.price ' + this.price);
    this.init();
}
var p = Order.PhoneNumber.prototype;
p.init = function() {
    //this.price = 
    //alert ('this.addOns.length ' + this.addOns.length);
    this.options.index = phoneNumberIndex;
    if (!this.options.tariff) this.options.tariff = tariffs[0];
    
}
p.getFeaturesString = function() {
    if (this.options.addOns) {
        if (this.options.addOns.length > 0) {
            
            var strFeatures = '';
            var price = 0;
            for (var c = 0; c < this.options.addOns.length; c++) {
                if (strFeatures.length > 0) strFeatures = strFeatures + ', ';
                strFeatures = strFeatures + this.options.addOns[c].options.name;
                price = price + this.options.addOns[c].options.price;
                
            }
            
            //this.ctlFeaturesLabel.setInnerHTML(strFeatures);
            
            return strFeatures;
            
        } else {
            //this.ctrFeatures.hide();
            return '';
        }
        
    }
}

p.getFeaturesPrice = function() {
    if (this.options.addOns) {
        if (this.options.addOns.length > 0) {
            
            var strFeatures = '';
            var price = 0;
            for (var c = 0; c < this.options.addOns.length; c++) {
                if (strFeatures.length > 0) strFeatures = strFeatures + ', ';
                strFeatures = strFeatures + this.options.addOns[c].options.name;
                price = price + this.options.addOns[c].options.price;
                
            }
            //this.ctlFeaturesLabel.setInnerHTML(strFeatures);
            return price;
            
        } else {
            //this.ctrFeatures.hide();
            return '';
        }
        
    }
}
p.getPricePerLine = function() {
    var featuresPrice = 0;
    var isFirstFeature = true;
    for (var c = 0; c < this.options.addOns.length; c++) {
        var i = this.options.addOns[c];
        //text, value, selected
        //alert ('i.text ' + i.text + ', i.value ' + i.value + ', i.selected' + i.selected);
        
        // currently text is OK, value is its ID and selected is undefined.
        
        //var ao = addOns[i.value];
        //alert ('ao.price ' + ao.price);
        
        //if (i.selected) alert ('i.selected ' + i.selected);
        
        //alert ('i.category ' + i.category);
//        if (i.options.category == 'feature') {
//            if (!isFirstFeature) {
//                featuresPrice = featuresPrice + 0.99
//            } else {
//                featuresPrice = featuresPrice + 1.49
//            }
//        }
//        if (i.options.category == 'standard') {
//            //alert ('standard');
//            featuresPrice = featuresPrice + 0.99
//        }
        featuresPrice = featuresPrice + i.options.price;
        // need to get the add-on price.
        
        
        
    }
    
    var billingMethodPrice = this.options.paperBillingChoice.price;

    return ((this.options.tariff.price + 9.99 + featuresPrice + billingMethodPrice)).toFixed(2);
}

p.getPrice = function() {
    // need to get the prices from the addOnsMenuValues

    //alert ('this.addOns ' + this.addOns);
    
    //var addOnAOptions = this.
    
    //alert ('this.addOnsMenuValues.length ' + this.addOnsMenuValues.length);
    
    // treat the features differently - 1.49 for the first one, then 99p for all subsequent
    
    
    //alert ('this.addOns.length ' + this.addOns.length);
    return (this.options.numLines * this.getPricePerLine()).toFixed(2);
}

Order.PhoneNumbers = function() {
    this.init();
}
var p = Order.PhoneNumbers.prototype;
p.init = function() {
    this.items = new Array();
}
p.add = function(item) {
    this.items.push(items);
}

var appOrder = new Order();

// Will use the new object system.

RegisterBox.ProgressIndicator = function(container) {
    this.container = container;
    this.aStages = new Array();
    this.aStages.push(new AProgressStage(1, '1. Business Details'));
    this.aStages.push(new AProgressStage(2, '2. Your Order'));
    this.aStages.push(new AProgressStage(3, '3. Payment Method'));
    this.aStages.push(new AProgressStage(4, '4. Confirm'));
    this.selectStage(1);
    this.init(0);
}
var p = RegisterBox.ProgressIndicator.prototype;
p.inheritFrom(ProgressIndicator);
p.init = function(depth) {
    this.superInit(depth);
    this.render();
}

QuestionCircle = function(container, options) {
    //alert('QuestionCircle');
    this.container = container;
    this.options = options;
    this.init(0);
}
var p = QuestionCircle.prototype;
p.inheritFrom(Control);
p.init = function(depth) {
    //alert ('qs init');
    
    this.superInit(0);
    this.el = nE('img');
    this.el.src = 'images/BQu_13x13.gif';
    this.el.alt = this.options.text;
    this.el.title = this.options.text;
    //if (this.options.innerHTML) this.el.innerHTML = this.options.innerHTML;
    if (this.options.cssClass) {
        setClass(this.el, this.options.cssClass);
    } else {
        setClass(this.el, 'QuestionCircle');
    }
    //alert ('this.options.visible ' + this.options.visible);
    //alert ('this.options.visible==false ' + this.options.visible==false);
    
    if (this.options.visible != false) {
        if (!this.options.visible) this.options.visible = true;
    }
    this.setVisibility(this.options.visible);
    this.addMyEl();
}