var mbx_pagegallery_tmgs = new Class(
/**
 *	@class
 *  @augments mbx_pagegallery
 *	@requires Mootools 1.2
 *	@description extends mbx_pagegallery to provide a more specific gallery
 *	@lends mbx_pagegallery_tmgs
 *	@property {object} options implements Mootools.Options
 */
{
	Extends: mbx_pagegallery,

	options: {
		'displayCount': null,
		'prevSelector' : null,
		'nextSelector' : null,
		'itemSelector' : null,
		'tyTopic' : null,
		'dataUrl' : null,
		'galleryImgSelector' : null,
		'metaLinkDetailSelector' : null,
		'effectFadeDuration' : null
	},
	
	/**
	 *	@constructs
	 *	@param {object} p_options 
	 *  @augments mbx_pagegallery
	 */
	initialize : function(p_options)
	{
		this.parent(p_options);
	},

	/**
	 *	prepares the data and sets up the respective dom-elements
	 *  @augments mbx_pagegallery
	 *	@return {bool}
	 */
	prepareData : function()
	{
		var galleryItems = this.getData();
		if(galleryItems[0] == "true")
		{
			return false;
		}

		//get all the data into the html
		var container = $(this.options['galleryImgSelector']).getParent();
		$(this.options['galleryImgSelector']).dispose();
		
		var tmpOpacity = 0;
		for(i in galleryItems)
		{
			galleryItem = galleryItems[i].imageId;
			galleryLink = galleryItems[i].detailLink;
			galleryCaption = galleryItems[i].caption;
			if($type(galleryItem) == 'string')
			{
				tmpOpacity = 0;
				if(i == this.getCurrentIndex())
				{
					tmpOpacity = 1;
				}
				
				galleryDiv = new Element('div', {
					'id' : this.options['galleryImgSelector'] + '_' + i,
					'class' : 'pagegallery_div'
				} ).setStyles({'opacity' : tmpOpacity, 'position' : 'absolute', 'z-index' : 0});
				container.adopt( galleryDiv );
				galleryDiv.adopt( new Element('span', {
							'class' : 'pagegallery_caption',
							'html': galleryCaption
				}) );
				galleryDiv.adopt(
					new Element('img', {
					'src' : '/tycon/pic.php?imgid=' + galleryItem + '&width=675&height=325&resizemode=fill',
					'alt' : galleryCaption,
					'title' : galleryCaption
				})); //.setStyles({'opacity' : tmpOpacity, 'position' : 'absolute', 'z-index' : 0})
			}	
		}
		
		//retrieving the metadata for the first element
		$(this.options['metaLinkDetailSelector']).setStyle('color','#aaa');
		
		var galRequest = new Request({
			'url' : '/lib/ajax/getCurrentPageGalleryObj.php',
			'method' : 'get'
		});
		
		galRequest.addEvent('success', function(p_data) {
			metadata = p_data.split(',');

			//updating the img-src and details-link
			var data = this.getData();
			
			$(this.options['metaLinkDetailSelector']).set('href', metadata[0]);
			$(this.options['metaLinkDetailSelector']).setStyle('color','#fff');
		}.bind(this));
		
		galRequest.send('pageGalleryId=' + this.getCurrentIndex() + '&tyTopic=' + this.options['tyTopic']);
		
		return true;
	},
	
	/**
	 *	updates the gallery-specific dom-elements
	 *  @augments mbx_pagegallery
	 *	@param {int} p_oldIndex
	 */
	update : function(p_oldIndex)
	{
		//update the image and its metadata
		var newIndex = this.getCurrentIndex();
		
		$(this.options['metaLinkDetailSelector']).setStyle('color','#aaa');
		
		var galRequest = new Request({
			'url' : '/lib/ajax/getCurrentPageGalleryObj.php',
			'method' : 'get'
		});
		
		galRequest.addEvent('success', function(p_data) {
			metadata = p_data.split(',');

			//updating the img-src and details-link
			var data = this.getData();
			
			//fade out old image
			new Fx.Tween($(this.options['galleryImgSelector'] + '_' + p_oldIndex), {'duration' : this.options['effectFadeDuration']}).start('opacity', 1, 0);
			
			//fade in current image
			new Fx.Tween($(this.options['galleryImgSelector'] + '_' + newIndex), {'duration' : this.options['effectFadeDuration']}).start('opacity', 0, 1);
			
			$(this.options['metaLinkDetailSelector']).set('href', metadata[0]);
			$(this.options['metaLinkDetailSelector']).setStyle('color','#fff');
		}.bind(this));
		
		galRequest.send('pageGalleryId=' + newIndex + '&tyTopic=' + this.options['tyTopic']);
		
		this.updateNav();
	},
	
	/**
	 *	updates the navigation-elements
	 */
	updateNav : function()
	{
		//updating the gallery navi
		var startDisplayAt = 0;
		if(this.getCurrentIndex() >= this.options['displayCount'])
		{
			startDisplayAt	= this.getCurrentIndex() - (this.options['displayCount'] -1);
		}
		var endDisplayAt = startDisplayAt + (this.options['displayCount'] -1);
		
		var galleryItems = $$('.pageGalleryItem')
		
		for(i in galleryItems)
		{
			if($type(galleryItems[i]) == 'element')
			{
				galleryItem = galleryItems[i];
				imgElem = galleryItem.getElement('img');
				
				if(i >= startDisplayAt && i <= endDisplayAt)
				{
					galleryItem.getParent().setStyle('display', 'block');
				}
				else
				{
					galleryItem.getParent().setStyle('display', 'none');
				}
				
				if(i == this.getCurrentIndex())
				{
					imgElem.setStyle('opacity', 0.45);
				}
				else
				{
					imgElem.setStyle('opacity', 1);
				}
			}
		}
	
	}
});