web/iwf/iwfgui.js

// -----------------------------------------------------------------------------
// IWF - Interactive Website Framework.  Javascript library for creating
// responsive thin client interfaces.
//
// Copyright (C) 2005 Brock Weaver brockweaver@gmail.com
//
//     This library is free software; you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as published
// by the Free Software Foundation; either version 2.1 of the License, or
// (at your option) any later version.
//
//     This library is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
// or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
// License for more details.
//
//    You should have received a copy of the GNU Lesser General Public License
// along with this library; if not, write to the Free Software Foundation,
// Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
//
// Brock Weaver
// brockweaver@gmail.com
// 1605 NW Maple Pl
// Ankeny, IA 50021
// -----------------------------------------------------------------------------

// --------------------------------------------------------------------------
// iwfgui.js
//
// GUI inspection and manipulation functions
//
// Dependencies:
// iwfcore.js
//
// Brock Weaver - brockweaver@sourceforge.net - iwf.sourceforge.net
// v 0.1 - 2005-06-05
// Initial release.
// --------------------------------------------------------------------------
// Issues:
//  Timeouts have hiccups sometimes when they begin to overlap
//  Not tested on Safari -- I need an iMac!
//  _iwfMoveTo() has some calculation problems with certain motionType values
// --------------------------------------------------------------------------

// -----------------------------------
// Dependency Check
if (!window.iwfGetById){
        alert("IWF Dependency Error: you must set a reference to the iwfcore.js file *before* iwfgui.js! I.E.:\n\n<script type='text/javascript' src='iwfcore.js'></script>\n<script type='text/javascript' src='iwfgui.js'></script>");
}
// -----------------------------------


// -----------------------------------
// Begin: Visibility
// -----------------------------------

function iwfShow(id, reserveSpace){
        var el = iwfGetById(id);
        if (reserveSpace){
                if (iwfExists(el) && iwfExists(el.style) && iwfExists(el.style.visibility)) el.style.visibility = 'visible';
        } else {
                if (iwfExists(el) && iwfExists(el.style) && iwfExists(el.style.display)) el.style.display = 'inline';
        }
}

function iwfHide(id, reserveSpace){
        var el = iwfGetById(id);
        if (reserveSpace){
                if (el && iwfExists(el.style) && iwfExists(el.style.visibility)) el.style.visibility = 'hidden';
        } else {
                if (el && iwfExists(el.style) && iwfExists(el.style.display)) el.style.display = 'none';
        }
}

function iwfHideDelay(id, ms, reserveSpace){
        var el = iwfGetById(id);
        if (!el) return;

        // wipeout any other re-visibling timeouts we have (nice spelling, eh?)
        _iwfClearTimeout(el, "hidedelay", "visible", true);

        if (ms < 1){
                iwfHide(el, reserveSpace);
        } else {
                _iwfSetTimeout(el, "hidedelay", "visible", "iwfHideDelay('" + el.id + "', 0, " + reserveSpace + ")", ms);
        }
}

function iwfShowDelay(id, ms, reserveSpace){
        var el = iwfGetById(id);
        if (!el) return;

        // wipeout any other re-visibling timeouts we have (nice spelling, eh?)
        _iwfClearTimeout(el, "showdelay", "visible", true);

        if (ms < 1){
                iwfShow(el, reserveSpace);
        } else {
                _iwfSetTimeout(el, "showdelay", "visible", "iwfShowDelay('" + el.id + "', 0, " + reserveSpace + ")", ms);
        }
}

function iwfShowGently(id, pct, reserveSpace){

        var el = iwfGetById(id);
        if (!el) return;

        // wipeout any other re-visibling timeouts we have (nice spelling, eh?)
        _iwfClearTimeout(el, "showgently", "visible", true);

        var opacity = iwfOpacity(el);
        if (iwfIsHidden(el)){
                // set opacity to 0
                iwfOpacity(el, 0, false, false);

                // show it
                iwfShow(el, reserveSpace);
        }

        // adjust opacity up by the given percentage
        opacity = iwfOpacity(el, pct, true);

        if (opacity < 100) {
                // set a timeout
                _iwfSetTimeout(el, "showgently", "visible", "iwfShowGently('" + el.id + "'," + pct + ", " + reserveSpace + ")", 50);
        }
}

function iwfHideGently(id, pct, reserveSpace){
        var el = iwfGetById(id);
        if (!el) return;

        if (iwfIsHidden(el)) return;

        // wipeout any other re-visibling timeouts we have (nice spelling, eh?)
        _iwfClearTimeout(el, "hidegently", "visible", true);

        var opacity = iwfOpacity(el);
        if (opacity <= 0){

                // hide it
                iwfHide(el, reserveSpace);

                // set opacity back to fully opaque, so when they iwfShow() it,
                // the element isn't fully transparent and looks like iwfShow() didn't work
                iwfOpacity(el, 100, false, true);


        } else {
                // make it less opaque...
                iwfOpacity(el, -pct, true);

                // set our timeout
                _iwfSetTimeout(el, "hidegently", "visible", "iwfHideGently('" + el.id + "'," + pct + ", " + reserveSpace + ")", 50);
        }
}

function iwfHideGentlyDelay(id, pct, ms, reserveSpace){
        var el = iwfGetById(id);
        if (!el) return;

        if (iwfIsHidden(el)) return;

        // wipeout any other re-visibling timeouts we have (nice spelling, eh?)
        _iwfClearTimeout(el, "hidegentlydelay", "visible", true);


        if (ms < 1){
                iwfHideGently(el, pct, reserveSpace);
        } else {
                _iwfSetTimeout(el, "hidegentlydelay", "visible", "iwfHideGentlyDelay('" + el.id + "'," + pct + ", 0, " + reserveSpace + ")", ms);
        }

}

function iwfShowGentlyDelay(id, pct, ms, reserveSpace){
        var el = iwfGetById(id);
        if (!el) return;


        // wipeout any other re-visibling timeouts we have (nice spelling, eh?)
        _iwfClearTimeout(el, "showgentlydelay", "visible", true);

        if (ms < 1){
                iwfShowGently(el, pct, reserveSpace);
        } else {
                _iwfSetTimeout(el, "showgentlydelay", "visible", "iwfShowGentlyDelay('" + el.id + "'," + pct + ", 0, " + reserveSpace + ")", ms);
        }
}

function iwfOpacity(id, pct, relative, keepHiddenIfAlreadyHidden){
        var el = iwfGetById(id);
        if (el){
                if (iwfExists(pct) && pct != null){
                        // set opacity
                        var newPct = iwfToFloat(pct, true);
                        if (relative){
                                // lookup current opacity
                                newPct = iwfOpacity(id, null, false);

                                // modify pct by that much
                                newPct += pct;
                        }

                        if (newPct < 0){
                                newPct = 0;
                        } else if (newPct > 100){
                                newPct = 100;
                        }

                        if (iwfExists(el.style.opacity)) el.style.opacity = newPct/100;
                        else if (iwfExists(el.style.filter)) el.style.filter = "alpha(opacity=" + newPct + ")";
                        else if (iwfExists(el.style.mozOpacity)) el.style.mozOpacity = newPct/100;

                        // also display it if opacity > 0 and !keepHidden
                        if (newPct > 0 && !keepHiddenIfAlreadyHidden){
                                if (iwfIsHidden(id)){
                                        iwfShow(id);
                                }
                        }

                        return newPct;

                } else {
                        // get current opacity
                        var val = null;
                        if (iwfExists(el.style.opacity)){
                                if (el.style.opacity == ''){
                                        val = 100;
                                } else {
                                        val = iwfToFloat(el.style.opacity, 2, true) * 100;
                                }
                        } else if (iwfExists(el.style.filter)) {
                                if (el.style.filter){
                                        if (el.style.filter.indexOf("opacity") == 0){
                                                val = 100;
                                        } else {
                                                val = iwfToFloat(el.style.filter, 2, true);
                                        }
                                } else {
                                        val = 100;
                                }
                        } else if (iwfExists(el.style.mozOpacity)) {
                                if (el.style.mozOpacity == ''){
                                        val = 100;
                                } else {
                                        val = iwfToFloat(el.style.mozOpacity, 2, true) * 100;
                                }
                        }

                        return val;
                }
        }
}

function iwfIsShown(id){
        return !iwfIsHidden(id);
}

function iwfIsHidden(id){
        var el = iwfGetById(id);
//      if (!el) return false;

        var hidden = false;
        if (iwfExists(el.style) && iwfExists(el.style.visibility)) {
                hidden = el.style.visibility == 'hidden';
        }
        if (iwfExists(el.style) && iwfExists(el.style.display)) {
                hidden = hidden || el.style.display == 'none';
        }
        return hidden;
}

function iwfToggle(id, reserveSpace){
        if (iwfIsHidden(id)) iwfShow(id, reserveSpace);
        else iwfHide(id, reserveSpace);
}


// -----------------------------------
// End: Visibility
// -----------------------------------

// -----------------------------------
// Begin: Timers
// -----------------------------------

function _iwfSetTimeout(id, name, category, fn, ms){
        var el = iwfGetById(id);
        if (!el) return;

        var att = iwfAttribute(el, 'iwfTimeoutCategory' + category);
        if (!att){
                // that attribute doesn't exist yet, or is null
        } else if (att != name){
                // attribute exists but doesn't match our name.
                // clear out the existing one, since the category matches.
                _iwfClearTimeout(el.id, att, category);
        } else {
                // attribute matches our name.
        }

        iwfAttribute(el, 'iwfTimeoutCategory' + category, name);
//iwfLog('setting timeout for ' + name + ' to ' + fn);
        var timeoutid = setTimeout(fn, ms);
        iwfAttribute(el, 'iwfTimeoutId' + category, timeoutid);
        return true;
}

function _iwfCheckTimeout(id, name, category){
//return true;

        var el = iwfGetById(id);
        if (!el) return false;

        var att = iwfAttribute(el, 'iwfTimeoutCategory' + category);
        if (!att || att == name){
                return true;
        } else {
                return false;
        }

}

function _iwfClearTimeout(id, name, category, forceful){
        var el = iwfGetById(id);
        if (!el) return;

        var att = iwfAttribute(el, 'iwfTimeoutCategory' + category);

        if (att == name || forceful){
//              iwfLog('clearing timeout for ' + att);
                clearTimeout(iwfAttribute(el, 'iwfTimeoutId' + category));
                iwfRemoveAttribute(el, 'iwfTimeoutId' + category);
                iwfRemoveAttribute(el, 'iwfTimeoutCategory' + category);
        }

}

// BROCK
function iwfDelay(ms, fpOrString){
        function _iwfDelayExpired(){
                if (localIsString){
                        // passed a string. eval it.
iwfLog("_iwfDelayExpired: calling string of:\n" + localFpOrString, true);
                        eval(localFpOrString);
                } else {
                        // they passed a function pointer.
                        // call it, passing any args we were given.
                        if (!localArgs || localArgs.length == 0){
                                localFpOrString();
                        } else if (localArgs.length == 1){
                                localFpOrString(localArgs[0]);
                        } else {
                                var s = 'localFpOrString(';
                                for(var i=0;i<localArgs.length;i++){
                                        if (i > 0){
                                                s += ', ';
                                        }
                                        if(localArgs[i] == null){
                                                s += 'null';
                                        } else if(iwfIsString(localArgs[i])){
                                                s += '"' + localArgs[i].replace(/"/gi, '\\"') + '"';
                                        } else {
                                                s += localArgs[i];
                                        }
                                }
                                s += ')';
//iwfLog("_iwfDelayExpired: calling fp of:\n" + s, true);
                                eval(s);
                        }
                }
                delete localFpOrString;
                delete localIsString;
                delete localArgs;
        }

        var localFpOrString = fpOrString;
        var localIsString = iwfIsString(fpOrString);
        var localArgs = null;

        if (!iwfIsString(fpOrString)){
                if (arguments && arguments.length > 0){
                        localArgs = new Array();
                        for(var i=2;i<arguments.length;i++){
//iwfLog('args[' + i + '] = ' + arguments[i], true);
                                localArgs.push(arguments[i]);
                        }
                }
        }
        setTimeout(_iwfDelayExpired, ms);
}

// -----------------------------------
// End: Timers
// -----------------------------------


// -----------------------------------
// Begin: Positioning
// -----------------------------------

function iwfX1(id, newx){
        return iwfX(id, newx);
}


function iwfFocusSelect(id, promptmsg){
        var el = iwfGetById(id);
        if (promptmsg){
                alert(promptmsg);
        }
        if (!iwfIsHidden(id)){
                try {
                        el.focus();
                        el.select();
                } catch(e) { }
        }
        return false;
}

function iwfFocus(id, promptmsg){
        var el = iwfGetById(id);
        if (promptmsg){
                alert(promptmsg);
        }
        if (!iwfIsHidden(id)){
                try {
                        el.focus();
                } catch(e) { }
        }
        return false;
}


function iwfX(id, newx){
        var absx = 0;

        if (iwfIsNumber(newx)) {
                absx = iwfSetX(id, newx);
        } else {
                var el = iwfGetById(id);
                if (!el) return 0;
                if (iwfIsString(el.style.left) && el.style.left.length > 0){
                        absx = iwfToInt(el.style.left, true);
                        if (isNaN(absx)) {
                                absx = 0;
                        }
                } else if (iwfExists(el.style.pixelLeft) && el.style.pixelLeft) {
                        absx = el.style.pixelLeft;
                } else {
                        while (el) {
                                if (iwfExists(el.offsetLeft)) absx += el.offsetLeft;
                                el = iwfGetParent(el, true);
                        }
                }
        }

        return absx;
}

function iwfSetX(id, newx){
        var el = iwfGetById(id);
        if (!el) return;
        if(iwfExists(el.style) && iwfIsString(el.style.left)) {
                el.style.left = newx + 'px';
        }
        else if(iwfExists(el.style) && iwfExists(el.style.pixelLeft)) {
                el.style.pixelLeft = newx;
        }
        else if(iwfExists(el.left)) {
                el.left = newx;
        }
        return newx;
}

function iwfY1(id, newy){
        var el = iwfGetById(id);
        return iwfY(el, newy);
}

function iwfY(id, newy){
        var absy = 0;

        if (iwfIsNumber(newy)) {
                absy = iwfSetY(id, newy);
        } else {
                var el = iwfGetById(id);
                if (!el) return 0;

                if (iwfIsString(el.style.top) && el.style.top.length > 0){
                        absy = iwfToInt(el.style.top, true);
                        if (isNaN(absy)) {
                                absy = 0;
                        }
                } else if (iwfExists(el.style.pixelTop) && el.style.pixelTop) {
                        absy = el.style.pixelTop;
                } else {
                        while (el) {
                                if (iwfExists(el.offsetTop)) absy += el.offsetTop;
                                el = iwfGetParent(el, true);
                        }
                }
        }

        return absy;
}

function iwfSetY(id, newy){
        var el = iwfGetById(id);
        if (!el) return;
        if (iwfExists(el.style)){
                if (iwfIsString(el.style.top)) {
                        el.style.top = newy + 'px';
                } else if(iwfExists(el.style.pixelTop)) {
                        el.style.pixelTop = newy;
                } else if(iwfExists(el.top)) {
                        el.top = newy;
                }
        }
        return newy;
}

function iwfZIndex(id, z){
        var el = iwfGetById(id);
        if (iwfExists(el)){
                if (iwfExists(z)){
                        el.style.zIndex = z;
                }
                return parseInt(el.style.zIndex);
        }
        return 0;
}

function iwfMoveTo(id1, xDest, yDest, totalTicks, motionType){

        var el = iwfGetById(id1);

        if (el){
                var origX = iwfX1(el);
                var origY = iwfY1(el);

                // wipeout any other repositioning timeouts we have...
                _iwfClearTimeout(el, "moveto", "position", true);

                // move any elements we have docked to us
                _iwfMoveDockedItems(el, xDest, yDest, totalTicks, motionType);

                if (!totalTicks){
                        // do it immediately.
                        iwfX1(id1, xDest);
                        iwfY1(id1, yDest);
                } else {
                        // animate the movement
                        _iwfMoveTo(id1, origX, origY, xDest, yDest, totalTicks, totalTicks, motionType);
                }
        }

}

function _iwfMoveDockedItems(id, xDest, yDest, totalTicks, motionType){
        var elMaster = iwfGetById(id);
        if (elMaster){
                var dockers = iwfAttribute(elMaster, 'iwfDockers');
//iwfLog("Dockers for " + iwfAttribute(elMaster, 'id') + ":\n" + dockers, true);
                if (dockers && dockers.length > 0){
                        // there is one or more items docked to us
                        // tell them to move with us!
                        dockers = dockers.split(",");
                        for(var i=0;i<dockers.length;i++){
                                var elSlave = iwfGetById(dockers[i]);
                                if (elSlave){
//iwfLog("found element '" + dockers[i] + "' which is docked to element " + iwfAttribute(elMaster, 'id'), true);
                                        var xOffset = iwfX(elMaster) - iwfX(elSlave);
                                        var yOffset = iwfY(elMaster) - iwfY(elSlave);
                                        var xEnd = xDest - xOffset;
                                        var yEnd = yDest - yOffset;
                                        iwfMoveTo(elSlave, xEnd, yEnd, totalTicks, motionType);
                                }
                        }
                }
        }
}

function _iwfMoveTo(id1, xOrig, yOrig, xDest, yDest, ticksLeft, totalTicks, motionType){
//iwfLog("_iwfMoveTo(" + id1 + ", " + xOrig + ", " + yOrig + ", " + xDest + ", " + yDest + ", " + ticksLeft + ", " + totalTicks + ", '" + motionType + "')");
        var el = iwfGetById(id1);
        if (!el){
//iwfLog("could not locate el with id of " + id1);
        } else {
                el_id = iwfAttribute(el, 'id');

                _iwfClearTimeout(el, "moveto", "position", true);


                var elX = iwfX1(el);
                var elY = iwfY1(el);

                // hack for floating point anomolies -- stops animation when element is "close enough"
                var epsilon = 0.001;

                var xDone = false;
                if (elX > xDest){
                        if (xDest + epsilon > elX){
                                xDone = true;
                        }
                } else {
                        if (xDest - epsilon < elX){
                                xDone = true;
                        }
                }

                var yDone = false;
                if (elY > yDest){
                        if (yDest + epsilon > elY){
                                yDone = true;
                        }
                } else {
                        if (yDest - epsilon < elY){
                                yDone = true;
                        }
                }

                if (ticksLeft <= 0 || (xDone && yDone)){
                        // time is up. / motion is done
//iwfLog("_iwfMoveTo time is up / motion is done.");
                        iwfX1(el, xDest);
                        iwfY1(el, yDest);

                } else {

                        var pctLeft = ticksLeft / totalTicks;

                        var xTotal = xDest - xOrig;
                        var yTotal = yDest - yOrig;

                        var xCur, yCur, rt;

                        switch(motionType){
                                case 'd':
                                case 'dec':
                                default:
                                        rt = pctLeft * pctLeft * pctLeft * pctLeft * pctLeft * pctLeft;
                                        xCur = xOrig + (xTotal - (rt * xTotal));
                                        yCur = yOrig + (yTotal - (rt * yTotal));
                                        break;
                                case 'a':
                                case 'acc':
                                        pctLeft = 1 - pctLeft;
                                        rt = pctLeft * pctLeft * pctLeft * pctLeft;
                                        xCur = xOrig + (rt * xTotal);
                                        yCur = yOrig + (rt * yTotal);
                                        break;
                                case 'b':
                                case 'both':
                                        if (pctDone > 0.75){
                                                // over 3/4 done -- decelerate
                                                rt = pctLeft * pctLeft * pctLeft * pctLeft;
                                                xCur = xOrig + (xTotal - (rt * xTotal));
                                                yCur = yOrig + (yTotal - (rt * yTotal));

                                        } else if (pctDone < 0.25){
                                                // not 1/4 done yet -- accelerate
                                                pctLeft = 1 - pctLeft;
                                                rt = pctLeft * pctLeft * pctLeft * pctLeft; // * pctDone * pctDone;
                                                xCur = xOrig + (rt * xTotal);
                                                yCur = yOrig + (rt * yTotal);

                                        } else {
                                                // between 1/4 and 3/5 done -- linear
                                                xCur = xOrig + (pctLeft * xTotal);
                                                yCur = yOrig + (pctLeft * yTotal);
                                        }
                                        break;
                                case 'lin':
                                case 'linear':
                                case 'l':
                                        // use linear motion
                                        xCur = xOrig + (pctLeft * xTotal);
                                        yCur = yOrig + (pctLeft * yTotal);
                                        break;
                        }

                        iwfX1(el, xCur);
                        iwfY1(el, yCur);


                        ticksLeft--;

                        var fn = "_iwfMoveTo('" + el_id + "', " + xOrig + ", " + yOrig + ", " + xDest + ", " + yDest + ", " + ticksLeft + ", " + totalTicks + ", '" + motionType + "')";
//iwfLog("timeout set to call: " + fn);
                        _iwfSetTimeout(el, "moveto", "position", fn, 50);
                }
        }
}

function iwfUnDockFrom(id1, id2){
        var elSlave = iwfGetById(id1);

        if (elSlave){
                var slaveId = iwfAttribute(elSlave, 'id');
                // determine who elSlave is docked to
                var dockedTo = iwfAttribute(elSlave, 'iwfDockedTo');
                if (dockedTo){
                        // elSlave says he's docked to the guy with id of dockedTo.
                        // grab that guy.
                        var elMaster = iwfGetById(dockedTo);
//iwfLog("dockedTo:" + iwfAttribute(elMaster, 'id'), true);
                        if (elMaster){
                                // elMaster is the guy elSlave is docked to.
                                // tell elMaster to remove elSlave from his docker list

                                var dockers = iwfAttribute(elMaster, 'iwfDockers');
//iwfLog("undocking items from " + iwfAttribute(elMaster, 'id') + ":\n" + dockers, true);
                                if (dockers && dockers.length > 0){
                                        var arrDockers = dockers.split(",");
                                        if (arrDockers.length == 0){
                                                arrDockers.push(dockers);
                                        }
//iwfLog('arrDockers=' + arrDockers + '\nlength=' + arrDockers.length, true);
                                        for(var i=0;i<arrDockers.length;i++){
//iwfLog("undocking is checking " + arrDockers[i] + " against " + slaveId, true);
                                                if (arrDockers[i] == slaveId){
                                                        // undock elSlave from elMaster
                                                        arrDockers.splice(i, 1);

                                                        var output = arrDockers.join(",");
//iwfLog("writing iwfDockers=" + output);

                                                        // write this back to elMaster
                                                        iwfAttribute(elMaster, 'iwfDockers', output);
                                                        break;
                                                }
                                        }
                                }
                        }
                        // tell elSlave he's no longer docked to elMaster.
                        iwfAttribute(elSlave, 'iwfDockedTo', null);
                }
        }
}

function iwfAlignTo(id1, id2, anchor1, anchor2, totalTicks, motionType){
        var elMover = iwfGetById(id1);
        var elStays = iwfGetById(id2);

        if (elMover && elStays){

                var newX = iwfX(elStays);
                var newY = iwfY(elStays);

                var anc = ((anchor1 +'  ').substr(0,2) + (anchor2 + '  ').substr(0,2)).toLowerCase();
iwfLog("anchor encoding: " + anc);
                if (anc.charAt(0) == 'b'){
                        newY -= iwfHeight(elMover);
                } else if (anc.charAt(0) == 'c'){
                        newY -= iwfHeight(elMover) / 2;
                }

                var moverWidth;
                var staysWidth;
                if (anc.charAt(1) == 'r'){
                        moverWidth = iwfWidth(elMover);
                        newX -= moverWidth;
                } else if (anc.charAt(1) == 'c'){
                        moverWidth = iwfWidth(elMover);
                        newX -= moverWidth / 2;
                }
                if (anc.charAt(2) == 'b'){
                        newY += iwfHeight(elStays);
                } else if (anc.charAt(2) == 'c'){
                        newY += iwfHeight(elStays) / 2;
                }
                if (anc.charAt(3) == 'r'){
                        staysWidth = iwfWidth(elStays);
                        newX += staysWidth;
                } else if (anc.charAt(3) == 'c'){
                        staysWidth = iwfWidth(elStays);
                        newX += staysWidth / 2;
                }

iwfLog(iwfAttribute(elMover, 'id') + ' width:' + moverWidth + '\n' + iwfAttribute(elStays, 'id') + ' width:' + staysWidth);

                // move to those alignment points
                iwfMoveTo(elMover, newX, newY, totalTicks, totalTicks, motionType);
        }
}

function iwfDockTo(id1, id2, anchor1, anchor2, totalTicks, motionType){
        var elSlave = iwfGetById(id1);
        var elMaster = iwfGetById(id2);

        if (elSlave && elMaster){

                // dock elSlave to elMaster...

                // pull all items currently docked to elMaster
                var dockers = iwfAttribute(elMaster,'iwfDockers');
                // append elSlave to that list
                if(!dockers){
                        dockers = iwfAttribute(elSlave, 'id');
                } else {
                        var arrDockers = dockers.split(",");
                        if (arrDockers.length == 0){
                                arrDockers = new Array(dockers);
                        }

                        var slaveId = iwfAttribute(elSlave, 'id');
                        var found = false;
                        for(var i=0;i<arrDockers.length;i++){
                                if (arrDockers[i] == slaveId){
                                        found = true;
                                }
                        }
                        if (!found){
                                // elSlave is not in elMaster's list of dockers yet.  add him.
                                dockers += "," + iwfAttribute(elSlave, 'id');
                        }
                }

                // write list back to elMaster
                iwfAttribute(elMaster, 'iwfDockers', dockers);

                // have elSlave remember who he's docked to
                iwfAttribute(elSlave, 'iwfDockedTo', iwfAttribute(elMaster, 'id'));


//iwfLog("dockers for " + iwfAttribute(elMaster, 'id') + " = " + dockers, true);


                iwfAlignTo(elSlave, elMaster, anchor1, anchor2, totalTicks, motionType);

        }


}

function iwfXScroll(id) {
        var scrollx=0;
        var el = iwfGetById(id);
        if (!el){
                if(document.documentElement && document.documentElement.scrollLeft) scrollx=document.documentElement.scrollLeft;
                else if(document.body && iwfExists(document.body.scrollLeft)) scrollx=document.body.scrollLeft;
        } else {
                if (iwfIsNumber(el.scrollLeft)) scrollx = el.scrollLeft;
        }
        return scrollx;
}
function iwfYScroll(id) {
        var scrolly=0;
        var el = iwfGetById(id);
        if (!el){
                if(document.documentElement && document.documentElement.scrollTop) scrolly=document.documentElement.scrollTop;
                else if(document.body && iwfExists(document.body.scrollTop)) scrolly=document.body.scrollTop;
        } else {
                if (iwfIsNumber(el.scrollTop)) scrolly = el.scrollTop;
        }
        return scrolly;
}


// -----------------------------------
// End: Positioning
// -----------------------------------

// -----------------------------------
// Begin: Size
// -----------------------------------

function iwfWidth(id, neww){


        var el = iwfGetById(id);
        if (!el) return 0;
        var w = 0;
        if (iwfExists(el)){
                if (iwfExists(el.style)){
                        if (iwfExists(el.offsetWidth) && iwfIsString(el.style.width)){
                                if (neww) iwfDetermineWidth(el, neww);
                                w = el.offsetWidth;
                        } else if (iwfExists(el.style.pixelWidth)) {
                                if(neww) el.style.pixelWidth = neww;
                                w = el.style.pixelWidth;
                        } else {
                                w = -1;
                        }
                } else if (iwfExists(el.clip) && iwfExists(el.clip.right)) {
                        if(newh) e.clip.right = neww;
                        w = el.clip.right;
                } else {
                        w = -2;
                }

//iwfLog('width of ' + iwfAttribute(el, 'id') + ' = ' + w, true);

        }

        return w;


//      var el = iwfGetById(id);
//      var w = 0;
//      if (iwfExists(el)){
//              if(iwfExists(el.style, el.offsetWidth) && iwfIsString(el.style.width)) {
//                      if(neww) iwfDetermineWidth(el, neww);
//                      w = el.offsetWidth;
//              }
//              else if(iwfExists(el.style) && iwfExists(el.style.pixelWidth)) {
//                      if(neww) el.style.pixelWidth = neww;
//                      w = el.style.pixelWidth;
//              }
//              else if(iwfExists(el.clip) && iwfExists(el.clip.right)) {
//                      if(neww) e.clip.right = neww;
//                      w = el.clip.right;
//              }
//      }
//      return w;
}

function iwfHeight(id, newh){
        var el = iwfGetById(id);
        if (!el) return 0;
        var h = 0;
        if (iwfExists(el)){
                if (iwfExists(el.style)){
                        if (iwfExists(el.offsetHeight) && iwfIsString(el.style.height)){
                                if (newh) iwfDetermineHeight(el, newh);
                                h = el.offsetHeight;
                        } else if (iwfExists(el.style.pixelHeight)) {
                                if(newh) el.style.pixelHeight = newh;
                                h = el.style.pixelHeight;
                        } else {
                                h = -1;
                        }
                } else if (iwfExists(el.clip) && iwfExists(el.clip.bottom)) {
                        if(newh) e.clip.bottom = newh;
                        h = el.clip.bottom;
                } else {
                        h = -2;
                }
        }
        return h;
}

function iwfY2(id, y2){
        var el = iwfGetById(id);
        if (iwfExists(el)) {
                var y1 = iwfY(el);
                if (iwfExists(y2)){
                        var h = iwfHeight(el);
                        iwfHeight(el, y1 + h);
                }
                return y1 + iwfHeight(el);
        }
        return 0;
}

function iwfX2(id, x2){
        var el = iwfGetById(id);
        if (iwfExists(el)) {
                var x1 = iwfX(id);
                if (iwfExists(x2)){
                        var w = iwfWidth(id);
                        iwfWidth(id, x1 + h);
                }
                return x1 + iwfWidth(el);
        }
        return 0;
}

function iwfDetermineStyle(el,prop){
        return parseInt(document.defaultView.getComputedStyle(el,'').getPropertyValue(prop),10);
}
function iwfDetermineWidth(el,neww){
        var padl=0, padr=0, bdrl=0, bdrr=0;
        if (iwfExists(document.defaultView) && iwfExists(document.defaultView.getComputedStyle)){
                padl = iwfDetermineStyle(el,'padding-left');
                padr = iwfDetermineStyle(el,'padding-right');
                bdrl = iwfDetermineStyle(el,'border-left-width');
                bdrr = iwfDetermineStyle(el,'border-right-width');

        } else if(iwfExists(el.currentStyle,document.compatMode)){
                if(document.compatMode=='CSS1Compat'){
                        padl = parseInt(el.currentStyle.paddingLeft);
                        padr = parseInt(el.currentStyle.paddingRight);
                        bdrl = parseInt(el.currentStyle.borderLeftWidth);
                        bdrr = parseInt(el.currentStyle.borderRightWidth);
                }
        } else if(iwfExists(el.offsetWidth,el.style.width)){
                el.style.width = neww + 'px';
                padl=el.offsetWidth - neww;
        }

        if(isNaN(padl)) padl=0;
        if(isNaN(padr)) padr=0;
        if(isNaN(bdrl)) bdrl=0;
        if(isNaN(bdrr)) bdrr=0;

        var w2 = neww - padl - padr - bdrl - bdrr;
        if (isNaN(w2) || w2 < 0) return;
        else el.style.width = w2 + 'px';
}

function iwfDetermineHeight(el,newh){
        var padt=0, padb=0, bdrt=0, bdrb=0;
        if(iwfExists(document.defaultView) && iwfExists(document.defaultView.getComputedStyle)){
                padt = iwfDetermineStyle(el,'padding-top');
                padb = iwfDetermineStyle(el,'padding-bottom');
                badt = iwfDetermineStyle(el,'border-top-height');
                badb = iwfDetermineStyle(el,'border-bottom-height');
        } else if(iwfExists(el.currentStyle,document.compatMode)){
                if(document.compatMode=='CSS1Compat'){
                        padt = parseInt(el.currentStyle.paddingTop);
                        padb = parseInt(el.currentStyle.paddingBottom);
                        bdrt = parseInt(el.currentStyle.borderTopHeight);
                        bdrb = parseInt(el.currentStyle.borderBottomHeight);
                }
        } else if(iwfExists(el.offsetHeight, el.style.height)){
                el.style.height = newh + 'px';
                padt = el.offsetHeight - newh;
        }

        if(isNaN(padt)) padt=0;
        if(isNaN(padb)) padb=0;
        if(isNaN(bdrt)) bdrt=0;
        if(isNaN(bdrb)) bdrb=0;

        var h2 = newh - padt - padb - bdrt - bdrb;

        if(isNaN(h2) || h2 < 0) return;
        else el.style.height = h2 + 'px';
}


// -----------------------------------
// End: Size
// -----------------------------------

// -----------------------------------
// Begin: Event
// -----------------------------------

function iwfAddEvent(id,eventName,callback) {
        var el = iwfGetById(id);
        if (!el) return;
        if (el.attachEvent) {
                el.attachEvent(eventName, callback);
        } else {
                el[eventName] = callback;
        }
}

function iwfRemoveEvent(id, eventName, callback){
        var el = iwfGetById(id);
        if (!el) return;
        if (el.detachEvent) el.detachEvent(eventName, callback);
        else eval('el.' + eventName + ' = null;');
}

function iwfEvent(ev) {
        this.keyCode = 0;
        this.target = null;
        this.type = '';
        this.X = 0;
        this.Y = 0;
        var evt = ev || window.event;
        if(!evt) return;

        if(evt.type) this.type = evt.type;
        if(evt.target) this.target = evt.target;
        else if(evt.srcElement) this.target = evt.srcElement;

        if(iwfExists(evt.clientX,evt.clientY)) {
                this.X = evt.clientX + iwfXScroll();
                this.Y = evt.clientY + iwfYScroll();
        } else if (iwfExists(evt.offsetX, evt.offsetY)){
                this.X = evt.offsetX;
                this.Y = evt.offsetY;
        }

        if (evt.keyCode) { this.keyCode = evt.keyCode; }
        else if (iwfExists(evt.which)) { this.keyCode = evt.which; }

        return this;
}

// -----------------------------------
// End: Event
// -----------------------------------


// -----------------------------------
// Begin: Image
// -----------------------------------
function iwfRollover(id, overurl){
        var el = iwfGetById(id);
        if (!el) return;
        var rollover = null;
        if (overurl){
                rollover = overurl;
        } else {
                iwfAttribute(el, "rolloversrc");
        }
        if (!rollover) return;
        el.iwfOrigSrc = el.src;
        el.iwfRolloverImg = new Image();
        el.iwfRolloverImg.src = rollover;
        iwfAddEvent(el, 'onmouseover', iwfDoRollover);
        iwfAddEvent(el, 'onmouseout', iwfDoRollover);
}

function iwfDoRollover(ev){
        var evt = new iwfEvent(ev);
        var el = evt.target;
        if (el.src == el.iwfOrigSrc){
                iwfSwapImage(el, el.iwfRolloverImg);
        } else {
                iwfSwapImage(el, el.iwfOrigSrc);
        }
}

function iwfPreloadImage(id, newimg){
        var el = iwfGetById(id);
        if (!el) return;
        /* todo: preload images here */
}

function iwfSwapImage(id, newimg){
        var el = iwfGetById(id);
        if (!el) return;
        if (iwfIsString(newimg)){
                el.src = newimg;
        } else {
                el.src = newimg.src;
        }
}

// preload images and attach event handlers for rollovers
function iwfMapRollovers(){
        var nodes = iwfGetByTagName('img');
        for(var i=0;i<nodes.length;i++){
                iwfRollover(nodes[i]);
        }
}

// -----------------------------------
// End: Image
// -----------------------------------


// -----------------------------------
// Begin: Drag-N-Drop
// -----------------------------------

var iwfDragger = {el:null, inUse:false};
var iwfHiZ = 2;

function iwfEnableDrag(id, startCallback, dragCallback, endCallback) {
        var el = iwfGetById(id);
        if (!el) return;
        el.iwfDraggable = true;
        el.iwfOnDragStart = startCallback;
        el.iwfOnDrag = dragCallback;
        el.iwfOnDragEnd = endCallback;
        iwfAddEvent(el, 'onmousedown', iwfDragMouseDown);
        if (!iwfDragger.inUse) {
                iwfDragger.inUse = true;
                iwfAddEvent(document, 'onmousemove', iwfDragMouseMove);
        }
}
function iwfDragMouseDown(ev){
        var evt = new iwfEvent(ev);
        var el = evt.target;
        while(el && !el.iwfDraggable) {
                el = iwfParent(el);
        }
        if (el) {
                if (ev && ev.preventDefault) ev.preventDefault();
                else if (window.event) window.event.returnValue = false;
                el.iwfDragX = evt.X;
                el.iwfDragY = evt.Y;

                iwfZIndex(el, iwfHiZ++);

                iwfDragger.el = el;
                iwfAddEvent(document, 'onmouseup', iwfDragMouseUp, false);
                if (el.iwfOnDragStart) {
                        el.iwfOnDragStart(el, evt.X, evt.Y);
                }
        }
}

function iwfDragMouseMove(ev){
        var evt = new iwfEvent(ev);
        if (iwfDragger.el) {
                if (ev && ev.preventDefault) ev.preventDefault();
                else if (window.event) window.event.returnValue = false;
                var el = iwfDragger.el;
                var dx = evt.X - el.iwfDragX;
                var dy = evt.Y - el.iwfDragY;
                el.iwfDragX = evt.X;
                el.iwfDragY = evt.Y;

                if (el.iwfOnDrag) {
                        el.iwfOnDrag(el, dx, dy);
                } else {
                        iwfX(el, iwfX(el) + dx);
                        iwfY(el, iwfY(el) + dy);
                }
        }
}
function iwfDragMouseUp(ev) {
        if (iwfDragger.el) {
                if (ev && ev.preventDefault) ev.preventDefault();
                else if (window.event) window.event.returnValue = false;
                iwfRemoveEvent(document, 'onmouseup', iwfDragMouseUp, false);
                if (iwfDragger.el.iwfOnDragEnd) {
                        var evt = new iwfEvent(ev);
                        iwfDragger.el.iwfOnDragEnd(iwfDragger.el, evt.X, evt.Y);
                }
                iwfDragger.el = null;
        }
}

// -----------------------------------
// End: Drag-N-Drop
// -----------------------------------

// -----------------------------------
// Begin: Initializers
// -----------------------------------
iwfMapRollovers();
// -----------------------------------
// End: Initializers
// -----------------------------------