// Custom JavaScript animation programmed by vxFusion Ltd. studios - vxfusion.com

// animates the sidebar logos to move up and fade out repeatedly
		var i = 0;
		var t;
		var timer_is_on = 0;
		var getTimer;
		
		var position = 0;
		var introClass;
		
		//variables for the video
		var fps = 12; // how many frames per second
		var frameCount = 24; // number of frames in total
		var startXLoc = 155; // x location of first frame in the video sprite
		var frameGapWidth = 0; // number of pixels between each frame
		var frameWidth = 155; // width of each frame
		var frameHeight = 360; // height of each frame
		var frameDelay = Math.round(1000 / fps); // the delay between each frame in milliseconds

		// repeating function that controls the vertical videos (us, you, what, blog)
		function timedCount() {
			i++;
			try {
				position = position + frameWidth + frameGapWidth;
				tempPosition = position;
				$(introClass).css("background-position", "-" + tempPosition + "px 0px");
			}
			catch (error) {}
			
			if (i == frameCount) {
				i = 0;
				position = 0;
			}
			
			t = setTimeout("timedCount()", frameDelay);
		}

		// starts the javascript timer
		function doTimer() {
			if (!timer_is_on) {
				timer_is_on = 1;
				timedCount();
			}
		}

		// stops the javascript timer
		function stopCount() {
			clearTimeout(t);
			timer_is_on = 0;
		}

		// function to initialize scripts
		$(document).ready(function() {
			// starts the videos on mouseenter
			$(".nav a").mouseenter(function() {
				introClass = $(this);
				position = 0;
				i = 0;
				doTimer();
			});
			// stops the videos on mouse leave
			$(".nav a").mouseleave(function() {
				stopCount();
				$(this).css("background-position", "0px 0px");
			});
			
			// sidebar animation
			var speed1 = 5000;
			var speed2 = 7500;
			var speed3 = 10000;
			
			function animateSidebar() {
				$('#logo-01').animate({opacity: 1}, 0).delay(0).animate({opacity: 0, bottom: '+=350'}, speed1, "linear");
				$('#logo-02').animate({opacity: 1}, 0).delay(2000).animate({opacity: 0, bottom: '+=350'}, speed2, "linear");
				$('#logo-03').animate({opacity: 1}, 0).delay(4000).animate({opacity: 0, bottom: '+=350'}, speed1, "linear");
				$('#logo-04').animate({opacity: 1}, 0).delay(6000).animate({opacity: 0, bottom: '+=350'}, speed3, "linear");
				$('#logo-05').animate({opacity: 1}, 0).delay(9000).animate({opacity: 0, bottom: '+=350'}, speed1, "linear");
				$('#logo-06').animate({opacity: 1}, 0).delay(12000).animate({opacity: 0, bottom: '+=350'}, speed2, "linear");
				$('#logo-07').animate({opacity: 1}, 0).delay(15000).animate({opacity: 0, bottom: '+=350'}, speed2, "linear");
				$('#logo-08').animate({opacity: 1}, 0).delay(18200).animate({opacity: 0, bottom: '+=350'}, speed3, "linear");
				$('#logo-09').animate({opacity: 1}, 0).delay(22800).animate({opacity: 0, bottom: '+=350'}, speed1, "linear");
				$('#logo-10').animate({opacity: 1}, 0).delay(25000).animate({opacity: 0, bottom: '+=350'}, speed2, "linear");

				setTimeout(function() {
					$('#logo-01').css("bottom", "100px");
					$('#logo-02').css("bottom", "75px");
					$('#logo-03').css("bottom", "100px");
					$('#logo-04').css("bottom", "0px");
					$('#logo-05').css("bottom", "100px");
					$('#logo-06').css("bottom", "75px");
					$('#logo-07').css("bottom", "75px");
					$('#logo-08').css("bottom", "0px");
					$('#logo-09').css("bottom", "100px");
					$('#logo-10').css("bottom", "75px");
					animateSidebar();
				}, 33000);
			}			
			animateSidebar();
		});