﻿// Display the numbers in a list as someone is editing them.

// Will show Order items.

// More work will be done on this control.
//  It works fairly well as it is, but needs to be re-done.


RegisterBox.NumbersDisplay = function(container) {
    this.container = container;
    this.init(0);
}
var p = RegisterBox.NumbersDisplay.prototype;
p.inheritFrom(CDiv);
p.init = function() {
    this.createMyDiv('registerNumbersDisplay');
    this.addMyDiv();
}
p.add = function(number) {
    var nDisplay = new RegisterBox.NumberDisplay(this, number);
}

// The number display could show a summary form for the numbers as they are added.
// Perhaps also show an 'edit' link.

// Probably two different controls to do this though.

RegisterBox.NumberDisplay = function(container, number) {
    this.container = container;
    this.number = number;
    this.init(0);
}
var p = RegisterBox.NumberDisplay.prototype;
p.init = function(depth) {
    this.superInit(depth);
    var d = this.createMyDiv('RegisterBox.NumberDisplay');
    
    //var d = this.el;

    //alert ('this.number.number ' + this.number.number);
    
    var dPhoneNumber = nD(this.number.number, 'rndPhoneNumber');
    
    var dTariffName = nD();
    setClass(dTariffName, 'rndTariffName');
    dTariffName.innerHTML = this.number.tariff.name;
    
    var dAddOns = nD();
    setClass(dAddOns, 'rndAddOns');
    
    var dPrice = nD();
    setClass(dPrice, 'rndPrice');
    dPrice.innerHTML = '£' + this.number.price;
    
    var dControls = nD();
    btnDelete = nBtn('Delete');
    dControls.appendChild(btnAddressOK);
    btnDelete.onclick = function() {this.control.btnDelete_click();};
    btnDelete.control = this;
    
    setClass(dControls, 'rndControls');
    
    // needs to include the phone number, tariff name, any add-ons (currently list them all), option to delete this.
    
    d.appendChild(dPhoneNumber);
    d.appendChild(dTariffName);
    d.appendChild(dAddOns);
    d.appendChild(dPrice);
    
    this.addMyDiv();
}

p.btnDelete_click = function() {
    //alert('btnDelete_click');
}

// Can display fairly large of small?

var orderSummary;
OrderSummary = function(container) {
    this.container = container;
    this.init(0);
}
var p = OrderSummary.prototype;
p.inheritFrom(CDiv);
p.init = function(depth) {
    //alert ('OrderSummary');
    
    // options contain
    // showEditLinks
    this.options = this.options || {};
    this.options.showEditLinks = true;
    // showDeleteLinks
    
    this.superInit(depth);
    orderSummary = this;
    this.setClass('OrderSummary');
    
    this.cdTitleBar = new CDiv(this);
    this.cdTitleBar.setClass('TitleBar');
    this.cdTitleBar.setInnerHTML('Order Summary ');
    
    // then a table below.
    
    //this.cdTable = new CTable(this);
    //this.cdTbody = new CTbody(this.cdTable);
    
    //this.ctrHeader = new CTr(this.cdTbody);
    //this.ctrHeader.setClass('ctrHeader');
    
    
    this.numberSummaries = new Array();
    this.idxNumberSummaries = new Object();
    this.cdNumbers = new CDiv(this);
    
    //this.cdNoNumbers = new CDiv(this, {'cssClass': 'cdNoNumbers'});
    //this.cdNoNumbers.setInnerHTML('No numbers have yet been added to your order');
    
    this.cdPaymentPrice = new CDiv(this, {'cssClass': 'PaymentMethodPrice'});
    this.cdPaymentPrice.hide();
    
    this.cdTotalPrice = new CDiv(this, {'cssClass': 'TotalPrice'});
    
    //var d = this.createMyDiv('OrderSummary');
    
    // Perhaps have subcontrols inside.
    // a system to track / index subcontrols by name
    // to have them in categorised lists
    
    // add subcontrol
    // remove subcontrol (ready to be put elsewhere)
    // re-order subcontrols
    
    this.addMyEl();
}

p.initSubcontrols = function() {
    this.subcontrols = new Object();
    
}

p.addSubcontrol = function(subcontrol) {
    // assumes the default subcontrol location
    // Using contentPlaceholders
    
    // the subcontrol will most likely be an 'OrderPhoneLine.'.
}
p.setOrder = function(value) {
    this.order = value;
    
    // need to make sure that all of the numbers in the order are represented.
    
}

p.editnumber = function(numberSummary) {
    //alert('oneditnumber ' + oneditnumber);
    
    var numberIndex = numberSummary.options.number.options.index;
    //alert('numberIndex ' + numberIndex);
    if (this.oneditnumber) this.oneditnumber(numberIndex);
    
}

p.update = function(currentNumber) {
    // need to know how many number summary GUI objects they are.
    // they are each getting updated.
    
    //alert ('this.numberSummaries.length ' + this.numberSummaries.length);
    // update any number summaries that already exists.
    
    // go through each number.
    //alert(phoneNumbers.length);
    
    // Also, when the number is not in the phone numbers index, we hide it.
    
    
    var totalPrice = parseFloat('0');
    var c = 1;
    //alert('c ' + c);
    //alert('phoneNumbers[c] ' + phoneNumbers[c]);
    while (phoneNumbers[c]) {
        // need to ensure there is a number summary.
        var num = phoneNumbers[c];
        if (!this.idxNumberSummaries[c]) {
            if (num) {
                var that = this;
                //if (num.options.landlineNumber.length > 0) {
                    var ns = new OrderSummary.NumberSummary(this.cdNumbers, {'number': num});
                    that.numberSummaries[num.options.index] = ns;
                    ns.onedit = function() {
                        that.editnumber(ns);
                    }
                    this.idxNumberSummaries[c] = ns;
                //}
                
            }
        } else {
            this.idxNumberSummaries[c].update(num);
        }
        if(num) {
            if (this.idxNumberSummaries[c]) this.idxNumberSummaries[c].setIsCurrent(currentNumber == num);
            totalPrice = (totalPrice + parseFloat(num.getPrice()));
        }
        c++;
    }
    
    // go through all of the number summaries, hiding them if they are for numbers that are not in the array,
    // showing them if they are for numbers in the array.
    
    //alert('this.numberSummaries.length ' + this.numberSummaries.length);
    
    for (var c = 0; c < this.numberSummaries.length; c++) {
        if (this.numberSummaries[c]) {
            if (phoneNumbers[this.numberSummaries[c].options.number.options.index]) {
                this.numberSummaries[c].show();
            } else {    
                //alert('hiding');
                this.numberSummaries[c].hide();
            }
        }

    }
    
    
    this.cdPaymentPrice.setInnerHTML(paymentMethod.name + ': £' + parseFloat(paymentMethod.price));
    totalPrice = (totalPrice + parseFloat(paymentMethod.price)).toFixed(2);
    
    if (paymentFrequency == 'Monthly') {
        this.cdTotalPrice.setInnerHTML('Total price per month: £' + totalPrice);
    }
    if (paymentFrequency == 'Quarterly') {
        this.cdTotalPrice.setInnerHTML('Total price per quarter: £' + (4 * totalPrice));
    }
    // also, if there are any numbers without any GUI objects, the GUI objects need to be put in place.
}

getPaymentFrequency = function() {
    
}

// options: 
//  number

OrderSummary.NumberSummary = function(container, options) {
    this.container = container;
    this.options = options;
    this.init(0);
}
var p = OrderSummary.NumberSummary.prototype;
p.inheritFrom(CDiv);
p.init = function(depth) {
    //alert ('OrderSummary.NumberSummary');
    
    this.superInit(depth);
    this.setClass('NumberSummary');
    
    // left section (numberInfo);
    this.cdNumberInfo = new CDiv(this, {'cssClass':'numberInfo'});
    
    this.cdNumberInfo.cdLeft = new CDiv(this.cdNumberInfo, {'cssClass':'cdLeft'});
    this.cdNumberInfo.cdNumber = new CDiv(this.cdNumberInfo, {'cssClass':'cdNumber'});
    this.cdNumberInfo.cdTariff = new CDiv(this.cdNumberInfo, {'cssClass':'cdTariff'});
    this.cdNumberInfo.cdNumPhoneLines = new CDiv(this.cdNumberInfo, {'cssClass':'cdNumPhoneLines'});
    this.cdNumberInfo.cdAddOns = new CDiv(this.cdNumberInfo, {'cssClass':'cdAddOns'});
    this.cdNumberInfo.cdBillingMethod = new CDiv(this.cdNumberInfo, {'cssClass':'cdBillingMethod'});
    this.cdNumberInfo.cdEdit = new CDiv(this.cdNumberInfo, {'cssClass':'cdEdit'});
    this.cdNumberInfo.cdEdit.setInnerHTML('edit');
    //this.cdNumberInfo.cdEdit.control = this;
    this.cdNumberInfo.cdEdit.onclick = function() {return this.container.container.cdNumberInfo_cdEdit_onclick();}
    
    // right section (price)
    this.cdPrice = new CDiv(this, {'cssClass':'cdPrice'});
    
    // from the number want to be able to get a text list of all of the features.
    
    // the number should have some sort of index.
    
    var number = this.options.number;
    //alert ('number.options.index ' + number.options.index);
    this.update(number);
    this.cdc = new CDClear(this);
    
    this.addMyEl();
}
p.cdNumberInfo_cdEdit_onclick = function() {
    //alert ('cdNumberInfo_cdEdit_onclick');
    
    // tell the order summary to edit a particular number by index
    if (this.onedit) {
        this.onedit();
    }
    
}
p.update = function(num) {
    //alert ('update ns');
    
    // the background color will depend on if the number is valid or not.
    
    this.options.number = num;
    
    var number = num;
    //alert ('number.options.index ' + number.options.index);
    this.cdNumberInfo.cdLeft.setInnerHTML(number.options.index + '');
    
    this.cdNumberInfo.cdTariff.setInnerHTML(number.options.tariff.name);
    // need the number of line features.
    
    if (number.options.addOns.length > 0) {
        this.cdNumberInfo.cdAddOns.setInnerHTML(number.getFeaturesString());
        this.cdNumberInfo.cdAddOns.show();
    } else {
        this.cdNumberInfo.cdAddOns.hide();
    }
    
    this.cdNumberInfo.cdBillingMethod.setInnerHTML(number.options.paperBillingChoice.name);
    //alert ('number.options.landlineNumber ' + number.options.landlineNumber);
    //alert ('number.number ' + number.number);
    //alert ('number.options.numLines ' + number.options.numLines);
    if (number.options.numLines > 1) {
        this.cdNumberInfo.cdNumPhoneLines.setInnerHTML(number.options.numLines + ' phone lines');
        this.cdNumberInfo.cdNumPhoneLines.show();
    } else {
        this.cdNumberInfo.cdNumPhoneLines.hide();
    }
    
    //alert('this.container.container.options.showEditLinks ' + this.container.container.options.showEditLinks);
    
    this.cdNumberInfo.cdEdit.setVisibility(this.container.container.options.showEditLinks);
    
    if (number.options.landlineNumber.length > 0) {
        this.cdNumberInfo.cdNumber.setInnerHTML(number.options.landlineNumber + '');
    } else {
        this.cdNumberInfo.cdNumber.setInnerHTML('No number entered');
    }
    
    
    //if (number.options.landlineNumber.length < 4) {
    //    number.options.landlineNumber.dnjkldnsf.fdsfaf.fdsf=3;
    //}
    
    this.cdPrice.setInnerHTML('£' + number.getPrice() + '');
    
    
    
}

// don't set color here, set its class.
// probably do indicate that it is being edited somehow, some colour difference.
// editingValid
// editingNotValid
// notEditing


p.setIsCurrent = function(value) {
    if (value) {
        this.cdNumberInfo.cdEdit.hide();
        // then is the number valid?
        
        // currently it tests the field editors to see if they are valid.
        // this may only need to do this test when numbers are being updated.
        
        var val = numberEntry.isValid();
        if (val)  {
            //this.cdNumberInfo.el.style.backgroundColor = '#CCFFCC';
            //this.cdPrice.el.style.backgroundColor = '#CCFFCC';
            //this.cdNumberInfo.el.style.backgroundColor = '#CCFFCC';
            //this.el.style.backgroundColor = '#CCFFCC';
            
            this.setClass('NumberSummary editingValid');
            
        } else {
            //this.cdNumberInfo.el.style.backgroundColor = '#FFCCCC';
            //this.cdPrice.el.style.backgroundColor = '#FFCCCC';
            //this.cdNumberInfo.el.style.backgroundColor = '#FFCCCC';
            //this.el.style.backgroundColor = '#FFCCCC';
            this.setClass('NumberSummary editingNotValid');
        }
        
        
        
    } else {
        if (this.container.container.options.showEditLinks) this.cdNumberInfo.cdEdit.show();
        //this.cdNumberInfo.el.style.backgroundColor = '#FFFFFF';
        //this.cdPrice.el.style.backgroundColor = '#FFFFFF';
        //this.cdNumberInfo.el.style.backgroundColor = '#FFFFFF';
        //this.el.style.backgroundColor = '#FFFFFF';
        this.setClass('NumberSummary notEditing');
    }
}

refreshEl = function(el) {
    //alert ('refreshEl');
    //el.style.display = 'none';
    //el.style.padding = '2px';
    
    // this solved the bug on a simple level in FF of the table row height not automatically updating.
    
    el.innerHTML = el.innerHTML + '&nbsp';
    
//    var f = function() {
//        refreshEl2(f.el);
//    }
//    f.el = el;
    
    //setTimeout(f, 10);
}

//refreshEl2 = function(el) {
//    //alert ('refreshEl');
//    el.style.display = '';
//    //el.style.padding = '2px';
//    
//}

