window.addEvent('domready', function () {
	new Scroller();
});


var Scroller = new Class({
	container: null,
	image: null,
	btnUp: null,
	btnDown: null,
	size: {},
	imagesize: {},
	speed: 10,
	timer: null,
	delay: 40,
	wheeling: false,
	fullsize: true,
	dragPos: null,
	options: {
		maxspeed: 20,
		wheelspeed: 50
	},
	initialize: function(){
		var container = $$('div.image-scroller-container').pop();
		if (!container) {
			return;
		}


		this.container = container;
		this.image = container.getElement('.image-scroller-image');
		this.drag = container.getElement('.image-scroller-drag');
		this.btnUp = container.getElement('.image-scroller-up');
		this.btnDown = container.getElement('.image-scroller-down');
		this.areaZoomOut = container.getElement('.image-scroller-zoom-out');
		this.btnZoomOut = this.areaZoomOut.getElement('a');
		this.tipZoomOut = this.areaZoomOut.getElement('span');
		this.areaZoomIn = container.getElement('.image-scroller-zoom-in');
		this.btnZoomIn = this.areaZoomIn.getElement('a');
		this.tipZoomIn = this.areaZoomIn.getElement('span');

		this.btnUp.addEvent('mouseenter', this.movedown.bind(this));
		this.btnDown.addEvent('mouseenter', this.moveup.bind(this));
		this.btnUp.addEvent('mouseenter', this.stopDrag.bind(this));
		this.btnDown.addEvent('mouseenter', this.stopDrag.bind(this));
		this.btnUp.addEvent('mouseleave', this.stopscroll.bind(this));
		this.btnDown.addEvent('mouseleave', this.stopscroll.bind(this));
		this.btnZoomOut.addEvent('click', this.zoomOut.bind(this));
		this.btnZoomIn.addEvent('click', this.zoomIn.bind(this));
		this.btnZoomOut.addEvent('mouseenter', this.showZoomOutToolTip.bind(this));
		this.btnZoomIn.addEvent('mouseenter', this.showZoomInToolTip.bind(this));
		this.btnZoomOut.addEvent('mouseleave', this.hideToolTips.bind(this));
		this.btnZoomIn.addEvent('mouseleave', this.hideToolTips.bind(this));
		this.btnZoomOut.addEvent('mouseenter', this.stopDrag.bind(this));
		this.btnZoomIn.addEvent('mouseenter', this.stopDrag.bind(this));

		this.drag.addEvent('mousedown', this.startDrag.bind(this));
		this.drag.addEvent('mouseup', this.stopDrag.bind(this));
		this.drag.addEvent('mouseleave', this.stopDrag.bind(this));
		this.drag.addEvent('mousewheel', this.evtWheel.bindWithEvent(this));
		this.drag.addEvent('dblclick', this.toggleZoom.bind(this));

		this.size = this.container.getSize();
		this.imagesize = this.image.getSize();
		this.container.addClass('fullsize');

		this.hideToolTips();
		this.zoomIn();
	},
	zoomIn: function (evt) {
		if (evt) {
			evt.stop();
		}
		var w = this.imagesize.x;
		var h = this.imagesize.y;
		var y = (this.imagesize.y - this.size.y) / 2;
		var y = 0;
		var x = 0;

		var styles = {
			top: -y,
			left: x,
			width: w,
			height: h
		};

		if (this.fullsize) {
			this.image.setStyles(styles);
			this.setButtons();
		}
		else {
			this.hideButtons();
			var fx = new Fx.Morph(this.image);
			fx.addEvent('complete', this.setButtons.bind(this));
			fx.start(styles);
		}
	},
	zoomOut: function (evt) {
		if (evt) {
			evt.stop();
		}

		var r = this.size.y / this.imagesize.y;
		var w = this.imagesize.x * r;
		var h = this.size.y;
		var y = 0;
		var x = (this.size.x - w) / 2;
		var styles = {
			top: -y,
			left: x,
			width: w,
			height: h
		};

		this.hideButtons();
		var fx = new Fx.Morph(this.image);
		fx.addEvent('complete', this.setButtons.bind(this));
		fx.start(styles);
	},
	toggleZoom: function (evt) {
		if (evt) {
			evt.stop();
		}
		if (this.fullsize) {
			this.zoomOut();
		}
		else {
			this.zoomIn();
		}
	},
	hideButtons: function () {
		this.fullsize = !this.fullsize;
		this.container.toggleClass('fullsize');
		this.btnUp.setStyle('display', 'none');
		this.btnDown.setStyle('display', 'none');
		this.areaZoomOut.setStyle('display', 'none');
		this.areaZoomIn.setStyle('display', 'none');
	},
	setButtons: function () {
		if (this.fullsize) {
			this.btnUp.setStyle('display', '');
			this.btnDown.setStyle('display', '');
			this.areaZoomOut.setStyle('display', '');
			this.areaZoomIn.setStyle('display', 'none');
		}
		else {
			this.btnUp.setStyle('display', 'none');
			this.btnDown.setStyle('display', 'none');
			this.areaZoomOut.setStyle('display', 'none');
			this.areaZoomIn.setStyle('display', '');
		}
	},
	getSpeed: function () {
		if (this.wheeling) {
			this.speed = this.options.wheelspeed;
		}
		else {
			var i = this.speed + 1;
			this.speed = i > this.options.maxspeed ? this.options.maxspeed : i;
		}
		return this.speed;
	},
	evtWheel: function (evt) {
		this.wheeling = true;
		if (evt.wheel > 0) {
			this.movedown();
		}
		else if (evt.wheel < 0) {
			this.moveup();
		}
		this.stopscroll();
		this.wheeling = false;
	},
	moveup: function () {
		if (!this.fullsize) {
			return;
		}
		this.getSpeed();
		var y = this.image.getStyle('top').toInt();
		var n = this.size.y - this.imagesize.y;
		if (y > n) {
			y = y - this.speed;
			this.image.setStyle('top', y < n ? n : y);
			if (y <= n) {
				this.stopscroll();
			}
		}
		this.timer = this.moveup.delay(this.delay, this);
	},
	movedown: function () {
		if (!this.fullsize) {
			return;
		}
		this.getSpeed();
		var y = this.image.getStyle('top').toInt();
		var n = 0;
		if (y < n) {
			y = y + this.speed;
			this.image.setStyle('top', y > n ? n : y);
			if (y >= 0) {
				this.stopscroll();
			}
		}
		this.timer = this.movedown.delay(this.delay, this);
	},
	stopscroll: function () {
		this.speed = 0;
		$clear(this.timer);
	},
	showZoomOutToolTip: function () {
		this.tipZoomOut.setStyle('display', '');
	},
	showZoomInToolTip: function () {
		this.tipZoomIn.setStyle('display', '');
	},
	hideToolTips: function () {
		this.tipZoomOut.setStyle('display', 'none');
		this.tipZoomIn.setStyle('display', 'none');
	},
	startDrag: function (evt) {
		if (!evt) {
			return;
		}
		evt.stop();
		if (!this.fullsize) {
			return;
		}

		this.drag.addEvent('mousemove', this.moveDrag.bind(this));

		this.container.addClass('dragging');
		this.dragPos = {
			coords: {
				x: evt.client.x,
				y: evt.client.y
			},
			position: {
				y: this.image.getStyle('top').toInt(),
				x: this.image.getStyle('left').toInt()
			}
		}
	},
	stopDrag: function () {
		this.dragPos = null;
		this.drag.removeEvents('mousemove');
		this.container.removeClass('dragging');
	},
	moveDrag: function (evt) {
		if (!this.dragPos) {
			return false;
		}
		var difX = (evt.client.x - this.dragPos.coords.x);
		var difY = (evt.client.y - this.dragPos.coords.y);
		var x = difX + this.dragPos.position.x;
		var y = difY + this.dragPos.position.y;

		// top boundary
		var n = 0;
		y = y > n ? n : y;

		// bottom boundary
		var n = this.size.y - this.imagesize.y;
		y = y < n ? n : y;


		this.image.setStyles({
//			left: x,
			top: y
		});
	}
});