var speed = 0.5;
var itterator = 0;
var globalnum = 1;
var animation_timer

// Start script at window load
Event.observe( window, 'load', initDuo2do );

// ~~~ cfc() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function cfc( meth )
{
  return s_WEBROOT + "/shared/components/duo2do.cfc?method=" + meth
}

// ~~~ initDuo2do() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function initDuo2do()
{
  // grey out the inactive menu buttons
  inactivateButtons();

  createImage( 'img_L_b' );
  createImage( 'img_M_b' );
  createImage( 'img_R_b' );

  createImage( 'img_L_a', s_WEBROOT + "/shared/images/generated/resized_L_" + randRange( 1, 4 ) + '.jpg' );
  createImage( 'img_M_a', s_WEBROOT + "/shared/images/generated/resized_M_" + randRange( 1, 4 ) + '.jpg' );
  createImage( 'img_R_a', s_WEBROOT + "/shared/images/generated/resized_R_" + randRange( 1, 4 ) + '.jpg' );

  rotateImages();
}

// ~~~ inactivateButtons() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function inactivateButtons()
{
  inactiveButtons = document.getElementsByClassName( 'inactive' );
  for( i=0; i<inactiveButtons.length; i++ )
    new Effect.Opacity( inactiveButtons[i], { duration:0.3, from:1.0, to:0.3 } );
}

// ~~~ activateButtons() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function activateButtons()
{
  inactiveButtons = document.getElementsByClassName( 'inactive' );
  for( i=0; i<inactiveButtons.length; i++ )
     new Effect.Opacity( inactiveButtons[i], { duration:0.3, from:0.3, to:1.0 } );
}

// ~~~ createImage() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function createImage( id )
{
  var imageTag = new Element( "img", { "id" : id, "style" : "display:block" } );

  ( arguments.length > 1 ) ? imageTag.src = arguments[1] : imageTag.style.display = "none";
  $( 'images' ).insert( imageTag );
}

// ~~~ rotateImages() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function rotateImages()
{
  var randOrder = getRandomOrder();
  var queue = Effect.Queues.get( 'imageFader' );
  queue.each( function( effect ){ effect.cancel(); });

  itterator++

  if( itterator%2 )
  {
    globalnum++;
    if( globalnum > 4 )
      globalnum = 1;

    fadeImage( randOrder[0], globalnum );
    fadeImage( randOrder[1], globalnum );
    fadeImage( randOrder[2], globalnum );
  }
  else
  {
    fadeImage( randOrder[0], randRange( 1, 4 ));
    fadeImage( randOrder[1], randRange( 1, 4 ));
    fadeImage( randOrder[2], randRange( 1, 4 ));
  }

  animation_timer = setTimeout( rotateImages, 6000 );
}

// ~~~ fadeImage() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function fadeImage( position, num )
{
  var img_a = 'img_' + position + '_a';
  var img_b = 'img_' + position + '_b';
  var bImmediate = false;

  if( arguments.length > 2 )
    bImmediate = arguments[2];

  if( bImmediate )
    speed = 0;

  if( $( img_a ).style.display == 'none' )
  {
    $( img_a ).src = s_WEBROOT + "/shared/images/generated/resized_" + position + "_" + num + '.jpg';
    $( img_a ).appear({ duration:speed, queue: { position:'end', scope:'imageFader' }});
    $( img_b ).fade({ duration:speed, queue: { position:'end', scope:'imageFader' }});
  }
  else
  {
    $( img_b ).src = s_WEBROOT + "/shared/images/generated/resized_" + position + "_" + num + '.jpg';
    $( img_b ).appear({ duration:speed, queue: { position:'end', scope:'imageFader' }});
    $( img_a ).fade({ duration:speed, queue: { position:'end', scope:'imageFader' }});
  }

  // reset speed
  if( bImmediate )
    speed = 0.5;
}

// ~~~ randRange() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function randRange( lowVal, highVal )
{
  return Math.floor( Math.random() * ( highVal - lowVal + 1 )) + lowVal;
}

function getRandomOrder()
{
  var order = randRange( 1, 6 );
  switch( order )
  {
    case 1:{ return ['L','M','R']; }
    case 2:{ return ['L','R','M']; }
    case 3:{ return ['M','R','L']; }
    case 4:{ return ['M','L','R']; }
    case 5:{ return ['R','L','M']; }
    case 6:{ return ['R','M','L']; }
  }
}