function slider() {
  imageRotate();
}

function initializeTimer(sec) {
    // Set the length of the timer, in seconds
    secs = sec;
    stopTheClock();
    startTheTimer();
}

function stopTheClock() {
    if(timerRunning)
    clearTimeout(timerID);
    timerRunning = false;
}

function startTheTimer() {
    if (secs==0)
    {
        stopTheClock();
        slider();
				initializeTimer(2);
    }
    else
    {
        self.status = secs;
        secs = secs - 1;
        timerRunning = true;
        timerID = self.setTimeout("startTheTimer()", delay);
    }
}

function theImage() {
  // Set the opacity of all images to 0
  $('div#portfolioSample ul li').css({opacity: 0.0});
  
  // Get the first image and display it (gets set to full opacity)
  $('div#portfolioSample ul li:first').css({opacity: 1.0});
}

function imageRotate() {
  if (i == numberImages) {
    i = 1;
    beginStatus = 0;
		document.getElementById('imageLeftLeft').src = "imagesDesign/arrowLeftLeftOff.png";
  }
	else {
	  i = i + 1;
		beginStatus = 1;
	}
		
  // Get the first image
  var current = ($('div#portfolioSample ul li.show') ?  $('div#portfolioSample ul li.show') : $('div#portfolioSample ul li:first'));

  // Get next image, when it reaches the end, rotate it back to the first image
  var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#portfolioSample ul li:first') : current.next()) : $('div#portfolioSample ul li:first'));  
  
  // Set the fade in effect for the next image, the show class has higher z-index
  next.css({opacity: 0.0})
  .addClass('show')
  .animate({opacity: 1.0}, 1000);

  //Hide the current image
  current.animate({opacity: 0.0}, 1000)
  .removeClass('show');
};

function imageFirst() {
  i = 1;
	beginStatus = 0;
  // Get the current image
  var current = ($('div#portfolioSample ul li.show') ?  $('div#portfolioSample ul li.show') : $('div#portfolioSample ul li:first'));

  // Get first image
  var next = $('div#portfolioSample ul li:first');  
  
  // Set the fade in effect for the next image, the show class has higher z-index
  next.css({opacity: 0.0})
  .addClass('show')
  .animate({opacity: 1.0}, 1000);

  //Hide the current image
  current.animate({opacity: 0.0}, 1000)
  .removeClass('show');
};


function loadArrows() {
  document.getElementById('autoID').src="imagesDesign/pause.png";
  document.getElementById('imageLeftLeft').src = "imagesDesign/arrowLeftLeftOff.png";
  document.getElementById('imageRight').src = "imagesDesign/arrowRightOff.png";
  
  return true;
}

function autoPlay() {
	if (autoStatus == 1) {
    stopTheClock();
	  document.getElementById('autoID').src="imagesDesign/play.png";
    document.getElementById('imageLeftLeft').src = "imagesDesign/arrowLeftLeft.png";
    document.getElementById('imageRight').src = "imagesDesign/arrowRight.png";
    autoStatus = 0;
	}
	else {
    document.getElementById('autoID').src="imagesDesign/pause.png";
    document.getElementById('imageLeftLeft').src = "imagesDesign/arrowLeftLeftOff.png";
    document.getElementById('imageRight').src = "imagesDesign/arrowRightOff.png";
    initializeTimer(2);
		autoStatus = 1;
	}
}

function begin() {
  if (beginStatus == 0) {
		return true;
	}
		
  imageFirst();
  document.getElementById('imageLeftLeft').src = "imagesDesign/arrowLeftLeftOff.png";
}

function next() {
	if (beginStatus == 0) {
    document.getElementById('imageLeftLeft').src = "imagesDesign/arrowLeftLeft.png";
		beginStatus = 1;
	}

  slider();
}