var Objects = new Class({
				 
	Implements: [Options, Events],

	options: {
		columns :			6,
		rows:				3,
		thumbnailerClass:	'medialist',
		overlay:			true,
		itemheight:			130,
		itemwidth:			142,
		containerheight:	430,
		addDescription:		false,
		listFadedOpacity:	0
	},
	
	element:	null,
	rows:		[],
	scrollFx: 	null,
	scrollTo:	false,
	
	initialize: function(element, details, data, options){
		this.setOptions(options);
		this.element = $(element);
		this.details = $(details);
		this.data = data;
		
		this.build();
		this.opacity();
		this.addScrollEvent(0);
		this.addScrollButtons();
		this.updateNavbarCurrent();
	},
	
	build: function(){
		this.element.empty();
		this.element.setStyle('height', this.options.containerheight);
		
		this.list = new Element('ul').inject(this.element);
		
		this.splitRows();
		
		$each(this.data, function(row){
			this.addRows(row);
		}.bind(this));		
	},
	
	splitRows:	function(){
		var rows = [];
		
		var row = 0;
		$each(this.data, function(data){

			rows[row] = !rows[row] ? [] : rows[row];
			
			rows[row].extend([data]);
			row = rows[row].length >= this.options.columns ? row + 1 : row;

		},this);
		this.data = rows;
		
	},
	
	opacity:	function(){
		for(var row = 0; row <= (this.options.rows-1); row++){
			if (this.rows[row]){
				this.rows[row].show();
			}
		}
	},
	
	addRows:	function(data){
		var row = new objectsRow($merge(this.options, {
			'data' 						:	data,
			'list' 						:	this.list,
			'details' 					:	this.details,
			'onShowDetails'				:	function(){  this.fireEvent('showDetails'); this.hideScrollButtons(); }.bind(this),
			'onHideDetails'				:	function(){  this.fireEvent('hideDetails'); this.showScrollButtons(); }.bind(this),
			'onHover'					:	function(id){  this.fireEvent('hover', id);  }.bind(this)
		}));
		
		this.rows.extend([row]);	
	},
	
	addScrollEvent:	function(){
		this.scrollFx = new Fx.Scroll(this.element, {
			'link'			:	'cancel',
			'duration'		:	'short',
			'wheelStops'	:	false,
			'transition'	:	'back:out',
			'onStart'		:	function(){	this.rowsFade(); }.bind(this),
			'onComplete'	:	function(){	this.currentRow = this.scrollTo; 
											this.updateNavbarCurrent();
											this.disableScrollButtons();
										}.bind(this)
		});	
		
		this.currentRow = 0;
		
		var position = this.element.getPosition();
		var dimension = this.element.getDimensions();
		
		/*
		this.element.addEvent('mousemove', function(event){
			if (event.page.y <= (position.y + (this.options.itemheight/2))){					
				this.scrollDirection = 'up';
				this.scroll();
			}
			if (event.page.y >= ((position.y + dimension.y) - (this.options.itemheight/2))){					
				this.scrollDirection = 'down';
				this.scroll();
			}			
		}.bind(this));
			*/
		
		this.element.addEvent('mousewheel', function(event){
			event.stop();
			this.scrollDirection = event.wheel > 0 ? 'up' : 'down';
			this.scroll();
		}.bind(this));

	},
	
	hideScrollButtons:	function(){
		this.navup.hide();
		this.navdown.hide();
		this.navbar.hide();
	}, 
	
	showScrollButtons:	function(){
		this.navup.show();
		this.navdown.show();
		this.navbar.show();	
	},
	
	addScrollButtons: function(){
		this.navup = new Element('div', {'class':'button objectsnav up', 'text':'^'}).injectAfter(this.element);
		this.navdown = new Element('div', {'class':'button objectsnav down', 'text':'v'}).injectAfter(this.element);
		this.navbar = new Element('div', {'class':'objectsnav bar', 'html':'&nbsp;'}).injectAfter(this.element);
		this.navbarCurrent = new Element('div', {'class':'objectsnav current', 'html':'&nbsp;'}).inject(this.navbar);
		
		this.navup.position({
			'relativeTo':	this.element,
			'position':		'TopRight',
			'edge':			'Top',
			'offset':		{x:0,y:0}
		});		
		
		this.navdown.position({
			'relativeTo':	this.element,
			'position':		'BottomRight',
			'edge':			'Bottom',
			'offset':		{x:0,y:0}
		});	
		
		var buttonsize = this.navdown.getSize();
		var distance = this.navdown.getCoordinates(this.navup);
			
		this.navbar.position({
			'relativeTo':	this.navup,
			'position':		'Bottom',
			'edge':			'Top',
			'offset':		{x:0,y:0}
		}).setStyle('height', distance.top - buttonsize.y);
		
		var scrollsize = this.element.getScrollSize();
		var size = this.element.getSize();
		
		this.navbarCurrent.setStyle('height', (size.y / scrollsize.y)*100 + '%').position({
			'relativeTo':	this.navbar,
			'position':		'TopCenter',
			'edge':			'TopCenter',
			'offset':		{x:0,y:0}
		})
		
		this.navdown.addEvent('click', function(){
			this.scrollDirection = 'down';
			this.scroll();
		}.bind(this));
		
		
		this.navup.addEvent('click', function(){
			this.scrollDirection = 'up';
			this.scroll();
		}.bind(this));
		
		this.disableScrollButtons(true);
	},
	
	updateNavbarCurrent: function(){
		var scroll = this.element.getScroll();
		var scrollable = this.element.getScrollSize();
		var barsize = this.navbar.getSize();
		var size = this.navbarCurrent.getSize();
		
		if (scroll.y <= 0){
			var percentage = 0;
		} else {
			var percentage = (scroll.y / scrollable.y)*100;
		}
		
		var pixels = barsize.y * (percentage/100);
		
		this.navbarCurrent.tween('top', pixels  + 'px');
	},
	
	disableScrollButtons: function(init){
		var disabled = init === true && !this.rows[this.currentRow + this.options.rows] && !this.rows[this.currentRow -1] ? true : false;
		
		if (!this.rows[this.currentRow + this.options.rows]){
			this.navdown.addClass('disabled');
			this.navdown.tween('opacity', disabled === true ? 0 : 0.5);
		} else {
			if (this.navdown.hasClass('disabled')){
				this.navdown.removeClass('disabled');
				this.navdown.tween('opacity', 1);		
			}	
		}
		

		if (!this.rows[this.currentRow -1]){
			this.navup.addClass('disabled');
			this.navup.tween('opacity', disabled === true ? 0 : 0.5);
		} else {
			if (this.navup.hasClass('disabled')){
				this.navup.removeClass('disabled');	
				this.navup.tween('opacity', 1);	
			}	
		}		
	},
	
	scroll:	function(){
		if (this.scrollDirection == 'down'){
			if (this.rows[this.currentRow + this.options.rows]){
				this.scrollTo = this.currentRow + 1;
			}
		} else {
			if (this.rows[this.currentRow -1]){
				this.scrollTo = this.currentRow - 1
			}
		}
		
		
		if (this.scrollTo !== this.currentRow && this.scrollTo !== false){
			this.scrollFx.toElement(this.rows[this.scrollTo].element);
		}			
	},
	
	rowsFade:	function(){
		if (this.scrollDirection == 'down'){
			var show = this.scrollTo + (this.options.rows - 1);
			var hide = this.scrollTo - 1;
		} else {
			var show = this.scrollTo;
			var hide = this.scrollTo + this.options.rows;		
		}
		
		if (this.rows[show]){
			this.rows[show].fadeIn();
		}
		
		if (this.rows[hide]){
			this.rows[hide].hide();
		}
	}
});

var objectsRow = new Class({
				 
	Implements: [Options, Events],

	options: {},
	
	element:	null,
	thumbs:		[],
	
	next: 0,
	
	initialize: function(options){
		this.setOptions(options);
		this.build();
	},
	
	build: function(){
		this.element = new Element('li').inject(this.options.list);
		
		$each(this.options.data, function(thumb){
			this.addThumb(thumb);
		}.bind(this));		
	},
	
	addThumb:	function(data){
		var thumb = new objectsThumb($merge(this.options, {
			'data' 					:	data,
			'parent' 				:	this.element,
			'onShowDetails' 		:	function(){
											this.fireEvent('showDetails');
										}.bind(this),
			'onHideDetails' 		:	function(){
											this.fireEvent('hideDetails');
										}.bind(this),
			'onHover'		 		:	function(id){
											this.fireEvent('hover', id);
										}.bind(this)
		}));
		
		this.thumbs.extend([thumb]);
	},
	
	fadeIn:	function(){
		this.fadeNext();
		this.periodical = this.fadeNext.periodical(200, this);
	},
	
	fadeNext:	function(){
		if (this.thumbs[this.next]){
			this.thumbs[this.next].show();
			this.next++;
		} else {
			if (this.periodical){
				$clear(this.periodical);
				this.next = 0;
			}
		}
	},

	show:	function(){
		$each(this.thumbs, function(thumb){
			thumb.show();
		}.bind(this));
	},
		
	hide:	function(){
		$each(this.thumbs, function(thumb){
			thumb.hide();
		}.bind(this));
	}
});


var objectsThumb = new Class({
				 
	Implements: [Options, Events],

	options: {},
	
	element:	null,
	
	initialize: function(options){
		this.setOptions(options);
		this.data = this.options.data;
		this.build();
		this.addEvents();
	},
	
	build: function(){
		this.element = new Element('div', {
			'opacity' :		0,
			'class' :		'image',
			'tween'	:		{	'duration' : 	'short'	},
			'styles' :		{	'height' : 		this.options.itemheight,
								'width'	: 		this.options.itemwidth	}
		}).inject(this.options.parent);
		
		if (this.data.media){
			this.image = new Element('img', {
				'src': '/img/'+this.options.thumbnailerClass+'/' + this.data.media
			}).inject(this.element);
		} else {
			this.image = new Element('span', {
				'class': 'no-image'
			}).inject(this.element);
		}
		
		if (this.options.addDescription){
			this.addDescription();
		}
		
		if (this.options.overlay){
			this.addOverlay();
		}
		
		this.fadeFx = new Fx.Tween(this.element, {
			'duration' :	'short'
		});		
		
		this.listFadeFx = new Fx.Tween(this.options.list, {
			'duration' :	'short',
			'link' :		'chain',
			'onStart' : 	function(){
								if (this.options.list.get('opacity') == 0){
									this.options.list.setStyle('display', 'block');
								}
							}.bind(this),
			'onComplete' :	function(){
								if (this.options.list.get('opacity') == 0){
									this.options.list.setStyle('display', 'none');
								}
							}.bind(this)
		});	
	},
	
	addDescription:	function(){
		this.description = new Element('div', {
			'class' :	'description',
			'styles' :	{'height':this.options.itemheight}
		}).injectBefore(this.element).position({
			'relativeTo'	: this.element,
			'position'		: 'upperRight',
			'edge'			: 'upperLeft'
		});
		
		new Element('h2', {
			'text':this.data.name
		}).inject(this.description);
		
		var ul = new Element('ul').inject(this.description);
		
		var omschrijving = new String(this.data.omschrijving).split("\n");

		$each(omschrijving, function(temp){
			if (temp.trim() != ''){
				new Element('li', {
					'text' : '- ' + temp.trim()
				}).inject(ul);
			}
		});	
	},
	
	addOverlay:	function(){
		var size = this.element.getSize();
		this.overlay = new Element('div', {
			'opacity' :		0,
			'class' :		'overlay',
			'tween'	:		{	'duration' : 'short'	},
			'styles' :		{	'height' : 		size.y,
								'width'	: 		size.x	}
								
		}).injectBefore(this.image);	
		new Element('ul').adopt(
			new Element('li', {'text' :	this.data.name}),
			new Element('li', {'text' :	this.data.address.city}),
			new Element('li', {'text' :	'Gerealiseerd in ' +this.data.bouwjaar}),
			new Element('li', {'text' :	this.data.units + ' units'})
			//new Element('li', {'html' :	this.data.size != 0 ? this.data.size + ' m&sup2;' : ''})
			//new Element('li', {'html' :	this.data.price != 0 ? 'vanaf &euro;' + this.data.price : ''})
		).injectTop(this.overlay);
		
		this.overlay.adopt(new Element('a', {
			'text':'Klik hier voor detailinformatie'
		}));
	},
	
	show:	function(){
		this.fadeFx.start('opacity', 1);
	},

	hide:	function(){
		this.fadeFx.start('opacity', 0);
	},
		
	addEvents:	function(){
		this.element.addEvents({
			'click' : 		function(){
								//this.options.list.tween('opacity', 0.5);
								this.listFadeFx.start('opacity', 0.5);
								this.getobjectDetails();
							}.bind(this),
			'mouseenter' :	function(){
								if (this.options.overlay){
									this.overlay.tween('opacity', 0.9);
								}
								this.fireEvent('hover', this.data.id);
							}.bind(this),
			'mouseleave' :	function(){
								if (this.options.overlay){
									this.overlay.tween('opacity', 0);
								}
							}.bind(this)						
		});
		
		if (this.description){
			this.description.addEvent('click', function(){
				//this.options.list.tween('opacity', 0.5);
				this.listFadeFx.start('opacity', 0.5);
				this.getobjectDetails();				
			}.bind(this));
		}
	},
	
	getobjectDetails:	function(url){
		var url = url ? url + 'ajax/' : this.data.id + '/ajax/';
		new Request.HTML({
			'url' :			new URI(url).get('directory'),
			'method' :		'post',
			'update' :		this.options.details,
			'onComplete' :	function(){
								this.options.details.tween('opacity', 1);
	//							this.options.list.tween('opacity', this.options.listFadedOpacity);
								this.listFadeFx.start('opacity', 0);
								//this.options.list.setStyle('display', 'none');
								this.detailsNav();
								this.fireEvent('showDetails');
							}.bind(this)
		}).send();
	},
	
	detailsNav:	function(){
		this.options.details.getElement('.nav .button.list').addEvent('click', function(){
			this.options.details.empty();
			//this.options.list.setStyle('display', 'block');
			//this.options.list.tween('opacity', 1);
			this.listFadeFx.start('opacity', 1);
			this.fireEvent('hideDetails');
		}.bind(this));
		
		$each(this.options.details.getElements('.nav .button.next, .nav .button.prev'), function(button){
			button.addEvent('click', function(event){
				event.stop();
				this.getobjectDetails(button.get('href'));
				this.options.details.tween('opacity', 0.5);
			}.bind(this));
		}.bind(this));
	}
});