var PageSlide = new Class({

	Implements: [Options, Events],

	options: {
		direction: 'left',
		width: 400,
		propertyPrefix: ''
	},

	initialize: function(el, options) {
		this.setOptions(options);
		this.element = document.id(el);
		this.page = document.getElement('.pageslide');

		this.bind = {
			resize: function() {
				this.page.setStyle('width', document.body.offsetWidth);
				/*this.page.setStyles({
					'width': document.body.offsetWidth,
					'height': document.body.scrollHeight
				});*/
			}.bind(this)
		};
		
		if (this.page) this.wrap();
	},
	
	wrap: function() {
		this.slide = new Element('div', {
			styles: {
				position: 'fixed',
	      width: 0,
	      top: 0,
	      height: '100%',
	      zIndex: '899',
	      overflow: 'hidden'
			},
			'class': 'pageslide-sidebar'
		}).inject(document.body).adopt(this.element);

		this.page.setStyles({
		  position: 'relative'
		});
		/*var page = this.page;
		var updatePageHeight = function() {
			page.setStyle('height', / *window.getScrollSize().y* /document.body.scrollHeight);
		};
		window.addEvent('resize', updatePageHeight);
		updatePageHeight();*/

		this.element.setStyle('display', 'block');
	},
	
	open: function() {
		if (this.slide.getSize().x != 0) return;

		this.fireEvent('opening');

		var fxPage = {};
		var fxSide = {};

	  // decide on a direction
	  if (this.options.direction == 'left') {
	  	fxPage[this.options.propertyPrefix + 'right'] = [0, -this.options.width];
	  	fxSide['width'] = [0, this.options.width];
			
			this.slide.setStyle('left', 0);

	    if (Browser.Engine.trident) {
	      $$(document.body, document.documentElement).setStyle('overflow-x', 'hidden');
	    } else {
	      $(document.body).setStyle('overflow-x', 'hidden');
	    }
	  } else {
	  	fxPage[this.options.propertyPrefix + 'left'] = [0, -this.options.width];
	  	fxSide['width'] = [0, this.options.width];
			
			this.slide.setStyle('right', 0);
	  }

		new Fx.Elements([this.page, this.slide], {
			transition: Fx.Transitions.Sine.easeOut,
			onComplete: function() {
				this.fireEvent('open');
			}.bind(this)
		}).start({
			'0': fxPage,
			'1': fxSide
		});

		window.addEvent('resize', this.bind.resize);
	},
	
	close: function() {
		if (this.slide.getSize().x == 0) return;

		this.fireEvent('closing');

		var fxPage = {};
		var fxSide = {};

	  // decide on a direction
	  if (this.options.direction == 'left') {
	  	fxPage[this.options.propertyPrefix + 'right'] = [-this.options.width, 0];
	  	fxSide['width'] = [this.options.width, 0];
	  } else {
	  	fxPage[this.options.propertyPrefix + 'left'] = [-this.options.width, 0];
	  	fxSide['width'] = [this.options.width, 0];
	  }

		new Fx.Elements([this.page, this.slide], {
			transition: Fx.Transitions.Sine.easeOut,
			onComplete: function() {

				if (this.options.direction == 'left') {
			    if (Browser.Engine.trident) {
			      $$(document.body, document.documentElement).setStyle('overflow-x', '');
			    } else {
			      $(document.body).setStyle('overflow-x', '');
			    }
				}
				
				this.page.setStyle((this.options.direction == 'left') ? 'right' : 'left', '');
				this.page.setStyle('width', '');

				this.fireEvent('close');
			}.bind(this)
		}).start({
			'0': fxPage,
			'1': fxSide
		});
		
		window.removeEvent('resize', this.bind.resize);
	},
	
	toggle: function() {
		if (this.slide.getSize().x == 0) {
			this.open();
		} else {
			this.close();
		}
	}

});

/*window.addEvent('domready', function() {
	var slide = document.id('pageslide');
	if (slide) {
		slide.pageslide = new PageSlide(slide);
	}
});*/