/**
 * Thumbnail switching script
 * Customised for crest with zoom
 * @author Kevin Dew <kev@dewsolutions.co.uk>
 * @copyright Copyright Kevin Dew, 2008
 */ 
var SwitchImage = 
{
	zoomedIn: false,
	cancelZoom: false,
	cancelImage: false,
	smallImage: false,
	bigImage: false,
	zoomFx: false,
	loadingZoom: false,
	dragBig: false,
	init: function()
	{	
		if(!$('imageSwitch') || !$E('#imageSwitch img'))
			return;
		
		this.currentImage = $E('#imageSwitch img').id.substring(6,7);

		$each($$('#furtherImages .image .isThumbnails'), function(el)
		{
			el.addEvent('click', this.click.bindWithEvent(this, el));
		}, this);
		
		if($('zoomLink'))
		{
			$E('#imageSwitch img').addEvent('click', this.zoomClick.bindWithEvent(this));
			$E('#imageSwitch img').addClass('zoomedOut');
			$('zoomLink').addEvent('click', this.zoomClick.bindWithEvent(this));
		}
		
		return;
	
	},
	click: function(e, el)
	{
		if((typeof images == 'undefined') || (typeof zoomImages == 'undefined') || !$E('img', el))
			return;			
		
		this.cancelImage = false;
		this.cancelZoom = true;
		
		//get id of clicked image
		var clickedImage = el.id.substring(6,7);
		
		if(clickedImage != this.currentImage)
		{
			if(clickedImage > images.length)
				return;

			this.newImg = new Asset.image(images[clickedImage - 1],
						      {
							onload: function()
							{
								if(this.cancelImage)
									return;
								
								this.cancelZoom = true;
								
								if($('zoomedImage'))
									this.oldImg = $('zoomedImage');
								else
									this.oldImg = $E('img', 'imageSwitch');
									
								new Fx.Style(this.oldImg, 'opacity', {duration: 250, onComplete:this.showNewImage.bind(this)}).start(1,0);
								
								return;
							}.bind(this)
						      });
			
			this.currentImage = clickedImage;
		}
	
		new Event(e).stop();
		
		return;		
	},
	/*hideOldImage: function()
	{
		if(this.cancelImage)
			return;
		
		this.cancelZoom = true;
		
		if($('zoomedImage'))
			this.oldImg = $('zoomedImage');
		else
			this.oldImg = $E('img', 'imageSwitch');
			
		new Fx.Style(this.oldImg, 'opacity', {duration: 250, onComplete:this.showNewImage.bind(this)}).start(1,0);
		
		return;
	}*/
	showNewImage: function()
	{
		this.clearZoom();
		
		this.oldImg = $E('img', 'imageSwitch');
		var alt = this.oldImg.getProperty('alt');
		var currentClass = this.oldImg.getProperty('class');
		this.newImgEl = new Element('img', {'alt': alt, 'src': this.newImg.src, 'class': currentClass, 'id': 'image_'+this.currentImage});		
		var newFx = new Fx.Style(this.newImgEl, 'opacity', {duration: 250}).hide();
		this.oldImg.replaceWith(this.newImgEl);
		this.newImgEl.addEvent('click', this.zoomClick.bindWithEvent(this));
		newFx.start(0,1);
		
		//change active image
		$each($$('#furtherImages .image .active'), function(el)
		{
			el.removeClass('active');
		});		
		
		if($('thumb_' + this.currentImage))
			$('thumb_' + this.currentImage).addClass('active');
			
		//change zoom link
		if($('zoomLink'))
			$('zoomLink').setProperty('href', zoomImages[this.currentImage - 1]);
	},
	zoomClick:function(e)
	{
		//this function should handle setting up a zoom or removing one

		this.cancelImage = true;
		this.cancelZoom = false;
		if(this.zoomFx)
			this.zoomFx.stop();
		
		//this.zoomFx = false;
	
		if(this.zoomedIn)
		{
			this.removeZoom(true);
			new Event(e).stop();
			return;
		}

		if(this.loadingZoom)
		{
			new Event(e).stop();
			return;
		}

		//sanity check
		if(!$E('#imageSwitch img.zoomedOut') && !$E('#imageSwitch img.zoomedIn'))
			return;
		
		this.smallImage = ($E('#imageSwitch img.zoomedOut')) ? $E('#imageSwitch img.zoomedOut') : $E('#imageSwitch img.zoomedIn');
		
		$('imageSwitch').setStyles({'width':this.smallImage.width, 'height':this.smallImage.height}).addClass('zoom');
		
		if(this.bigImage)
		{		
			this.smallImage.removeClass('zoomedOut');
			
			var startWidth = this.bigImage.hasClass('on') ? this.bigImage.width : this.smallImage.width;
			var startHeight = this.bigImage.hasClass('on') ? this.bigImage.height : this.smallImage.height;
			var startLeft = this.bigImage.hasClass('on') ? this.bigImage.getStyle('left') : 0;
			var startTop = this.bigImage.hasClass('on') ? this.bigImage.getStyle('top') : 0;
			
			
			this.bigImage.setStyles({width: startWidth, height: startHeight});
			
			this.smallImage.addClass('zoomedIn');
			this.bigImage.removeClass('off');		
			this.bigImage.addClass('on');
			this.toggleZoomLink(true);
			this.zoomedIn = true;
			
			this.zoomFx = new Fx.Styles(this.bigImage,
						    {duration: (this.bigImageWidth - startWidth) / 2,
						     transition: Fx.Transitions.linear,
						     onComplete: function()
							         {
									this.DragBig = new Drag.Base('zoomedImage',
								        {
										grid:1,
										limit: {x:[-(this.bigImage.width - this.smallImage.width), 0], y:[-(this.bigImage.height - this.smallImage.height), 0]},
										onDrag: this.updateDrag.bind(this)
								        });
						  
									this.bigImage.addEvent('dblclick', this.zoomClick.bindWithEvent(this));
						     
							        }.bind(this)				      
						     }).start({'height': [startHeight, this.bigImageHeight],'width': [startWidth, this.bigImageWidth], 'left':[startLeft, this.bigImageLeft], top:[startTop, this.bigImageTop]});			
		}
		else
		{			
			this.zoomFx = new Fx.Style($E('#imageSwitch img.zoomedOut'), 'opacity', {duration: 75}).start(1,0.5);
			
			new Element('div', {'id':'zoomLoading'}).injectInside('imageSwitch');			
			
			this.bigImage = new Asset.image( $('zoomLink').getProperty('href'),
			{
				'id':'zoomedImage',
				'class':'on',
				'onload': function()
				{
					this.loadingZoom = false;
					
					if(this.cancelZoom)
						return;
							
					//kill loading div
					if($('zoomLoading'))
						$('zoomLoading').remove();
					
					this.smallImage.removeClass('zoomedOut');
					this.zoomFx.stop();	
					this.smallImage.setOpacity(1);
					this.smallImage.addClass('zoomedIn');
					
					this.bigImage.setStyles({width: 'auto', height: 'auto'});
					
					this.bigImageWidth = this.bigImage.width;
					this.bigImageHeight = this.bigImage.height;
					
					this.bigImageLeft = -(((this.bigImageWidth - this.smallImage.width) / 2));
					this.bigImageTop = -((this.bigImageHeight - this.smallImage.height) / 2);					
					
					this.bigImage.setStyles({width: this.smallImage.width, height: this.smallImage.height});
					
					this.bigImage.inject($('imageSwitch'));
					
					this.zoomedIn = true;		
					this.toggleZoomLink(true);

					this.zoomFx = new Fx.Styles(this.bigImage,
								   {duration: (this.bigImageWidth - this.smallImage.width) / 2,
								   transition: Fx.Transitions.linear,
								   onComplete: function()
									        {
											this.DragBig = new Drag.Base('zoomedImage',
											{
												grid:1,
												limit: {x:[-(this.bigImage.width - this.smallImage.width), 0], y:[-(this.bigImage.height - this.smallImage.height), 0]},
												onDrag: this.updateDrag.bind(this)
											});
									     
											this.bigImage.addEvent('dblclick', this.zoomClick.bindWithEvent(this));
										
										}.bind(this)
							    }).start({'height': [this.smallImage.height, this.bigImageHeight],'width': [this.smallImage.width, this.bigImageWidth], 'left':[0, this.bigImageLeft], top:[0, this.bigImageTop]});
				}.bind(this)
			});
			this.loadingZoom = true;
		}			
		
		new Event(e).stop();
		
		return;
	},
	removeZoom: function(effect)
	{
		if(this.zoomFx)
			this.zoomFx.stop();
		
		this.zoomFx = false;
		this.dragBig = false;
		
		if(effect && this.bigImage)
		{			
			this.zoomFx = new Fx.Styles(this.bigImage,
						    {duration: (this.bigImage.width - this.smallImage.width) / 2,
						    transition: Fx.Transitions.linear,
						    onComplete: function()
								{
									this.removeZoom(false);
								}.bind(this)
						    }).start({'height': [this.bigImage.height, this.smallImage.height],'width': [this.bigImage.width, this.smallImage.width], 'left':[this.bigImage.getStyle('left'), 0], top:[this.bigImage.getStyle('top'), 0]});			
		}
		else
		{
			if($('zoomedImage'))
			{
				$('zoomedImage').removeClass('on');
				$('zoomedImage').addClass('off');
				
				if(this.smallImage)
				{
					this.smallImage.removeClass('zoomedIn');
					this.smallImage.addClass('zoomedOut');
				}
			}
		}
		
		this.zoomedIn = false;
		this.toggleZoomLink(false);
	},
	clearZoom: function()
	{
		this.removeZoom(false);
		
		if($('zoomLoading'))
			$('zoomLoading').remove();
		if($('zoomedImage'))
			$('zoomedImage').remove();
		this.bigImage = false;
		this.loadingZoom = false;
	},
	toggleZoomLink: function(on)
	{
		if(!$('zoomLink'))
			return;
		
		if(on)
		{
			$('zoomLink').setText('Zoom Out');
		}
		else
		{
			$('zoomLink').setText('Zoom In');
		}
	},
	updateDrag: function()
	{
		if(this.bigImage)
		{
			this.bigImageLeft = this.bigImage.getStyle('left');
			this.bigImageTop = this.bigImage.getStyle('top');			
		}
	}
}

window.addEvent('domready', SwitchImage.init.bind(SwitchImage));