The happened when the welcome page was first loaded and then one
switched to API tab. It happened because the class tree was activated
while it was hidden, so height calculations couldn't be performed
correctly. Fixed by adding an empty item to trees container that's
activated first instead of the class tree.

Previusly only the guides tree was expanded, which looked strange (like
a bug) compared to others.

The default 'landscape' now default to a view where the phone is in
portrait orientation, but because the screen is cut in half, the
resolution is actually a landscape.

Most importantly it allows us to simply write @example miniphone,
instead of having to write @example miniphone portrait - the default
landscape orientation is now the thing that one needs 99% of time.

Only `@example preview` will now switch automatically to preview mode.
The default is code-editor mode.  This also means the Touch examples
aren't switched to preview mode by default.

Because code-editor mode can now be startup mode for Touch examples,
fix the initial height calculation on that case.  Overall recalculate
the example height when switching between modes.

Also document the options object.

Miniphone is rendered as half of iPhone.

So one would typically use:

    @example miniphone portrait

The landscape mode is probably useless, but it's there for
completeness's sake.

Also allow more then one dot (".") in the name of an alias.

The height of the whole editor collapsed to 0px.

The leaf property happened to have three possible values: true, false, undefined.
But it was assumed there's only two. Eliminated the undefined case.

For now I'm just turning it on for Touch 2.  But I'm thinking of making
it the default overall.

The device widths are all calculated now in one place.

50% size was right off - this way tablet examples would be smaller than phone
examples, plus the text became too small to read.

75% was also tried, but it seemed just a little bit too big, so I went
with 70%.

Also removed the duplicted iPad image files.

All words added after @example tag are converted into CSS classes.
The classes are detected in frontend and appropriate styling is applied.

The default is: phone landscape.

This greatly simplifies the Inline component, delegating the actual
preview showing and code editing to other classes.  More over the
InlineExamples controller no more deals with the iframe and many
other details directly.

Removed CSS-loading from both iframe files - for now it's not used.
Also removed error alert - writing the error message to document.body
should be enough, plus it's less obtrusive.

Inside touchIframe.html wrapping the code inside Ext.setup().
For start it will make most examples work.

That's currently a sort-of solution because the example itself in the
iframe is not scaled down at all.

Otherwise Touch will complain that Ext.setup has already been called.

- There are now two iframe files: extIframe.html and touchIframe.html.
- Touch iframe is wrapped inside div which renders iPhone border.
- The height of touch examples is fixed so that the phone image would
  fit.