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

	// Variables
	element: null,
	emptyStateContainer: null,
	photoContainer: null,
	photoContainerWidth: null,
	photoContainerHeight: null,
	thumbnailsContainer: null,
	pageContainer: null,
	photo: null,
	thumbnails: [],
	interfaceShown: false,


	// Class instances
	
	initialize: function( element )
	{
		this.enableLog();
		//this.disableLog();
		this.log("PhotoViewer::initialize()");

		// Set variables
		this.element = element;

		this.emptyStateContainer = this.element.getElement('.empty-state');

		if(this.emptyStateContainer)
		{
			this.initEmptyState();
		}
		else
		{
			this.initInterface();
		}
	},
	
	initEmptyState: function()
	{
		this.log("PhotoViewer::initThumbnails()");
		
		this.emptyStateContainer.getElement('.add-photos').addEvent('click', function(event) {
			event.preventDefault();

			this.fireEvent('showPhotoUpload');
			
		}.bind(this));
		
	},
	
	initInterface: function()
	{
		this.log("PhotoViewer::initInterface()");
		
		// Remove empty state
		if(this.emptyStateContainer) this.emptyStateContainer.dispose();
		
		if(this.element.getElement('.photo'))
		{
			this.photoContainer = this.element.getElement('.photo');
		}
		else
		{
			this.photoContainer = new Element('div', {'class': 'photo'});
			this.element.adopt(this.photoContainer);
		}
		this.photoContainerWidth = this.photoContainer.getStyle('width').toInt();
		this.photoContainerHeight = this.photoContainer.getStyle('height').toInt();
		
		if(this.element.getElement('.thumbnails'))
		{
			this.thumbnailsContainer = this.element.getElement('.thumbnails');
		}
		else
		{
			this.thumbnailsContainer = new Element('div', {'class': 'thumbnails'});
			this.element.adopt(this.thumbnailsContainer);
		}
		
		
		if(this.element.getElement('.page-container'))
		{
			this.pageContainer = this.element.getElement('.page-container');
		}
		else
		{
			this.pageContainer = new Element('div', {'class': 'page-container'});
			this.thumbnailsContainer.adopt(this.pageContainer);
		}
		
		// Paging
		if(this.element.getElement('.paging-container'))
		{
			this.pagingContainer = this.element.getElement('.paging-container');
		}
		else
		{
			this.pagingContainer = new Element('div', {'class': 'paging-container'});
			
			var paging = new Element('div', {'class': 'paging large'});
			paging.adopt( new Element('ul') );
			this.pagingContainer.adopt(paging);
			
			this.pagingContainer.adopt( new Element('a', {'href': '#', 'class': 'button add-photos', 'text': 'Voeg zelf foto(s) toe', 'title': 'Voeg zelf foto(s) toe'}) );
			
			this.element.adopt(this.pagingContainer);
		}
		this.pagingContainer.getElement('.add-photos').addEvent('click', function(event) {
			event.preventDefault();
			
			this.fireEvent('showPhotoUpload');
		}.bind(this));
		
		
		this.photo = this.photoContainer.getElement('img');
		this.thumbnails = this.thumbnailsContainer.getElements('a');
		
		
//		this.log("element: "+ this.element);
//		this.log("photoContainer: "+ this.photoContainer);
//		this.log("thumbnailsContainer: "+ this.thumbnailsContainer);
//		this.log("pageContainer: "+ this.pageContainer);
//		this.log("photo: "+ this.photo);
//		this.log("thumbnails: "+ this.thumbnails);
//		this.log("this.thumbnails.length: "+ this.thumbnails.length);
		
		if(this.thumbnails.length > 0)
		{
			this.initThumbnails();

			var photo = this.photoContainer.getElement('img');
			if(photo) this.centerPhoto(photo);
		}
		
		this.interfaceShown = true;
		
		this.log("end initInterface()");
	},

	/*
	 * 
	 */
	initThumbnails: function()
	{
		this.log("PhotoViewer::initThumbnails()");
		
		this.thumbnails.each(function(thumbnail) {
			
			// First remove click event
			thumbnail.removeEvents('click');
			
			// Add it again
			thumbnail.addEvent('click', function(event) {
				event.preventDefault();
				
//				this.log("thumbnail: "+ thumbnail);
//				this.log("thumbnail.getProperty('href'): "+ thumbnail.getProperty('href'));
				
				var photoUrl = thumbnail.get('href');
				this.preloadPhoto(photoUrl);
				
				this.selectThumbnail(thumbnail);

			}.bind(this));
			
		}.bind(this));
		
		
		var pagination = this.pagingContainer.getElement('ul');
		pagination.empty();
		
		var maxListOptions = 24;
		var options = {
			maxListOptions: maxListOptions,
			maxPaginationRowItems: 8,
//			listSelector: 'ul',
			listOptionSelector: 'a',
			fireEvent: 'optionListItemClick'
		};

		this.optionList = new OptionList(this.pageContainer, pagination, options);
		
//		this.optionList.addEvent(options.fireEvent, function(id) {
//			this.log("News::event " + options.fireEvent + " fired with id: " + id);
//
//		}.bind(this));

	},
	
	selectThumbnail: function(thumbnail)
	{
		this.log("PhotoViewer::selectThumbnail(" + thumbnail + ")");
		
		this.thumbnails.each(function(element) {
			
			// First remove selected class from all thumbnails
			element.removeClass('selected');
			
		}.bind(this));
	
		thumbnail.addClass('selected');
	},

	buildThumbnailsOverview: function()
	{
		this.log("PhotoViewer::buildThumbnailsOverview()");
	
		//this.log("this.thumbnails.length: " + this.thumbnails.length);

		this.pageContainer.empty();

		var pageNumber = 1;
		var pageCols = 8;
		var pageRows = 3;
		
		var page;
		var row;

		this.thumbnails.each(function(thumbnail, index) {
			
			// Remove 'last-child' and 'selected' class
			thumbnail.removeClass('last-child');
			thumbnail.removeClass('selected');
			
			//this.log("thumbnail.get('id'): " + thumbnail.get('id'));
			this.log("thumbnail: " + thumbnail);
			
			var a = index % ((pageCols * pageRows) - 0);
			var b = index % (pageCols - 0);
			//this.log("index: " + index);
			//this.log("page: " + a);
			//this.log("row: " + b);
			
			if(index == 0 || a == 0)
			{
				if(page) 
				{
					if(row)
					{
						//this.log("ADD ROW");
						page.adopt(row);

						var lastThumbnail = row.getLast('.thumbnail');
						lastThumbnail.addClass('last-child');

						row = null;
					}
					
					//this.log("ADD PAGE");
					this.pageContainer.adopt(page);
					pageNumber++;
					
					var lastRow = page.getLast('.row');
					lastRow.addClass('last-child');
				}
					
				//this.log("START NEW PAGE");
				page = new Element('ul', {'class': 'page-' + pageNumber});
			}
			
			if(b == 0)
			{
				if(row)
				{
					//this.log("ADD ROW");
					page.adopt(row);
					
					var lastThumbnail = row.getLast('.thumbnail');
					lastThumbnail.addClass('last-child');
				}
				
				//this.log("START NEW ROW");
				row = new Element('li', {'class': 'row'});
			}
			
			//this.log("ADD THUMBNAIL");
			row.adopt(thumbnail);
			
			if(index == (this.thumbnails.length - 1))
			{
				thumbnail.addClass('last-child');
				
				//this.log("ADD ROW - last");
				row.addClass('last-child');
				page.adopt(row);
				
				//this.log("ADD PAGE - last");
				page.addClass('last-child');
				this.pageContainer.adopt(page);
			}
			
		}.bind(this));
		
		this.log("end buildThumbnailsOverview()");
	},

	addPhotos: function(photos)
	{
		this.log("PhotoViewer::addPhotos(" + photos + ")");
	
		// Check if interface is initialized
		if(!this.interfaceShown) this.initInterface();
	
		// Place photos
		photos.each(function(photo, index) {
			
			//this.log("photo.image: " + photo.image);
			//this.log("photo.thumbnail: " + photo.thumbnail);
			
			var thumbnail = new Element('a', {'href': photo.image, 'id': 'photo-' + photo.id, 'class': 'thumbnail'});
			
			// Add to position 0 in thumbnails array
			this.thumbnails.splice(0, 0, thumbnail);
			
			this.preloadThumbnail(thumbnail, photo.thumbnail);
			
		}.bind(this));
		
		this.log("before buildThumbnailsOverview()");
		
		this.buildThumbnailsOverview();
		
		// Create thumbnail pagination
		this.initThumbnails();
		
		// Select first thumbnail
		var firstThumbnail = this.thumbnails[0];
		
		this.log("firstThumbnail: " + firstThumbnail);
		this.log("typeof(firstThumbnail): " + typeof(firstThumbnail));
		this.log("firstThumbnail.get('id'): " + firstThumbnail.get('id'));
		this.log("firstThumbnail.get('href'): " + firstThumbnail.get('href'));
		this.log("firstThumbnail.get('events'): " + firstThumbnail.get('events'));
		
//		firstThumbnail.fireEvent('click', [new Event()]);
		
		var photoUrl = firstThumbnail.get('href');
		this.log("photoUrl: "+ photoUrl);

		this.preloadPhoto(photoUrl);
	},


	/*
	 * Preload photo
	 */
	preloadPhoto: function(imagePath)
	{
		this.log("PhotoViewer::preloadPhoto(" + imagePath + ")");
		
		// Show image loader
		this.showPhotoLoadState();
		
		// Set image
		var image = [imagePath];
		
		var loadedImage = new Asset.images(image, 
		{
			onProgress: function(counter, index) 
			{
				//this.log("onProgress: " + counter + ", " + index);
		    }.bind(this),
			onComplete: function() 
			{
				//this.log("onComplete");
				
				// Remove old photo
				if(this.photoContainer.getElement('img'))
				{
					this.photoContainer.getElement('img').dispose();
				}
				
				var image = loadedImage[0];
//				image.title = this.name;
//				image.alt = this.name;
				
				// Insert image
				this.photoContainer.adopt(image);
				
				var imageElement = this.photoContainer.getElement('img');
				
				this.centerPhoto(imageElement);
				
				imageElement.setStyle('opacity', 0);
				imageElement.fade('in');
				
				// Hide image loader
				this.hidePhotoLoadState();
		    }.bind(this),
			onAbort: function(counter, index)
			{
				//this.log("onAbort: " + counter + ", " + index);
				
				// Hide image loader
				this.hidePhotoLoadState();
			}.bind(this),
			onError: function(counter, index)
			{
				//this.log("onError: " + counter + ", " + index);
				
				// Hide image loader
				this.hidePhotoLoadState();
			}.bind(this)
		});
	},
	
	/*
	 * Preload thumbnail
	 */
	preloadThumbnail: function(thumbnail, imagePath)
	{
		this.log("PhotoViewer::preloadThumbnail(" + thumbnail + ", " + imagePath + ")");
		
		// Show image loader
		this.showThumbnailLoadState(thumbnail);
		
		// Set image
		var image = [imagePath];
		
		var loadedImage = new Asset.images(image, 
		{
			onProgress: function(counter, index) 
			{
				//this.log("onProgress: " + counter + ", " + index);
		    }.bind(this),
			onComplete: function() 
			{
				//this.log("onComplete");
				
				// Remove old photo
				if(thumbnail.getElement('img'))
				{
					thumbnail.getElement('img').dispose();
				}
				
				var image = loadedImage[0];
//				image.title = this.name;
//				image.alt = this.name;
				image.width = 65;
				image.height = 65;
				
				// Insert image
				thumbnail.adopt(image);
				
				var imageElement = thumbnail.getElement('img').setStyle('opacity', 0);
				imageElement.fade('in');
				
				// Hide image loader
				this.hideThumbnailLoadState(thumbnail);
		    }.bind(this),
			onAbort: function(counter, index)
			{
				//this.log("onAbort: " + counter + ", " + index);
				
				// Hide image loader
				this.hideThumbnailLoadState(thumbnail);
			}.bind(this),
			onError: function(counter, index)
			{
				//this.log("onError: " + counter + ", " + index);
				
				// Hide image loader
				this.hideThumbnailLoadState(thumbnail);
			}.bind(this)
		});
	},
	
	centerPhoto: function(image)
	{
		this.log("PhotoViewer::centerPhoto(" + image + ")");
		
		var left = (this.photoContainerWidth / 2) - (image.width / 2);
		var top = (this.photoContainerHeight / 2) - (image.height / 2);
		image.setStyle('left', left);
		image.setStyle('top', top);
	},
	
	
	/*
	 * Show photo load state
	 */
	showPhotoLoadState: function()
	{
		this.log("PhotoViewer::showImageLoadState()");
		
		var loader = new Element('div', {'class': 'loader'});
		
		if(!this.photoContainer.getElement('.loader'))
		{
			this.photoContainer.adopt(loader);
		}

		this.photoContainer.getElement('.loader').fade('in');
	},
	
	/*
	 * Hide photo load state
	 */
	hidePhotoLoadState: function()
	{
		this.log("PhotoViewer::hideImageLoadState()");
		
		this.photoContainer.getElement('.loader').fade('out');
	},
	
	/*
	 * Show thumbnail load state
	 */
	showThumbnailLoadState: function(thumbnail)
	{
		this.log("PhotoViewer::showThumbnailLoadState()");
		
		var loader = new Element('div', {'class': 'loader'});
		
		if(!thumbnail.getElement('.loader'))
		{
			thumbnail.adopt(loader);
		}

		thumbnail.getElement('.loader').fade('in');
	},
	
	/*
	 * Hide thumbnail load state
	 */
	hideThumbnailLoadState: function(thumbnail)
	{
		this.log("PhotoViewer::hideThumbnailLoadState()");
		
		thumbnail.getElement('.loader').dispose();
	}
	

});