/*
 * ImageWindow - preconfigured class
 * http://extjs.com/learn/Tutorial:Writing_a_Big_Application_in_Ext#Writing_a_pre-configured_class
 * 
 * > Window > Panel > Container > BoxComponent > Component
 * 
 * Verwendung:
 * Pupup aus den Detailtexten unter dem Coverflow (direkt - kein Extjs)
 * openImagePopup() in app_kfr_k.js
 */
 
function openGalleryWithImage(reference, image) {	
	var win = new Ext.ux.FacadeGalleryPopupWindow({
		 reference: reference
		,image: image
		,hidden: true
	});	
	win.show();/*
	win.fadeIn({
		 endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
		    easing: 'easeOut',
		    duration: .5

	});*/
}
Ext.ux.FacadeGalleryPopupWindow = Ext.extend(Ext.Window, {
     border:false
	,shadow:false
	,animate: true
	,resizeSpeed: 0.8
	,fadeSpeed: 0.6
	,modal:true
	,closable:false
	,resizable: true
	,autoHeight:false
	,bodyCssClass:'ext-kfr-popup-body'
	,cls:'ext-kfr-popup ext-kfr-facade-gallery-popup'
	,minWidth: 156
	,minHeight:40
	,bottomLineHeight:80
	,width: 10
	,height:10
	
    ,initComponent:function() {
		//alert('FacadeGalleryPopupWindow');
		this.resizeDuration = 1;
		var self = this;
		if(GALLERY_URL == ''){
			alert('FacadeGalleryPopupWindow ohne GalleryURL: ' + this.storeUrl);
			/*
			this.store = new Ext.data.JsonStore({
				 url: this.storeUrl
				,root: 'reference'
				,fields:['referenceId', 'images']
		        ,autoLoad:'true'
				,autoAbort: true
				,timeout: 30000
				,listeners:{
					 scope:this
					,'load': this.dataLoadSuccess2
				}
			})*/
		}
		else{
			//alert('FacadeGalleryPopupWindow mit GalleryURL: ' + GALLERY_URL+'&referenceId='+this.reference+'&imageId='+this.image);
			this.store = new Ext.data.JsonStore({
		         url: GALLERY_URL+'&referenceId='+this.reference+'&imageId='+this.image
		        ,root: 'imageGalleryDetail'
		        ,fields: ['referenceId'
					,'nextImageId'
					, 'prevImageId'
					, 'imageId'
					, 'imageText'
				]
				,autoLoad:'true'
				,autoAbort: true
				,timeout: 30000
				,listeners:{
					scope:this,
					'load': this.dataLoadSuccess
				}
		    });
		}
	    
	    
						
        Ext.apply(this, {							 
		     closeAction: 'close'
			,imageIndex: 0
			,buttonAlign:'right'
			,headerAsText:false
			,header:false
			,items:[	
				
				new Ext.BoxComponent({
					autoEl: {
						id: self.id+'-image',
						tag: 'img',
						src: Ext.BLANK_IMAGE_URL
					}}),
					{
						html:'',
						id: self.id+'-text',
						border: false
					}
			]
			,buttons:[	
				
				new Ext.BoxComponent({
					hidden: true,
					id: self.id+'-prev',
					autoEl: {
						tag: 'img',
						src: Ext.ICON_BUTTON_LA
					},
					listeners:{
						render: function(c) {
							c.getEl().on('click', function() {
								self.loadPrev();
							});
						}
					}
				}),
				new Ext.BoxComponent({
					hidden: true,
					id: self.id+'-next',
					style:'',
					autoEl: {
						tag: 'img',
						src: Ext.ICON_BUTTON_RA
					},
					listeners:{
						render: function(c) {
							c.getEl().on('click', function() {
								self.loadNext();
							});
						}
					}
				}),
				new Ext.BoxComponent({
					autoEl: {
						tag: 'img',
						src: Ext.ICON_BUTTON_CLOSE
					},
					listeners:{
						render: function(c) {
							c.getEl().on('click', function() {
								self.closeme();
							});
						}
					}
				})
			]
        });
        Ext.ux.FacadeGalleryPopupWindow.superclass.initComponent.apply(this, arguments);	
    },
    loadNext: function() {
    	if(this.store.getAt(0).get('nextImageId') > 0) {    
    		this.image = this.store.getAt(0).get('nextImageId');
      		Ext.get(this.id+'-text').update(i18n.L_loadingContent);
			Ext.get(this.id+'-image').set({src: Ext.BLANK_IMAGE_URL}, true);
			this.store.proxy.setUrl(GALLERY_URL+'&referenceId='+this.reference+'&imageId='+this.image);
			this.store.load();
    	}
    },
    loadPrev: function() {
    	if(this.store.getAt(0).get('prevImageId') > 0) {    
    		this.image = this.store.getAt(0).get('prevImageId');
    		
      		Ext.get(this.id+'-text').update(i18n.L_loadingContent);
			Ext.get(this.id+'-image').set({src: Ext.BLANK_IMAGE_URL}, true);
			this.store.proxy.setUrl(GALLERY_URL+'&referenceId='+this.reference+'&imageId='+this.image);
			this.store.load();
    	}
    }
    //{reference:[ referenceId:'', objectName:'', ..., images:[{src:xyz, desc:xyz}, {src:xyz, desc:xyz}, ..]]}
    , dataLoadSuccess2: function(store, records, options){
    	var record = store.getAt(0);
    	var recordImages = record.get('images');//record.get('images');
    	Ext.get(this.id+'-image').on('load', this.resizeWindow, this, {single: true});    	
    	Ext.get(this.id+'-image').set({src: KFR.getImageSrc(recordImages[0].src, 'data')}, true);
    	Ext.get(this.id+'-text').update(recordImages[0].desc);
    	if(recordImages.length > 1) {
			Ext.getCmp(this.id+'-next').show();
		} 
    	alert(recordImages.length + 'Bilder, ' + KFR.getImageSrc(recordImages[0].src, 'data') + recordImages[0].desc)
    }
    //{imageGalleryDetail:[referenceId:'', nextImageId:'', prevImageId:'']}
	, dataLoadSuccess: function(store, records, options){
		var record = store.getAt(0);
			
		//weiterPfeil
		if(record.get('nextImageId') > 0) {
			Ext.getCmp(this.id+'-next').show();
		} else {
			Ext.getCmp(this.id+'-next').hide();
		}
		
		// zurueckPfeil
		if(record.get('prevImageId') > 0) {
			Ext.getCmp(this.id+'-prev').show();
		} else {
			Ext.getCmp(this.id+'-prev').hide();
		}
		
        Ext.get(this.id+'-text').update(record.get('imageText'));
       // Ext.get(this.id+'-image').on('load', this.resizeWindow, this, {single: true});
        //alert(IMAGE_URL+this.image+'/data');
		//Ext.get(this.id+'-image').set({src: IMAGE_URL+this.image+'/data'}, true);
		this.setImage(IMAGE_URL+this.image+'/data')
	}

	// neu
	,setImage: function(newImg){
		Ext.get(this.id+'-image').hide(false);
		Ext.get(this.id+'-image').setOpacity(0.0001);

        var preload = new Image();
        preload.onload = (function(){
        	Ext.get(this.id+'-image').dom.src = newImg;
        	this.resizeWindow(preload.width, preload.height);
        }).createDelegate(this);
		preload.src = newImg;
    }
	
	,resizeWindow: function(imgWidth, imgHeight){
		//alert(imgWidth +','+ imgHeight);
		var wCur = 0;//this.getSize()[0];
		var hCur = 0;//this.getSize()[1];
		
		var xCur = this.getPosition()[0];
		var yCur = this.getPosition()[1];
		
		var w = wCur;
		var h = hCur;
     
        var wNew = imgWidth+30;
        var hNew = imgHeight+Ext.get(this.id+'-text').getHeight(false)+this.bottomLineHeight;
        
        wNew = Math.max(this.minWidth, wNew);
        hNew = Math.max(this.minHeight, hNew);
        
		var xNew = Ext.lib.Dom.getViewWidth(true)/2 - wNew /2;
		var yNew = Ext.lib.Dom.getViewHeight(true)/2- hNew /2 - this.bottomLineHeight;

        var xDiff = xCur - xNew;
        var yDiff = yCur - yNew;

        if (xDiff != 0 || yDiff != 0) {
        	this.setPosition(xNew, yNew);
        	this.setSize(wNew, hNew);   
        }
        
        var timeout = 0;
        if ((xDiff == 0) && (yDiff == 0)) {
            timeout = (Ext.isIE) ? 150 : 50;
        }
		
		(function(){
                this.showImage();
            }).createDelegate(this).defer((this.resizeDuration) + timeout);
        //alert('w/h alt:' +wCur +',' + hCur + ', neu: '+wNew + ','+ hNew + ', POS: alt:' +xCur  +',' + yCur + ', neu:' +xNew +',' + yNew+', '+Ext.lib.Dom.getViewHeight());
    }	

	,closeme: function(args){
		this.destroy();
	}
	
	,showImage: function(){
		var img = Ext.get(this.id+'-image');
	     img.fadeIn({
	            duration: 1.5,//this.resizeDuration/8,
	            scope: this          
	        });
	}

});