/** Displayer
 *	
 *	Developped for Compi¸gne Equestre
 *	Display one picture big when thumb click 
 *	@author : Michel-Ange K. partikule, 2010
 *
 */


var Displayer = new Class({

	Implements: Options,

	options: {
		baseUrl:			'',
		container:	false,
		loader:				{'animate': ['loader-#.png', 12]},
		loaderContainer:	'main-image',
		loaderUrl:			'themes/lcp-united/assets/images/spinner/black/'
	},

	initialize: function(options)
	{
		this.setOptions(options);

		this.container  = $(this.options.container);
		this.thumbContainer  = $(this.options.thumbContainer);
		this.loaderContainer =	$(this.options.container);

		this.currentPicture = this.getCurrentPicture();
		this.links = this.getThumbLinks();
		
		this.picturesArray = new Array();		// Contains the pictures IDs
		this.thumbsArray = new Array();			// Contains the thumbs image elements
		
		// Loader init
		this._loader();

		// Set the links
		this.links.each(function(el,i)
		{
			el.addEvent('click', function(e)
			{
				e.stop();
				e.stopPropagation();
				this.onThumbClick(el);
			}.bind(this));
		}.bind(this));
	},


	onThumbClick: function(el)
	{
		var href =	el.get('href');

		var eid = (el.getProperty('id')).substring(1);

		// Current picture ID
		var cid = this.currentPicture.get('id').substring(1);

		// inject in parent
		var thumb = el.getParent().getElement('a[id=t'+cid+']');
		
		// Hides current picture
		this.currentPicture.fade('out');
		
		
		// Create img element if not in pictures array
		var pid = el.get('id').substring(1);
		if (!this.picturesArray.contains('p' + pid))
		{
			// Set loader position
			this.setLoaderPosition();

			// Show the spinner
			this.loaderContainer.retrieve('loader').fireEvent('show');
			var img = new Asset.image(href, {id:'p' + pid, title: el.get('title'), onload: this.setPicture.bind(this)});
		}
		else 
		{
			this.showPicture('p' + pid);
		}
	},


	/** Inject the picture into the container
	 */
	setPicture: function(e)
	{	
		e.fade('hide');
		e.setStyles({
			'position':'absolute',
			'z-index':10,
			'top':0,
			'left':0
		});
		e.inject(this.container);

		// Add to the pictures array
		this.picturesArray.push(e.get('id'));
		
		this.showPicture(e.get('id'));

		this.loaderContainer.retrieve('loader').fireEvent('hide');
	},


	setContainerSize: function(img)
	{
		// Get image size
		w = img.getDimensions().x;
		h = img.getDimensions().y;

		this.container.setStyles({
			'width': w + 'px',
			'height': h + 'px'
		});
		
	},

	setLoaderPosition: function()
	{
		var l = this.loaderContainer.retrieve('loader');	
		var x = (this.currentPicture.getDimensions().x / 2 ) - (l.getDimensions().x / 2);
		var y = (this.currentPicture.getDimensions().y / 2 ) - (l.getDimensions().y / 2);
				
		l.setStyles({
			'top': y,
			'margin-left': x + 'px'
		});
	},

	/** Show an already set big picture
	 */
	showPicture: function(id)
	{
//		this.currentPicture.fade('out');
		this.setContainerSize($(id));
		$(id).fade('in');
		this.currentPicture = $(id);
	},

	
	/** hides the loader
	 */
	hideLoader: function()
	{
		this.loaderContainer.retrieve('loader').fireEvent('hide');
	},
	

	/** Get the current big picture
	 */
	getCurrentPicture: function()
	{
		var p = this.container.getFirst('img');
		return p;
	},

	getCurrentPictureThumb: function()
	{
		return this.currentPicture.get('id');
	},


	/** Gets the thumb links array
	 */
	getThumbLinks: function()
	{
		var t = $$('#' + this.options.thumbContainer + ' a');
		return t;
	},


	/** Creates the loader spinner
	 */
	_loader: function(){
	
 		if (this.options.loader === true) 
 			this.options.loader = {};
		var loader = new Element('div', {
			'class': 'img-loader',				
			'morph': $merge(this.options.loader, {'link': 'cancel'})
		}).store('hidden', false).store('i', 1).inject(this.loaderContainer);
		
		if (this.options.loader.animate){
			for (var i = 0; i < this.options.loader.animate[1]; i++)
				img = new Asset.image(this.options.baseUrl + this.options.loaderUrl + this.options.loader.animate[0].replace(/#/, i));
			if (Browser.Engine.trident && this.options.loader.animate[0].contains('png'))
				loader.setStyle('background-image', 'none');					
		}
		loader.set('events', {
			'animate': function(){  
				var loader = this.loaderContainer.retrieve('loader');				
				var i = (loader.retrieve('i').toInt() + 1) % this.options.loader.animate[1];
				loader.store('i', i);
				var img = this.options.baseUrl + this.options.loaderUrl + this.options.loader.animate[0].replace(/#/, i);
				if (Browser.Engine.trident && this.options.loader.animate[0].contains('png'))
					loader.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img + '", sizingMethod="scale")';
				else 
					loader.setStyle('background-image', 'url(' + img + ')');
			}.bind(this),
			'hide': function(){  
				var loader = this.loaderContainer.retrieve('loader');
				if (!loader.retrieve('hidden')){
					// loader.store('hidden', true).morph('loader-hidden');
					loader.store('hidden', true).fade('out');
					if (this.options.loader.animate)
						$clear(loader.retrieve('timer'));					
				}
			}.bind(this),
			'show': function(){  
				var loader = this.loaderContainer.retrieve('loader');
				if (loader.retrieve('hidden')){
					// loader.store('hidden', false).morph('loader-visible');
					loader.store('hidden', false).fade('in');
					if (this.options.loader.animate)
						loader.store('timer', function(){this.fireEvent('animate');}.periodical(50, loader));
				}
			}.bind(this)
		});
		this.loaderContainer.retrieve('loader', loader).fireEvent('hide');
		
	}

});