/**
 * Example showing how to receive events from the presentation
 * when the current slide changes. Note that you need to include
 * 'postMessageEvents=true' in the query string portion of the
 * presentation URL for this to work.
 */
window.addEventListener( 'message', function( event ) {
  var data = JSON.parse( event.data );
  
  // Make sure we're talking to a presentation
  if( data.namespace === 'reveal' ) {
    
    // We only care about the slide changing. The 'ready' event
    // is sent in place of a 'slidechanged' for the very first
    // slide when the presentation loads.
    if( data.eventName === 'slidechanged' || data.eventName === 'ready' ) {

      // Dig out the presentation state, key properties:
      //   indexh: The index of the current horizontal slide
      //   indexv: The index of the current vertical slide (if any)
      //   indexf: The index of the current fragment (if any)
      var state = data.state;

      document.querySelector( '.status.state' ).innerHTML = 'indexh: ' + state.indexh + '<br>' +
                                                            'indexv: ' + state.indexv;

    }
    else if( data.eventName === 'callback' ) {
      document.querySelector( '.status.callback' ).innerHTML = 'Callback from <strong>'+data.method+'</strong> is <strong>'+data.result+'</strong>';
    }

  }
} );

/**
 * Example of sending messages into the presentation frame.
 * In this example we're sending a message for navigating
 * to a random slide, however you can find a full list of
 * what functions there are available here:
 * https://github.com/hakimel/reveal.js#api
 */
document.querySelector( '.random-slide' ).addEventListener( 'click', function( event ) {
  // Find our presentation iframe
  var frame = document.querySelector( 'iframe' );
  
  // Post a message into the frame
  frame.contentWindow.postMessage( JSON.stringify({
    method: 'slide',
    args: [ Math.ceil( Math.random() * 10  ) ]
  }), '*' );
} );

document.querySelector( '.get-total-slides' ).addEventListener( 'click', function( event ) {
  document.querySelector( 'iframe' ).contentWindow.postMessage( JSON.stringify({
    method: 'getTotalSlides'
  }), '*' );
} );

document.querySelector( '.is-first-slide' ).addEventListener( 'click', function( event ) {
  document.querySelector( 'iframe' ).contentWindow.postMessage( JSON.stringify({
    method: 'isFirstSlide'
  }), '*' );
} );

document.querySelector( '.is-last-slide' ).addEventListener( 'click', function( event ) {
  document.querySelector( 'iframe' ).contentWindow.postMessage( JSON.stringify({
    method: 'isLastSlide'
  }), '*' );
} );