var images;
var cur_img = 0;
var next_img = 0;
var image_btn;
var image_btn_element;
var interval;

var interval_time = 10000;

function update_images(){	
	images[cur_img].tween('opacity', 1, 0);
	
	setTimeout(function(){	
	for(var i=0; i< images.length; i++){
		if(i == cur_img){
			images[i].setStyle('display','block');
			images[i].setStyle('opacity','0');
		}else{
			images[i].setStyle('display','none');
		}			
	}					
	images[next_img].tween('opacity', 0, 1);
	
	}, 500);
	
	cur_img = next_img;
	
}


function gotoImage(the_image_nbr){
		
	window.clearInterval(interval);
	interval = setInterval(changeImage, interval_time);
	
	next_img = the_image_nbr;
	update_images();		
}

function changeImage(){		
	if(cur_img < images.length-1){
		next_img++;			
		if(next_img == 0){		
		}
	}else{
		next_img=0;
	}					

	update_images();						
	
}


function build_buttons(){
	
	var controll_tainer = $$('.controlltainer')[0];
	
	for(var i=images.length-1; i >= 0; i--){
		var btn_element = new Element('div',
		{'class': 'image_btn', 'id': 'btn_' + i});
		
		
		btn_element.addEvent('click', function(e){
			var cur_id = e.target.get('id');
			gotoImage(cur_id.split('btn_')[1])
			
		});
		controll_tainer.adopt(btn_element);
	}

}




window.addEvent("domready",function(e){	
	
	images = $$('.image').reverse();
	images[0].setStyle('display','block');
	
	images.set('tween', {
	    duration: 'long',
	    transition: Fx.Transitions.quat,
	    link: 'cancel',
		duration: 500
	});	
	if(images.length > 1){
		build_buttons();
		interval = setInterval(changeImage, interval_time);	
	}

});