/////////////////
// Index Blend //
/////////////////

// (Tested with Firefox, Google Chrome, Safari, Opera, IE9-6) //


// Assemble Variables for Prev and Next
function galItems(item) {
  thisItem = item;
  galCount = galArr.length-1;
  firstItem = galArr[0];
  lastItem = galArr[galCount];

  itemNumbers(item);		// fetch me the id *number* for "thisItem".

  // If the current item is last, "next" must link back around to the very first item again:
  if (thisItem == lastItem) {
      nextItem = galArr[0];
      nextItemNum = "0";
    } else {
      nextItem = galArr[thisItemNum+1];
      nextItemNum = thisItemNum+1;
    }
  }



// id number for "thisItem" is fetched from here:
function itemNumbers(item) {
  var counter = 0;
  while (item != galArr[counter]) {
    counter++;
    }
  thisItemNum = counter;
  }




function globals() {
  // Global variables, that shall be used by several functions.
  thisLayer = document.getElementById(thisItem + "_layer");
  nextLayer = document.getElementById(nextItem + "_layer");
  // The opFactor establishes the number of steps for the face animation:
  opStep = 120;		// Milliseconds between fade ins
  opFactor = 10;	// The number, that the opacity should be divided by.
  opNum = 1 / opFactor;	// The fade will be increased by this number. ( ~ 0.1-0.4 should be alright.)
  }


//---------------------------//
// Rendering the main stage: //
//---------------------------//

function blendStage() {
  // The magic layers with flipping images etc.

  // Image Preloading
  theImages = new Image();
  for (i = 0; i <= galCount; i++) {
      theImages.src = imgBase + galArr[i] + imgFormat;
    }

  // Planting all the magic gallery layers:
  for (i = 0; i <= galCount; i++) {
      var iAm = galArr[i];
      // The magic content:
      document.write("      <div id=\"" + iAm + "_layer\" class=\"galLayer\" style=\"display: none;\">\n" + galContentArr[i] + "        </div>\n");
    }

  }



//-------------------//
// Otho Pilot magic: //
//-------------------//

function OthoPilot(timer) {
  OthoLoop = window.setInterval("flipNext()", timer);
  }





// Flippin' triggers (In this case: one.):
function flipNext() {
  globals();
  // Turning off OthoLoop so that it doesn't conflict with the FadeLoop:
  window.clearInterval(OthoLoop);

  nextLayer.style.opacity = "0.0";
  nextLayer.style.filter = "alpha(opacity=0)";
  nextLayer.style.display = "block";

  // fademaggeddon('opacity factor', 'direction', interval) controls the speed of the fade:
  fadeLoop = window.setInterval("fademaggeddon(1 / opFactor)", 40);
  // To be continued in the "fademaggeddon" function...
  }




// Fading magic Part Deux:
function fademaggeddon(opa) {
  // Here starts the loop, that makes the fading effect.

  nextLayer.style.opacity = opNum;
  nextLayer.style.filter = "alpha(opacity=" + opNum * 100 + ")";
  opNum += opa;
  if (opNum > 0.95) { 
      nextLayer.style.opacity = "1.0";
      nextLayer.style.filter = "alpha(opacity=100)";
      opNum = 1.0;
    }

  if (opNum == 1.0) {
    // Once the opacity value is high enough, the loop stops here,
    // and the rest of the layer magic gets handled.
    window.clearInterval(fadeLoop);
    galItems(galArr[nextItemNum]);

    // Otho Pilot continues here:
    if (thisItem != lastItem) { OthoPilot(opStep); }

    }
  }