// JavaScript Document
function diapo(holder_id, interval, image_loader, show_progress){
	this.timer;
	this.images;
	this.loader;
	this.holder;

	this.current_index = 0;

	this.holder_id = holder_id;
	this.interval = interval;
	this.image_loader = image_loader;
	this.show_progress = show_progress;

	this.images = diapo_images;
	this.start = diapo_start;
	this.change = add_function_diapo_change(this);

	this.show_loader = diapo_show_loader;
	this.hide_loader = diapo_hide_loader;


	//PUT LOADER IN BACKGROUND
	this.holder = document.getElementById(this.holder_id);

	if(this.holder == null){
		alert("Diaporama error, no holder available");
		return null;
	}
	
	
	if( typeof(Fx) == "undefined" ){
		alert("Mootools Fx object is required");
		return null;
	}

	

	//ADD DIAPO CSS
	var head = document.getElementsByTagName("head")[0];
	var css = document.createElement("link");
	css.setAttribute("rel", "stylesheet");
	css.setAttribute("type", "text/css");
	css.setAttribute("href", "/addon_asset/diapo/style/diapo.css");
	head.appendChild(css);
	
	//APPEND CSS OF HOLDER
	this.holder.className += " diapo_component";

	//PLACE HOLDER;
	this.loader = new Image();
	this.loader.src = this.image_loader;
	this.holder.appendChild(this.loader);
	
	this.loader.className = "loader";
	
	

	
}

function diapo_images(images){

	//SHOW IMAGE LOADER
	this.show_loader();
	
	
	//PRELOAD IMAGES
	var image_link, image_title, image_descripition, image_holder_info, parity;
	var diapo_width, diapo_height, diapo_top, diapo_left, diapo_url;

	for( var i = 0; i < images.length; i++){

		image_link = images[i][0];
		
		image_title = images[i][1];
		image_descripition = images[i][2];
		
		diapo_width = images[i][3];
		diapo_height = images[i][4];
		diapo_top = images[i][5];
		diapo_left = images[i][6];
		diapo_url = images[i][7];
		

		var tmp_image = new Image();
		tmp_image.src = image_link;

		if(i % 2 == 0)
			parity = "img_even";
		else
			parity = "img_odd";

		var image_holder = document.createElement("div");
		image_holder.className = "image_holder";
		image_holder.appendChild(tmp_image);

		image_holder_info = document.createElement("div");
		image_holder_info.className = "image_holder_info " + parity;

		if(diapo_width > 0 && diapo_height > 0 && diapo_top > 0 && diapo_left > 0){

			image_holder_info.style.width = diapo_width + "px";
			image_holder_info.style.height = diapo_height + "px";
			image_holder_info.style.top = diapo_top + "px";
			image_holder_info.style.left = diapo_left + "px";

		}
		

		if(diapo_url.length > 0){

			image_holder.style.cursor = "pointer";
			image_holder.onclick = add_function_diapo_url(diapo_url);
			
		}

		image_holder_info.innerHTML = "<h3 class='holder_info_title'>" + image_title + "</h3>";
		image_holder_info.innerHTML += "<p class='holder_info_desc'>" + image_descripition + "</p>";

		image_holder.appendChild(image_holder_info);

		if(i > 0){
			var myFX = new Fx.Style(image_holder,'opacity', {duration: 1, wait:false });
			myFX.set(0);
		}	

		image_holder.style.zIndex = i + 5;
		
		this.images[i] = image_holder;
		
		this.holder.appendChild(this.images[i]);
	}

	this.hide_loader();
}

function diapo_start(){

	this.timer = window.setInterval(this.change, this.interval);
//	this.timer = window.setTimeout(this.change, this.interval);

}

function diapo_change(currObj){

	var current_index = currObj.current_index;

	if(current_index < currObj.images.length){
		
		var next_index = current_index + 1;
	}else{
		
		var next_index = 0;	
	}
	
			
	var myFXout = new Fx.Style(currObj.images[current_index],'opacity', {duration: 1500, wait:false });
	myFXout.start(1,0);

	var myFXin = new Fx.Style(currObj.images[next_index],'opacity', {duration: 1500, wait:true });
	myFXin.start(0,1);
	
	currObj.current_index = next_index;

}

function add_function_diapo_change(currObj){

	return function(){ diapo_change(currObj); };	
}

function diapo_show_loader(){

	this.loader.style.display = "block";
}

function diapo_hide_loader(){

	this.loader.style.display = "none";
}

function add_function_diapo_url(url){

	return function(){ document.location = url; };	
}