// Scroll.js

/*

Usage:

<html>
<head>
<title></title>
<script language="JavaScript" src="Scroll.js"></script>
</head>

<body onload="InitScroll()">
<script language="Javascript">

var showControl = true; // Change this to false if you don't want to show the control buttons
var belowImage = true; // Change this to false if you want to show the control buttons above the image

ShowScrollImage("YourImage.jpg", showControl, belowImage);
<!--or-->
ShowScroll360Image("Your360Image.jpg", showControl, belowImage);

</script>

</body>
</html>

*/

var scroll360_flag = false;

var keyLeft;

var step = 1; // pixels
var speed = step;
var maxSpeed = speed * 10;
var interval = 20; // ms
var pause = 1000; // ms
var arrowSpeed = 0;

var dir_flag = true; // true when scrolling left
var play_flag = true;
var down_flag = false;
var scroll_flag = false;
var initialSpeed = ">>";

var timerID;
var scrollImage1;
var imagePosition1 = 0; // Reading from scrollImage1["style"][keyLeft]  doesn't work well with Firefox...

// Scroll
var returnPosition1 = 20; // pixels
var returnPosition2 = 20; // pixels
var pause = 1000; // ms
var lim = false;
var clientWidth = 0;
var leftPosition = 0;

// Scroll360
var margin = 20; // pixels
var scrollImage2;
var imagePosition2 = 0;

function ShowScrollImage(url, showControl, belowImage)
{
	scroll360_flag = false;
	if (showControl && !belowImage) {
		ShowScrollControl();
	}
	document.write("<img id='pic1' src='" + url + "'><br>");
	if (showControl && belowImage) {
		ShowScrollControl();
	}
}

function ShowScroll360Image(url, showControl, belowImage)
{
	scroll360_flag = true;
	if (showControl && !belowImage) {
		ShowScrollControl();
	}
	document.write("<nobr><img id='pic1' src='" + url + "'><img id='pic2'></nobr>");
	if (showControl && belowImage) {
		ShowScrollControl();
	}
}

function ShowScrollControl()
{
	document.write(
			  "<TABLE width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">",
			  " <TBODY>",
			  "  <TR>",
			  "   <TD>",
			  "    <TABLE id=\"cont1\" cellpadding=\"0\" cellspacing=\"4\" style=\"visibility: hidden; font-family: Century; font-size: 8px;\">",
			  "     <TBODY>",
			  "      <TR>",
			  "       <TD nowrap align=\"center\" width=\"70\" bgcolor=\"#cccccc\" onmousedown='ButtonClick(\"scroll\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-1\"><SPAN id=\"scroll\">Scroll Off</SPAN></FONT></TD>",
			  "       <TD nowrap width=\"16\"></TD>",
			  "       <TD nowrap width=\"50\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonClick(\"play\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-1\"><SPAN id=\"stop\">Stop</SPAN></FONT></TD>",
			  "       <TD nowrap width=\"40\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonClick(\"rev\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-1\">Rev.</FONT></TD>",
			  "       <TD nowrap width=\"24\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonClick(\"f\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-2\"><SPAN id=\"f\">&gt;</SPAN></FONT></TD>",
			  "       <TD nowrap width=\"24\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonClick(\"ff\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-2\"><SPAN id=\"ff\">&gt;&gt;</SPAN></FONT></TD>",
			  "       <TD nowrap width=\"24\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonClick(\"fff\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-2\"><SPAN id=\"fff\">&gt;&gt;&gt;</SPAN></FONT></TD>",
			  "       <TD nowrap width=\"16\"></TD>",
			  "       <TD nowrap width=\"30\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonUpDown(\"f_down\")' onmouseup='ButtonUpDown(\"f_up\")' onmouseout='ButtonUpDown(\"out\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-2\">&lt;--</FONT></TD>",
			  "       <TD nowrap width=\"30\" align=\"center\" bgcolor=\"#bbbb99\" onmousedown='ButtonUpDown(\"r_down\")' onmouseup='ButtonUpDown(\"r_up\")' onmouseout='ButtonUpDown(\"out\")' style=\"cursor:hand\"><FONT color=\"#000000\" size=\"-2\">--&gt;</FONT></TD>",
			  "       <TD nowrap width=\"16\"></TD>",
			  "      </TR>",
			  "     </TBODY>",
			  "    </TABLE>",
			  "   </TD>",
			  "   <TD id=\"cont2\" align=\"right\" nowrap width=\"100%\" style='visibility: hidden;'><A href=\"http://ww4.tiki.ne.jp/~mmurakami/setoy/map.html\" target=\"_blank\"><FONT size=\"-1\" color=\"#aaaa88\">JavaScript courtesy of M. Murakami</FONT></A></TD>",
			  "  </TR>",
			  " </TBODY>",
			  "</TABLE>"
			 );
}

function InitScroll()
{
	if (document.layers) {
//		alert("Netscape 4");
	} else if (document.all) {
//		alert("Internet Explorer");
		keyLeft = "posLeft";
	} else if (!document.all && document.getElementById) {
//		alert("Netscape 6 / Firefox");
		keyLeft = "left";
	}

	scrollImage1 = document.getElementById("pic1");

	if (document.referrer.search(/setoy/) > 0) {
		cont2["style"]["visibility"]  = "hidden";
	}

	scrollImage1["style"]["position"] = "relative";
	if (scroll360_flag) {
		scrollImage2 = document.getElementById("pic2");
		scrollImage2["style"]["position"] = "relative";
	}

	switch (initialSpeed) {
	case '>':
		speed = step;
		break;
	case '>>':
		speed = step * 4;
		break;
	case '>>>':
		speed = step * 16;
		break;
	}

	if (!scroll360_flag) {
		returnPosition1 += 20;
		returnPosition2 -= 10;
		if (document.body.clientWidth) {
			clientWidth = document.body.clientWidth;
			if (clientWidth < 80) {
				clientWidth = 80;
			}
			if (clientWidth > 2048) {
				clientWidth = 2048;
			}
		} else {
			clientWidth = 800;
			if (screen.width >= 800) {
				clientWidth = screen.width;
			}
			if (screen.width > 1280 && lim) {
				clientWidth = 1024;
			}
			returnPosition1 += 80;
		}
		leftPosition = clientWidth - (scrollImage1.width + returnPosition1);
		if ((clientWidth - returnPosition1) < scrollImage1.width) {
			SetButtons();
			StartMove();
		}
	} else {
		if (scrollImage2.src == "") {
			scrollImage2.src = scrollImage1.src;
		}
		SetButtons();
		StartMove();
	}
}

function StartMove()
{
	if (dir_flag) {
		MoveLeft();
	} else {
		MoveRight();
	}
}

function AdjustImagePositions()
{
	if (dir_flag) {
		if (imagePosition1 < -(scrollImage1.width + margin)) {
			imagePosition1 = imagePosition2 + scrollImage1.width + scrollImage2.width
		}
		if (imagePosition2 < -(scrollImage1.width + scrollImage2.width + margin)) {
			imagePosition2 = imagePosition1
		}
	} else {
		if (imagePosition1 > scrollImage2.width - margin) {
			imagePosition1 = imagePosition2;
		}
		if (imagePosition2 > -margin) {
			imagePosition2 = imagePosition1 - (scrollImage1.width + scrollImage2.width);
		}
	}
}

function MoveLeft()
{
	if (!scroll360_flag) {
		imagePosition1 -= speed;
		scrollImage1["style"][keyLeft] = imagePosition1;
		if (imagePosition1 > leftPosition) {
			timerID = setTimeout("MoveLeft()", interval)
		} else {
			dir_flag = false;
			Pause()
		}
	} else {
		imagePosition1 -= speed;
		imagePosition2 -= speed;
		AdjustImagePositions();
		scrollImage1["style"][keyLeft] = imagePosition1;
		scrollImage2["style"][keyLeft] = imagePosition2;
		timerID = setTimeout("MoveLeft()", interval);
	}
}

function MoveRight()
{
	if (!scroll360_flag) {
		imagePosition1 += speed;
		scrollImage1["style"][keyLeft] = imagePosition1;
		if (imagePosition1 < returnPosition2) {
			timerID = setTimeout("MoveRight()", interval);
		} else {
			dir_flag = true;
			Pause();
		}
	} else {
		imagePosition1 += speed;
		imagePosition2 += speed;
		AdjustImagePositions();
		scrollImage1["style"][keyLeft] = imagePosition1;
		scrollImage2["style"][keyLeft] = imagePosition2;
		timerID = setTimeout("MoveRight()", interval);
	}
}

function Pause()
{
	timerID = setTimeout("StartMove()", pause);
	SetButtons();
}

function SetButtons()
{
	var cont1 = document.getElementById("cont1");
	var cont2 = document.getElementById("cont2");
	var stop = document.getElementById("stop");
	var f = document.getElementById("f");
	var ff = document.getElementById("ff");
	var fff = document.getElementById("fff");
	var scroll = document.getElementById("scroll");

	if (!cont1) {
		return; // Controller is not shown
	}
	cont1.style.visibility  = "visible";
	cont2.style.visibility  = "visible";
	if (play_flag) {
		stop.innerHTML = "Stop";
	} else {
		stop.innerHTML = "Play";
	}
	if (dir_flag) {
		f.innerHTML = "&gt;";
		ff.innerHTML = "&gt;&gt;";
		fff.innerHTML = "&gt;&gt;&gt;";
	} else {
		f.innerHTML = "&lt;";
		ff.innerHTML = "&lt;&lt";
		fff.innerHTML = "&lt;&lt;&lt;";
	}
	if (scroll_flag) {
		scroll.innerHTML = "Scroll ON";
	} else {
		scroll.innerHTML = "Scroll Off";
	}
}

function ButtonClick(b)
{
	clearTimeout(timerID);
	switch (b) {
	case 'play':
		play_flag = !play_flag;
		break;
	case 'f':
		speed = step;
		play_flag = true;
		break;
	case 'ff':
		speed = step * 4;
		play_flag = true;
		break;
	case 'fff':
		speed = step * 16;
		play_flag = true;
		break;
	case 'rev':
		dir_flag = !dir_flag;
		break;
	case 'scroll':
		if (scroll_flag) {
			scroll_flag = false;
			dir_flag = true;
			play_flag = true;
		} else {
			scroll_flag = true;
			dir_flag = true;
			play_flag = false;
			scrollImage1["style"][keyLeft] = imagePosition1 = 0;
			if (scroll360_flag) {
				scrollImage2["style"][keyLeft] = imagePosition2 = 0;
			}
		}
		break;
	}
	if (play_flag) {
		scroll_flag = false;
	}
	SetButtons();
	if (play_flag) {
		scroll_flag = false;
		StartMove();
	}
}

function ArrowMoveRight()
{
	if (!scroll360_flag) {
		imagePosition1 -= arrowSpeed;
		scrollImage1["style"][keyLeft] = imagePosition1;
		if ((imagePosition1 > leftPosition) && (down_flag)) {
			if (arrowSpeed < maxSpeed) {
				arrowSpeed += 1
			}
			timerID = setTimeout("ArrowMoveRight()", interval);
		}
	} else {
		imagePosition1 -= arrowSpeed;
		imagePosition2 -= arrowSpeed;
		AdjustImagePositions();
		if (arrowSpeed < maxSpeed) {
			arrowSpeed += 1
		}
		scrollImage1["style"][keyLeft] = imagePosition1;
		scrollImage2["style"][keyLeft] = imagePosition2;
		if (down_flag) {
			timerID = setTimeout("ArrowMoveRight()", interval)
		}
	}
}

function ArrowMoveLeft()
{
	if (!scroll360_flag) {
		imagePosition1 += arrowSpeed;
		scrollImage1["style"][keyLeft] = imagePosition1;
		if ((imagePosition1 < returnPosition2) && (down_flag)) {
			if (arrowSpeed < maxSpeed) {
				arrowSpeed += 1
			}
			timerID = setTimeout("ArrowMoveLeft()", interval);
		}
	} else {
		imagePosition1 += arrowSpeed;
		imagePosition2 += arrowSpeed;
		AdjustImagePositions();
		if (arrowSpeed < maxSpeed) {
			arrowSpeed += 1
		}
		scrollImage1["style"][keyLeft] = imagePosition1;
		scrollImage2["style"][keyLeft] = imagePosition2;
		if (down_flag) {
			timerID = setTimeout("ArrowMoveLeft()", interval);
		}
	}
}

function ButtonUpDown(b)
{
	switch (b) {
	case 'r_down':
		dir_flag = true;
		down_flag = true;
		break;
	case 'f_down':
		dir_flag = false;
		down_flag = true;
		break;
	default:
		down_flag = false;
	}
	if (down_flag) {
		if (!play_flag) {
			arrowSpeed = 0;
		} else {
			arrowSpeed = speed;
		} 
		clearTimeout(timerID);
		play_flag = false;
		scroll_flag = false;
		SetButtons();
		if (dir_flag) {
			ArrowMoveRight();
		} else {
			ArrowMoveLeft();
		}
	}
}

function ChangeImage(url)
{
	scrollImage1.src = url;
	if (!scroll360_flag) {
		leftPosition = clientWidth - (scrollImage1.width + returnPosition1);
		imagePosition1 = 0; // Force reset
	} else {
		scrollImage2.src = url;
		imagePosition1 = imagePosition2 = 0; // Force reset
	}
}
