var SiteElement = Class.create({
	initialize: function(token, youtubeVideos)
	{
		this.token = token;
		this.loadedFlash = false;
		this.youtubeVideos = youtubeVideos || [];
		this.menuLink = $('menu').down('li.' + this.token + ' a');
	},
	show: function() { $(this.token).show(); },
	hide: function() { $(this.token).hide(); },
	activate: function()
	{
		if (this.menuLink) this.menuLink.addClassName('active');
		this.show();
		document.location.href = '#site='+this.token;
		this.loadedFlash || this.ensureFlashElements();
	},
	deactivate: function()
	{
		if (this.menuLink) this.menuLink.removeClassName('active');
		this.hide();
	},
	ensureFlashElements: function()
	{
		if ($(this.token).down('.videos .thumbnails')) { // Use thumbnails to display
			var thumbnailsElement = $(this.token).down('.videos .thumbnails');
			var playersElement = $(this.token).down('.videos .players');

			var self = this;
			var c = 0;
			this.youtubeVideos.each(function(video)
			{
				var attributes = { className: 'player' };
				if (c ++ > 0) attributes.style = 'display:none;';
				var playerElement = playersElement.appendChild(Builder.node('div', attributes,
					Builder.node('h3', video.name)));

				var thumbnailElement = thumbnailsElement.appendChild(Builder.node('a', { className: 'thumbnail', href: 'javascript:undefined' },
						Builder.node('img', { src: 'http://i2.ytimg.com/vi/' + video.id + '/default.jpg' })));
				var showVideo = function() { $$('#' + self.token + ' .videos .players .player').invoke('hide'); playerElement.show(); };

				thumbnailElement.observe('click', showVideo.bindAsEventListener(this));

				this.createYoutubePlayer(video, playerElement.appendChild(Builder.node('div')).identify());
			}, this);
		}
		else
		{
			this.youtubeVideos.each(function(video)
			{
				swfobject.embedSWF("http://www.youtube.com/v/" + video.id + "&fs=1", video.elementId, video.width || '425', video.height || '264', "8", null, null, null, null);		
			});
		}
		this.loadedFlash = true;
	},
	createYoutubePlayer: function(video, elementId) {
		swfobject.embedSWF("http://www.youtube.com/v/" + video.id + "&fs=1", elementId, '425', video.widescreen ? '264' : '344', "8", null, null, null, null);		
	}

});


var HomeElement = Class.create(SiteElement, {
	show: function($super)
	{
		$super();
		$(document.body).setStyle({ backgroundImage: $('header').getStyle('backgroundImage') });
	},
	hide: function($super)
	{
		$super();
		$(document.body).setStyle({ backgroundImage: 'none' });
	}
});

var TheyShouldHaveToldUsElement = Class.create(SiteElement, {
	show: function($super) {
		this.colorBefore = $(document.body).getStyle('background-color');
		$super();
		$(document.body).setStyle({ backgroundColor: '#f8ff42' });
	},
	hide: function($super) {
		$super();
		$(document.body).setStyle({ backgroundColor: this.colorBefore });
	}
});



var Sites = {
	defaultToken: 'home',
	activeElement: undefined,
	elements: [],
	activate: function(token)
	{
		if (this.activeElement) this.activeElement.deactivate();

		this.activeElement = this.elements.find(function(e) { return e.token == token; });
		if (!this.activeElement) this.activeElement = this.elements.find(function(e) { return e.token == this.defaultToken; }, this);

		this.activeElement.activate();
	},
	add: function(element) { this.elements.push(element); return element; },
	unsetAllActive: function() { $('menu').select('a').invoke('removeClassName', 'active'); }
};