Design a shopping page with 5 products on it. Each product has one image, product title, product description, and price.  You may add necessary buttons, page heading, and background.

A. When the page first loaded, display exactly 5 product items with images and their corresponding titles.  (The items could be any academic related items such as books, PCs, etc.) The title could be with borders too.

B. When the mouse pointer hover over either on one of the product images or on one of the titles, both the corresponding image and the title will be activated.  Both the color of their borders will be changed, or the sizes will be increased a little, or the tone of the image/text will be changed.  And when the pointer left the image or the title, the original image and text format will be restored. 

C. When a product image or title is clicked, its description with price will be displayed below the image and the title.  And when the expanded box of the description and price is clicked, it will shrink back and hidden again.

D. Set the upper right corner of each product image with a red "x" button and when it is clicked, the image will be: (1)removed from the current image list; (2)a mini-sized image is added in a pool of deleted items area.  Use a jQuery animation action for this transition. You may just reduce the width of the image to change its size.

E. If a particular deleted-item image is clicked, it will be appended back to the product image list and is removed from the deleted-item area. Use a jQuery animation action for this transition.

F. Items in the shopping list can be re-arranged by drag-and-drop of any image/title to a new location in the list.

G. The move of the products between the two groups are remembered by a client cookie which expires after two weeks of last update.  Therefore, when the page reloads again next time in 2 weeks, it will be automatically restored to the last state of products selections.  Setup your browser to allow the use of cookies.