/*
var imgRows = 4;
var imgCols = 6;
*/
var imgRows = 6;
var imgCols = 8;
// NOTE: numAnimateSteps must be an even number
//var numAnimateSteps = 20;
var numAnimateSteps = 20;
//var imgWidth = 540;
var imgWidth = 744;
//var imgHeight = 360;
var imgHeight = 558;
var animationSpeed = 5;

var animateSteps = new Array();
var animateTimers = new Array();

var imgCellWidth = imgWidth / imgCols;
var imgCellHeight = imgHeight / imgRows;
var aCellWidthReduction = Math.floor(imgCellWidth / (numAnimateSteps / 2));
var aCellHeightReduction = Math.floor(imgCellHeight / (numAnimateSteps / 2));
var numAnimateStepsPer = numAnimateSteps / 2;

// use this flag to keep track of whether we need to keep preloading imagesets or not
var MM_p=new Array();
var preloadingTimer;

var lastRow = -1;
var lastCol = -1;
var animationIndex = 0;

// array of prefixes
var prefixArray = new Array(
"/wp-content/themes/mostofus/tile_images/college_solo/tile_",
"/wp-content/themes/mostofus/tile_images/college_smiles/tile_",
"/wp-content/themes/mostofus/tile_images/college_2_friends/tile_",
"/wp-content/themes/mostofus/tile_images/senior_old_young/tile_",
"/wp-content/themes/mostofus/tile_images/middle_age_hiking/tile_",
"/wp-content/themes/mostofus/tile_images/kids_group_bench/tile_",
"/wp-content/themes/mostofus/tile_images/kids_mom_and_kid_tent/tile_",
"/wp-content/themes/mostofus/tile_images/kids_fence/tile_",
"/wp-content/themes/mostofus/tile_images/kids_upsidedown/tile_",
"/wp-content/themes/mostofus/tile_images/college_3_friends/tile_",
"/wp-content/themes/mostofus/tile_images/middle_age_family/tile_",
"/wp-content/themes/mostofus/tile_images/middle_age_3_circle/tile_",
"/wp-content/themes/mostofus/tile_images/college_tv/tile_",
"/wp-content/themes/mostofus/tile_images/kids_outside/tile_",
"/wp-content/themes/mostofus/tile_images/middle_age_natamer/tile_",
"/wp-content/themes/mostofus/tile_images/kids_blonde_boys/tile_",
"/wp-content/themes/mostofus/tile_images/middle_age_family_hiking/tile_",
"/wp-content/themes/mostofus/tile_images/kids_lawn/tile_",
"/wp-content/themes/mostofus/tile_images/kids_beach_dog/tile_",
"/wp-content/themes/mostofus/tile_images/college_snow/tile_",
"/wp-content/themes/mostofus/tile_images/kids_videogames/tile_",
"/wp-content/themes/mostofus/tile_images/kids_girls_smiling/tile_",
"/wp-content/themes/mostofus/tile_images/kids_holding_hands/tile_",
"/wp-content/themes/mostofus/tile_images/senior_old_walking_young/tile_",
"/wp-content/themes/mostofus/tile_images/college_5_friends/tile_",
"/wp-content/themes/mostofus/tile_images/senior_two_women_walking/tile_",
"/wp-content/themes/mostofus/tile_images/middle_age_fair/tile_",
"/wp-content/themes/mostofus/tile_images/senior_men_curb/tile_",
"/wp-content/themes/mostofus/tile_images/college_class/tile_",
"/wp-content/themes/mostofus/tile_images/kids_asian_girl/tile_",
"/wp-content/themes/mostofus/tile_images/senior_grandfather/tile_",
"/wp-content/themes/mostofus/tile_images/college_happy_bunch/tile_",
"/wp-content/themes/mostofus/tile_images/kids_cocoa/tile_",
"/wp-content/themes/mostofus/tile_images/kids_winter_hats/tile_",
"/wp-content/themes/mostofus/tile_images/senior_group/tile_",
"/wp-content/themes/mostofus/tile_images/kids_girlfriends/tile_");
// shuffle the contents of the prefix array
prefixArray = shuffleArray(prefixArray);

// use this to keep track of where we are in the prefix array
var prefixIndex = 0;
var currentPrefix = prefixArray[prefixIndex];

var flipArray = new Array("5,5","4,7","4,1","1,3","2,1","0,0","1,7","1,2","0,4","3,5","3,0","4,5","3,1","4,2","3,6","5,2","0,7","5,7","3,2","1,6","5,1","2,6","2,7","0,1","0,3","1,5","4,0","5,0","5,3","1,4","4,4","0,5","0,2","2,4","2,3","0,6","3,4","2,2","3,3","4,6","3,7","1,1","5,6","1,0","2,0","5,4","4,3","2,5");

function setupAnimation() {
    var i, k;
    
    for(i = 0; i < imgRows; i++) {
        for(k = 0; k < imgCols; k++) {
            animateSteps[i+"_"+k] = 0;
        }
    }
};

function swapImage(row, col) {
    animateTimers[row+"_"+col] = window.setInterval("animateSwap("+row+", "+col+")", animationSpeed);
};

function animateSwap(row, col) {
    var currentStep = animateSteps[row+"_"+col];

	if(currentStep < numAnimateStepsPer) {
		document.images["img_"+row+"_"+col].width = imgCellWidth;
		document.images["img_"+row+"_"+col].height -= aCellHeightReduction;
	} else if(currentStep == numAnimateStepsPer) {
		document.images["img_"+row+"_"+col].src = MM_p[row+"_"+col].src;
	} else if(currentStep > numAnimateStepsPer && currentStep < numAnimateSteps) {
		document.images["img_"+row+"_"+col].width = imgCellWidth;
		document.images["img_"+row+"_"+col].height += aCellHeightReduction;
	} else if(currentStep == numAnimateSteps) {
		document.images["img_"+row+"_"+col].width = imgCellWidth;
		document.images["img_"+row+"_"+col].height = imgCellHeight;
	} else {
		window.clearInterval(animateTimers[row+"_"+col]);
		animateSteps[row+"_"+col] = -1;

		// done flipping, so decrement our counter
		animationIndex++;

		if(animationIndex < currentFlipPattern.length) {
			var coords = currentFlipPattern[animationIndex].split(",");
			var tempRow = coords[0];
			var tempCol = coords[1];
			swapImage(tempRow,tempCol);
		}

		// see if we've just finished the last tile
		if (lastRow == row && lastCol == col) {
			preloadImageset();
		}			
	}
	
	animateSteps[row+"_"+col]++;
};

function midAnimateByRandom(index) {
    // extract the row and column values
    index += "";
    
    var tempIndex = index.split(",");
    var row = tempIndex[0];
    var col = tempIndex[1];
    swapImage(row, col);
}

function animateByRandom() {

	// increment where we are in the prefix array 
    // - initialized to 0, which is what shows first anyway, so this should bump us to 1 the first time through
    lastRow = -1;
	lastCol = -1;
	animationIndex = 0;
    timeincrease = 0;

    // get the next flipping pattern
	currentFlipPattern = shuffleArray(flipArray);

    // flip 3 tiles at a time, but lag them a bit behind each other
	var coords = currentFlipPattern[animationIndex].split(",");
	var row = coords[0];
	var col = coords[1];		
	setTimeout("swapImage("+row+","+col+")", 0);

	timeincrease += 100;
	animationIndex++;

	// get the next set to swap, making sure there is one
	if (animationIndex < currentFlipPattern.length) {
		coords = currentFlipPattern[animationIndex].split(",");
		row = coords[0];
		col = coords[1];
		setTimeout("swapImage("+row+","+col+")", timeincrease);
	}
	timeincrease += 200;
	animationIndex++;

	// get the last set to swap, making sure there is one	
	if (animationIndex < currentFlipPattern.length) {
		coords = currentFlipPattern[animationIndex].split(",");
		row = coords[0];
		col = coords[1];			
		setTimeout("swapImage("+row+","+col+")", timeincrease);
	}
	timeincrease += 300;
	animationIndex++;
	
	// get the last set to swap, making sure there is one	
	if (animationIndex < currentFlipPattern.length) {
		coords = currentFlipPattern[animationIndex].split(",");
		row = coords[0];
		col = coords[1];			
		setTimeout("swapImage("+row+","+col+")", timeincrease);
	}
	timeincrease += 400;

	// mark the last row/col set, so we know when we've flipped it
	coords = currentFlipPattern[currentFlipPattern.length-1].split(",");
	lastRow = coords[0];
	lastCol = coords[1];
}

function drawTable() {
    var i, k;
    
    document.write("<table border=0 cellspacing=0 cellpadding=0 width="+imgWidth+" height="+imgHeight+">");
    
    for(i = 0; i < imgRows; i++) {
        document.write("<tr>");
        
        for(k = 0; k < imgCols; k++) {
            document.write("<td width="+imgCellWidth+" height="+imgCellHeight+" align=center><img src='"+currentPrefix+i+"_"+k+".jpg' name='img_"+i+"_"+k+"' width='"+imgCellWidth+"' height='"+imgCellHeight+"'></td>");
        }
        
        document.write("</tr>");
    }
    
    document.write("</table>");
}

function preloadImageset() {
	prefixIndex++;
	// if the prefixIndex is outside of the array, reset it to the beginning
	if (prefixIndex >= prefixArray.length) {
		prefixIndex = 0;
	}    
	imagesetPrefix = prefixArray[prefixIndex];
	
	if (imagesetPrefix) {		
		var d=document;
		if (d.images) {
			if(!MM_p) {
				MM_p=new Array();
			}
			var imageIndex = MM_p.length;			
			for (var row = 0; row < imgRows; row++) {
				for (var col = 0; col < imgCols; col++) {
					MM_p[row+"_"+col]=new Image();
					MM_p[row+"_"+col].src = imagesetPrefix + row + "_" + col + ".jpg";
				}
			}
			preloadingTimer = setInterval("animateNext()", 500);
		}	
	}
}

function animateNext() {
	var allComplete = true;
	for (var row = 0; row < imgRows; row++) {
		for (var col = 0; col < imgCols; col++) {
			if (MM_p[row+"_"+col].complete == false) {
				allComplete = false;
				break;
			}
		}
		if (allComplete == false) {
			break;
		}
	}

	if (allComplete) {
		clearInterval(preloadingTimer);
		setTimeout("animateByRandom()", 5000);
	}
}

function shuffleArray ( myArray ) {
	var i = myArray.length;
	if ( i == 0 ) return false;
	while ( --i ) {
		var j = Math.floor( Math.random() * ( i + 1 ) );
if(i >= myArray.length || i < 0 || j > myArray.length || j < 0) {
	alert('Ahah! i: '+i+' j: '+j);
}
		var tempi = myArray[i];
		var tempj = myArray[j];
		myArray[i] = tempj;
		myArray[j] = tempi;
	}
	return myArray;
}