statemachine.js

Ad.statemachine = StateMachine.create({
    initial: 'Slideshow',
    error: function() {},
    events: [{
        name: 'Slideshow',
        from: 'Detail',
        to: 'Slideshow'
    }, {
        name: 'Slideshow',
        from: 'Highlight',
        to: 'Slideshow'
    }, {
        name: 'Detail',
        from: 'Slideshow',
        to: 'Detail'
    }, {
        name: 'Highlight',
        from: 'Slideshow',
        to: 'Highlight'
    }, {
        name: 'Highlight',
        from: 'Highlight',
        to: 'Highlight'
    }, {
        name: 'Detail',
        from: 'Highlight',
        to: 'Detail'
    }],
    callbacks: {
        onenterSlideshow: function(event, from, to, msg) {
            console.log('enter slideshow from:' + from);
            Ad.slideshow.resume();
        },
        onleaveSlideshow: function(event, from, to, msg) {
            console.log('leave slideshow to:' + to);
            Ad.slideshow.stop();
        },
        onenterDetail: function(event, from, to, index) {
            console.log('enter detail from:' + from);
            $('.item').not(':eq(' + index + ')').removeClass('detail').hide();
            $('.item').eq(index).addClass('detail');
        },
        onleaveDetail: function(event, from, to, index) {
            console.log('leave detail to:' + to);
            $('.item').removeClass('detail');
        },
        onenterHighlight: function(event, from, to, index) {
            // it won't be called while from state == to state
            // therefore we choose to use after highlight event
        },
        onleaveHighlight: function(event, from, to, index) {
            console.log('leave highlight to:' + to);
            $('.item').removeClass('highlight');
        },
        onafterHighlight: function(event, from, to, index) {
            console.log('enter highlight from:' + from + 'index:' + index);
            $('.item').not(':eq(' + index + ')').removeClass('highlight');
            $('.item').eq(index).addClass('highlight');
        }
    }
});