Commercial view all components

This creates a single page that contains all of the commercial components so far. There are multiple reasons for doing this;

1. It will help us to see them all in one place and aid re-use of code across all of the components.
2. Layout bugs are much easier to see and effects on other components are instantly obvious.
3. Somewhere to store the code that we are using for the DFP custom components, (I've added example output and the code straight from DFP.)
4. You can easily see what happens when you switch between fronts and article layout, (there is a simple js switch to add remove classes.)

The bad bits are that the page is a bit hacktastic, I've stuck in jQuery so I can parse the json easily etc.

If anyone wants to help me improve this then please do.

It has been set up so that it is only available on dev environments.

![all-the-commercial-components](https://cloud.githubusercontent.com/assets/1303616/3397827/46b8dc34-fd26-11e3-903d-df7ab70650bd.jpg)

can the name of this file be camelCase