//------------------------------------------ Do a soft show on an element
    //                                           using the cFader class

    var arFade = new Array();                // cFader object must be registered here

    //============================================= cFader class main definition
    //============================================= cFader class main definition
    //============================================= cFader class main definition
    //============================================= cFader class main definition

    function cFader(element, opacity, opMax, index, idInterval, ctInterval, dOpacity){
        this.idInterval = idInterval;
        this.ctInterval = ctInterval;                    // mS cycle length
        this.dOpacity   = dOpacity;
        this.opMax      = opMax;                // maximum opacity to achieve

        this.element = element;
        this.opacity = opacity;
        this.index   = index;

        this.FadeIn  = FadeIn;
        this.FadeOut = FadeOut;
        }

    function FadeIn(){
        if (this.dOpacity != 0){             // stop existing fade
            clearInterval(this.idInterval);
            }
        this.dOpacity = 1;
        stScript = 'DoFade(' + this.index + ')';
        this.idInterval = setInterval(stScript, this.ctInterval);
        }

    function FadeOut(){
        if (this.dOpacity != 0){             // stop existing fade
            clearInterval(this.idInterval);
            }
        this.dOpacity = -1;
        stScript = 'DoFade(' + this.index + ')';
        this.idInterval = setInterval(stScript, this.ctInterval);
        }

    //------------------------------------------ register an element for fading
    //
    function cfaRegister(id, opacity, opMax){
        var cfa = undefined;
        var el = document.getElementById(id);

        cfa = new cFader(el, opacity, opMax, arFade.length, 0, 20, 0);
        arFade[arFade.length] = cfa;

        return cfa.index;
        }


    function GetCfa(id){                    // get a registered element
        var i, cfa = undefined;

        for (i=0; i<arFade.length; i++){
            cfa = arFade[i];
            if (cfa.element.id == id){
                break;
                }
            }
        if (cfa == undefined){
            Crib('GetCfa: ' + id + ' undefined');
            }
        return cfa;
        }

    function DumpCfaList(){
        var i;
        for (i=0; i<arFade.length;i++){
            Crib(i + ' = ' + arFade[i].element.id);
            }
        }

    function DoFade(index){

        var cfa = arFade[index];

        if (cfa.dOpacity > 0){
            if (cfa.opacity < cfa.opMax){            // fade in
                cfa.opacity += cfa.dOpacity;
                eleSetOpacityDirect(cfa.element, cfa.opacity);
                }
            else {
                cfa.dOpacity = 0;
                clearInterval(cfa.idInterval);
                }
            }
        else {
            if (cfa.opacity > 0){            // fade out
                cfa.opacity += cfa.dOpacity;                    // dOpacity is negative here
                eleSetOpacityDirect(cfa.element, cfa.opacity);
                }
            else {
                cfa.dOpacity = 0;
                clearInterval(cfa.idInterval);
                }
            }
        }


    function SoftShowById(id){
        var cfa = GetCfa(id);
//        Crib('SoftShow ' + id);
        cfa.FadeIn();
        }

    function SoftHideById(id){
        var cfa = GetCfa(id);
//        Crib('SoftHide ' + id);
        cfa.FadeOut();
        }


    function SoftShowList(stList){
        var i;
        var arShow = stList.split('|');
        for (i=0; i<arShow.length; i++){
            SoftShowById(arShow[i]);
            }
        }

    function SoftHideList(stList){
        var i;
        var arHide = stList.split('|');
        for (i=0; i<arHide.length; i++){
            SoftHideById(arHide[i]);
            }
        }