/*
Experience Javascript
v 0.1.5
01/02/2012

Contains: Global RequestAnimFrame shim (Thanks Paul Irish)

Dependencies: 
BroswerDetect
jQuery.preLoadImages (HH Plugin)
jQuery.animateSequence (HH Plugin)

#TODO: Slide in elements
#TODO: Change class name to make arrows pulse
#TODO: Ease to sections
#TODO: Optimisations/Refactor
*/



// shim layer with setTimeout fallback - http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function () {
	return window.requestAnimationFrame ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              window.oRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              function (callback) {
              	window.setTimeout(callback, 1000 / 60);
              };
})();

var Experience = {
	canvasWidth: 0, canvasHeight: 0, context: null, updateCoord: null, isFallback: false, isTouchDevice: false, isNavHiding: false, isOverlayActive: false, isKeydown: false,
	currentX: 0, disX: 0, renderQue: [], defaultSpeed: 5, canvasPosition: 0, isKeyup: false, previousTimer: null, nextTimer: null, user: '_' + BrowserDetect.OS + '_' + BrowserDetect.browser + '_' + BrowserDetect.version,

	preload: function () {
		// Set images to load
		var images = ["/static/vehicles/camry/content/images/experience/img-blind-hotspot.png",
						"/static/vehicles/camry/content/images/experience/trackExterior.png",
						"/static/vehicles/camry/content/images/experience/trackPerformance.png",
						"/static/vehicles/camry/content/images/experience/trackInterior.png",
						"/static/vehicles/camry/content/images/experience/trackSafety.png",
						"/static/vehicles/camry/content/images/experience/text-leftRight-Information.png",
						"/static/vehicles/camry/content/images/experience/img-hero-car.png",
						"/static/vehicles/camry/content/images/experience/img-title-exterior.png",
						"/static/vehicles/camry/content/images/experience/img-exterior-alloyWheels-text.png",
						"/static/vehicles/camry/content/images/experience/img-exterior-colourPicker.png",
						"/static/vehicles/camry/content/images/experience/img-exterior-dualExhaust-text.png",
						"/static/vehicles/camry/content/images/experience/img-exterior-dynamicExterior-text.png",
						"/static/vehicles/camry/content/images/experience/img-exterior-headlamps-text.png",
						"/static/vehicles/camry/content/images/experience/img-exterior-models-text.png",
						"/static/vehicles/camry/content/images/experience/img-title-interior-bottom.png",
						"/static/vehicles/camry/content/images/experience/img-title-interior-top.png",
						"/static/vehicles/camry/content/images/experience/img-interior-audio.png",
						"/static/vehicles/camry/content/images/experience/img-interior-flythrough-text.png",
						"/static/vehicles/camry/content/images/experience/img-interior-interiorTrim.png",
						"/static/vehicles/camry/content/images/experience/img-interior-seatAdjustments.png",
						"/static/vehicles/camry/content/images/experience/img-interior-smartstart.png",
						"/static/vehicles/camry/content/images/experience/img-interior-tripComputer.png",
						"/static/vehicles/camry/content/images/experience/img-interior-wheel.png",
						"/static/vehicles/camry/content/images/experience/img-title-performance.png",
						"/static/vehicles/camry/content/images/experience/img-performance-aerodynamic.png",
						"/static/vehicles/camry/content/images/experience/img-perf-paddleShift.png",
						"/static/vehicles/camry/content/images/experience/img-perf-transmission.png",
						"/static/vehicles/camry/content/images/experience/img-perf-engine.png",
						"/static/vehicles/camry/content/images/experience/img-title-safety.png",
						"/static/vehicles/camry/content/images/experience/img-saftey-absVscTrc.png",
						"/static/vehicles/camry/content/images/experience/img-safety-blindspot.png",
						"/static/vehicles/camry/content/images/experience/img-safety-rideHandeling.png",
						"/static/vehicles/camry/content/images/experience/img-saftey-reverseCamera.png",
						"/static/vehicles/camry/content/images/experience/img-saftey-srsAirbag-text.png"
						];
		// Preload the images then startup on callback
		$(document).preLoadImages(images, function () {
			//			var url = Experience.deeplinking.getUrl(),
			//				hash = url[1];
			//			if (hash) $("#explore-camry").trigger('click');
			//			else $("#explore-camry").fadeIn();

			Experience.init();
			$("#camryExperience, #experience").addClass('canvas loaded');

		});

	},
	init: function () {
		context = canvas.getContext("2d");

		// set the width
		Experience.section.setDimensions();

		$(window).resize(function () {
			Experience.section.setDimensions();
		});

		// Move hotspots so they can be accessed
		$('#camryExperience .hotspot-links a, #camryExperience .final-frame-links').clone().insertAfter('#camryExperience');

		// The last page of links
		$('.final-frame-links').wrap('<div class="lastpage-overlay overlay" />');

		// Delete fallback
		$('#camryExperience *').remove();

		// Bind close buttons
		Experience.overlay.initCloseBtn('#experience .overlay .close a', '#experience #overlayShadow, #experience #overlayBg', true);
		Experience.overlay.initCloseBtn('#experience .overlay-interior-flythrough .close a', '#experience #overlayShadow-interior-flythrough, #experience #overlayBg-interior-flythrough', true);

		/* The images ------------------------------------------------------------------------------------ */

		// Tracks (experience wide)
		interiorTrack = Experience.image.createNewImage(0, 28, 0, 0, '/static/vehicles/camry/content/images/experience/trackInterior.png', 5, '#homeScreen.jumpmenu', 0, 17);
		exteriorTrack = Experience.image.createNewImage(0, 0, 0, 0, '/static/vehicles/camry/content/images/experience/trackExterior.png', 6);
		safteyTrack = Experience.image.createNewImage(0, 146, 0, 0, '/static/vehicles/camry/content/images/experience/trackSafety.png', 3);
		performanceTrack = Experience.image.createNewImage(0, 140, 0, 0, '/static/vehicles/camry/content/images/experience/trackPerformance.png', 4);

		instructions = Experience.image.createNewImage(30, 350, 0, 0, '/static/vehicles/camry/content/images/experience/text-leftRight-Information.png', 6);

		// Page intro?
		introCar = Experience.image.createNewImage(184, 99, 0, 0, '/static/vehicles/camry/content/images/experience/img-hero-car.png', 6);

		// Exterior Section
		textExterior = Experience.image.createNewImage(753, 187, 0, 0, '/static/vehicles/camry/content/images/experience/img-title-exterior.png', 3);
		alloyWheels = Experience.image.createNewImage(602, 0, 0, 0, '/static/vehicles/camry/content/images/experience/img-exterior-alloyWheels-text.png', 7, '.alloy-wheels', 0, 0);
		headlights = Experience.image.createNewImage(625, 230, 0, 0, '/static/vehicles/camry/content/images/experience/img-exterior-headlamps-text.png', 6, '.headlights', 270, 0);
		colourPicker = Experience.image.createNewImage(1185, 33, 0, 0, '/static/vehicles/camry/content/images/experience/img-exterior-colourPicker.png', 7, '.colour-picker', 0, 90);
		colourPickerVehicle = Experience.image.createNewImage(1389, 165, 0, 0, '/static/vehicles/camry/content/images/experience/toyota-camry-experience-1f7-silver-pearl.png', 7);
		dualExhaust = Experience.image.createNewImage(2702, 248, 0, 0, '/static/vehicles/camry/content/images/experience/img-exterior-dualExhaust-text.png', 9, '.dual-exhaust', 0, 50);
		dynamicExterior = Experience.image.createNewImage(2012, 25, 0, 0, '/static/vehicles/camry/content/images/experience/img-exterior-dynamicExterior-text.png', 7, '.dynamic-exterior', 0, 0);
		exteriorModels = Experience.image.createNewImage(2445, 50, 0, 0, '/static/vehicles/camry/content/images/experience/img-exterior-models-text.png', 7, '.range-altise', 115, 30);

		blindAtaraS = Experience.image.createNewImage(2445, 50, 0, 0, '/static/vehicles/camry/content/images/experience/img-blind-hotspot.png', 7, '.range-atara-s', 330, 30);
		blindAtaraSX = Experience.image.createNewImage(2445, 50, 0, 0, '/static/vehicles/camry/content/images/experience/img-blind-hotspot.png', 7, '.range-atara-sx', 115, 180);
		blindAtaraSL = Experience.image.createNewImage(2445, 50, 0, 0, '/static/vehicles/camry/content/images/experience/img-blind-hotspot.png', 7, '.range-atara-sl', 330, 180);

		// Interior Section
		textInteriorBottom = Experience.image.createNewImage(1106, 402, 0, 0, '/static/vehicles/camry/content/images/experience/img-title-interior-bottom.png', 2);
		textInteriorTop = Experience.image.createNewImage(1941, 31, 0, 0, '/static/vehicles/camry/content/images/experience/img-title-interior-top.png', 3);
		interiorFlyThrough = Experience.image.createNewImage(3084, 60, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-flythrough-text.png', 7, '.interior-flythrough', 0, 0);
		interiorTrim = Experience.image.createNewImage(3550, 255, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-interiorTrim.png', 7, '.interior-trim', 30, 20);
		interiorAudio = Experience.image.createNewImage(5585, 47, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-audio.png', 8, '.audio', 0, 5);
		seatAdjustments = Experience.image.createNewImage(4110, 7, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-seatAdjustments.png', 8, '.seat-adjustments', 180, 0);
		smartStart = Experience.image.createNewImage(4820, 25, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-smartstart.png', 6, '.smart-entry');
		tripComputer = Experience.image.createNewImage(4974, 180, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-tripComputer.png', 7, '.multi-information-display', 20, 150);
		interiorWheel = Experience.image.createNewImage(4068, 0, 0, 0, '/static/vehicles/camry/content/images/experience/img-interior-wheel.png', 7, '.premium-audio-controls', 140, 70);

		blindBluetooth = Experience.image.createNewImage(4068, 0, 0, 0, '/static/vehicles/camry/content/images/experience/img-blind-hotspot.png', 7, '.bluetooth', 640, 100);

		// Performance
		textPerformance = Experience.image.createNewImage(3588, 344, 0, 0, '/static/vehicles/camry/content/images/experience/img-title-performance.png', 4);
		aeroDynamic = Experience.image.createNewImage(6250, 0, 0, 0, '/static/vehicles/camry/content/images/experience/img-performance-aerodynamic.png', 6, '.aerodynamic-design', 270, 30);
		paddleShift = Experience.image.createNewImage(6770, 130, 0, 0, '/static/vehicles/camry/content/images/experience/img-perf-paddleShift.png', 7, '.quick-response', 185, 0);
		transmission = Experience.image.createNewImage(7390, 16, 0, 0, '/static/vehicles/camry/content/images/experience/img-perf-transmission.png', 8, '.six-speed-transmission', 30, 5);
		engine = Experience.image.createNewImage(6200, 4, 0, 0, '/static/vehicles/camry/content/images/experience/img-perf-engine.png', 7, '.vvt-i-engine', 0, 0);

		// Saftey
		textSaftey = Experience.image.createNewImage(2379, 245, 0, 0, '/static/vehicles/camry/content/images/experience/img-title-safety.png', 2);
		rideAndHandeling = Experience.image.createNewImage(7300, 365, 0, 0, '/static/vehicles/camry/content/images/experience/img-safety-rideHandeling.png', 7, '.ride-and-handling');
		absVscTrc = Experience.image.createNewImage(9700, 245, 0, 0, '/static/vehicles/camry/content/images/experience/img-saftey-absVscTrc.png', 8, '.abs-vsc-trc', 0, 0);
		blindSpot = Experience.image.createNewImage(5620, 210, 0, 0, '/static/vehicles/camry/content/images/experience/img-safety-blindspot.png', 5, '.blind-spot', 235, 40);
		reverseCamera = Experience.image.createNewImage(8890, 25, 0, 0, '/static/vehicles/camry/content/images/experience/img-saftey-reverseCamera.png', 8, '.reverse-camera', 30, 0);
		srsAirbag = Experience.image.createNewImage(7300, 0, 0, 0, '/static/vehicles/camry/content/images/experience/img-saftey-srsAirbag-text.png', 6, '.srs-airbags', 540, 290);

		// Rendered as [top, ..., bottom]
		Experience.renderQue = [absVscTrc, srsAirbag, reverseCamera, rideAndHandeling, transmission, paddleShift, aeroDynamic, blindSpot, engine, tripComputer, smartStart, seatAdjustments, interiorAudio, interiorTrim, interiorWheel,
								blindBluetooth, interiorFlyThrough, dynamicExterior, dualExhaust, exteriorModels, blindAtaraSL, blindAtaraSX, blindAtaraS, headlights, colourPickerVehicle, colourPicker, alloyWheels, introCar,
								exteriorTrack, interiorTrack, performanceTrack, instructions, safteyTrack, textExterior, textInteriorBottom, textInteriorTop, textPerformance, textSaftey];

		// Assign width, height and position to hotspots, based on paralax image object dimensions
		for (var l = Experience.renderQue.length; l--; ) {
			if (Experience.renderQue[l].hotspot) {
				$(Experience.renderQue[l].hotspot)
                                .css('display', 'block')
                                .css('left', Experience.renderQue[l].x + Experience.renderQue[l].hspotXOffset)
								.css('top', Experience.renderQue[l].y + Experience.renderQue[l].hspotYOffset);
			}
		}

		// Hotspot and its close event
		$('#experience .hotspot').click(function () {
			if (!Experience.isOverlayActive) {
				var overlay = $(this).attr('href');

				// Only 1 #interior-flythrough so do the others first
				if (overlay != "#interior-flythrough") Experience.overlay.open(overlay, '#experience #overlayShadow, #experience #overlayBg');
				else Experience.overlay.open(overlay, "#experience #overlayShadow-interior-flythrough, #experience #overlayBg-interior-flythrough");

				$('#experience-previous').animate({ 'left': '-=200' }, 'medium');
				$('#experience-next').animate({ 'right': '-=200' }, 'medium');
			}
			return false;

		});

		// Activate image sequences
		$('#experience #alloy-wheels .image-sequence').animateSequence({ 'count': 2, 'speed': 1600, 'width': 460, 'height': 259 });
		$('#experience #seat-adjustments .image-sequence').animateSequence({ 'count': 6, 'speed': 1300, 'width': 460, 'height': 259 });

		// Turn on stuff for page start
		$('.homepage #experience #experience-next').fadeIn();
		$('#experience-next, #experience-previous').addClass('pulse');


		// Colour Picker ----------------------------
		$('.colour-picker-container a').click(function () {
			var carUrl = $(this).attr('data-path');
			Experience.image.updateImage(colourPickerVehicle, carUrl);
			$('.colour-picker-container a').removeClass('selected');
			$(this).addClass('selected');
			return false;
		});

		// Bind jump menus ----------------------------
		$('.jumpmenu a.exterior').click(function () {
			Experience.section.jumpBackwardTo(1);
		});
		$('.jumpmenu a.interior').click(function () {
			if (Experience.canvasPosition < 425) Experience.section.jumpForwardTo(425);
			else Experience.section.jumpBackwardTo(425);
		});
		$('.jumpmenu a.performance').click(function () {
			if (Experience.canvasPosition < 863) Experience.section.jumpForwardTo(863);
			else Experience.section.jumpBackwardTo(863);
		});
		$('.jumpmenu a.safety').click(function () {
			if (Experience.canvasPosition < 1098) Experience.section.jumpForwardTo(1098);
			else Experience.section.jumpBackwardTo(1098);
		});
		$('#experience .lastpage-overlay .back-to-start').click(function () {
			Experience.section.jumpBackwardTo(1);
			$('.homepage #experience .lastpage-overlay').animate({ 'right': '-=1200' }, 'medium');
		});

		Experience.deeplinking.activate();
		Experience.tracking.init();

		// Attach events --------------------
		// Mouse 
		document.getElementById('experience-next').addEventListener('mousedown', Experience.buttonHandler.next, false);
		document.getElementById('experience-previous').addEventListener('mousedown', Experience.buttonHandler.previous, false);
		document.getElementById('experience-next').addEventListener('mouseup', Experience.mouseUpHandler, false);
		document.getElementById('experience-previous').addEventListener('mouseup', Experience.mouseUpHandler, false);
		document.addEventListener('mouseup', Experience.endHandler, false);

		// Keyboard
		window.addEventListener('keydown', Experience.keyboardHandler, false);
		window.addEventListener('keyup', Experience.keyboardEndHandler, false);

		// Request annimation FPS or update to ensure 60FPS.
		// Thanks Paul Irish
		(function animloop() {
			requestAnimFrame(animloop);
			Experience.draw();
		})();



	},
	buttonHandler: {
		next: function () {
			Experience.section.nav('move');
			clearInterval(Experience.nextTimer);

			Experience.nextTimer = setInterval(function () {
				//right Key
				Experience.isKeyup = false;
				Experience.section.scrollRight();
			}, 10);
			$('#experience-previous').addClass('pause');
		},
		previous: function () {
			Experience.section.nav('move');
			clearInterval(Experience.previousTimer);

			Experience.previousTimer = setInterval(function () {
				// left
				Experience.isKeyup = false;
				Experience.section.scrollLeft();
			}, 10);
			$('#experience-next').addClass('pause');
		}
	},
	keyboardHandler: function (event) {
		if (!Experience.isKeyup) return;
		// Experience.debug.print("pressed");
		if (event.keyCode == "37") {
			clearInterval(Experience.previousTimer);
			Experience.previousTimer = setInterval(function () {
				// left
				Experience.isKeyup = false;
				Experience.section.scrollLeft();
			}, 10);
			$('#experience-next').addClass('pause');
		} else if (event.keyCode == "39") {
			clearInterval(Experience.nextTimer);
			Experience.nextTimer = setInterval(function () {
				//right Key
				Experience.isKeyup = false;
				Experience.section.scrollRight();
			}, 10);
			$('#experience-previous').addClass('pause');
		}

		Experience.section.nav('move');
	},
	keyboardEndHandler: function (event) {
		if ((event.keyCode == "37") || (event.keyCode == "39")) {
			if (Experience.tracking.isFirstClick) {
				hh_WT.trackEvent({ 'WT.ac': ' VH_Camry_HPB_First_Interaction' }, true);
				Experience.tracking.isFirstClick = false;
			}

			var _pos = Experience.canvasPosition;
			// Send tracking call depending on what section you arrive in
			if (_pos < 424) {
				// Exterior
				Experience.tracking.keyboard('#exterior');
			}
			else if ((_pos >= 425) && (_pos < 862)) {
				// interior
				Experience.tracking.keyboard('#interior');
			}
			else if ((_pos >= 863) && (_pos < 1082)) {
				// performance
				Experience.tracking.keyboard('#performance');
			}
			else if ((_pos >= 1083) && (_pos < 1210)) {
				// safety
				Experience.tracking.keyboard('#safety');
			} else {
				Experience.tracking.section('#final');
			}
			Experience.endHandler(event);
		}
	},
	mouseUpHandler: function (event) {
		var _pos = Experience.canvasPosition;

		// Send tracking call depending on what section you arrive in
		if (_pos < 424) {
			// Exterior
			Experience.tracking.section('#exterior');
		}
		else if ((_pos >= 425) && (_pos < 862)) {
			// interior
			Experience.tracking.section('#interior');
		}
		else if ((_pos >= 863) && (_pos < 1082)) {
			// performance
			Experience.tracking.section('#performance');
		}
		else if ((_pos >= 1083) && (_pos < 1210)) {
			// safety
			Experience.tracking.section('#safety');
		} else {
			Experience.tracking.section('#final');
		}
	},
	endHandler: function (event) {
		// Clear everything
		clearInterval(Experience.previousTimer);
		clearInterval(Experience.nextTimer);

		$('.homepage #experience #experience-next').fadeIn();
		$('#experience-next, #experience-previous').removeClass('pause');
		Experience.section.reActivate();
		Experience.isKeyup = true;

	},
	draw: function () {

		var _renderQue = Experience.renderQue;
		context.save();
		context.clearRect(0, 0, Experience.canvasWidth, Experience.canvasHeight);

		// First rendered is last in stacking order. Starting from the end of the array
		for (var i = _renderQue.length; i--; ) {
			context.drawImage(_renderQue[i].img, _renderQue[i].x, _renderQue[i].y);
		}
		context.restore();
	},
	overlay: {
		initCloseBtn: function (closeButton, otherElements, isUsingAnimatedSequence) {
			if (isUsingAnimatedSequence == undefined) isUsingAnimatedSequence = false;

			// Assign animate close for overlays
			$(closeButton).click(function () {
				var overlay, $this = $(this);

				if ($this.parents('.overlay').length >= 1) overlay = $this.parents('.overlay');
				else overlay = $this.parents('.overlay-interior-flythrough');

				overlay.animate({ 'top': '-=500' }, 'medium', (
					function () {
						overlay.hide();
						if (Experience.isFallback) {
							$('.jcarousel-prev').animate({ 'left': '+=200' }, 'medium');
							$('.jcarousel-next').animate({ 'left': '-=200' }, 'medium');
						} else {
							if (!Experience.isOverlayActive) {
								$('#experience-previous').animate({ 'left': '+=200' }, 'medium');
								$('#experience-next').animate({ 'right': '+=200' }, 'medium');
							}
						}
					})
				);

				$(otherElements).animate({ 'top': '-=500' }, 'medium', (
					function () {
						overlay.hide();
					}
				));

				if (isUsingAnimatedSequence) {
					if ($(overlay).find('.image-sequence').length >= 1) {
						$(overlay).find('.image-sequence').animateSequence('stopLoop');
					}
				}
				if ($(overlay).find('.brightcove-video-player').length >= 1) {
					var sVideoHTML = $(overlay).find('.brightcove-video-player').html();
					$(overlay).find('.brightcove-video-player').html(sVideoHTML);

					// var vidID = $(overlay).find('.BrightcoveExperience');
					// videoPlayer.pauseVideo(vidID);
				}

				Experience.isOverlayActive = false;
				return false;
			});
		},
		open: function (overlay, otherElements) {

			if (Experience.isOverlayActive) return;
			Experience.isOverlayActive = true;
			$(otherElements + ', ' + overlay).show();
			$(otherElements + ', ' + overlay).animate({ 'top': '+=500' }, 'medium');

			if ($(overlay).find('.image-sequence').length >= 1) {
				$(overlay).find('.image-sequence').animateSequence('startLoop');
			}
		}
	},
	section: {
		setDimensions: function () {
			var _w = window.outerWidth;

			canvas.width = _w;
			canvas.clientWidth = _w;
			Experience.canvasWidth = _w;
			Experience.canvasHeight = canvas.clientHeight;
		},
		jumpForwardTo: function (position) {
			$('#experience .hotspot, #experience .colour-picker-container').hide();

			while (position >= Experience.canvasPosition) {
				for (var l = Experience.renderQue.length; l--; ) {
					Experience.renderQue[l].x = Experience.renderQue[l].x - Experience.renderQue[l].speed;
				}
				Experience.canvasPosition++;
			}
			Experience.section.reActivate();
		},
		jumpBackwardTo: function (position) {
			$('#experience .hotspot, #experience .colour-picker-container').hide();

			while (position < Experience.canvasPosition) {
				for (var l = Experience.renderQue.length; l--; ) {
					Experience.renderQue[l].x = Experience.renderQue[l].x + Experience.renderQue[l].speed;
				}
				Experience.canvasPosition--;
			}
			Experience.debug.print(Experience.canvasPosition);
			Experience.section.reActivate();

		},
		scrollRight: function () {
			if (Experience.canvasPosition > 1209) return;
			$('#experience .hotspot, #experience .colour-picker-container').hide();

			if (Experience.canvasPosition == 1209) {
				$('.homepage #experience .lastpage-overlay').animate({ 'right': '+=1200' }, 'medium');
			}

			for (var l = Experience.renderQue.length; l--; ) {
				Experience.renderQue[l].x = Experience.renderQue[l].x - Experience.renderQue[l].speed;
			}

			Experience.canvasPosition++;
		},
		scrollLeft: function () {

			$('#experience .hotspot, #experience .colour-picker-container').hide();
			if (Experience.canvasPosition == 0) return;

			for (var l = Experience.renderQue.length; l--; ) {
				Experience.renderQue[l].x = Experience.renderQue[l].x + Experience.renderQue[l].speed;
			}
			if (Experience.canvasPosition == 1209) {
				$('.homepage #experience .lastpage-overlay').animate({ 'right': '-=1200' }, 'medium');
			}

			Experience.canvasPosition--;
		},
		nav: function (menuCase) {
			// Display or hide the bottom navigation
			if (menuCase == 'move') {
				if ((!Experience.isNavHiding) || (Experience.canvasPosition <= 90)) {
					$("#experienceNav").fadeOut('fast', function () {
						Experience.isNavHiding = true;
					});
				}
			} else if ((Experience.canvasPosition >= 90) && (Experience.canvasPosition < 1210)) {
				$("#experienceNav").fadeIn('fast', function () {
					Experience.isNavHiding = false;
				});
			}
		},
		reActivate: function () {

			// update hotspot position
			for (var l = Experience.renderQue.length; l--; ) {
				var leftPosition = Experience.renderQue[l].x + Experience.renderQue[l].hspotXOffset;
				$(Experience.renderQue[l].hotspot).css('left', leftPosition).show(); ;
			}
			$('.colour-picker-container').css('left', (colourPicker.x + 300));
			$('#experience .colour-picker-container').show();

			// Turn on nav
			Experience.section.nav('finish');

			// Things to turn back on
			if (Experience.canvasPosition >= 10) $('.homepage #experience #experience-previous').fadeIn();
			else $('.homepage #experience #experience-previous').fadeOut();

			var _pos = Experience.canvasPosition;
			// Highlight relevant section in menu and deeplink URL
			$('#experienceNav li.current').removeClass('current');
			if (_pos < 424) {
				$('#experienceNav li a.exterior').parent('li').addClass('current');
				//Exterior
				if (_pos < 152) Experience.deeplinking.setUrl("exterior");
				else if ((_pos >= 152) && (_pos <= 270)) Experience.deeplinking.setUrl("colours");
				else Experience.deeplinking.setUrl("exterior-1");
			}
			else if ((_pos >= 425) && (_pos < 862)) {
				$('#experienceNav li a.interior').parent('li').addClass('current');
				if (_pos < 580) Experience.deeplinking.setUrl("interior");
				else if ((_pos >= 580) && (_pos <= 705)) Experience.deeplinking.setUrl("interior-2");
				else Experience.deeplinking.setUrl("interior-3");
			}
			else if ((_pos >= 863) && (_pos < 1097)) {
				$('#experienceNav li a.performance').parent('li').addClass('current');
				if (_pos < 986) Experience.deeplinking.setUrl("performance");
				else Experience.deeplinking.setUrl("performance-2");
			}
			else if ((_pos >= 1098) && (_pos < 1289)) {
				$('#experienceNav li a.safety').parent('li').addClass('current');
				if (_pos < 1140) Experience.deeplinking.setUrl("safety");
				else if ((_pos >= 1141) && (_pos < 1231)) Experience.deeplinking.setUrl("safety-2");
				else Experience.deeplinking.setUrl("safety-3");
			}
		}
	},
	image: {
		createNewImage: function (x, y, dx, dy, url, speed, hspot, hspotXOffset, hspotYOffset) {

			// Create an image object and assign an image
			var img = new Image();
			img.src = url;

			// Create properties for that image. 
			// Using the or ( || ) to assign defaults on fail or if not defined
			var imageEx = { "x": x || 0,
				"y": y || 0,
				"width": img.width,
				"height": img.height,
				"dx": dx || 0,
				"dy": dy || 0,
				"img": img,
				"speed": speed || 5,
				"hotspot": hspot || false,
				"hspotXOffset": hspotXOffset || 0,
				"hspotYOffset": hspotYOffset || 0
			};

			return imageEx;
		},
		updateImage: function (item, newUrl) {
			$.ajax({
				url: newUrl,
				type: 'GET',

				loading: function () { },
				success: function (result) { item.img.src = newUrl; },
				error: function () { Experience.debug.print('Error: ' + newUrl); }
			});

		}
	},
	isEventSupported: function (eventName) {
		var _el = document.createElement('div');
		var _eventName = 'on' + eventName;
		var isSupported = (_eventName in _el);
		if (!isSupported) {
			_el.setAttribute(_eventName, 'return;');
			isSupported = typeof _el[_eventName] == 'function';
		}
		_el = null;
		return isSupported;
	},
	fallback: {

		init: function () {
			Experience.isFallback = true;

			$('#experience #carousel').jcarousel({
				buttonPrevCallback: camryCarouselPrevClicked,
				buttonNextCallback: camryCarouselNextClicked,
				initCallback: camryCarouselInit,
				itemFirstInCallback: { onAfterAnimation: camryCarouselMoved },
				scroll: 1,
				start: 1,
				setupCallback: camryFinishCarouselSetup
			});

			$('#experience .hotspot-links .hotspot').click(function () {
				var overlay = $(this).attr('href');

				// move side arrows - was 200
				$('.jcarousel-prev').animate({ 'left': '-=200' }, 'medium');
				$('.jcarousel-next').animate({ 'left': '+=200' }, 'medium');

				// Only 1 #interior-flythrough so do the others first
				if (overlay != "#interior-flythrough") Experience.overlay.open(overlay, '#experience #overlayShadow, #experience #overlayBg');
				else Experience.overlay.open(overlay, "#experience #overlayShadow-interior-flythrough, #experience #overlayBg-interior-flythrough");

			});

			function camryCarouselInit(carousel) {
				$('#experienceNav a').live('click', function () {
					var location = $(this).attr('href').replace('#', '');
					var indexToSwitch = $('#experience .jcarousel-container ul.jcarousel-list > li').index($('#experience .jcarousel-container ul.jcarousel-list > li.' + location + ':first')) + 1;
					carousel.scroll(jQuery.jcarousel.intval(indexToSwitch));
					$('#experienceNav ul li').removeClass('current');
					$(this).parent('li').addClass('current');
				});
				$('#experience a.hotspot-scroll, #homeScreen-carousel a, .final-frame-links a').click(function () {
					var location = $(this).attr('href').replace('#', '');
					var indexToSwitch = $('#experience .jcarousel-container ul.jcarousel-list > li').index($('#experience .jcarousel-container ul.jcarousel-list > li.' + location + ':first')) + 1;
					carousel.scroll(jQuery.jcarousel.intval(indexToSwitch));
				});
			}

			function camryFinishCarouselSetup(instanceID) {
				$('#experience .jcarousel-prev, #experience .jcarousel-next').click(function () {
					if (Experience.tracking.isFirstClick) {
						hh_WT.trackEvent({ 'WT.ac': ' VH_Camry_HPB_First_Interaction' }, true);
						Experience.tracking.isFirstClick = false;
					}
					var p = $('#experience #experienceNav li.current a').attr('href');
					Experience.tracking.section(p);
				});
			}

			function camryCarouselMoved(carousel, item, idx, state) {
				$('#experienceNav ul li').removeClass('current');
				$('#experienceNav ul li a.' + $(item).attr('class').split(' ')[0] + ':first').parent('li').addClass('current');

				if (idx == 1 || idx == $('#experience .jcarousel-container ul.jcarousel-list > li').length) $('#experienceNav').fadeOut();
				else $('#experienceNav').fadeIn();
			}

			function camryCarouselPrevClicked(carousel, button, enabled) {
				$('#experienceNav ul li').removeClass('current');

				if (!enabled) $('#experienceNav').fadeOut();
				else $('#experienceNav').fadeIn();
			}

			function camryCarouselNextClicked(carousel, button, enabled) {
				if (!enabled) $('#experienceNav').fadeOut();
				else $('#experienceNav').fadeIn();
			}

			// Activate after Carousel finshed

			Experience.overlay.initCloseBtn('#experience .overlay .close a', '#experience #overlayShadow, #experience #overlayBg', true);
			Experience.overlay.initCloseBtn('#experience .overlay-interior-flythrough .close a', '#experience #overlayShadow-interior-flythrough, #experience #overlayBg-interior-flythrough', true);
			$('.homepage #experience .final-frame-links').show();

			$('#experience #seat-adjustments .image-sequence').animateSequence({ 'count': 6, 'speed': 1300, 'width': 460, 'height': 259 });
			$('#experience #alloy-wheels .image-sequence').animateSequence({ 'count': 2, 'speed': 1600, 'width': 460, 'height': 259 });
			Experience.tracking.init();
			Experience.deeplinking.activate();

			$("#camryExperience, #experience").addClass('loaded');

		},

		screenCount: {
			visibleIndex: 1,
			isStart: function () {
				if (Experience.fallback.screenCount.visibleIndex == 1) return true;
				else return false;
			},
			set: function (amount) {
				Experience.fallback.screenCount.visibleIndex = Experience.fallback.screenCount.visibleIndex + amount;
			}
		}
	},
	touch: {
		isFirstInteraction: true,
		init: function () {
			// Copy video overlay
			$('#interior-flythrough, #overlayShadow.overlay').detach().appendTo('.experience-first-screen');
			$('.homepage #main').addClass('tablet');
			

			// Bind Video Overlay
			$('.experience-first-screen #camryTourOverly').click(function () {
				$('#interior-flythrough').show().animate({ 'top': '+=500' }, 'medium');
				hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_NewCamry_VideoClick' + Experience.user }, true);
				if (Experience.touch.isFirstInteraction) {
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_First_Interaction' + Experience.user }, true);
					Experience.touch.isFirstInteraction = false;
				}
				return false;
			});

			$('#explore-camry-touch a').click(function () {
				hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_NewCamry_LearnMore' + Experience.user }, true);
				if (Experience.touch.isFirstInteraction) {
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_First_Interaction' + Experience.user }, true);
					Experience.touch.isFirstInteraction = false;
				}
			});

			// Bind Close button
			$('#interior-flythrough .close').click(function () {
				$('#interior-flythrough').animate({ 'top': '-=500' }, 'medium', (
						function () {
							$('#interior-flythrough').hide();
						}
					));

				// Turn off the video
				if ($('#interior-flythrough').find('.brightcove-video-player').length >= 1) {
					var sVideoHTML = $('#interior-flythrough').find('.brightcove-video-player').html();
					$('#interior-flythrough').find('.brightcove-video-player').html(sVideoHTML);
				}

				return false;
			});

			// Fade it in for use
			$("#explore-camry-touch a, #camryTourOverly").fadeIn("slow");
		}
	},
	deeplinking: {
		setUrl: function (text) {
			location.hash = text;
		},
		getUrl: function () {
			var sCurrentUrl = location.href;
			var aCurrentUrl = sCurrentUrl.split('#');
			return aCurrentUrl;
		},

		activate: function () {
			var url = Experience.deeplinking.getUrl(),
				hash = url[1];
			if (hash) Experience.deeplinking.navigate(hash);

		},
		navigate: function (hash) {
			if (Experience.isFallback) {

				//fallback navigation
				var carousel = $('#experience #carousel').data('jcarousel'),
					$element = $('.hotspot[href="#' + hash + '"]'),
					slide = $element.closest('li').index() + 1;

				carousel.scroll(slide);
				$element.eq(0).trigger('click');

			} else {
				//canvas based navigation
				if ((hash == 'exterior') || (hash == 'interior') || (hash == 'performance') || (hash == 'safety')) {
					var $element = $('#experienceNav li a[href="#' + hash + '"]');
					$element.trigger('click');
				} else {
					if (hash == "colours") Experience.section.jumpForwardTo(152);
					else if (hash == "exterior-1") Experience.section.jumpForwardTo(285);
					else if (hash == "interior-2") Experience.section.jumpForwardTo(585);
					else if (hash == "interior-3") Experience.section.jumpForwardTo(705);
					else if (hash == "performance-2") Experience.section.jumpForwardTo(986);
					else if (hash == "safety-2") Experience.section.jumpForwardTo(1140);
					else if (hash == "safety-3") Experience.section.jumpForwardTo(1231);
				}
			}
		}
	},
	tracking: {
		isFirstClick: true,
		isColourInteractionFirstClick: true,
		init: function () {
			var _items = '#experience .colour-picker-container a, .custom-tracking-internal, #experience .hotspot, #experience #experienceNav li a, #experience .final-frame-links a, #experience .hotspot-scroll, #experience #experience-previous, #experience #experience-next, #homeScreen a',
				_type = Experience.user;

			// initialise first click for inside the piece
			$(_items).click(function () {
				var _trackingCode = $(this).attr('rel');
				Experience.tracking.click(_trackingCode, _type);
			});

			$('#experience .colour-picker-container a').click(function () {
				if (Experience.tracking.isColourInteractionFirstClick) {
					hh_WT.trackEvent({ 'WT.ac': ' VH_Camry_HPB_Exterior_ColourPicker_Interaction' + _type }, true);
					Experience.tracking.isColourInteractionFirstClick = false;
				}
			});

		},
		click: function (_trackingCode, _type) {
			if (Experience.tracking.isFirstClick) {
				hh_WT.trackEvent({ 'WT.ac': ' VH_Camry_HPB_First_Interaction' + _type }, true);
				Experience.tracking.isFirstClick = false;
			}
			// make sure there is a tracking code on the element
			if (_trackingCode != undefined) {
				hh_WT.trackEvent({ 'WT.ac': _trackingCode + _type }, true);
			}
		},
		section: function (element, user) {
			if (user === undefined) var _type = Experience.user;
			// Send tracking to arrows 
			switch (element) {
				case '#exterior':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Exterior_Arrow_click' + _type }, true);
					break;
				case '#interior':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Interior_Arrow_click' + _type }, true);
					break;
				case '#performance':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Performance_Arrow_click' + _type }, true);
					break;
				case '#safety':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Safety_Arrow_click' + _type }, true);
					break;
				case '#final':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Events' + _type }, true);
					break;
			}
		},
		keyboard: function (element, user) {
			if (user === undefined) var _type = Experience.user;
			// Send tracking to arrows 
			switch (element) {
				case '#exterior':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Exterior_Arrow_keyboardPress' + _type }, true);
					break;
				case '#interior':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Interior_Arrow_keyboardPress' + _type }, true);
					break;
				case '#performance':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Performance_Arrow_keyboardPress' + _type }, true);
					break;
				case '#safety':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Safety_Arrow_keyboardPress' + _type }, true);
					break;
				case '#final':
					hh_WT.trackEvent({ 'WT.ac': 'VH_Camry_HPB_Events' + _type }, true);
					break;
			}
		}
	},
	debug: {
		print: function (msg) {
			if (typeof console != "undefined") console.log(msg);
		}
	}
};

// DOM Ready Load --------------------------------------------------------
$(document).ready(function () {
	// Globals
	canvas = document.getElementById("camryExperience");

	// Bind Buttons-------------------
//	$("#explore-camry").click(function () {
//		// Fire Tracking
//		var trackingCode = $(this).attr('rel');
//		hh_WT.trackEvent({ 'WT.ac': trackingCode + '_' + BrowserDetect.OS + '_' + BrowserDetect.browser + '_' + BrowserDetect.version }, true);


//		// Do the transition
//		$(".homepage #main #main-content #content .content-row").fadeIn("slow");
//		$(this).fadeOut(
//					function () {
//						$("#camryExperience, #experience").addClass('loaded');
//						// Load the fallback or the Canvas piece?
//						if (canvas && canvas.getContext) {
//							Experience.init();
//							$("#camryExperience, #experience").addClass('canvas');
//						} else {
//							Experience.fallback.init();
//							$("#.homepage #main #main-content #content").addClass('fallback');
//						}
//					}
//				);
//		// Remove the first screen
//		$('.experience-first-screen').remove();
//		return false;
//	});

	// Which Piece?
	if (Experience.isEventSupported("touchstart")) {
		// Touch Devices
		Experience.touch.init();
	} else if (canvas && canvas.getContext) {
		// Canvas support
		Experience.preload();
	} else {
		Experience.fallback.init();
		$("#.homepage #main #main-content #content").addClass('fallback');
//		// Everyone else
//		var url = Experience.deeplinking.getUrl(), hash = url[1];

//		// Check for deeplink
//		if (hash) $("#explore-camry").trigger('click');
//		else $("#explore-camry").fadeIn();
	}

});

/* 
PreLoader plugin to get image files
v0.3
@param: args = Array of image paths relative to the current page.
@param: callback = Call back function on completion

#TODO: Add a progress bar counter
NB: This does not return on itself. It is standalone.
*/
(function ($) {
	$.fn.preLoadImages = function (args, callback) {
		var cache = [],  tempCount = 0, args_len = args.length;

		// Collect images
		for (var i = args_len; i--; ) {
			var cacheImage = document.createElement('img');
			cacheImage.src = args[i];
			$.ajax({ url: cacheImage.src, 
				success: function () { tempCount++; },
				error: function (jqXHR, textStatus, errorThrown) { }
			});

			cache.push(cacheImage);
		}
		// Set interval to see if all images have loaded
		var checkLoad = setInterval(function () {
			if (tempCount == args_len) {

				// all images have loaded so execute callback and clear interval
				if (typeof callback == 'function') {
					callback.call(this);
					clearInterval(checkLoad);
				}
			}
		}, 17);
	};
})(jQuery);
/*
Animate a sequence of images
v0.2
@params - sprite, width, height, autoloop, touch, speed, current
*/
(function ($) {

	var timer;
	var defaults = { autoloop: false, touch: false, speed: 200, current: 0 };
	var methods = {
		init: function (params) {
			params = $.extend(defaults, params);
			
			return this.each(function(){
				var $this = $(this),
				data = $this.data('params');
				 
				// If the plugin hasn't been initialized yet
				if (!data) {
					$(this).data({
						target : $this,
						params : params
					});
				}

				if (params.autoloop) {
					methods.startLoop($this, params);
				}
			});
		},
		startLoop: function ($this, params) {
			if (!$this) {
				$this = $(this);
			}
			if (!params) {
				params = defaults;
			}
			if($this.data('params')) {
				params = $this.data('params');
			}
			
			timer = setInterval(function () {
				if (params.current >= (params.count - 1)) {
					params.current = 0;
				}
				else {
					params.current++;
				}
				methods.startAnimation($this, params.width, params.current);
			}, params.speed);
		},
		startAnimation: function ($this, width, current) {
			$this.css('backgroundPosition', '-' + (width * current) + 'px 0px');
		},
		stopLoop: function ($this, params) {
			clearInterval(timer);
		}
	}
	$.fn.animateSequence = function (params) {
		if (methods[params]) {
			return methods[params].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof params === 'object' || !params) {
			return methods.init.apply(this, arguments);
		}
		else {
			$.error('Method ' + params.method + ' does not exist on jQuery.animateSequence');
		}
	};
})(jQuery);