/*
Class:
    df.WebDynamicObjectContainer
Mixin:
    df.WebBaseContainer_mixin
Extends:
    df.WebBaseControl

This class is the client-side representation of the WebDynamicObjectContainer. This class
contains the logic required to support dynamic object creation in DataFlex.
*/

df.tQueuedSyncProp = {
    sO  : df.tString,
    sP  : df.tString,
    bA  : df.tBool,
    sV  : df.tString,
    tVT : {}
}

df.tSyncProp = {
    sO : df.tString,
    aP : [{
        sN : df.tString,
        sV : df.tString
    }]
};

df.tAdvSyncProp = {
    sO : df.tString,
    sP : df.tString,
    tV : {}
};

//  Use the WebBaseContainer_mixin and inherit from WebBaseControl
df.WebDynamicObjectContainerBase = df.mixin("df.WebBaseContainer_mixin", "df.WebBaseControl");

df.WebDynamicObjectContainer = function WebDynamicObjectContainer(sName, oParent){
    //  Forward Send
    df.WebDynamicObjectContainer.base.constructor.call(this, sName, oParent);

    this.prop(df.tAdv, "paSyncProps", null);
    this.prop(df.tAdv, "paAdvSyncProps", null);

    this.addSync("paSyncProps");
    this.addSync("paAdvSyncProps");

    // Private variables
    this._aSyncPropQueue  = []; // Contains both regular and advanced syncprops
};

df.defineClass("df.WebDynamicObjectContainer", "df.WebDynamicObjectContainerBase", {

    /*
    Published method that allows the server to send a list
    of queued synchronized properties to the client so that
    these can be applied after the objects are created.
    */
    loadQueuedSyncProps : function() {
        var sVal = this._tActionData, aQueuedSyncProps = df.sys.vt.deserialize(sVal, [ df.tQueuedSyncProp ]);

        for (var tQueuedSyncProp of aQueuedSyncProps) {
            if (tQueuedSyncProp.bA) {
                tQueuedSyncProp.tV = this.deserializeVT(sVal['c'][4]);
            }

            this._aSyncPropQueue.push(tQueuedSyncProp);
        }
    },

    /*
    Published method that allows the server to send an new
    structure of dynamic objects to the client to be rendered.
    */
    loadDynamicObjects : function() {
        var oObj, aObjects, aObjNames = [], vtObjects = this._tActionData;

        aObjects = this.deserializeObjectDefArray(vtObjects);

        for (var tDef of aObjects) {
            oObj = this.initDynamicObject(tDef, this, false, aObjNames);

            // Set owner to WebDynamicObjectContainer
            oObj._oOwner = this;
        }

        if (this._eElem) {
            this.renderChildren();
            this.afterRender();
            this.position();

            this.getWebApp().resize();
            this.finishRendering(aObjNames);
        }
    },

    /*
    Published method that allows the server to insert an object
    into the client's data structure.
    */
    insertDynamicObject : function(sParent, sInsertAfter) {
        var tDef, oObj, oParent, oInsertAfter, aObjNames = [], vtObject = this._tActionData, iIndex;

        tDef = this.deserializeObjectDef(vtObject);
        oParent = this.getWebApp().findObj(sParent) || this;
        oInsertAfter = oParent[sInsertAfter] || null;
        oObj = this.initDynamicObject(tDef, oParent, true, aObjNames);

        if (this._eElem) {
            // Insert the object in its parent's children structure
            iIndex = oInsertAfter !== null ? oParent._aChildren.indexOf(oInsertAfter) + 1 : 0;
            oParent.insertChild(oObj, iIndex);

            // Render the child object
            oParent.renderChild(oObj);

            this.getWebApp().resize();
            this.finishRendering(aObjNames);
        }
    },

    /*
    Published method that allows the server to insert an object
    into the client's data structure. This function specifically
    inserts the object at the beginning of its parent's list of children.
    */
    prependDynamicObject : function(sParent) {
        var tDef, oObj, oParent, aObjNames = [], vtObject = this._tActionData;

        tDef = this.deserializeObjectDef(vtObject);
        oParent = this.getWebApp().findObj(sParent) || this;
        oObj = this.initDynamicObject(tDef, oParent, true, aObjNames);

        if (this._eElem) {
            // Insert the object in its parent's children structure
            oParent.insertChild(oObj, 0);

            // Render the child object
            oParent.renderChild(oObj);

            this.getWebApp().resize();
            this.finishRendering(aObjNames);
        }
    },

    /*
    Published method that allows the server to insert an object
    into the client's data structure. This function specifically
    inserts the object at the end of its parent's list of children.
    */
    appendDynamicObject : function(sParent) {
        var tDef, oObj, oParent, aObjNames = [], vtObject = this._tActionData, iIndex;

        tDef = this.deserializeObjectDef(vtObject);
        oParent = this.getWebApp().findObj(sParent) || this;
        oObj = this.initDynamicObject(tDef, oParent, true, aObjNames);

        if (this._eElem) {
            // Insert the object in its parent's children structure
            iIndex = oParent._aUIObjects.length;
            oParent.insertChild(oObj, iIndex);

            // Render the child object
            oParent.renderChild(oObj);

            this.getWebApp().resize();
            this.finishRendering(aObjNames);
        }
    },

    /*
    Published method that moves the given dynamic object
    behind the second passed dynamic object.
    */
    moveDynamicObject : function(sDynamicObjectId, sInsertAfter) {
        var oObj, eObj, oOldParent, oInsertAfter, oNewParent, iResizeCount, webApp = this.getWebApp(), iIndex;

        oObj = webApp.findObj(sDynamicObjectId);
        oInsertAfter = webApp.findObj(sInsertAfter);
        oNewParent = oInsertAfter._oParent;
        oOldParent = oObj._oParent;

        // Store object's DOM element
        eObj = oObj._eElem;

        // Update object's parent
        oObj._oParent = oNewParent;

        // Move object
        oOldParent.removeChild(oObj);

        iIndex = oInsertAfter !== null ? oNewParent._aChildren.indexOf(oInsertAfter) + 1 : 0;
        oNewParent.insertChild(oObj, iIndex, oInsertAfter);
        oNewParent.renderChild(oObj, eObj);

        // Resize the webapp.
        // For some reason, the web app requires x amount of resizes, where
        // x = depth(oObj) - 1. The depth of an object is defined by how
        // far into the object structure it is located, starting from the view.
        iResizeCount = oObj.getObjectLevel();
        for (var i = 0; i < iResizeCount; i++) {
            webApp.resize();
        }
    },

    /*
    Published method that moves the given dynamic object
    behind the second passed dynamic object.
    */
    moveDynamicObjectToIndex : function(sDynamicObjectId, sParentId, iIndex) {
        var oObj, eObj, oOldParent, oNewParent, iResizeCount, webApp = this.getWebApp(), iIndex;

        oObj = webApp.findObj(sDynamicObjectId);
        oNewParent = webApp.findObj(sParentId);
        oOldParent = oObj._oParent;

        // Store object's DOM element
        eObj = oObj._eElem;

        // Update object's parent
        oObj._oParent = oNewParent;

        // Move object
        oOldParent.removeChild(oObj);

        oNewParent.insertChild(oObj, iIndex);
        oNewParent.renderChild(oObj, eObj);

        // Resize the webapp.
        // For some reason, the web app requires x amount of resizes, where
        // x = depth(oObj) - 1. The depth of an object is defined by how
        // far into the object structure it is located, starting from the view.
        iResizeCount = oObj.getObjectLevel();
        for (var i = 0; i < iResizeCount; i++) {
            webApp.resize();
        }
    },

    /*
    Published method that destroys the given dynamic object
    and removes it from the container.
    */
    destroyDynamicObject : function(sDynamicObjectId) {
        var oObj, oParent, iResizeCount;

        oObj = this.getWebApp().findObj(sDynamicObjectId);

        oParent = oObj._oParent;
        oParent.removeChild(oObj);
        oParent.unrenderChild(oObj);

        // Destroy the actual object
        oObj.destroy();

        // Resize the webapp.
        // For some reason, the web app requires x amount of resizes, where
        // x = depth(oObj) - 1. The depth of an object is defined by how
        // far into the object structure it is located, starting from the view.
        iResizeCount = oParent.getObjectLevel();
        for (var i = 0; i < iResizeCount; i++) {
            this.getWebApp().resize();
        }
    },

    finishRendering : function(aObjs) {
        tVT = df.sys.vt.serialize(aObjs);
        this.serverAction("FinishRendering", [], tVT);
    },

    /*
    Initializes a dynamic web object.
    */
    initDynamicObject : function(tDef, oParent, bInsert, aObjNames) {
        var i, sP, oObj, FConstructor, webApp = this.getWebApp();

        //  Check for name conflict
        if(!oParent[tDef.sName]){

            //  Find constructor
            FConstructor = webApp.getConstructor(tDef.sType, tDef);
            if(typeof(FConstructor) === "function"){

                //  Create new instance
                oParent[tDef.sName] = oObj = new FConstructor(tDef.sName, oParent);
            }else{
                throw new df.Error(999, "Could not find class '{{0}}'", this, [tDef.sType]);
            }
        }else{
            throw new df.Error(999, "Naming conflict with child object '{{0}}'", this, [tDef.sName]);
        }

        //  Set the published property values
        for(i = 0; i < tDef.aProps.length; i++){
            sP = tDef.aProps[i].sN;

            //  Check naming convention
            if(sP.charAt(0) !== "_"){
                //  Check if not conficting with child object or function
                if(!oObj[sP] || (typeof(oObj[sP]) !== "object" && typeof(oObj[sP]) !== "function")){
                    oObj._set(sP, tDef.aProps[i].sV, false, false);
                }else{
                    throw new df.Error(999, "Naming conflict with property '{{0}}' of object '{{1}}'", this, [ sP,  tDef.sName ] );
                }
            }else{
                throw new df.Error(999, "Published property '{{0}}' of object '{{1}}' properties should not start with an '_'", this, [tDef.aProps[i].sV, tDef.sName ]);
            }
        }

        //  Set the advanced typed published property values
        if(tDef.aAdvP){
            for(i = 0; i < tDef.aAdvP.length; i++){
                sP = tDef.aAdvP[i].sN;

                //  Check naming convention
                if(sP.charAt(0) !== "_"){
                    if(!oObj[sP] || (typeof(oObj[sP]) !== "object" && typeof(oObj[sP]) !== "function")){
                        //  Make sure to mark it as advanced (this is used to determine this when sending a call
                        if(!oObj._oTypes[sP]){
                            oObj._oTypes[sP] = df.tAdv;
                        }

                        //  Actually set the property value
                        oObj._set(sP, tDef.aAdvP[i].tV, false, false);
                    }else{
                        throw new df.Error(999, "Naming conflict with property '{{0}}' of object '{{1}}'", this, [ sP,  tDef.sName ] );
                    }
                }else{
                    throw new df.Error(999, "Published property '{{0}}' of object '{{1}}' properties should not start with an '_'", this, [tDef.aAdvP[i].sV, tDef.sName ]);
                }
            }
        }

        // Apply queued WebSet operations
        this.applyQueuedSyncProps(oObj);

        // Set owner to WebDynamicObjectContainer
        oObj._oOwner = this;

        if (!bInsert) {
            webApp.newWebObject(oObj, oParent);
        }

        //  Create children
        for(i = 0; i < tDef.aObjs.length; i++){
            this.initDynamicObject.call(this, tDef.aObjs[i], oObj, false, aObjNames);
        }

        aObjNames.push(oObj._sName);

        //  Call create
        oObj.create(tDef);

        return oObj;
    },

    /*
    Resets the container, including all saved properties.
    */
    resetContainer : function() {
        for (var oControl of this._aChildren){
            oControl.destroy();
        }

        this._aChildren = [];
        this._aFloats = [];
        this._aUIObjects = [];
        this._aPanels = [];

        // Reset variables
        this._aSyncPropQueue  = [];

        this.getWebApp().resize();
    },

    /*
    Finds and applies all queued SyncProps for the given dynamic object.
    */
    applyQueuedSyncProps : function(oObj) {
        var vPropValue, aQueue;

        aQueue = this._aSyncPropQueue.filter(e => e.sO === oObj.getLongName());
        this._aSyncPropQueue = this._aSyncPropQueue.filter(e => e.sO !== oObj._sName);


        // Apply queued synchronized property changes
        for (var tQueuedSyncProp of aQueue) {
            if (tQueuedSyncProp.bA) {
                vPropValue = tQueuedSyncProp.tVT;
            } else {
                vPropValue = tQueuedSyncProp.sV;
            }
            oObj.addSync(tQueuedSyncProp.sP);
            oObj.set(tQueuedSyncProp.sP, vPropValue);
        }
    },

    /*
    This method gathers the synchronized properties for this Web Object.

    @param  aObjs   Reference to the array of synchronized property objects to which the properties are added.
    @param  aAdvProps   Reference to the array in which the advanced sync props are gathered.
    @private
    */
    getSynced : function(aObjs, aAdvProps){
        var i, sProp, aProps = [], val, sObj = this.getLongName();

        //  Gather synchronized properties
        for(sProp in this._oSynced){
            if(this._oSynced.hasOwnProperty(sProp)){
                val = this.get(sProp);

                if(this._oTypes[sProp]){
                    val = this.toServerType(val, this._oTypes[sProp]);
                }
                if(val === undefined){
                    val = null;
                }

                //  Switch between advanced and local synchronized properties
                if(this._oTypes[sProp] === df.tAdv){
                    aAdvProps.push({
                        sO : sObj,
                        sP : sProp,
                        tV : val
                    });
                }else{
                    aProps.push({
                        sN : sProp,
                        sV : val
                    });
                }
            }
        }

        //  If synced props where found we add it to the list with wrappers
        if(aProps.length > 0){
            aObjs.push({
                sO : sObj,
                aP : aProps
            });
        }
    },


    /*
    Setter method for the server variable 'paSyncProps'.
    Receives data regarding synchronized properties from the server
    and sets the values on the client accordingly.
    */
    set_paSyncProps : function(sVal) {
        var tPropList, webApp = this.getWebApp();
        tPropList = df.sys.vt.deserialize(sVal, [ df.tSyncProp ]);
        webApp.handleSyncProps(tPropList);
    },

    /*
    Getter method for the server variable 'paSyncProps'.
    Collects the values of all registered synchronized properties
    and sends them to the server.
    */
    get_paSyncProps : function() {
        var aPropList = [], aAdvPropList = [];

        for (var oObj of this._aChildren) {
            oObj.getSynced(aPropList, aAdvPropList);
        }

        // Sort the properties array for each object
        for (var iObj in aPropList) {
            aPropList[iObj].aP.sort((a, b) => (a.sN > b.sN) ? 1 : ((b.sN > a.sN) ? -1 : 0))
        }

        return df.sys.vt.serialize(aPropList, [ this._tSyncProp ]);
    },

    /*
    Setter method for the server variable 'paAdvSyncProps'.
    Receives data regarding advanced synchronized properties from
    the server and sets the values on the client accordingly.
    */
    set_paAdvSyncProps : function(sVal) {
        var tPropList, webApp = this.getWebApp();

        tPropList = df.sys.vt.deserialize(sVal, [ df.tAdvSyncProp ]);

        for (var i = 0; i < sVal['c'].length; i++) {
            tPropList[i].tV = sVal['c'][i]['c'][2];
            this.addAdvSyncProp(tPropList[i].sO, tPropList[i].sP);
        }

        webApp.handleAdvSyncProps(tPropList);
    },

    /*
    Getter method for the server variable 'paAdvSyncProps'.
    Collects the values of all registered advanced
    synchronized properties and sends them to the server.
    */
    get_paAdvSyncProps : function() {
        var aPropList = [], aAdvPropList = [];

        for (var oObj of this._aChildren) {
            oObj.getSynced(aPropList, aAdvPropList);
        }

        // Sort the properties array for each object
        for (var iObj in aAdvPropList) {
            aAdvPropList[iObj].aP.sort((a, b) => (a.sN > b.sN) ? 1 : ((b.sN > a.sN) ? -1 : 0))
        }

        return this.serializeAdvSyncProps(aAdvPropList);
    },

    /*
    Sends an action to the server to be executed.
    */
    handleAction : function(oActionObj){
        var oAction = [];

        oAction.push({
            sTarget : oActionObj.oWO._sName,
            sAction : oActionObj.sAction,
            aParams : oActionObj.aParams,
            tData   : oActionObj.tData
        });

        var tVT = df.sys.vt.serialize(oAction);
        this.serverAction("DynamicServerAction", [], tVT, oActionObj.fHandler, oActionObj.oHandlerEnv);
    },

    onFocus : function(oEV){
        //  Intercept onfocus as a container cannot take the focus
    },

    onBlur : function(oEV){
        //  Intercept onfocus as a container cannot take the focus
    },

    /*
    Deserializes a value tree
    */
    deserializeVT : function(tVT) {
        function parseWebValueTreeValue(tVT) {
            var a = [],
                i;
            for (i = 0; i < tVT.c.length; i++) {
                a.push(parseWebValueTreeValue(tVT.c[i]));
            }
            return a;
        }

        return {
            v: tVT.c[0].v,
            c: parseWebValueTreeValue(tVT.c[1])
        };
    },

    /*
    Serializes a value tree
    */
    serializeVT : function(tStruct) {
        function composeWebValueTreeValue(oObj) {
            return {
                v: "",
                c: composeWebValueTree(oObj["c"])
            };
        }

        function composeWebValueTree(oObj) {
            return {
                v: "",
                c: [{
                    v: oObj["v"].toString(),
                    c: []
                }, composeWebValueTreeValue(oObj["c"])]
            };
        }
        try {
            return composeWebValueTree(tStruct);
        } catch (oErr) {
            throw new df.Error(999, "Unable to serialize valuetree, invalid data format!\n\r\n\rMSG: {{0}}", this, [oErr.message]);
        }
    },

    /*
    Deserializes an object definition value tree.
    */
    deserializeObjectDef : function(tVT) {
        function parseObject(tVT) {
            return {
                sName: tVT.c[0].v,
                sType: tVT.c[1].v,
                aProps: parsePropArray(tVT.c[2]),
                aAdvP: parseAdvPropArray(tVT.c[3]),
                aObjs: parseChildren(tVT.c[4])
            };
        }

        function parsePropArray(tVT) {
            var a = [],
                i;
            for (i = 0; i < tVT.c.length; i++) {
                a.push(parseProp(tVT.c[i]));
            }
            return a;
        }

        function parseProp(tVT) {
            return {
                sN: tVT.c[0].v,
                sV: tVT.c[1].v
            };
        }

        function parseAdvPropArray(tVT) {
            var a = [],
                i;
            for (i = 0; i < tVT.c.length; i++) {
                a.push(parseAdvProp(tVT.c[i]));
            }
            return a;
        }

        function parseAdvProp(tVT) {
            return {
                sN: tVT.c[0].v,
                tV: df.WebDynamicObjectContainer.prototype.deserializeVT(tVT.c[1])
            };
        }

        function parseChildren(tVT) {
            return df.WebDynamicObjectContainer.prototype.deserializeObjectDefArray(tVT);
        }

        try {
            return parseObject(tVT);
        } catch (oErr) {
            throw new df.Error(999, "Unable to deserialize object, invalid data format!\n\r\n\rMSG: {{0}}", this, [oErr.message]);
        }
    },

    /*
    Deserializes a list of object definitions
    */
    deserializeObjectDefArray : function(tVT) {
        function parseObjectArray(tVT) {
            var a = [],
                i;
            for (i = 0; i < tVT.c.length; i++) {
                a.push(df.WebDynamicObjectContainer.prototype.deserializeObjectDef(tVT.c[i]));
            }

            return a;
        }

        try {
            return parseObjectArray(tVT);
        } catch (oErr) {
            throw new df.Error(999, "Unable to deserialize object array, invalid data format!\n\r\n\rMSG: {{0}}", this, [oErr.message]);
        }
    },

    /*
    Serializes an array of advanced syncprops
    */
    serializeAdvSyncProps :function(tStruct) {
        function composeAdvSyncProp(oObj) {
            return {
                v: "",
                c: [{
                    v: oObj["sO"].toString(),
                    c: []
                }, {
                    v: oObj["sP"].toString(),
                    c: []
                }, this.serializeVT(oObj["tV"])]
            };
        }

        function composeAdvSyncPropsArray(aArray) {
            var tVT = {
                    v: "",
                    c: []
                },
                i;
            for (i = 0; i < aArray.length; i++) {
                tVT.c.push(composeAdvSyncProp(aArray[i]));
            }
            return tVT;
        }

        function composeAdvSyncPropsObject(oObj) {
            return {
                v: "",
                c: [{
                    v: oObj["sO"].toString(),
                    c: []
                }, composeAdvSyncPropsArray(oObj["aP"])]
            };
        }

        function composeAdvSyncPropsObjectArray(aArray) {
            var tVT = {
                    v: "",
                    c: []
                },
                i;
            for (i = 0; i < aArray.length; i++) {
                tVT.c.push(composeAdvSyncPropsObject(aArray[i]));
            }
            return tVT;
        }
        try {
            return composeAdvSyncPropsObjectArray(tStruct);
        } catch (oErr) {
            throw new df.Error(999, "Unable to serialize AdvSyncProps array, invalid data format!\n\r\n\rMSG: {{0}}", this, [oErr.message]);
        }
    }
});


df.WebObject.prototype.getObjectLevel = function() {
    var oObj = this, oView = this.getView(), iLevel = 0;

    while(oObj !== oView){
        oObj = oObj._oParent;
        iLevel++;
    }

    return iLevel;
}

/*
Inserts a new child after the passed existing child.
*/
df.WebObject.prototype.insertChild = function(oChild, iIndex) {
    this._aChildren.splice(iIndex, 0, oChild);
}

/*
Renders the given child.

If eOptChild is passed as a parameter, this function will not freshly
render the oChild object, but rather used the passed DOM element.
*/
df.WebObject.prototype.renderChild = function(oChild, eOptChild) {
    // Subclasses of cWebObject class will implement this method
}

/*
Removes the child from the parent's list of children.
*/
df.WebObject.prototype.removeChild = function(oChild) {
    var iIndex = this._aChildren.indexOf(oChild);
    if (iIndex !== -1) {
        this._aChildren.splice(iIndex, 1);
    }
}

/*
Unrenders the given child.
*/
df.WebObject.prototype.unrenderChild = function(oChild) {
    // Subclasses of cWebObject class will implement this method
}


df.WebBaseContainer.prototype.insertChild = function(oChild, iIndex) {
    if(oChild instanceof df.WebBaseUIObject){
        if(oChild._bFloating){
            this._aFloats.push(oChild);
        }else if(oChild.peRegion !== undefined){
            this._bPanels = true;
            this._aPanels.push(oChild);
        }else{
            this._aUIObjects.splice(iIndex, 0, oChild);
        }
    }

    this.getBase("df.WebBaseContainer_mixin").insertChild.call(this, oChild, iIndex);
}

df.WebBaseContainer.prototype.renderChild = function(oChild, eOptChild) {
    var eChild, oInsertAfter, eBefore, iIndex, bMoveOperation;

    if (eOptChild) {
        bMoveOperation = true;
    }

    iIndex = this._aUIObjects.indexOf(oChild);
    oInsertAfter = iIndex >= 1 ? this._aUIObjects[iIndex - 1] : null;
    eChild = eOptChild || oChild.render();

    if (oChild instanceof df.WebPanel) {
        switch (oChild.peRegion) {
            case df.ciRegionBottom:
                this._eRegionBottom = eChild;
                this._oRegionBottom = oChild;
                break;

            case df.ciRegionCenter:
                this._eRegionCenter = eChild;
                this._oRegionCenter = oChild;
                break;

            case df.ciRegionLeft:
                this._eRegionLeft = eChild;
                this._oRegionLeft = oChild;
                break;

            case df.ciRegionRight:
                this._eRegionRight = eChild;
                this._oRegionRight = oChild;
                break;

            case df.ciRegionTop:
                this._eRegionTop = eChild;
                this._oRegionTop = oChild;
                break;
        }

        this.placePanels();
    } else if (this._eContent) {
        if (eChild) {
            if (oInsertAfter !== null) {
                eBefore = oInsertAfter._eElem.nextElementSibling;
            } else {
                // oInsertAfter is null when the element to be inserted is the first
                // child object of its parent.
                eBefore = this._eContent.firstElementChild;
            }

            this._eContent.insertBefore(eChild, eBefore);
        }
    }


    if (!bMoveOperation) {
        oChild.afterRender();
    }

    this.position();

    this.getBase("df.WebBaseContainer_mixin").renderchild.call(this, oChild, eOptChild);
}

df.WebBaseContainer.prototype.removeChild = function(oChild) {
    var iIndex;

    if (oChild instanceof df.WebBaseUIObject) {
        if(oChild._bFloating){
            iIndex = this._aFloats.indexOf(oChild);
            this._aFloats.splice(iIndex, 1);
        }else if(oChild.peRegion !== undefined){
            iIndex = this._aPanels.indexOf(oChild);

            if (this._aPanels.length === 0) {
                this._bPanels = false;
            }

            this._aPanels.splice(iIndex, 1);
        }else{
            iIndex = this._aUIObjects.indexOf(oChild);
            this._aUIObjects.splice(iIndex, 1);
        }
    }

    this.getBase("df.WebBaseContainer_mixin").removeChild.call(this, oChild);
}

df.WebBaseContainer.prototype.unrenderChild = function(oChild) {
    var eChild;

    eChild = oChild._eElem;

    if (oChild instanceof df.WebPanel) {
        switch (oChild.peRegion) {
            case df.ciRegionBottom:
                this._eRegionBottom = null;
                this._oRegionBottom = null;
                break;

            case df.ciRegionCenter:
                this._eRegionCenter = null;
                this._oRegionCenter = null;
                break;

            case df.ciRegionLeft:
                this._eRegionLeft = null;
                this._oRegionLeft = null;
                break;

            case df.ciRegionRight:
                this._eRegionRight = null;
                this._oRegionRight = null;
                break;

            case df.ciRegionTop:
                this._eRegionTop = null;
                this._oRegionTop = null;
                break;
        }
    } else {
        this._eContent.removeChild(eChild);
    }

    this.position();

    this.getBase("df.WebBaseContainer_mixin").unrenderChild.call(this, oChild);
}


df.WebGroup.prototype.insertChild = function(oChild, iIndex) {
    if(oChild instanceof df.WebBaseUIObject){
        if(oChild._bFloating){
            this._aFloats.push(oChild);
        }else if(oChild.peRegion !== undefined){
            this._bPanels = true;
            this._aPanels.push(oChild);
        }else{
            this._aUIObjects.splice(iIndex, 0, oChild);
        }
    }

    df.WebGroup.base.insertChild.call(this, oChild, iIndex);
}

df.WebGroup.prototype.renderChild = function(oChild, eOptChild) {
    var eChild, oInsertAfter, eBefore, iIndex, bMoveOperation;

    if (eOptChild) {
        bMoveOperation = true;
    }

    iIndex = this._aUIObjects.indexOf(oChild);
    oInsertAfter = iIndex >= 1 ? this._aUIObjects[iIndex - 1] : null;
    eChild = eOptChild || oChild.render();

    if (oChild instanceof df.WebPanel) {
        switch (oChild.peRegion) {
            case df.ciRegionBottom:
                this._eRegionBottom = eChild;
                this._oRegionBottom = oChild;
                break;

            case df.ciRegionCenter:
                this._eRegionCenter = eChild;
                this._oRegionCenter = oChild;
                break;

            case df.ciRegionLeft:
                this._eRegionLeft = eChild;
                this._oRegionLeft = oChild;
                break;

            case df.ciRegionRight:
                this._eRegionRight = eChild;
                this._oRegionRight = oChild;
                break;

            case df.ciRegionTop:
                this._eRegionTop = eChild;
                this._oRegionTop = oChild;
                break;
        }

        this.placePanels();
    } else if (this._eContent) {
        if (eChild) {
            if (oInsertAfter !== null) {
                eBefore = oInsertAfter._eElem.nextElementSibling;
            } else {
                // oInsertAfter is null when the element to be inserted is the first
                // child object of its parent.
                eBefore = this._eContent.firstElementChild;
            }

            this._eContent.insertBefore(eChild, eBefore);
        }
    }


    if (!bMoveOperation) {
        oChild.afterRender();
    }

    this.position();

    df.WebGroup.base.renderChild.call(this, oChild, eOptChild);
}

df.WebGroup.prototype.removeChild = function(oChild) {
    var iIndex;

    if (oChild instanceof df.WebBaseUIObject) {
        if(oChild._bFloating){
            iIndex = this._aFloats.indexOf(oChild);
            this._aFloats.splice(iIndex, 1);
        }else if(oChild.peRegion !== undefined){
            iIndex = this._aPanels.indexOf(oChild);

            if (this._aPanels.length === 0) {
                this._bPanels = false;
            }

            this._aPanels.splice(iIndex, 1);
        }else{
            iIndex = this._aUIObjects.indexOf(oChild);
            this._aUIObjects.splice(iIndex, 1);
        }
    }

    df.WebGroup.base.removeChild.call(this, oChild);
}

df.WebGroup.prototype.unrenderChild = function(oChild) {
    var eChild;

    eChild = oChild._eElem;

    if (oChild instanceof df.WebPanel) {
        switch (oChild.peRegion) {
            case df.ciRegionBottom:
                this._eRegionBottom = null;
                this._oRegionBottom = null;
                break;

            case df.ciRegionCenter:
                this._eRegionCenter = null;
                this._oRegionCenter = null;
                break;

            case df.ciRegionLeft:
                this._eRegionLeft = null;
                this._oRegionLeft = null;
                break;

            case df.ciRegionRight:
                this._eRegionRight = null;
                this._oRegionRight = null;
                break;

            case df.ciRegionTop:
                this._eRegionTop = null;
                this._oRegionTop = null;
                break;
        }
    } else {
        this._eContent.removeChild(eChild);
    }

    this.position();
    df.WebGroup.base.unrenderChild.call(this, oChild);
}


df.WebDynamicObjectContainer.prototype.insertChild = function(oChild, iIndex) {
    if(oChild instanceof df.WebBaseUIObject){
        if(oChild._bFloating){
            this._aFloats.push(oChild);
        }else if(oChild.peRegion !== undefined){
            this._bPanels = true;
            this._aPanels.push(oChild);
        }else{
            this._aUIObjects.splice(iIndex, 0, oChild);
        }
    }

    df.WebDynamicObjectContainer.base.insertChild.call(this, oChild, iIndex);
},

df.WebDynamicObjectContainer.prototype.renderChild = function(oChild, eOptChild) {
    var eChild, oInsertAfter, eBefore, iIndex, bMoveOperation;

    if (eOptChild) {
        bMoveOperation = true;
    }

    iIndex = this._aUIObjects.indexOf(oChild);
    oInsertAfter = iIndex >= 1 ? this._aUIObjects[iIndex - 1] : null;
    eChild = eOptChild || oChild.render();

    if (oChild instanceof df.WebPanel) {
        switch (oChild.peRegion) {
            case df.ciRegionBottom:
                this._eRegionBottom = eChild;
                this._oRegionBottom = oChild;
                break;

            case df.ciRegionCenter:
                this._eRegionCenter = eChild;
                this._oRegionCenter = oChild;
                break;

            case df.ciRegionLeft:
                this._eRegionLeft = eChild;
                this._oRegionLeft = oChild;
                break;

            case df.ciRegionRight:
                this._eRegionRight = eChild;
                this._oRegionRight = oChild;
                break;

            case df.ciRegionTop:
                this._eRegionTop = eChild;
                this._oRegionTop = oChild;
                break;
        }

        this.placePanels();
    } else if (this._eContent) {
        if (eChild) {
            if (oInsertAfter !== null) {
                eBefore = oInsertAfter._eElem.nextElementSibling;
            } else {
                // oInsertAfter is null when the element to be inserted is the first
                // child object of its parent.
                eBefore = this._eContent.firstElementChild;
            }

            this._eContent.insertBefore(eChild, eBefore);
        }
    }


    if (!bMoveOperation) {
        oChild.afterRender();
    }

    this.position();

    df.WebDynamicObjectContainer.base.renderChild(oChild);
},

df.WebDynamicObjectContainer.prototype.removeChild = function(oChild) {
    var iIndex;

    if (oChild instanceof df.WebBaseUIObject) {
        if(oChild._bFloating){
            iIndex = this._aFloats.indexOf(oChild);
            this._aFloats.splice(iIndex, 1);
        }else if(oChild.peRegion !== undefined){
            iIndex = this._aPanels.indexOf(oChild);

            if (this._aPanels.length === 0) {
                this._bPanels = false;
            }

            this._aPanels.splice(iIndex, 1);
        }else{
            iIndex = this._aUIObjects.indexOf(oChild);
            this._aUIObjects.splice(iIndex, 1);
        }
    }

    df.WebDynamicObjectContainer.base.removeChild.call(this, oChild);
},

df.WebDynamicObjectContainer.prototype.unrenderChild = function(oChild) {
    var eChild;

    eChild = oChild._eElem;

    if (oChild instanceof df.WebPanel) {
        switch (oChild.peRegion) {
            case df.ciRegionBottom:
                this._eRegionBottom = null;
                this._oRegionBottom = null;
                break;

            case df.ciRegionCenter:
                this._eRegionCenter = null;
                this._oRegionCenter = null;
                break;

            case df.ciRegionLeft:
                this._eRegionLeft = null;
                this._oRegionLeft = null;
                break;

            case df.ciRegionRight:
                this._eRegionRight = null;
                this._oRegionRight = null;
                break;

            case df.ciRegionTop:
                this._eRegionTop = null;
                this._oRegionTop = null;
                break;
        }
    } else {
        this._eContent.removeChild(eChild);
    }

    this.position();

    df.WebDynamicObjectContainer.base.unrenderChild.call(this, oChild);
}


df.WebList.prototype.insertChild = function(oChild, iIndex) {
    if(oChild._bIsColumn){
        oChild._iColIndex = this._iColCount++;
        oChild._iCol = this._aColumns.length;
        this._aColumns.splice(iIndex, 0, oChild);
    }
    if(oChild._bIsSwipeButton){
        oChild._iColIndex = this._iColCount++;
        this._aSwipeBtns.splice(iIndex, 0, oChild);
    }

    df.WebList.base.insertChild.call(this, oChild, iIndex);
}

df.WebList.prototype.renderChild = function(oChild, eOptChild) {
    this.redraw();
    df.WebList.base.renderChild.call(this, oChild, eOptChild);
}

df.WebList.prototype.removeChild = function(oChild) {
    var iIndex = this._aChildren.indexOf(oChild);

    if(oChild._bIsColumn){
        oChild._iColIndex = this._iColCount--;
        oChild._iCol = this._aColumns.length;
        this._aColumns.splice(iIndex, 1);
    }
    if(oChild._bIsSwipeButton){
        oChild._iColIndex = this._iColCount--;
        this._aSwipeBtns.splice(iIndex, 1);
    }

    df.WebList.base.removeChild.call(this, oChild);
}

df.WebList.prototype.unrenderChild = function(oChild) {
    this.redraw();
    df.WebList.base.unrenderChild.call(this, oChild);
}

/*

    New WebApp methods

*/
df.WebApp.prototype.getOwner = function() {
    return this;
},

df.WebApp.prototype.findObj = function(sName) {
    var i, aParts, oObj;

    if(sName === ""){
        return this;
    }

    aParts = sName.split(/[\. | \$]/);

    oObj = this;
    for(i = 0; i < aParts.length && oObj; i++){
        oObj = oObj[aParts[i]];
    }

    return (typeof oObj === "object" && oObj) || null;
}


/*

    New WebObject properties

*/
df.WebObject.prototype._oOwner = null;


/*

    New WebObject methods

*/
df.WebObject.prototype.getLongName = function() {
    var sName, oOwner, sDivider;

    if(this instanceof df.WebApp){
        return "";
    }

    sName = (this._oParent && this._oParent.getLongName()) || "";
    oOwner = this.getOwner();
    sDivider = ".";

    if (sName) {
        if (oOwner !== this.getWebApp()) {
            if (this._oParent === oOwner) {
                sDivider = "$";
            }
        }

        sName = sName + sDivider + this._sName;
    } else {
        sName = this._sName;
    }

    return sName;
}

df.WebObject.prototype.getOwner = function() {
    if (this._oParent instanceof df.WebDynamicObjectContainer) {
        return this._oParent;
    } else {
        return this._oParent.getOwner();
    }
}

df.WebObject.prototype.serverActionEx = function(oConf){
    var oView, sMethod, oAction = new df.ServerAction();

    //  Configure action
    oAction.oWO = this;
    oAction.sAction = sMethod = oConf.sMethod;
    oAction.aParams = oConf.aParams || [];
    oAction.tData = oConf.tData || null;
    oAction.fHandler = oConf.fHandler || null;
    oAction.oHandlerEnv = oConf.oHandlerEnv || this;
    oAction.aViews = oConf.aViews || [];

    //  Add current view
    oView = this.getView();
    if(oView){
        oAction.aViews.push(oView);
    }

    //  Determine call mode
    if(oConf.eCallMode){
        oAction.eCallMode = oConf.eCallMode;
    }else{
        oAction.eCallMode = this._oServerActionModes[sMethod.toLowerCase()] || df.cCallModeDefault;
        if(oAction.eCallMode === df.cCallModeProgress && this._oServerWaitMsg[sMethod.toLowerCase()] ){
            oAction.sProcessMessage = this._oServerWaitMsg[sMethod.toLowerCase()];
        }
    }

    //  Pass on to owner object
    this.getOwner().handleAction(oAction);
}