Flex Panel AS3

I am trying to dynamically change a panel to a different panel on mouseDown but it isn’t working as I though it should. Here’s the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
        import mx.containers.Panel;
        public function UpdatePanel():void {
            var newPanel1:Panel = new Panel();
            newPanel1.title = "New Panel 1";
            newPanel1.percentWidth = 100;
            newPanel1.percentHeight = 100;
            panel1 = newPanel1;
<mx:VBox width="100%" height="100%">
    <mx:VDividedBox width="100%" height="100%">
        <mx:Panel id="panel1" width="100%" height="100%"/>
        <mx:Panel id="panel2" width="100%" height="100%"/>
    <mx:Button label="Update" mouseDown="UpdatePanel()"/>        


I don’t get any errors but panel1 doesn’t update when the button is clicked. This must be possible right? If anyone can help with this I would appreciate it.