var product;
var materiaal;
var machine;

function Scroller(id, count) {
	this._id = id;
	this._count = count;
	this._index = 0;
	this._selected = '';
	
	var self = this;
	//set parent div
	this._parent = $('#selectie-' + this._id);
	//set scrolllist
	this._list = $('#scroller-' + this._id);
	//set scrollbar div
	this._scrollbarHandle = $('#scrollbar-' + this._id + ' div');
	//create scrollbar
	this._scrollbar = this.CreateScrollbar();

	//handlers
	$('#selectie-' + this._id + ' a.arrow').click(onArrowClick);
	$('#selectie-' + this._id + ' a.step').click(onItemClick);
	
	this.ToggleBlur(0);
	
	function onArrowClick(){
//    console.log(self._count + ' - ' + self._index);
		var moveTo;
  	if (this.className.indexOf('down') >= 0 && self._count > 1 && self._index + 1 < self._count) {
      self.MoveTo((self._index < self._count ? self._index + 1 : self._count), true);
    }
    else 
      if (this.className.indexOf('up') >= 0) {
        if (self._count > 1) {
          self.MoveTo((self._index > 0 ? self._index - 1 : 0), true);
        }
      }
		//self.MoveTo(moveTo, true);
	}
	
	function onItemClick(){
		var index = self._list.children('li:visible').index($(this).parent().get(0));
		self._selected = this.parentNode.id;
		if (index != self._index)
			self.MoveTo(index, true);
			
		Scroller.Ajax(this.parentNode.id);
	}
}
Scroller.prototype.getSelected = function(){
  return this._selected;
}

Scroller.prototype.ToggleBlur = function(i) {
	var item = this.GetItemByIndex(i);
	if(item)
		item.toggleClass('blurred');
}

Scroller.prototype.GetItemByIndex = function(i) {
	return this._list.children(':visible').eq(i);
}

Scroller.prototype.CreateScrollbar = function(startValue) {
	var self = this;
	//console.log(startValue + ' - ' + this._count);  
	this._scrollbarHandle.css({'height': (215/(this._count)) + 'px'});

	return($('#scrollbar-' + this._id).slider({
		minValue: 0,
		maxValue: this._count-1,
		startValue: startValue || 0,
		axis: 'vertical',
		slide: function(e, ui) { self.MoveTo(ui.value, false); }
	}))
}

Scroller.prototype.MoveScrollbarTo = function(i){
	this._scrollbar.sliderMoveTo(i, null, null, null);
}
	
Scroller.prototype.MoveTo = function(i, animate){
	this.ToggleBlur(this._index);
	if (animate) {
	  	this._list.animate({
	  		'top': ((-i * 74) + 104) + 'px'
	  	}, 'fast');
	}
	else {
  		this._list.css({
			'top': ((-i * 74) + 104) + 'px'
		});
	}
	this._index = i;
	this.MoveScrollbarTo(this._index);
	this.ToggleBlur(this._index);
}

Scroller.prototype.Update = function(items) {
	var self = this;
	var children = this._list.children('li');
	var isSet = false;
	
	this.ToggleBlur(this._index);
	this._count = items.length;
	this._scrollbar.sliderDestroy();

	children.each(function(i, n) {
		var id = this.id;
		var index = $.inArray(id, items);

		if (index >= 0)
			this.style.display = '';
		else
			this.style.display = 'none';

		//console.log(id + ' ' + self._selected + index);
		
		/*if (self._selected == id) {
			self._index = index;
			isSet = true;
		}*/
		
		if(i == items.length - 1 && self._selected != id)
			self._index = 0;
    else if(self._selected == id && index >= 0) 
      self._index = index;
	})

	this._scroller = this.CreateScrollbar(this._index);
	this._list.css({
			'top': ((-this._index * 74) + 104) + 'px'
		});
	this.ToggleBlur(this._index);
	//this.MoveTo(this._index ,false);
}

Scroller.prototype.UpdateText = function(text){
  var id = this._selected.split('_')[1];
	$('#text').empty().append('<a href="/?id=121&machine=' + id + '">Meer informatie</a><br />' + text);
}

//Static functions because there is no Scroller manager.
Scroller.Ajax = function(id){
	$.getJSON('get_items.php', { id: id }, Scroller.UpdateScroller);
}

Scroller.UpdateScroller = function(json){
	if (json.product)
		product.Update(json.product);
	if (json.machine)
		machine.Update(json.machine);
	if (json.materiaal)
		materiaal.Update(json.materiaal);
	if(json.info)
		machine.UpdateText(json.info);
}