What resolution should I make my image backgrounds for my universal iOS app so that it supports the Retina display?

Question

I have a universal iOS app with a custom view that has three buttons, each with an image background that extends to the sides of the screen for each orientation (portrait and landscape). The heights of each of the three buttons are the same and all three buttons take up the whole screen. So it looks simliar to this layout (image on the far right).

Since the widths and heights of each button are the same, I need to calculate how big (in pixels) I need to make each button image in order to support both orientations of the iPad and iPhone. On top of that, I also need to create higher res images to support the new Retina display. My questions are...

1. How do I calculate the resolution these images need to be for...
   1. iPad in both portrait and landscape mode
   2. iPhone in both portrait and landscape mode
   3. iPhone with Retina display
2. Instead of having two sets of images to support both Retina and non-Retina displays, can I just use one hi-res set that will be scaled down to the non-retina displays? if so, is this a good idea?
3. If I add a navigation controller and/or a toolbar, what are the heights of these two view objects so I can adjust the heights of my images?

Thanks so much in advance for all your help! I'm going to continue searching for these answers right now.

Answer 1

Good info on porting apps / graphics to retina display is here

Essentially Apple created a new unit for graphics called "points" and if you add additional images to the bundle and use new API you can automagically load one or the other image.

Answer 2

Here are the official apple guidelines

http://developer.apple.com/iphone/library/documentation/iphone/conceptual/iphoneosprogrammingguide/SupportingResolutionIndependence/SupportingResolutionIndependence.html#//apple_ref/doc/uid/TP40007072-CH10-SW3