Read.js

( function ( window, $ ){
	"use strict";

	/*jshint multistr: true */
	var ele = '<div class="__read">\
			<div class="__read_bar progrecss">\
				<div class="__read_position">\
					<div class="__read_indicator"></div>\
					<div class="__read_display"></div>\
					<div class="__read_before"></div>\
					<div class="__read_letter"></div>\
				</div>\
				<div class="__read_config"></div>\
				<div class="__read_restart"></div>\
				<div class="__read_close_read"></div>\
			</div>\
			<div class="__read_settings">\
				<div class="__read_setting __read_wpm">\
					<label class="__read_label">Words Per Minute</label>\
					<input class="__read_input __read_speed" type="text"/>\
					<div class="__read_slider __read_speed_slider"></div>\
				</div>\
				<div class="__read_setting __read_slowstart">\
					<label class="__read_label">Slow Start Speed</label>\
					<input class="__read_input __read_slow_start" type="text"/>\
					<div class="__read_slider __read_slow_start_slider"></div>\
				</div>\
				<div class="__read_setting __read_sentencedelay">\
					<label class="__read_label">Sentence Delay</label>\
					<input class="__read_input __read_sentence_delay" type="text"/>\
					<div class="__read_slider __read_sentence_delay_slider"></div>\
				</div>\
				<div class="__read_setting __read_puncdelay">\
					<label class="__read_label">Other Punctuation Delay</label>\
					<input class="__read_input __read_punc_delay" type="text"/>\
					<div class="__read_slider __read_punc_delay_slider"></div>\
				</div>\
				<div class="__read_setting __read_shortworddelay">\
					<label class="__read_label">Short Word Delay</label>\
					<input class="__read_input __read_short_word_delay" type="text"/>\
					<div class="__read_slider __read_short_word_delay_slider"></div>\
				</div>\
				<div class="__read_setting __read_longworddelay">\
					<label class="__read_label">Long Word Delay</label>\
					<input class="__read_input __read_long_word_delay" type="text"/>\
					<div class="__read_slider __read_long_word_delay_slider"></div>\
				</div>\
				<div class="__read_setting __read_numericdelay">\
					<label class="__read_label">Numeric Delay</label>\
					<input class="__read_input __read_numeric_delay" type="text"/>\
					<div class="__read_slider __read_numeric_delay_slider"></div>\
				</div>\
			</div>\
		</div>';

	$.fn.textWidth = function(){
		var self = $(this),
			children = self.contents(),
			calculator = $('<span style="display: inline-block;" />'),
			width;

		children.wrap(calculator);
		width = children.parent().width();
		children.unwrap();
		return width;
	};

	var defaultOptions = {
		wpm: 300,
		slowStartCount: 5,
		sentenceDelay: 2.5,
		otherPuncDelay: 1.5,
		shortWordDelay: 1.3,
		longWordDelay: 1.4,
		numericDelay: 2.0

	};

	var whiteSpace = /[\n\r\s]/;

	function Read ( block, options ) { //element, wpm ) {

		// Defaults
		this._parentElement = null;
		this._barElement = null;
		this._settingsElement = null;
		this._configElement = null;
		this._restartElement = null;
		this._displayElement = null;
		this._closeElement = null;

		this._speedElement = null;
		this._speedSliderElement = null;

		this._slowStartElement = null;
		this._slowStartCount = null;
		this._slowStartSliderElement = null;

		this._sentenceDelayElement = null;
		this._sentenceDelaySliderElement = null;

		this._puncDelayElement = null;
		this._puncDelaySliderElement = null;

		this._shortWordDelayElement = null;
		this._shortWordDelaySliderElement = null;

		this._longWordDelayElement = null;
		this._longWordDelaySliderElement = null;

		this._numericDelayElement = null;
		this._numericDelaySliderElement = null;

		this._currentWord = null;
		this._delay = 0;
		this._timer = null;
		this._isPlaying = false;
		this._isEnded = false;

		this._options = $.extend( {}, defaultOptions, options );

		Read.enforceSingleton(this);

		// Configured
		this.setWPM(this._options.wpm);
		this.setText(block);
		this.setElement();
	}

	Read.enforceSingleton = function (inst) {
		if (Read.instance) {
			Read.instance.destroy();
			Read.instance = null;
		}
		Read.instance = inst;
	};

	var p = Read.prototype;

	p._display = function () {
		this._currentWord = this._block.getWord();
		if (this._currentWord) {
			this._showWord();

			var time = this._delay;

			if ( this._currentWord.hasPeriod ) time *= this._options.sentenceDelay;
			if ( this._currentWord.hasOtherPunc ) time *= this._options.otherPuncDelay;
			if ( this._currentWord.isShort ) time *= this._options.shortWordDelay;
			if ( this._currentWord.isLong ) time *= this._options.longWordDelay;
			if ( this._currentWord.isNumeric ) time *= this._options.numericDelay;

			this._slowStartCount = (this._slowStartCount - 1 ) || 1;
			time = time * this._slowStartCount;

			this._timer = setTimeout($.proxy(this._next, this),time);
		} else {
			this.clearDisplay();
			this._isPlaying = false;
			this._isEnded = true;
			this._barElement.attr('data-progrecss', 100 );
		}
	};

	p._showWord = function () {
		if (this._displayElement) {
			var word = this._currentWord.val;

			var before = word.substr(0, this._currentWord.index);
			var letter = word.substr(this._currentWord.index, 1);

			// fake elements
			var $before = this._options.element.find('.__read_before').html(before).css("opacity","0");
			var $letter = this._options.element.find('.__read_letter').html(letter).css("opacity","0");

			// START CUSTOM CODE FOR BETTER TEXT CENTERING
			var calc = 0;
			// END CUSTOM CODE FOR BETTER TEXT CENTERING

			if (!this._currentWord.val.match(whiteSpace)){
				this._displayElement.html(this._currentWord.val);
				this._displayElement.css("margin-left", -calc);
			}
		}

		if (this._options.element && this._block) {
			this._barElement.attr('data-progrecss', parseInt(this._block.getProgress() * 100, 10) );
		}
	};

	p._initSettings = function () {

		// WPM
		this._speedSliderElement.noUiSlider({
			range: [300,1500],
			start: this._options.wpm,
			step: 25,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._speedElement ],
				resolution: 1
			},
			set: $.proxy( function() {
				this.setWPM( this._speedElement.val() );
				this._speedElement.blur();
			}, this )
		});

		// Slow Start
		this._slowStartSliderElement.noUiSlider({
			range: [0,5],
			start: this._options.slowStartCount,
			step: 1,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._slowStartElement ],
				resolution: 1
			},
			set: $.proxy( function() {
				this.setSlowStartCount( this._slowStartElement.val() );
				this._slowStartElement.blur();
			},this )
		});

		// Sentence Delay
		this._sentenceDelaySliderElement.noUiSlider({
			range: [0,5],
			start: this._options.sentenceDelay,
			step: 0.1,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._sentenceDelayElement ],
				resolution: 0.1
			},
			set: $.proxy( function() {
				this.setSentenceDelay( this._sentenceDelayElement.val() );
				this._sentenceDelayElement.blur();
			},this )
		});

		// Other Punctuation Delay
		this._puncDelaySliderElement.noUiSlider({
			range: [0,5],
			start: this._options.otherPuncDelay,
			step: 0.1,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._puncDelayElement ],
				resolution: 0.1
			},
			set: $.proxy( function() {
				this.setOtherPuncDelay( this._puncDelayElement.val() );
				this._puncDelayElement.blur();
			},this )
		});

		// Short Word Delay
		this._shortWordDelaySliderElement.noUiSlider({
			range: [0,5],
			start: this._options.shortWordDelay,
			step: 0.1,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._shortWordDelayElement ],
				resolution: 0.1
			},
			set: $.proxy( function() {
				this.setShortWordDelay( this._shortWordDelayElement.val() );
				this._shortWordDelayElement.blur();
			},this )
		});

		// Long word Delay
		this._longWordDelaySliderElement.noUiSlider({
			range: [0,5],
			start: this._options.longWordDelay,
			step: 0.1,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._longWordDelayElement ],
				resolution: 0.1
			},
			set: $.proxy( function() {
				this.setLongWordDelay( this._longWordDelayElement.val() );
				this._longWordDelayElement.blur();
			},this )
		});

		// Numeric Delay
		this._numericDelaySliderElement.noUiSlider({
			range: [0,5],
			start: this._options.numericDelay,
			step: 0.1,
			connect: 'lower',
			handles: 1,
			behaviour: 'extend-tap',
			serialization: {
				to: [ this._numericDelayElement ],
				resolution: 0.1
			},
			set: $.proxy( function() {
				this.setNumericDelay( this._numericDelayElement.val() );
				this._numericDelayElement.blur();
			},this )
		});

	};

	p.toggleSettings = function () {
		if (this._configElement.hasClass('active')) {
			this.hideSettings();
		} else {
			this.showSettings();
		}
	};

	p.showSettings = function () {
		this._options.element.addClass('open');
		this._configElement.addClass('active');
	};

	p.hideSettings = function () {
		this._options.element.removeClass('open');
		this._configElement.removeClass('active');
	};

	p.destroy = function () {
		p.pause();
		this._speedElement.off ( "blur" );
		this._speedElement.off ( "keydown" );
		this._parentElement.find('.__read').remove();
		this._parentElement.css( "padding-top", "-=50" );
		this._configElement.off();
		this._restartElement.off();
		this._displayElement.off();
		this._closeElement.off();
		this._speedElement.off();
	};

	p.setText = function (val) {
		if (val) {
			this.pause();
			this.restart();
			this._block = new ReadBlock(val);
			this._currentWord = this._block.getWord();
		}
	};

	p._next = function() {
		this._block.next();
		this._display();
	};

	p.setElement = function (val) {
		if (!val) {
			val = 'body';
		}

		this.clearDisplay();

		// unbind old binds
		if (this._parentElement) {
			this._parentElement.find('.__read').remove();
			this._parentElement.css( "padding-top", "-=50" );
		}

		if (val instanceof $) {
			this._parentElement = val;
		} else {
			this._parentElement = $(val);
		}


		// bind new binds
		this._options.element = $(ele);
		this._parentElement.animate( { "padding-top": "+=50" }, 400);
		this._parentElement.prepend(this._options.element);
		this._options.element.slideDown();

		this._barElement = this._options.element.find('.__read_bar');

		this._settingsElement = this._options.element.find('.__read_settings');

		this._configElement = this._options.element.find('.__read_config');
		this._configElement.on ( "touchend click", $.proxy(this.toggleSettings, this) );

		this._restartElement = this._options.element.find('.__read_restart');
		this._restartElement.on ( "touchend click", $.proxy(this.restart, this) );

		this._displayElement = this._options.element.find('.__read_display');
		this._displayElement.on ( "touchend click", $.proxy(this.playPauseToggle, this) );

		this._closeElement = this._options.element.find('.__read_close_read');
		this._closeElement.on ( "touchend click", $.proxy(this.destroy, this) );

		this._slowStartElement = this._options.element.find('.__read_slow_start');
		this._slowStartSliderElement = this._options.element.find('.__read_slow_start_slider');

		this._sentenceDelayElement = this._options.element.find('.__read_sentence_delay');
		this._sentenceDelaySliderElement = this._options.element.find('.__read_sentence_delay_slider');

		this._puncDelayElement = this._options.element.find('.__read_punc_delay');
		this._puncDelaySliderElement = this._options.element.find('.__read_punc_delay_slider');

		this._shortWordDelayElement = this._options.element.find('.__read_short_word_delay');
		this._shortWordDelaySliderElement = this._options.element.find('.__read_short_word_delay_slider');

		this._longWordDelayElement = this._options.element.find('.__read_long_word_delay');
		this._longWordDelaySliderElement = this._options.element.find('.__read_long_word_delay_slider');

		this._numericDelayElement = this._options.element.find('.__read_numeric_delay');
		this._numericDelaySliderElement = this._options.element.find('.__read_numeric_delay_slider');

		this._speedElement = this._options.element.find('.__read_speed');
		this._speedElement.on ( "blur", $.proxy(this.updateWPMFromUI, this) );
		this._speedElement.on ( "keydown", function(e) { if (e.keyCode == 13) { $(this).blur(); } });
		this._speedSliderElement = this._options.element.find('.__read_speed_slider');

		this._initSettings();
	};

	p.playPauseToggle = function () {
		if (this._isPlaying) {
			this.pause();
		} else {
			this.play();
		}
	};

	p.play = function () {
		if (this._block) {
			if (this._isEnded) {
				return;
			}
			if (this._options.slowStartCount) {
				this._slowStartCount = this._options.slowStartCount;
			}
			this._display();
			this._isPlaying = true;
		}
	};

	p.clearDisplay = function () {
		if (this._displayElement) this._displayElement.html("");
	};

	p.pause = function () {
		clearTimeout(this._timer);
		this._isPlaying = false;
	};

	p.restart = function () {
		if (this._block) {
			if (!this._isEnded) {
				this.pause();
			}
			if (this._options.slowStartCount) {
				this._slowStartCount = this._options.slowStartCount;
			}
			this._block.restart();
			this._currentWord = this._block.getWord();
			this._isEnded = false;
			this.play();
		}
	};

	p.setWPM = function ( val ) {
		val = Number(val);
		val = Math.max (1, val);
		val = Math.min (1500, val);
		this._wpm = val;
		this._delay = 1/(val/60)*1000;
	};

	p.setSentenceDelay = function ( val ) {
		val = Number(val);
		val = Math.max (1, val);
		val = Math.min (10, val);
		this._options.sentenceDelay = val;
	};

	p.setOtherPuncDelay = function ( val ) {
		val = Number(val);
		val = Math.max (1, val);
		val = Math.min (10, val);
		this._options.otherPuncDelay = val;
	};

	p.setShortWordDelay = function ( val ) {
		val = Number(val);
		val = Math.max (1, val);
		val = Math.min (10, val);
		this._options.shortWordDelay = val;
	};

	p.setLongWordDelay = function ( val ) {
		val = Number(val);
		val = Math.max (1, val);
		val = Math.min (10, val);
		this._options.longWordDelay = val;
	};

	p.setNumericDelay = function ( val ) {
		val = Number(val);
		val = Math.max (1, val);
		val = Math.min (10, val);
		this._options.numericDelay = val;
	};

	p.setSlowStartCount = function ( val ) {
		val = Number(val);
		val = Math.max(0,val);
		val = Math.min(10,val);
		this._options.slowStartCount = val;
	};

	p.updateWPMFromUI = function () {
		var newWPM = this._speedElement.val();
		newWPM = newWPM.match(/[\d]+/g);
		newWPM = parseInt(newWPM, 10);
		this.setWPM(newWPM);
	};

	window.Read = Read;

}(window, jQuery) );