First Draft

- needs a once over but this is working
stateIndicator JS module

__Module Overview__
- a module that reads the z-index on a hidden element
- the value of the z-index maps to a screen size
- as the screen dimensions change the module will publish two events passing the current state into the callback

## The JS
Require the module:
The module will init and create the hidden element it requires.
``` js
require('./modules/moj.state-indicator')
```

__Event 1:__
Event name: `/device-state/change/`
Callback arguments: ` event, state `
- event: jQuery event object
- state: string (`"mobile"` or `"tablet"` or `"desktop"`)

Subscribe like this:
``` js
$.subscribe('/device-state/change/', function(event, state){
// .. do something clever here
});
```

__Event 2:__
Event name: `/device-state/move/[from state]/to/[to state]/`
Callback arguments: ` event, state `
- event: jQuery event object
- state: string (`"mobile"` or `"tablet"` or `"desktop"`)

Subscribe like this:
``` js
$.subscribe('/device-state/move/mobile/to/tablet/', function(event, state){
// .. do something clever here
});
```

__z-index : size__
`8001` : `"mobile"`
`8002` : `"tablet"`
`8003` : `"desktop"`

## CSS
__Note:__
You have to use this `.state-indicator` class and these `z-index` values for now.
``` sass
/* default state */
.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;

    z-index: 8001;
}

$mqs : (mobile, tablet, desktop);
@each $mq in $mqs {
  $i : index($mqs, $mq);
    @include media(#{$mq}) {
        .state-indicator {
          z-index: #{$i+8000};
        }
    }
}
```
Only one init..

faz don't like them _init
Merge pull request #405 from ministryofjustice/ui/state-manager-breakpoints

moj.state-indicator module