MooTools rectangle adds functionallity to calculate rectangles and intersection between fictionate or existing elements on the page.

Rectangle is essentially very easy to use, to create a new Rectangle use the new construct.

#JS
new Rectangle(/*left*/10, /*top*/10, /*width*/10, /*height*/10);

To get an empty rectangle use the Rectangle.Empty-propety. Also, if you try to create a empty rectangle, it will return the empty rectangle, therefore the following is true:

#JS
new Rectangle(/*left*/10, /*top*/10, /*width*/0, /*height*/0) === Rectangle.Empty;

Another way to check this is to use the isEmpty() function on the rectangle-object.

To get a rectangle bouding a dom-element you can do this:

#JS
var rect = $(dom_elm).getRectangle();

Rectangle supports 8 getters:

• int getLeft(): Get's the left-most point of the rectangle
• int getRight(): Get's the right-most point of the rectangle
• int getTop(): Get's the top-most point of the rectangle
• int getBottom(): Get's the bottom-most point of the rectangle
• int getHeight(): Get's the height of the rectangle
• int getWidth(): Get's the width of the rectangle
• int getSize(): Get's the size of the rectangle
• bool isEmpty(): Get's a value spesifying wheater or not the rectangle is empty.

Also, to calculate intersection between 2 rectangles use the Rectangle getIntersection(Rectangle rect)-function.

#JS
var rectDiv1 = $('div1').getRectangle();
var rectDiv2 = $('div2').getRectangle();
if(rectDiv1.getIntersection(rectDiv2).getSize() > 10) {
    alert('more than 10 px overlap!');
}