var WMX = WMX || { };

WMX.EvoxGallery6 = Class.create({
	initialize: function(vehicleArray)
	{
		this.vehicles = vehicleArray;
		if (this.vehicles.length > 0)
		{
			this.currentStockImage = 0;
			this.currentVehicle = 0;
			this.currentAngle = 0;
			
			// Main
			this.galleryDiv = $('evoxGallery6Wrapper');
			
			this.calloutDiv = this.galleryDiv.down('.callout');
			this.vehicle2YMM = this.calloutDiv.down('.vehicleYMM');
			this.vehicle2MPG = this.calloutDiv.down('.vehicleMPG');
			this.stockPrev = this.calloutDiv.down('.leftIcon');
			this.stockPhoto1 = this.calloutDiv.down('.photo1');
			this.stockPhoto2 = this.calloutDiv.down('.photo2');
			this.stockPhoto3 = this.calloutDiv.down('.photo3');
			this.stockPhoto4 = this.calloutDiv.down('.photo4');
			this.stockPhoto5 = this.calloutDiv.down('.photo5');
			this.stockNext = this.calloutDiv.down('.rightIcon');
			
			this.vehiclesDiv = this.galleryDiv.down('.evoxGalleryVehicles');
			this.vehicle1 = this.vehiclesDiv.down('.vehicle1');
			this.vehicle1IMG = this.vehicle1.down('.vehicleIMG');
			this.vehicle2 = this.vehiclesDiv.down('.vehicle2');
			this.vehicle2IMG = this.vehicle2.down('.vehicleIMG');
			this.vehicle3 = this.vehiclesDiv.down('.vehicle3');
			this.vehicle3IMG = this.vehicle3.down('.vehicleIMG');
			
			this.vehicleInfoDiv = this.vehiclesDiv.down('.vehicleInfo');
			this.vehicleInfo1 = this.vehicleInfoDiv.down('.vehicleInfo1');
			this.vehicle1YMM = this.vehicleInfo1.down('.vehicleYMM');
			this.vehicle1MPG = this.vehicleInfo1.down('.vehicleMPG');
			this.vehicleInfo3 = this.vehicleInfoDiv.down('.vehicleInfo3');
			this.vehicle3YMM = this.vehicleInfo3.down('.vehicleYMM');
			this.vehicle3MPG = this.vehicleInfo3.down('.vehicleMPG');
			
			this.controlsDiv = this.galleryDiv.down('.evoxGalleryControls');
			this.controlPrev = this.controlsDiv.down('.prevVehicle');
			this.controlZoom = this.controlsDiv.down('.zoomVehicle');
			this.controlChoose = this.controlsDiv.down('.chooseVehicle');
			this.controlNext = this.controlsDiv.down('.nextVehicle');
			
			this.modelList = this.galleryDiv.down('.evoxVehicleModelList');
			this.FillDropDown(this.modelList, this.vehicles);
			
			// Rollover Activation on all controls
			var allControls = $$(".control");
			for (var i in allControls)
			{
				if (allControls[i].nodeType == 1)
				{
					this.AddRolloverActivation(allControls[i]);
				}
			}
			
			// Event Handlers
			this.stockPrev.observe('click',this.MoveStockImage.bind(this, -1));
			this.stockNext.observe('click',this.MoveStockImage.bind(this, 1));
			
			this.vehicle1IMG.observe('click',this.MoveVehicle.bind(this, -1));
			//  observe zoom? ... use the link
			this.vehicle3IMG.observe('click',this.MoveVehicle.bind(this, 1));
					
			this.controlPrev.observe('click',this.MoveVehicle.bind(this, -1));
			//  observe zoom? ... use the link
			this.controlChoose.observe('click', this.ActivateControlToggle.bind(this, this.modelList));
			this.controlNext.observe('click',this.MoveVehicle.bind(this, 1));
			
			// Links
			var linkControls = $$(".linkControl");			
			for (var i in linkControls)
			{
				if (linkControls[i].nodeType == 1)
				{
					linkControls[i].observe('click',this.NavigateToLink.bind(this,linkControls[i]));
				}
			}
			
			// Resize control area
			var controlControls = this.controlsDiv.childElements();
			this.controlsDiv.style.left = 10 + (7 - controlControls.length) * 60 + "px";
			
			// Zoom
			this.zoomGalleryDiv = $('zoomEvoxGallery6Wrapper');
			this.zoomEvoxVehicle = this.zoomGalleryDiv.down('.zoomVehicle1');
			
			this.zoomControlsDiv = this.zoomGalleryDiv.down('.evoxGalleryControls');
			this.zoomControlRotate = this.zoomControlsDiv.down('.rotateVehicleControls');
			this.zoomControlRotatePrev = this.zoomControlRotate.down('.rotatePrev');
			this.zoomControlRotateNext = this.zoomControlRotate.down('.rotateNext');
			this.zoomControlMove = this.zoomControlsDiv.down('.moveVehicleControls');
			this.zoomControlMovePrev = this.zoomControlMove.down('.movePrev');
			this.zoomControlMoveNext = this.zoomControlMove.down('.moveNext');
			this.zoomControlChoose = this.zoomControlsDiv.down('.chooseVehicle');
			
			this.zoomModelList = this.zoomGalleryDiv.down('.evoxVehicleModelList');
			this.FillDropDown(this.zoomModelList, this.vehicles);
			
			// Zoom Event Handlers
			this.zoomControlRotatePrev.observe('click', this.RotateVehicle.bind(this, -1));
			this.zoomControlRotateNext.observe('click', this.RotateVehicle.bind(this, 1));				
			this.zoomControlMovePrev.observe('click', this.MoveVehicle.bind(this, -1));
			this.zoomControlMoveNext.observe('click', this.MoveVehicle.bind(this, 1));				
			this.zoomControlChoose.observe('click', this.ActivateControlToggle.bind(this, this.zoomModelList));
			
			this.ShowVehicles();
		}
	},
	FillDropDown: function(modelList, vehicles)
	{	
		var maxColumns = 4;
		var maxVehiclesPerColumn = 9;
		var columnsNeeded = Math.ceil(vehicles.length / maxVehiclesPerColumn);
		var columns = Math.min(columnsNeeded, maxColumns);
		var rows = Math.ceil(vehicles.length / columns);
		var index = 0;
		var iAllVehiclesAdded = false;
		
		var oTbl = new Element('table', {'border': 0, 'cellpadding': 0, 'cellspacing': 0 });
		var oTbody = new Element('tbody');
		var oTr = null;
		var oTd = null;
		var oA = null;
		var oDiv = null;
		
		var useOddSelection = true;
		
		for (var i=0; i < rows; i++)
		{
			oTr = new Element('tr');
			useOddSelection = !useOddSelection;
			for (var j=0; j < columns; j++)
			{
				oTd = new Element('td', {'class': 'column'});
				if (useOddSelection && (j%2 == 1))
				{
					oTd.addClassName('alternateItem');
				}
				else if (!useOddSelection && (j%2 == 0))
				{
					oTd.addClassName('alternateItem');
				}
				if (index < vehicles.length)
				{
					oA = new Element('a', {'href': '#'}).update(vehicles[index].Make + ' ' + vehicles[index].Model).observe('click', this.ChangeVehicle.bind(this, index));
					$(oA).writeAttribute("vehicleIndex", i);
					$(oA).writeAttribute("vehicleColumn", j);
					$(oTd).insert(oA);
					index++;
				}
				$(oTr).insert(oTd);
			}
			$(oTbody).insert(oTr);
		}
		
		$(oTbl).insert(oTbody);
		
		modelList.getElementsBySelector('div.modelList')[0].insert(oTbl);
		
		if (columns > 1)
		{
			modelList.addClassName('multi-list');
		}
		
		modelList.addClassName('columnLayout' + columns);
	},
	AddRolloverActivation: function(element)
	{
		element.observe('mouseover', this.ActivateControl.bind(this, element));
		element.observe('mouseout', this.DeactivateControl.bind(this, element));
	},
	ActivateControl: function(element)
	{
		element.addClassName('active');
	},
	DeactivateControl: function(element)
	{
		element.removeClassName('active');
	},
	ActivateControlToggle: function(element)
	{
		if (element.className.indexOf('active') < 0)
		{
			this.ActivateControl(element);
		}
		else
		{
			this.DeactivateControl(element);
		}
	},
	MoveStockImage: function(change)
	{
		var size = this.vehicles[this.currentVehicle].StockPath.length;
		this.currentStockImage = (this.currentStockImage + change + size) % size;
		this.ShowVehicles();
	},
	MoveVehicle: function(change)
	{
		this.ChangeVehicle(this.currentVehicle + change);
	},
	ChangeVehicle: function(index)
	{
		var size = this.vehicles.length;
		this.currentVehicle = (index + size) % size;
		this.MoveStockImage(0);
	},
	RotateVehicle: function(change)
	{		
		this.ChangeRotation(this.currentAngle + change);
	},
	ChangeRotation: function(index)
	{
		var size = this.vehicles[this.currentVehicle].ZoomPath.length;
		this.currentAngle = (index + size) % size;
		this.ShowVehicles();
	},
	NavigateToLink: function(element)
	{
		var href = element.down('A').href;
		href = href.replace("JSyear","ModelYear=" + this.vehicles[this.currentVehicle].ModelYear);
		href = href.replace("JSmake","Make=" + this.vehicles[this.currentVehicle].Make);
		href = href.replace("JSmodel","Model=" + this.vehicles[this.currentVehicle].Model);
		href = href.replace("JSstyle","CultureInfoStyle=" + this.vehicles[this.currentVehicle].Style + "&StyleId=" + this.vehicles[this.currentVehicle].StyleId);
		href = href.replace("JStrim","Trim=" + this.vehicles[this.currentVehicle].Trim);
		element.down('A').href = href;
	},
	ShowVehicles: function()
	{
		this.ShowVehicle(this.zoomEvoxVehicle, 0, this.currentAngle, 2, false, false);
		this.ShowVehicle(this.vehicle1IMG, -1, 4, 3, this.vehicle1YMM, this.vehicle1MPG);
		this.ShowVehicle(this.vehicle2IMG, 0, 2, 1, this.vehicle2YMM, this.vehicle2MPG);
		this.ShowVehicle(this.vehicle3IMG, 1, 0, 3, this.vehicle3YMM, this.vehicle3MPG);
		this.ShowStockPhoto(this.stockPhoto1, 1);
		this.ShowStockPhoto(this.stockPhoto2, 2);
		this.ShowStockPhoto(this.stockPhoto3, 3);
		this.ShowStockPhoto(this.stockPhoto4, 4);
		this.ShowStockPhoto(this.stockPhoto5, 5);
	},
	ShowVehicle: function(element, change, angle, imageSize, ymmDiv, mpgDiv)
	{		
		var size = this.vehicles.length;
		var index = (this.currentVehicle + change + size) % size;		
		var v = this.vehicles[index];
		var prev = this.vehicles[(index - 1 + size) % size];
		var next = this.vehicles[(index + 1) % size];
		
		if (element.firstDescendant())
		{
			element.firstDescendant().remove();
		}
		
		switch(imageSize)
		{
			case 1:
				element.insert(this.LoadImage(v.NormalPath, v.NormalImage, angle, 'vehicleImage', imageSize));
				this.LoadImage(prev.NormalPath, prev.NormalImage, angle, 'vehicleImage', imageSize);
				this.LoadImage(next.NormalPath, next.NormalImage, angle, 'vehicleImage', imageSize);
				break;
			case 2:
				element.insert(this.LoadImage(v.ZoomPath, v.ZoomImage, angle, 'vehicleImage', imageSize));
				if (this.zoomGalleryDiv.style.display != 'none')
				{
					this.LoadImage(prev.ZoomPath, prev.ZoomImage, angle, 'vehicleImage', imageSize);
					this.LoadImage(next.ZoomPath, next.ZoomImage, angle, 'vehicleImage', imageSize);
					this.LoadImage(v.ZoomPath, v.ZoomImage, (angle - 1 + v.ZoomPath.length) % v.ZoomPath.length, 'vehicleImage', imageSize);
					this.LoadImage(v.ZoomPath, v.ZoomImage, (angle + 1) % v.ZoomPath.length, 'vehicleImage', imageSize);
				}
				break;
			case 3:
				element.insert(this.LoadImage(v.IncreasedPath, v.IncreasedImage, angle, 'vehicleImage', imageSize));
				this.LoadImage(prev.IncreasedPath, prev.IncreasedImage, angle, 'vehicleImage', imageSize);
				this.LoadImage(next.IncreasedPath, next.IncreasedImage, angle, 'vehicleImage', imageSize);
				break;
		}
		this.ShowVehicleInfo(v, ymmDiv, mpgDiv);
	},
	ShowStockPhoto: function(element, change)
	{	
		var v = this.vehicles[this.currentVehicle];
		var index = (this.currentStockImage + change) % v.StockPath.length;
		
		if (element.firstDescendant())
		{
			element.firstDescendant().remove();
		}
		element.insert(this.LoadImage(v.StockPath, v.StockImage, index, 'stockPhotoImage'));
		this.LoadImage(v.StockPath, v.StockImage, (index - 1 + v.StockPath.length) % v.StockPath.length, 'stockPhotoImage');
		this.LoadImage(v.StockPath, v.StockImage, (index + 1) % v.StockPath.length, 'stockPhotoImage');
	},
	LoadImage: function(imageStrings, imageArray, number, className, imageSize)
	{
		var width, height;

		switch(imageSize)
		{
			case 1:
				width = 515;
				height = 250;
				break;
			case 2:
				width = 950;
				height = 450;
				break;
			case 3:
				width = 309;
				height = 150;
				break;
		}

		if (imageArray[number] == null)
		{
			imageArray[number] = new Element('img', { 'class': className, src: imageStrings[number] });
			if (imageSize)
			{
				imageArray[number].width = width;
				imageArray[number].height = height;
			}
		}
		return imageArray[number];
	},
	ShowVehicleInfo: function(v, ymmDiv, mpgDiv)
	{
		if (ymmDiv)
		{			
			//if (ymmDiv == this.vehicle2YMM)
			//{
			//	ymmDiv.innerHTML = '<DIV>' + v.ModelYear + '</DIV><DIV>' + v.Make + '</DIV><DIV>' + v.Model + '</DIV>';
			//	ymmDiv.innerHTML = '<DIV>' + v.ModelYear + '</DIV><DIV>' + v.Make + '</DIV><DIV>' + v.Model + '</DIV>';
			//}
			//else
			//{
				ymmDiv.innerHTML = v.ModelYear + ' ' + v.Make + ' ' + v.Model;
			//}
		}
		
		if (mpgDiv)
		{
			if (mpgDiv == this.vehicle2MPG)
			{
				if ((v.FuelCity < 1) || (v.FuelHwy < 1))
				{
					mpgDiv.innerHTML = '';
				}
				else
				{
					var text = '<div class="MPGDisplay">';
					text += '<span class="cityMPGLabel">';
					text += 'City MPG';
					text += '<span>*</span>';
					text +=	'</span>';
					text += '<span class="cityMPG">';
					text += v.FuelCity;
					text += '</span>';
					text += '<span class="mpgIcon"></span>';
					text += '<span class="hwyMPGLabel">';
					text += 'Hwy MPG';
					text += '<span>*</span>';
					text += '</span>';
					text += '<span class="hwyMPG">';
					text += v.FuelHwy;
					text += '</span>';					
					text += '</div>';
					mpgDiv.innerHTML = text;
				}
			}
			else
			{
				if ((v.FuelCity < 1) || (v.FuelHwy < 1))
				{
					mpgDiv.innerHTML = '';					
				}
				else
				{
					mpgDiv.innerHTML = 'ESTIMATED MPG<DIV>' + v.FuelCity + ' / ' + v.FuelHwy + '<DIV>';
				}
			}
		}
	}
});