var duration = 2500;
var steps = 100;
var delay = 5000;
var change = 1;
var maximum = 20;

var image1 = "image1";
var image2 = "image2";
var image3 = "image3";

var image1_1 = "images/movie1.jpg";
var image1_2 = "images/movie4.jpg";
var image1_3 = "images/movie2.jpg";
var image1_4 = "images/movie5.jpg";
var image1_5 = "images/movie3.jpg";
var image1_6 = "images/movie6.jpg";

var image2_1 = "images/movie2.jpg";
var image2_2 = "images/movie5.jpg";
var image2_3 = "images/movie3.jpg";
var image2_4 = "images/movie6.jpg";
var image2_5 = "images/movie4.jpg";
var image2_6 = "images/movie1.jpg";

var image3_1 = "images/movie3.jpg";
var image3_2 = "images/movie6.jpg";
var image3_3 = "images/movie4.jpg";
var image3_4 = "images/movie1.jpg";
var image3_5 = "images/movie5.jpg";
var image3_6 = "images/movie2.jpg";


function fadeIn(id){
	
  for (i = 0; i <= 1; i += (1 / steps)) {
	  
    setTimeout("setOpacity(" + i + "," + id + ")", i * duration);
	
  }
  
  setTimeout("fadeOut(" + id + ")", delay);
  
}

function fadeOut(id) {
	
  for (i = 0; i <= 1; i += (1 / steps)) {
	
    setTimeout("setOpacity(" + (1 - i) + " , " + id + ")", i * duration);
	
  }
  
  setTimeout("fadeIn(" + id + ")", duration);
  
}

function setOpacity(level, id) {

	document.getElementById(id).style.opacity = level;
	document.getElementById(id).style.MozOpacity = level;
	document.getElementById(id).style.KhtmlOpacity = level;
	document.getElementById(id).style.filter = "alpha(opacity=" + (level * 100) + ");";
  
}

function changeSrc(){

	if(change == 0){

		document.getElementById(image1).style.left = "123px";
		document.getElementById(image1).style.top = "300px";
		document.getElementById(image1).src = image1_1;	
		
		document.getElementById(image2).style.left = "328px";
		document.getElementById(image2).style.top = "225px";
		document.getElementById(image2).src = image2_1;
		
		document.getElementById(image3).style.left = "28px";
		document.getElementById(image3).style.top = "150px";
		document.getElementById(image3).src = image3_1;
		
		change = 1;
		
	}else{

		if(change == 1){
	
			document.getElementById(image1).style.left = "178px";
			document.getElementById(image1).style.top = "75px";
			document.getElementById(image1).src = image1_2;
			
			document.getElementById(image2).style.left = "328px";
			document.getElementById(image2).style.top = "0px";
			document.getElementById(image2).src = image2_2;
			
			document.getElementById(image3).style.left = "28px";
			document.getElementById(image3).style.top = "450px";
			document.getElementById(image3).src = image3_2;
			
			change = 2;
			
		}else{
			
			if(change == 2){
			
				document.getElementById(image1).style.left = "123px";
				document.getElementById(image1).style.top = "300px";
				document.getElementById(image1).src = image1_3;	
				
				document.getElementById(image2).style.left = "328px";
				document.getElementById(image2).style.top = "225px";
				document.getElementById(image2).src = image2_3;
				
				document.getElementById(image3).style.left = "28px";
				document.getElementById(image3).style.top = "150px";
				document.getElementById(image3).src = image3_3;
				
				change = 3;
			
			}else{
			
				if(change == 3){
			
					document.getElementById(image1).style.left = "178px";
					document.getElementById(image1).style.top = "75px";
					document.getElementById(image1).src = image1_4;
					
					document.getElementById(image2).style.left = "328px";
					document.getElementById(image2).style.top = "0px";
					document.getElementById(image2).src = image2_4;
					
					document.getElementById(image3).style.left = "28px";
					document.getElementById(image3).style.top = "450px";
					document.getElementById(image3).src = image3_4;
					
					change = 4;
			
		}else{
			
			if(change == 4){
			
				document.getElementById(image1).style.left = "123px";
				document.getElementById(image1).style.top = "300px";
				document.getElementById(image1).src = image1_5;	
				
				document.getElementById(image2).style.left = "328px";
				document.getElementById(image2).style.top = "225px";
				document.getElementById(image2).src = image2_5;
				
				document.getElementById(image3).style.left = "28px";
				document.getElementById(image3).style.top = "150px";
				document.getElementById(image3).src = image3_5;
				
				change = 5;
			
		}else{
			
			if(change == 5){
			
				document.getElementById(image1).style.left = "178px";
				document.getElementById(image1).style.top = "75px";
				document.getElementById(image1).src = image1_6;	
				
				document.getElementById(image2).style.left = "328px";
				document.getElementById(image2).style.top = "0px";
				document.getElementById(image2).src = image2_6;
				
				document.getElementById(image3).style.left = "28px";
				document.getElementById(image3).style.top = "450px";
				document.getElementById(image3).src = image3_6;
				
				change = 0;
				
						}
				
					}
				
				}
			
			}
			
		}
	
	}
	
}

function init(){
	
	fadeOut(image1);
	fadeOut(image2);
	fadeOut(image3);	
	
	var timer = duration;
	
	setTimeout("changeSrc();", timer);

	for(i = 0; i <= maximum; i ++){		

		timer = timer + (delay + duration);			
		setTimeout("changeSrc();", timer);		
		
	}
		
}

window.onload=function(){
	
	document.getElementById(image1).style.left = "123px";
	document.getElementById(image1).style.top = "300px";
	document.getElementById(image1).src = image1_1;	
		
	document.getElementById(image2).style.left = "328px";
	document.getElementById(image2).style.top = "225px";
	document.getElementById(image2).src = image2_1;
		
	document.getElementById(image3).style.left = "28px";
	document.getElementById(image3).style.top = "150px";
	document.getElementById(image3).src = image3_1;
	
	init();
 
}