<mx:Grid x="0" y="0" width="100%" height="100%" horizontalGap="0" verticalGap="0">
    <mx:GridRow width="100%" height="50">
     <mx:GridItem width="100%" height="100%" colSpan="3" verticalAlign="middle">
      <mx:Label text="Label" fontSize="17" width="100%" fontWeight="bold" color="#FFFFFF" textAlign="center" id="lblTitle"/>
     </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width="100%" height="100%">
     <mx:GridItem width="100%" height="100%" colSpan="3">
      <mx:Grid width="100%" height="100%">
       <mx:GridRow width="100%" height="100%">
        <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
         <mx:Grid>
          <mx:GridRow width="100%" height="100%">
           <mx:GridItem width="100%" height="100%">
            <mx:Canvas borderStyle="solid" borderColor="#3F3F3F">
             <mx:Image id="imgMain" click="imgMain_click()" useHandCursor="true" buttonMode="true" completeEffect="Fade">
             </mx:Image>
            </mx:Canvas>
           </mx:GridItem>
          </mx:GridRow>
          <mx:GridRow width="100%" height="100%">
           <mx:GridItem width="100%" height="100%">
            <mx:Label text="Label" color="#FFFFFF" id="lblImageTitle" fontFamily="Georgia" fontSize="16"/>
           </mx:GridItem>
          </mx:GridRow>
         </mx:Grid>
        </mx:GridItem>
       </mx:GridRow>
      </mx:Grid>
     </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width="100%" height="100">
     <mx:GridItem width="100%" height="100%" horizontalAlign="right" verticalAlign="middle">
      <mx:Image id="cmdScrollPrev" source="local/assets/gallery/prev.png" click="cmdScrollPrev_click()" useHandCursor="true" buttonMode="true" hideEffect="Fade" showEffect="Fade" />
      <mx:Spacer/>
     </mx:GridItem>
     <mx:GridItem width="100%" height="100%" verticalAlign="middle">
      <mx:HorizontalList 
       height="80" 
       width="800"
       columnWidth="100" 
       rowHeight="80" 
       dataProvider="{arrImages}" 
       itemRenderer="flex_gallery_item"  
       horizontalScrollPolicy="off" 
       verticalScrollPolicy="off" 
       borderStyle="none" 
       id="lstThumbnails" 
       itemClick="lstThumbnails_itemClick(event);"
       useHandCursor="true" 
       buttonMode="true"
       backgroundAlpha="0"
       themeColor="#1E1E1E"
       >
      </mx:HorizontalList>
     </mx:GridItem>
     <mx:GridItem width="100%" height="100%" verticalAlign="middle">
      <mx:Spacer/>
      <mx:Image id="cmdScrollNext" source="local/assets/gallery/next.png" click="cmdScrollNext_click()" useHandCursor="true" buttonMode="true" hideEffect="Fade" showEffect="Fade" />
     </mx:GridItem>
    </mx:GridRow>
    <mx:GridRow width="100%" height="20">
     <mx:GridItem width="100%" height="100%" colSpan="3" verticalAlign="middle">
      <mx:Label text="Label" width="100%" color="#FFFFFF" textAlign="center" id="lblFooter"/>
     </mx:GridItem>
    </mx:GridRow>
   </mx:Grid>