Getting to know Ember StateManager, am I coding this right? - ember.js

Question

I am getting my feet wet with Ember.JS StateManager, and I am currently following the online documentation at: http://emberjs.com/api/classes/Ember.StateManager.html
I have done my best with this fiddle but cannot seem to get anything visual out at all. I have done numerous searches here at SOF and Google.
I have three states with three list item which trigger these states in view. I have placed a "ready function" within "Application.create({}" which fires, but as soon as the StateManager is initialized, "ready function" doesn't fire. I would highly appreciate your input and help.
Here is the fiddle: http://jsfiddle.net/exciter/NRmHc/12/
APP CODE
$(function(){
App = Ember.Application.create({
ready: function(){
//alert("APP INIT");
}
});
App.stateManager = Ember.StateManager.create({
showFirstState: function(manager){
App.stateManager.transitionTo('startupState');
},
showSecondState: function(manager){
App.stateManager.transitionTo('second');
},
showThirdState: function(manager){
App.stateManager.transitionTo('third');
},
showFourthState: function(manager){
App.stateManager.transitionTo('fourth');
},
// INIT STATE
initialState: 'startupState',
startupState: Ember.State.create({
templateName: 'startup',
classNames: ['state','black'],
enter: function() { alert("STARTUP ENTERED"); }
}),
second: Ember.State.create({
templateName: 'second',
classNames: ['state','orange'],
enter: function() { alert("SECOND ENTERED"); }
}),
third: Ember.State.create({
templateName: 'third',
classNames: ['state','lime'],
enter: function() { alert("THIRD ENTERED"); }
}),
fourth: Ember.State.create({
templateName: 'fourth',
classNames: ['state','blue'],
enter: function() { alert("FOURTH ENTERED"); }
}),
});
App.initialize();
});
HTML:
<!-- CHECK TO SEE IF CSS IS FUNCTIONAL
<div id="state" class="state blue">
STATE
</div>
-->
<script type="text/x-handlebars">
<nav>
<ul>
<li {{action "showFirstState" target="App.stateManager"}}>First State</li>
<li {{action "showSecondState" target="App.stateManager"}}>Second State</li>
<li {{action "showThirdState" target="App.stateManager"}}>Third State</li>
<li {{action "showFourthState" target="App.stateManager"}}>Fourth State</li>
</ul>
</nav>
</script>
<script type="text/x-handlebars" data-template-name="startup">
<h2> STARTUP STATE </h2>
</script>
<script type="text/x-handlebars" data-template-name="second">
<h2>SECOND STATE</h2>
</script>
<script type="text/x-handlebars" data-template-name="third">
<h2>THIRD STATE</h2>
</script>
<script type="text/x-handlebars" data-template-name="fourth">
<h2>THIRD STATE</h2>
</script>
CSS:
nav { background-color:#e9e9e9; padding: 1em 0 1em 0; }
nav li { display: inline; cursor: pointer; padding:0 1em 0 1em;}
.state { width:700px; height:500px; margin:0 auto; padding:0; background-color:#c9c9c9; }
.black { background-color:#666; }
.blue { background-color:#6699cc; }
.orange { background-color:#FF6600; }
.lime { background-color:#CCFF33; }

Answer 1

I get the feeling that what you want is not a statemanager but a router. Have a look at this link for further info.