/**
 * Important: you must have an external script reference to "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
 * preceding your call to this function or it will NOT WORK
 * Important: you must embed your call to this function inside $(document).ready() or it will NOT WORK
 * This function is highly dependent on the ID'ed elements and specified images
 * and their dimensions given below in the function body being accurate! Otherwise it will NOT WORK
 */
function frontpagescroller() {
	var framewidth = 208;
	var imagewidth = 4576;
	var Scrolling = {busy: false}; // Set to true when background image is scrolling
	var Animation1 = {busy: false};
	var Animation2 = {busy: false};
	$("#scroll_left").click(function() {
		// disable the link temporarily, because quick consecutive calls to this handler introduce buggy behaviour
		Animation1.busy = true;
		Animation2.busy = true;
        // Make an initial adjustment to ensure imag_marquee1 is to the RIGHT of img_marquee2
        $("#img_marquee2").css("left", String((Number($("#img_marquee2").css("left").replace("px", "")) - imagewidth) % imagewidth) + "px");
        $("#img_marquee1").css("left", String(Number($("#img_marquee2").css("left").replace("px", "")) + imagewidth) + "px");
        // End of initial adjustment
		var left1 = Number($("#img_marquee1").css("left").replace("px", ""));
		var left2 = Number($("#img_marquee2").css("left").replace("px", ""));
		var newleft1 = left1 - framewidth;
		var newleft2 = left2 - framewidth;
		var adjustedValues = false;
		if(Scrolling.busy === false) {
			Scrolling.busy = true;
			$("#img_marquee1").animate({left: newleft1 + "px"}, 1500, function(){
				Animation1.busy = false;
				if(Animation2.busy === false) {
					Scrolling.busy = false;
					if(adjustedValues === false) {
						adjustedValues = true;
						if(newleft2 < 0) {
							newleft2_before = newleft2; newleft1_before = newleft1;
							newleft2 %= imagewidth;
							newleft1 = newleft2 + imagewidth;
						}
						$("#img_marquee1").css("left", newleft1 + "px");
						$("#img_marquee2").css("left", newleft2 + "px");
					}
				}
			});
			$("#img_marquee2").animate({left: newleft2 + "px"}, 1500, function(){
				Animation2.busy = false;
				if(Animation1.busy === false) {
					Scrolling.busy = false;
					if(adjustedValues === false) {
						adjustedValues = true;
						if(newleft2 < 0) {
							newleft2_before = newleft2; newleft1_before = newleft1;
							newleft2 %= imagewidth;
							newleft1 = newleft2 + imagewidth;
						}
						$("#img_marquee1").css("left", newleft1 + "px");
						$("#img_marquee2").css("left", newleft2 + "px");
					}
				}
			});
		}
	});
	$("#scroll_right").click(function () {
		// disable the link temporarily, because quick consecutive calls to this handler introduce buggy behaviour
		Animation1.busy = true;
		Animation2.busy = true;
        // Make an initial adjustment to ensure imag_marquee1 is to the LEFT of img_marquee2
        $("#img_marquee2").css("left", String(Number($("#img_marquee2").css("left").replace("px", "")) % imagewidth) + "px");
        $("#img_marquee1").css("left", String(Number($("#img_marquee2").css("left").replace("px", "")) - imagewidth) + "px");
        // End of initial adjustment
		var left1 = Number($("#img_marquee1").css("left").replace("px", ""));
		var left2 = Number($("#img_marquee2").css("left").replace("px", ""));
		/*
		if(left2 > 0) {
			left1 %= imagewidth;
			left2 = left1 + imagewidth;
		}
		$("img_marquee1").css("left", left1 + "px");
		$("img_marquee2").css("left", left2 + "px");
		*/
		var newleft1 = left1 + framewidth;
		var newleft2 = left2 + framewidth;
		var adjustedValues = false;
		if(Scrolling.busy === false) {
			Scrolling.busy = true;
			$("#img_marquee1").animate({left: newleft1 + "px"}, 1500, function(){
				Animation1.busy = false;
				if(Animation2.busy === false) {
					Scrolling.busy = false;
					if(adjustedValues === false) {
						adjustedValues = true;
						if(newleft2 > 0) {
							newleft2_before = newleft2; newleft1_before = newleft1;
							newleft2 %= imagewidth;
							newleft1 = newleft2 - imagewidth;
						}
						$("#img_marquee1").css("left", newleft1 + "px");
						$("#img_marquee2").css("left", newleft2 + "px");
					}
				}
			});
			$("#img_marquee2").animate({left: newleft2 + "px"}, 1500, function(){
				Animation2.busy = false;
				if(Animation1.busy === false) {
					Scrolling.busy = false;
					if(adjustedValues === false) {
						adjustedValues = true;
						if(newleft2 > 0) {
							newleft2_before = newleft2; newleft1_before = newleft1;
							newleft2 %= imagewidth;
							newleft1 = newleft2 - imagewidth;
						}
						$("#img_marquee1").css("left", newleft1 + "px");
						$("#img_marquee2").css("left", newleft2 + "px");
					}
				}
			});
		}
	});
}