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


/* intance of component (in \js\extapp\addons\addons.js) */
var ajaxWaiting = new Ext.ux.wait4ajax();


var windowG;

/* Galleriepopup */
function doGallery(pkg,pki) {
	/*destroy existing Gallerypopup*/
	if (windowG) {
		windowG.destroy();
	}
	
	windowG = new Ext.Window({       
		renderTo: Ext.getBody(),
		resizable:false,
		draggable: false,
        
		width: 870,
		cls: 'gallerypopup',
		//ctCls: 'gallerypopup',
        //height:511,
        minWidth: 300,
        minHeight: 200,
     //   layout: 'fit',
        bodyStyle:'',
        buttonAlign:'center',
        items:	[{html:
					'	<div>'+
					'		<h1 id="gal_header"></h1>'+
					'		<div class="clearfix">'+
					'		    <div class="thumbs">'+
					'		   		<div id="content_gallerie_navi"><!--leer--></div>'+

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

					'			<div class="fullsize">'+
					'		     	<div id="content_gallerie_detail"><!--leer--></div>'+
					'		    </div>'+
					'		</div>'+
					'	</div>'+
					'	<img src="/index.cfm?event=page.tracking&fksfdata=1472&fkid='+ pkg +'" />'
			
				}],
		plain:false,
	    floating:true,
	    modal:true,
	    title:'<a style="cursor:pointer" onclick="windowG.destroy()"><span class="flr" style="color:#FFFFFF; font-weight:normal; font-size:12px !important;padding-right:5px;">Schlie&szlig;en</span></a>',
	    shadow:false
		,
		key: {
			key: [27],
			fn: function(){
				windowG.destroy();
			}
		}		
    });
	//windowG.setPosition(200,75);
	//windowG.show();	

	/* call Functions for loading content */
	getGalleriesCurrP(pki,pkg);
	getGalleriesMore(pkg);
	getGalleriesDetail(pki, pkg);
	
	
};

/* small navigation */
function getGalleriesNavi(pkg,p)	{		
	var divid = 'content_gallerie_navi';	
	
	/* store ajax request */
	ajaxWaiting.addAjaxStarted('getGalleriesNavi');

	new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.galleries.getGalleriesNavi&pkg='+pkg+'&p='+p,
		autoLoad: true,
		fields: ['DATA'],
		listeners: {
			load: function(pThisStore, pRecords){				
				var template = new Ext.XTemplate(
				
					'<tpl for="DATA">' +
					'	<div class="clearfix">'+
					'		<tpl for="ITEMS">' +
					'			<div class="image" id="gal_img_{PKI}">'+
					'				<a href="javascript:void(0);" onclick="getGalleriesDetail(\'{PKI}\', \'{parent.PKG}\'); return false;">'+
					'					<img src="{parent.IMGPATH}/65x65{FILEPATH}{FILENAME}" alt="{IMAGETITLE}" />'+
					'				</a>'+					
					'			</div>'+
					'			<tpl if="xindex % 3 == 0"><br clear="all" /></tpl>' +
					'		</tpl>'+
					
					'		<tpl if="SHOWPAGES == 1">'+								
					'		<div class="paging clearfix cb">'+
					'			<tpl for="PAGING">' +
							
					/*
					'				<tpl if="this.pageexists(FIRST)">' +
					'					<a href="javascript:void(0);" onclick="getGalleriesNavi(\''+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="getGalleriesNavi(\''+pkg+'\',\'{BACK}\'); return false;" class="back plr3"><strong style="color:#C2D8E5;">Zur&uuml;ck</strong></a>'+
					'					</tpl>&nbsp;'+
					'				</div>'+
					
					'				<div class="center clearfix">'+
					'					<tpl for="PAGES">' +
					'						<a href="javascript:void(0);" onclick="getGalleriesNavi(\''+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="getGalleriesNavi(\''+pkg+'\',\'{NEXT}\'); return false;" class="go plr3"><strong style="color:#C2D8E5;">Weiter</strong></a>'+
					'					</tpl>'+
					'				</div>'+
					/*
					'				<tpl if="this.pageexists(LAST)">' +
					'					<a href="javascript:void(0);" onclick="getGalleriesNavi(\''+pkg+'\',\'{LAST}\'); return false;" class="go plr3"><strong>Letztes</strong></a>
					'				</tpl>'+
					*/
					'			</tpl>'+
					'		</div>'+	
					' 		</tpl>'+		
					'	</div>'+										
					'</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('getGalleriesNavi');
				}
			}
		});
}

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

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

	new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.galleries.getGalleriesDetail&pki='+pki+'&pkg='+pkg,
		autoLoad: true,
		fields: ['DATA'],
		listeners: {
			load: function(pThisStore, pRecords){
				var template = new Ext.XTemplate(
					
					'<tpl for="DATA">'+
					'	<div class="image">'+
					'		<img src="{IMGPATH}/520x{FILEPATH}{FILENAME}" alt="{IMAGETITLE}" onLoad="windowG.center();windowG.show();" />'+
					'	</div>'+
		            '	<div class="description">'+
		            '		<div class="caption clearfix">'+
		            '			<div class="fll">Bild {RANK} von {TOTAL}</div>'+
		            '			<div class="flr">{CAPTURE}</div>'+
		            '		</div>'+
		            '		<div class="line_dashed"><!--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)">getGalleriesNavi({PKG},{PPREV});</tpl> getGalleriesDetail(\'{PREV}\',\'{PKG}\');  return false;">zur&uuml;ck</a></div>'+
					'		</tpl>'+
		            '		<tpl if="this.pageexists(NEXT)">'+
					'			<div class="forward">  <a href="javascript:void(0);" onclick="<tpl if="this.pageexists(PNEXT)">getGalleriesNavi({PKG},{PNEXT});</tpl> getGalleriesDetail(\'{NEXT}\',\'{PKG}\');  return false;">weiter</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('gal_header').update(pThisStore.reader.jsonData.DATA.GALLERIETITLE);
					
					Ext.Ajax.request({
						url: '/index.cfm?event=ajax.getWebtrekkCoding',
						params: {
							pk				: pkg,
							sourceofrequest : 'imagegallery'
						},
						success: function(pResponse, pOptions) {
							
							var cresponse=Ext.decode(pResponse.responseText);
							
							if(cresponse.success){
								try{						
									//// content group(s)
									webtrekk.contentGroup = new Array();
									
									// Webseite
									webtrekk.contentGroup[1] = cresponse.contentgroup1;
									
									// Navigationsebene 1
									webtrekk.contentGroup[2] = cresponse.contentgroup2;
									
									// Navigationsebene 2
									webtrekk.contentGroup[3] = cresponse.contentgroup3;
									
									// Objektart
									webtrekk.contentGroup[9] = cresponse.contentgroup9;

									// Seitenname
									webtrekk.contentGroup[10] = cresponse.contentgroup10;
									
									wt_sendinfo(cresponse.webtrekk);
								}catch(e){						
								}
							}else{
								/// Exception occured
							}
							
						},
						scope: this
					});
					
					/* 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('getGalleriesDetail',function(){
						var els = Ext.select('div[@class*=image]', true);
						for(var i=0;i<els.elements.length; i++){
							els.elements[i].removeClass('active');
						}
						
						if (Ext.get('gal_img_' + pki)) {
							Ext.get('gal_img_' + pki).addClass('active');							
						}						
					});					
				}
			}
		});

}

/* list further Galleries */
function getGalleriesMore(pkg)	{		
	var divid = 'content_gallerie_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){
				if(pThisStore.data.length > 0) {
				
					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 getGalleriesCurrP(pki, pkg)	{
	
	/* store ajax request */
	ajaxWaiting.addAjaxStarted('getGalleriesCurrP');	
	
	var ret = 0;
	var p = new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.galleries.getGalleriesCurrentPage&pki='+pki+'&pkg='+pkg,
		autoLoad: true,
		fields: ['DATA'],
		listeners: {
			load: function(pThisStore, pRecords){
					ret=pThisStore.reader.jsonData.DATA;
					getGalleriesNavi(pkg,ret);
					
					ajaxWaiting.addAjaxReady('getGalleriesCurrP');
				}
			}
		});
	
}

/* small gallery */
function showSmallGallery(pkg,pki,scroll,maxrows){
	var divid = 'content_gallerie_small';
	
	if(typeof pkg == 'undefined') pkg = 0;
	if(typeof pki == 'undefined') pki = 0;
	if(typeof scroll == 'undefined') scroll = 0;
			
	new Ext.data.JsonStore({
		url: '/index.cfm?event=ajax.galleries.getGalleriesSmall&pkg='+pkg+'&pki='+pki+'&scroll='+scroll/*+'&maxrows='+maxrows*/,
		autoLoad: true,
		fields: ['ITEMS','IMGCOUNT','PKG','HEADLINE','BACK','NEXT', 'TOTALCOUNT'],
		listeners: {
			load: function(pThisStore, pRecords){
				var template = new Ext.XTemplate(
						'<div class="gallerie_container">'+
		                '  	<div class="box">'+
		                '    	<div class="tb-head"><!--leer--></div>'+
		                '       <div class="tb-content">'+
		                '			<h5 style="padding-bottom:5px;">'+
		                '				<img src="/img/icons/cam.gif" alt="##" />{MODULETITLE}'+
		                '			</h5>'+
		                '			<h2 class="pb8">{HEADLINE}</h2>'+
		                '			<div id="partypics" class="clearfix">'+
		                '		    	<tpl if="TOTALCOUNT &gt; 5"><div class="backw"><a href="javascript:void(0);"><img id="gallerybackward" src="/img/icons/slideb.gif" border="0" alt="zurück" /></a></div></tpl>'+
		                '		    	<div id="pictureboxwrap">'+
		                '		        	<div id="picturebox" class="images">'+
						'						<tpl for="ITEMS">'+
		                '		            		<div class="pic">'+
		                '		                		<a href="javascript:void(0);" onclick="doGallery({parent.PKG},{PK});return false;">'+
		                '			                		<img src="{IMGPATH}/84x84{FILEPATH}{FILENAME}" alt="{IMAGETITLE}" />'+
		                '		                		</a>'+
		                '		            		</div>'+
						'						</tpl>'+	
		                '					</div>'+
		                '		    	</div>'+
		                '		    	<tpl if="TOTALCOUNT &gt; 5"><div class="forward"><a href="javascript:void(0);"><img id="galleryforward" src="/img/icons/slidef.gif" border="0" alt="weiter" /></a></div></tpl>'+
		                '			</div>'+
		                '			<div class="pt8">'+
		                '				<strong class="light">Mit Klick auf ein Foto startet die Bildergalerie ({IMGCOUNT} Bilder)</strong>'+
		                '			</div>'+
		                '		</div>'+
		                '	</div>'+
		                '</div>'


				);							
					template.overwrite(divid, pThisStore.reader.jsonData);
					
					
					if(pThisStore.reader.jsonData.NEXT){
						/* add Event for scrolling to next image */
						Ext.get('galleryforward').on('click',function(){showSmallGallery(pThisStore.reader.jsonData.PKG,pThisStore.reader.jsonData.PKI,pThisStore.reader.jsonData.NEXT);});
					}
					
					if(pThisStore.reader.jsonData.BACK){
						/* add Event for scrolling to previous image */
						Ext.get('gallerybackward').on('click',function(){showSmallGallery(pThisStore.reader.jsonData.PKG,pThisStore.reader.jsonData.PKI,pThisStore.reader.jsonData.BACK);});
					}										
			}			
		}
	});	
}