Learning Co-ordinate System - Problem

Question

Hi
I created a sample project to epxlain my problem.
There are two canvases in the main application. outerspace canvas and innerspace canvas.
innerspace canvas has a visual component "mainBox"
and there is also a visual component in outerspace canvas named "overBox"
now i want user to map the x-xis and y-xis of overBox to mainBox, so when user will click re-arrange, overbox will completely cover the mainBox.
This is actually a problem of different co-oridatane systems and i dont know how to map them into one.
Here is the code.
Application File
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
     <mx:Script>
          <![CDATA[
                    private function arrange(event:MouseEvent):void{
                         var point:Point = mainBox.localToGlobal(new Point());
                         overBox.x = point.x;
                         overBox.y = point.y;
          ]]>
     </mx:Script>
     <mx:Canvas width="80%" height="80%" horizontalCenter="0" verticalCenter="0" id="outerSpace" backgroundColor="#A9A9A9">
          <mx:Canvas width="80%" height="80%" horizontalCenter="0" verticalCenter="0" id="innerSpace" backgroundColor="#8DB5FF">
               <ns1:Node horizontalCenter="0" verticalCenter="0" width="100" height="100" id="mainBox">
               </ns1:Node>
          </mx:Canvas>
          <ns1:Node x="21" y="10" id="overBox" width="100" height="100" backgroundColor="#FFA352">
          </ns1:Node>
     </mx:Canvas>
     <mx:Button label="Re-Arrange" click="arrange(event)" left="10" top="10"/>
</mx:Application>
Project is also attached.
Thanks

Answer 1

Just see below. But it won't work if you resize the view, as one is centered
private
function arrange(event:MouseEvent):void
// Get mainbox coord in local system - i.e. relative to innerSpace
var p1:Point = new Point(mainBox.x,mainBox.y); 
// Convert it to global coord from innerSpace
var p2:Point = innerSpace.localToGlobal(p1); 
// Convert it to local coord - relative to outerSpace
var p3:Point = outerSpace.globalToLocal(p2); 
overBox.x=p3.x;
overBox.y=p3.y;