var thumbsInView = 9;
var thumbWidth = 80;
var thumbSpace = 20;
var thumbSize = thumbWidth + thumbSpace;
var halfDataLength = parseInt(Math.floor(carouselData.length / 2));
var thumbZeroOffset = thumbSize * parseInt(Math.floor(thumbsInView / 2));
var selection = 1;
var clipWidth;
var oldX = 0;
var animation = new Object();
animation.timer = null;

function $(elementId) { return document.getElementById(elementId); }

function entitiesToText(entityString) {
  var textString = String(entityString);
  var regex = new RegExp("&#(\\d+);", "ig");

  while(regex.test(entityString))
  {
    var match = RegExp.$1;
    var regexMatch  = new RegExp("&#" + match + ";", "ig");
    textString = textString.replace(regexMatch, String.fromCharCode(match));
  }
  return textString;
}


function iloaded()
{
  var beltclip = $("beltclip");
  clipWidth = beltclip.offsetWidth;
  for (var i=0; i<carouselData.length; i++)
  {
    var img = new Image();
    img.id = i;
    img.src = carouselData[i][2];
    img.alt = entitiesToText(carouselData[i][0] +  carouselData[i][1] + "\r\n" + carouselData[i][4] +  carouselData[i][5] );
    img.title = entitiesToText(carouselData[i][0] + carouselData[i][1] + "\r\n" + carouselData[i][4] + "  " + carouselData[i][5]+ " Synthy");    
    img.onclick = click;
    img.className = "thumb";
    beltclip.appendChild(img);
  }
  $("launch").onclick = launch;
  selection = parseInt(Math.floor(thumbsInView / 2));
  moveThumbsTo(0);
  var message = carouselData[selection][0] + " " + carouselData[selection][1] + "<br/>" + carouselData[selection][4] + " " + carouselData[selection][5]+ " ";   
  setText($("carousellabel"), message);
  $("neighbor_left").onclick = selectPrevious;
  $("neighbor_right").onclick = selectNext;
}

function passclick() { return true; }

function setSelection(newSelection)
{
  if (newSelection == selection)
  {
    window.location = carouselData[selection][3];
  }
  else
  {
    var ox = $(selection).offsetLeft;
    var nx = $(newSelection).offsetLeft;
    var dx = ox - nx;
    var message = carouselData[newSelection][0] + " " + carouselData[newSelection][1] + "<br/>" + carouselData[newSelection][4] + "  " + carouselData[newSelection][5]+ " ";
    setText($("carousellabel"), message);
    moveThumbs(newSelection, dx);
  }
  return true;
}

function moveThumbs(newSelection, x)
{
  animation.targetX = -x;
  animation.newSelection = newSelection;
  animation.startTime = new Date().valueOf();
  animation.timePeriod = 700;
  animation.endTime = animation.startTime + animation.timePeriod;
  animation.timer = self.setInterval('mover()', 30);
}

function mover()
{
  var nowTime = new Date().valueOf();
  
  if (nowTime < animation.endTime)
  {
    var timePassed = (nowTime - animation.startTime) / animation.timePeriod;
    var easedTime = (Math.cos(-Math.PI + timePassed * Math.PI) + 1) / 2;
    var moveStep = animation.targetX * easedTime;
    moveThumbsTo(moveStep);
  }
  else
  {
    moveThumbsTo(animation.targetX);
    animation.timer = self.clearInterval(animation.timer);
    selection = animation.newSelection;
    x = 0;
    animation.targetX = 0;
    animation.timer = null;
  }
}
  
function moveThumbsTo(x)
{
  var firstRenderedThumb = selection - halfDataLength;
  if (firstRenderedThumb  < 0)
  {
    firstRenderedThumb = carouselData.length + firstRenderedThumb;
  }
  var tx = -(halfDataLength * thumbSize - thumbZeroOffset + x);
  for(var j=firstRenderedThumb; j < (firstRenderedThumb + carouselData.length); j++)
  {
    var el = $(j % carouselData.length);
    try { el.style.left = tx + 'px'; } catch (err) {}
    tx += thumbSize;
  }
}

function setText(element, txt)
{
    element.innerHTML = txt;
}

function launch(e)
{
  window.location = carouselData[selection][3];
}

function selectNext()
{
  var newSelection = (selection + 3) % carouselData.length;
  setSelection(newSelection);
}

function selectPrevious()
{
  var newSelection = selection - 3;
  if (newSelection < 0)
  {
    newSelection = carouselData.length + newSelection;
  }
  setSelection(newSelection);
}

function click(e)
{
	if (!e)
	{
    var e = window.event;
  }
	var target = e.srcElement || e.target;
	if (!animation.timer)
	{
    setSelection(target.id);
	}
}