This project is for a custom currency selector to be used in the header of the website. There will be a flag in the header (the default will be the US flag). Clicking on the header will cause a bubble to appear below the flag. This bubble will contain the 6 flags representing the available currencies. Hovering over one of the flags will cause the flag to switch to black and white with the currency symbol over the top. The flogs in both hovered and unhovered state will be one sprite image. I will provide all artwork for this project. The bubble will be created via CSS with a 9px gradient drop shadow (also created via CSS) a distance of 9px from the bubble. The top arrow-shaped portion of the bubble will be an image (also supplied by me).
There is an existing shopping cart bubble that appears when items are in the shopping cart. If a user clicks on the flag to switch the currency, the currency bubble must be above the shopping cart bubble and not behind, as they will overlap some. Clicking one of the flags in the bubble will switch the currency throughout the site to that chosen currency (as well as on the emailed invoices and shipping notces that they receive, though I believe this is the default Magento functionality) and cuase the bubble to disappear. Clicking anywhere outside of the bubble should also make the bubble disappear. Clicking on the current currency flag in the header should make the bubble disappear and leave the currency set as it is.
Attached are 2 images, one showing the currency flag in the header and the bubble below it, and the other one shows the same thing, but with one of the flags in the hover state.
The available currencies are (starting in the upper left and moving clock-wise: US Dollar, Canadian Dollar, Australian Dollar, Euro, Japanese Yen and British Pound.
The site should store the chosen currency in a cookie for the user so that it their chosen currency will still be selected if they leave the site and come back another time.