var WMX = WMX || { };

WMX.EvoxGallery3 = Class.create({
	initialize: function(vehicleArray, linkArray, 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.links = linkArray;
			this.parentContainer = $(parentDiv);
			this.finishZoomValidator = 2;
			
			this.currentVehicle = 1;
			this.currentAngle = 1;
			
			this.leftOffset = 0;
			
			this.insertVehicles(this);
			this.changeInfo(this.currentVehicle, this);
			
			//Load first Zoom Image //
			this.changeImage(this.currentVehicle, this.currentAngle);
			
			//Bind Events to Click //			
			
			$('nextVehicleLink').observe('click', this.slideVehicleRight.bind(this));
			$('previousVehicleLink').observe('click', this.slideVehicleLeft.bind(this));
			
			if ($('vehicleListWrapper'))
			{
				this.fillDropDown(this.vehicles, 'vehicleListWrapper');
				$('vehicleListWrapper').hide();
			}
			
			$('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));
						
			$('chooseButton').observe('click', this.showHideList.bind(this, 'vehicleListWrapper'));
		}			
	},
	fixArray: function(a)
	{
		if (!a[a.length - 1])
		{
			a.pop();
		}
	},
	insertVehicles: function(e)
	{
		for(var i = 0; i<=this.vehicles.length - 1; i++)
		{
			
			var img = new Element('img');
			img.src = this.vehicles[i].NormalPath[this.currentAngle];
			this.parentContainer.insert(img);
			
			img.setStyle({left: this.leftOffset + 'px'});
			
			this.leftOffset += 515;
		}
	},
	fillDropDown: function(vehicles, ele)
	{
		for (i=0; i<=vehicles.length - 1; i++)
		{
			var newElement = new Element('a').addClassName('modelSpan').update(vehicles[i].Make + ' ' + vehicles[i].Model).observe('click', this.changeFrontVehicle.bind(this, i));
			newElement.href = '#';
			$(ele).insert(newElement);
		} 
	},
	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';
		}
	},
	checkToHideList: function(e)
	{
		if ($('vehicleListWrapper'))
		{
			this.hideList(e);
		}
	},
	slideVehicle: function(e, offset)
	{
		new Effect.Move(this.parentContainer, {x: offset, y: 0, queue: {position: 'end', scope: 'wmxEvoxGallery3'} });
	},
	slideVehicleRight: function(e)
	{
		e.stop();	
		this.slideToVehicle(this.currentVehicle + 1, this);
	},
	slideVehicleLeft: function(e)
	{
		e.stop();
		this.slideToVehicle(this.currentVehicle - 1, this);
	},
	changeFrontVehicle: function(vehicleIndex, e)
	{
		e.stop();
		this.slideToVehicle(vehicleIndex, this);
		this.checkToHideList(this);
	},
	slideToVehicle: function(vehicleIndex, e)
	{		
		vehicleIndex = (vehicleIndex >= this.vehicles.length) ? 0 : vehicleIndex;
		vehicleIndex = (vehicleIndex < 0) ? (this.vehicles.length - 1) : vehicleIndex;
		
		var offset = (vehicleIndex - this.currentVehicle);
		
		this.currentVehicle = vehicleIndex;
		this.preloadImages(vehicleIndex, 1);
		
		if(offset == 0)
		{
			return;
		}
		else
		{
			var amountSlide = offset * -515;
			this.slideVehicle(this, amountSlide);
			this.changeInfo(this.currentVehicle, this);
			this.changeImage(vehicleIndex, this.currentAngle);
		}
	},
	changeInfo: function(vehicleIndex, e)
	{
		var evoxMakeModel = this.vehicles[vehicleIndex].Make + ' ' + this.vehicles[vehicleIndex].Model;
		var evoxMake = this.vehicles[vehicleIndex].Make;
		var evoxMakeId = this.vehicles[vehicleIndex].MakeId;
		var evoxModel = this.vehicles[vehicleIndex].Model;
		var evoxModelId = this.vehicles[vehicleIndex].ModelId;
		var evoxStyleId = this.vehicles[vehicleIndex].StyleId;
		
		if (this.links[0].displayMakeLogo.toLowerCase() == 'true') {
		   $('evoxGalleryLogo').src = '/images/Logos/' + evoxMake + '.png';
		}
		else {
		   $('evoxGalleryLogoWrapper').style.display = 'none';
		   $('evoxGalleryLink0').className = "evoxGalleryInfoLink_NoLogo";
		   $('evoxGalleryLink1').className = "evoxGalleryInfoLink_NoLogo";
		   $('evoxGalleryLink2').className = "evoxGalleryInfoLink_NoLogo";
		   $('evoxGalleryLink3').className = "evoxGalleryInfoLink_NoLogo";
		   $('evoxGalleryLink4').className = "evoxGalleryInfoLink_NoLogo";
		   $('evoxGalleryLink5').className = "evoxGalleryInfoLink_NoLogo";
		   $('evoxGalleryInfoWrapper').className = "evoxGalleryInfoWrapper_NoLogo";
		}
		
		$('evoxGalleryHeading').update(evoxMakeModel);		
						
		$('evoxGalleryLink0').href = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink0_Target);
		$('evoxGalleryLink1').href = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink1_Target);
		$('evoxGalleryLink2').href = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink2_Target);
		$('evoxGalleryLink3').href = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink3_Target);
		$('evoxGalleryLink4').href = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink4_Target);
		$('evoxGalleryLink5').href = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink5_Target);
		
		$('evoxGalleryLink0').update(this.processVariableLabel(vehicleIndex, this.links[0].evoxGalleryLink0_Text));
		$('evoxGalleryLink1').update(this.processVariableLabel(vehicleIndex, this.links[0].evoxGalleryLink1_Text));
		$('evoxGalleryLink2').update(this.processVariableLabel(vehicleIndex, this.links[0].evoxGalleryLink2_Text));
		$('evoxGalleryLink3').update(this.processVariableLabel(vehicleIndex, this.links[0].evoxGalleryLink3_Text));
		$('evoxGalleryLink4').update(this.processVariableLabel(vehicleIndex, this.links[0].evoxGalleryLink4_Text));
		$('evoxGalleryLink5').update(this.processVariableLabel(vehicleIndex, this.links[0].evoxGalleryLink5_Text));
		
		$('evoxGalleryLink0').target = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink0_Link_Target);
		$('evoxGalleryLink1').target = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink1_Link_Target);
		$('evoxGalleryLink2').target = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink2_Link_Target);
		$('evoxGalleryLink3').target = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink3_Link_Target);
		$('evoxGalleryLink4').target = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink4_Link_Target);
		$('evoxGalleryLink5').target = this.processVariableTarget(vehicleIndex, this.links[0].evoxGalleryLink5_Link_Target);

	},
	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].ZoomImages  && this.vehicles[vehicleIndex].ZoomPath)
		{
			if (!this.vehicles[vehicleIndex].ZoomImages[imageIndex])
			{
				var img = new Image();
				img.src = this.vehicles[vehicleIndex].ZoomPath[imageIndex];
				
				this.vehicles[vehicleIndex].ZoomImages[imageIndex] = $(img);
			}
			
			if (!this.vehicles[vehicleIndex].ZoomImages[nextImageIndex])
			{
				var img = new Image();
				img.src = this.vehicles[vehicleIndex].ZoomPath[nextImageIndex];

				this.vehicles[vehicleIndex].ZoomImages[nextImageIndex] = $(img);
			}
			
			if (!this.vehicles[vehicleIndex].ZoomImages[previousImageIndex])
			{
				var img = new Image();
				img.src = this.vehicles[vehicleIndex].ZoomPath[previousImageIndex];
				
				this.vehicles[vehicleIndex].ZoomImages[previousImageIndex] = $(img);
			}
			
			if (!this.vehicles[nextVehicleIndex].ZoomImages[imageIndex])
			{
				var img = new Image();
				img.src = this.vehicles[nextVehicleIndex].ZoomPath[imageIndex];
				
				this.vehicles[nextVehicleIndex].ZoomImages[imageIndex] = $(img);
			}
			
			if (!this.vehicles[previousVehicleIndex].ZoomImages[imageIndex])
			{
				var img = new Image();
				img.src = this.vehicles[previousVehicleIndex].ZoomPath[imageIndex];
				
				this.vehicles[previousVehicleIndex].ZoomImages[imageIndex] = $(img);
			}
		}
	},
	processVariableLabel: function(vehicleIndex, labelText)
	{
	   labelText = this.replaceAll(labelText, '{{Make}}', this.vehicles[vehicleIndex].Make);
	   labelText = this.replaceAll(labelText, '{{Model}}', this.vehicles[vehicleIndex].Model);
	   labelText = this.replaceAll(labelText, '{{ModelYear}}', this.vehicles[vehicleIndex].ModelYear);
	   labelText = this.replaceAll(labelText, '{{Trim}}', this.vehicles[vehicleIndex].Trim);
	   labelText = this.replaceAll(labelText, '{{Style}}', this.vehicles[vehicleIndex].Style);
	    
	   return labelText;
	},
	processVariableTarget: function(vehicleIndex, targetText)
	{
	   targetText = targetText.replace('@make', this.vehicles[vehicleIndex].Make);
	   targetText = targetText.replace('@model', this.vehicles[vehicleIndex].Model);
	   targetText = targetText.replace('@modelyear', this.vehicles[vehicleIndex].ModelYear);
	   targetText = targetText.replace('@trimlevelId', this.vehicles[vehicleIndex].TrimLevelId);
	   targetText = targetText.replace('@styleId', this.vehicles[vehicleIndex].StyleId);
	    
	   return targetText;
	},
	replaceAll: function(originalText, searchString, replaceString)
   {
      return originalText.replace( new RegExp(searchString,"g"), replaceString );    
   },
	changeImage: function(vehicleIndex, imageIndex)
	{
		vehicleIndex = (vehicleIndex >= this.vehicles.length) ? 0 : vehicleIndex;
		vehicleIndex = (vehicleIndex < 0) ? (this.vehicles.length - 1) : vehicleIndex;
		imageIndex = (imageIndex >= this.vehicles[vehicleIndex].ZoomPath.length) ? 0 : imageIndex;
		imageIndex = (imageIndex < 0) ? (this.vehicles[vehicleIndex].ZoomPath.length - 1) : imageIndex;
		
		if (!this.currentImage)
		{
			this.currentImage = new Element('img');
			this.currentImage.src = this.vehicles[vehicleIndex].ZoomPath[imageIndex];
			$('evoxGalleryZoomedVehicle').insert($(this.currentImage));

			this.currentVehicle = vehicleIndex;
			this.currentAngle = imageIndex;

			this.preloadImages(vehicleIndex, imageIndex);
		}
		else
		{
			if (this.vehicles[vehicleIndex].ZoomImages[imageIndex])
			{
				var newimg = this.vehicles[vehicleIndex].ZoomImages[imageIndex];
			}

			if (this.imageWaiter)
			{
				this.imageWaiter.stop();
			}

			if (newimg.complete && this.finishZoomValidator == 2)
			{
				this.finishZoomValidator = 0;
				Effect.Queues.get($('evoxGalleryZoomedVehicle').identify()).each(function(e) { e.cancel(); });

				newimg.hide();
				$('evoxGalleryZoomedVehicle').insert(newimg);

				if (Prototype.Browser.IE)
				{
					newimg.show();
					this.currentImage.remove();
					this.finishZoomValidator++;
					this.finishZoomValidator++;
				}
				else
				{
					newimg.appear({
						queue: { scope: $('evoxGalleryZoomedVehicle').identify() },
						duration: 0.5,
						afterFinish: this.afterZoomAppearFinish.bind(this)
					});

					this.currentImage.fade({
						queue: { scope: $('evoxGalleryZoomedVehicle').identify()},
						duration: 0.5,
						afterFinish: this.afterZoomFadeFinish.bind(this)
					});
				}
				this.currentImage = newimg;

				this.currentVehicle = vehicleIndex;
				this.currentAngle = imageIndex;

				this.preloadImages(vehicleIndex, imageIndex);
			}
			else
			{
				this.imageWaiter = new PeriodicalExecuter(this.changeImage.bind(this, vehicleIndex, imageIndex), 0.5);
			}
		}
	},
	afterZoomAppearFinish: function(e)
	{
		this.finishZoomValidator++;	
	},
	afterZoomFadeFinish: function(e)
	{
		e.element.remove();
		this.finishZoomValidator++;	
	},
	nextVehicle: function(e)
	{
		e.stop();
		this.slideToVehicle(this.currentVehicle + 1, this);
	},
	previousVehicle: function(e)
	{
		e.stop();
		this.slideToVehicle(this.currentVehicle - 1, this);
	},
	previousAngle: function(e)
	{
		e.stop();
		this.changeImage(this.currentVehicle, this.currentAngle - 1);
	},
	nextAngle: function(e)
	{
		e.stop();
		this.changeImage(this.currentVehicle, this.currentAngle + 1);
	}
});