$(function(){
	tour.init();
});

/*-------------------------------------
	:: Tour Class
--------------------------------------*/

//Handles all direction of interactivity for Take a Tour.
var tour = {
	menuItem: $('#tour-nav .menu-item'),
	copy: $('.copy'),
	screens: $('.screen'),
	hotspots: $('.hot-spot'),
	copyEnd: {
		left: '275px'
	},
	screenEnd: {
		left: '660px',
		top: '15px'
	},
	speed: 500,
	easing: 'linear',
	
	init: function() {
		tour.menuItem.click(function(){
			var $this = $(this),
				idx = $this.attr('data-index');
			tour.removeActiveMenu();
			$this.addClass('selected');
			tour.showSlide(idx);
		});
		if(!supports('animation')) { tour.hotspotGlow(); }
		tour.hotspotHover();
		tour.menuItem.first().click();
	},
	
	removeActiveMenu: function() {
		tour.menuItem.removeClass('selected');
	},
	
	hideSlides: function() {
		tour.screens.removeClass('show');
		tour.copy.removeClass('show');
	},
	
	showSlide: function(idx) {
		var hasTransitions = supports('transition'),
			hasTransforms = supports('transform');
		if(hasTransitions && hasTransforms) {
			tour.hideSlides();
			$(tour.screens[idx]).addClass('show');
			$(tour.copy[idx]).addClass('show');
		}
		else {
			tour.fallbackAnimation(idx);
		}
	},
	
	fallbackAnimation: function(idx) {	
		var copy = $('.copy:eq('+ idx +')'),
			screen = $('.screen:eq('+ idx +')');
			
		(function hideAll() {
			tour.copy.stop().animate({
				left: '-600px'
			}, tour.speed, tour.easing);
			tour.screens.stop().animate({
				left: '-600px',
				top: '-450px'
			}, tour.speed, tour.easing);
		})();
		
		$(screen).stop().animate({
			left: tour.screenEnd.left,
			top: tour.screenEnd.top
		}, tour.speed, tour.easing);
		$(copy).stop().delay(500).animate({
			left: tour.copyEnd.left,
			opacity: 1
		}, tour.speed, tour.easing);
	},
	
	hotspotHover: function() {
		var toolTip = $('<div id="tip"></div>'),
			$this;
		
		tour.hotspots.hover(function(){
			$this = $(this),
			tipTxt = $this.attr('data-tip');
			
			$this.css('z-index', '9000').html('<div id="tip">'+ tipTxt +'</div>');
		}, function(){
			$this.css('z-index', '100');
			$('#tip').remove();
		});
	},
	
	hotspotGlow: function() {
		var begin = .3,
			end = .85,
			ms = 100,
			i = begin,
			t = '';
		
		function up() { 
			if(i >= end) {
				t = clearTimeout(up)
				t = setTimeout(down, ms);
			}
			else {
				tour.hotspots.css('background-color', 'rgba(0,158,187,'+ i +')');
				t = setTimeout(up, ms);
				i = i + .1;
			}
		}
		
		function down() {
			if(i <= begin) {
				t = clearTimeout(down)
				t = setTimeout(up, ms);
			}
			else {
				tour.hotspots.css('background-color', 'rgba(0,158,187,'+ i +')');
				t = setTimeout(down, ms);
				i = i - .1;
			}
		}
		
		up();
	}
};