/*
Image SwapFade Utility

Copyright:  Coultard Ltd. 2009
Author:      Phil Coultard
Prerequisit: EvenHandler.js

Usage
Include following script block in page:
<script language=JavaScript>
<!--
//Timeout setting milliseconds
intSwapTimeout = 3000;
    
var arrSwapImages = [  
['<%=panel1.ClientID%>']
];

//Array of Image names
//Note the first image goes last in the list
var arrImages_panel1 = [
['images/image1.jpg'],
['images/image2.jpg'],
['images/image3.jpg']
];
    
    
//-->
</script>

Place image tags withere the image should be placed.
NB: to stop page being called twice/for backwards compatibilty/non javascript always populate src tag of img tags:
<img src="images/image1.jpg" alt="" id="panel1" runat="server"/>
<img src="images/image2.jpg" alt="" id="panel1_hidden" style="display:none;"/>
*/

addEvent(window, 'load', initiateRotatingImages);

var intSwapTimeout = 6000;
var intTransparencyTimeout = 3000;
var intTransparencyTransitionTimeout = 50;
var blnImageLoaded = false;
var blnSwapTimerExpired = false;
var blnTransparencyTransitionTimerExpired = false;
var blnTransparencyTimeout = false;
var arrImageNo;
var startOpacity = 100;
var endOpacity = 0;

var transitionIncrement;
var newOpacity;
var originalTitle;
var originalHref;

var imageArrayPrefix = 'arrImages_';
var hiddenSuffix = '_hidden';

function initiateRotatingImages(e)
{
  if (isArray('arrSwapImages'))
  {
    arrImageNo = new Array(arrSwapImages.length);
    for (var i = 0; i < arrSwapImages.length; i++)
    {
      var strImageNameVisible = arrSwapImages[i];
      var strImageNameHidden = arrSwapImages[i] + hiddenSuffix;
      var arrImages = eval(imageArrayPrefix + arrSwapImages[i]);
      if (document.getElementById(strImageNameVisible) != null)
      {
        if (document.getElementById(strImageNameVisible).parentNode)
        {
          originalTitle = document.getElementById(strImageNameVisible).parentNode.title;
          originalHref = document.getElementById(strImageNameVisible).parentNode.href;
          updateHref(document.getElementById(strImageNameVisible).parentNode, arrImages[0][1], arrImages[0][2]);
        }
        //Set opacity to 1
        document.getElementById(strImageNameVisible).style.opacity = '1';
        document.getElementById(strImageNameVisible).alt = arrImages[0][1];
      }      
      //Update hidden alt to value from array
      if (document.getElementById(strImageNameHidden) != null && arrImages.length > 0)
      {
        document.getElementById(strImageNameHidden).alt = arrImages[1][1];
      }
      //Set next image to 2 to skip the first and second images in the array
      if (arrImages.length > 2)
      {
        arrImageNo[i] = 2;
      }
      else
      {
        arrImageNo[i] = 0;
      }
    }
    initiateSwap();
  }
}

function initiateSwap()
{
  if (blnSwapTimerExpired)
  {
    blnSwapTimerExpired = false;
    blnImageLoaded = false;
    initialiseToggleElementsTransparency();
  }
  else
  {
    blnImageLoaded = true;
    setTimeout('swapTimerExpired()', intSwapTimeout);
  }
}

function swapTimerExpired()
{
  blnSwapTimerExpired = true;
  if (blnImageLoaded)
  {
    initiateSwap();
  }
}

function initialiseToggleElementsTransparency()
{
  var strImageNameVisible = arrSwapImages[0];
  if (document.getElementById(strImageNameVisible) != null)
  {
    if (document.getElementById(strImageNameVisible).style.opacity != null)
    {
      startOpacity = document.getElementById(strImageNameVisible).style.opacity * 100;
    }
    else
    {
      startOpacity = 100;
    }
    //Corrections for rounding errors or unfinshed transitions  
    if (startOpacity >= 100)
    {
      startOpacity = 100;
      endOpacity = 0;
    }
    else
    {
      startOpacity = 0;
      endOpacity = 100;
    }
    var noTransitionTimeIncrements = (intTransparencyTimeout / intTransparencyTransitionTimeout);
    transitionIncrement = (endOpacity - startOpacity) / noTransitionTimeIncrements;
    newOpacity = startOpacity;
    blnTransparencyTransitionTimerExpired = true;
    toggleElementsTransparency();
  }
}

function toggleElementsTransparency()
{
  if (blnTransparencyTransitionTimerExpired)
  {
    blnTransparencyTransitionTimerExpired = false;
    newOpacity = newOpacity + transitionIncrement;
    for (var i = 0; i < arrSwapImages.length; i++)
    {
      var strImageNameVisible = arrSwapImages[i];
      changeTransparency(strImageNameVisible, newOpacity);
    }
    //if not finished, continue changing transparency
    if ((startOpacity > endOpacity && newOpacity >= endOpacity) ||
    (startOpacity < endOpacity && newOpacity <= endOpacity))
    {
      toggleElementsTransparency();
    }
    else
    {
      if (endOpacity == 0)
      {
        doSwap();
      }
      else
      {
        initiateSwap();
      }
    }
  }
  else
  {
    setTimeout('transparencyTransitionTimerExpired()', intTransparencyTransitionTimeout);
  }
}

function transparencyTransitionTimerExpired()
{
  blnTransparencyTransitionTimerExpired = true;
  toggleElementsTransparency();
}

function changeTransparency(elementName, newOpacity)
{
  document.getElementById(elementName).style.opacity = newOpacity / 100;
  document.getElementById(elementName).style.filter = 'alpha(opacity=' + newOpacity + ')';
}



function doSwap()
{
  for (var i = 0; i < arrSwapImages.length; i++)
  {
    swapImage(arrSwapImages[i], arrImageNo[i]);
    var arrArray = eval('arrImages_' + arrSwapImages[i]);
    if (arrImageNo[i] >= (arrArray.length - 1))
    {
      arrImageNo[i] = 0;
    }
    else
    {
      arrImageNo[i]++;
    }
  }
  initialiseToggleElementsTransparency();
}


function swapImage(strImageName, intImageNo)
{
  var strArrayName = imageArrayPrefix + strImageName;
  var strImageNameVisible = strImageName;
  var strImageNameHidden = strImageName + hiddenSuffix;
  //Swap image to hidden one
  if (document.getElementById(strImageNameVisible) && document.getElementById(strImageNameHidden))
  {
    //Update Current Image
    document.getElementById(strImageNameVisible).src = document.getElementById(strImageNameHidden).src;
    document.getElementById(strImageNameVisible).alt = document.getElementById(strImageNameHidden).alt;
    if (isArray(strArrayName))
    {
      var arrImages = eval(strArrayName);
      var currentImageNo = intImageNo - 1;
      if (currentImageNo < 0) currentImageNo = arrImages.length - 1;
      var img = new Image();
      img.src = document.getElementById(strImageNameVisible).src;
      if (img.complete)
      {
        document.getElementById(strImageNameVisible).width = img.width;
        document.getElementById(strImageNameVisible).height = img.height;
      }
      //Update href if there is one
      if (arrImages[currentImageNo][1] && arrImages[currentImageNo][2])
      {
        if (arrImages[currentImageNo][1] && arrImages[currentImageNo][2])
        {
          updateHref(document.getElementById(strImageNameVisible).parentNode, arrImages[currentImageNo][1], arrImages[currentImageNo][2]);
        }
        else
        {
          if (arrImages[currentImageNo][1])
          {
            updateHref(document.getElementById(strImageNameVisible).parentNode, arrImages[currentImageNo][1], '');
          }
          if (arrImages[currentImageNo][2])
          {
            updateHref(document.getElementById(strImageNameVisible).parentNode, '', arrImages[currentImageNo][2]);
          }
        }
      }
      else
      {
        updateHref(document.getElementById(strImageNameVisible).parentNode, '', '');
      }
      //Start Loading new image in collection
      document.getElementById(strImageNameHidden).src = arrImages[intImageNo][0];
      document.getElementById(strImageNameHidden).alt = arrImages[intImageNo][1];
    }
  }
  else
  {
    alert(document.getElementById(strImageNameVisible));
  }
}

function updateHref(link, title, href)
{
  if (link != null)
  {
    if (title != null && title.toString().length > 0)
    {
      link.title = title;
    }
    else
    {
      link.title = originalTitle;
    }
    if (href != null && href.toString().length > 0)
    {
      link.href = href;
    }
    else
    {
      link.href = originalHref;
    }
  }
}

function isArray(strArrayName)
{
  var blnArrayIsObject = (typeof eval('window.' + strArrayName) == 'object');
  var blnArray = false;
  if (blnArrayIsObject)
  {
    var arrArray = eval(strArrayName);
    if (arrArray.length > 0)
    {
      blnArray = true;
    }
  }
  return blnArray;
}

function populateElement(objElement)
{
  var strArrayName = 'arr' + objElement.name;
  if (isArray(strArrayName))
  {
    var arrElementOptionsArray = eval(strArrayName);
    if ((objElement.type == 'select-one') || (objElement.type == 'select-one'))
    {
      populateSelect(objElement, arrElementOptionsArray);
    }
  }
}

function populateSelect(objElement, arrElementOptionsArray)
{
  alert('Error: populateSelect(objElement, arrElementOptionsArray) undefined.');
}