jQuery(document).ready(function () {
	floatpanel = jQuery(".floatpanel");
	if (floatpanel) {
		resizeThumbnails();
		jQuery(window).resize(resizeThumbnails);
		columnhide(); 
	}

	//floatpanel.css('top', -(floatpanel.height() + 100) + "px");

	init = true;
	jQuery("#page").mousemove(function () {
		if (init) {
			init = false;
			//panelIn();
		}
	});

	floatpanel.find("img").mouseover(function(e) {
		//alert('over ' + e.target);
	});
	floatpanel.find("img").mousemove(moveImage);
	floatpanel.find("img").mouseout(positionImage);
	jQuery(".viewer").find("img").mousemove(moveImage);
	
	
	jQuery(window).resize(function() {
	columnhide();
	});

	
	//alert('test ');
	});
	
function columnhide() {
	//alert('columnhide ');
		if ( jQuery('#sm').width() < 500)
		{
			jQuery("#multi").hide();
			jQuery("#single").show();
			//alert('if' + jQuery('#sm').width() );
		} else {
			//alert('else' + jQuery('#sm').width() );
			jQuery("#single").hide();
			jQuery("#multi").show();
		}
	
}





function moveImage(e) {
	jQuery(e.target).stop();
	var lItem = jQuery(e.target).closest("li")[0];
	var mousepos = Math.floor(e.pageX - jQuery(lItem).offset().left);
	var l2 = jQuery(lItem).width();
	var l1 = l2 - jQuery(e.target).width();
	var leftpos = mousepos * l1 / l2;
	if (Math.abs(jQuery(e.target).offset().left - jQuery(lItem).offset().left - leftpos) > 300)
	{
		jQuery(e.target).animate({left:leftpos},500,'linear');
	} else {
		jQuery(e.target).css('left', leftpos + "px");
	}	
}

function positionImage(e) {
	jQuery(e.target).stop();
	var lItem = jQuery(e.target).closest("li")[0];
	var l2 = jQuery(lItem).width();
	var offset = jQuery(e.target).offset().left - jQuery(lItem).offset().left;
	var add = (-offset % l2) < (l2 / 2) ? -offset % l2 : -l2 - offset % l2;
	jQuery(e.target).animate({left:offset + add },500);
}

function resizeThumbnails() {
	var t = floatpanel.find("li").outerWidth() + 16;
	var l = floatpanel.width();
	var n = Math.floor(l / t);
	var x = Math.floor((l - n * t) / n);
    floatpanel.find("li").css('margin', '1em ' + ((x - 1) / 2 + 8) + "px");
}

function panelIn() {
	return jQuery(".floatpanel").animate({ top: 0 }, 2000);
}