gistfile1.js

/*globals Yi Statechart */
window.Yi = Statechart.create();
Yi.addState("Store", {
  initialSubstate: "store.Loading"
});
Yi.addState("store.Loading", {
  parentState: "Store",
  enterState: function() {
    this.sendEvent("loadLargeStore");
  },
  "loadLargeStore": function() {
    this.goToState("store.Large");
  }
});
Yi.addState("store.Large", {
  parentState: "Store",
  substatesAreConcurrent: true
});
Yi.addState("store.large.View", {
  parentState: "store.Large",
  substatesAreConcurrent: true,
  states:[
    {
      name: "store.large.view.Buy",
      initialSubstate: "store.large.view.buy.Loading",
      states: [
        {
          name: "store.large.view.buy.Loading",
          enterState: function() {
            this.sendEvent("show");
          },
          "show": function() {
            this.goToState("store.large.view.buy.Show");
            return true;
          }
        },
        {
          name: "store.large.view.buy.Show",
          substatesAreConcurrent: true,
          showSellView: function() {
            this.goToState("store.large.view.buy.Hide");
          }
        },
        {
          name: "store.large.view.buy.Hide"
        }
      ]
    },
    {
      name: "store.large.view.Sell",
      initialSubstate: "store.large.view.sell.Loading",
      states: [
        {
          name: "store.large.view.sell.Loading",
          enterState: function() {
            this.sendEvent("hide");
          },
          "hide": function() {
            this.goToState("store.large.view.sell.Hide");
            return true;
          }
        },
        {
          name: "store.large.view.sell.Hide",
          showSellView: function() {
            this.goToState("store.large.view.sell.Show");
          }
        },
        {
          name: "store.large.view.sell.Show",
          initialSubstate: 'store.large.view.sell.show.View',
          states: [
            {
              name: "store.large.view.sell.show.View",
              initialSubstate: 'store.large.view.sell.show.view.All',
              states: [
                {
                  name: "store.large.view.sell.show.view.All",
                  initialSubstate: "store.large.view.sell.show.view.all.Loading",
                  states: [
                    {
                      name: "store.large.view.sell.show.view.all.Loading",
                      enterState: function() {
                        this.sendEvent("show");
                      },
                      "show": function() {
                        this.goToState("store.large.view.sell.show.view.all.Show");
                        return true;
                      }
                    },
                    {
                      name: 'store.large.view.sell.show.view.all.Hide'
                    },
                    {
                      name: 'store.large.view.sell.show.view.all.Show'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
});