/**
 * This class scroll the elements in target element (change position left) and add pager buttons to it
 */
function MainScroller($target, countOfElements) {
	// timer
	this.t = null;
	// reference to this, because jquery event listener overwrite this
	var _self = this;	
	// scroll status 
	this.disabled = false;
	// target element
	this.$target = $target;
	// current element 
	console.log(countOfElements);
	this.current = countOfElements;
	// current left position of current element
	this.position = null;
	// autoscroll is started
	this.started = false;

	/**
	 * Set position to element
	 */
	this.setPosition = function(index) {
		_self.position = 0;
		for (var i=0; i<index; i++) {
			var width = $($items.get(i)).css("width");
			width = width.substr(0, width.length-2);
			var margin = $($items.get(i)).css("margin-right");
			margin = margin.substr(0,margin.length-2);
			_self.position = _self.position+parseInt(width)+parseInt(margin);
		}
	}
	/**
	 * Start autoscroll
	 */
	this.start = function() {
		this.started = true;
		this.play();
	}
	/**
	 * Play autoscroll (restart)
	 */
	this.play = function() {
		if (_self.started == false) {
			return;
		}
		if (_self.disabled == true) {
			_self.disabled = false;
		}
		_self.t = setTimeout(_self.seek, 40);
	}
	/**
	 * Stop autoscroll
	 */
	this.stop = function() {
		clearTimeout(_self.t);
		_self.disabled = true;
	}
	/**
	 * Seek left
	 */
	this.seek_left = function() {
		var $items = _self.$target.find("div.items > a");
		var min = $items.length / 3;

		var $div = _self.$target.find("div.items");
		// if start of logos go back to the end of middle
		if (_self.current <= min) {
			_self.current = ($items.length / 3)*2;
			_self.setPosition(_self.current);
			$div.animate({
				left: (-(_self.position))
			}, 0, "swing");

		} 

		var width = parseInt($($items.get(_self.current-1)).css("width"));
		var margin = parseInt($($items.get(_self.current-1)).css("margin-right"));
		_self.current = _self.current-1;
		_self.position = _self.position-width-margin;

		$div.animate({
			left: (-(_self.position))
		}, 200, "swing");
	}
	/**
	 * Seek right
	 */
	this.seek_right = function() {
		var $items = _self.$target.find("div.items > a");
		var max = ($items.length / 3) * 2;

		var $div = _self.$target.find("div.items");
		// if end of logos go to middle
		if (_self.current >= max) {
			_self.current = ($items.length / 3);
			_self.setPosition(_self.current);
			$div.animate({
				left: (-(_self.position))
			}, 0, "swing");

		} 

		_self.current = _self.current+1;
		var width = parseInt($($items.get(_self.current-1)).css("width"));
		var margin = parseInt($($items.get(_self.current-1)).css("margin-right"));
		_self.position = _self.position+width+margin;

		$div.animate({
			left: (-(_self.position))
		}, 200, "swing");


	}

	/**
	 *	Seek to the next item in $target
	 */
	this.seek = function() {
		if (_self.disabled == true) {
			return;
		}
		var $container = _self.$target.find("div.items");
		var left = $container.css("left");
		var $items = $container.find("a");
		left = left.substr(0,left.length-2);
		var max = ($items.length / 3) * 2;
		// if end of logos go to middle
		if (_self.current > max ) {
			_self.current = ($items.length / 3);
			var $div = _self.$target.find("div.items");
			_self.setPosition(_self.current);
			_self.stop();
			$div.css("left", -(_self.position)-2);
			_self.play();
		} else {
			if (-left >= _self.position) {
				_self.current = _self.current+1;
				var width = parseInt($($items.get(_self.current-1)).css("width"));
				var margin = parseInt($($items.get(_self.current-1)).css("margin-right"));
				_self.position = _self.position+width+margin;
			} 
			$container.css("left",left-2);
			_self.play();
		}


	}

// construct

	var $items = _self.$target.find("div.items > a");
	// get current position from width and margin
	if (_self.position == null) {
		_self.setPosition(_self.current);
	}
	
	// position to current position
	_self.$target.find("div.items").css("left", -(_self.position));
	// Start scrolling
	_self.start();

	// add event handlers
	var $refcont = $target.parent();
	var $rows = $refcont.find("#left-row, #right-row, div#scrollable-logo-box");
	var $left_row = $refcont.find("#left-row");
	var $right_row = $refcont.find("#right-row");
	// Pager left
	$right_row.bind("click", this.seek_left);
	// Pager right
	$left_row.bind("click", this.seek_right);
	
	// Stop scrolling on mouseover
	$rows
		.bind("mouseover", _self.stop)
		.bind("mouseout", _self.play);
}
/**
 *	Add MainScroller class to target element
 */
function scroller($target, count) {
	var main_scroller = new MainScroller($target, count);
	$target.data("main-scroller", main_scroller);
}
/**
 * Run scroller function on each element
 */
$.fn.scroll_logos = function() {
	this.each(function() {
		var $first = $(this).find("div.items a").first();

		// clone elements
		var countOfElements = $(this).find("div.items a").length;
		$(this).find("div.items a").each(function() {
			var $clear = $(this).parent().find("div.clear");
			var $end_new = $(this).clone();
			var $first_new = $(this).clone();
			$end_new.insertBefore($clear);
			$first_new.insertBefore($first);
		});
		scroller($(this), countOfElements);
	});
}