var app = {
    STEPS: [],
    DOM_ELEMENTS: {
        buttonBack,       // #buttonBack element
        buttonContinue,   // #buttonContinue element
        buttonPlaceOrder, // #buttonPlaceOrder element
        colourSelect,     // #colour element
        componentList,    // #componentList element
        inputFields,
        lengthInputFieldTemplate, // #templateLengthInputField element
        orderTableTbody, // #orderTableTbody elemnent
        orderBasketTotal, // #orderBasketTotal elemnent
        orderCarriageTotal, // #orderCarriageTotal elemnent
        orderVatTotal, // #orderVatTotal elemnent
        orderTotal, // #orderTotal elemnent
        qtyInputFieldTemplate, // #templateQtyInputField element
        radioFieldTemplate, // #templateRadioField element
        reviewComponentsTbody, // #reviewComponents element
        reviewProductQtyInputField, // #reviewProductQuantity elem
        templateCable, // #templateCable element
        templateConnector, // #templateConnector element
        templateFlexStrip, // #templateFlexStrip element
        templateOptionContent, // #optionContent element
        templateReviewTableRow, // #templateReviewTableRow element
        templateOrderTableRow, // #templateOrderTableRow elemnent
        dialogRemoveProduct, // #dialogRemoveProduct element
        dialogRemoveProductCancel, // #dialogRemoveProductCancel element
        dialogRemoveProductConfirm, // #dialogRemoveProductConfirm element
        dialogDelivery, // #dialogDelivery element
        dialogDeliveryCancel, // #dialogDeliveryCancel element
        dialogDeliveryConfirm, // #dialogDeliveryConfirm element
        buttonDeliveryEdit, // #buttonDeliveryEdit element
        deliveryRadioOptions // [check but I think this can be removed as no radio options on page load anymore]
    },
    orderData: {},
    productData: {},
    componentData: {},
    abortController,
    isLoading,
    
    init: function () {
        // Register event listeners
        document 'keypress' listener // For some elements, simulate a click when enter key is pressed during focus.
        buttonGetStarted click listener // Advance to page 1.
        buttonBack click listener // Back button click handler to go back a page.
        buttonContinue click listener // Continue button click handler to advance a page.
        .js-button-restart click listener // 'Start a New Order' button click event handler. Reset & go to Intro page.
        '.js-radio-field' click listeners
        window onpopstate // When browser history changes, setStateBasedOnURL();
        
        reviewProductQtyInputField 'change' listener
        reviewProductQtyInputField 'keyup' listener
        
        dialogRemoveProductCancel click listener
        dialogRemoveProductConfirm click listener
        
        buttonDeliveryEdit click listener
        dialogDeliveryCancel click listener
        dialogDeliveryConfirm click listener
        buttonPlaceOrder click listener
        
        function initialiseApp() {
            // Set up all pages based on the most recently created product.
        }
    },
    
    isEmpty: function (obj) {
        // Checks if an object is empty;
    },
    
    setStateBasedOnURL: function () {
        // Inspect URL and switch to page given in the URL parameter.
    },
    
    changeState: function (increment) {
        // Jump backwards or forwards pages by a given increment.
    },
    
    fetchOrderData: function () {
        // Make AJAX GET request to fetch orderData JSON from the server.
    },
    
    saveOrderData: function () {
        // Make AJAX POST request to save OrderData to the server.
    },
    
    isIpRatingComplete: function () {
        // Checks if the productData product includes an IP Rating id.
        
    },
    
    isColourComplete: function () {
        // Checks if the productData product has includes a Colour id.
        
    },
    
    isComponentsComplete: function () {
        // Checks if the productData product includes valid components.
        
    },
    
    isProductComplete: function () { },
     // Checks if the productData product is complete.

    validationMessageShow: function (element) {
        // Show an invalid message, appended as a child of the given element.
        
    },
    
    validationMessageRemove: function (element) {
        // Remove any invalid messages present in the given element.
        
    },
    
    validateApp: function () {
        // Show validation messages if pages are accessed before it's possible to populate them.
        
    },
    
    validationTooltipShow: function () { },
    validationTooltipRemove: function () { },
    checkValidity: function () { },
    handleErrors: function () { },
    
    recordReviewProductData: function () { },
    
    orderDataProductRemove: function () {
        // Removes a product from orderData
    },
    
    handleRadioFieldClick: function () { },
    
    handleInputFieldChange: function () { },
    
    handleReviewQtyInputChange: function () { },
    
    handleOrderQtyInputChange: function () { },
    
    handleRemoveButtonClick: function () {
        
    },
    
    handleDeliveryMethodRadioChange: function() {},
    
    initialiseField: function () { },
    colourSelectHandleChange: function () { },
    
    browserSupportsDialog: function () { },
    
    collapseSection: function (element) { },
    
    expandSection: function (element) { },

    ipRatingPage: {
        initialise: function () { },
    },
    
    coloursPage: {
        initialise: function () { },
        request: function () { },
        construct: function() { }
    },

    setupPage: {
        initialise: function () { },
        request: function () { },
        construct: function () { },
        constructComponentCable: function () { },
        constructComponentFlexStrip: function () { },
        constructComponentConnector: function () { },
        setAddControlsState: function() { },
        recordProductData: function () { },
    },
    
    extrasPage: {
        initialise: function () { },
        request: function () { },
        construct: function () { },
        recordProductData: function () { },
        getDefaultProfileLength: function () {
            // Return in mm, the total length of flex strip included in the current order, rounded up to nearest multiple of 1000.
        },
    },
    
    reviewPage: {
        initialise: function () { },
        request: function () { },
        construct: function () { }
    },

    orderPage: {
        initialise: function () { },
        request: function () { },
        construct: function () { }
    },
    
    orderConfirmationPage: {
        request: function () { },
        construct: function () { }
    },
    
    requestPlaceOrder: function () {
        // AJAX request made on clicking "Place Order" button on Step 6 Order page.
    },
}

app.init();