Notes on the iTunes Extras example
=================================

The example provides an iTunes Extras with the following features:

- a Home screen
- a Chapters screen that shows frames and titles for any number of 
  chapters in a movie, and allows the user to begin playback at 
  a selected chapter
- a Features screen that selects between three types of extras:
  deleted scenes, making of/behind the scenes clips, trailers
- a store page that allows links to external resources, such as
  the studio homepage or iTunes albums and movies.


Quick start
-----------

Here's how you can quickly adapt this example to create iTunes Extras.

- Create an icon for the iTunesArtwork file.

- Edit the manifest.xml and iTunesMetadata.plist files.

- Design the five screens: Home, Chapters, Features, More, and Photos.

- Design an extremely large image to be used as the "bleed" (the overflow
  around the 1280x720px main screen area). Replace images/interface 
  bleed.png with your image. If you are changing the file type (to JPG),
  make sure you also change the reference to the file in the CSS.

- Replace the background images in the appropriate directories under
  images/screenname/background.jpg.

- Edit controllers/data.js to add your own background audio loop, as well as
  the number of chapters and the names of the extra material you'll reference
  from the Features screen.

- Design interface elements for any navigable elements on the screens (e.g.
  home, back, chapters, resume, play, actual play buttons, iTunes store
  links, etc). Also note that anything which is interactive should have
  two images - one for the active and one for the non-active state. You
  should be able to find all such images by looking in the package.

- Don't worry too much if you need to create images that are not exactly
  the same size as the existing template. You'll edit the CSS for each
  screen to position the images anyway. However, you should ensure that
  the active and non-active images are the same size, or they will appear
  to move as they gain focus.

- Now it is time to start editing the CSS. For UI buttons, the style 
  is completely controlled by the CSS corresponding to the page. Some
  interactive elements, such as the chapter sliders and page controls,
  are styled partly by CSS and partly by Javascript. For example, the
  scaling effect seen in the chapters screen is found in CSS, but the
  distance between adjacent images is defined in Javascript. In most
  cases it should be fairly clear what each property is doing - but
  make sure you look at the slidingViewData and pageControlData in Javascript.


What is the TabController?
---------------------------------

The Home and More screens are very straightforward. They are just a set of
links, either external or to other pages. The Chapters screen is a little
more complex, in that it has UI controls which allow the user to slide between
a number of images.

The Features screen is a combination of two things. The first is a tab control which
switches between the three types of content - deleted scenes, "making
of" movies, and trailers. Each piece of content is like a mini screen, where only
one can be displayed at a time. In this case, the mini screens are like the
Chapters screen, in that they each show a sliding set of frames that initiate
playback.

If you wanted to add a fourth type of feature, say interviews with the cast
and crew, you'd have to first design the button that would be added to the
page as a tab. Next, you'd have to implement the mini-controller within the
controllers/features.js file. Towards the top of the file is the code that
handles each of the tabs. You can see that they are very similar to the
regular sliding page controller found in Chapters.