/*---------------------------------
 * Fading images in <div><img /></div> construction, <img class="fadable">
 *---------------------------------
 */



Event.observe(window, 'load', onLoad );

	function onLoad(){
		$$('img.fadeable').each( function (element){
			var id = Element.identify( element ); 
			element.setOpacity(1);
			
			Event.observe(id, 'mousedown', function (e){ doToggleRet( id );} );
			/*Element.onmouseenter(id, function (e){ doFadeRet( id );} );*/
			Event.observe(id, 'mouseover', function (e){ doFadeRet( id );} );
			Event.observe(id, 'mouseout', function (e){ doAppearRet( id );} );
			Event.observe(window, 'blur', function (e){ doAppearRet( id );} );
		});
	}

	function doToggleRet( id ) {
		threshold = 0.2; //threshold for when the Fading effect should trigger instead of the Appear effect.
		var currOp = $(id).getStyle('opacity');
		if (currOp > threshold){ doFadeRet(id); }	
		else{ doAppearRet(id); }
	}
	
	function doFadeRet( id ){
		var currOp = $(id).getStyle('opacity');
		cancelEffects( id );
		new Effect.Morph(id, {duration:0.2, queue: {position:'end', scope:id},
				beforeUpdate: function(effect){ $(id).setOpacity( (currOp)-(effect.position*currOp) ); },
				afterFinish: function(effect){ $(id).setOpacity(0); }
				} );
	}
	function doAppearRet( id ){
		var currOp = $(id).getStyle('opacity');
		cancelEffects( id );
		new Effect.Morph(id, {duration:0.5, queue: {position:'end', scope:id},
				beforeUpdate: function(effect){ $(id).setOpacity( ((1-currOp)*effect.position) + currOp); },
				afterFinish: function(effect){ $(id).setOpacity(1); }
				} );
	}

		function cancelEffects( string ){
			if(string){
				var queue = Effect.Queues.get(string);
				queue.each(function(e) { e.cancel() });
			}
		}