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: 300,
			height: 300,
			title : _('Speed Reading Window'),
			xtype: 'speedreading.speedreadingwindow',
			// TODO: implement real speedreading field, with bigger font and line
			items: [{
				xtype: 'displayfield',
				id: 'spray_result',
				ref: 'speedreader',
				displayField : '<div id="spray_result">&nbsp;</div>',
				scope: this,
			 	style: {
			          'font-size' : '32px!important'
			        },
				labelStyle: {
				  'font-size' : '32px!important'
				}
			},{
				xtype: 'combo',
				name: 'Words per minute',
				ref: 'wpm',
				store: [100, 200, 300, 400, 500],
				autoSelect: true,
				triggerAction: 'all',
				editable: false
			},{
				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);
	},

	/**
	 *
	 * @param {Ext.button} button to start the sprayReader
	 */
	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();
	},

	/**
	 *
	 * @param {Ext.button} button to stop the sprayReader
	 */
	stopSpeedReading : function(button) {
		this.sprayReader.stop();
	}
});

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

@@ -748,17 +748,17 @@
 %09width: 
-3
+6
 00,%0A%09%09%09h
@@ -764,17 +764,17 @@
 height: 
-3
+2
 00,%0A%09%09%09t
@@ -954,272 +954,232 @@
 e: '
-displayfield',%0A%09%09%09%09id: 'spray_result',%0A%09%09%09%09ref: 'speedreader',%0A%09%09%09%09displayField : '%3Cdiv id=%22spray_result%22%3E&nbsp;%3C/div%3E',%0A%09%09%09%09scope: this,%0A%09%09%09 %09style: %7B%0A%09%09%09          'font-size' : '32px!important'%0A%09%09%09        %7D,%0A%09%09%09%09labelStyle: %7B%0A%09%09%09%09  'font-size' : '32px!important'
+box',%0A%09%09%09%09autoEl : %7B%0A%09%09%09%09html: '%3Cdiv id=%22spray_container%22%3E%3Cdiv id=%22guide_top%22%3E%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%3Cspan id=%22notch%22%3E%D1%84%3C/span%3E%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%3C/div%3E%3Cdiv id=%22spray_result%22%3E&nbsp;%3C/div%3E%3Cdiv id=%22guide_bottom%22%3E%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%E2%80%95%3C/div%3E%3C/div%3E',
 %0A%09%09%09

Use Extjs box to display html for speed reading