var Flip = Fx.Elements.extend({

	options: {
		onActive: Class.empty,
		onBackground: Class.empty,
		wait: false
	},

	initialize: function(){
		var options, togglers, elements, container;
		$each(arguments, function(argument, i){
			switch($type(argument)){
				case 'object': options = argument; break;
				case 'element': container = $(argument); break;
				default:
					var temp = $$(argument);
					if (!togglers) togglers = temp;
					else elements = temp;
			}
		});
		this.togglers = togglers || [];
		this.elements = elements || [];
		this.container = $(container);
		this.setOptions(options);

		for (var i = 0, l = this.togglers.length; i < l; i++) this.addSection(this.togglers[i], this.elements[i]);
	},

	addSection: function(toggler, element, pos){
		toggler = $(toggler);
		element = $(element);
		
		this.togglers.include(toggler);
		this.elements.include(element);
		
		var idx = this.togglers.indexOf(toggler);
		toggler.addEvent('click', this.flip.bind(this, idx));
		toggler.href="javascript:;"
		element.setStyle('overflow', 'hidden');
		element.width = element.offsetWidth;
		element.height = element.offsetHeight;
		element.front = true;
		return this;
	},

	flip: function(index) {
		var element = this.elements[index];
		var fx = new Fx.Styles(element, {duration:200, wait:false,
		onComplete: function() {
			if (element.start)
			{
				if (element.className.indexOf("flip") == -1)
				{
					element.className += " flip";
				}
				else
				{
					element.className = element.className.replace("flip", "");
				}
				fx.start({
					'width': element.width,
					'margin-left': 0,
					'font-size': 11,
					'height': element.height
				});
				element.start = false;
			}
			else
			{
				element.start = true;
			}

		}
		});
		element.start = true;
		fx.start({
			'width': 1,
			'font-size': 1,
			'margin-left': (element.offsetWidth/2-1),
			'height': (element.height)
		});
		return this;
	}


});

Fx.Flip = Flip;