/** Switcher
 *	
 *	Developped for Heal FashionLab
 *	Swith one thumb picture to the big one in collection element
 *	@author : Michel-Ange K. partikule, 2009
 *
 */


var Switcher = new Class({

	Implements: Options,

	options: {
		baseUrl:			'',
		container:	false,
		loader:				{'animate': ['loader-#.png', 12]},
		loaderContainer:	'main-image',
		loaderUrl:			'static/frontend/healfashionlab/images/spinner/white/',
	},

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

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

		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();

		// Feeds the thumbs array with the thumb A elements
		this.links.each(function(el,i)
		{
			if (el.get('tag') == 'img') {
				el = el.getParent();
			}
			// Feeds the thumb elements array
			var id = el.get('id').substring(1);
			this.thumbsArray[id] = el.clone(true, true);
			this.thumbsArray[id].fade('hide');
			
			this.thumbsArray[id].setStyles({
				'position':'absolute',
				'display':'block',
				'z-index':10,
				'top':0,
				'left':0

			});
			this.thumbsArray[id].addEvent('click', function(e)
			{
				var e = new Event(e).stop();
				
				var el = e.target;
	
				if (el.get('tag') == 'img') {
					el = el.getParent();
				}

				this.onThumbClick(el);
				
			}.bind(this));
			
		},this);


		// Set the links
		this.links.addEvent('click', function(e)
		{
			e.stop();
			e.stopPropagation();

			// Get A href
			var el = e.target;

			if (el.get('tag') == 'img') {
				el = el.getParent();
			}

			this.onThumbClick(el);


		}.bind(this));

	},

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

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

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

		// hides the current el
		el.fade('out');
		
		// inject in parent
		var thumb = el.getParent().getElement('a[id=t'+cid+']');
		
		if ( !thumb )
		{
			(this.thumbsArray[cid].clone(true,true)).inject(el.getParent());
			thumb = el.getParent().getElement('a[id=t'+cid+']');
			thumb.addEvent('click', function(e)
			{
				e.stop();
				e.stopPropagation();

				// Get A href
				var el = e.target;

				if (el.get('tag') == 'img') {
					el = el.getParent();
				}
				this.onThumbClick(el);
			}.bind(this));
			// (this.thumbsArray[cid]).inject(el.getParent());
		}
		
		// (this.thumbsArray[cid]).fade('in');
		thumb.fade('hide');
		thumb.fade('in');
		
		
		// Create img element if not in pictures array
		var pid = el.get('id').substring(1);
		if (!this.picturesArray.contains('p' + pid))
		{
			// 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.currentPicture.fade('out');
		e.fade('in');
		this.currentPicture = e;

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


	/** Show an already set big picture
	 */
	showPicture: function(id)
	{
		this.currentPicture.fade('out');
		$(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');
		
	}

});