initGradients();
initParallax();

function initFades() {
	var time = 500;
	
	$(function() {
		$('#nav .hover').css({
			'display': 'block',
			'opacity': 0
		});
		
		$('#nav .item').hover(function() {
			$('.hover', this).stop().animate({
				'opacity': 1
			}, time);
		}, function() {
			$('.hover', this).stop().animate({
				'opacity': 0
			}, time);
			;
		});
	});
}

function initGradients() {
	$(function() {
		$('#rainbow').each(function() {
			var el = this;
			// Parse the inputs
			var from = '#ffffff', to = '#000000';
			var
				fR = parseInt(from.substring(1, 3), 16),
				fG = parseInt(from.substring(3, 5), 16),
				fB = parseInt(from.substring(5, 7), 16),
				tR = parseInt(to.substring(1, 3), 16),
				tG = parseInt(to.substring(3, 5), 16),
				tB = parseInt(to.substring(5, 7), 16);

			
			var h = $(this).height() * 1.2;
			var html;
			
			if (this.initHTML)
				html = this.initHTML;
			else
				html = this.innerHTML;
			
			this.initHTML = html;
			this.innerHTML = '';
			
			for (var i = 0; i < h; i++) {
				var c = '#' +
					(Math.floor(fR * (h - i) / h + tR * (i / h))).toString(16) +
					(Math.floor(fG * (h - i) / h + tG * (i / h))).toString(16) +
					(Math.floor(fB * (h - i) / h + tB * (i / h))).toString(16);

				$('<span class="rainbow rainbow-' + i + '" style="color: ' + c + ';"><span style="top: ' + (-i - 1) + 'px;">' + html + '</span></span>').appendTo(this);
			}
			
			$('<span class="dolly">' + html + '</span>').appendTo(this);

		});
		
	});
}

function d(str) {
	$('#d').append('<p>' + str + '</p>');
}

function initParallax() {
	var time = 30000;
	var stage = 800;
	var offset = 30;
	
	$(function() {
		$('.blue').each(function() {
			var self = this;
			
			$(this).load(function() {
				d('Image loaded: ' + this.id);
				var z = $(self).css('z-index');
				var w = $(self).width()/3;
				var pos = -w/3  - (z-1) * offset;
				
				$(self).css({ 'right': pos + 'px', 'display': 'block' });
				
				d('Width: ' + w);
				d('z-index: ' + z);
				d('Right offset: ' + pos);
				d('Moving this far: ' + (stage + w));
				d('.');
				
				$(self).animate({
					'right': (stage + pos * -2) + 'px'
				}, time);
			})
			
		});
		
	})
}