// SETTINGS
var imgList			= Array();
var imgLink			= Array();
var imgBorderWidth	= 8;		/* border thickness on images (scales by imgSmallSize) */
var imgSmallSize	= 0.6;		/* size factor, 0.5 = 50% */
var imgMargin		= 25;		/* margin between container div and left/top/right/bottom */
var imgBackOpacity	= 0.5;		/* faded out opacity, range between 0 and 1 */
var scrollDuration	= 600;		/* milliseconds */
var scrollRestart	= 1;		/* seconds */
var scrollPause		= 5;		/* seconds */


// INTERNALS
var autoScroller		= null;
var imgWidth			= Array();
var imgCurrent			= 0;
var scrollerH			= 0;
var scrollerW			= 0;
var scrollerInitiated	= false;
var imgBigHeight		= 0;
var imgSmallHeight		= 0;
var imgBigTop			= 0;
var imgSmallTop			= 0;
var imgLoaded			= 0;


$(document).ready(function(){

	$("#scroller img").each( function() {
		imgList[imgList.length] = $(this).attr("src");
		imgLink[imgLink.length] = $(this).attr("rel");
		$(this).remove();
	});

	scrollerH = parseInt($("#scroller").height())-20;
	scrollerW = parseInt($("#scroller").width());
	imgBigHeight = scrollerH-(imgMargin*2);
	imgBigTop = (scrollerH-(imgBigHeight+(imgBorderWidth*2)))/2;
	imgSmallHeight = imgBigHeight * imgSmallSize;
	imgSmallTop = (scrollerH-(imgSmallHeight+(imgBorderWidth*2)))/2;

	imgTotal = imgList.length;
	for( i in imgList ) {
		var imgTemp = $("<img id=\"scrollerImage"+i+"\" src=\"" + imgList[i] + "\" rel=\""+i+"\" />").appendTo("#scroller");
		imgTemp.css({
			"height":imgBigHeight+"px",
			"display":"block",
			"margin-left":"-3000px",
			"z-index":"0",
			"opacity":"0",
			"border-width":imgBorderWidth+"px"
		}).one("load",function() {
			imgLoaded++;
			imgWidth[parseInt($(this).attr("rel"))] = parseFloat($(this).outerWidth());
			thisLink = imgLink[parseInt($(this).attr("rel"))];
			$(this).css({
				"display":"none",
				"border-width":parseInt(imgBorderWidth*imgSmallSize)+"px",
				"margin-left":"auto"
			}).removeAttr("rel").attr("rel",thisLink);
		}).each( function() {
			if(this.complete) $(this).trigger("load");
		});
	}
	var txtTemp = $("<div id=\"showing\"></div>").appendTo("#scroller");
	txtTemp.css({
		"color":"rgb(180,180,180)",
		"text-align":"center",
		"bottom":"5px",
		"width":"100%",
		"position":"absolute"
	});

	initScroller();

});

function initScroller() {

	if( imgLoaded != imgTotal && !scrollerInitiated ) {
		setTimeout( initScroller, 500 );
		return;
	}
	scrollerInitiated = true;

	var t = 0;
	var p = t > 0 ? t - 1 : imgTotal - 1;
	var n = t < imgTotal ? t + 1 : 0;
	var x = n < imgTotal ? n + 1 : 0;

	$("#showing").text((t+1)+" / "+imgTotal);
	$("#scrollerImage"+t).css({
		"display":"block",
		"top":imgBigTop+"px",
		"z-index":"3",
		"cursor":"pointer",
		"left": parseInt((scrollerW/2)-(imgWidth[0]/2))+"px",
		"border-width":imgBorderWidth+"px",
		"opacity":"1"
	}).click( function() {
		clickImage( $(this).attr("rel") );
//		clickImage( $(this).attr("src") );
	});
	$("#scrollerImage"+p).css({
		"display":"block",
		"top":imgSmallTop+"px",
		"height":imgSmallHeight+"px",
		"z-index":"2",
		"left": imgMargin+"px",
		"cursor":"w-resize",
		"opacity":imgBackOpacity
	}).click( scrollLeft );

	$("#scrollerImage"+n).css({
		"display":"block",
		"top":imgSmallTop+"px",
		"margin-left":"-3000px",
		"height":imgSmallHeight+"px",
		"z-index":"2",
		"cursor":"e-resize",
		"opacity":imgBackOpacity
	}).click( scrollRight );
	var tmpW = parseFloat($("#scrollerImage"+n).outerWidth());
	$("#scrollerImage"+n).css({
		"margin-left":"auto",
		"left": parseInt((scrollerW-imgMargin)-tmpW)+"px"
	});

	startAutoScroll();
	$("#scroller").hover( function() {
		stopAutoScroll();
	}, function() {
		stopAutoScroll();
		setTimeout( startAutoScroll, ( scrollRestart-scrollPause ) * 1000 );
	});
}

function clickImage( s ) {
	//alert( s );
	window.open( s, "popImage" );
}

function scrollRight() {
	stopAutoScroll();
	imgCurrent = animateRight( imgCurrent )
}

function scrollLeft() {
	stopAutoScroll();
	imgCurrent = animateLeft( imgCurrent )
}

function startAutoScroll() {
	if( autoScroller != null ) return;
	autoScroller = setTimeout( function() {
		imgCurrent = animateRight( imgCurrent );
		autoScroller = null;
		startAutoScroll();
	}, scrollPause * 1000 );
}

function stopAutoScroll() {
	if( autoScroller ) {
		clearTimeout( autoScroller );
	}
	autoScroller = null;
}

function animateRight( t ) {
	t = t || 0;
	var p = t > 0 ? t - 1 : imgTotal - 1;
	var n = t < (imgTotal - 1) ? t + 1 : 0;
	var x = n < (imgTotal - 1) ? n + 1 : 0;

	$("#scrollerImage"+t).css("z-index","3");
	$("#scrollerImage"+p).css("z-index","2");
	$("#scrollerImage"+n).css("z-index","2");
	$("#scrollerImage"+x).css("z-index","1");

	$("#scrollerImage"+t).animate({
		"left":imgMargin+"px",
		"height":imgSmallHeight+"px",
		"top":imgSmallTop+"px",
		"border-width":parseInt(imgBorderWidth*imgSmallSize)+"px",
		"opacity":imgBackOpacity
	}, {
		duration: scrollDuration,
		complete: function() {
			$("#scrollerImage"+p).css("cursor","default");
			$("#scrollerImage"+t).unbind("click").click( scrollLeft ).css("cursor","w-resize");
			$("#scrollerImage"+n).unbind("click").click( function() {
				clickImage( $(this).attr("rel") );
//				clickImage( $(this).attr("src") );
			}).css("cursor","pointer");
			$("#scrollerImage"+x).unbind("click").click( scrollRight ).css("cursor","e-resize");
			$("#showing").text((n+1)+" / "+imgTotal);
		}
	});
	$("#scrollerImage"+n).animate({
		"left":parseInt((scrollerW/2)-(imgWidth[n]/2))+"px",
		"height":imgBigHeight+"px",
		"top":imgBigTop+"px",
		"border-width":imgBorderWidth+"px",
		"opacity":"1"
	}, scrollDuration);

	if( p == x ) {
		$("#scrollerImage"+p).animate({
			"left":"+=100px",
			"opacity":"0"
		}, {
			duration: scrollDuration/2,
			complete: function() {
				$("#scrollerImage"+t).css({
					"z-index":"2"
				});
				$("#scrollerImage"+n).css({
					"z-index":"3"
				});
				var tmpW = parseFloat($("#scrollerImage"+p).outerWidth());
				$("#scrollerImage"+p).css({
					"left": parseInt((scrollerW-imgMargin)-tmpW-100)+"px"
				}).animate({
					"left":"+=100px",
					"opacity":imgBackOpacity
				}, scrollDuration/2 );
			}
		});
	} else {
		$("#scrollerImage"+p).animate({
			"left":"+=100px",
			"opacity":"0"
		}, {
			duration: scrollDuration/2,
			complete: function() {
				$(this).css("display","none");
				$("#scrollerImage"+t).css({
					"z-index":"2"
				});
				$("#scrollerImage"+n).css({
					"z-index":"3"
				});
			}
		});
		$("#scrollerImage"+x).css({
			"display":"block",
			"top":imgSmallTop+"px",
			"margin-left":"-3000px",
			"height":imgSmallHeight+"px",
			"opacity":imgBackOpacity,
			"z-index":"1"
		});
		var tmpW = parseFloat($("#scrollerImage"+x).outerWidth());
		$("#scrollerImage"+x).css({
			"margin-left":"auto",
			"left": parseInt((scrollerW-imgMargin)-tmpW-100)+"px"
		}).animate({
			"left":"+=100px"
		}, {
			duration: scrollDuration
		});
	}
	return n;
}


function animateLeft( t ) {
	t = t || 0;
	var p = t < (imgTotal - 1) ? t + 1 : 0;
	var n = t > 0 ? t - 1 : imgTotal - 1;
	var x = n > 0 ? n - 1 : imgTotal - 1;

	$("#scrollerImage"+t).css("z-index","3");
	$("#scrollerImage"+p).css("z-index","2");
	$("#scrollerImage"+n).css("z-index","2");
	$("#scrollerImage"+x).css("z-index","1");

	var tmpW = parseInt( (imgWidth[t]-(imgBorderWidth*2)) * imgSmallSize ) + (imgBorderWidth*2);
	$("#scrollerImage"+t).animate({
		"left":parseInt((scrollerW-imgMargin)-tmpW)+"px",
		"height":imgSmallHeight+"px",
		"top":imgSmallTop+"px",
		"border-width":imgBorderWidth+"px",
		"opacity":imgBackOpacity
	}, {
		duration: scrollDuration,
		complete: function() {
			$("#scrollerImage"+p).css("cursor","default");
			$("#scrollerImage"+t).unbind("click").click( scrollRight ).css("cursor","e-resize");
			$("#scrollerImage"+n).unbind("click").click( function() {
				clickImage( $(this).attr("rel") );
//				clickImage( $(this).attr("src") );
			}).css("cursor","pointer");
			$("#scrollerImage"+x).unbind("click").click( scrollLeft ).css("cursor","w-resize");
			$("#showing").text((n+1)+" / "+imgTotal);
		}
	});
	$("#scrollerImage"+n).animate({
		"left":parseInt((scrollerW/2)-(imgWidth[n]/2))+"px",
		"height":imgBigHeight+"px",
		"top":imgBigTop+"px",
		"border-width":parseInt(imgBorderWidth*imgSmallSize)+"px",
		"opacity":"1"
	}, scrollDuration);

	if( p == x ) {
		$("#scrollerImage"+p).animate({
			"left":"-=100px",
			"opacity":"0"
		}, {
			duration: scrollDuration/2,
			complete: function() {
				$("#scrollerImage"+t).css({
					"z-index":"2"
				});
				$("#scrollerImage"+n).css({
					"z-index":"3"
				});
				$("#scrollerImage"+p).css({
					"left": parseInt(imgMargin+100)+"px"
				}).animate({
					"left":"-=100px",
					"opacity":imgBackOpacity
				}, scrollDuration/2 );
			}
		});
	} else {
		$("#scrollerImage"+p).animate({
			"left":"-=100px",
			"opacity":"0"
		}, {
			duration: scrollDuration/2,
			complete: function() {
				$(this).css("display","none");
				$("#scrollerImage"+t).css({
					"z-index":"2"
				});
				$("#scrollerImage"+n).css({
					"z-index":"3"
				});
			}
		});
		$("#scrollerImage"+x).css({
			"display":"block",
			"top":imgSmallTop+"px",
			"height":imgSmallHeight+"px",
			"opacity":"0",
			"z-index":"1",
			"left":(imgMargin+100)+"px"
		}).animate({
			"left":imgMargin+"px",
			"opacity":imgBackOpacity
		}, {
			duration: scrollDuration
		});
	}
	return n;
}