var SlideGalleryInitializer = function(){
	SG1 = new SlideGallery('galleryContainer', 'galleryContents', 'slider_left', 'left');
	SG2 = new SlideGallery('galleryContainer', 'galleryContents', 'slider_right', 'right');
};

Event.observe(window, 'load', SlideGalleryInitializer);

var SlideGallery = Class.create();
SlideGallery.prototype = {
	
	initialize : function(container, contents, slider, direction){
		this.direction = direction;

		this.container = $(container);
		this.contents = $(contents);
		this.slider = $(slider);
		this.sliderWidth = this.slider.offsetWidth;
		this.contents.style.left = 0;

		this.maxX = this.container.offsetWidth - this.contents.offsetWidth;
		if(this.maxX > 0) return;

		this.v = 0;
		if(SlideGallery.currentX){
			this.contents.style.left = SlideGallery.currentX + 'px';
		}else{
			SlideGallery.currentX = 0;
		}
		this.engine = null;

		Event.observe(this.slider, 'mouseover', this.mount.bind(this));
		Event.observe(this.slider, 'mousemove', this.chase.bindAsEventListener(this));
		Event.observe(this.slider, 'mouseout', this.stop.bindAsEventListener(this));
	},

	mount : function(){
		SlideGallery.currentX = parseInt(this.contents.style.left);

		clearInterval(this.engine);
		this.engine = setInterval(this.move.bind(this), 30);
	},

	chase : function(event){
		Event.stop(event);
		this.x = event.offsetX || event.layerX;
		if(this.direction=='left'){
			var extent = this.sliderWidth - this.x;
		}else{
			var extent = -this.x;
		}
		this.v = extent;
	},

	move : function(){
		SlideGallery.currentX += this.v;
		if( SlideGallery.currentX >= 0 && this.v > 0){
			SlideGallery.currentX = 0;
			this.v = 0;
		}else if(this.maxX >= SlideGallery.currentX && this.v < 0){
			SlideGallery.currentX = this.maxX;
			this.v = 0;
		}else{
			this.contents.style.left = SlideGallery.currentX + 'px';
		}
	},

	stop : function(event){
		clearInterval(this.engine);
		this.engine = null;
	}

}