var maxMoves;
var moveCount = 0;
var twoRows = false;
var FrameInterval = 44;
var LastFrameInterval = 8;
var LastFrame = 18;
var ListItemPx = 200;

function moveLeft(element, toggleBtns)
{
  if (moveCount < maxMoves){
        moveLeftGo(element, toggleBtns);
    _hbLink('More_content_Right'); 
  }
}

function moveRight(element, toggleBtns)
{
    if (moveCount != 0) {
     moveRightGo(element, toggleBtns);
     _hbLink('More_content_Left'); 
    }
}

function moveLeftGo(element, toggleBtns)
{
    var frame = 0;

    if (moveCount >= maxMoves){
      return;
    }

    var intervalId = setInterval(goLeft, 1);

    function goLeft(){
      if (frame > LastFrame){
        clearInterval(intervalId);
        return;
      }
      var leftpx = stripOutPx(element.style.left);     
      element.style.left = (frame == LastFrame ? (leftpx - LastFrameInterval) : (leftpx - FrameInterval)) + "px";
      if (twoRows) {
        var secondRow = document.getElementById('ulContentsSecondRow');
        secondRow.style.left = (frame == LastFrame ? (leftpx - LastFrameInterval) : (leftpx - FrameInterval)) + "px";
      }
      frame++;      
    }
   
    moveCount++;
    
    changeToggleButtons(toggleBtns);
 
}

function moveRightGo(element, toggleBtns)
{
    var frame = 0;

    if (moveCount == 0) {
      return;
    }
    
    var intervalId = setInterval(goRight, 1);

    function goRight(){
      if (frame > LastFrame){
        clearInterval(intervalId);
        return;
      }
      var leftpx = stripOutPx(element.style.left);    
      element.style.left = (frame == LastFrame ? (leftpx + LastFrameInterval) : (leftpx + FrameInterval)) + "px";
      if (twoRows) {
        var secondRow = document.getElementById('ulContentsSecondRow');
        secondRow.style.left = (frame == LastFrame ? (leftpx + LastFrameInterval) : (leftpx + FrameInterval)) + "px";
      }
      frame++;      
    }
    moveCount--;

    changeToggleButtons(toggleBtns);
   
}


function stripOutPx(pxValue){
  var px = pxValue.split('p')[0];
  return px == '' ? 0 : parseInt(px);
}

function interrogateContentList(element, toggleBtns){
  var liCount = 0;
  maxMoves = 0;
  for (var i=0; i<element.childNodes.length; i++){
    var node = element.childNodes[i];
    if (node.nodeName == 'LI'){
      liCount++;      
    }    
  }

  element.style.width = (liCount * ListItemPx) + "px";
  
  if (liCount > 4){
    var temp = liCount / 4;
    maxMoves = parseInt(temp);
    if (maxMoves > 1 && liCount % 4 == 0){
      maxMoves--;
    }
  }
  generateToggleButtons(toggleBtns);
}

function interrogateContentListTwoRow(firstRow, secondRow, toggleBtns){
  twoRows = true;
  var liCountFirstRow = 0;
  var liCountSecondRow = 0;
  maxMoves = 0;
  maxLi = 0;
  liCountFirstRow = firstRow.getElementsByTagName('li').length;
  liCountSecondRow = secondRow.getElementsByTagName('li').length;
  maxLi = Math.max(liCountFirstRow, liCountSecondRow);

  firstRow.style.width = (maxLi * ListItemPx) + "px";
  secondRow.style.width = (maxLi * ListItemPx) + "px";
  
  if (maxLi > 4){
    var temp = maxLi / 4;
    maxMoves = parseInt(temp);
    if (maxMoves > 1 && maxLi % 4 == 0){
      maxMoves--;
    }
  }
  generateToggleButtons(toggleBtns);
}

function generateToggleButtons(togBtns)
{  
  for (i=0; i<=maxMoves; i++){
    var togImg = document.createElement("img");
    if (i==0){
      togImg.setAttribute("src", "/Images/BoxCustOrg_8x8_Select.gif");
    }
    else{
      togImg.setAttribute("src", "/Images/BoxCustGry_8x8_Up.gif");
    }

    togImg.setAttribute("id", i);
    togImg.onclick = function() { togBtnClick(this); };
    //togImg.setAttribute("onclick", "togBtnClick("+i+")");
    
    togImg.setAttribute("alt", "");

    togBtns.appendChild(togImg);

  }
  
  if (maxMoves > 0)
  {
    // 8px for each block; 4px for spacing between blocks; 16px for l/r margins
    togBtns.style.width = (((maxMoves+1)*8) + (maxMoves*4) + 16) + "px";
  }
  else
  { 
    //If there is only 1 square add 8px for block; 16px for l/r margins
    togBtns.style.width = "24px";
  }

}

function changeToggleButtons(togBtns)
{  
  var children = togBtns.childNodes;
  var imgCount = 0;

  for (i=0; i<children.length; i++){
    
      if (children[i].nodeName == "IMG"){
        imgCount++;
        if (imgCount == moveCount + 1){
          children[i].src = "/Images/BoxCustOrg_8x8_Select.gif";
        }
        else{
          children[i].src = "/Images/BoxCustGry_8x8_Up.gif";
        }
      }
    
  }

}

function togBtnClick(imgId)
{
  var ulToMove = (twoRows ? 'ulContentsFirstRow' : 'ulContents');
  var togBtns = imgId.parentNode;
  var imgIndex = parseInt(imgId.id);
  if (imgIndex == moveCount)
    return;
  if (imgIndex < moveCount){
    var movesToMake = moveCount - imgIndex;
    for (var i=0; i<movesToMake; i++) {
      
      moveRightGo(document.getElementById(ulToMove), togBtns);
      _hbLink('More_content_Screen' + (imgIndex + 1));
    }
    return;
  }
  if (imgIndex > moveCount){
    var movesToMake = imgIndex - moveCount;
    for (var i=0; i<movesToMake; i++) {
      
      moveLeftGo(document.getElementById(ulToMove), togBtns);     
      _hbLink('More_content_Screen' + (imgIndex + 1));
    }
    return;
  }
}