FlickrViewer = new JS.Class({
	include: Ojay.Observable,
	
	initialize: function(apiKey, groupId) {
		this._flickr = new Flickr.Client(apiKey);
		this._ready  = false;
		this._flickr.getFavourites(groupId, function(photos) {
			this._photos = photos;
			this._ready  = true;
			this.notifyObservers('ready');
		}, this)
	},
	
	getHTML: function() {
		if (!this._ready) return null;
		if (this._html) return this._html;
		
		var self = this;
		this._html = Ojay( Ojay.HTML.div(function(h) {
			self._photoDisplay = h.div(function(h) {
				self._photos.forEach(function(photo) {
					h.div({className: 'photo'},
						h.a({ href: photo.getLink() },
							h.img({ src: photo.getThumbnail() })
						)
					);
				});
			});
			self._descriptionDisplay = Ojay( h.div({className: 'description'}) );
		}) );
		
		this._pager = new Ojay.Paginator(this._photoDisplay, {
			direction:	'horizontal',
			rows:		1,
			columns:	1,
			looping:	true
		});
		
		this._pager.on('pagechange', function(pager, p) {
			this._updateDescription(p);
		}, this);
		
		return this._html;
	},
	
	setup: function() {
		if (!this._ready || this._setup) return;

		var x = Math.max(Math.ceil(Math.random() * this._photos.length), 1);
		this._pager.setPage(x);
		
		this._setup = true;
		this._pager.setup();
		this._pager.addControls('before');
		this._updateDescription(this._pager.getCurrentPage());
	},
	
	_updateDescription: function(p) {
		var desc = this._photos[p-1].getDescription().replace(/^(\s*<p>.*?<\/p>){2}/i, '');
		this._descriptionDisplay.setContent(desc);
	}
});