var pic1 = null; // object
var pic2 = null;
var pic3 = null;
var pic4 = null;
var pic5 = null;
var value1 = 0;
var value2 = 0;
var value3 = 0;
var value4 = 0;
var value5 = 0;
var count1 =-240; //set counts depending on starting location to set the fade
var count2 = -120;
var count3 = 0;
var count4 = 120;
var count5 = 240;
var count6 = 360;
var count7 = 480;

/* move each of the images*/
function doMove() {
  pic1.style.top = parseInt(pic1.style.top)-1+'px';
  
  if (parseInt(pic1.style.top)==-120){pic1.style.top=480+"px";} //when it gets to top, move to bottom
  
	value1 = (100 - (count1/2));
  	pic1.style.opacity = value1/100; 						//set fade amount FF
	pic1.style.filter = 'alpha(opacity=' + value1 + ')';	//set fade amount IE

  /*when pic1 moves to bottom, keep on top by still creating a negative top value*/
  if (parseInt(pic1.style.top)>360) {pic2.style.top = parseInt(pic1.style.top)-600+'px';}
  else {pic2.style.top = parseInt(pic1.style.top)+"px";}
  	
	value2 = (100 - (count2/2));
	pic2.style.opacity = value2/100;
	pic2.style.filter = 'alpha(opacity=' + value2 + ')';
  
  if (parseInt(pic2.style.top)>240) {pic3.style.top = parseInt(pic2.style.top)-600+'px';}
  else{pic3.style.top = parseInt(pic2.style.top)+"px";}
  
  	value3 = (100 - (count3/2));
	pic3.style.opacity = value3/100;
	pic3.style.filter = 'alpha(opacity=' + value3 + ')';
  
  if (parseInt(pic3.style.top)>120) {pic4.style.top = parseInt(pic3.style.top)-600+'px';}
  else{pic4.style.top = parseInt(pic3.style.top)+"px";}
  
  	value4 = (100 - (count4/2));
	pic4.style.opacity = value4/100;
	pic4.style.filter = 'alpha(opacity=' + value4 + ')';
	
  if (parseInt(pic4.style.top)>0) {pic5.style.top = parseInt(pic4.style.top)-600+'px';}
  else{pic5.style.top = parseInt(pic4.style.top)+"px";}
  
  	value5 = (100 - (count5/2));
	pic5.style.opacity = value5/100;
	pic5.style.filter = 'alpha(opacity=' + value5 + ')';

/*decrement count for fade equation*/
count1--;
if (count1==-359){count1=241;}
count2--;
if (count2==-359){count2=241;}
count3--;
if (count3==-359){count3=241;}
count4--;
if (count4==-359){count4=241;}
count5--;
if (count5==-359){count5=241;}
count6--;
  
  setTimeout(doMove,70); // call doMove in 70msec
}

/*set variables, initialise values and call move function*/
function init() {
  	pic1 = document.getElementById("pic1");
	pic2 = document.getElementById("pic2");
	pic3 = document.getElementById("pic3");
   	pic4 = document.getElementById('pic4');
	pic5 = document.getElementById('pic5');
  	pic1.style.top = "0px"; // set the initial positions to 0px
  	pic2.style.top = "0px";
  	pic3.style.top = "0px";
  	pic4.style.top = "0px";
	pic5.style.top = "0px";
  	doMove(); // start animating
}

window.onload = init;