/**
 * Flickr Interestingness Viewer
 *
 * @author Fontaine Shu
 */

var FLICKR_REST_URL = 'http://api.flickr.com/services/rest/';

/**
 * JSONP callback
 */
var jsonFlickrApi = function(rsp) {
	if(rsp.stat == 'ok') {
		Flickr.parseData(rsp);
	}
	else {
		$('page').set('html', rsp.message);
	}
};

/**
 * Helpers
 */
var Flickr = {
	page: 1,
	pages: 5,
	perPage: 50,
	prevPage: 1,
	isLightbox: false,
	disabled: false,
	photoset_id: null,
	user_id: null,
	emptyHTML: '<p class="empty">No photos available through the Flickr API :(</p>',
	
	parseData: function(rsp) {
		if(!rsp.photos) return;
		
		$('page').empty();
		
		this.page = rsp.photos.page.toInt();
		this.perPage = rsp.photos.perpage.toInt();
		this.pages = rsp.photos.pages.toInt();
		
		if(this.page == 1 && this.pages > 1) {
			$('next-page').removeClass('disabled');
		}
		
		if(this.pages == 0) {			
			$('page').set('html', Flickr.emptyHTML);
			$('page').removeClass('ajax-loading');
		}
		
		var ul = new Element('ul', {
			'id': 'photo_list',
			'class': 'clearfix',
			'styles': {
				opacity: '0'
			}
		});

		if(rsp.photos.photo) {			
			var photos = rsp.photos.photo;
			var total = photos.length;
			
			for(var i = 0; i < total; i++) {
				var li = new Element('li', {
					id: 'li' + i,
					events: {
						'click': function(args) {
							Flickr.goBig(this);
						},
						'mouseover': function(args) {
							this.tween('border-color', '#111');
							this.setStyle('cursor', 'pointer');
						},
						'mouseout': function(args) {
							this.tween('border-color', '#fff');
							this.setStyle('cursor', 'default');
						}
					}
				});
				
				var jsonData = new Element('textarea', {
					id: 'json' + i,
					styles: { display: 'none' },
					html: JSON.encode(photos[i])
				});
				
				var imgurl = this._buildImgUrl(photos[i], true);
				
				var img = new Asset.image(imgurl, {
					id: 'image' + i, 
					title: photos[i].title,
					alt: photos[i].title,
					onload: function(image) {
						if(image.id == 'image'+(total-1)) {
							$('page').removeClass('ajax-loading');
							ul.fade('in');
						}
					}
				});
				
				li.grab(img);
				li.grab(jsonData);
				ul.grab(li);
			}
		}
		
		$('page').grab(ul);
		
		if(this.isLightbox) {
			// display the last or first image in the list depending on direction of page
			if(this.prevPage > this.page) {
				this.goBig($(ul).getLast('li'));
			}
			else {
				this.goBig($(ul).getFirst('li'));
			}
		}
	},
	
	goBig: function(li) {
		if(!$(li)) return;
		
		if(!this.isLightbox) { // not already opened
			$('overlay-background').tween('opacity', 0.9).get('tween').chain(function() {
				$('overlay-background').tween('height', window.getScrollSize().y);
			});
			$('overlay').tween('opacity', 1);
		}
		
		this.currentImageLi = li;
		this.isLightbox = true;
		
		$('overlay-contents').tween('opacity', 0).get('tween').chain(function() {
			$('overlay-contents').set('html', '');
		
			var textarea = $(li).getElement('textarea');
			var jsonData = JSON.decode(textarea.value);
			var img = $(li).getElement('img');
			var imgUrl = $(img).getProperty('src').replace('_s.jpg', '_z.jpg');
			var newImg = new Asset.image(imgUrl, {
				alt: $(img).getProperty('title'),
				styles: {opacity: 0},
				onload: function(image) {
					var old = $('overlay-contents').getElement('img');
					var oldwidth = 0;
					var oldheight = 0;
					
					if(old) {
						oldwidth = old.width;
						oldheight = old.height;
						old.destroy();
					}
					
					$('overlay-contents').grab(image);
					$('overlay-contents').tween('opacity', 1);
					image.tween('opacity', 1);
					
					var width = image.width + $('overlay-contents').getStyle('border-width').toInt()*2;
					var height = image.height + $('overlay-contents').getStyle('border-width').toInt()*2;
					
					var tween_margin_top = new Fx.Tween($('overlay'));
					var tween_margin_left = new Fx.Tween($('overlay'));
					var tween_h = new Fx.Tween($('overlay'));
					var tween_w = new Fx.Tween($('overlay'));
					
					var top_margin = -1*Math.round(height/2);
					top_margin = top_margin < -300 ? -300 : top_margin;
					
					tween_margin_top.start('margin-top', top_margin);
					tween_margin_left.start('margin-left', -1*Math.round(width/2));
					tween_h.start('height', height);
					tween_w.start('width', width).chain(function() {
						$('overlay-info').setStyle('width', image.width);
					});
					
					// populate info
					$('overlay-title').set('html', jsonData.title);
					$('overlay-link').setProperty('href', Flickr._buildUrl(jsonData));
				}
			});
		});
	},
	
	close: function() {
		Flickr.currentImageLi = null;
		Flickr.isLightbox = false;
		$('overlay-background').tween('opacity', 0);
		$('overlay').tween('opacity', 0);
		$('overlay-contents').set('html', '');
	},
	
	go: function(direction) {
		if(direction == 'back' && this.page > 1) {
			var goto = this.page - 1;
		}
		else if(direction == 'forward' && this.page < this.pages) {
			var goto = this.page + 1;
		}
		else {
			return;
		}
		
		$('page').addClass('ajax-loading');
		
		if(goto == 1) {
			$('previous-page').addClass('disabled');
			if(this.pages > 1) {
				$('next-page').removeClass('disabled');
			}
		}
		else {
			$('previous-page').removeClass('disabled');
			if(goto == this.pages) {
				$('next-page').addClass('disabled');
			}
			else {
				$('next-page').removeClass('disabled');
			}
		}
		
		this.prevPage = this.page;
		
		var r = new Request.JSONP({
			url: FLICKR_REST_URL,
			callBackKey: 'jsonFlickrApi',
			data: {
				method: this.FLICKR_METHOD,
				format: 'json',
				api_key: this.FLICKR_API_KEY,
				page: goto,
				per_page: this.perPage,
				extras: 'owner_name',
				photoset_id: Flickr.photoset_id,
				user_id: Flickr.user_id
			}
		}).send();
	},
	
	_buildImgUrl: function(photo, isThumb) {
		var farm_id = photo.farm;
		var server_id = photo.server;
		var id = photo.id;
		var secret = photo.secret;
		var size = isThumb ? '_s' : '';
		var url = 'http://farm' + farm_id + '.static.flickr.com/' + server_id + '/' + id + '_' + secret + size + '.jpg';
		return url;
	},
	
	_buildUrl: function(photo) {
		//http://www.flickr.com/photos/rosemary/3612849691/
		var user = photo.owner;
		var id = photo.id;
		var url = 'http://www.flickr.com/photos/' + user + '/' + id + '/';
		return url;
	},
	
	switchBg: function(color) {
		$('main').tween('background-color', color);
		//Cookie.write(key, value[, options]);

		Cookie.write('background-color', color, {'duration':30});
	},
	
	traverseForward: function() {
		if(!this.isLightbox) {
			this.go('forward');
		}
		else if(this.currentImageLi) {
			var next = $(this.currentImageLi).getNext('li');
			if(!next) {
				this.go('forward');
			}
			else {
				this.goBig(next);
			}
		}
	},
	
	traverseBackward: function() {
		if(!this.isLightbox) {
			this.go('back');
		}
		else if(this.currentImageLi) {
			var prev = $(this.currentImageLi).getPrevious('li');
			if(!prev) {
				this.go('back');
			}
			else {
				this.goBig(prev);
			}
		}
	}
};

/**
 * The start of it all...
 */
window.addEvent('domready', function() {
	if($('heading')) {
		$('heading').setStyle('opacity', 0.4);
	}
	
	if(Flickr.disabled) {
		$('page').removeClass('ajax-loading');
		return;
	}

	var r = new Request.JSONP({
		url: FLICKR_REST_URL,
		callBackKey: 'jsonFlickrApi',
		data: {
			method: Flickr.FLICKR_METHOD,
			format: 'json',
			api_key: Flickr.FLICKR_API_KEY,
			per_page: 50,
			extras: 'owner_name',
			photoset_id: Flickr.photoset_id,
			user_id: Flickr.user_id
		}
	}).send();
	
	$('previous-page').addEvent('click', function() {
		Flickr.go('back');
	});
	$('next-page').addEvent('click', function() {
		Flickr.go('forward');
	});
	
	$('overlay').setStyles({ display: 'block', opacity: 0 });
	$('overlay').set('tween', {'duration':'short'});
	$('overlay-background').setStyles({ display: 'block', opacity: 0, height: window.getScrollSize().y });
	$('overlay-background').addEvent('click', Flickr.close);
	$('overlay-close').addEvent('click', Flickr.close);
	$('overlay-info').setStyle('opacity', 0.6);
	
	$('overlay-left').addEvent('click', Flickr.traverseBackward.bind(Flickr));
	$('overlay-right').addEvent('click', Flickr.traverseForward.bind(Flickr));

	var bgpref = Cookie.read('background-color');
	$('main').tween('background-color', $defined(bgpref) ? bgpref : '#544D5F');
	//$('main').setStyle('background-color', $defined(bgpref) ? bgpref : '#544D5F');
	
	var swatches = $$('a.swatch');
	swatches.each(function(el) {
		var color = $(el).id.replace('background-', '');
		el.addEvent('click', function() {
			Flickr.switchBg('#' + color);
		});
	});
});

window.addEvent('resize', function() {
	$('overlay-background').setStyle('height', window.getHeight());
	$('overlay-background').tween('height', window.getScrollSize().y);
});

window.addEvent('keyup', function(e) {
	if(Flickr.disabled) return;
	var code;
	
	if(window.event) code = e.keyCode;
	else if(e) code = e.code;
	
	if(e.key == 'right' || e.key == 'n' || code == 39 || code == 78) { // right arrow, n
		Flickr.traverseForward();
	}
	else if(e.key == 'left' || e.key == 'p' || code == 37 || code == 80) {	// left arrow, p
		Flickr.traverseBackward();
	}
	else if((e.key == 'esc' || e.key == 'x' || code == 27 || code == 88 || code == 67) && Flickr.isLightbox) {
		Flickr.close();
	}
	/*
	else if(e.key == 'b') {
		if($(document.body).getStyle('background-color') == '#ffffff')
			$('background-black').fireEvent('click');
		else
			$('background-white').fireEvent('click');
	}
	*/
});