var potentialsPos = 0;
var potentialsLength = 0;
function setPotentialsLength(amount)
{
  $('#tuningindexpotentials .paginator td:last').unbind('click');
  $('#tuningindexpotentials .paginator td:first').unbind('click');
  $('#tuningindexpotentials .paginator td:first').unbind('mouseenter').unbind('mouseleave');
  $('#tuningindexpotentials .paginator td:last').unbind('mouseenter').unbind('mouseleave');
  $('#tuningindexpotentials .paginator a').unbind('click');
  
  potentialsLength = amount;
  $('#tuningindexpotentials .paginator').html(
    '<table cellpadding="0" cellspacing="0">' +
      '<tr valign="top">' +
        '<td>' +
          '<div class="prev"></div>' +
        '</td>' +
        '<td style="padding-left: 5px; padding-right: 5px;">' +
          '<a>' +
            '<span class="actual">' + (potentialsPos + 1) + '</span> ' +
            '<localized>von</localized> ' +
            amount +
          '</a>' +
        '</td>' +
        '<td>' +
          '<div class="next"></div>' +
        '</td>' +
      '</tr>' +
    '</table>'
  );
  $('#tuningindexpotentials .paginator td:last').click(
    function ()
    {
      if ((potentialsPos + 1) < potentialsLength)
      {
        updatePotential(arrayPotentials[potentialsPos + 1][1], (potentialsPos + 1), true);
      }
    }
  );
  $('#tuningindexpotentials .paginator td:first').click(
    function ()
    {
      if (potentialsPos > 0)
      {
        updatePotential(arrayPotentials[potentialsPos - 1][1], (potentialsPos - 1), true);
      }
    }
  );
  $('#tuningindexpotentials .paginator td:first').hover(
    function ()
    {
      $(this).find('.prev').addClass('prevhover');
      if ($(this).find('.prev').css('visibility') == 'visible')
      {
        $(this).css('cursor', 'pointer');
      }
    },
    function ()
    {
      $(this).find('.prev').removeClass('prevhover');
      $(this).css('cursor', 'auto');
    }
  );
  $('#tuningindexpotentials .paginator td:last').hover(
    function ()
    {
      $(this).find('.next').addClass('nexthover');
      if ($(this).find('.next').css('visibility') == 'visible')
      {
        $(this).css('cursor', 'pointer');
      }
    },
    function ()
    {
      $(this).find('.next').removeClass('nexthover');
      $(this).css('cursor', 'auto');
    }
  );
  $('#tuningindexpotentials .paginator a').click(
    function ()
    {
      call('#potential:dialog');
    }
  );
  $('#tuningindexpotentials h3 img').hide();
  
  $('#tuningindexpotentials .prev').css('visibility', (potentialsPos == 0) ? 'hidden' : 'visible');
  $('#tuningindexpotentials .next').css('visibility', ((potentialsPos + 1) >= potentialsLength) ? 'hidden' : 'visible');
}

var potentialInMove = false;
function updatePotential(text, pos, fade)
{
  if (!potentialInMove)
  {
    potentialInMove = true;
    var html = '<td>' +
        '<div class="number"' + ((arrayPotentials[pos][0] == '') ? ' style="visibility: hidden;"' : '') + '>' + (arrayPotentials[pos][0].toUpperCase()) + '</div>' +
      '</td>' +
      '<td width="283">' +
        text +
      '</td>';
    $('#potential-overlay div').show();
    $('.tuindex.potential').stop(false, true).animate(
      {
        opacity: 0
      },
      (fade ? 250 : 0)
    );
    $('#potential-overlay div').stop(false, true).animate(
      {
        opacity: 1
      },
      (fade ? 250 : 0), 
      function()
      {
        $('#tuningindexpotentials .content tr').html(
          html
        );
        potentialsPos = pos;
        $('#tuningindexpotentials .paginator .actual').html(potentialsPos + 1);
        $('.graphcontainer.potential').hide();
        $('#graph' + arrayPotentials[pos][0].toLowerCase()).show();
        $('#tuningindexpotentials .prev').css('visibility', (pos == 0) ? 'hidden' : 'visible');
        if (pos == 0)
        {
          $('#tuningindexpotentials .paginator td:first').css('cursor', 'auto');
        }
        $('#tuningindexpotentials .next').css('visibility', ((pos + 1) >= potentialsLength) ? 'hidden' : 'visible');
        if ((pos + 1) >= potentialsLength)
        {
          $('#tuningindexpotentials .paginator td:last').css('cursor', 'auto');
        }
        $('#tuindex' + arrayPotentials[pos][0].toLowerCase()).animate(
          {
            opacity: 1
          },
          (fade ? 250 : 0)
        );
        $('#potential-overlay div').animate(
          {
            opacity: 0
          },
          (fade ? 250 : 0), 
          function ()
          {
            $(this).hide();
            potentialInMove = false;
          }
        );
      }
    );
    
  }
}

// TODO normalize with activity
var arrayPotentials = new Array();
function updatePotentials(tuArray)
{
  var fade = false;
  var arrayPotentialsOld = arrayPotentials;
  arrayPotentials = tuArray;
  setPotentialsLength(arrayPotentials.length);
  $('#tuningindexbar .potential').remove();
  $('#graphpotential').html('');
  var htmlBar = htmlGraph = htmlBarFrame = '';
  for (var i = 0; i < arrayPotentials.length; i++)
  {
    if (arrayPotentialsOld.length <= i || arrayPotentials[i][2] != arrayPotentialsOld[i][2] || arrayPotentials[i][3] != arrayPotentialsOld[i][3])
    {
      fade = true;
    }
    if (arrayPotentials[i][4])
    {
      var letterLowercase = arrayPotentials[i][0].toLowerCase();
      $('#tuningindexbarturbo').unbind('mouseenter').unbind('mouseleave');
      $('#tuningindexbarturbo').hover(
        function ()
        {
          call('#tooltip:1:tuindex' + letterLowercase);
        },
        function ()
        {
          call('#tooltip:0:tuindex' + letterLowercase);
        }
      );
      // no bar for turbo mode
      if (arrayPotentials[i][3] > 0)
      {
        var width = arrayPotentials[i][3];
        if (arrayPotentials[i][2] == 0)
        {
          width += 4;
        }
        if ((arrayPotentials[i][3] + arrayPotentials[i][2]) == 16)
        {
          width += 3;
        }
        if ((arrayPotentials[i][2] < 10) && (arrayPotentials[i][3] > 5))
        {
          var start = Math.max(5, arrayPotentials[i][2]);
          var end = Math.min(10, arrayPotentials[i][3]);
          var doubleWidth = ((end - start));
          width += doubleWidth;
        }
        var left = 229;
        if (arrayPotentials[i][2] > 0)
        {
          left += (arrayPotentials[i][2] + 3);
        }
        if (width > 16)
        {
          var difference = Math.floor((width - 16) / 2);
          htmlGraph += '<div ' +
              'id="graph' + letterLowercase + '" ' +
              'class="graphcontainer potential turbo"' +
              'style="' +
                'left: ' + (left - difference) + 'px; ' +
                'padding-left: ' + difference + 'px; ' +
                'width: ' + width + 'px; ' +
              '">' +
              '<div class="graph"></div>' +
              '<div class="connector"></div>' +
              '<div class="number" style="margin-left: ' + ((difference)) + 'px;">' +
                arrayPotentials[i][0].toUpperCase() + 
              '</div>' +
            '</div>';
        }
        else
        {
          if (width < 16)
          {
            var difference = Math.round((16 - width) / 2);
          }
          else
          {
            var difference = 0;
          }
          htmlGraph += '<div ' +
              'id="graph' + letterLowercase + '" ' +
              'class="graphcontainer potential turbo"' +
              'style="' +
                'left: ' + (left - difference) + 'px; ' +
                'padding-left: ' + difference + 'px; ' +
                'width: ' + width + 'px; ' +
              '">' +
              '<div class="graph"></div>' +
              '<div class="connector"></div>' +
              '<div class="number" style="margin-left: -' + ((difference)) + 'px;">' +
                arrayPotentials[i][0].toUpperCase() + 
              '</div>' +
            '</div>';
        }
      }
    }
    else
    {
      if (arrayPotentials[i][3] > 0)
      {
        var width = (arrayPotentials[i][3] - 1);
        var style = '';
        if ((arrayPotentials[i][2] + arrayPotentials[i][3]) == 225)
        {
          width = arrayPotentials[i][3];
          style = 'border-right: none; ';
        }
        htmlBar += '<div ' +
          'id="tuindex' + arrayPotentials[i][0].toLowerCase() + '" ' +
          'class="tuindex potential tuindexf" ' +
          'style="' +
            'left: ' + (arrayPotentials[i][2] + 2) + 'px; ' +
            'width: ' + width + 'px; ' +
            style +
            'filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); ' +
            'background-position-x: -' + (arrayPotentials[i][2] + 3) + 'px; ' +
          '"></div>';
        htmlBarFrame += '<div ' +
          'id="helpertuindex' + arrayPotentials[i][0].toLowerCase() + '" ' +
          'class="tuindex potential" ' +
          'style="' +
            'left: ' + (arrayPotentials[i][2] + 2) + 'px; ' +
            'width: ' + (arrayPotentials[i][3] - 1) + 'px; ' +
          '"></div>';
        if (arrayPotentials[i][3] < 16)
        {
          var difference = Math.round((16 - arrayPotentials[i][3]) / 2)
          htmlGraph += '<div ' +
              'id="graph' + arrayPotentials[i][0].toLowerCase() + '" ' +
              'class="graphcontainer potential"' +
              'style="' +
                'display: none; ' +
                'left: ' + (arrayPotentials[i][2] - 1 - difference) + 'px; ' +
                'width: ' + (arrayPotentials[i][3] + 1) + 'px; ' +
                'padding-left: ' + difference + 'px; ' +
              '">' +
              '<div class="graph"></div>' +
              '<div class="connector"></div>' +
              '<div class="number" style="margin-left: -' + difference + 'px;">' + 
                arrayPotentials[i][0].toUpperCase() + 
              '</div>' +
            '</div>';
        }
        else
        {
          htmlGraph += '<div ' +
              'id="graph' + arrayPotentials[i][0].toLowerCase() + '" ' +
              'class="graphcontainer potential"' +
              'style="' +
                'display: none; ' +
                'left: ' + (arrayPotentials[i][2] - 1) + 'px; ' +
                'width: ' + (arrayPotentials[i][3] + 1) + 'px; ' +
              '">' +
              '<div class="graph"></div>' +
              '<div class="connector"></div>' +
              '<div class="number">' +
                arrayPotentials[i][0].toUpperCase() + 
              '</div>' +
            '</div>';
        }
      }
    }
  }
  $('#tuningindexbar .frame').append(htmlBarFrame);
  $('#tuningindexbar').prepend(htmlBar);
  $('#tuningindexbar .frame .potential').hover(
    function ()
    {
      $('#' + $(this).attr('id').substr(6)).css('opacity', 1);
    },
    function ()
    {
      if (arrayPotentials[potentialsPos][0].toLowerCase() != $(this).attr('id').substr($(this).attr('id').length - 1, 1))
      {
        $('#' + $(this).attr('id').substr(6)).css('opacity', 0);
      }
    }
  );
  activateTooltip($('#tuningindexbar .tuindex.potential'));
  $('#graphpotential').html(htmlGraph);
  $('.tuindex.potential').stop(false, true).animate(
    {
      opacity: 0
    },
    250
  );
  if (potentialsLength <= potentialsPos)
  {
    potentialsPos = (potentialsLength - 1);
    var fade = true;
  }
  
  updatePotential(arrayPotentials[potentialsPos][1], potentialsPos, fade);
}

function gotoPotential(index)
{
  if (index != potentialsPos)
  {
    updatePotential(arrayPotentials[index][1], index);
  }
}
