(function($){
$.fn.extend({
toonelOut:function(d,e,c,hold){
	if(typeof d=='object')		
		e=d.easing,
		c=d.complete,
		hold=d.hold,
		d=d.duration
	var th=this,
		w,h,l,t,k,
		wrap=$('<div></div>'),
		chi=hold?$(hold,th):false
	w=th.prop('offsetWidth')
	h=th.prop('offsetHeight')
	l=th.prop('offsetLeft')
	t=th.prop('offsetTop')
	k=h/w
	
	if(chi)
	wrap
		.css({
			position:'absolute',
			left:0,
			top:0,
			width:w,
			height:h,
			zIndex:1
		})
		.appendTo(th)
		.append(chi)
	
	th
		.stop()
		.animate({
			width:0
		},{
			step:function(now){
				th
					.css({
						height:now*k,
						left:(w-now)/2+l,
						top:(h-now*k)/2+t
					})
				if(chi)
				wrap
					.css({
						 left:-(w-now)/2+l,
						 top:-(h-now*k)/2+t
					})
			},
			duration:d,
			easing:e
		})
	$.when(th).then(function(){
		if(chi)
			chi.appendTo(th),
			wrap.remove()
		if(c)
			c.call(th)
		th
			.hide()
			.css({
				width:w,
				height:h,
				left:l,
				top:t
			})
		})
	return th
},
toonelIn:function(d,e,c,hold){
	if(typeof d=='object')		
		e=d.easing,
		c=d.complete,
		hold=d.hold,
		d=d.duration
	var th=this,
		w,h,l,t,k,
		wrap=$('<div></div>'),
		chi=hold?$(hold,th):false
	th
		.css({visibility:'hidden'})
		.show()
	w=th.prop('offsetWidth')
	h=th.prop('offsetHeight')
	l=th.prop('offsetLeft')
	t=th.prop('offsetTop')
	k=h/w
	
	if(chi)
	wrap
		.css({
			position:'absolute',
			left:-w/2,
			top:-h/2,
			width:w,
			height:h,
			zIndex:1
		})
		.appendTo(th)
		.append(chi)

	th
		.stop()
		.css({width:0,height:0,visibility:'visible'})
		.animate({
			width:w
		},{
			step:function(now){
				th
					.css({
						height:now*k,
						left:(w-now)/2+l,
						top:(h-now*k)/2+t
					})
				if(chi)
				wrap
					.css({
						 left:-(w-now)/2+l,
						 top:-(h-now*k)/2+t
					})
			},
			duration:d,
			easing:e
		})
	$.when(th).then(function(){
		if(chi)
			chi.appendTo(th),
			wrap.remove()
		if(c)
			c.call(th)
	})

	return th
}})
})(jQuery)