FX

      // Handle keyboard navigation
      onKeyPressed: function(evt: KeyEvent): Void {
          if (not playing) {
              if (evt.code == KeyCode.VK_SPACE) {
                  // The space bar changes to wall view on the front card.
                  zoomIn();
              } else if (evt.code == KeyCode.VK_UP) {
                  if (focusRotationStatus == RotateFocusStop) {
                      if (++focusIndex >= sizeof walls) {
                          focusIndex = 0;
                      }
                      focusRotationStatus = RotateFocusUp;
                      hopFocussedWall();
                  }
              } else if (evt.code == KeyCode.VK_DOWN) {
                  if (focusRotationStatus == RotateFocusStop) {
                      if (--focusIndex < 0) {
                          focusIndex = sizeof walls -1;
                      }
                      focusRotationStatus = RotateFocusDown;
                      hopFocussedWall();
                  }
              }
          }
      }

      onKeyReleased: function(evt: KeyEvent): Void {
          focusRotationStatus = RotateFocusStop;
      }

    // The fade out animation timeline.
    def fadeOut = Timeline {
        keyFrames: [
            at (0s) {
                fadeOutStartValues
            },
            KeyFrame {
                time: 0.35s
                values: fadeOutEndValues

                // When the fade out animation completes the now invisible front wall
                // is placed in the back and the fade in animation is started.
                action: function(): Void {
                    frontWall.toBack();
                    frontWall.translateX = 0;
                    frontWall.translateY = wallReentryHeight;
                    fadeIn.play();
                }
            }
        ];
    };

def fadeIn = Timeline {
    keyFrames: [
        at (0s) {
            fadeInStartValues
        },
        KeyFrame {
             time: 0.35s
             values: fadeInEndValues

             action: function(): Void {
                var index = wallOrder[0];
                delete wallOrder[0];
                insert index into wallOrder;
                --focusIndex;
                frontWall.frontWall = false;
                walls[wallOrder[0]].frontWall = true;
                if (focusIndex > 0) {
                    rotateWalls(zoom);
                } else {
                    if (zoom) {
                        zoomIn();
                    } else {
                        playing = false;
                    }
                }
            }
        }
    ];
};

Timeline {
    keyFrames: [
        at (0s) {
            startValues
        },
        at (0.5s) {
            midValues
        },
        KeyFrame {
            time: 1.0s
            values: endValues

            // When the animation completes set the visibility and view mode on 
            // all walls.
            action: function(): Void {
                var singleWall = walls[wallOrder[0]];

                for (wall in walls where wall != singleWall) {
                    wall.visible = false;
                    wall.viewMode = Constants.WALL_VIEW_SINGLE;
                }

                singleWall.visible = true;
                singleWall.viewMode = Constants.WALL_VIEW_SINGLE;
                singleWall.wall.requestFocus();

                playing = false;
            }
        }
    ];
}.play();

Timeline {
    keyFrames: [
        at (0s) {
            startValues
        },
        at(0.5s) {
            midValues
        },
        KeyFrame {
            time: 1.0s
            values: endValues

            // When the zoom out animation completes allow the ThumbnailController 
            // to resume.
            action: function(): Void {
                playing = false;
            }
        }
    ];
}.play();

def wallRect: Rectangle = Rectangle {
    x: 0
    y: 0
    width: bind maxVisibleWidth
    height: bind maxVisibleHeight

    fill: Constants.STAGE_BACKGROUND_COLOR
    strokeWidth: 2
    stroke: Constants.SCROLLCTL_COLOR

    blocksMouse: true
    smooth: false

    onMouseClicked: function(evt: MouseEvent) {
       if (viewMode == Constants.WALL_VIEW_SINGLE) {
           hideMedia();
       }
     }
};

def coverRect: Rectangle = Rectangle {
  x: 0
  y: 0
  width: bind maxVisibleWidth
  height: bind maxVisibleHeight
  fill: Color.rgb(0, 0, 0, 0)

  blocksMouse: bind viewMode == Constants.WALL_VIEW_DECK

  onMousePressed: function(evt: MouseEvent) {
      if (viewMode == Constants.WALL_VIEW_DECK) {
          setViewMode(Constants.WALL_VIEW_SINGLE, this);
      }
   }
 };

package def wall : Group = Group {
   clip: wallRect
   content: [
       wallRect,
       thumbsGroupContainer,
       titleBar,
       searchTB,
       scrollCtl,
       coverRect
   ]
}

if (viewMode == Constants.WALL_VIEW_SINGLE) {
    if (frontWall) {
       // Queue the visible thumbs for priority loading.
       // Unload thumbs no longer in the load range.
       // Load a page of thumbs on each side of the visible range.
    } else {
       // The wall is obscured. Unload the thumbnails.
    }
} else {
    // Deck view
    if (frontWall) {
       // Queue the visible thumbs for priority loading.
    } else {
       // The wall is partially obscured.
       // Load top row of thumbnails 
       // Unload the thumbnails that are not visible.
    }
}

package def thumbnailController = ThumbnailController{};

/**
 * This Class is used to parse video data from Flickr Image Search Web Service.
 */
def flickrImages : WebSearch = FlickrAPI {
    searchQuery: "cars"
    mediaType: MetaData.type_video
}

Wall {
        id: "Wall flickrImages"
        webSearch: bind flickrImages
        fullView: showMedia
        hideMedia: hideMedia
        isMediaShowing: bind ( media != null )
        setViewMode: setViewMode
        maxVisibleWidth: bind stage.scene.width
        maxVisibleHeight: bind stage.scene.height
        viewMode: Constants.WALL_VIEW_SINGLE
        frontWall: true
        visible: true
    }

/**
 * The current Z order of the walls.
 */
var wallOrder:Integer[] = [3, 2, 1, 0];

flickrImages.search();