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

Ext.define('amdaUI.PlotTabResultUI', {
    extend: 'Ext.panel.Panel',
 
    alias: 'widget.plotTabResult',

    requires: [
        'amdaUI.InteractiveIntervalPlugin'
    ],
    
    isPortrait : false,
    pageWidth  : 0,
    pageHeight : 0,
    
    constructor: function(config) {
        this.addEvents({'pagesize':true});
        
        this.init(config);	 
        this.callParent(arguments);	 
    },  
    
    getImageSize : function() {
    	var size =  {
    			width  : this.pageWidth * this.sliderPage.getValue()/100.,
    			height : this.pageHeight * this.sliderPage.getValue()/100.
	    } 
    	return size;
    },
    
    getImageUrl: function(resultFolder, plotFile) {
    	return 'data/'+sessionID +'/RES/'+resultFolder+ '/' + plotFile;
    },
    
    createPlotImage: function(resultFolder, plotFile, context) {
    	var size = this.getImageSize();
    	this.panelImage = Ext.create('Ext.Img', {
            src    : this.getImageUrl(resultFolder, plotFile),
            width  : size.width,
            height : size.height,
            refreshMe : function(){
            	var el;
            	if(el = this.el){
            		el.dom.src = this.src + '?dc=' + new Date().getTime();
                }
             },
             listeners : {
                render :  function(){
                	this.refreshMe();
                }
             }
        });

        return this.panelImage;
    },
    
    updatePlotImage: function(configResult) {
    	this.isPortrait = configResult.context.page.portrait;
    	this.pageWidth  = configResult.context.page.width;
    	this.pageHeight = configResult.context.page.height;
    	
    	this.panelImage.setSrc(this.getImageUrl(configResult.folder, configResult.plotFile));
    	
    	var size = this.getImageSize();
    	this.panelImage.setSize(size.width, size.height);
    	
    	this.panelImage.refreshMe();
    },
    
    init: function(configResult){
    	this.isPortrait = configResult.context.page.portrait;
    	this.pageWidth  = configResult.context.page.width;
    	this.pageHeight = configResult.context.page.height;
    	
    	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)
                {
        			//ToDo - this.resetMire();
        			var size = this.getImageSize();	 
        			this.panelImage.width  = size.width;
        			this.panelImage.height = size.height;
        			this.panelImage.doComponentLayout();
        			this.fireEvent('pagesize',this,v);
                }
            }
        });
    	
    	var plotResultTabPanelConfig = {
    			preventHeader : true,
                autoScroll: true,       
                items: [
                        this.createPlotImage(configResult.folder, configResult.plotFile, configResult.context)
                ]
    	};
            
    	Ext.apply(this , plotResultTabPanelConfig);	
    }
});