/**
 * Project   : AMDA-NG
 * Name      : PlotPreviewUI.js
 * @class    amdaPlotComp.PlotPreviewUI
 * @extends  Ext. panel.Panel
 * @brief    Plot Preview UI definition (View)
 * @author    
 * @version  $Id: PlotPreviewUI.js benjamin $
 ********************************************************************************
 *    FT Id     :   Date   : Name - Description
 *******************************************************************************
 *              
 */

Ext.define('amdaPlotComp.PlotPreviewUI', {

	extend: 'Ext.panel.Panel',

	alias: 'widget.plotPreview',

	requires: [
		'amdaPlotComp.PlotContextManager',
		'amdaPlotComp.PlotResultImage',

		'amdaUI.PlotTabResultUI'

	],

	isPlotFunction: false,
	panelImage: null,
	crtContext: null,
	sliderPage: null,
	contextualMenu: null,
	hiddenForm: null,
	panelResultInstance: null,

	setPanelResultInstance: function (panelResultInstance_) {

		this.panelResultInstance = panelResultInstance_;
	},

	constructor: function (config) {
		this.init(config);
		this.callParent(arguments);
	},

	getImageSize: function () {
		if (!this.crtContext)
			return {
				width: 0,
				height: 0
			};

		return {
			width: this.crtContext.page.width * this.sliderPage.getValue() / 100.,
			height: this.crtContext.page.height * this.sliderPage.getValue() / 100.
		}
	},

	getImageUrl: function (resultFolder, plotFile) {
		return 'data/' + sessionID + '/RES/' + resultFolder + '/' + plotFile;
	},

	toPixelOnSourceImage: function (value) {
		return value * 100 / this.sliderPage.getValue();
	},

	toPixelOnResultImage: function (value) {
		return value * this.sliderPage.getValue() / 100;
	},
	getAxisValue: function (axis, pixelMin, pixelMax, pixelVal) {
		var val = amdaPlotComp.PlotContextManager.toAxisValue(axis, pixelMin, pixelMax, pixelVal);
		return parseFloat(val).toPrecision(5);
	},

	createPlotImage: function (resultFolder, plotFile) {
		var me = this;
		var size = this.getImageSize();
		this.panelImage = Ext.create('amdaPlotComp.PlotResultImage', {
			src: this.getImageUrl(resultFolder, plotFile),
			width: size.width,
			height: size.height,

			onMouseMove: function (x, y) {
				if (!me.crtContext)
					return;

				var sourceXPos = me.toPixelOnSourceImage(x);
				var sourceYPos = me.toPixelOnSourceImage(y);
				var panel = amdaPlotComp.PlotContextManager.getPanel(me.crtContext, sourceXPos, sourceYPos);

				var text = '';
				if (me.panelImage) {
					if (!panel) {
						me.panelImage.resetCursor();
						text += 'No panel';
					}
					else {
						text += 'Panel Id : ';
						text += panel.id;
						if (amdaPlotComp.PlotContextManager.isInPlotArea(panel, sourceXPos, sourceYPos)) {
							/*me.panelImage.updateCursor(
								me.toPixelOnResultImage(panel.plotArea.x),
								me.toPixelOnResultImage(panel.plotArea.y),
								me.toPixelOnResultImage(panel.plotArea.width),
								me.toPixelOnResultImage(panel.plotArea.height),
								x, y);*/
							me.panelImage.updateCursor(
								me.toPixelOnResultImage(0),
								me.toPixelOnResultImage(0),
								me.toPixelOnResultImage(me.crtContext.page.width),
								me.toPixelOnResultImage(me.crtContext.page.height),
								x, y);

							var xText = '';
							var yLeftText = '';
							Ext.each(panel.plotArea.axes, function (axis) {
								switch (axis.id) {
									case 'y-left':
										yLeftText = me.getAxisValue(axis, panel.plotArea.y + panel.plotArea.height, panel.plotArea.y, sourceYPos);
										break;
									case 'xaxis_id':
										xText = me.getAxisValue(axis, panel.plotArea.x, panel.plotArea.x + panel.plotArea.width, sourceXPos);
										break;
								}

							});

							if (xText != '')
								text += (', X : ' + xText);
							if (yLeftText != '')
								text += (', Y : ' + yLeftText);
						}
						else
							me.panelImage.resetCursor();
					}
				}
				me.coordinatesField.setText(text);
			},

			onContextMenu: function (absoluteX, absoluteY, imageX, imageY) {
				me.contextualMenu.showAt(absoluteX, absoluteY);
			}
		});

		return this.panelImage;
	},

	updatePlotImage: function (configResult, newPlot) {
		this.crtContext = configResult.context;

		this.panelImage.setSrc(this.getImageUrl(configResult.folder, configResult.plotFile));

		var newTime = new Date(configResult.time);
		newTime = Ext.Date.add(newTime, Ext.Date.MINUTE, newTime.getTimezoneOffset());

		if (!this.isPlotFunction)
			Ext.getCmp('plotPreview-goto-Date' + configResult.interactiveId).setValue(newTime);

		var size = this.getImageSize();
		this.panelImage.setSize(size.width, size.height);

		this.panelImage.refreshMe();
	},

	init: function (configResult) {
		var me = this;

		this.crtContext = configResult.context;
		this.interactiveId = configResult.interactiveId;

		this.time = new Date(configResult.time);
		this.time = Ext.Date.add(this.time, Ext.Date.MINUTE, this.time.getTimezoneOffset());

		this.panelId = configResult.panelId;
		this.isPlotFunction = configResult.plotFile.includes("plotFunction");

		this.coordinatesField = new Ext.toolbar.TextItem({
			width: 300,
			text: ''
		});

		this.sliderPage = new Ext.slider.Single({
			width: 130,
			value: 75,
			increment: 5,
			minValue: 50,
			maxValue: 100,
			fieldLabel: 'Resize',
			labelWidth: 40,
			listeners: {
				scope: this,
				changecomplete: function (s, v) {
					var size = this.getImageSize();
					this.panelImage.width = size.width;
					this.panelImage.height = size.height;
					this.panelImage.doComponentLayout();
				}
			}
		});
		var topToolbar =

		{

			xtype: 'toolbar',
			dock: 'top',
			items: [{

				xtype: 'datefield',

				allowBlank: true,

				format: 'Y-m-d\\TH:i:s.u',
				id: 'plotPreview-goto-Date' + this.interactiveId,

				value: this.time,

				width: 175,
				renderer: function (value) {
					if (value != null) {
						if (Ext.isDate(value)) {
							return Ext.Date.format(value, 'Y-m-d\\TH:i:s.u');
						} else {
							return Ext.Date.format(new Date(value), 'Y-m-d\\TH:i:s.u');
						}
					} else {
						return value;
					}
				}

			}, '-',
			{
				text: 'Change cut time',
				scope: this,
				handler: function (bt) {
					var newTime = Ext.getCmp('plotPreview-goto-Date' + me.interactiveId).getValue();
					newTime = Ext.Date.add(newTime, Ext.Date.MINUTE, -newTime.getTimezoneOffset());
					me.panelResultInstance.callInteractivePlot({ 'action': 'instant', 'interactiveId': me.panelResultInstance.interactiveId, 'panelId': me.panelId, 'time': newTime.toISOString() });
				}
			},

				'-',

			{
				xtype: 'button',
				text: 'Previous',
				handler: function () {
					var newTime = new Date(amdaPlotComp.PlotContextManager.getInstantTimePrev(me.crtContext) * 1000);
					me.panelResultInstance.callInteractivePlot({ 'action': 'instant', 'interactiveId': me.panelResultInstance.interactiveId, 'panelId': me.panelId, 'time': newTime.toISOString() });
				}
			},
			{
				xtype: 'button',
				text: 'Next',
				handler: function () {
					var newTime = new Date(amdaPlotComp.PlotContextManager.getInstantTimeNext(me.crtContext) * 1000);
					me.panelResultInstance.callInteractivePlot({ 'action': 'instant', 'interactiveId': me.panelResultInstance.interactiveId, 'panelId': me.panelId, 'time': newTime.toISOString() });

				}

			}

			]
		}

		var mouseToolbar = {
			xtype: 'toolbar',
			height: 25,
			dock: 'bottom',
			items: [
				this.coordinatesField,
				'->',
				this.sliderPage
			]
		};

		this.contextualMenu = Ext.create('Ext.menu.Menu', {
			width: 200,
			plain: true,
			items: [

				{

					text: 'Save Plot',
					handler: function () {
						if (me.hiddenForm == null)
							me.hiddenForm = Ext.create('Ext.form.Panel', {
								title: 'hiddenForm',
								renderTo: Ext.getBody(),
								standardSubmit: true,
								url: 'php/downloadPlot.php',
								timeout: 120000,
								height: 100,
								width: 100,
								hidden: true,
								items: []
							});

						me.hiddenForm.getForm().submit({
							params: {
								sessionId: sessionID,
								interactiveId: me.interactiveId,
								preview: true
							},
							success: function (form, action) { },
							failure: function (form, action) { }
						});
					}

				}

			]
		});

		var plotPreviewPanelConfig = {
			preventHeader: true,
			autoScroll: false,
			items: [
				this.createPlotImage(configResult.folder, configResult.plotFile)
			],
			dockedItems: me.isPlotFunction ? [mouseToolbar] : [topToolbar, mouseToolbar]
		};

		Ext.apply(this, plotPreviewPanelConfig);
	}

});