<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:widget="gov.va.med.edp.widget.*"
        xmlns:acc="flash.accessibility.*"
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
        width="100%" height="100%" creationComplete="loadBoardSpec()">

    <mx:Script>
		<![CDATA[
		import gov.va.med.edp.util.AccessibilityTools;
        import mx.controls.DataGrid;
        import mx.events.MenuEvent;
        import mx.collections.ICollectionView;
        import gov.va.med.edp.widget.InfoDialog;
        import gov.va.med.edp.widget.YesNoDialog;
        import mx.events.CloseEvent;
        import gov.va.med.edp.vo.LookupVO;
        import gov.va.med.edp.vo.DisplaySizeVO;
        import gov.va.med.edp.control.config.ConfigChangeDisplayBoardPropertiesEvent;
        import mx.collections.IList;
        import mx.managers.DragManager;
        import mx.events.DragEvent;
        import gov.va.med.edp.control.config.ConfigurationEvent;
        import gov.va.med.edp.vo.ColorMapVO;
        import mx.events.DataGridEvent;
        import mx.events.CollectionEvent;
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.events.IndexChangedEvent;
        import gov.va.med.edp.control.config.BoardConfigEvent;
        import gov.va.med.edp.control.config.ConfigChangeColumnEvent;
        import gov.va.med.edp.control.config.ConfigRemoveColumnEvent;
        import gov.va.med.edp.control.config.ConfigAddColumnEvent;
        import gov.va.med.edp.model.TrackingModelLocator;
        import gov.va.med.edp.vo.ColumnSpecVO;
        import gov.va.med.edp.util.KeyUtils;

        [Bindable]
        private var model: TrackingModelLocator = TrackingModelLocator.getInstance();

        private var dragInitiator: String;
        private var switchMode: String;

        private var _boardColumns:ICollectionView;

        [Bindable]
        private function get boardColumns():ICollectionView {
            return _boardColumns;
        }

        private function set boardColumns(cols:ICollectionView):void {
            if (_boardColumns != null && model.config.availableColumns.filterFunction === availableColumnsFilterFunction) {
                model.config.availableColumns.filterFunction = null;
            }
            _boardColumns = cols;
            if (_boardColumns != null) {
                model.config.availableColumns.filterFunction = availableColumnsFilterFunction;
                model.config.availableColumns.refresh();
            }
        }

        private function set readyToListen(value: Boolean): void
        {
            if (value == false) return;
            model.config.columns.addEventListener(CollectionEvent.COLLECTION_CHANGE, rebuildPreview);
            rebuildPreview(null);
            boardList.selectedIndex = model.config.boardIndex;
        }

        private function set keepSelectedBoardVisible(value: int): void
        {
            callLater(boardList.scrollToIndex, [value]);
        }

        private function loadBoardSpec(): void
        {
            var e: BoardConfigEvent =
                    new BoardConfigEvent(BoardConfigEvent.EVENT_LOAD_CONFIG_BOARD);
            e.boardID = (boardList.selectedItem == null) ? 0 : (boardList.selectedItem as LookupVO).data;
            e.dispatch();
        }

        private function saveConfig(): void
        {
            var saveEvent: BoardConfigEvent =
                    new BoardConfigEvent(BoardConfigEvent.EVENT_SAVE_CONFIG_BOARD);
            var selectedBoard: LookupVO = boardList.selectedItem as LookupVO;
            saveEvent.boardID = selectedBoard.data;
            saveEvent.boardName = selectedBoard.label;
            saveEvent.dispatch();
        }

        private function cancelChanges():void {
            loadBoardSpec();
            boardList.setFocus();
        }
        
        private function addNewBoard(): void
        {
            new BoardConfigEvent(BoardConfigEvent.EVENT_ADD_CONFIG_BOARD).dispatch();
            callLater(boardNameInput.setFocus);
        }

        private function attemptBoardSwitch(eventName: String): void
        {
            switchMode = eventName;
            if (model.config.boardMods) {
                YesNoDialog.show("You have unsaved changes to the currently selected board.\n\n" +
                                 "Do you want to abandon these changes?\n\n" +
                                 "Yes=Lose Changes\nNo=Return & Save Changes", "Unsaved Changes", handleSwitch, addBoardBtn);
            } else {
                switchBoard();
            }
        }

        private function handleSwitch(event: CloseEvent): void
        {
            if (event.detail == YesNoDialog.YES) {
                switchBoard();
            } else {
                boardList.selectedIndex = model.config.boardIndex;
            }
        }

        private function switchBoard(): void
        {
            if (switchMode == BoardConfigEvent.EVENT_ADD_CONFIG_BOARD) addNewBoard();
            if (switchMode == BoardConfigEvent.EVENT_LOAD_CONFIG_BOARD) loadBoardSpec();
            switchMode = "";
        }

        private function rebuildPreview(event:CollectionEvent): void
        {
            var newCols:Array = new Array();
            var newCol: DataGridColumn;
            for each (var colInfo: ColumnSpecVO in model.config.columns) {
                newCol = new DataGridColumn(colInfo.attribute);
                newCol.headerText = colInfo.header;
                newCol.dataField = colInfo.attribute;
                newCol.width = colInfo.width;
                newCol.setStyle("fontSize", model.config.displayBoardProperties.fontSize);
                newCols.push(newCol);
            }
            preview.columns = newCols;

            if (event != null) {
                new ConfigurationEvent(ConfigurationEvent.EVENT_BOARD_MODIFIED).dispatch();
            }
        }

        public function addColumnItemClickHandler(event:MenuEvent):void {
            var selectedColumn:ColumnSpecVO = event.item as ColumnSpecVO;
            addColumn(selectedColumn);
        }

        // drag/drop ------------------------------------------------------

        private function setDragInitator(event:MouseEvent, id:String):void
        {
            dragInitiator = id;
        }

        private function doDragOver(event:DragEvent):void
        {
            var dropTarget:DataGrid = DataGrid(event.currentTarget);
            // add the DataGrid drop feedback
            dropTarget.showDropFeedback(event);
        }

        private function doDragEnter(event:DragEvent):void
        {
            var dropTarget:DataGrid = DataGrid(event.currentTarget);

            if (dragInitiator == dropTarget.id) {
                DragManager.showFeedback(DragManager.MOVE);
                DragManager.acceptDragDrop(dropTarget);
            }
        }


        private function doDragDrop(event:DragEvent):void
        {
            var dropTarget:DataGrid = DataGrid(event.currentTarget);
            doDragExit(event);

            var items:Array = event.dragSource.dataForFormat("items") as Array;
            var dropLoc:int = dropTarget.calculateDropIndex(event);
            for (var i:int = 0; i < items.length; i++)
            {
                if (dragInitiator == dropTarget.id) {
                    // moving within list
                    if (dropLoc > DataGrid(dropTarget).selectedIndex)
                        dropLoc = dropLoc - 1;
                    if (dropLoc > IList(dropTarget.dataProvider).length - 1)
                        dropLoc = dropLoc - 1;
                    IList(dropTarget.dataProvider).removeItemAt(dropTarget.selectedIndex);
                    IList(dropTarget.dataProvider).addItemAt(items[i], dropLoc);
                    callLater(updateSelection, [dropLoc]);
                } else {
                    IList(dropTarget.dataProvider).addItemAt(items[i], dropLoc);
                }
            }
        }

        private function updateSelection(index : int) : void
        {
            boardColumnsGrid.selectedIndex = index;
        }


        private function doDragExit(event:DragEvent):void
        {
            var dropTarget:DataGrid = DataGrid(event.currentTarget);
            dropTarget.hideDropFeedback(event);
        }

        private function keyHandler(event:KeyboardEvent): void
        {
            if (!KeyUtils.isRemoveKey(event)) return;
            if (boardColumnsGrid.editable && boardColumnsGrid.editedItemPosition != null) return;
            if (KeyUtils.isRemoveKey(event)) removeSelectedColumnsFromGrid();

            if (event.keyCode == Keyboard.ESCAPE) {
                boardColumnsGrid.selectedIndex = -1;
                btnSaveBoard.setFocus();
            }
        }


        private function removeSelectedColumnsFromGrid(): void
        {
            if (boardColumnsGrid.selectedItems != null && boardColumnsGrid.selectedItems.length > 0) {
                for each (var item:ColumnSpecVO in boardColumnsGrid.selectedItems) {
                    removeColumn(item);
                }

            }
        }


        // update columns -------------------------------------------------

        private function addColumn(selectedItem: ColumnSpecVO): void
        {
            if (selectedItem == null) return;

            var addEvent: ConfigAddColumnEvent =
                    new ConfigAddColumnEvent(ConfigAddColumnEvent.EVENT_CONFIG_ADD_COLUMN);
            addEvent.data = selectedItem;
            addEvent.dispatch();

            model.config.availableColumns.refresh();

            if (AccessibilityTools.isAccessibilityActive()) InfoDialog.show("Added successfully", "Message", true, addColumnSelector);
        }

        private function removeColumn(selectedItem: ColumnSpecVO): void
        {
            if (selectedItem == null) return;

            var removeEvent: ConfigRemoveColumnEvent =
                    new ConfigRemoveColumnEvent(ConfigRemoveColumnEvent.EVENT_CONFIG_REMOVE_COLUMN);
            removeEvent.data = selectedItem;
            removeEvent.dispatch();

            model.config.availableColumns.refresh();

            if (AccessibilityTools.isAccessibilityActive()) InfoDialog.show("Removed successfully", "Message", true, boardColumnsGrid);
        }

        private function changeBoardName():void {
            var newBoardName: String = boardNameInput.text;
            if (newBoardName != model.config.boards[model.config.boardIndex].label) {
                boardList.selectedItem.label = newBoardName;
                new ConfigurationEvent(ConfigurationEvent.EVENT_BOARD_MODIFIED).dispatch()
            }
        }

        private function changeColumnSequence(event: IndexChangedEvent): void
        {
            var changeEvent: ConfigChangeColumnEvent =
                    new ConfigChangeColumnEvent(ConfigChangeColumnEvent.EVENT_CONFIG_CHANGE_COLUMN_SEQ);
            changeEvent.oldIndex = event.oldIndex;
            changeEvent.newIndex = event.newIndex;
            changeEvent.dispatch();
        }

        private function changeColumnWidth(event: DataGridEvent): void
        {
            var changeEvent: ConfigChangeColumnEvent =
                    new ConfigChangeColumnEvent(ConfigChangeColumnEvent.EVENT_CONFIG_CHANGE_COLUMN_WIDTH);
            changeEvent.widths = [];
            for (var i: int = 0; i < preview.columns.length; i++) {
                changeEvent.widths.push(DataGridColumn(preview.columns[i]).width);
            }
            changeEvent.dispatch();
        }

        private function changeRowColor(): void
        {
            var changeEvent: ConfigChangeColumnEvent =
                    new ConfigChangeColumnEvent(ConfigChangeColumnEvent.EVENT_CONFIG_CHANGE_ROW_COLOR);
            var colorMap: ColorMapVO = rowColor.selectedItem as ColorMapVO;
            changeEvent.rowColor = (colorMap != null) ? colorMap.id : "";
            changeEvent.dispatch();
        }

        // update display properties --------------------------------------


        private function changeDisplayBoardWidth(): void
        {
            var changeEvent: ConfigChangeDisplayBoardPropertiesEvent =
                    new ConfigChangeDisplayBoardPropertiesEvent(ConfigChangeDisplayBoardPropertiesEvent.EVENT_CONFIG_CHANGE_DISPLAY_WIDTH);
            var displayWidth: DisplaySizeVO = displaySizeCmb.selectedItem as DisplaySizeVO;
            changeEvent.displaySize = displayWidth;
            changeEvent.dispatch();
        }

        private function changeDisplayBoardFontSize(): void
        {
            var changeEvent: ConfigChangeDisplayBoardPropertiesEvent =
                    new ConfigChangeDisplayBoardPropertiesEvent(ConfigChangeDisplayBoardPropertiesEvent.EVENT_CONFIG_CHANGE_FONT_SIZE);
            var fontSize: int = fntSizeNmStepper.value;
            changeEvent.fontSize = fontSize;
            changeEvent.dispatch();

            for each (var gridColumn:DataGridColumn in preview.columns) {
                gridColumn.setStyle("fontSize", fontSize);
            }
        }

        private function changeDisplayBoardScrollDelay(): void
        {
            var changeEvent: ConfigChangeDisplayBoardPropertiesEvent =
                    new ConfigChangeDisplayBoardPropertiesEvent(ConfigChangeDisplayBoardPropertiesEvent.EVENT_CONFIG_CHANGE_SCROLL_DELAY);
            var scrollDelay: int = ScrollDlyNmStepper.value;
            changeEvent.scrollDelay = scrollDelay;
            changeEvent.dispatch();
        }

        private function changeDisplayBoardSquish(): void
        {
            // prevent setting boardMods during initialization of checkbox
            if (model.config.boardLoaded == false) return;

            var changeEvent: ConfigChangeDisplayBoardPropertiesEvent =
                    new ConfigChangeDisplayBoardPropertiesEvent(ConfigChangeDisplayBoardPropertiesEvent.EVENT_CONFIG_CHANGE_SQUISH);
            changeEvent.squish = squishChkBox.selected;
            changeEvent.dispatch();
        }

        // label function for color maps
        private function showColorMapName(item: Object, column: DataGridColumn): String
        {
            var c: ColumnSpecVO = item as ColumnSpecVO;
            if ((c != null) && (c.colorMap != null)) {
                return c.colorMap.name;
            } else {
                return "";
            }
        }

        private function changeColumnHeader(): void {
            if (headerInput.text != boardColumnsGrid.selectedItem.header) {
                boardColumnsGrid.selectedItem.header = headerInput.text;
            }
        }

        private function changeColumnColor(): void {
            if (boardColumnsGrid.selectedItem.colorMap != columnColor.selectedItem) {
                boardColumnsGrid.selectedItem.colorMap = columnColor.selectedItem;
            }
        }

        private function changeColumnSequenceText(): void {
            var currentIndex:int = boardColumnsGrid.selectedIndex;
            var newIndex:int = int(columnOrderInput.text) - 1;
            if (newIndex < 0 || newIndex >= boardColumns.length) return;
            if (newIndex != currentIndex) {
                boardColumnsGrid.selectedIndex = -1;
                var changeEvent: ConfigChangeColumnEvent =
                        new ConfigChangeColumnEvent(ConfigChangeColumnEvent.EVENT_CONFIG_CHANGE_COLUMN_SEQ);
                changeEvent.oldIndex = currentIndex;
                changeEvent.newIndex = newIndex;
                changeEvent.dispatch();
                callLater(updateSelection, [newIndex]);
                callLater(columnOrderInput.setFocus);
            }
        }

        private function changeColumnWidthText(): void {
            var currentWidth:int = 0;
            var newWidth:int = int(widthInput.text);

            resizeColumn(preview, boardColumnsGrid.selectedIndex, newWidth);
        }

        /**
         *  @private
         *  If there is no horizontal scroll bar, changes the display width of other columns when
         *  one column's width is changed.
         *  @param col column whose width is changed
         *  @param w width of column
         */
        private function resizeColumn(grid:DataGrid, col:int, w:Number):void
        {
            if (col < 0 || col >= grid.columns.length - 1)   // no resize of right most column
                return;

            if (w < grid.columns[col].minWidth)
                w = grid.columns[col].minWidth;

            // find the columns in the set of visible columns;
            var n:int = grid.columns.length;
            var i:int = col;

            // we want all cols's new widths to the right of this to be in proportion
            // to what they were before the stretch.

            // get the original space to the right not taken up by the column
            var totalSpace:Number = 0;
            var lastColumn:DataGridColumn;
            var newWidth:Number;
            //non-resizable columns don't count though
            for (i = col + 1; i < n; i++)
            {
                if (grid.columns[i].visible)
                    if (grid.columns[i].resizable)
                        totalSpace += grid.columns[i].width;
            }

            var newTotalSpace:Number = grid.columns[col].width - w + totalSpace;
            if (totalSpace)
            {
                grid.columns[col].width = w;
            }

            var totX:Number = 0;
            // resize the columns to the right proportionally to what they were
            for (i = col + 1; i < n; i++)
            {
                if (grid.columns[i].visible)
                    if (grid.columns[i].resizable)
                    {
                        newWidth = Math.floor(grid.columns[i].width
                                * newTotalSpace / totalSpace);
                        if (newWidth < grid.columns[i].minWidth)
                            newWidth = grid.columns[i].minWidth;
                        grid.columns[i].width = newWidth;
                        totX += grid.columns[i].width;
                        lastColumn = grid.columns[i];
                    }
            }

            if (totX > newTotalSpace)
            {
                // if excess then should be taken out only from changing column
                // cause others would have already gone to their minimum
                newWidth = grid.columns[col].width - totX + newTotalSpace;
                if (newWidth < grid.columns[col].minWidth)
                    newWidth = grid.columns[col].minWidth;
                grid.columns[col].width = newWidth;
            }
            else if (lastColumn)
            {
                // if less then should be added in last column
                // dont need to check for minWidth as we are adding
                lastColumn.width = lastColumn.width - totX + newTotalSpace;
            }

            invalidateDisplayList();
        }

        private static function availableColumnsFilterFunction(item:Object):Boolean {
            var availableColumn:ColumnSpecVO = item as ColumnSpecVO;
            for each (var col:ColumnSpecVO in TrackingModelLocator.getInstance().config.columns) {
                if (availableColumn.label == col.label) return false;
            }
            return true;
        }
		]]>
    </mx:Script>

    <mx:HBox height="100%" width="100%">
        <mx:VBox height="100%">
            <mx:Button label="Add Board"
                       click="attemptBoardSwitch(BoardConfigEvent.EVENT_ADD_CONFIG_BOARD)"
                       id="addBoardBtn"
                       tabIndex="1101"/>
            <mx:List
            	id="boardList"
            	dataProvider="{model.config.boards}"
            	selectedIndex="{model.config.boardIndex}"
            	change="attemptBoardSwitch(BoardConfigEvent.EVENT_LOAD_CONFIG_BOARD)"
            	rowCount="{model.config.boards.length}"
            	backgroundColor="0xe7e7e7" cornerRadius="4" width="96"
            	labelField="label"
            	tabIndex="1102" />
        </mx:VBox>

        <mx:VBox height="100%" paddingLeft="12">
            <widget:OpenAlwaysPopUpMenuButton id="addColumnSelector" dataProvider="{model.config.availableColumns}"
                                              label="Add Column" itemClick="addColumnItemClickHandler(event)"
                                              tabIndex="1103"/>
            <mx:DataGrid
                    id="boardColumnsGrid"
                    dataProvider="{boardColumns}"
                    accessibilityProperties="{boardColumnsGridAcc}"
                    height="100%" width="100%"
                    dragEnabled="true"
                    dragEnter="doDragEnter(event);"
                    dragExit="doDragExit(event)"
                    dragDrop="doDragDrop(event)"
                    dragOver="doDragOver(event)"
                    allowMultipleSelection="true"
                    dragMoveEnabled="false"
                    mouseDown="setDragInitator(event, 'boardColumnsGrid')"
                    keyDown="keyHandler(event)"
                    sortableColumns="false"
                    tabIndex="1104">
                <mx:columns>
                    <mx:DataGridColumn
                            headerText="Column"
                            dataField="label"
                            width="160"/>
                    <mx:DataGridColumn
                            headerText="Header"
                            dataField="header"
                            width="84"/>
                    <mx:DataGridColumn
                            headerText="Color Based On"
                            dataField="colorMap"
                            editorDataField="colorMap"
                            labelFunction="showColorMapName"
                            width="160"/>
                </mx:columns>
            </mx:DataGrid>
        </mx:VBox>
        <mx:VBox height="100%" width="100%">
            <mx:Form id="boardPropertyForm">
                <mx:FormHeading label="Board Properties"/>
                <mx:FormItem label="Board Name">
                    <mx:TextInput id="boardNameInput" styleName="formField" text="{boardList.selectedItem.label}"
                                  editable="{boardList.selectedItem.label != 'Main (default)'}"
                                  change="changeBoardName()" tabIndex="1200"/>
                </mx:FormItem>
                <mx:FormItem label="Row Color Based On">
                    <mx:ComboBox
                            id="rowColor"
                            dataProvider="{model.config.colorMaps}"
                            selectedIndex="{model.config.rowColorMapIndex}"
                            labelField="name"
                            rowCount="{model.config.colorMaps.length}"
                            change="changeRowColor()"
                            styleName="formField"
                            tabIndex="1201"/>
                </mx:FormItem>
                <mx:FormItem label="Display Size">
                    <widget:ValueComboBox
                            id="displaySizeCmb"
                            styleName="formField"
                            dataProvider="{model.config.displaySizes}"
                            labelField="label"
                            value="{model.config.displayBoardProperties.displaySize.label}"
                            rowCount="{model.config.displaySizes.length}"
                            change="changeDisplayBoardWidth()"
                            tabIndex="1202"/>
                </mx:FormItem>
                <mx:FormItem label="Font Size">
                    <widget:AccessibleNumericStepper
                            id="fntSizeNmStepper"
                            name=" "
                            stepSize="1" minimum="6" maximum="36"
                            change="changeDisplayBoardFontSize()"
                            value="{model.config.displayBoardProperties.fontSize}"
                            styleName="formField"
                            tabIndex="1203"/>
                </mx:FormItem>
                <mx:FormItem label="Squish Rows To Fit">
                    <mx:CheckBox
                            id="squishChkBox"
                            label="(if possible)"
                            toolTip="squish will try to squish the Display Board rows so as to display the data on one screen as long as the font size is greater than 9. If the number of rows grows and the rows start getting too small, normal auto scrolling functionality will return."
                            change="changeDisplayBoardSquish()"
                            selected="{model.config.displayBoardProperties.squish}"
                            paddingLeft="0" paddingTop="2"
                            styleName="formField"
                            tabIndex="1204"/>
                </mx:FormItem>
                <mx:FormItem label="Scroll Delay">
                    <widget:AccessibleNumericStepper
                            id="ScrollDlyNmStepper"
                            name=" in Seconds"
                            stepSize="1" minimum="1" maximum="120"
                            change="changeDisplayBoardScrollDelay()"
                            value="{model.config.displayBoardProperties.scrollDelay}"
                            styleName="formField"
                            tabIndex="1205"/>
                </mx:FormItem>

	            <mx:Form id="columnProperties" visible="{boardColumnsGrid.selectedItem != null}">
	                <mx:FormHeading label="Column Properties" paddingTop="6"/>
	                <mx:FormItem label="Header">
	                    <mx:TextInput id="headerInput" styleName="formField"
	                                  text="{boardColumnsGrid.selectedItem.header}" tabIndex="1207"
	                                  change="changeColumnHeader()"/>
	                </mx:FormItem>
	                <mx:FormItem label="Color Based On" toolTip="Overrides row color setting.">
	                    <mx:ComboBox
	                            id="columnColor"
	                            dataProvider="{model.config.colorMaps}"
	                            selectedIndex="{model.config.colorMaps.getItemIndex(boardColumnsGrid.selectedItem.colorMap)}"
	                            labelField="name"
	                            rowCount="{model.config.colorMaps.length}"
	                            change="changeColumnColor()"
	                            styleName="formField"
	                            tabIndex="1208"/>
	                </mx:FormItem>
	                <mx:FormItem label="Column Order" visible="{AccessibilityTools.isAccessibilityActive()}" >
	                    <mx:TextInput id="columnOrderInput" styleName="formField"
	                                  text="{boardColumnsGrid.selectedIndex + 1}" tabIndex="1209"
	                                  change="changeColumnSequenceText()"/>
	                </mx:FormItem>
	                <mx:FormItem label="Width" visible="{AccessibilityTools.isAccessibilityActive()}" >
	                    <mx:TextInput id="widthInput" styleName="formField" text="{boardColumnsGrid.selectedItem.width}"
	                                  tabIndex="1210" change="changeColumnWidthText()"/>
	                </mx:FormItem>
	            </mx:Form>
            </mx:Form>	            

			<mx:HBox
				id="boxButton"
				height="100%" width="100%"
				horizontalAlign="center" verticalAlign="bottom" >
<!--                <mx:Button id="btnCancelBoardChanges"
                		   label="Cancel" enabled="{model.config.boardMods}" tabIndex="1300"
                           click="cancelChanges()"/>-->
	            <mx:Button id="btnSaveBoard"
	                       label="Save Display Board Changes"
	                       enabled="{(model.config.boardMods &amp;&amp; model.config.boardLoaded)}"
	                       click="saveConfig()" tabIndex="1301"/>				
			</mx:HBox>
        </mx:VBox>

    </mx:HBox>
    <mx:Spacer height="12"/>
    <mx:HRule width="100%" strokeColor="0xcccccc" shadowColor="0x777777" />
    <mx:Label
            text="Preview Display Board   (drag to move and size columns)"
            styleName="controlLabel"/>
    <mx:Canvas width="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="off">
        <mx:DataGrid
                id="preview"
                accessibilityProperties="{previewAcc}"
                columnStretch="changeColumnWidth(event)"
                headerShift="changeColumnSequence(event)"
                width="{model.config.displayBoardProperties.displaySize.width}"
                rowCount="3"
                focusEnabled="false">
            <mx:columns>
                <mx:DataGridColumn headerText="Selected columns appear here, drag column splitters to set widths."/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>

    <mx:NumberValidator id="columnOrderValidator" source="{columnOrderInput}" property="text" minValue="1"
                        maxValue="{boardColumns.length}"/>

    <acc:AccessibilityProperties id="boardColumnsGridAcc" name="Board Columns"/>
    <acc:AccessibilityProperties id="previewAcc" name="Preview Display Board   (drag to move and size columns)"/>
    <acc:AccessibilityProperties id="availableColumnsAcc" name="Available Columns"/>

    <mx:Binding source="model.config.boardLoaded" destination="readyToListen"/>
    <mx:Binding source="model.config.columns" destination="boardColumns"/>
    <mx:Binding source="model.config.boardIndex" destination="keepSelectedBoardVisible"/>
</mx:VBox>