/**
 * @author kais
 */
$(document).ready(function(){
	
	$('div.row').each(function(i,obj){
		var teaser_bildarchiv	=	$('.gallery li.group', obj).size();		
		if(teaser_bildarchiv > 0) {
			//jedes 1te li Element in einer Reihe bekommt eine bestimmte Klasse
			$('li.group div.contentContainer', obj).each(function(j,objinner){
				if(((j+3)%3) == 0) {
					$(this).addClass('firstElementInRow');
					$(this).after('<br clear="all" />');
				}
			});
			//jedes 3te li Element bekommt eine bestimmte Klasse
			$('li.group div.contentContainer', obj).each(function(j,objinner){
				if(((j+1)%3) == 0) {
					$(this).addClass('lastElementInRow');
					$(this).after('<br clear="all" />');
				}
			});
		}		
	});
	
	$('.gallery li:last .CCHMEBILDTEASER').addClass('lastElementInRow');
	

});

/* Funktionen fuers Bildarchiv */

var bildarchiv = {
	
	/* 
	 * Funktion die auf klick auf eine Gruppe ausgeführt wird 
	 * Schiebt eine Maske über das Hauptbild der Gruppe und
	 * blendet die kleinen Thumbnails ein
	 * @param (Object) obj - Verweis auf das aufrufende Objekt
	 */
	open:function(obj) {	
		
		var self = this;
		//Falls noch eine Ansicht offen, diese erst schliessen		
		if ($("li.aktiv").length > 0) {
			$('li.aktiv').find('.mask').fadeOut('slow');
			$('li.detail').slideUp('fast', function(){
				$('li.detail').remove();
				$('li.aktiv').find('.mask').remove();
				$('li.aktiv').removeClass('aktiv');
				self.makeRequest(obj);				
			});
		}
		else {			
			this.makeRequest(obj);
		}
	},
	
	makeRequest:function(obj) {			
		var file = $(obj).attr('rel');												
		//Ajax Request
		//alert(file);
		var ajaxManager = $.manageAjax.create('clearQueue', { 
		    queue: 'true',
			abortOld:true,
			maxRequests: 1,
			cacheResponse: true
		}); 
		
		//and add an ajaxrequest with the returned function 
		ajaxManager.add('clearQueue',{ 
			success: function(data) { 
				//alert('success');
				
				//Text für Gruppe schliessen holen
				var closeText = $(data).find('.textForClosingGroup').text();
				
				//detailliste zusammenbauen
				var detailseite = '<li class="detail" style="display:none;">'
										+'<div id="groupContainer">'
											+'<div id="groupContainerLeft">'									
												+'<div id="groupContainerRight">'
													+'<div id="groupContainerInner">'
														+'<a class="close" href="javascript:void(null);" onclick="bildarchiv.close(this);" title="'+ closeText +'">'+ closeText +'</a>'							
														+'<ul id="innerGallery">';
				var detailseite_ende =					'</ul>'
													+'</div>'
												+'</div>'
											+'</div>'															
										+'</div>'
									+'</li>';
						  			  
				$(data).find('.CCHMEDOWNLOAD').each(function(i) {
					var lastClass = '';
					var last =false;
					//jedes 4te bekommt extra klasse
					if(((i+1)%4) == 0) {
						last = true;
						lastClass = 'lastElementInRow';						
					}

					
					detailseite += '<li><div class="contentContainer CCHMEBILDDETAILTEASER '+ lastClass +'">'
									+'<div class="header">'
										+'<h2>'+$(this).find('.header h3').text()+'</h2>'
									+'</div>'
									+'<div class="media">'
										+'<a href="javascript:void(null);" onclick="bildarchiv.showImage(this);" title="'+$(this).find('.additionalInfos .imageSub').text()+'"><img src="'+ $(this).find('.media img').attr('src') +'" width="130" height="98" alt="" /></a>'
										+'<a href="javascript:void(null);" onclick="bildarchiv.showImage(this);" title="'+$(this).find('.additionalInfos .imageSub').text()+'">'+$(this).find('.additionalInfos .imageSub').text()+'</a>'
										+'<p class="largeDescription">'
											+ $(this).find('.content p').text()
										+'</p>'
										+'<a class="largeImage" style="display:none;" href="'+ $(this).find('a.largeImage').attr('href') +'" title="Link zur Grossansicht">Link zur Grossansicht</a>'
										+'<p class="closeText" style="display:none;">'+ $(this).find('.additionalInfos .largeImageCloseText').text() +'</p>'
									+'</div>'
									+'<div class="linkContainer">'											  					
										+'<span>'+ $(this).find('.linkContainer span').text() +'</span>'
										+ '<a href="'+$(this).find('.linkContainer a').attr('href')+'" title="">'+$(this).find('.linkContainer a').text()+'</a>'
									+'</div>';
					if(last)
						detailseite += '<br clear="all" />';
					detailseite += '</div></li>';
					
				});	//each ende
		
				detailseite += detailseite_ende;
				
				
				
				if ($(obj).parent().parent().parent().hasClass('lastElementInRow')) 
					$(obj).parent().parent().parent().parent().after(detailseite);					
				else if ($(obj).parent().parent().parent().hasClass('firstElementInRow')) {
										
					if ($(obj).parent().parent().parent().parent().next().next().find('.lastElementInRow').length > 0) {
						//wenn Element erstes in der Reihe ist und danach noch 2 weitere folgen
						$(obj).parent().parent().parent().parent().next().next().find('.lastElementInRow').parent().after(detailseite);
					}
					else {
						//wenn Element erstes in der Reihe ist aber danach nur 1 weiteres folgt
						$(obj).parent().parent().parent().parent().next().find('.lastElementInRow').parent().after(detailseite);
					}
				}
				else 
					$(obj).parent().parent().parent().parent().next().find('.lastElementInRow').parent().after(detailseite);
				
				//Maske erstellen und in DOM einfügen
				var maskClass = '';
				if($(obj).parent().parent().parent().hasClass('firstElementInRow'))
					maskClass = 'first'
				else if($(obj).parent().parent().parent().hasClass('lastElementInRow'))
					maskClass = 'last'
				var mask = '<div class="mask '+ maskClass +'" style="display:none;"><div class="contentContainer CCHMEBILDTEASER"><div class="header"><a href="javascript:void(null);" onclick="bildarchiv.close(this);" title="'+ closeText +'"><h2>'+ $(obj).parent().parent().parent().find('h2').text() +'</h2></a></div><div class="media"><a href="javascript:void(null);" onclick="bildarchiv.close(this);" title="'+ closeText +'"><img src="'+ $(obj).parent().parent().parent().find('img').attr('src') +'" width="268" height="204" alt="" /></a></div></div></div>';
				
				if($(obj).parent().parent().parent().find('p').size() === 1) {
					var mask = '<div class="mask '+ maskClass +' subtitled" style="display:none;"><div class="contentContainer CCHMEBILDTEASER"><div class="header"><a href="javascript:void(null);" onclick="bildarchiv.close(this);" title="'+ closeText +'"><h2>'+ $(obj).parent().parent().parent().find('h2').text() +'</h2></a><p>'+ $(obj).parent().parent().parent().find('p').text() +'</p></div><div class="media"><a href="javascript:void(null);" onclick="bildarchiv.close(this);" title="'+ closeText +'"><img src="'+ $(obj).parent().parent().parent().find('img').attr('src') +'" width="268" height="204" alt="" /></a></div></div></div>';			
				}
				$(obj).parent().parent().parent().parent().addClass('aktiv');				
				$(obj).parent().parent().parent().parent().append(mask);			
				
				//Positionierung der Maske
				if ($(obj).parent().parent().parent().hasClass('firstElementInRow'))
					$(obj).parent().parent().parent().parent().find('.mask').css('left', '0px')
				else if( $(obj).parent().parent().parent().hasClass('lastElementInRow') ) {
					if( !$(obj).parent().parent().parent().parent().prev().find('.firstElementInRow').length > 0 ) {
						$(obj).parent().parent().parent().parent().find('.mask').css('left', '-80px')
						$(obj).parent().parent().parent().parent().find('.mask').css('top', '1px')
					}
				}
				
				//Alles einblenden
				$(obj).parent().parent().parent().parent().find('.mask').fadeIn('fast');
				$('li.detail').slideDown('slow');				
		  }, 
		  url: file 
		});		
	},
	
	/*
	 * Funktion die auf klick die Maske und die Thumbnails ausblendet und
	 * aus dem DOM entfernt
	 * @param (Object) obj - Verweis auf das aufrufende Objekt 
	 */
	close:function(obj) {
		$('li.detail').slideUp('fast');
		$('li.aktiv').find('.mask').fadeOut('slow', function() {
			$('li.aktiv').find('.mask').remove();
			$('li.detail').remove();
			$('li.aktiv').removeClass('aktiv');
		});		
	},
	
	/*
	 * Funktion um die Grossansicht eines Bildes einzublenden
	 * @param (Object) obj - Verweis auf das aufrufende Objekt
	 */
	showImage:function(obj) {		
		$('#innerGallery li.active').removeClass('active');
		$(obj).parent().parent().parent().addClass('active');
		
		
		var offset = $(obj).parent().parent().parent().offset();
		var topPosition = offset.top-170;
		
		var image = '<div class="largeImageContainer">'
			+'<div class="inner">'
				+'<a class="closeImage" href="javascript:void(null);" onclick="bildarchiv.hideImage();" title="'+ $(obj).parent().find('.closeText').text() +'">'+ $(obj).parent().find('.closeText').text() +'</a>'
				+'<div class="CCHMELARGEIMAGE">'
					+'<div class="header">'
						+'<h2>'+ $(obj).parent().parent().find('.header h2').text() +'</h2>'
					+'</div>'
					+'<div class="media">'
						+'<a href="javascript:void(null);" onclick="bildarchiv.prevImage();" class="nav prev" title="prev">&nbsp;</a>'
						+'<img class="large" src="'+ $(obj).parent().find('a.largeImage').attr('href') +'" alt="" width="520" height="392" />'
						+'<a href="javascript:void(null);" onclick="bildarchiv.nextImage();" class="nav next" title="next">&nbsp;</a>'
					+'</div>'
					+'<div class="content">'
						+'<p>'
							+ $(obj).parent().find('p.largeDescription').text()
						+'</p>'
					+'</div>'
					+'<div class="linkContainer">'											  					
						+ $(obj).parent().parent().find('.linkContainer').html()						
					+'</div>'
				+'</div>'
			+'</div>'
		+'</div>';
		
		$.blockUI({
			message: image,
			css: {
				position: 'fixed',
				top: '130px',
				left: '70px'
			}		
		});
		
		// bei klick auf hintergrund - overlay schliessen
		$('body .blockOverlay').click(function() {
			$.unblockUI();				
		});
	},
	
	/*
	 * Funktion um die Grossansicht auszublenden
	 */
	hideImage:function() {
		$.unblockUI();
	},
	
	/*
	 * Funktion um die Grossansicht zu ändern wenn vor oder zurück gesprungen wurde
	 * @param (Object) newElem - Verweis auf den Container des neuen Bildes 
	 */
	changeImage:function(newElem) {
		var activeImage = $('.CCHMELARGEIMAGE');
		$(activeImage).find('.header h2').text($(newElem).find('.header h2').text());
		$(activeImage).find('.media img.large').attr('src',$(newElem).find('a.largeImage').attr('href'));
		$(activeImage).find('.content p').text($(newElem).find('p.largeDescription').text());
		$(activeImage).find('.linkContainer').html($(newElem).find('.linkContainer').html());
	},
	
	/*
	 * Funktion um zum vorherigen Image zu springen
	 */
	prevImage:function() {
		var newElem = $('ul#innerGallery li.active').prev();
		//wenn erstes Element springe zum letzten
		if($(newElem).text() === '')
			newElem = $('ul#innerGallery li:last');
		$('#innerGallery li.active').removeClass('active');
		$(newElem).addClass('active');		
		//neues Image, Heading, Description und Link holen und austauschen
		this.changeImage(newElem);
	},
	
	/*
	 * Funktion um zum nächsten Image zu springen
	 */
	nextImage:function() {
		var newElem = $('ul#innerGallery li.active').next();
		if($(newElem).text() === '')
			newElem = $('ul#innerGallery li:first');
		$('#innerGallery li.active').removeClass('active');
		$(newElem).addClass('active');
		//neues Image, Heading, Description und Link holen und austauschen
		this.changeImage(newElem);
	}	
	
}