Yahoo! UI Library

    /**
     * Provides advanced positioning support for Node via a Plugin
     * for centering and alignment. 
     * @module align-plugin
     */

    var OFFSET_WIDTH = 'offsetWidth',
        OFFSET_HEIGHT = 'offsetHeight',
        undefined = undefined;

    /**
     * Node plugin which can be used to align a node with another node,
     * region, or the viewport.
     *
     * @class Plugin.Align
     * @param {Object} User configuration object
     */
    function Align(config) {
        if (config.host) {
            this._host = config.host;
        }
    }
        
    Align.prototype = {
        /**
         * Aligns node with a point on another node or region.
         * Possible alignment points are:
         * <dl>
         *      <dt>tl</dt>
         *      <dd>top left</dd>
         *      <dt>tr</dt>
         *      <dd>top right</dd>
         *      <dt>bl</dt>
         *      <dd>bottom left</dd>
         *      <dt>br</dt>
         *      <dd>bottom right</dd>
         *      <dt>tc</dt>
         *      <dd>top center</dd>
         *      <dt>bc</dt>
         *      <dd>bottom center</dd>
         *      <dt>rc</dt>
         *      <dd>right center</dd>
         *      <dt>lc</dt>
         *      <dd>left center</dd>
         *      <dt>cc</dt>
         *      <dd>center center</dd>
         * </dl>
         * @method to 
         * @parm region {String || Node || HTMLElement || Object} The node or
         * region to align with. Defaults to the viewport region.
         * @parm regionPoint {String} The point of the region to align with.
         * @parm point {String} The point of the node aligned to the region. 
         * @parm resize {Boolean} Whether or not the node should re-align when
         * the window is resized. Defaults to false.
         */
        to: function(region, regionPoint, point, syncOnResize) {
            // cache original args for syncing
            this._syncArgs = Y.Array(arguments);

            if (region.top === undefined) {
                region = Y.one(region).get('region');
            }

            if (region) {
                var xy = [region.left, region.top],
                    offxy = [region.width, region.height],
                    points = Align.points,
                    node = this._host,
                    NULL = null,
                    size = node.getAttrs([OFFSET_HEIGHT, OFFSET_WIDTH]),
                    nodeoff = [0 - size[OFFSET_WIDTH], 0 - size[OFFSET_HEIGHT]], // reverse offsets
                    regionFn0 = regionPoint ? points[regionPoint.charAt(0)]: NULL,
                    regionFn1 = (regionPoint && regionPoint !== 'cc') ? points[regionPoint.charAt(1)] : NULL,
                    nodeFn0 = point ? points[point.charAt(0)] : NULL,
                    nodeFn1 = (point && point !== 'cc') ? points[point.charAt(1)] : NULL;

                if (regionFn0) {
                    xy = regionFn0(xy, offxy, regionPoint);
                }
                if (regionFn1) {
                    xy = regionFn1(xy, offxy, regionPoint);
                }

                if (nodeFn0) {
                    xy = nodeFn0(xy, nodeoff, point);
                }
                if (nodeFn1) {
                    xy = nodeFn1(xy, nodeoff, point);
                }

                if (xy && node) {
                    node.setXY(xy);
                }
                
                this._resize(syncOnResize);

            }
            return this;
        },

        sync: function() {
            this.to.apply(this, this._syncArgs);
            return this;
        },

        _resize: function(add) {
            var handle = this._handle;
            if (add && !handle) {
                this._handle = Y.on('resize', this._onresize, window, this);
            } else if (!add && handle) {
                handle.detach();
            }

        },

        _onresize: function() {
            var self = this;
            setTimeout(function() { // for performance
                self.sync();
            });
        },
    
        /**
         * Aligns the center of a node to the center of another node or region.
         * @method center 
         * @parm region {Node || HTMLElement || Object} optional The node or
         * region to align with. Defaults to the viewport region.
         * the window is resized. If centering to viewport, this defaults
         * to true, otherwise default is false.
         */
        center: function(region, resize) {
            this.to(region, 'cc', 'cc', resize); 
            return this;
        },

        /**
         * Removes the resize handler, if any. This is called automatically
         * when unplugged from the host node.
         * @method destroy 
         */
        destroy: function() {
            var handle = this._handle;
            if (handle) {
                handle.detach();
            }
        }
    };

    Align.points = {
        't': function(xy, off) {
            return xy;
        },

        'r': function(xy, off) {
            return [xy[0] + off[0], xy[1]];
        },

        'b': function(xy, off) {
            return [xy[0], xy[1] + off[1]];
        },

        'l': function(xy, off) {
            return xy;
        },

        'c': function(xy, off, point) {
            var axis = (point[0] === 't' || point[0] === 'b') ?  0 : 1,
                ret, val;

            if (point === 'cc') {
                ret = [xy[0] + off[0] / 2, xy[1] + off[1] / 2];
            } else {
                val = xy[axis] + off[axis] / 2;
                ret = (axis) ? [xy[0], val] : [val, xy[1]];
            }

             return ret;
        }
    };

    Align.NAME = 'Align';
    Align.NS = 'align';

    Align.prototype.constructor = Align;

    Y.namespace('Plugin');
    Y.Plugin.Align = Align;