Wd.Black = Options.extend
({
 
 	options:
	{
		appearDuration: 500,
		disappearDuration: 250,
		onAppearComplete: Class.empty,
		onDisappearComplete: Class.empty
	},
	
	fx_appear: null,
	fx_disappear: null,
	
	initialize: function(options)
	{
		this.setOptions(options);
		
		this.element = new Element
		(
		 	'div',
			
			{
				'id': 'black',
				'title': 'cliquer ici pour fermer',

				'styles':
				{
					'cursor': "url(images/cursor-touch.png) 16 16, pointer",
					'opacity': 0,
					'position': 'absolute',
					'left': '50%',
					'top': '50%'
				}
			}
		);
		
		this.fx_appear = new Fx.Style
		(
			this.element, 'opacity',
			{
				duration: this.options.appearDuration,
				onComplete: this.options.onAppearComplete
			}
		);

		this.fx_disappear = new Fx.Style
		(
			this.element, 'opacity',
			{
				duration: this.options.disappearDuration,
				onComplete: function()
				{
		//			console.info('disappear complete');
						
					this.element.remove();
						
					this.options.onDisappearComplete();
				}.bind(this)
			}
		);
	},
	
	appear: function()
	{
		var width = window.getScrollWidth();
		var height = window.getScrollHeight();
		
		var left = Math.round(width / 2);
		var top = Math.round(height / 2);
		
//		console.info('width: %d, height: %d', width, height);

		//
		// IE has some issues with coordinates
		//

		if (window.ie)
		{
			left -= 4;
			top -= 4;
			width -= 8;
			height -= 8;
		}
		
		this.element.setStyles
		(
		 	{
				'width': width,
				'height': height,
				'margin-left': -left,
				'margin-top': -top
			}
		);

		document.body.appendChild(this.element);
		
		//
		// fade
		//

		this.fx_appear.start(1);
	},
	
	disappear: function()
	{
		/*
		var func = function()
		{
//			console.info('disappear complete');
			
			this.element.remove();
			
			this.removeEvent('onComplete', func);
			
			this.options.onDisappearComplete();
		}.bind(this);

		this.addEvent('onComplete', func);
		*/
		/*
		this.options.duration = this.options.disappearDuration;
		this.start(0);
		*/
		
		this.fx_disappear.start(0);
	}
});

Wd.Blacktouch = Options.extend
({
 	options:
	{
		appear:
		{
			duration: 500,
			wait: false
		},

		disappear:
		{
			duration: 250,
			wait: false
		},

		onTouch: function() {}
	},
	
	touch: null,
	black: null,

	fx: null,

	initialize: function(el, options)
	{
		this.element = $(el);
		this.setOptions(options);

		this.element.setOpacity(0);

		//
		// The 'black' element is used to blackned the 'contents' element,
		// using a background with the same shape.
		// It is as big as the document's contents and is sensitive
		// fixme: and call the 'closeRequest' function when clicked
		//
	
		this.black = new Wd.Black
		(
		 	{
				onAppearComplete: function()
				{
					document.body.appendChild(this.element);
					
					if (this.options.appear)
					{
						this.fx.setOptions(this.options.appear);
						this.fx.start(1);
					}
					else
					{
						this.element.setOpacity(1);
					}
				}.bind(this)
			}
		);

		//
		//
		//

		this.black.element.addEvent('click', this.disappear.bindWithEvent(this));

		//
		//
		//
		
		this.fx = new Fx.Style
		(
			this.element, 'opacity', this.options.appear
		);
	},
	
	appear: function()
	{
		new Asset.images
		(
			[
				'css/black.png',
				'images/cursor-touch.png'
			],
			
			{
				onComplete: this.black.appear.bind(this.black)
			}
		);
	},
	
	disappear: function()
	{
		if (this.options.disappear)
		{
			this.fx.setOptions(this.options.disappear);
			
			this.fx.start(0).chain
			(
			 	function()
				{
					this.element.remove();	
					this.black.disappear();
				}.bind(this)
			);
		}
		else
		{
			this.element.remove();
			this.black.disappear();
		}
	}
});