/*
 * WM (nbsp GmbH)
* 25.11.2008
 * Imagegallerie
 */

/* Component for calling functions after all specified Ajax-Request have finished */
Ext.namespace('Ext.ux');

Ext.ux.wait4ajax = Ext.extend(Ext.Component, {
 // Prototype Defaults
 /* List of Eventname to call after Ajax is ready */
 myEvents: [],
 /* List of started Ajax-Requests */
 myStartedAjax: [],

 initComponent : function(){
 Ext.ux.wait4ajax.superclass.initComponent.call(this);
 },

 // public
 /* remember started ajax requests */
 addAjaxStarted: function(fnname){
 this.myStartedAjax.push(fnname);
 },

 addAjaxReady: function(fnname,fn){
 /* if function is passed: add function to listeners and save Eventname*/
 if(typeof fn != 'undefined'){
 this.addListener(fnname,fn,this,0,true);
 /* */
 this.addMyEvents(fnname);
 }

 this.removeAjaxStarted(fnname);

 this.checkWaitingAjax();
 },

 // private

 addMyEvents : function(fnname){
 this.myEvents.push(fnname);
 },

 /* remove Entry from started Ajax Requests */
 removeAjaxStarted: function(fnname){
 var nLen = this.myStartedAjax.length;
 var tmpArr = new Array();
 for (i = 0; i < nLen; i++) {
 if(this.myStartedAjax[i] != fnname){
 tmpArr.push(this.myStartedAjax[i]);
 }
 }
 this.myStartedAjax = tmpArr;
 },

 /* check if there are still unfinished ajax request*/
 checkWaitingAjax : function(){
 if(this.myStartedAjax.length == 0){
 this.onReady();
 }
 },

 /* fire all saved Events*/
 onReady : function(){
 var nLen = this.myEvents.length;
 for(i=0;i<nLen; i++){
 this.fireEvent(this.myEvents[i]);
 //this.removeListener(this.myEvents[nLen]);
 }
 },

 onRender : function(ct, position){

 },


 afterRender : function(){
 Ext.ux.wait4ajax.superclass.afterRender.call(this);
 }


});

/* intance of component */
var ajaxWaiting = new Ext.ux.wait4ajax();


var windowG;

/* Galleriepopup */

function doMapmodule(pkg,pki) {
	var sCloseWindow = getLanguageText('teasers.popup.windowclose');
	 // destroy existing Gallerypopup
	 if (windowG) {
	 windowG.destroy();
	 }
	 
	 windowG = new Ext.Window({
		 renderTo: Ext.getBody(),
		 resizable:false,
		 draggable: false,

		 width: 880,
		 cls: 'gallerypopup',
		 //ctCls: 'gallerypopup',
		 //height:511,
		 minWidth: 300,
		 minHeight: 200,
		 // layout: 'fit',
		 bodyStyle:'',
		 buttonAlign:'center',
		 items: [{html:
			 '<div class="gallerypopup">'+
			 	'<h1 id="mapmodule_header">Hier steht ein sch&ouml;ne Headline</h1>'+
			 	'<div class="clearfix">'+
			 		'<div class="thumbs gallerycard">'+
			 			'<div id="mapmodule_navi" class="navi_list"><!--leer--></div>'+

			 			'<div class="more">'+
			 				'<div id="mapmodule_more"><!--leer--></div>'+
			 			'</div>'+
			 		'</div>'+

			 		'<div class="fullsize">'+
			 			'<div id="mapmodule_detail"><!--leer--></div>'+
			 		'</div>'+
			 	'</div>'+
			 '</div>'

		 }],
		 plain:false,
		 floating:true,
		 modal:true,
		 title:'<a style="cursor:pointer" onclick="windowG.destroy()"><span class="flr" style="font-size:12px !important;padding-right:5px;">'+sCloseWindow+'</span></a>',
		 shadow:false
		 });

	 // call Functions for loading content
	 getMapmoduleCurrP(pki,pkg);
	 //getGalleriesMore(pkg);
	 getMapmoduleDetail(pki, pkg);
	 
	 
	 
	};

/* small navigation */
function getMapmoduleNavi(pkg,p) {
	var divid = 'mapmodule_navi';

	/* store ajax request */
	ajaxWaiting.addAjaxStarted('getMapmoduleNavi');

	new Ext.data.JsonStore({	
		url: 'index.cfm?event=ajax.galleries.getMapNavi&pkg='+pkg+'&p='+p,		
		autoLoad: true,		
		fields: ['DATA'],		
		listeners: {			
			load: function(pThisStore, pRecords){				
				var template = new Ext.XTemplate(											
					'<tpl for="DATA">' +					
						// ' <div class="clearfix">'+						
						'<ul>'+							
							'<tpl for="ITEMS">' +								
								'<li style="width:276px" class="item" id="mapmodule_img_{PKI}" {#}>'+
									'<a href="javascript:void(0);" onclick="getMapmoduleDetail(\'{PKI}\', \'{parent.PKG}\'); return false;">'+
										//' <img src="{parent.IMGPATH}/65x65{FILEPATH}{FILENAME}" alt="{IMAGETITLE}" />'+										
										'<nobr>{IMAGETITLE}</nobr>'+
									'</a>'+
								'</li>'+
							'</tpl>'+	
						'</ul>'+	
						// ' </div>'+	
						'<tpl if="SHOWPAGES == 1">'+	
							'<div class="paging clearfix cb">'+		
								'<tpl for="PAGING">' +					
									/*	' <tpl if="this.pageexists(FIRST)">' +
									 * 	' <a href="javascript:void(0);" onclick="getMapmoduleNavi(\''+pkg+'\',\'{FIRST}\'); return false;" class="back plr3"><strong>Erste</strong></a>'+  							
									 * ' </tpl>'+									 */									
									'<div class="left">'+										
										'<tpl if="this.pageexists(BACK)">' +											
											'<a href="javascript:void(0);" onclick="getMapmoduleNavi(\''+pkg+'\',\'{BACK}\'); return false;" ><strong>'+getLanguageText('defaults.previous')+'</strong></a>'+			
										'</tpl>&nbsp;'+	
									'</div>'+														
									'<div class="center clearfix">'+					
										'<tpl for="PAGES">' +										
											'<a href="javascript:void(0);" onclick="getMapmoduleNavi(\''+pkg+'\',\'{.}\'); return false;" ' +											
												'<tpl if="parent.ACTPAGE == values">class="active"</tpl>' +		
											'>{.}</a>' +										
											'<tpl if="xindex &lt; xcount">|</tpl>' +								
										'</tpl>' +								
									'</div>'+								
									'<div class="right">&nbsp;'+				
										'<tpl if="this.pageexists(NEXT)">' +											
											'<a href="javascript:void(0);" onclick="getMapmoduleNavi(\''+pkg+'\',\'{NEXT}\'); return false;" ><strong>'+getLanguageText('defaults.next')+'</strong></a>'+				
										'</tpl>'+			
									'</div>'+	
									/*		 							
									' <tpl if="this.pageexists(LAST)">' +		 							
									' <a href="javascript:void(0);" onclick="getMapmoduleNavi(\''+pkg+'\',\'{LAST}\'); return false;" class="go plr3"><strong>Letztes</strong></a>		 		
									' </tpl>'+		
									*/			
									'</tpl>'+		
								'</div>'+	
							'</tpl>'+						
						'</tpl>'								
						,{					
						pageexists: function(p){				
						p = p+'';						
							 if (p.length > 0) {						
								 return true;		
							 }			
							 else {								 
								return false;		
							 }		
						}		
					}				
				);				
				template.overwrite(divid, pThisStore.reader.jsonData);								
				/* ajax request ready*/				
				ajaxWaiting.addAjaxReady('getMapmoduleNavi');			
			}		
		}	
	});
}


/* Detailimage for Gallery */
function getMapmoduleDetail(pki, pkg) {
	var divid = 'mapmodule_detail';

	/* store ajax request */
	ajaxWaiting.addAjaxStarted('getMapmoduleDetail');

	new Ext.data.JsonStore({
		url: 'index.cfm?event=ajax.galleries.getMapDetail&pki='+pki+'&pkg='+pkg,
		autoLoad: true,
		fields: ['DATA'],
		listeners: {
			load: function(pThisStore, pRecords){
				var template = new Ext.XTemplate(

					'<tpl for="DATA">'+
						'<div class="image_fullsize">'+
							'<img src="{IMGPATH}/550x{FILEPATH}{FILENAME}" alt="{IMAGETITLE}" onLoad="windowG.center();windowG.show();" />'+
						'</div>'+
						'<div class="description">'+
							'<div class="caption clearfix">'+
								'<div class="fll">'+getLanguageText('pages.imagegallerie.img')+' {RANK} '+getLanguageText('pages.imagegallerie.to')+' {TOTAL}</div>'+
								'<div class="flr">{CAPTURE}</div>'+
							'</div>'+
							'<div class="line_dashed_blue"><!--leer--></div>'+
							'<div class="text">{IMAGEDESCRIPTION}</div>'+
						'</div>'+
						'<div class="paging clearfix">'+
							'<tpl if="this.pageexists(PREV)">'+
								'<div class="back"><a href="javascript:void(0);" onclick="<tpl if="this.pageexists(PPREV)">getMapmoduleNavi({PKG},{PPREV});</tpl> getMapmoduleDetail(\'{PREV}\',\'{PKG}\'); return false;">'+getLanguageText('defaults.previous')+'</a></div>'+
							'</tpl>'+
							'<tpl if="this.pageexists(NEXT)">'+
								'<div class="forward"> <a href="javascript:void(0);" onclick="<tpl if="this.pageexists(PNEXT)">getMapmoduleNavi({PKG},{PNEXT});</tpl> getMapmoduleDetail(\'{NEXT}\',\'{PKG}\'); return false;">'+getLanguageText('defaults.next')+'</a></div>'+
							'</tpl>'+
						'</div>'+
					'</tpl>'
					
					, {
						pageexists: function(p){
							p = p+'';
							if (p.length > 0) {
								return true;
							}
							else {
								return false;
							}
						}
					}
				);
				template.overwrite(divid, pThisStore.reader.jsonData);

				/* change popup title */
				/*windowG.setTitle(pThisStore.reader.jsonData.DATA.GALLERIETITLE);*/
				Ext.get('mapmodule_header').update(pThisStore.reader.jsonData.DATA.GALLERIETITLE);
				
				/* ajax request ready / save Function for call after ajax is ready (some elements from other ajax requests are required, so we have to wait) */
				ajaxWaiting.addAjaxReady('getMapmoduleDetail',function(){
					var els = Ext.select('li[@class*=item]', true);
					for(var i=0;i<els.elements.length; i++){
						els.elements[i].removeClass('active');
					}
					
					if (Ext.get('mapmodule_img_' + pki)) {
						Ext.get('mapmodule_img_' + pki).addClass('active');
					}
					
				});
			}
		}
	});

}

/*
// list further Galleries
function getGalleriesMore(pkg) {
	var divid = 'mapmodule_more';

	// store ajax request
	ajaxWaiting.addAjaxStarted('getGalleriesMore');

	new Ext.data.JsonStore({
		url: 'index.cfm?event=ajax.galleries.getGalleriesMore&pkg='+pkg,
		autoLoad: true,
		fields: ['ITEMS'],
		listeners: {
			load: function(pThisStore, pRecords){
				var template = new Ext.XTemplate(

					'<h2>Weitere Bildergalerien</h2>'+
					'<ul>'+
						'<tpl for="ITEMS">'+
							'<li><a href="javascript:void(0);" onclick="javascript:doGallery(\'{FK}\',\'{FIRSTIMG}\'); return false;" >{TITLE} &raquo;</a></li>'+
						'</tpl>'+
					'</ul>'
					
				);
				template.overwrite(divid, pThisStore.reader.jsonData);
				ajaxWaiting.addAjaxReady('getGalleriesMore');
			}
		}
	});
}
*/

// get current page from image
function getMapmoduleCurrP(pki, pkg) {

	// store ajax request
	ajaxWaiting.addAjaxStarted('getMapmoduleCurrP');

	var ret = 0;
	var p = new Ext.data.JsonStore({
		url: 'index.cfm?event=ajax.galleries.getMapCurrentPage&pki='+pki+'&pkg='+pkg,
		autoLoad: true,
		fields: ['DATA'],
		listeners: {
			load: function(pThisStore, pRecords){
				ret=pThisStore.reader.jsonData.DATA;
				getMapmoduleNavi(pkg,ret);
				
				ajaxWaiting.addAjaxReady('getMapmoduleCurrP');
			}
		}
	});

}

/* small gallery */
function showSmallMapmodule(pkg,pki,scroll,maxrows,imgformat){
	var divid = 'mapmodule_small_' + pkg;


	if(typeof pkg == 'undefined') pkg = 0;
	if(typeof pki == 'undefined') pki = 0;
	if(typeof scroll == 'undefined') scroll = 0;
	if(typeof imgformat == 'undefined') imgformat = '';
	
	if(imgformat.length == 0) imgformat = '65x65';
	
	new Ext.data.JsonStore({
		url: 'index.cfm?event=ajax.galleries.getMapSmall&pkg='+pkg+'&pki='+pki+'&scroll='+scroll+'&maxrows='+maxrows,
		autoLoad: true,
		fields: ['ITEMS','IMGCOUNT','PKG','HEADLINE','BACK','NEXT'],
		listeners: {
			load: function(pThisStore, pRecords){
				var template = new Ext.XTemplate(
					'<div >'+
					// ' <h5 style="padding-bottom:0px;">'+
					// ' <img src="/img/icons/cam.gif" alt="##" />Bildergallerie</h5>'+
					// ' <h3 class="pb8">{HEADLINE}</h3>'+
						'<div id="partypics" class="clearfix">'+
							'<div class="backw"><a href="javascript:void(0);"><img id="mapmodulebackward" src="/img/icons/arrow_back.gif" border="0" alt="'+getLanguageText('defaults.previous')+'" /></a></div>'+
							'<div id="pictureboxwrap">'+
								'<div id="picturebox" class="images">'+
									'<tpl for="ITEMS">'+
										'<div class="pic">'+
											'<a href="javascript:void(0);" onclick="doMapmodule({parent.PKG},{PK});return false;">'+
												'<img src="{IMGPATH}/'+imgformat+'{FILEPATH}{FILENAME}" alt="{IMAGETITLE}" />'+
											'</a>'+
										'</div>'+
									'</tpl>'+
								'</div>'+
							'</div>'+
							'<div class="forward"><a href="javascript:void(0);"><img id="mapmoduleforward" src="/img/icons/arrow_more.gif" border="0" alt="'+getLanguageText('defaults.next')+'" /></a></div>'+
						'</div>'+
						// ' <div class="pt8">'+
						// ' <strong class="light">Fotostrecke starten: klicken Sie auf ein Bild ({IMGCOUNT} Bilder)</strong></div>'+
					'</div>'
					

				);				template.overwrite(divid, pThisStore.reader.jsonData);

				if(pThisStore.reader.jsonData.NEXT){
					/* add Event for scrolling to next image */
					Ext.get('mapmoduleforward').on('click',function(){showSmallMapmodule(pThisStore.reader.jsonData.PKG,pThisStore.reader.jsonData.PKI,pThisStore.reader.jsonData.NEXT,pThisStore.reader.jsonData.MAXROWS,imgformat);});
				}
				
				if(pThisStore.reader.jsonData.BACK){
					/* add Event for scrolling to previous image */
					Ext.get('mapmodulebackward').on('click',function(){showSmallMapmodule(pThisStore.reader.jsonData.PKG,pThisStore.reader.jsonData.PKI,pThisStore.reader.jsonData.BACK,pThisStore.reader.jsonData.MAXROWS,imgformat);});
				}
			}
		}
	});
}