var $buttons = document.createElement('p'),
      $button = document.createElement('button'),
      $play = $button.cloneNode(),
      $pause = $button.cloneNode(),
      paused = false,
      to_speak,
      progress_index,
      $speed = document.createElement('p'),
			$speed_label = document.createElement('label'),
	    $speed_value = document.createElement('input');
	
	if ( 'speechSynthesis' in window ) {
    
    window.addEventListener('beforeunload',function(){ window.speechSynthesis.cancel(); });

	  // content to speak
    to_speak = new SpeechSynthesisUtterance(
      document.querySelector('main').textContent
    );
    
    // set the rate a little faster than 1x
    to_speak.rate = 1.4;
	
    // Event Handlers
    function play() {
      if ( paused ) {
        paused = false;
        window.speechSynthesis.resume();
      } else {
        window.speechSynthesis.speak( to_speak );
      }
    }
    function pause() {
      window.speechSynthesis.pause();
    }
    
    to_speak.onpause = function(){
      paused = true;
    };
    to_speak.onboundary = function( e ){
      if ( e.name == 'word' )
  		{
	  		progress_index = e.charIndex;
		  }
    };
    
    // Play Button
    $play.innerText = 'Play';
    $play.addEventListener( 'click', play, false );
    $buttons.appendChild( $play );
    
    // Pause Button
    $pause.innerText = 'Pause';
    $pause.addEventListener( 'click', pause, false );
	  $buttons.appendChild( $pause );
    
    // Label the field
	  $speed_label.innerText = 'Speed';
	  $speed_label.htmlFor = 'speed_value';
	  $speed.appendChild( $speed_label );
	  
	  // Insert the Form control
	  $speed_value.type = 'number';
	  $speed_value.id = 'speed_value';
	  $speed_value.min = '0.1';
	  $speed_value.max = '10';
	  $speed_value.step = '0.1';
	  $speed_value.value = Math.round( to_speak.rate * 10 ) / 10;
	  $speed.appendChild( $speed_value );
    
    function adjustSpeed() {
      // cancel the original utterance
      window.speechSynthesis.cancel();

      // find the previous space
      var previous_space = to_speak.text.lastIndexOf( ' ', progress_index );

      // get the remains of the original string
      to_speak.text = to_speak.text.slice( previous_space );

      // Math to 1 decimal place
      speed = Math.round( $speed_value.value * 10 ) / 10;

      // adjust the rate
      if ( speed > 10 )
      {
        speed = 10;
      }
      else if ( speed < 0.1 )
      {
        speed = 0.1;
      }
      to_speak.rate = speed;

      // return to speaking
      window.speechSynthesis.speak( to_speak );
    }

    $speed_value.addEventListener( 'change', adjustSpeed, false );
	
	} else {
	  
	  // Sad panda
	  $buttons.innerText = 'Unfortunately your browser doesn’t support this feature.';
	  
	}
	
	document.body.appendChild( $buttons );
 	document.body.appendChild( $speed );