function CrossFade(container,elem1,elem2,duration) {       
	this.elem = [elem1,elem2];
	this.container = container;
	this.duration = duration;
	//this.curElem = 1;  // current displayed element or being faded in
	this.inElem  = 1;
	this.outElem = 0;
}
CrossFade.prototype.newImg = function(imgA,title) {
	logit("newImg:"+this.inElem);
	
	if (imgA === null) {
		$("a",this.elem[this.inElem]).hide();
		$("#title",this.elem[this.inElem]).html(title).css("width","200px").show();  // text width no more then image width
		$(this.elem[this.inElem]).css("left","0px").css("top","0px").show(); 
		return;
	} 
	$("a",this.elem[this.inElem]).show();

	logit("CrossFade fade:"+imgA.src);
	
	var img = new Image();
	
	img.src = imgA.src;

	// image must be loaded
	if (this.inElem === 1) {
		this.inElem = 0;
		this.outElem = 1;
	} else {
		this.inElem = 1;
		this.outElem = 0;
	}
	logitA("CrossFade in/out Elem:",this.inElem,this.outElem);
	logitA("CrossFade max height/width=",$(this.container).css("height"),$(this.container).css("width"));
	logitA("CrossFade img height/widt",img.height,img.width);

	var cont_width = parseInt($(this.container).css("width"));
	var cont_height = parseInt($(this.container).css("height"));

	var min_width = img.width + 20;	  // add margins	
	var min_height = img.height + 20;		

	if (min_width > cont_width) {
		$(this.container).css("width",min_width+"px");
	}
	if (min_height > cont_height) {
		$(this.container).css("height",min_height+"px");
	}
	var topmargin = getTopMargin(min_height,cont_height);
	var leftmargin = getLeftMargin(min_width,cont_width);

	//var topmargin = 0;

	logit('CrossFade setMargin '+topmargin+'/'+leftmargin);

	// Start the opacity at 0 and set new image                           
	$("#title",this.elem[this.inElem]).html(title).css("width",img.width+"px");  // text width no more then image width
	$("#owner",this.elem[this.inElem]).html("by:"+imgA.owner_name).css("width",img.width+"px").parent().attr("linkurl",imgA.owner_url);
	$("img",this.elem[this.inElem]).attr("src",img.src).attr("title",imgA.title).attr("alt",imgA.title).parent().attr("linkurl",imgA.photo_url);                     
	$(this.elem[this.inElem]).css("opacity",0).css("left",leftmargin+"px").css("top",topmargin+"px").show();                     

	// for ie we have to set width otherwise it will be too wide, don't know why

	if ($.browser.msie) {
		var w_ = img.width + 22;
		logit("set width in MSIE:"+w_);
		$(this.elem[this.inElem]).css("width",w_);
		/*
		if (ie6) {
			var h_ = img.height + 22;
			logit("set height in IE6:"+h_);
			$(this.elem[this.inElem]).css("height",h_);
		}
		*/
	} 
	

}
CrossFade.prototype.show = function() {
	logit("show:"+this.inElem);
	
	if ($.browser.opera) {
		// somehow in opera I need to hide the outelement
		$(this.elem[this.outElem]).hide(); 
	}
	$(this.elem[this.outElem]).css("opacity",0);
	$(this.elem[this.inElem]).css("opacity",1);
}
CrossFade.prototype.fade = function(CB) {
	var stepTime  = 5;                                    
	var startTime = now();                                 
	//logitA("CrossFade startTime",startTime);  
	var this1 = this;            

	var intervalId = setInterval(function() {              
	 // calc opacity                                      
	 var timePassed = now() - startTime;   
	 //logitA("timePassed",timePassed);              
	 var opIn = 0;                                        
	 var opOut = 0;                                       
	 if (timePassed >= this1.duration) {                        
	   // end                                             
	   clearInterval(intervalId);                         
	   opIn  = 100;                                       
	   opOut = 0;                                         
	 } else {                                             
	   var percentPassed = timePassed/this1.duration; 
	   //logitA("percentPassed",percentPassed,"timePassed/duration",timePassed,this1.duration);              
	   opIn = percentPassed;                              
	   opOut = 1 - opIn;
	 }                             
	 //logitA("opacity",opIn);                       
	 $(this1.elem[this1.outElem]).css("opacity",opOut);                     
	 $(this1.elem[this1.inElem]).css("opacity",opIn);                       
	 if (opOut <= 0) {
	 	 //logit("end of fade");                                     
	   $(this1.elem[this1.outElem]).hide();  // do we need this ?       
	   if (CB) CB();                                              
	  }                                                   
	},stepTime);                                           
}
function now(){
	return +new Date;
}