BlogNav = new Class({
	Implements: [ Options ],

	options: {
		loadingimage: 'assets/images/loading.gif',
		linkFlag: 'blog-nav-ajax',
		navLinkClass: 'navlinkbox',
		navLinkHoverClass: 'navlinkboxhover',
		navLinkOnClass: 'navlinkboxhover',
		navPageName: 'start',
		curPage: 1,
		navUpdateHref: '',
		navClassName: 'blog-nav'
	},

	initialize: function(container, options) {
		this.container = $(container);
		this.setOptions(options);
	},

	navLinkHover: function(that) {
		that = $(that);
		if(!that || that.className == this.options.navLinkOnClass) return;
		else {
			that.className = this.options.navLinkHoverClass;
			if(!that.retrieve('_navlink_mouseout_function_flag')) {
				var cls = this.options.navLinkClass;
				that.addEvent('mouseout', function() {
					this.className = cls;
				});
				that.store('_navlink_mouseout_function_flag', 1);
			}
		}
	},

	navLinkClick: function(link) {
		link = $(link);
		if(!link) return;

		var href = link.href;
		if(!href) return;

		href += (href.indexOf('?') > -1) ? '&' : '?';
		href += this.options.linkFlag + '=1';

		this.container.setStyles({
			height: this.container.getHeight(),
			overflow: 'hidden'
		});

		var c = new Chain();
		c.chain(function() {
			new Fx.Tween(this.container, {
				duration: 300,
				onComplete: function() {
					c.callChain();
				}
			}).start('opacity', 0);

		}.bind(this)).chain(function(response) {
			this.container.empty();
			this.container.setStyle('opacity', 1);

			var img;
			with(img = new Element('img')) {
				src = this.options.loadingimage;
				setStyles({
					paddingTop: ( this.container.getHeight() / 2 - 20 ),
					margin: 'auto',
					display: 'block'
				});
				inject(this.container);
			};

			c.callChain();

		}.bind(this)).chain(function() {


			c.callChain();

		}.bind(this)).chain(function() {
			new Request({
				method: 'post',
				url: href,
				onComplete: function(response) {
					c.callChain(JSON.decode(response));
				}
			}).send();
		}).chain(function(response) {
			if( response ) {
				this.container.empty();
				this.container.setStyle('opacity', 0);

				var d = new Element('div');
				d.setStyles({

				});
				for( var i=0; i<response.length; ++i) {
					d.innerHTML += response[i];
				}
				d.inject( this.container );

				var container = this.container;

				new Fx.Morph(this.container, {
					duration: 300,
					onComplete: function() {
						c.callChain();
					}
	
				}).start({
					opacity: 1,
					height: d.getHeight()
				});

				// determine which page we're on now and update the nav
				var qs = href.substr(href.indexOf('?')+1).parseQueryString();
				this.options.curPage = parseInt(qs[this.options.navPageName]);				
				this.updateNav();

			} else {
				c.callChain();
			}

		}.bind(this)).chain(function() {


			
		}.bind(this)).chain(function() {
			


		}).callChain();




		return false;

	},

	updateNav: function() {
		if(!this.options.navUpdateHref) return;

		var href = this.options.navUpdateHref;
		href += (href.indexOf('?') > -1) ? '&' : '?';
		href += this.options.navPageName + '=' + this.options.curPage;


		var c = new Chain();
		c.chain(function() {
			new Request({
				method: 'post',
				url: href,
				onComplete: function(response) {
					c.callChain(response);
				}
			}).send();
		}).chain(function(response) {
			var lst = $$('.'+this.options.navClassName);
			for(var i=0; i<lst.length; ++i) {
				lst[i] = $(lst[i]);
				lst[i].empty();
				lst[i].innerHTML = response;
			}
		}.bind(this)).callChain();
	}

});





ExtendingBlogNav = new Class({
	Implements: [ Options ],

	options: {
		loadingimage: 'assets/images/loading.gif',
		linkFlag: 'blog-nav-ajax',
		navLinkClass: 'navlinkbox',
		navLinkHoverClass: 'navlinkboxhover',
		navLinkOnClass: 'navlinkboxhover',
		navPageName: 'start',
		curPage: 1,
		navUpdateHref: '',
		navClassName: 'blog-nav',
		navTotalPages: null
	},

	initialize: function(container, options) {
		this.container = $(container);
		this.setOptions(options);
	},

	navLinkHover: function(that) {
		that = $(that);
		if(!that || that.className == this.options.navLinkOnClass) return;
		else {
			that.className = this.options.navLinkHoverClass;
			if(!that.retrieve('_navlink_mouseout_function_flag')) {
				var cls = this.options.navLinkClass;
				that.addEvent('mouseout', function() {
					this.className = cls;
				});
				that.store('_navlink_mouseout_function_flag', 1);
			}
		}
	},

	navLinkClick: function(link) {
		link = $(link);
		if(!link) return;

		var href = link.href;
		if(!href) return;
		href += (href.indexOf('?') > -1) ? '&' : '?';
		href += this.options.linkFlag + '=1';

		this.container.setStyles({
			height: this.container.getHeight(),
			overflow: 'hidden'
		});


		document.body.scrollTo($(document.body).getScroll().x, $(document.body).getScroll().y-1);



		var c = new Chain();
		c.chain(function() {
			var img;
			with(img = new Element('img')) {
				src = this.options.loadingimage;
				setStyles({
					paddingTop: ( this.container.getHeight() / 2 - 20 ),
					margin: 'auto',
					display: 'block'
				});
				//inject(this.container);
			};

			c.callChain();
		}.bind(this)).chain(function() {

			new Request({
				method: 'post',
				url: href,
				onComplete: function(response) {
					c.callChain(JSON.decode(response));
				}
			}).send();
		}).chain(function(response) {
			if( response ) {
				var d = new Element('div');
				d.setStyles({

				});
				for( var i=0; i<response.length; ++i) {
					d.innerHTML += response[i];
				}
				d.inject( this.container );

				var container = this.container;

				new Fx.Morph(this.container, {
					duration: 300,
					onComplete: function() {
						new Fx.Scroll(window, {
							duration: 500
						}).toElement(d);
						c.callChain();
					}
	
				}).start({
					opacity: 1,
					height: container.getScrollHeight()
				});

				// determine which page we're on now and update the nav
				var href = link.href;
				href += (href.indexOf('?') > -1) ? '&' : '?';

				var h = href.substr(0, href.indexOf('?'));
				var qs = href.substr(href.indexOf('?')+1).parseQueryString();
				this.options.curPage = qs[this.options.navPageName].toInt();
				if(this.options.curPage >= this.options.navTotalPages) {
					$$('.blog-nav').each(function(el) {
						el.setStyle('display', 'none');
					});
				} else {
					qs[this.options.navPageName] = this.options.curPage + 1;
					var qstr = '';
					for(var k in qs) {
						if(k && qs[k]) qstr += '&' + escape(k) + '=' + escape(qs[k]);
					}
					link.href = h + '?' + qstr.substring(1);
				}

			} else {
				c.callChain();
			}



		}.bind(this)).chain(function() {


		}.bind(this)).chain(function() {



		}).callChain();

		return false;
	}
});

function test() {

	new Fx.Scroll(window, {
		duration: 500
	}).toElement('test');
}