/**
 * Class: imageMorph
 * @author ricardoPineda <rap@digitalframe.ws>
 * 
 * License:
 *  Copyright (c) 2008 DigitalFrame.ws - You are free to use this file wherever you wish but please do let us know at labs.digitalframe.ws
 *  so that we can showcase it. You can even post your bugs on our blog and we will fix them asap.
 *  This code is being release under open-terms. Use at your own risk. Give us feedback. Help us fix bugs and implement new features. :)
 *  <contact@digitalframe.ws>
 *  
 *  You can follow up with more comments and suggestions on our blog <http://labs.digitalframe.ws>
 *  
 * Description:
 * 	imageMorph v0.1 is a very early preview release that simulates Flash transition effect using Prototype/Scriptaculous lib.
 * 
 * ChangeLog:
 * 
 * 
 */
/*
 * Initialize Effect
 */
document.observe('dom:loaded', function(){
	this.elem = $('images-list');
	if (!this.elem)		
		return;
	//console.log(this.elem.select('img'));
	this.elem.setStyle({
		overflow: "hidden",
		position: "relative",
		display:   "none"
	});		
	
	$('outer-appear').setStyle({
		background: 'url('+this.elem.select('img')[0].src+')'
	});
	
	$('appear-div').setStyle({
		background: 'url('+this.elem.select('img')[1].src+')'
	});	
	
	setTimeout("Appear(0, 1)", 8000);
});

function onAppear(first_image, second_image){		
	//document.getElementById('output').innerHTML += first_image +' '+ second_image +'<hr>';
	
	//swap the images so that the one that has been faded in is in the outer div
	//and the next one to be faded in is waiting in the invisible inner div...
	$("outer-appear").style.background = 'url('+first_image+')';
	$("appear-div").style.display = 'none';
	$("appear-div").style.background = 'url('+second_image+')';
			
}

function Appear(pic_one_id, pic_two_id){
	var one_id, two_id;
	
	//fade in the first time..
	new Effect.Appear('appear-div');
	
	//pic one becomes pic two, the one that has been morphed to...
	one_id = pic_two_id;
	
	//preload the images...
	var pics_array = new Array();
	if (document.images)
	{
		this.elem = $('images-list');
		pics_array = this.elem.select('img');
	}
	
	//if we have come to end of pics array, start from start again...
	if(pic_two_id == pics_array.length-1)
		two_id = 0;
	else
		two_id = pic_two_id+1;
	
	//get the pics to pass to onAppear...
	pic_one = pics_array[one_id];
	pic_two = pics_array[two_id];
	
	setTimeout("onAppear('"+pic_one.src+"', '"+pic_two.src+"')", 3000);
	setTimeout("Appear("+one_id+", "+two_id+")", 8000);		
}