/**
 * Project   : AMDA-NG
 * Name      : PlotResultImage.js
 * @class    amdaUI.PlotResultImage
 * @extends  Ext.Img
 * @brief    Plot Image Result definition (View)
 * @author    
 * @version  $Id: PlotResultImage.js benjamin $
 ********************************************************************************
 *    FT Id     :   Date   : Name - Description
 *******************************************************************************
 *              
 */

Ext.define('amdaPlotComp.PlotResultImage', {
    extend: 'Ext.Img',

	onMouseMove : null,
	onClick : null,
	
	verticalCursor   : null,
	horizontalCursor : null,
	
	firstVerticalMarker    : null,
	secondVerticalMarker   : null,
	firstHorizontalMarker  : null,
	secondHorizontalMarker : null,

	panelMarker : null,
	
	showVerticalCursor  : true,
	showHorizontalCursor : true,
	
	constructor: function(config) {
		this.init(config);	    
		this.callParent(arguments);
	},
 
	refreshMe : function(){
		var el;
        if(el = this.el){
			el.dom.src = this.src + '?dc=' + new Date().getTime();
		}
	},
 
	createNewVerticalDiv : function() {
		var verticalDiv = new Ext.Element(document.createElement('div')); 
		verticalDiv.setStyle('position', 'absolute');
		verticalDiv.setStyle('top', '1px');
		verticalDiv.setStyle('height', '1px');
		verticalDiv.setStyle('borderLeft', '1px none rgb(0, 0, 0)');
		verticalDiv.setStyle('pointer-events', 'none');
		this.el.parent().appendChild(verticalDiv);
		return verticalDiv;
	},
	
	createNewHorizontalDiv : function() {
		var horizontalDiv = new Ext.Element(document.createElement('div')); 
		horizontalDiv.setStyle('position', 'absolute');
		horizontalDiv.setStyle('left', '1px');
		horizontalDiv.setStyle('width', '1px');
		horizontalDiv.setStyle('borderTop', "1px none rgb(0, 0, 0)");
		horizontalDiv.setStyle('pointer-events', 'none');
		this.el.parent().appendChild(horizontalDiv);
		return horizontalDiv;
	},

	createNewPanelMarkerDiv : function() {
		var panelDiv = new Ext.Element(document.createElement('div')); 
		panelDiv.setStyle('position', 'absolute');
		panelDiv.setStyle('left', '1px');
		panelDiv.setStyle('width', '1px');
		panelDiv.setStyle('border', "1px none rgb(255, 0, 0)");
		panelDiv.setStyle('pointer-events', 'none');
		this.el.parent().appendChild(panelDiv);
		return panelDiv;
	},
	
	resetCursor : function() {
		if (this.horizontalCursor)
			this.horizontalCursor.setStyle('borderTopStyle', 'none');
		if (this.verticalCursor)
			this.verticalCursor.setStyle('borderLeftStyle', 'none');
	},
	
	updateCursor : function(containerX, containerY, containerWidth, containerHeight, xPos, yPos) {
		if (this.horizontalCursor && this.showHorizontalCursor)
		{
			this.horizontalCursor.setStyle('left',containerX+'px');
			this.horizontalCursor.setStyle('top',yPos+'px');
			this.horizontalCursor.setStyle('width',containerWidth+'px');
			this.horizontalCursor.setStyle('borderTopStyle', 'solid');
		}
		if (this.verticalCursor && this.showVerticalCursor)
		{
			this.verticalCursor.setStyle('left',xPos+'px');
			this.verticalCursor.setStyle('top',containerY+'px');
			this.verticalCursor.setStyle('height',containerHeight+'px');
			this.verticalCursor.setStyle('borderLeftStyle', 'solid');
		}
	},

	resetPanel : function() {
		if (this.panelMarker)
			this.panelMarker.setStyle('borderStyle', 'none');
	},

	updatePanel : function(containerX, containerY, containerWidth, containerHeight) {
		this.panelMarker.setStyle('left',containerX+'px');
		this.panelMarker.setStyle('top',containerY+'px');
		this.panelMarker.setStyle('width',containerWidth+'px');
		this.panelMarker.setStyle('height',containerHeight+'px');
		this.panelMarker.setStyle('borderStyle', 'dashed');
		this.panelMarker.setStyle('borderWidth', '3px');
	},
	
	resetZoom : function() {
		//This function is override during a startZoom call
	},
	
	stopZoom : function() {
		this.showVerticalCursor   = true;
		this.showHorizontalCursor = true;
		this.resetZoom();
		this.onClick = null;
		this.resetZoom = function() {};
	},
	
	startZoom : function(isHorizontal, containerPos, containerSize, onSelectFirst, onSelectSecond) {
		this.resetZoom();
		
		//this.showVerticalCursor   = isHorizontal;
		//this.showHorizontalCursor = !isHorizontal;
		this.resetCursor();
		
		var me = this;
		var selectFirst = null;
		var selectSecond = null;
		
		selectSecond = function(x, y)
		{
			if (isHorizontal)
			{
				me.secondVerticalMarker.setStyle('left',x+'px');
				me.secondVerticalMarker.setStyle('top',containerPos+'px');
				me.secondVerticalMarker.setStyle('height',containerSize+'px');
				me.secondVerticalMarker.setStyle('borderLeftStyle', 'dotted');
				if (onSelectSecond)
					onSelectSecond(x);
			}
			else
			{
				me.secondHorizontalMarker.setStyle('left',containerPos+'px');
				me.secondHorizontalMarker.setStyle('top',y+'px');
				me.secondHorizontalMarker.setStyle('width',containerSize+'px');
				me.secondHorizontalMarker.setStyle('borderTopStyle', 'dotted');
				if (onSelectSecond)
					onSelectSecond(y);
			}
			
			me.onClick = selectFirst;
		};
		
		selectFirst = function(x, y)
		{
			if (isHorizontal)
			{
				me.secondVerticalMarker.setStyle('borderLeftStyle', 'none');
				me.firstVerticalMarker.setStyle('left',x+'px');
				me.firstVerticalMarker.setStyle('top',containerPos+'px');
				me.firstVerticalMarker.setStyle('height',containerSize+'px');
				me.firstVerticalMarker.setStyle('borderLeftStyle', 'dotted');
				if (onSelectFirst)
					onSelectFirst(x);
			}
			else
			{
				me.secondHorizontalMarker.setStyle('borderLeftStyle', 'none');
				me.firstHorizontalMarker.setStyle('left',containerPos+'px');
				me.firstHorizontalMarker.setStyle('top',y+'px');
				me.firstHorizontalMarker.setStyle('width',containerSize+'px');
				me.firstHorizontalMarker.setStyle('borderTopStyle', 'dotted');
				if (onSelectFirst)
					onSelectFirst(y);
			}
			
			me.onClick = selectSecond;
		};
		
		this.resetZoom = function()
		{
			me.firstVerticalMarker.setStyle('borderLeftStyle', 'none');
			me.secondVerticalMarker.setStyle('borderLeftStyle', 'none');
			me.firstHorizontalMarker.setStyle('borderTopStyle', 'none');
			me.secondHorizontalMarker.setStyle('borderTopStyle', 'none');
			
			me.resetCursor();
			me.onClick = selectFirst;
		};
		
		this.onClick = selectFirst;
	},
	
	init : function(config) {
		var me = this;
				
		var myConf = {
			src    : config.imageUrl,
			width  : config.width,
            height : config.height,
			onMouseMove : config.onMouseMove,
			onContextMenu : config.onContextMenu,
            listeners : {
				render :  function(img, eOpts){
					me.refreshMe();
					//Create cursor
					me.verticalCursor         = me.createNewVerticalDiv();
					me.horizontalCursor       = me.createNewHorizontalDiv();
					//Create markers (used for zoom)
					me.firstVerticalMarker    = me.createNewVerticalDiv();
					me.secondVerticalMarker   = me.createNewVerticalDiv();
					me.firstHorizontalMarker  = me.createNewHorizontalDiv();
					me.secondHorizontalMarker = me.createNewHorizontalDiv();
					
					me.panelMarker = me.createNewPanelMarkerDiv();
					
					me.resetCursor();
				},
				el: {
					click: function(e, t, eOpts) {
						if (me.onClick)
							me.onClick(e.getX()-me.getPosition()[0], e.getY()-me.getPosition()[1]);
					},
					mousemove: function(e, t, eOpts){
						me.verticalCursor.setStyle('left', (e.getX()-me.getPosition()[0])+"px");
						me.horizontalCursor.setStyle('top', (e.getY()-me.getPosition()[1])+"px");
						if (me.onMouseMove)
							me.onMouseMove(e.getX()-me.getPosition()[0], e.getY()-me.getPosition()[1]);
					},
					contextmenu : function(event, t, eOpts ) {
						event = event || window.event;
						if (event.preventDefault) {
							event.preventDefault();
						}
						if (me.onContextMenu)
							me.onContextMenu(event.getX(), event.getY(), event.getX()-me.getPosition()[0], event.getY()-me.getPosition()[1]);
						return false;
					}
				}
			}
		};
		
		Ext.apply (this , Ext.apply (arguments, myConf));
	}
});