function ChangeTab(TabId)
{
  document.getElementById("tab1").className = (1 == TabId) ? "tab-selected" : "";
  document.getElementById("tab2").className = (2 == TabId) ? "tab-selected" : "";
  document.getElementById("tab3").className = (3 == TabId) ? "tab-selected" : "";

  document.getElementById("page1").style.display = (1 == TabId) ? "block" : "none";
  document.getElementById("page2").style.display = (2 == TabId) ? "block" : "none";
  document.getElementById("page3").style.display = (3 == TabId) ? "block" : "none";

}

var tn_position=0;
var tn_index=1;
var is_moving=false;

// Distance to move is 75px.
// Try 10 steps.
var move_steps=new Array(1, 3, 6, 12, 18, 18, 12, 6, 3, 1);
var move_index=0;

function SetPosition(index, nThumbnailsVisible, thumbnailHeight)
{
  var tn_container = document.getElementById("thumbnail-container");
  tn_position = -index * thumbnailHeight;
  tn_index = index+1;
  tn_container.style.top=tn_position+"px";
  
  SetLinks(tn_index, nThumbnailsVisible);
}

function SetLinks(index, nThumbnailsVisible)
{
  for (i = index; i < (index+nThumbnailsVisible); ++i)
  {
    var currentLink = document.getElementById("paletteNo"+i);
	var linkString = currentLink.href;
	if (-1 != linkString.lastIndexOf("&paletteNo"))
	  currentLink.href=linkString.substr(0, linkString.lastIndexOf("&paletteNo"))

	currentLink.href+="&paletteNo="+(i+1-index);
  }
}

function MoveUp(nThumbnails, nThumbnailsVisible, thumbnailHeight)
{
  var tn_target = tn_position - thumbnailHeight;

  if (tn_target < (nThumbnailsVisible-nThumbnails)*thumbnailHeight || is_moving)
    return;

  is_moving=true;
  move_index = 0;
  SetThumbnailContainerPosition("thumbnail-container", tn_target, false);
  ++tn_index;
  SetLinks(tn_index, nThumbnailsVisible);
}

function MoveDown(nThumbnails, nThumbnailsVisible, thumbnailHeight)
{
  var tn_target=tn_position + thumbnailHeight;

  if (tn_target > 0 || is_moving)
    return;

  is_moving=true;
  move_index = 0;
  SetThumbnailContainerPosition("thumbnail-container", tn_target, true);
  --tn_index;
  SetLinks(tn_index, nThumbnailsVisible);
}


function SetThumbnailContainerPosition(tn_container_id, tn_target, is_down)
{
  var tn_container = document.getElementById(tn_container_id);

  if (is_down)
    tn_position += move_steps[move_index];
  else
    tn_position -= move_steps[move_index];

  tn_container.style.top=tn_position+"px";

  if (tn_target != tn_position)
  {
    setTimeout("  SetThumbnailContainerPosition(\""+tn_container_id+"\","+tn_target+","+is_down+")", 75);
    ++move_index;
  }
  else
  {
    is_moving=false;
  }
}