var rotateTime = 5000;  // Don't put anything less than 3000ms
  var numberOfImages = 4;  // Number of images in rotation at a time
  var smallImgHeight = 94;  // Height of small images
  var smallImgPath = "http://localhost/kosmodisk0/wp-content/themes/big green/images/small/";  // Path to small images
  var largeImgPath = "http://localhost/kosmodisk0/wp-content/themes/big green/images/large/";  // Path to large images
  var imageArray = new Array();
  var position = 0;
  var largePosition = 0;
  var timerID = null;
  var movingTimerID = null;
  
  function imgObj(smallImg, largeImg) {
    this.small =  smallImgPath + smallImg;
    this.large =  largeImgPath + largeImg;
  }
  
  // Put your image names here.
  function initializeImages() {
    imageArray[0] = new imgObj("image2.jpg", "image2.jpg");
    imageArray[1] = new imgObj("image1.jpg", "image1.jpg");
    imageArray[2] = new imgObj("image3.jpg", "image3.jpg");
    imageArray[3] = new imgObj("image4.jpg", "image4.jpg");
    imageArray[4] = new imgObj("image5.jpg", "image5.jpg");
  }
  
  // Gets called when the page loads.
  function start() {
    var str = "";
    initializeImages();
    position = imageArray.length - 1;
    
    for (var i = 0; i < numberOfImages; ++i)
      str += "<div><img onclick=\"recursiveFade(100, '" + imageArray[i].large + "')\" src=\"" + imageArray[i].small + "\" /></div>";
    
    document.getElementById("imagePanel").innerHTML = str;
    timerID = setTimeout("rotate(1)", rotateTime);
  }
  
  // Cycles the right panel one image.
  function moveNext(c, dir) {
    var i = parseInt(c) + 3;
    var s = document.getElementById("imagePanel");
    
    if (dir == 1)
      s.firstChild.style.height = i + 'px';
    else
    {
      s.firstChild.style.height = parseInt(smallImgHeight - i) + 'px';
      s.lastChild.style.height = i + 'px';
    }  
    if (i >= smallImgHeight)
    {
      if (dir == 1)
        s.removeChild(s.lastChild);
      else
        s.removeChild(s.firstChild);
        
      movingTimerID = null;
      return;
    }
    
    movingTimerID = setTimeout('moveNext(\'' + i + '\', \'' + dir + '\')', 25);
  }
  
  // Fades out the current large image and fades in the new large image.
  function recursiveFade(opa, img) {
    var s = document.getElementById("leftPanel");
    var opacity = parseInt(opa) - 10;
    s.getElementsByTagName("img")[0].style.opacity = opacity * .01;
    s.getElementsByTagName("img")[0].style.filter = "alpha(opacity = " + opacity + ")";
    
    if (opacity <= 0)
    {
      s.removeChild(s.firstChild);
      s.innerHTML = "<img src=\"" + img + "\" />";
      s.getElementsByTagName("img")[0].style.opacity = "0";
      s.getElementsByTagName("img")[0].style.filter = "alpha(opacity = 0)";
      fadeIn(0);
      return;
    }
    setTimeout("recursiveFade(" + opacity + ", \"" + img + "\"), 1000");
  }
  
  function fadeIn(opa) {
    var s = document.getElementById("leftPanel");
    var opacity = parseInt(opa) + 10;
    s.getElementsByTagName("img")[0].style.opacity = opacity * .01;
    s.getElementsByTagName("img")[0].style.filter = "alpha(opacity = " + opacity + ")";
    
    if (opacity >= 100)
      return;
    
    setTimeout("fadeIn(" + opacity + "), 1000");
  }
  
  // Gets called every "rotateTime" milliseconds to automatically scroll down.
  function rotate(s) {
    var newDiv = document.createElement("div");
    var p = document.getElementById("imagePanel");
    largePosition = (position + 1 > imageArray.length - 1 ? 0 : position + 1);
    
    if (s == 1)
      recursiveFade(100, imageArray[largePosition].large);
    
    newDiv.innerHTML = "<img onclick=\"recursiveFade(100, '" + imageArray[position].large + "')\" src=\"" + imageArray[position].small + "\" />";
    newDiv.style.height = "0px";

    --position; 
    if (position <= -1)
      position = imageArray.length - 1;  
    
    p.insertBefore(newDiv, p.firstChild);
    moveNext(0, 1);
      
    timerID = setTimeout("rotate(1)", rotateTime);
  }
  
  // Restarts the timer when you mouse out of the buttons or the right panel.
  function startAgain() {
    clearTimeout(timerID);
    timerID = setTimeout("rotate(1)", rotateTime);
  }
  
  // Up button.
  function rotateUp() {
    if (movingTimerID)
      return;
      
    var newDiv = document.createElement("div");
    var p = document.getElementById("imagePanel");

    newDiv.innerHTML = "<img onclick=\"recursiveFade(100, '" + imageArray[position].large + "')\" src=\"" + imageArray[position].small + "\" />";
    newDiv.style.height = "0px";

    ++position; 
    if (position >= imageArray.length)
      position = 0;
      
    p.appendChild(newDiv);
    moveNext(0, 0);
    clearTimeout(timerID);
  }
  
  // Down button.
  function rotateDown() {
    if (movingTimerID)
      return;
      
    rotate(0);
    clearTimeout(timerID);
  }