getting the xml data from a dispatched event

I've got an problem when the user clicks on button "Add to Meal" it throws an error because it can't seem to reference the data in mealDetails object inside the com/ directory?

I'm trying to add the item to the list control.

I have the code located here in case you want more details
http://files.getdropbox.com/u/228472/mealsflex.zip


[Bindable]
private var customMeals:ArrayCollection = new ArrayCollection;

//throws error on this line
customMeals.addItem((event.target as mealitem).mealDetails);




<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="310" height="320"
         title="{mealDetails.title}" horizontalAlign="center">
       
       
        <mx:Metadata>
                [Event(name="addToMeal")]
                [Event(name="learnAboutThis")]
        </mx:Metadata>
       
        <mx:Script>
                <![CDATA[
                        import mx.controls.Alert;
                       
                        [Bindable]
                        public var mealDetails:Object;
                       
                       
                        private function calldispatch():void {
                                parentApplication.createmeals_loadswf_var = mealDetails.swf;
                                dispatchEvent(new Event('learnAboutThis', true));
                               
                        }
                       
                ]]>
        </mx:Script>
       
        <mx:Image source="{'/uploads/nutrition/' + mealDetails.imgsource }" width="285" height="159"/>

        <mx:Label text="{mealDetails.serving}"/>
       
        <mx:Button label="Add to Meal" click="dispatchEvent(new Event('addToMeal', true))"/>
       
        <mx:Button label="Learn About This" click="calldispatch()"/>
       
</mx:Panel>