$(document).ready(function() {
	
	/* Preload CSS images */
	$.preloadCssImages();

	var activeImage = {
		'height' : '40px',
		'width' : '40px',
		'marginLeft' : '-10px',
		'marginTop' : '-10px'
	};

	var inactiveImage = {
		'height' : '20px',
		'width' : '20px',
		'marginLeft': '0px',
		'marginTop': '0px'
	};
	
	/* Opacity on PNG-24 images screws up IE */ 
	if (!jQuery.browser.msie) {
		activeImage.opacity = 1.0;
		inactiveImage.opacity = 0.5;
	}
	
	var speed = 250;
	var $closeup = $("#closeup");
	$closeup.data('model', 'thelars');
	$closeup.data('finish', 'palisander');
	$closeup.data('nodeset', 'front');
	
	var setNavigationData = function(key, data) {
		var oldData = $closeup.data(key);
		$closeup.data(key, data);
		
		if (data != oldData && key == 'model') {
			$('#model-info div:not(.' + data + ')').fadeOut(speed, function() {
				$('#model-info div.' + data).fadeIn(speed);
			});
		}	
		
		/* Make sure Google Analytics sees this */
		pageTracker._trackPageview('/' + $closeup.data('model') + '/' + $closeup.data('finish') + '/');
		
		changeNodesAndImage(false);
	};
	
	var changeNodesAndImage = function(flip) {
		
		/* Product Image */
		var imagePath = getImagePath();
		
		/*
		if (flip) {
			// Flip animation
		} else {
			// Default animation
		}
		*/
		
		$('#closeup-image-wrapper').fadeOut(speed, function() {
			
			//$('#closeup-image-wrapper').addClass('loading');
			
			var src = 'images/' + imagePath;
			
			/* TODO: Solve the caching issue instead of loading the image every time */
			if (jQuery.browser.msie || jQuery.browser.opera)
				src += '?random=' + (new Date()).getTime();
				
			var img = new Image();
			img.src = src;
			
			$(img)
				.load(function() {
					
					$('#closeup-image-wrapper')
						.empty()
						.hide()
						.append(img)
						.fadeIn(speed);
					
					//$('#closeup-image-wrapper').removeClass('loading');
				})
				.error(function() {
					//alert("Error!");
				})
				.attr('id', 'closeup-image');				
		});
		
		//alert('#closeup-node-list li.' + $closeup.data('nodeset') + '.' + $closeup.data('model'));
		
		/* Nodes */
		
		$('#closeup-node-list li, #closeup-node-texts .node-text').fadeOut(speed);
		$('#closeup-node-list li a img').animate(inactiveImage, speed);
			
		setTimeout(function() {
			fadeNodeLink($('#closeup-node-list li.' + $closeup.data('nodeset') + '.' + $closeup.data('model') + ':first'));
		}, speed / 2);
	};
	
	var getImagePath = function() {
		return $closeup.data('model') + '/' + $closeup.data('finish') + '/' + $closeup.data('nodeset') + '.jpg';
	};
	
	/* Nodes and node links */	
	
	var fadeNodeLink = function($elem) {
		
		$elem.fadeIn(speed / 2, function() {
			
			var $next = $(this).nextAll('.' + $closeup.data('nodeset') + '.' + $closeup.data('model') + ':first');
			
			if ($next.length > 0)
				fadeNodeLink($next);
			
		});
	};
	
	/* Load Nodes and texts */
	//$('#closeup-nodes').load('/node-list.php', '', function() {
	//	$('#closeup-node-texts').load('/node-texts.php', '', function() {
			
			/* Node hovers */

			$('#closeup-node-list li img').hover(function() {

				var target = $(this).parent('a').attr('href');

				$(this).stop();
				$(this).animate(activeImage, speed);

				$(this).bind('mouseout', function() {
					$(this).stop();
					if ($(target).is(':hidden'))
						$(this).animate(inactiveImage, speed);
				});
			}, function() {
			});

			$('#closeup-node-list li a')
				.click(function() {

					$('#model-info div').fadeOut();

					var target = $(this).attr('href');
					
					/* Make sure Google Analytics sees this */
					pageTracker._trackPageview('/node/' + target.split('#')[1] + '/');
					
					
					$('#closeup-node-texts .node-text:note(:visible)').fadeOut();

					$('#closeup-node-list li:not(#' + $(this).parent().attr('id') + ')').find('a img').animate(inactiveImage, speed);


					var $node = $(target);

					if ($node.is(':hidden')) {
						$(this).bind('mouseout', function() {
							$(this).find('a img').animate(inactiveImage, speed);
						});

						$node.fadeIn();
					} else {
						$(this).find('a img').unbind('mouseout');

						$node.fadeOut();
					}

					return false;
				});

			/* Fade in initial nodes */

			fadeNodeLink($('#closeup-node-list li.' + $closeup.data('nodeset') + '.' + $closeup.data('model') + ':first'));

			/* Node Sets */

			$('#closeup-node-sets a').click(function() {

				var nodeSet = this.href.split('#')[1];
				setNavigationData('nodeset', nodeSet);

				var newHref = (nodeSet == "back") ? "#front" : "#back";

				$('#closeup-node-sets li a').attr('href', newHref);

				return false;
			});


			/* Navigation */

			$('#model li a').click(function() {

				var src = $(this).attr('href').split('#')[1];

				setNavigationData('model', src);

				$(this).addClass('selected');

				$(this).parent().siblings('li').each(function() {
					$(this).children().removeClass('selected');
				});

				//return false;
			});

			$('#finish li a').click(function() {

				var finish = $(this).attr('href').split('#')[1];

				$(this).parent().parent().find('li a').removeClass('selected');
				$(this).addClass('selected');

				setNavigationData('finish', finish);

				return false;
			});

			if (window.location.hash) {
				$('#model li#model-' + window.location.hash.substr(1) + ' a').click();
			}
			/*
			Cufon.replace('#closeup .node-text h2', {
				textShadow: '1px 1px #444'
			});
			*/
	//	});
	//});
		
});