var target;
var originLeft;
var totalLength = 0;
var speed = 5; //normal speed
window.onload = initMarquee;

function initMarquee() {
  var target = document.getElementById("marqueewrapper");
  // set the position into relative in order for it to work
  target.style.position = "relative";
  target.style.overflow = "hidden";
  target.style.whiteSpace = "nowrap";
  target.style.width = "500px";
  target.style.height = "2.3em";
  var nextDiv = target.getElementsByTagName("div");
  nextDiv[0].firstChild.style.position = "absolute";
  nextDiv[0].firstChild.style.width = "500px";
  nextDiv[0].style.height = "1em";
  nextDiv[0].style.lineHeight = "1em";
  
  //control the speed when the mouse over and out
  attachEventListener(target, "mouseover", slowSpeed, false);
  attachEventListener(target,"mouseout", normalSpeed, false);
  var listelements = target.getElementsByTagName("li");

  for (i=0;i<listelements.length;i++) {
    listelements[i].style.display = "inline";
    listelements[i].style.paddingLeft = "0";
    totalLength = totalLength+listelements[i].offsetWidth;
  }
  originLeft = parseInt(retrieveComputedStyle(target, "left"));
  
  document.getElementById("groupmarquee").animationTimer = 
    setInterval('moveObject(document.getElementById("groupmarquee"),  -1400)', 100);
}

//animate the motion of the marquee
function moveObject(target, destinationLeft) {
  var currentLeft = parseInt(retrieveComputedStyle(target, "left"));
  
  if (isNaN(currentLeft)) {
    currentLeft = 0;
  }
  
  if (currentLeft < destinationLeft) {
    currentLeft += speed;
    if (currentLeft > destinationLeft) {
      currentLeft = destinationLeft;
    }
  } else {
    currentLeft -= speed;
    if (currentLeft < destinationLeft) {
      currentLeft = destinationLeft;
    }
  }
  target.style.left = currentLeft+"px";
   
  if (currentLeft <= destinationLeft) {
    target.style.left = parseInt(target.style.width+5)+"px";
   }
}
function slowSpeed(event) {
  speed = 2;
}

function normalSpeed(event) {
  speed = 7;
}

/* ===================== Library Collection  =================== 
   |    The code below copied from "The JavaScript Anthology   |
   |    and could be good candidate for common library         |
   ============================================================*/
   
function retrieveComputedStyle(element, styleProperty) {
  var computedStyle = null;
  
  if (typeof element.currentStyle != "undefined") {
    computedStyle = element.currentStyle;
  }else {
    computedStyle = document.defaultView.getComputedStyle(element, null);
  }
  
  return computedStyle[styleProperty];
  
}

function attachEventListener(target, eventType, functionRef, capture) {
  if (typeof target.addEventListener != "undefined") {
    target.addEventListener(eventType, functionRef, capture);
  } else if (typeof target.attachEvent != "undefined") {
    var functionString = eventType+functionRef;
    target["e"+functionString] = functionRef;
    
    target[functionString] = function(event)  {
      if (typeof event == "undefined") {
        event = window.event;
      }
      target["e" + functionString] (event);
    };
    
    target.attachEvent("on"+eventType, target[functionString]);
  } else { 
    eventType="on"+eventType;
    
    if (typeof target[eventType] == "function") {
      var oldListener = target[eventType];
      
      target[eventType] = function() {
        oldListener();
        
        return functionref();
      }
     } else {
       target[eventTYpe] = functionRef;
    }
  }
}