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();
	}

});