Ext.namespace('Zarafa.plugins.speedreading.dialogs');

/**
 * @class Zarafa.plugins.speedreading.dialogs.SpeedReadingContentPanel
 * @extends Zarafa.core.ui.ContentPanel
 *
 * The content panel which asks the user for his passphrase and verifies if it's correct.
 * @xtype smime.passphrasewindow
 */
Zarafa.plugins.speedreading.dialogs.SpeedReadingContentPanel = Ext.extend(Zarafa.core.ui.ContentPanel, {
	/**
	 * cfg {Ext.Record} record the email record
	 */
	record : undefined,

	/**
	 * cfg {Object} sprayReader object
	 */
	sprayReader: undefined,

	/**
	 * @constructor
	 * @param config Configuration structure
	 */
	constructor : function(config) {
		config = config || {};

		Ext.applyIf(config, {
			layout : 'form',
			modal: true,
			width: 600,
			height: 200,
			title : _('Speed Reading Window'),
			xtype: 'speedreading.speedreadingwindow',
			items: [{
				xtype: 'box',
				autoEl : {
				html: '<div id="spray_container"><div id="guide_top">――――――――――<span id="notch">ф</span>―――――――――――</div><div id="spray_result">&nbsp;</div><div id="guide_bottom">――――――――――――――――――――――</div></div>'
				}
			},{
				xtype: 'combo',
				name: 'Words per minute',
				ref: 'wpm',
				store: [100, 200, 300, 400, 500],
				autoSelect: true,
				triggerAction: 'all',
				mode: 'local',
				editable: false,
				value: 100 

			},{
				xtype: 'button',
				text:  _('Start'),
				handler: this.startSpeedReading,
				scope: this
			},{
				xtype: 'button',
				text:  _('Stop'),
				handler: this.stopSpeedReading,
				scope: this
			}]
		});
		Zarafa.plugins.speedreading.dialogs.SpeedReadingContentPanel.superclass.constructor.call(this, config);
	},

	/**
	 * Button which starts the spray-reader
	 *
	 * @param {Ext.button} button to start the spray-reader
	 */
	startSpeedReading : function(button) {
		var body = record.get('body');
		this.sprayReader = new SprayReader('#spray_result');
		this.sprayReader.setWpm(this.wpm.getValue());
		this.sprayReader.setInput(body);
		this.sprayReader.start();
	},

	/**
	 * Button which stops the spray-reader
	 *
	 * @param {Ext.button} button to stop the spray-reader
	 */
	stopSpeedReading : function(button) {
		this.sprayReader.stop();
	}
});

Ext.reg('speedreading.window', Zarafa.plugins.speedreading.dialogs.SpeedReadingContentPanel);

@@ -367,38 +367,20 @@
 .extend(
-Zarafa.core.ui.Content
+Ext.
 Panel, %7B
@@ -686,28 +686,8 @@
 , %7B%0A
-%09%09%09layout : 'form',%0A
 %09%09%09m
@@ -736,41 +736,137 @@
 %0A%09%09%09
-title : _('Speed Reading Window')
+layout: %7B%0A%09%09%09%09type: 'vbox',%0A%09%09%09%09align: 'stretch'%0A%09%09%09%7D,%0A%09%09%09border: false,%0A%09%09%09bodyStyle: 'padding: 5px; background-color: inherit;'
 ,%0A%09%09
@@ -1163,25 +1163,40 @@
 '%0A%09%09%09%09%7D%0A%09%09%09%7D
-,
+%5D,%0A%09%09%09buttons: %5B
 %7B%0A%09%09%09%09xtype:
@@ -1245,16 +1245,19 @@
 %09%09ref: '
+../
 wpm',%0A%09%09
@@ -1336,24 +1336,48 @@
 ion: 'all',%0A
+%09%09%09%09buttonAlign:'left',%0A
 %09%09%09%09mode: 'l
@@ -1379,24 +1379,40 @@
 e: 'local',%0A
+%09%09%09%09width: 100,%0A
 %09%09%09%09editable
@@ -1517,32 +1517,72 @@
 rtSpeedReading,%0A
+%09%09%09%09width: 100,%0A%09%09%09%09buttonAlign:'left',%0A
 %09%09%09%09scope: this%0A
@@ -1627,24 +1627,24 @@
  _('Stop'),%0A
-
 %09%09%09%09handler:
@@ -1663,24 +1663,64 @@
 eedReading,%0A
+%09%09%09%09width: 100,%0A%09%09%09%09buttonAlign:'left',%0A
 %09%09%09%09scope: t

Improve the UX of the speed reading dialog