//--horizontal

window.addEvent('domready', function() {
	
	Fx.Slide2 = Fx.Base.extend({

		options: {
			mode: 'vertical'
		},
	
		initialize: function(el, options){
			this.element = $(el);
			this.element.setStyle('display', 'block');
			this.element.setStyle('left', this.element.offsetWidth * 1.1);
			this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': 'hidden','display': 'none'} )}).injectAfter(this.element).adopt(this.element);
			this.setOptions(options);
			this.now = [];
			this.parent(this.options);
			this.open = true;
			this.addEvent('onComplete', function(){
				this.open = (this.now[0] === 0);
				if (this.element.getStyle('left').toInt() >= this.wrapper.offsetWidth)
				{
					this.wrapper.setStyle('display', 'none');
				}
			});
			if (window.webkit419) this.addEvent('onComplete', function(){
				if (this.open) this.element.remove().inject(this.wrapper);
			});
		},
	
		setNow: function(){
			for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
		},
	
		vertical: function(){
			this.margin = 'margin-top';
			this.layout = 'height';
			this.offset = this.element.offsetHeight;
		},
	
		horizontal: function(){
			this.margin = 'left';
			this.layout = 'width';
			this.offset = this.element.offsetWidth;
		},
	
		/*
		Property: slideIn
			Slides the elements in view horizontally or vertically.
	
		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/
	
		slideIn: function(mode){
			this[mode || this.options.mode]();
			return this.start([this.element.getStyle(this.margin).toInt()], [0]);
		},
	
		/*
		Property: slideOut
			Sides the elements out of view horizontally or vertically.
	
		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/
	
		slideOut: function(mode){
			this[mode || this.options.mode]();
			if (this.element.getStyle(this.margin).toInt() < this.wrapper.offsetWidth)
			{
				return this.start([this.element.getStyle(this.margin).toInt()],[this.offset*1.1]);
			}
		},
	
		/*
		Property: hide
			Hides the element without a transition.
	
		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/
	
		hide: function(mode){
			this[mode || this.options.mode]();
			this.open = false;
			return this.set([-this.offset]);
		},
	
		/*
		Property: show
			Shows the element without a transition.
	
		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/
	
		show: function(mode){
			this[mode || this.options.mode]();
			this.open = true;
			return this.set([0, this.offset]);
		},
	
		/*
		Property: toggle
			Slides in or Out the element, depending on its state
	
		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
	
		*/
	
		toggle: function(mode){
			if (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0 || this.element.getStyle('left').toInt() >= this.wrapper.offsetWidth)
			{
				this.wrapper.setStyle('display','block');
				return this.slideIn(mode);
			}
			return this.slideOut(mode);
		},
	
		increase: function(){
			this.element.setStyle(this.margin, this.now[0] + this.options.unit);
			//this.wrapper.setStyle(this.layout, this.now[1] + this.options.unit);
		}
	
	});
	
	var mySlide1 = new Fx.Slide2('test1', {mode: 'horizontal'});
	 

	$('toggle1').addEvent('click', function(e){
		e = new Event(e);
		mySlide1.toggle();
		mySlide6.slideOut();
		mySlide4.slideOut();
		mySlide3.slideOut();
		mySlide5.slideOut();
		mySlide2.slideOut();
		e.stop();
	});
	
	
	var mySlide2 = new Fx.Slide2('test2', {mode: 'horizontal'});
	 

	$('toggle2').addEvent('click', function(e){
		e = new Event(e);
		mySlide2.toggle();
		mySlide6.slideOut();
		mySlide4.slideOut();
		mySlide3.slideOut();
		mySlide5.slideOut();
		mySlide1.slideOut();
		e.stop();
	});
	
	
	var mySlide3 = new Fx.Slide2('test3', {mode: 'horizontal'});
	 

	$('toggle3').addEvent('click', function(e){
		e = new Event(e);
		mySlide3.toggle();
		mySlide6.slideOut();
		mySlide4.slideOut();
		mySlide5.slideOut();
		mySlide2.slideOut();
		mySlide1.slideOut();
		e.stop();
	});
	
	
	var mySlide4 = new Fx.Slide2('test4', {mode: 'horizontal'});
	 

	$('toggle4').addEvent('click', function(e){
		e = new Event(e);
		mySlide4.toggle();
		mySlide6.slideOut();
		mySlide5.slideOut();
		mySlide3.slideOut();
		mySlide2.slideOut();
		mySlide1.slideOut();
		e.stop();
	});
	
	
	var mySlide5 = new Fx.Slide2('test5', {mode: 'horizontal'});
	 

	$('toggle5').addEvent('click', function(e){
		e = new Event(e);
		mySlide5.toggle();
		mySlide6.slideOut();
		mySlide4.slideOut();
		mySlide3.slideOut();
		mySlide2.slideOut();
		mySlide1.slideOut();
		e.stop();
	});
	
	
	var mySlide6 = new Fx.Slide2('test6', {mode: 'horizontal'});
	 

	$('toggle6').addEvent('click', function(e){
		e = new Event(e);
		mySlide6.toggle();
		mySlide5.slideOut();
		mySlide4.slideOut();
		mySlide3.slideOut();
		mySlide2.slideOut();
		mySlide1.slideOut();
		e.stop();
	});
	
	/*var mySlide1 = new Fx.Slide('test1', {mode: 'horizontal'});
	 

	$('toggle1').addEvent('click', function(e){
		e = new Event(e);
		mySlide1.toggle();
		e.stop();
	});*/
	
	
	
		
/*	var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
	 
	 
	$('toggle2').addEvent('click', function(e){
		e = new Event(e);
		mySlide2.toggle();
		e.stop();
	});*/
	
});