var timerID = null;
var period = 8000;
var fadeTime = 800;
var middle_id = 0;
var previous_id = 0;
var cycleElementId = null;


function switch_middle(id) {
  // return;  // remove this

  clearTimeout(timerID);

  if (id >= ids.length)
	id = 0;

  if (id < 0)
	id = (ids.length-1);

  // dissolve middle divs
  if (previous_id > id)
  {
	// hide upper layers before brining lower layer in view, and fade out higher current layer
	for (i=id+1; i<previous_id; i++)
		$('#'+ids[i]).hide();
	$('#'+ids[id]).css({display:"inline"});
	$('#'+ids[previous_id]).fadeOut((fadeTime),updateTransport(id+1));
  }
  else
	$('#'+ids[id]).fadeIn((fadeTime),updateTransport(id+1));

  previous_id = id;
  timerID = null;
  return id;
}

function updateTransport(id)
{
	document.getElementById("cycle_text").innerHTML = (id) + " of " + ids.length;
}


function cycle_middle()
{
	if (cycleElementId)
	{
		cycleElementId.style.border = "";
		cycleElementId = null;
	}
	timerID = setTimeout("middle_id = switch_middle(middle_id+1); cycle_middle()", period)
}

function cycle_pause(elementId)
{
	clearTimeout(timerID);
	elementId.style.border = "1px solid #5C5E35";
	cycleElementId = elementId;
}

function cycle_back()
{
	middle_id = switch_middle(middle_id-1);
	cycle_middle();
}

function cycle_forward()
{
	middle_id = switch_middle(middle_id+1);
	cycle_middle();
}