var tv;
Event.observe(window, 'load', function(){
	tv = new Tumview($('user-name').innerHTML);
	tv.set();
	var results = $('results');
	var photos = $('photos');
	var dim = Element.getDimensions(photos);
	var photos_width = dim.width;
	var photos_height = dim.height;
	var results_height = Element.getDimensions(results).height;

	var photo_count = $('photo-count');

	var ppl = parseInt(photos_width / 91);
	Event.observe(results, 'scroll', (function(){
		var scroll = results.scrollTop;
		var start = parseInt((scroll + 15) / 91) * ppl + 1;
		var end = parseInt((scroll + results_height) / 91) * ppl;
		var current_total = tv.getCurrentTotal();
		end = (end > current_total) ? current_total : end;
		if(!end)start = 0;

		photo_count.innerHTML = start + '-' + end;

		//tv.set();
		var self = arguments.callee;
		if(end > (current_total - ppl * 3) && !tv.isLast()){
			tv.set();
			setTimeout(self, 3000);
		}
		return arguments.callee;
	})());
	Event.observe($('remove'), 'click', function(){
		$('viewer-count').innerHTML = '0';
		$('viewer').innerHTML = '';
	});
	Event.observe(window, 'resize', function(){
		dim = Element.getDimensions(photos);
		photos_width = dim.width;
		photos_height = dim.height;
		results_height = Element.getDimensions(results).height;
		ppl = parseInt(photos_width / 91);
	});
	Event.observe(document, 'keydown', function(e){
		switch(/*e.charCode || */e.keyCode){
			case 33: case 38: case 75:
				tv.scrollUp();
				break;
			case 34: case 40: case 74: case 32:
				tv.scrollDown();
				break;
			default:
				return true;
		}
		Event.stop(e);
	});
});

var Tumview = Class.create();
Tumview.prototype = {
	user: null,
	page: 0,
	per: 50,
	last: false,
	head: null,
	photos: null,
	viewer: null,
	init: false,
	trans: null,
	current_total: 0,
	initialize: function(user){
		this.user = user;
		this.head = document.getElementsByTagName('head')[0];
		this.photos = $('photos');
		this.viewer = $('viewer');
		this.viewer_count = $('viewer-count');
		this.photo_count = $('photo-count');

		var trans = document.createElement('p');
		Element.addClassName(trans, 'trans');
		document.getElementsByTagName('body')[0].appendChild(trans);
		this.trans = trans;
	},
	appending: false,
	set: function(){
		if(this.last || this.appending)return false;
		this.appending = true;
		var start = this.page++ * this.per;
		var url = new Template(
			'http://#{user}.tumblr.com/api/read/json?num=#{num}&start=#{start}&type=photo&callback=tv._set'
		).evaluate({user: this.user, num: this.per, start: start});
		
		var script = document.createElement('script');
		script.src = url;
		script.type = 'text/javascript';
		script.charset = 'utf-8';

		this.head.appendChild(script);
	},
	_set: function(data){
		if(!data || typeof data != 'object' || !data.posts.length){
			this.last = true;
			this.appending = false;
			return false;
		}
		var self = this;
		var photos = this.photos;
		var viewer = this.viewer;
		var trans = this.trans;

		var length = data.posts.length;
		if(!this.init){
			this.total = data['posts-total'];
			$('photo-total').innerHTML = data['posts-total'];
			$('source').innerHTML = data['tumblelog']['title'];
			$('source').title = data['tumblelog']['description'].replace(/<[^>]+>/g, '').substr(0, 100);
			$('photo-count').innerHTML = '1-' + length;
			this.init = true;
			setTimeout(function(){
				new Ajax.Request('/get', {
					method: 'get',
					parameters: {'id': self.user}
				});
			}, 10 * 1000);
		}
		var str_img = 'img', str_75 = '75';
		if(length < this.per)this.last = true;
		this.current_total += length;

		data.posts.each(function(p){
			trans.innerHTML = p['photo-caption'].replace(/<[^>]+>/g, '');
			var caption = trans.innerHTML;

			var img = document.createElement(str_img);
			img.src = p['photo-url-75'];
			img.width = str_75;
			img.height = str_75;
			img.alt = p.id;
			img.title = caption;

			Event.observe(img, 'click', (function(p){
				return function(){
					Element.addClassName(img, 'viewed');
					self.view(p)
				};
			})(p));

			photos.appendChild(img);
		});
		this.appending = false;
	},
	view: function(p){
		var viewer = this.viewer;
		if($('id' + p.id)){
			viewer.insertBefore($('id' + p.id), viewer.firstChild);
			viewer.scrollTop = 0;
			return true;
		}
		var trans = this.trans;
		trans.innerHTML = p['photo-caption'].replace(/<[^>]+>/g, '');
		var caption = trans.innerHTML;

		var div = document.createElement('div');
		div.id = 'id' + p.id;
		Element.addClassName(div, 'view');

		var a = document.createElement('a');
		a.href = p.url;
		a.target = '_blank';

		var img = document.createElement('img');
		img.src = p['photo-url-500'];
		img.alt = caption;
		img.title = caption;

					
		var pp = document.createElement('div');
		pp.innerHTML = p['photo-caption'] || '';

		$A(pp.getElementsByTagName('a') || []).each(function(a){
			a.target = '_blank';
		});
		viewer.insertBefore(div, viewer.firstChild);
		div.appendChild(a);
		a.appendChild(img);
		div.appendChild(pp);
		viewer.scrollTop = 0;
		this.viewer_count.innerHTML = +this.viewer_count.innerHTML + 1;
	},
	getTotal: function(){
		return this.total;
	},
	getCurrentTotal: function(){
		return this.current_total;
	},
	isLast: function(){
		return this.last;
	},
	scrollDown: function(){
		var viewer = this.viewer;
		var nodes = viewer.childNodes;
		var scroll = viewer.scrollTop + 5;

		for(var i = 0, len = nodes.length; i < len; i++){
			var offset = nodes[i].offsetTop;
			if(scroll < offset){
				viewer.scrollTop = offset;
				break;
			}
		}
	},
	scrollUp: function(){
		var viewer = this.viewer;
		var nodes = viewer.childNodes;
		var scroll = viewer.scrollTop - 5;

		for(var i = nodes.length - 1; i >= 0; i--){
			var offset = nodes[i].offsetTop;
			if(scroll > offset){
				viewer.scrollTop = offset;
				break;
			}
		}
	}
}