var slideTimeout = 10;
var slideMode = 'square';

// used only if slideMode = static
var slideStep = 10;

// used for slideMode = (linear | square)
var slideStepMin = 2;
var slideStepMax = 15;

// use for slideMode = square
var slidePower = .9;

jQuery(function($) {
	var more;
	$('#projectPreview').after(
		more = $.DIV()
			.append($('#projectDetails, #projectDescription, #projectFeatures'))
			.hide()
	).append(
		$.A({'id': 'projectMoreInfo'}, 'more info').click(function() {
			$(this).toggleClass('toggled');
			more.slideToggle();
		})
	);

	(ajaxize = function() {
		$('#projectNav a').click(function() {
			var dir = $(this).hasClass('prev') ? 1 : -1;
			//alert("getting " + this.href);
			$.getJSON(this.href, {ajax: true}, function(json) {
				$('#projectNav').replaceWith(json.nav);
				more.empty().append(json.details);
				$('#projectNav a').click(function() { return false; });

				//alert(json.preview);
				var src = json.preview.match(/src='(.*)'/)[1];
				var tmpImage = new Image();
				tmpImage.onload = function () {
					/*
					alert(this.width);
				// When loaded, get its size by using
				// theImageObject.width and theImageObject.height
				};
				tmpImage.src = src;
				// We set the src after onload because of IE's caching problem.

				return;
				*/


				//var placeholder = $.DIV({}, json.preview);
				//placeholder.find('img').load(function() {
					/*
					alert($('#projectPreview img').offset().left);
					//alert('loaded new image');
					$('#projectPreview img').attr({src: this.src});
					*/

					var oldimg = $('#projectPreview img');
					var newimg = $(this);

					//alert(newimg.width() + ' ... ' + this.width);

					//var oldoffset = oldimg.offset().left;
					var oldoffset = ($('#projectPreview').width() - oldimg.width()) / 2;
					var newoffset = ($('#projectPreview').width() - this.width) / 2;
					var offset = oldoffset > newoffset ? oldoffset : newoffset;

					var ioffset;
					var target;
					if(dir > 0) {
						ioffset = - this.width - (oldoffset > newoffset ? 0 : (newoffset - oldoffset));
						target = -ioffset + newoffset;
					} else {
						ioffset = $('#projectPreview').width() + (oldoffset > newoffset ? 0 : (newoffset - oldoffset));
						target = ioffset - newoffset;
					}

					/*
					alert(
						"dir: " + dir + "\n" +
						"oldoffset: " + oldoffset + "\n" +
						"newoffset: " + newoffset + "\n" +
						"offset: " + offset + "\n" +
						"ioffset: " + ioffset + "\n" +
						"target: " + target
					);
					*/

					var current = 0;
					//var target = ioffset - newoffset;

					oldimg.css({
						position: 'absolute',
						top: 0,
						left: oldoffset
					});
					newimg.css({
						position: 'absolute',
						top: 0,
						left: ioffset
					}).appendTo('#projectPreview');

					var interval = setInterval(function() {
						var step;
						if(slideMode == 'static')
							step = slideStep;
						else if(slideMode == 'linear') {
							var diff = Math.min(current, target - current) / target * 2;
							step = slideStepMin + diff * (slideStepMax - slideStepMin);
						} else if(slideMode == 'square') {
							var diff = Math.min(current, target - current) / target * 2;
							step = slideStepMin + Math.pow(diff, slidePower) * (slideStepMax - slideStepMin);
						}
						current += step;

						if(current >= target) {
							clearInterval(interval);
							oldimg.remove();
							newimg.css({left: newoffset});

							ajaxize();
						} else {
							oldimg.css({left: oldoffset + dir * current});
							newimg.css({left: ioffset + dir * current});
						}
					}, slideTimeout);
				//})
				}
				tmpImage.src = src;

				//ajaxize();
			});
			return false;
		});
	})();
});