$(document).ready(function() {
	var strip = $('#strip');
	var zoomed = $('#zoomed');
	var items = $('#strip li').get();
	
	var zoomedLeft = zoomed.offset().left;
	var zoomedWidth = zoomed.width();
	var windowWidth = $(window).width();
	
	var itemWidth = 200;
	
	var left = 0;
	var delta = 0;
	var moveStripInterval = 0;
	var clone1, clone2;
	var cloneOf;
	
	var selected = 0;
	var changing = false;	
	
	function handleUnder(item) {
		if (cloneOf != item) {
			if (cloneOf) {
				clone1.remove();
				clone2.remove();
			}
			cloneOf = item;
			clone1 = $(item).clone(true).insertAfter(item);
			clone2 = $(item).clone(true).insertAfter(item);
		}
	}
	
	function moveStrip() {
		left += delta;;
		
		/* Handle ends for infinite scroll */
		if (left > 0) {
			var firstItem = items[0];
			var lastItem = items.pop();
			items.unshift(lastItem);
			$(lastItem).insertBefore(firstItem);
			left -= itemWidth;
		} else if (left < -itemWidth) {
			var lastItem = items[items.length - 1];
			var firstItem = items.shift();
			items.push(firstItem);
			$(firstItem).insertAfter(lastItem);
			left += itemWidth;
		}
		
		strip.css("left", left + "px");
		
		/* Handle under zoomed */
		for (var i = 0; i < items.length; i++) {
			var itemLeft = $(items[i]).offset().left;
			if (itemLeft + itemWidth > zoomedLeft) {
				handleUnder(items[i]);
				break;
			}
		}
	}
	
	function updateMoveStrip(pageX) {
		if (moveStripInterval == 0) {
			moveStripInterval = setInterval(moveStrip, 13);
		}
		var availableArea;
		var distance;
		if (pageX < zoomedLeft) {
			availableArea = zoomedLeft;
			distance = (zoomedLeft - pageX);
		} else if (pageX > zoomedLeft + zoomedWidth) {
			availableArea = windowWidth - zoomedLeft - zoomedWidth;
			distance = (zoomedLeft + zoomedWidth - pageX);
		}
		
		delta = 5 * (distance / availableArea);
	}
	
	function stopMoveStrip() {
		clearInterval(moveStripInterval);
		moveStripInterval = 0;
	}
	
	strip.mouseover(function(ev) {
		updateMoveStrip(ev.pageX);
	});
	strip.mouseout(function() {
		stopMoveStrip();
	});
	strip.mousemove(function(ev) {
		updateMoveStrip(ev.pageX);
	});
	
	function escapeHtml(text) {
		text = text.replace(/&/, "&amp;");
		text = text.replace(/</, "&lt;");
		text = text.replace(/>/, "&gt;");
		return text;
	}
	
	function centerImage() {
		var h = $('#zoomed .wrap img').height();
		var newMargin = Math.floor( (531 - h) / 2);
		$('#zoomed .wrap img').css({ marginTop: newMargin });
	};
	
	function scrollToZoomed() {
		var targetOffset = $('#zoomed').offset().top;
		$('html,body').animate({scrollTop: targetOffset}, 1000);
	}

	function selectItem(i) {
		selected = i;

		if( changing ) {
			return;
		}
		changing = true;
		
		var existingImage = $('#zoomed img');
		existingImage.fadeOut(function() {
			//var newImage = $('#zoomed .wrap').load()$("<img src=\"" + zooms[selected].image + "\" alt=\"\" border=\"0\" />").insertAfter(existingImage);
			var newImage = new Image();
			$(newImage).load(function(){
				$('#zoomed .wrap').append(this);
				existingImage.remove();
				$('#zoomed img').hide().fadeIn();
				centerImage();
			}).attr('src', zooms[selected].image);			
			
			changing = false;
		});
		
		scrollToZoomed();
	}
	
	function setupItem(i) {
		$(items[i]).click(function(ev) {
			selectItem(i);
			ev.preventDefault();
		});
	}
	
	for (var i = 0; i < items.length; i++) {
		setupItem(i);
	}
		
	$("#prev").click(function(ev) {
		var i = selected - 1;
		if (i < 0)
			i = items.length - 1;
		
		selectItem(i);
		ev.preventDefault();
	});
		
	$("#next").click(function(ev) {
		var i = selected + 1;
		if (i >= items.length)
			i = 0;
		
		selectItem(i);
		ev.preventDefault();
	});
	
	$(window).resize(function() {
		zoomedLeft = zoomed.offset().left;
		windowWidth = $(window).width();
		moveStrip();
	});
	
	moveStrip();
});