//
// CSS photo bar
// by J. David Reynolds
//

var rotateImages = new Array(
  "rotate/rotate5_cookie.jpg",
  "rotate/rotate7_ciybelieve.jpg",
  "rotate/rotate6.jpg",
  "rotate/rotate8.jpg",
  "rotate/rotate1.jpg",
  "rotate/rotate4_children.jpg",
  "rotate/rotate3.jpg",
  "rotate/rotate2.jpg");
rotateImages.sort();

var rotateBase = rotateImages.length - 1;
var rotateSteps = 10;
var rotateI = 0;
var photoDelay = 4000;
var photoRate = 25;
var shadowColor = "#A0A0A0";

document.writeln("<div style='width: 528px; height: 190px; margin: 0px 0px 0px -10px; position: relative; padding: 0px; overflow: hidden;' onclick='PhotoBarClick()'>");
document.writeln("<img id='leftimg' src='" + rotateImages[rotateImages.length - 1] + "' style='float: left; background-color: #ffffff; margin: 90px 0px 10px 12px; opacity: 0.25; filter: alpha(opacity:25); width: 120px; height: 80px; border: 0px;' />");
document.writeln("<img id='middleimg' src='" + rotateImages[0] + "' style='float: left; background-color: #ffffff; margin: 20px 0px 10px 12px; width: 240px; height: 160px; border: 0px; -moz-box-shadow: 0px 5px 5px " + shadowColor + "; -webkit-box-shadow: 0px 5px 5px " + shadowColor + "; box-shadow: 0px 5px 5px " + shadowColor + ";' />");
document.writeln("<img id='rightimg' src='" + rotateImages[1] + "' style='float: left; background-color: #ffffff; margin: 90px 0px 10px 12px; opacity: 0.25; filter: alpha(opacity:25); width: 120px; height: 80px; border: 0px;' />");
document.writeln("<div id='extrapic' style='float: left; margin: 90px 0px 10px 12px; overflow: hidden;'><img id='extraimg' src='" + rotateImages[2] + "' style='opacity: 0.25; filter: alpha(opacity:25); width: 120px; height: 80px; border: 0px;' /></div>");
document.writeln("</div>");

var leftimg = document.getElementById("leftimg");
var middleimg = document.getElementById("middleimg");
var rightimg = document.getElementById("rightimg");
var extrapic = document.getElementById("extrapic");
var extraimg = document.getElementById("extraimg");

var photoTimeout = setTimeout("PhotoBarRotate()", photoDelay); // wait 4 seconds then start

function PhotoBarRotate(){
	var rotateSteps = 10;
	var i48 = rotateI * (120 / rotateSteps);
	var i32 = rotateI * (80 / rotateSteps);
	var i3 = rotateI * (75 / rotateSteps);
	var i28 = rotateI * (70 / rotateSteps);

	var imiddle = Math.round(((rotateSteps - rotateI) / rotateSteps) * 5);
	var middleshadow = "0px " + imiddle.toString() + "px " + imiddle.toString() + "px " + shadowColor;
	var iright = Math.round((rotateI / rotateSteps) * 5);
	var rightshadow = "0px " + iright.toString() + "px " + iright.toString() + "px " + shadowColor;

	leftimg.style.marginLeft = (-i48).toString() + "px";

	middleimg.style.marginTop = (20 + i28).toString() + "px";
	middleimg.style.width = (240 - i48).toString() + "px";
	middleimg.style.height = (160 - i32).toString() + "px";
	middleimg.style.opacity = (99.999 - i3) / 100;
	middleimg.style.filter = "alpha(opacity:" + (99.999 - i3).toString() +")"; 
	SetShadow(middleimg, middleshadow);

	rightimg.style.marginTop = (90 - i28).toString() + "px";
	rightimg.style.width = (120 + i48).toString() + "px";
	rightimg.style.height = (80 + i32).toString() + "px";
	rightimg.style.opacity = (24.999 + i3) / 100;
	rightimg.style.filter = "alpha(opacity:" + (24.999 + i3).toString() +")"; 
	SetShadow(rightimg, rightshadow);

	extrapic.style.width = (12 + i48).toString() + "px";

	++rotateI;
	if (rotateI <= rotateSteps){
		photoTimeout = setTimeout("PhotoBarRotate()", photoRate);
	}else{
		rotateI = 0;
		++rotateBase;
		if (rotateBase >= rotateImages.length){
			rotateBase = 0;
		}

		leftimg.style.marginLeft = "12px";
		leftimg.src = rotateImages[rotateBase];

		middleimg.style.marginTop = "20px";
		middleimg.style.width = "240px";
		middleimg.style.height = "160px";
		middleimg.src = rotateImages[(rotateBase + 1) % rotateImages.length];
		middleimg.style.opacity = 0.99999;
		middleimg.style.filter = "alpha(opacity:99.999)"; 
		SetShadow(middleimg, "0px 5px 5px " + shadowColor);

		rightimg.style.marginTop = "90px";
		rightimg.style.width = "120px";
		rightimg.style.height = "80px";
		rightimg.src = rotateImages[(rotateBase + 2) % rotateImages.length];
		rightimg.style.opacity = 0.25;
		rightimg.style.filter = "alpha(opacity:25)"; 
		SetShadow(rightimg, "none");

		extrapic.style.width = "0px";
		extraimg.src = rotateImages[(rotateBase + 3) % rotateImages.length];

		photoTimeout = setTimeout("PhotoBarRotate()", photoDelay); // wait 4 seconds then do it again
	}
}

function SetShadow(obj, shadow, size){
	obj.style.MozBoxShadow = shadow;
	obj.style.WebkitBoxShadow = shadow;
	obj.style.boxShadow = shadow;
}

function PhotoBarClick(){
	clearTimeout(photoTimeout);
	PhotoBarRotate();
}