// The goal here is to put the content of our box (box #1) in a new box (box #2), keep the size of the original box (box #1) 
// and have the new box (box #2) in an absolute position relative to the original box (box #1)
// Then, we should load the new content while hidding in a fashion way the original content (box #2). Once the content is 
// loaded, put it in a new box (box #3), resize box #1 to fit box #3 and show, still in a fahsion way, the new content (box #3).
// After this we put the new content in box #1 and destory box #2 and #3. Easy.
var loadcontent;
window.addEvent('domready', function() { loadcontent = new LoadContent; });

var LoadContent = new Class({
	initialize: function() {
		this.loading = false;
		this.nav();
	},
	
	start: function (url) {
		// IE bugfix
		if (url.search('.com')!=-1) url = url.split('.com')[1];
		// Load new content
		var obj = this;
		new Request.HTML({url: "/sync"+url, evalScripts: false, onSuccess: function (responseTree, responseElements, responseHTML, responseJavaScript) {
			obj.action(responseHTML, responseJavaScript, url);
		}}).send();
	},
	
	action: function(responseHTML, responseJavaScript, url) {
		if (!this.loading) {
			this.loading = true;
			// Destroy video if not in video section
			FlashEnd.run();
			// Google analytics
			if (!window.location.href.contains('labs')) pageTracker._trackPageview(url);
			box = $(document.body).getElement('div.content');
			// Get dimensions of box #1 (D'oh, the padding and border)
			var dimensions = box.getSize(), 
				top = (box.getStyle('padding-top').toInt()+box.getStyle('border-top-width').toInt()), 
				left = (box.getStyle('padding-left').toInt()+box.getStyle('border-left-width').toInt()), 
				bottom = (box.getStyle('padding-bottom').toInt()+box.getStyle('border-bottom-width').toInt()), 
				right = (box.getStyle('padding-right').toInt()+box.getStyle('border-right-width').toInt());
			dimensions.x = dimensions.x.toInt() - left - right;
			dimensions.y = dimensions.y.toInt() - top - bottom;
			// Set dimension of box #1 to the dimension of its content
			box.setStyles({'width': dimensions.x, 'height': dimensions.y, 'position': 'relative', 'overflow': 'hidden'});
			// Create box #2 width the content of box #1;
			var box2 = new Element('div', {'html': box.get('html'), 'styles': {'width': dimensions.x, 'position': 'absolute', 'background': 'none'}});
			// Erase content of box #1 and remove background
			box.set('html', '');
			// Inject box #2 in place of box #1 (so far you should have noticed absolutly nothing)	
			if (!$chk(box.getElement('option'))) box2.inject(box);
			// Create box #3
			var box3 = new Element('div', {'class': 'content', 'html': responseHTML, 'styles': {'position': 'absolute', 'padding': '0', 'left': 18, 'width': 924, 'background-image': 'none', 'background-color': 'transparent', 'opacity': 0}}).inject(box);
			// Cancel all anchors
			$each(box2.getElements('a').concat(box3.getElements('a')), function(anchor) {
				anchor.removeEvents().addEvent('click', function(e) { e.stop() });
			});
			// Give size of new content to box #1
			new Fx.Tween(box).start('height', box3.getSize().y);
			// Move box #2 and destory it after movement
			////// THIS IS NOT COMPLETE YOU NEED TO DESTROY THE BOX #2 OR ELSE YOU MIGHT ACCIDENTLY THE SCRIPT....the whole thing
			new Fx.Tween(box2, {onComplete: function() {
				box2.destroy();
				// Move box #3 and then move its content to box #1...and destroy it
				new Fx.Tween(box3, {onComplete: function() {
					// Change box3 styles and replace content
					box3.setStyles({
						'position': 'relative', 
						'padding': '', 
						'left': 0, 
						'height': box3.getSize().y, 
						'background-image': '', 
						'background-color': ''
					}).replaces(box);
					// Remove click cancel
					$each(box3.getElements('a'), function(anchor) { anchor.removeEvents(); });
					// Re-initialise
					loadcontent.nav(url);
					partners.run();
					FlashButtons.run(url);
					// User can load new content
					obj.loading = false;
				}}).start('opacity', 1);
			}}).start('opacity', 0);
		}
	},
	
	nav: function(url) {
		obj = this;
		// Check for anchor wiht loadcontent as its target
		if ($chk($(document.body).getElement('div.content').getElement('a[target=loadcontent]'))) {
			$each($(document.body).getElement('div.content').getElements('a[target=loadcontent]'), function(item) {
				item.addEvent('click', function(e) {
					e.stop();
					obj.focus(item.get('href'));
					obj.start(item.get('href'));
				});
			});
		}
	},
	
	focus: function(url) {
		if (!this.loading) {
			// IE bugfix
			if (url.search('.com')!=-1) url = url.split('.com')[1];
			// Unfocus current focused anchor
			if ($chk($(document.body).getElement('div.nav').getElement('a.focus')))
				$(document.body).getElement('div.nav').getElement('a.focus').removeClass('focus');
			// Focus new anchor
			$(document.body).getElement('div.nav').getElement('a[href=/'+url.split('/')[1]+'/]').addClass('focus');
		}
	}
});