/**
 * @class Ext.Element
 */

Ext.Element.addMethods({
   
/**
     * Gets the x,y coordinates specified by the anchor position on the element.
     * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo}
     * for details on supported anchor positions.
     * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
     * of page coordinates
     * @param {Object} size (optional) An object containing the size to use for calculating anchor position
     * {width: (target width), height: (target height)} (defaults to the element's current size)
     * @return {Array} [x, y] An array containing the element's x and y coordinates
     */

    getAnchorXY
: function(anchor, local, s){
       
//Passing a different size is useful for pre-calculating anchors,
       
//especially for anchored animations that change the el size.
                anchor
= (anchor || "tl").toLowerCase();
        s
= s || {};
       
       
var me = this,        
                vp
= me.dom == document.body || me.dom == document,
                w
= s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
                h
= s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),                              
                xy
,            
                r
= Math.round,
                o
= me.getXY(),
                scroll
= me.getScroll(),
                extraX
= vp ? scroll.left : !local ? o[0] : 0,
                extraY
= vp ? scroll.top : !local ? o[1] : 0,
                hash
= {
                        c  
: [r(w * 0.5), r(h * 0.5)],
                        t  
: [r(w * 0.5), 0],
                        l  
: [0, r(h * 0.5)],
                        r  
: [w, r(h * 0.5)],
                        b  
: [r(w * 0.5), h],
                        tl
: [0, 0],    
                        bl
: [0, h],
                        br
: [w, h],
                        tr
: [w, 0]
               
};
       
        xy
= hash[anchor];      
       
return [xy[0] + extraX, xy[1] + extraY];
   
},

   
/**
     * Anchors an element to another element and realigns it when the window is resized.
     * @param {Mixed} element The element to align to.
     * @param {String} position The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
     * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
     * is a number, it is used as the buffer delay (defaults to 50ms).
     * @param {Function} callback The function to call after the animation finishes
     * @return {Ext.Element} this
     */

    anchorTo
: function(el, alignment, offsets, animate, monitorScroll, callback){        
           
var me = this,
            dom
= me.dom;
           
           
function action(){
           
Ext.fly(dom).alignTo(el, alignment, offsets, animate);
           
Ext.callback(callback, Ext.fly(dom));
       
}
       
       
Ext.EventManager.onWindowResize(action, me);
       
       
if(!Ext.isEmpty(monitorScroll)){
           
Ext.EventManager.on(window, 'scroll', action, me,
               
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
       
}
        action
.call(me); // align immediately
       
return me;
   
},

   
/**
     * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
     * supported position values.
     * @param {Mixed} element The element to align to.
     * @param {String} position The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @return {Array} [x, y]
     */

    getAlignToXY
: function(el, p, o){      
        el
= Ext.get(el);
       
       
if(!el || !el.dom){
           
throw "Element.alignToXY with an element that doesn't exist";
       
}
       
        o
= o || [0,0];
        p
= (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();      
               
       
var me = this,
                d
= me.dom,
                a1
,
                a2
,
                x
,
                y
,
               
//constrain the aligned el to viewport if necessary
                w
,
                h
,
                r
,
                dw
= Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
                dh
= Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
                p1y
,
                p1x
,            
                p2y
,
                p2x
,
                swapY
,
                swapX
,
                doc
= document,
                docElement
= doc.documentElement,
                docBody
= doc.body,
                scrollX
= (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
                scrollY
= (docElement.scrollTop || docBody.scrollTop || 0)+5,
                c
= false, //constrain to viewport
                p1
= "",
                p2
= "",
                m
= p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
       
       
if(!m){
           
throw "Element.alignTo with an invalid alignment " + p;
       
}
       
        p1
= m[1];
        p2
= m[2];
        c
= !!m[3];

       
//Subtract the aligned el's internal xy from the target's offset xy
       
//plus custom offset to get the aligned el's new offset xy
        a1
= me.getAnchorXY(p1, true);
        a2
= el.getAnchorXY(p2, false);

        x
= a2[0] - a1[0] + o[0];
        y
= a2[1] - a1[1] + o[1];

       
if(c){    
               w
= me.getWidth();
           h
= me.getHeight();
           r
= el.getRegion();      
           
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
           
//perpendicular to the vp border, allow the aligned el to slide on that border,
           
//otherwise swap the aligned el to the opposite border of the target.
           p1y
= p1.charAt(0);
           p1x
= p1.charAt(p1.length-1);
           p2y
= p2.charAt(0);
           p2x
= p2.charAt(p2.length-1);
           swapY
= ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
           swapX
= ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));          
           

           
if (x + w > dw + scrollX) {
                x
= swapX ? r.left-w : dw+scrollX-w;
           
}
           
if (x < scrollX) {
               x
= swapX ? r.right : scrollX;
           
}
           
if (y + h > dh + scrollY) {
                y
= swapY ? r.top-h : dh+scrollY-h;
           
}
           
if (y < scrollY){
               y
= swapY ? r.bottom : scrollY;
           
}
       
}
       
return [x,y];
   
},

   
/**
     * Aligns this element with another element relative to the specified anchor points. If the other element is the
     * document it aligns it to the viewport.
     * The position parameter is optional, and can be specified in any one of the following formats:
     *

     * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
     * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
     * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
     * that specified in order to enforce the viewport constraints.
     * Following are all of the supported anchor positions:
Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

Example Usage:

// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

     * @param {Mixed} element The element to align to.
     * @param {String} position The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.Element} this
     */

    alignTo
: function(element, position, offsets, animate){
           
var me = this;
       
return me.setXY(me.getAlignToXY(element, position, offsets),
                                me
.preanim && !!animate ? me.preanim(arguments, 3) : false);
   
},
   
   
// private ==>  used outside of core
    adjustForConstraints
: function(xy, parent, offsets){
       
return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
   
},

   
// private ==>  used outside of core
    getConstrainToXY
: function(el, local, offsets, proposedXY){  
           
var os = {top:0, left:0, bottom:0, right: 0};

       
return function(el, local, offsets, proposedXY){
            el
= Ext.get(el);
            offsets
= offsets ? Ext.applyIf(offsets, os) : os;

           
var vw, vh, vx = 0, vy = 0;
           
if(el.dom == document.body || el.dom == document){
                vw
=Ext.lib.Dom.getViewWidth();
                vh
= Ext.lib.Dom.getViewHeight();
           
}else{
                vw
= el.dom.clientWidth;
                vh
= el.dom.clientHeight;
               
if(!local){
                   
var vxy = el.getXY();
                    vx
= vxy[0];
                    vy
= vxy[1];
               
}
           
}

           
var s = el.getScroll();

            vx
+= offsets.left + s.left;
            vy
+= offsets.top + s.top;

            vw
-= offsets.right;
            vh
-= offsets.bottom;

           
var vr = vx+vw;
           
var vb = vy+vh;

           
var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
           
var x = xy[0], y = xy[1];
           
var w = this.dom.offsetWidth, h = this.dom.offsetHeight;

           
// only move it if it needs it
           
var moved = false;

           
// first validate right/bottom
           
if((x + w) > vr){
                x
= vr - w;
                moved
= true;
           
}
           
if((y + h) > vb){
                y
= vb - h;
                moved
= true;
           
}
           
// then make sure top/left isn't negative
           
if(x < vx){
                x
= vx;
                moved
= true;
           
}
           
if(y < vy){
                y
= vy;
                moved
= true;
           
}
           
return moved ? [x, y] : false;
       
};
   
}(),
           
           
               
//         el = Ext.get(el);
//         offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});

//         var  me = this,
//              doc = document,
//              s = el.getScroll(),
//              vxy = el.getXY(),
//              vx = offsets.left + s.left,
//              vy = offsets.top + s.top,              
//              vw = -offsets.right,
//              vh = -offsets.bottom,
//              vr,
//              vb,
//              xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
//              x = xy[0],
//              y = xy[1],
//              w = me.dom.offsetWidth, h = me.dom.offsetHeight,
//              moved = false; // only move it if it needs it
//      
//              
//         if(el.dom == doc.body || el.dom == doc){
//             vw += Ext.lib.Dom.getViewWidth();
//             vh += Ext.lib.Dom.getViewHeight();
//         }else{
//             vw += el.dom.clientWidth;
//             vh += el.dom.clientHeight;
//             if(!local){                    
//                 vx += vxy[0];
//                 vy += vxy[1];
//             }
//         }

//         // first validate right/bottom
//         if(x + w > vx + vw){
//             x = vx + vw - w;
//             moved = true;
//         }
//         if(y + h > vy + vh){
//             y = vy + vh - h;
//             moved = true;
//         }
//         // then make sure top/left isn't negative
//         if(x < vx){
//             x = vx;
//             moved = true;
//         }
//         if(y < vy){
//             y = vy;
//             moved = true;
//         }
//         return moved ? [x, y] : false;
//    },
   
   
/**
    * Calculates the x, y to center this element on the screen
    * @return {Array} The x, y values [x, y]
    */

    getCenterXY
: function(){
       
return this.getAlignToXY(document, 'c-c');
   
},

   
/**
    * Centers the Element in either the viewport, or another Element.
    * @param {Mixed} centerIn (optional) The element in which to center the element.
    */

    center
: function(centerIn){
       
return this.alignTo(centerIn || document, 'c-c');        
   
}    
});