/*
---

script: AlphaDropDown.js

description: Extends Fx.Tween.Toggle to create an unusual fade / reveal effect using a png background

license: MIT-style license.

authors: Ryan Florence <http://ryanflorence.com>

requires:
- /Core:*
- /Fx.Tween.toggle:*

provides: [AlphaDropDown]

...
*/


var AlphaDropDown = new Class({
	
	Extends: Fx.Tween.Toggle,

		options: {
			alphaUrl: 'alpha.png',
			hide: true,
			property: 'background-position',
			elementTag: 'div'
		},

	initialize: function(container, options){
		this.setOptions(options);
		this.container = document.id(container);
		var element = new Element(this.options.elementTag,{
			'styles': {
				'position': 'absolute',
				'left': 0,
				'top': 0,
				'height': '100%',
				'width': '100%',
				'background-image': 'url('+this.options.alphaUrl+')',
				'background-repeat': 'no-repeat'
			}
		}).inject(this.container,'bottom');
		
		this.parent(element,options);
		
		if(this.options.hide) this.setOut();
		
		this.container.set('tween',{
			duration: this.options.duration - 100,
			property: 'height'
		});
		
		this.addEvent('complete',function(){
			(this.toggled) ? this.element.setStyle('display','none') : this.hide();
		});
		
	},

	setIn: function(){
		this.container.setStyle('height',257);
		this.parent();
		return this;
	},
	
	setOut: function(){
		this.container.setStyle('height',0);
		this.parent();
	},
	
	toggleIn: function(){
		this.element.setStyle('display','block')
		this.container.tween(303);
		this.parent();
	},
	
	toggleOut: function(){
		this.setOut();
		return this;
	}

});