Maciek416/gist:2919899

## gistfile1.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="./stativus.js"></script>
  </head>
  <body>
    <div id="state-A" style="display: none; background-color: red; color: white;">
      <h1>State A</h1>
      <div id="state-A1" style="display: none; background-color: orange; color: white;">leaf state A1</div>
    </div>
    <div id="state-B" style="display: none; background-color: blue; color: white;">
      <h1>State B</h1>
    </div>
    <script type="text/javascript">
      var statechart = Stativus.createStatechart();

      var s1 = statechart.addState("A", {
        enterState: function(){
          $('#state-A').show();
        },
        exitState: function(){
          $('#state-A').hide();
        },
        fireEvent: function(){
          // this.goToState('#state-two');
        }
      });

      //
      // ?? Why isn't this a child state of state-one even though it was added to s1 ?
      //
      var s3 = s1.addState("A1", {
        enterState: function(){
          $('#state-A1').show();
        },
        exitState: function(){
          $('#state-A1').hide();
        },
        fireEvent: function(){
          // console.log("state-one-A fireEvent()");
        }
      });

      var s2 = statechart.addState("B", {
        enterState: function(){
          $('#state-B').show();
        },
        exitState: function(){
          $('#state-B').hide();
        },
        fireEvent: function(){
          // this.goToState('#state-one');
        }
      });

      // statechart.initStates('#state-two');

      // statechart.sendEvent('firstEvent');

   </script>
 </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="./stativus.js"></script>
	</head>
	<body>
	<div id="state-A" style="display: none; background-color: red; color: white;">
	<h1>State A</h1>
	<div id="state-A1" style="display: none; background-color: orange; color: white;">leaf state A1</div>
	</div>
	<div id="state-B" style="display: none; background-color: blue; color: white;">
	<h1>State B</h1>
	</div>
	<script type="text/javascript">
	var statechart = Stativus.createStatechart();

	var s1 = statechart.addState("A", {
	enterState: function(){
	$('#state-A').show();
	},
	exitState: function(){
	$('#state-A').hide();
	},
	fireEvent: function(){
	// this.goToState('#state-two');
	}
	});

	//
	// ?? Why isn't this a child state of state-one even though it was added to s1 ?
	//
	var s3 = s1.addState("A1", {
	enterState: function(){
	$('#state-A1').show();
	},
	exitState: function(){
	$('#state-A1').hide();
	},
	fireEvent: function(){
	// console.log("state-one-A fireEvent()");
	}
	});

	var s2 = statechart.addState("B", {
	enterState: function(){
	$('#state-B').show();
	},
	exitState: function(){
	$('#state-B').hide();
	},
	fireEvent: function(){
	// this.goToState('#state-one');
	}
	});

	// statechart.initStates('#state-two');

	// statechart.sendEvent('firstEvent');

	</script>
	</body>
	</html>