var autoScrollTextValueId = 'auto_scroll_text_value';
var autoScrollTextContainerId = 'auto_scroll_text_container';
var scrollSpeed = 1;

function getStyle(el,styleProp)
{
  var x = document.getElementById(el);
  if (x.currentStyle)
    var y = x.currentStyle[styleProp];
  else if (window.getComputedStyle)
    var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
  return y;
}

function getText()
{
  return document.getElementById(autoScrollTextValueId);
}

function getContainer()
{
  return document.getElementById(autoScrollTextContainerId);
}

function getTextWidth()
{
  //return getStyle(autoScrollTextValueId, 'width');//getText().offsetWidth;
  return getText().offsetWidth;
}

function getContainerWidth()
{
  return getContainer().clientWidth;
}

function getTextItem(i)
{
  return document.getElementById(autoScrollTextValueId + '_' + i);
}

window.onload = function()
{
  var maxItems = 50;

  var posLeft = 0;
  var textWidth = getTextWidth();
  var containerWidth = getContainerWidth();
  if (textWidth > 0 && containerWidth > 0)
  {
    var textHtml = getText().firstChild.innerHTML;
    for (i = 0; i < maxItems; i++)
    {
      if (2 * containerWidth <= textWidth || textWidth <= 0)
        break;
      
      getText().innerHTML = getText().innerHTML + '&nbsp;<span style="position: relative;" id="auto_scroll_text_value_' + (i + 1) +  '">' + textHtml + '</span>';
      
      textWidth = getTextWidth();
    }
    setInterval(function()
    {
      var textValueStyle = getText().style;
      textValueStyle.left = posLeft + 'px';

      posLeft -= scrollSpeed;
      if ((-1) * posLeft == getTextItem(0).offsetWidth)
        posLeft = 0;
    }, 30);
  }
}