var OptionList = new Class({
	Implements: [Options, Events, Log],
		
	// Constants
	
	// Variables
	element: null,
	elementFx: null,
	pagination: null,
	options: {
		maxListOptions: 6,
		maxPaginationRowItems: 10,
		listSelector: 'ul',
		listOptionSelector: 'li',
		fireEvent: "optionListItemClick",
		autoSelectDefaultOption: true,
		pageName: 'Pagina'
	},
	
	lists: null,
	listOptions: [],
	currentListIndex: 0,
	currentOptionIndex: 0,
	listWidth: 0,
	listsWidth: 0,
	totalListOptions: 0,
	
	// Class instances

	/*
	 * Initialize
	 */
	initialize: function(element, pagination, options)
	{
		//this.enableLog();
		//this.disableLog();
		this.log("OptionList::initialize(" + element + ", " + pagination + ", " + options + ")");
		
		this.element = element;
		this.pagination = pagination;
		
		// Set options
		this.setOptions(options);
		
		this.lists = this.element.getElements(this.options.listSelector);
		
		if(this.options.listOptionSelector)
		{
			this.listOptions = this.element.getElements(this.options.listOptionSelector);

			var isSet = false;
			this.listOptions.each( function( listOption, index ) {

				if( listOption.hasClass('selected') && !isSet)
				{
					isSet = true;
					this.currentOptionIndex = index;
				}
			}.bind(this) );
		}
		
		this.elementFx = new Fx.Tween(this.element, {
			duration: 500,
			transition: Fx.Transitions.Quad.easeOut,
			property: 'left',
			link: 'cancel'
		});
		this.elementFx.set(0);
		
		this.log("lists: " + this.lists.length);
		this.log("listOptions: " + this.listOptions.length);
		
		this.initLists();
		this.initPagination();
		
		// Select default option
		if(this.options.autoSelectDefaultOption)
		{
			this.selectOption(this.currentOptionIndex);
		}
		else
		{
			var listIndex = Math.floor(this.currentOptionIndex / this.options.maxListOptions);
			this.showList(listIndex);
		}
	},
	
	/*
	 * Init lists
	 */
	initLists: function()
	{
		this.log("OptionList::initLists()");
		
		if(!this.lists[0]) return;
		
		this.listWidth = this.lists[0].getDimensions({computeSize: true, styles: ['margin', 'padding']}).totalWidth;
		this.listsWidth = this.listWidth * this.lists.length;
		this.element.setStyle('width', this.listsWidth);
		
		this.log("this.listWidth: " + this.listWidth);
		this.log("this.listsWidth: " + this.listsWidth);
		this.log("this.element.getStyle('width'): " + this.element.getStyle('width'));
		
		this.listOptions.each(function(listOption, index) {
			
//			this.log(index + ". listOption: " + listOption);

			var id = listOption.get('id').split('-')[1];
			//listOption.id = id;

			listOption.addEvent('click', function(event) {
				event.preventDefault();

				this.log('fired: ' + index);

				this.selectOption(index);
				this.fireEvent(this.options.fireEvent, [id]);
				
			}.bind(this));
			
		}.bind(this));
		
	},
	
	/*
	 * Init pagination
	 */
	initPagination: function()
	{
		this.log("OptionList::initPagination()");
		
		if(this.lists.length > 1)
		{
			var paginationWidth = 0;
			
			var li = new Element('li');
			
			var prev = new Element('a', {'class': 'previous navigation', 'href': '#', 'title': 'Vorige'});
			prev.addEvent('click', function(event) {
				event.preventDefault();
				this.prevItem();
			}.bind(this));
				
			li.adopt(prev);
			
			this.pagination.adopt(li);
			
			var liWidth = li.getDimensions({computeSize: true, styles: ['margin', 'padding']}).totalWidth;
			paginationWidth += liWidth;
			
			this.lists.each(function(list, index) {

				var pageNumber = index + 1;
				list.addClass('page-' + index);
				
				var li = new Element('li');
				var a = new Element('a', {'href': '#', 'title': this.options.pageName + ' ' + pageNumber});
				a.addEvent('click', function(event) {
					event.preventDefault();
					//console.log('pagination fire:' + index);
					this.showList(index);
						
				}.bind(this));
				
				li.adopt(a);
				
				if(index == this.lists.length - 1)
				{
					//li.addClass('last-child');
				}
				
				if(index == this.options.maxPaginationRowItems)
				{
					li.addClass('new-row');
				}
				
				this.pagination.adopt(li);

				if(index < this.options.maxPaginationRowItems)
				{
					var liWidth = li.getDimensions({computeSize: true, styles: ['margin', 'padding']}).totalWidth;
					paginationWidth += liWidth;
				}				
				
				this.totalListOptions++;
			
			}.bind(this));
			
			var li = new Element('li');
			
			li.addClass('last-child');
			
			var next = new Element('a', {'class': 'next navigation', 'href': '#', 'title': 'Volgende'});
			next.addEvent('click', function(event) {
				event.preventDefault();
				this.nextItem();
			}.bind(this));
				
			li.adopt(next);
			
			this.pagination.adopt(li);
			
			var liWidth = li.getDimensions({computeSize: true, styles: ['margin', 'padding']}).totalWidth;
				paginationWidth += liWidth;
			
			this.pagination.setStyle('width', paginationWidth);
		}
	},
	
	/*
	 * Show list
	 */
	showList: function(index)
	{
		this.log("OptionList::showList(" + index + ")");

		var selectedIndex = index + 1;
		
		if(this.pagination.getElements('li')) this.pagination.getElements('li').removeClass('selected');
		if(this.pagination.getElements('li')[selectedIndex]) this.pagination.getElements('li')[selectedIndex].addClass('selected');
		
		if(index != this.currentListIndex) 
		{
			var left = index * -this.listWidth;
			this.elementFx.start(left);
		}
		
		// Set current list index
		this.currentListIndex = index;
	},
	
	/*
	 * Select option
	 */
	prevItem: function()
	{
		this.log("OptionList::nextItem()");
		
		if(this.currentListIndex > 0)
		{	
			var index = this.currentListIndex - 1;	
			this.showList(index);
		}
	}, 
	
	nextItem: function()
	{	
		this.log("OptionList::nextItem()");

		if(this.currentListIndex < (this.totalListOptions - 1))
		{
			var index = this.currentListIndex + 1;
			this.showList(index);
		}
	}, 
	
	 
	selectOption: function(index)
	{
		this.log("OptionList::selectOption(" + index + ")");
		
		// Give option to selected status
		if(this.listOptions.length > 0)
		{
			this.listOptions.removeClass('selected');
			this.listOptions[index].addClass('selected');
		}
		
		var listIndex = Math.floor(index / this.options.maxListOptions);
		this.showList(listIndex);
	},
	
	/*
	 * Select option by id
	 */
	selectOptionById: function(id)
	{
		this.log("OptionList::selectOptionById(" + id + ")");
		
		var optionIndex = null;
		
		this.listOptions.each(function(listOption, index) {
			
			//var link = listOption.getElement('a');
			var listOptionId = listOption.get('id').split('-')[1];
			
			if(listOptionId == id)
			{
				optionIndex = index;
			}
			
		}.bind(this));
		
		if(optionIndex != null)
		{
			this.selectOption(optionIndex);
		}
	}
	
});