function centerBox () {
	var w, h;
	// all except Explorer
	if ( self.innerHeight ) {
		w = self.innerWidth;
		h = self.innerHeight;
	// Internet Explorer 6 Strict Mode
	} else if ( document.documentElement && document.documentElement.clientHeight ) {
		w = document.documentElement.clientWidth;
		h = document.documentElement.clientHeight;
	// other Internet Explorers
	} else if ( document.body ) {
		w = document.body.clientWidth;
		h = document.body.clientHeight;
	}

	viewWidth = w;
	viewHeight = h;

	boxWidth = 720;
	boxHeight = 400

	offset = Math.floor (( viewWidth - boxWidth ) / 2 );
	document.getElementById("box").style.left = ( offset > 10 ) ? offset + "px" : "10px" ;
	offset = Math.floor (( viewHeight - ( boxHeight + 40 )) / 2 );
	document.getElementById("box").style.top = ( offset > 10 ) ? offset + "px" : "10px" ;

	offset = Math.floor (( viewWidth - 400 ) / 2 );
	document.getElementById("copy").style.left = ( offset > 10 ) ? offset + "px" : "10px" ;
	offset = viewHeight - 20;
	document.getElementById("copy").style.top = ( offset > 402 ) ? offset + "px" : "402px" ;
}

// Start animation code
var animationRunning = false;
var frameInterval = 50;
var groupInterval = 4000;

var imageArray = new Array();
var groupArray = new Array();
var groupNameArray = new Array();
var groupCount = 0;

var imgTimer = null;
var groupTimer = null;

var imagePath = "images";
var dirCount = 7;
for ( i = 0; i < dirCount; i++ ) {
	preloadFrames( "0" + i, 6, ".png" );
}
initImage( "frameImage", "01" );

function ImageError() {
	alert( "animate.js has detected an error. Image not found: " + this.src );
}

function preloadFrames( imgGroupName, imageCount, extension ) {
	groupArray[ imgGroupName ] = new Object();
	groupArray[ imgGroupName ].numberFrames = imageCount;
	for ( var i = 0; i < imageCount; i++ ) {
		groupArray[ imgGroupName ][i] = new Image();
		groupArray[ imgGroupName ][i].src = imagePath + "/" + imgGroupName + "/" + i + extension;
		groupArray[ imgGroupName ][i].onerror = ImageError;
	}
	groupNameArray[ groupCount ] = imgGroupName;
	groupCount++;
}

function initImage( imgName, imgGroupName ) {
	imageArray[ imgName ] = new Object();
	imageArray[ imgName ].groupName = imgGroupName;
	imageArray[ imgName ].next_on = null;
	imageArray[ imgName ].next_off = null;
	imageArray[ imgName ].index = 0;
	imageArray[ imgName ].state = "CLOSED";
	imageArray[ imgName ].img = null;
}

function startAnimation() {
	if ( !animationRunning ) animate();
}

function animate() {	
	animationRunning = false;

	for ( var i in imageArray ) {
		var b = imageArray[ i ];
		var a = groupArray[ b.groupName ];

		if ( b.state == "OPENING" ) {
			if ( ++b.index < a.numberFrames ) {
				b.img.src = a[ b.index ].src;
				animationRunning = true;
			} else {
				b.index = a.numberFrames - 1;
				b.state = "OPEN";
			}
		}
		else if ( b.state == "OPEN_CLOSE" ) {
			if ( ++b.index < a.numberFrames ) {
				b.img.src = a[ b.index ].src;
			} else {
				if ( b.next_off ) {
					b.groupName = b.next_off;
					a = groupArray[ b.groupName ];
					b.next_off = null;
				}
				b.index = a.numberFrames - 1;
				b.state = "CLOSING";
			}
			animationRunning = true;
		}
		else if ( b.state == "CLOSING" ) {
			if ( --b.index >= 0 ) {
				b.img.src = a[ b.index ].src;
				animationRunning = true;
			} else {
				b.index = 0;
				b.state = "CLOSED";
			}
		}
		else if ( b.state == "CLOSE_OPEN" ) {
			if ( --b.index >= 0 ) {
				b.img.src = a[ b.index ].src;
			} else {
				b.index = 0;
				b.groupName = b.next_on;
				b.state = "OPENING";
			}
			animationRunning = true;
		}
	}

	if ( animationRunning) {
		if ( !imgTimer) imgTimer = setInterval( "animate()", frameInterval );
	} else {
		clearInterval( imgTimer );
		imgTimer = null;
	}
}

function turnOn( imgName, imgGroupName ) {
		var b = imageArray[ imgName ];
		b.img = document.images[ imgName ];
		if ( b.state == "CLOSED" ) {
			b.state = "OPENING";
			if ( imgGroupName ) b.groupName = imgGroupName;
			startAnimation();
		} else if ( b.state == "OPEN_CLOSE" || b.state == "CLOSING" || b.state == "CLOSE_OPEN") {
			if ( !imgGroupName || b.groupName == imgGroupName ) {
				b.state = "OPENING";
			} else {
				b.next_on = imgGroupName;
				b.state = "CLOSE_OPEN";
			}
		}
		if ( b.state == "OPENING" || b.state == "OPEN") {
			if ( imgGroupName && b.groupName != imgGroupName ) {
				b.groupName = imgGroupName;
				b.index = 0;
				b.state = "OPENING";
				startAnimation();
			}
		}
}

function turnOff( imgName, imgGroupName ) {
		var b = imageArray[ imgName ];
		if ( b.state == "OPEN" ) {
			if ( imgGroupName ) {
				b.groupName = imgGroupName;
				b.index = groupArray[ imgGroupName ].numberFrames - 1;
			}
			b.state = "CLOSING";
			startAnimation();
		}
		if ( b.state == "CLOSE_OPEN" ) {
			b.next_off = null;
			b.state = "CLOSING"
		}
		if ( b.state == "OPENING" ) {
			b.next_off = imgGroupName;
			b.state = "OPEN_CLOSE";
		}
}

function start ( firstImage ) {
	document.getElementById( 'hand' ).style.visibility = "hidden";
	groupNumber = 0;
	imgName = firstImage;
	startOff ();
}

function startOn () {
	if ( groupNumber >= groupCount ) groupNumber = 1;
	frameCount = Math.round ( groupInterval / 50 );
	speed = -1;
	turnOn ( imgName, groupNameArray[ groupNumber ] );
	groupTimer = setInterval ( "startTimer()", 50 );
}

function startTimer () {
	if ( speed < 0 ) frameCount = frameCount + speed;
	if ( speed > 0 ) frameCount = 0;
	if ( frameCount < 1 ) startOff ();
}

function startOff () {
	clearInterval ( groupTimer );
	turnOff ( imgName, groupNameArray[ groupNumber ] );
	groupNumber++;
	startOn ();
}

function showRecipe () {
	nWide = 750;
	xPosition = ( screen.width - nWide ) / 2 - 10;
	if ( screen.width <= ( nWide + 20 ) ) {
		nWide = screen.width - 40;
		xPosition = 0;
	}
	nHigh = screen.height - 40;
	yPosition = 0;

	args = "width=" + nWide + "," 
	+ "height=" + nHigh + "," 
	+ "location=no," 
	+ "menubar=no,"
	+ "resizable=yes,"
	+ "scrollbars=yes,"
	+ "status=yes," 
	+ "titlebar=no,"
	+ "toolbar=no,"
	+ "hotkeys=no,"
	+ "screenx=" + xPosition + ","  //NN Only
	+ "screeny=" + yPosition + ","  //NN Only
	+ "left=" + xPosition + ","     //IE Only
	+ "top=" + yPosition;           //IE Only
	
	url = 'recipes/recipe_' + groupNumber + '.php';
	recipeWindow = window.open( url, 'recipe', args );
	recipeWindow.focus();
}