function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}


var currentYPos = 0;
var imageHeight = 100;
var maxHeight = 200;
var minHeight = 0;



function prepareCarousel()
{  
   // Make sure the browser understands the DOM methods
   if (!document.getElementsByTagName) return false;
   if (!document.getElementById) return false;
   
   // Make sure the elements exist
   if (!document.getElementById("carouselImages")) return false;
   if (!document.getElementById("imageContainer")) return false;

	//show the carousel (hidden in css)
	var carouselImages = document.getElementById("carousel");
	carouselImages.style.visibility = "visible";
   
	// remove the scroll bars
	var carouselImages = document.getElementById("carouselImages");
	carouselImages.style.overflow = "hidden";
    
    
    var carouselImagesImages = carouselImages.getElementsByTagName("img");
    
    //
    for(var i=0; i < carouselImagesImages.length; i++)
    {
		carouselImagesImages[i].style.marginTop = -imageHeight + "px";
		carouselImagesImages[i].style.marginBottom = imageHeight + "px";
	}
      
	// add the js calls to the up and down buttons
	var btnUp = document.createElement("a");   
	btnUp.id = "carouselUpLink"
	btnUp.innerHTML = "<span>Scroll up</span>"
	btnUp.href = "#";
	btnUp.onclick = moveUp;
   
	var btnDown = document.createElement("a");   
	btnDown.id = "carouselDownLink"
	btnDown.innerHTML = "<span>Scroll down</span>"
	btnDown.href = "#";
	btnDown.onclick = moveDown;


	btnDown.className = btnUp.className = "carouselButtons";
	//btnDown.firstChild.className = btnUp.firstChild.className = "accessHide";
	
	//Insert up link	
	carouselImages.parentNode.insertBefore(btnUp,carouselImages);
	
	//Insert down link
	if(carouselImages.nextNode)
		carouselImages.parentNode.insertBefore(btnDown,carouselImages.nextNode);
	else 
		carouselImages.parentNode.appendChild(btnDown);
   
	// set the image container to position:absolute so that it will animate
	var imgContainer = document.getElementById("imageContainer");
	imgContainer.style.position = "absolute";
   
   // set the min height to animate to based on number of images and their respective heights
//   var images = imgContainer.getElementsByTagName("img");
//   minHeight = -((images.length - 1) * imageHeight);
}

addLoadEvent(prepareCarousel);


// Event handlers for up and down links
function moveUp()
{  
	swapImg("up");
	currentYPos = currentYPos - imageHeight;
	moveElement("imageContainer", 0, currentYPos, 30, "none");
	return false;
}

function moveDown()
{ 
	swapImg("down");
	currentYPos = currentYPos + imageHeight;
	moveElement("imageContainer", 0, currentYPos, 30,  "none");
	return false;
}


// Looping the loop — swap an image from top to bottom and vice-versa
function swapImg(dir)
{
	if(dir == "none") return false;
	var imgContainer = document.getElementById("imageContainer");
	var images = imgContainer.getElementsByTagName("a");
	var imgArray = new Array();
   
	for(var i=0; i < images.length; i++)
		imgArray.push(images[i].cloneNode(true))

	if(dir == "down")
		imgArray.unshift(imgArray.pop())
	else
		imgArray.push(imgArray.shift())
	
	imgContainer.innerHTML = "";
	
	for(var j=0; j < imgArray.length; j++)
		imgContainer.appendChild(imgArray[j]);
 
	currentYPos = imgContainer.style.top = 0;
}


//Animate the image container
function moveElement(elementID,final_x,final_y,interval, dir) {
  
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
   // elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) 
  {
      if(dir)
      {
         swapImg(dir);
      }
      return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/8);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/8);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/8);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/8);
    ypos = ypos - dist;
  }
  //elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+",'" + dir + "')";
  elem.movement = setTimeout(repeat,interval);
}