Flash Multiple Random Image Viewer

I need a square flash, cut into 9 smaller squares, with the 8 outer small squares randomly showing images from a folder, with fade-ins and fade-outs. The center will be a static image that will not change. When clicking on one of the images, it will "grow" from its position to cover the other images. On a second click it will shrink back and then continue with it's random image change. | 1 | 2 | 3 | | 4 | X | 5 | | 6 | 7 | 8 | ## Deliverables The code must be documented, so that I can make any changes to it as needed. Again, this is going to run on a typical LAMP server. The "small" version of the image should just be a scaled down version of the full size. The size of the large square is 600x600 pixels. The background of the website should show through the 3x3 grid. The directory that the images are located in should be configurable, either in the code, or in a config file. You can assume that initially, the images will be at /images/centerpiece. I need this done by January 25th, 2010. * * *This broadcast message was sent to all bidders on Sunday Jan 17, 2010 9:49:22 AM: Some points that I realize I didn't make, or make clear, in the original description... I am sending this to all so that all have an option to see and be sure they know what they are getting into. First, a picture: ![][1] There should be a definable-pixel gap between the small images. The background (what you can "see" behind the gap) must be transparent, so that the background of the web page shows through. Each small image should have a definable-width (in pixels) definable-color border. The border should stay at the defined width throughout the scale. When mousing over the image, this border should "glow" with an increase in gamma, to indicate that the user can "do" something to the image. The center image should be definable as well (from a different folder), and when clicked should expand and transform to yet another definable image. Scaling steps should be definable, allowing me to adjust it to what I believe is best to the eye. The small image "replacement" should have at least the following two options: one image goes transparent as the other goes opaque, or, fade through a definable color (meaning image a fades to a chosen color which then fades to image b). More options, of course, are better, but these two are the minimum. The steps between images should be definable, so that I can adjust to what looks best. Frame rate should be in the 18-24 range. The application must have a simple initial loading gauge, as simple as "- XX% loaded -" (without the quotes, obviously). This should take into account the first 8 images (actually, 10, counting the two center images that don't randomly rotate). --- !!IMPORTANT!! --- Just to reiterate, and this is big, the images *must* be loaded dynamically from the server upon need - not application start. I don't think this was very clear in my original posting, and it's incredibly important. The image folder will have over 1000 images, and I don't want the browser to have to download all of them prior to application start. At start, obviously it needs the first 8, but all future image needs should be calls to the server for the next image. The call could be done for that image when the current image is showing for that "frame". The fetch process can slow the load, and frames should be fetched serially - meaning that "frame 1" must finish fetching before "frame 2" starts fetching, and "frame 2" must finish fetching before "frame 3" starts fetching, etc. Having said that though, it should try to load so that images can be changed at a definable speed (meaning a new image is "flipped" every X seconds). Images will be about 100-200K in size, so transitions shouldn't be too much of an issue.