Magento - Place dynamic shopping cart icon at top of site

If you view the attached file "Current [login to view URL]" you'll see how my site currently functions. I'd like to replace what you see with an empty shopping cart to look like the attached file "Empty [login to view URL]". When a customer adds an item to their cart it will look like the attached file "Full [login to view URL]". If the shopping cart has 1 or more items in it, a box below the cart will show the current number of items and the total value of those items (not including tax and shipping, obviously). The box should be created via CSS (except for the pointer at the top which will need to be an image, I believe) so that it can dynamically resize based on the amount of text in it. I'm very comfortable with CSS so I can be of help there, if needed. I will provide .png images of the empty and full shopping carts. The right edge of the shopping cart should align with the right edge of the pink logo and the blue text box should overlap the top of the logo by about 5 pixels (as shown in the picture) to help draw attention to the fact that the box is there. It should be centered horizontally on the shopping cart, Clicking on an empty shopping cart should do nothing, while clicking on a shopping cart with items in it should take you to the checkout page. Clicking on the text in the box should also take you to the checkout page. When the customer is at the checkout page, I'd like the text bubble to not be present.