var WMX = WMX || { };

WMX.EvoxGallery = Class.create({
	initialize: function(vehicleArray, parentDiv)
	{
		//Initialize variables //
		if (vehicleArray && parentDiv && vehicleArray.length > 0)
		{		
			this.fixArray(vehicleArray);
			
			for (i=0; i<=vehicleArray.length - 1; i++)
			{
				this.fixArray(vehicleArray[i].NormalPath);
				
				if (vehicleArray[i].ZoomPath)
				{
					this.fixArray(vehicleArray[i].ZoomPath);
				}				
			}

			if (vehicleArray.length == 0)
			{
				return;
			}

			this.vehicles = vehicleArray;
			this.parentContainer = $(parentDiv);
			this.finishValidator = 2;
			this.finishZoomValidator = 2;
			this.checkForMinis = 0;
			
			if ($('zoomedEvoxGalleryWrapper'))
			{
				this.checkForMinis = 1;
				$('zoomedEvoxGalleryWrapper').hide();
				Event.observe(window, 'load', this.moveZoom.bind(this));
			}
			
			if ($('vehicleListWrapper'))
			{
				this.fillDropDown(this.vehicles, 'vehicleListWrapper');
				this.fillDropDown(this.vehicles, 'zoomVehicleListWrapper');
				$('vehicleListWrapper').hide();
				$('zoomVehicleListWrapper').hide();
			}
			
			this.currentVehicle = 0;
			this.currentAngle = 0;
			
			//Add Events for image clicks //
			if ($('zoomedEvoxGalleryWrapper'))
			{
				this.zoomedImagesExist = true;
				$('previousVehicleLink').observe('click', this.previousVehicle.bind(this));
				$('zoomPreviousVehicleLink').observe('click', this.previousVehicle.bind(this));
				$('zoomNextVehicleLink').observe('click', this.nextVehicle.bind(this));
				$('zoomRotateLeftLink').observe('click', this.previousAngle.bind(this));
				$('zoomRotateRightLink').observe('click', this.nextAngle.bind(this));
				$('zoomButton').observe('click', this.showHideZoomElement.bind(this));
				$('closeButton').observe('click', this.showHideZoomElement.bind(this));
				$('chooseButton').observe('click', this.showHideList.bind(this, 'vehicleListWrapper'));
				$('zoomChooseButton').observe('click', this.showHideList.bind(this, 'zoomVehicleListWrapper'));
			}
			
			//Load first Image //
			this.changeImage(this.currentVehicle, this.currentAngle);
		   			
			$('nextVehicleLink').observe('click', this.nextVehicle.bind(this));
			$('rotateLeftLink').observe('click', this.previousAngle.bind(this));
			$('rotateRightLink').observe('click', this.nextAngle.bind(this));
		}
	},
	fixArray: function (a)
	{
		if (!a[a.length - 1])
		{
			a.pop();
		}
	},
	fillDropDown: function(vehicles, ele)
	{
		for (i=0, j=vehicles.length; i < j; i++)
		{
			var newElement = new Element('a').addClassName('modelSpan').update(vehicles[i].Descriptor).observe('click', this.changeVehicle.bind(this, i));
			newElement.href = '#';
			$(ele).insert(newElement);
		} 
	},
	moveZoom: function(e)
	{
		$$('body')[0].insert($('zoomedEvoxGalleryWrapper'));
		this.insertIFrame(this);
	},
	insertIFrame: function(e)
	{
		if (Prototype.Browser.IE)
		{
			var newFrame = new Element('iframe').addClassName('evoxFrameWrapper').setStyle({position: 'absolute', display: 'none', top: 0, left: 0, height: '100%', width: '100%'});
			$$('body')[0].insert(newFrame);
		}
	},
	showHideZoomElement: function(e)
	{
		e.stop();
		this.hideList(this);
		if ($('zoomedEvoxGalleryWrapper').className == 'evoxZoom_hidden')
		{
			$('zoomedEvoxGalleryWrapper').show();
			$('zoomedEvoxGalleryWrapper').className = 'evoxZoom_visible';
			
			if (Prototype.Browser.IE)
			{
				$$('html')[0].setStyle({ overflow: 'hidden'	});
			}
			
			if (Prototype.Browser.IE)
			{
				this.checkBodyOffset(this);
			}
			
			if($$('.evoxFrameWrapper')[0])
			{
				$$('.evoxFrameWrapper')[0].show();
			}
		}
		else
		{
			$('zoomedEvoxGalleryWrapper').hide();
			$('zoomedEvoxGalleryWrapper').className = 'evoxZoom_hidden';
			
			if (Prototype.Browser.IE)
			{
				$$('html')[0].setStyle({ overflow: 'auto' });
			}
			
			if($$('.evoxFrameWrapper')[0])
			{
				$$('.evoxFrameWrapper')[0].hide();
			}
		}
	},
	checkBodyOffset: function(e)
	{
		var bodyEleOffset = $$('body')[0].cumulativeScrollOffset();
		
		$('zoomedEvoxGalleryWrapper').setStyle({
			top: bodyEleOffset[1] + 'px'
		});
		$$('.evoxFrameWrapper')[0].setStyle({
			top: bodyEleOffset[1] + 'px'
		});
	},
	showHideList: function(wrapperName, e)
	{
		e.stop();
		if ($(wrapperName).className == 'vehicleList_hidden')
		{
			$(wrapperName).appear({
					queue: { scope: this.parentContainer.identify() },
					duration: 0.5
				});
			$(wrapperName).className = 'vehicleList_visible';
		}
		else
		{
			$(wrapperName).fade({
					queue: { scope: this.parentContainer.identify() },
					duration: 0.5
				});
			$(wrapperName).className = 'vehicleList_hidden';
		}
	},
	hideList: function(e)
	{
		if ($('vehicleListWrapper').className == 'vehicleList_visible')
		{
			$('vehicleListWrapper').fade({
						duration: 0.25
					});
			$('vehicleListWrapper').className = 'vehicleList_hidden';
		}
		if ($('zoomVehicleListWrapper').className == 'vehicleList_visible')
		{
			$('zoomVehicleListWrapper').fade({
						duration: 0.25
					});
			$('zoomVehicleListWrapper').className = 'vehicleList_hidden';
		}
	},
	checkToHideList: function(e)
	{
		if ($('vehicleListWrapper'))
		{
			this.hideList(e);
		}
	},
	preloadImages: function(vehicleIndex, imageIndex)
	{
		var nextVehicleIndex = (vehicleIndex == (this.vehicles.length - 1)) ? 0 : vehicleIndex + 1;
		var previousVehicleIndex = (vehicleIndex == 0) ? (this.vehicles.length - 1) : vehicleIndex - 1;
		var nextImageIndex = (imageIndex == (this.vehicles[vehicleIndex].NormalPath.length - 1)) ? 0 : imageIndex + 1;
		var previousImageIndex = (imageIndex == 0) ? (this.vehicles[vehicleIndex].NormalPath.length - 1) : imageIndex - 1;

		if (!this.vehicles[vehicleIndex].NormalImages[imageIndex])
		{
			var img = new Element('img', { src: this.vehicles[vehicleIndex].NormalPath[imageIndex] });
			this.vehicles[vehicleIndex].NormalImages[imageIndex] = $(img);
		}
		
		if (!this.vehicles[vehicleIndex].NormalImages[nextImageIndex])
		{
			var img = new Element('img', { src: this.vehicles[vehicleIndex].NormalPath[nextImageIndex] });
			this.vehicles[vehicleIndex].NormalImages[nextImageIndex] = $(img);
		}
				
		if (!this.vehicles[vehicleIndex].NormalImages[previousImageIndex])
		{
			var img = new Element('img', { src: this.vehicles[vehicleIndex].NormalPath[previousImageIndex] });
			this.vehicles[vehicleIndex].NormalImages[previousImageIndex] = $(img);
		}
		
		if (!this.vehicles[nextVehicleIndex].NormalImages[imageIndex])
		{
			var img = new Element('img', { src: this.vehicles[nextVehicleIndex].NormalPath[imageIndex] });
			this.vehicles[nextVehicleIndex].NormalImages[imageIndex] = $(img);
		}
		
		if (!this.vehicles[previousVehicleIndex].NormalImages[imageIndex])
		{
			var img = new Element('img', { src: this.vehicles[previousVehicleIndex].NormalPath[imageIndex] });
			this.vehicles[previousVehicleIndex].NormalImages[imageIndex] = $(img);
		}
		if (this.vehicles[vehicleIndex].ZoomImages && this.vehicles[vehicleIndex].ZoomPath)
		{
			if (!this.vehicles[vehicleIndex].ZoomImages[imageIndex])
			{
				var img = new Element('img', { src: this.vehicles[vehicleIndex].ZoomPath[imageIndex] });
				this.vehicles[vehicleIndex].ZoomImages[imageIndex] = $(img);
			}
			
			if (!this.vehicles[vehicleIndex].ZoomImages[nextImageIndex])
			{
				var img = new Element('img', { src: this.vehicles[vehicleIndex].ZoomPath[nextImageIndex] });
				this.vehicles[vehicleIndex].ZoomImages[nextImageIndex] = $(img);
			}
			
			if (!this.vehicles[vehicleIndex].ZoomImages[previousImageIndex])
			{
				var img = new Element('img', { src: this.vehicles[vehicleIndex].ZoomPath[previousImageIndex] });
				this.vehicles[vehicleIndex].ZoomImages[previousImageIndex] = $(img);
			}
			
			if (!this.vehicles[nextVehicleIndex].ZoomImages[imageIndex])
			{
				var img = new Element('img', { src: this.vehicles[nextVehicleIndex].ZoomPath[imageIndex] });
				this.vehicles[nextVehicleIndex].ZoomImages[imageIndex] = $(img);
			}
			
			if (!this.vehicles[previousVehicleIndex].ZoomImages[imageIndex])
			{
				var img = new Element('img', { src: this.vehicles[previousVehicleIndex].ZoomPath[imageIndex] });
				this.vehicles[previousVehicleIndex].ZoomImages[imageIndex] = $(img);
			}
		}
	},
	changeImage: function(vehicleIndex, imageIndex)
	{
		vehicleIndex = (vehicleIndex >= this.vehicles.length) ? 0 : vehicleIndex;
		vehicleIndex = (vehicleIndex < 0) ? (this.vehicles.length - 1) : vehicleIndex;
		imageIndex = (imageIndex >= this.vehicles[vehicleIndex].NormalPath.length) ? 0 : imageIndex;
		imageIndex = (imageIndex < 0) ? (this.vehicles[vehicleIndex].NormalPath.length - 1) : imageIndex;
		
		if(this.checkForMinis == 0)
		{		
			if (!this.currentImage)
			{
				this.currentImage = new Element('img');
				this.currentImage.src = this.vehicles[vehicleIndex].NormalPath[imageIndex];
				this.parentContainer.insert($(this.currentImage));

				this.currentVehicle = vehicleIndex;
				this.currentAngle = imageIndex;
				
				this.preloadImages(vehicleIndex, imageIndex);
			}		
			else
			{
				if (this.vehicles[vehicleIndex].NormalImages[imageIndex])
				{
					this.changeStandardImage(vehicleIndex, imageIndex);
				}
				if(this.newimg.complete && this.finishValidator == 2)
				{
					this.changeZoomImage(vehicleIndex, imageIndex);
				}
			}
		}
		else if (this.checkForMinis == 1)
		{		
			this.changeStandardImage(vehicleIndex, imageIndex);
		}
	},
	changeStandardImage: function(vehicleIndex, imageIndex)
	{
		if (!this.currentImage)
		{
			this.currentImage = new Element('img');
			this.currentImage.src = this.vehicles[vehicleIndex].NormalPath[imageIndex];
			this.parentContainer.insert($(this.currentImage));

			this.currentVehicle = vehicleIndex;
			this.currentAngle = imageIndex;
			
			this.changeZoomImage(vehicleIndex, imageIndex);
		}
		else
		{
			this.preloadImages(vehicleIndex, imageIndex);
			if (this.imageWaiter)
			{
				this.imageWaiter.stop();
				this.imageWaiter = null;
			}

			if (this.vehicles[vehicleIndex].NormalImages[imageIndex])
			{
				this.newimg = this.vehicles[vehicleIndex].NormalImages[imageIndex];
			}
			
			if (this.newimg.complete && this.finishValidator == 2)
			{
				this.finishValidator = 0;
				Effect.Queues.get(this.parentContainer.identify()).each(function(e) { e.cancel(); });

				this.newimg.hide();
				this.parentContainer.insert(this.newimg);
				
				if (Prototype.Browser.IE)
				{
					this.newimg.show();
					this.currentImage.remove();
					this.finishValidator++;
					this.finishValidator++;
				}
				else
				{
					new Effect.Parallel([
						new Effect.Appear($(this.newimg), { sync: true }),
						new Effect.Fade($(this.currentImage), { sync: true })
						], {
						duration: 0.3, 
						afterFinish: this.afterChangeFinish.bind(this, this.currentImage)
					});
				}
				
				this.currentImage = this.newimg;
				this.currentVehicle = vehicleIndex;
				this.currentAngle = imageIndex;
				this.changeZoomImage(vehicleIndex, imageIndex);
				this.preloadImages(vehicleIndex, imageIndex);
			}
			else
			{
				this.imageWaiter = new PeriodicalExecuter(this.changeStandardImage.bind(this, vehicleIndex, imageIndex), 0.2);
			}
		}
	},
	changeZoomImage: function(vehicleIndex, imageIndex)
	{
		if (this.zoomedImagesExist)
		{
			if (!this.currentZoomImage)
			{
				this.currentZoomImage = new Element('img');
				this.currentZoomImage.src = this.vehicles[vehicleIndex].ZoomPath[imageIndex];
				$('evoxGalleryZoomedVehicle').insert($(this.currentZoomImage));
				
				this.preloadImages(vehicleIndex, imageIndex);
			}
			else
			{
				if (this.imageWaiterZoom)
				{
					this.imageWaiterZoom.stop();
					this.imageWaiterZoom = null;
				}
							
				if(this.vehicles[vehicleIndex].ZoomImages[imageIndex])
				{
					this.newimgZoomed = this.vehicles[vehicleIndex].ZoomImages[imageIndex];
				}
							
				if (this.newimgZoomed.complete && this.finishZoomValidator == 2)
				{
					this.finishZoomValidator = 0;
					Effect.Queues.get($('evoxGalleryZoomedVehicle').identify()).each(function(e) { e.cancel(); });

					this.newimgZoomed.hide();
					$('evoxGalleryZoomedVehicle').insert(this.newimgZoomed);

					if (Prototype.Browser.IE)
					{
						this.newimgZoomed.show();
						this.currentZoomImage.remove();
						this.finishZoomValidator++;
						this.finishZoomValidator++;
					}
					else
					{
						new Effect.Parallel([
							new Effect.Appear($(this.newimgZoomed), { sync: true }),
							new Effect.Fade($(this.currentZoomImage), { sync: true })
							], {
							duration: 0.3, 
							afterFinish: this.afterZoomChangeFinish.bind(this, this.currentZoomImage)
						});
					}
					
					this.currentZoomImage = this.newimgZoomed;
					//this.preloadImages(vehicleIndex, imageIndex);
				}		
				else
				{
					this.imageWaiterZoom = new PeriodicalExecuter(this.changeZoomImage.bind(this, vehicleIndex, imageIndex), 0.2);
				}
			}
		}
	},
	afterChangeFinish: function(element)
	{
		$(element).remove();
		this.finishValidator = 2;
	},
	afterZoomChangeFinish: function(element)
	{
		$(element).remove();
		this.finishZoomValidator = 2;
	},
	changeVehicle: function(vehicleIndex, e)
	{
		e.stop();
		this.preloadImages(vehicleIndex, this.currentAngle);
		this.checkToHideList(this);
		if (this.currentVehicle == vehicleIndex)
		{
			return;
		}
		else
		{
			this.changeImage(vehicleIndex, this.currentAngle);
		}
	},
	nextVehicle: function(e)
	{
		e.stop();
		this.checkToHideList(this);
		this.changeImage(this.currentVehicle + 1, this.currentAngle);
	},
	previousVehicle: function(e)
	{
		e.stop();
		this.checkToHideList(this);
		this.changeImage(this.currentVehicle - 1, this.currentAngle);
	},
	previousAngle: function(e)
	{
		e.stop();
		this.checkToHideList(this);
		this.changeImage(this.currentVehicle, this.currentAngle - 1);
	},
	nextAngle: function(e)
	{
		e.stop();
		this.checkToHideList(this);
		this.changeImage(this.currentVehicle, this.currentAngle + 1);
	}
});