/* Image Fade Sequencer
 * Copyright 2011, Develec CC
 * Version 1.0.1 development
 */
var ie;
var pixels = "px";
function newImageFadeSequencer(component) {
  
  // Find Top and Left and set default widths and heights
  iSP[component][7] = document.getElementById
      ("is" + iSP[component][0] + '_dC')
  iSP[component][8] = document.getElementById
      ("is" + iSP[component][0] + '_dS0');
  iSP[component][9] = document.getElementById
      ("is" + iSP[component][0] + '_dS1');
  iSP[component][10] = document.getElementById
      ("is" + iSP[component][0] + '_dS2');
  iSP[component][11] = document.getElementById
      ("is" + iSP[component][0] + '_iS0');
  iSP[component][12] = document.getElementById
      ("is" + iSP[component][0] + '_iS1');
  iSP[component][13] = document.getElementById
      ("is" + iSP[component][0] + '_iS2');

  t = iSP[component][7].style.top;
  l = iSP[component][7].style.left;
  iSP[component][8].style.top = t;
  iSP[component][8].style.left = l;
  iSP[component][8].style.width = iSP[component][5] + pixels;
  iSP[component][8].style.height = iSP[component][6] + pixels;
  iSP[component][9].style.top = t;
  iSP[component][9].style.left = l;
  iSP[component][9].style.width = iSP[component][5] + pixels;
  iSP[component][9].style.height = iSP[component][6] + pixels;
  iSP[component][10].style.top = t;
  iSP[component][10].style.left = l;
  iSP[component][10].style.width = iSP[component][5] + pixels;
  iSP[component][10].style.height = iSP[component][6] + pixels;
  iSP[component][11].style.top = t;
  iSP[component][11].style.left = l;
  iSP[component][11].style.width = iSP[component][5] + pixels;
  iSP[component][11].style.height = iSP[component][6] + pixels;
  iSP[component][12].style.top = t;
  iSP[component][12].style.left = l;
  iSP[component][12].style.width = iSP[component][5] + pixels;
  iSP[component][12].style.height = iSP[component][6] + pixels;
  iSP[component][13].style.top = t;
  iSP[component][13].style.left = l;
  iSP[component][13].style.width = iSP[component][5] + pixels;
  iSP[component][13].style.height = iSP[component][6] + pixels;
  
  // Randomise First Image Loading
  if (iSP[component][3] == -1) {
    iSP[component][3] = Math.round(Math.random() * 
        (iSI[component].length - 1));
    //iSP[component][15] = iSP[component][3];
  }
   
  // Load the first image
  iSP[component][11].getAttributeNode('src').value =
      iSP[component][1] + iSI[component][iSP[component][3]][0];
  iSP[component][11].getAttributeNode('alt').value =
      iSI[component][iSP[component][3]][1];
//  iSP[component][11].style.width = 
//      iSI[component][iSP[component][3]][2] + pixels;
//  iSP[component][11].style.height = 
//      iSI[component][iSP[component][3]][3] + pixels;
  iSP[component][15] = iSP[component][3]; // Last Image

  // Load the second image. 
  // (Can't use nextImage or first image will fade in)
  nextImageIndex(component);
  iSP[component][12].getAttributeNode('src').value =
      iSP[component][1] + iSI[component][iSP[component][3]][0];
  iSP[component][12].getAttributeNode('alt').value =
      iSI[component][iSP[component][3]][1];
//  iSP[component][12].style.width = 
//      iSI[component][iSP[component][3]][2] + pixels;
//  iSP[component][12].style.height = 
//      iSI[component][iSP[component][3]][3] + pixels;
  iSP[component][14] = 1;
  window.setTimeout('nextImage(' + component + ')', iSP[component][2]);
  
}
function nextImage(component) {
  //ifs[index].image = (ifs[index].image + 1) % ifs[index].imageCount; // Next image to load
  nextImageIndex(component);
  switch (iSP[component][14]) {
    case 0: // Hide 2, Display 0, Load 1
      iSP[component][12].getAttributeNode('src').value =
          iSP[component][1] + iSI[component][iSP[component][3]][0];
      iSP[component][12].getAttributeNode('alt').value =
          iSI[component][iSP[component][3]][1];
//      iSP[component][12].style.width = 
//          iSI[component][iSP[component][3]][2] + pixels;
//      iSP[component][12].style.height = 
//          iSI[component][iSP[component][3]][3] + pixels;
      show(iSP[component][8].getAttributeNode('id').value, 50);
      hide(iSP[component][10].getAttributeNode('id').value, 50);
      iSP[component][14] = 1;
      break;
    case 1: // Hide 0, Display 1, Load 2
      iSP[component][13].getAttributeNode('src').value =
          iSP[component][1] + iSI[component][iSP[component][3]][0];
      iSP[component][13].getAttributeNode('alt').value =
          iSI[component][iSP[component][3]][1];
//      iSP[component][13].style.width = 
//          iSI[component][iSP[component][3]][2] + pixels;
//      iSP[component][13].style.height = 
//          iSI[component][iSP[component][3]][3] + pixels;
      show(iSP[component][9].getAttributeNode('id').value, 50);
      hide(iSP[component][8].getAttributeNode('id').value, 50);
      iSP[component][14] = 2;
      break;
    case 2: // Hide 1, Display 2, Load 0
      iSP[component][11].getAttributeNode('src').value =
         iSP[component][1] + iSI[component][iSP[component][3]][0];
      iSP[component][11].getAttributeNode('alt').value =
          iSI[component][iSP[component][3]][1];
//      iSP[component][11].style.width = 
//          iSI[component][iSP[component][3]][2] + pixels;
//      iSP[component][11].style.height = 
//          iSI[component][iSP[component][3]][3] + pixels;
      show(iSP[component][10].getAttributeNode('id').value, 50);
      hide(iSP[component][9].getAttributeNode('id').value, 50);
      iSP[component][14] = 0;
      break;
    default:
      iSP[component][14] = 0;
  }
  window.setTimeout('nextImage(' + component + ')', iSP[component][2]);
}
function nextImageIndex(component) {
  if (iSP[component][4] == false) {
    iSP[component][3] = (iSP[component][3] + 1) % 
        iSI[component].length; // Next image to load
  } else {  
    iSP[component][3] = Math.round(Math.random() * 
        (iSI[component].length - 2));
    // Prevent repeats
    if (iSP[component][3] >= iSP[component][15]) {
      iSP[component][3] += 1;
    }
    iSP[component][15] = iSP[component][3];
  }
}
function show(id, fadeTime) {
  var elem = document.getElementById(id);
  elem.style.visibility = 'visible';
  if (supportsOpacity(elem)) {
    // first set 0% opacity to make it completely transparent
    setOpacity(elem, 0);
    // when we set display = "block" it's still invisible
    elem.style.display = "block";
    // call the function to gradually increase opacity
    fadeIn(id, fadeTime);
  }
  else {
    // can't modify opacity, so just make it visible...
    elem.style.display = "block";
  }
}
function hide(id, fadeTime) {
  var elem = document.getElementById(id);
  if (supportsOpacity(elem)) {
    // first set 0% opacity to make it completely Opaque
    if (elem.style.visibility == 'visible') {
      setOpacity(elem, 1);
    }
    // when we set display = "block" it's still invisible
    elem.style.display = "block";
    // call the function to gradually increase opacity
    fadeOut(id, fadeTime);
  }
  else {
    // can't modify opacity, so just make it visible...
    elem.style.display = "block";
  }
}
function supportsOpacity(el) {
  if (el.style.opacity != undefined)
    return true;
  if (el.style.MozOpacity != undefined)
    return true;
  if (el.style.filter != undefined)
    return true;
  return false;
}
function setOpacity(el, opaciLevel) {
  if (el.style.opacity != undefined) {
    el.style.opacity = opaciLevel;
  }
  else if (el.style.MozOpacity != undefined) {
    el.style.MozOpacity = opaciLevel;
  }
  else if (el.style.filter != undefined) {
    var oplvl = Math.round(opaciLevel * 100);
    el.style.filter = "alpha(opacity=" + oplvl + ")";
  }
}
function fadeIn(id, fadeTime, currentOpacity) {
  var counterLimit = fadeTime;
  var el = document.getElementById(id);
  el.style.visibility = 'visible'
  if (!currentOpacity) {
    currentOpacity = 1;
  }
  if (currentOpacity > counterLimit) {
    el.style.visibility = 'visible'
    setOpacity(el, 1);
    currentOpacity = 1;
    return;
  }
  setOpacity(el, (currentOpacity / counterLimit));
  currentOpacity++;
  var func = "fadeIn( '" + id + "', " + 
      fadeTime + ", " + currentOpacity + ")";
  window.setTimeout(func, 50);
}
function fadeOut(id, fadeTime, currentOpacity) {
  var counterLimit = fadeTime;
  var el = document.getElementById(id);
  if (!currentOpacity) {
    el.style.visibility = 'visible'
    currentOpacity = counterLimit;
  }
  if (currentOpacity == 1) {
    el.style.visibility = 'hidden'
    return;
  }
  setOpacity(el, ((currentOpacity - 1) / counterLimit));
  currentOpacity--;
  var func = "fadeOut( '" + id + "', " + 
      fadeTime + ", " + currentOpacity + ")";
  window.setTimeout(func, 50);
}