var container = {
	
	container: null,

	content: null,

	_widthContainer: null,

	_widthContent: null,

	init: function(containerExpr, contentExpr) {

		this.container = $(containerExpr);
		this.content = this.container.find(contentExpr);
	},

	getContainer: function() {
		return this.container;
	},

	getContent: function() {
		return this.content;
	},
	
	setPositionPercents: function (percents) {
		var position_px = (this._getWidthContent() / 100) * percents;
		
		this._setPositionPx(position_px);
	},

	getPositionPercents: function () {
		var position_percents = (this._getPositionPx() * 100) / this._getWidthContent();

		return position_percents;
	},

	moveForward: function(px) {
		var position_px = this._getPositionPx() + px;

		this._setPositionPx(position_px);
	},

	_setPositionPx: function (px) {
		var position_px = px - (this._getWidthContainer() / 2);

		this.container.scrollLeft(position_px);
	},

	_getPositionPx: function () {
		var px =  this.container.scrollLeft() + (this._getWidthContainer() / 2);

		return px;
	},
	
	_getWidthContainer: function() {
		if (!this._widthContainer) {
			this._widthContainer = this.container.width();
		}

		return this._widthContainer;
	},

	_getWidthContent: function() {

		if (!this._widthContent) {
			this._widthContent = this.container.get(0).scrollWidth - 15;
		}

		return this._widthContent;
	}

}

var line = {

	line: null,

	point: null,

	_widthLine: null,

	_widthPoint: null,

	_lineDes: null,

	init: function(lineExpr, pointExpr) {

		this.line = $(lineExpr);
		this.point = this.line.find(pointExpr);

	},

	getLine: function() {
		return this.line;
	},

	getPoint: function() {
		return this.point;
	},

	pointShow: function() {
		this.getPoint().show();
	},

	pointHide: function() {
		this.getPoint().hide();
	},

	setPositionPercents: function (percents) {
		var position_px = (this._getWidthLine() / 100) * percents;
		
		this._setPositionPx(position_px);
	},

	getPositionPercents: function () {
		var position_percents = (this._getPositionPx() * 100) / this._getWidthLine();

		return position_percents;
	},

	setPositionPx: function(position) {
		this._setPositionPx(position);
	},


	_setPositionPx: function (px) {
		this.point.css('left', (px - (this._getWidthPoint() / 2)) + 'px');
	},

	_getPositionPx: function () {
		return parseInt(this.point.css('left'), 10) + (this._getWidthPoint() / 2);
	},

	_getWidthLine: function() {
		if(!this._widthLine) {
			this._widthLine = this.line.width();
		}
		
		return this._widthLine;
	},

	_getWidthPoint: function() {
		if(!this._widthPoint) {
			this._widthPoint = this.point.width();
		}

		return this._widthPoint;
	}

}


var scrollCars = {
	container: container,
	line: line,

	startPosition: null,

	scrolling: false,

	animate: false,

	timerScroll: null,
	

	init: function() {

		this.line.pointShow();

		this.container.setPositionPercents(this.startPosition);
		this.line.setPositionPercents(this.startPosition);

		this.line.getPoint().draggable({
			axis: 'x',
			containment: 'parent',
			snapTolerance: 10,
			start: this._pointDragEventStart,
			stop: this._pointDragEventStop,
			drag: this._pointDragEvent
		});

		$(window).mousewheel(this._containerMouseweelEvent);
		$(window).resize(this._resizeLineEvent);

		this.line.getLine().click(this._lineClickEvent);
		
		this.container.getContainer().scroll(this._containerScrollEvent);

		this._fixLine();
	},

	setStartPosition: function(startPosition) {
		this.startPosition = startPosition;
	},

	_pointDragEventStart: function() {
		scrollCars.scrolling = true;
	},

	_fixLine: function() {
		var width = this.line.getLine().width();
		var percents = this.startPosition;

		this.line.getLine().find('.orange-line').width((width / 100) * percents);
	},

	_pointDragEventStop: function() {
		scrollCars.scrolling = false;
	},

	_pointDragEvent: function(event, ui) {
		scrollCars.container.setPositionPercents(scrollCars.line.getPositionPercents());
	},

	_containerMouseweelEvent: function(event, delta) {
		scrollCars.container.moveForward(-1 * (delta  * 80));
		scrollCars.line.setPositionPercents(scrollCars.container.getPositionPercents());

		return false;
	},

	_containerScrollEvent: function(event) {
		if(scrollCars.scrolling) {
			return;
		}

		scrollCars.line.setPositionPercents(scrollCars.container.getPositionPercents());

	},

	_lineClickEvent: function(event) {
		var x = event.pageX - scrollCars.line.getLine().offset().left;

		scrollCars.line.setPositionPx(x);
		scrollCars.container.setPositionPercents(scrollCars.line.getPositionPercents());
	},
	
	_resizeLineEvent: function(event) {
		scrollCars.line.setPositionPercents(scrollCars.container.getPositionPercents());

		scrollCars._fixLine();
	}
}

$(function() {
	
	scrollCars.container.init('#cars', '.wrapper');
	scrollCars.line.init('.mainLine', '.point');

	scrollCars.init();
});