var bulletColor = [188,143,143];            // rosybrown (decimal numbers in RGB)
var textColor = [128,128,128];              // gray
var highlightColor = [];                    // can use two separate colors
    highlightColor[0] = [0,0,255];          // blue and green
    highlightColor[1] = [0,240,0];          // blue and green
var gradB = [];                   
var gradT = [];

var bulletId = ["is","re"];                  // id prefixes: ids are is0, is1, is2 etc
var textId = ["ch","pr"];

var N = [0,0];                               // id number that changes to highlight color
var lastN = [0,0];                           // previous id number that is returned to original color
var maxN = 40;                               // colors change in maxN increments
var maxN1 = maxN+1;                          // colors change in maxN increments
var d=1;
var nTotal = 0;
var M=0;                                     // refers to left (0) or right (1)
var timeOutId;
var leftIsOn = false;
var rightIsOn = false;
var inTransition = false;


// assign these functions to mouseover events for the left and right divs respectively

function doLeft() { 
         if(rightIsOn) { clearTimeout(timeOutId); rightIsOn = false; }
		 leftIsOn = !leftIsOn;
		 M= 0;
		 if (!leftIsOn) { 
		   start(); 
		   document.getElementById("lb").innerHTML = "▀";
		 } else { 
		   clearTimeout(timeOutId); 
		   document.getElementById("lb").innerHTML = "►";
		 }
}
function doRight(){
         if(leftIsOn) { clearTimeout(timeOutId); leftIsOn = false; }
		 rightIsOn = !rightIsOn;
         M = 1;
		 if (rightIsOn) { start(); } else { clearTimeout(timeOutId); }
}


function start() { 
         nTotal = nElems[M];

//Set up color transition arrays
         for (var j=0; j<=2; j++) {
           gradB[j] = [];
           gradB[j][0] = (highlightColor[M][j] - bulletColor[j])/maxN;    // increment stored in [0] position
           gradB[j][1] = bulletColor[j];                   
           gradB[j][maxN] = highlightColor[M][j];
		   
           gradT[j] = [];
           gradT[j][0] = (highlightColor[M][j] - textColor[j])/maxN;
           gradT[j][1] = textColor[j];
           gradT[j][maxN] = highlightColor[M][j];
         }

         for (var i=2; i <=(maxN-1); i++) {
           for (j=0; j<=2; j++) { 
		     gradB[j][i] = gradB[j][i-1]+gradB[j][0]; 
		     gradT[j][i] = gradT[j][i-1]+gradT[j][0]; 
		   }
         }
	 var colorT = "RGB(" + highlightColor[M][0] + "," + highlightColor[M][1] + "," + highlightColor[M][2] + ")" ;  
	 
         document.getElementById( bulletId[M] + N[M] ).style.color = colorT;
         document.getElementById( textId[M] + N[M] ).style.color = colorT;
         timeOutId = setTimeout ("next()",1000);
}

function next() {
         timeOutId = setTimeout ("next()",1000);
		 lastN[M] = N[M];                                          // lastN is fadeOut Element
         N[M] = (++N[M]) % (nTotal+1);                             // N is fadeIn Element
         d=1;
		 
		 inTransition = true;
         for (var i=1; i<=maxN; i++) { setTimeout("changeColor()", 8*i); }
		 inTransition = false;
}

function changeColor() {

// previous hight fades back to normal
	     strColor =  "RGB(" + gradB[0][maxN1-d] + "," + gradB[1][maxN1-d] + "," + gradB[2][maxN1-d] + ")";
         document.getElementById(bulletId[M] + lastN[M]).style.color = strColor;
	     strColor =  "RGB(" + gradT[0][maxN1-d] + "," + gradT[1][maxN1-d] + "," + gradB[2][maxN1-d] + ")";
         document.getElementById( textId[M] + lastN[M]).style.color = strColor;
		 
		 
		 strColor =  "RGB(" + gradB[0][d] + "," + gradB[1][d] + "," + gradB[2][d] + ")";
         document.getElementById(bulletId[M] + N[M]).style.color = strColor;
		 strColor =  "RGB(" + gradT[0][d] + "," + gradT[1][d] + "," + gradT[2][d] + ")";
         document.getElementById( textId[M] + N[M]).style.color = strColor;
		 
		 d +=1;
		 leftStart=false;
}