<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Style>
        Panel {
            titleStyleName: panelTitleStyle;
        }

        .panelTitleStyle {
            fontWeight: bold;
            letterSpacing: 4;
            textAlign: center;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.events.ListEvent;
            import mx.events.ResizeEvent;
            import mx.managers.PopUpManager;
            
            private var fullImg:Image;

            private function init(obj:Object = null):void {
                if (obj == null) {
                    panel.title = "";
                    img.source = null;
                } else {
                    panel.title = String(obj.@title).toUpperCase();
                    img.source = obj.@fullImage;
                }
            }

            private function horizontalList_change(evt:ListEvent):void {
                init(evt.target.selectedItem);
            }

            private function horizontalList_itemRollOver(evt:ListEvent):void {
                init(evt.itemRenderer.data);
            }

            private function horizontalList_itemRollOut(evt:ListEvent):void {
                if (horizontalList.selectedIndex == -1) {
                    init(null);
                } else {
                    init(horizontalList.selectedItem);
                }
            }
            
            private function horizontalList_doubleClick(evt:MouseEvent):void {
                var obj:Object = evt.currentTarget.selectedItem;
                fullImg = new Image();
                fullImg.source = obj.@fullImage;
                fullImg.toolTip = "Click to close pop up";
                fullImg.buttonMode = true;
                fullImg.useHandCursor = true;
                fullImg.addEventListener(ResizeEvent.RESIZE, fullImg_resize);
                fullImg.addEventListener(MouseEvent.CLICK, fullImg_click);
                PopUpManager.addPopUp(fullImg, this, true);
            }
            
            private function fullImg_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(fullImg);
            }
            
            private function fullImg_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(fullImg);
            }
        ]]>
    </mx:Script>

    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

    <mx:Panel id="panel"
            layout="absolute"
            styleName="opaquePanel"
            height="100%">
        <mx:Image id="img"
                scaleContent="true"
                horizontalCenter="0"
                verticalCenter="0"
                maintainAspectRatio="true"
                width="250"
                height="250"
                completeEffect="Fade" />
        <mx:ControlBar>
            <mx:HorizontalList id="horizontalList"
                    dataProvider="{xmlListColl}"
                    labelField="lbl"
                    iconField="src"
                    itemRenderer="CustomItemRenderer"
                    columnCount="4"
                    columnWidth="125"
                    rowHeight="100"
                    horizontalScrollPolicy="on"
                    change="horizontalList_change(event);"
                    itemRollOver="horizontalList_itemRollOver(event);"
                    itemRollOut="horizontalList_itemRollOut(event);"
                    doubleClickEnabled="true"
                    doubleClick="horizontalList_doubleClick(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>