var Electra = {
	// Constants
	CV_GRID: 3494,
	CV_LIST: 3495,
	
	LV_GRID: 3411,
	LV_LIST: 3404,
	
	INFO_ARTICLE: 3403,
	INFO_VIDEO: 2844,
	
	// State variables
	selected_tab: null,
	selected_view: null,
	
	initialize: function()
	{
		Electra.selected_view = "grid";
		Electra.showTab(0);
	},
	
	showTab: function(tab)
	{
		// Make every tab unselected
		$('el-top-tabs-right').childElements().each(function(element) {
			element.addClassName('el-top-tab');
			element.removeClassName('el-top-tab-selected');
		});
		
		// Set the selected tab
		var selected = $('el-tab-' + tab);
		selected.addClassName('el-top-tab-selected');
		selected.removeClassName('el-top-tab');
		
		// Determine which view to show
		if ( Electra.selected_view == "grid" ) // Grid view
		{
			Electra.gridView(tab);
		}
		else // List view
		{
			Electra.listView(tab);
		}
	},
	
	gridView: function(tab)
	{
		// Get the tab to show
		tab = ( tab != undefined ) ? tab : Electra.selected_tab;
		
		// Setup the content and block variables
		if ( tab == 0 ) // Corporate Video
		{
			var content = ".el-cv-grid";
			var b_id = Electra.CV_GRID;
		}
		else // Latest Video
		{
			var content = ".el-lv-grid";
			var b_id = Electra.LV_GRID;
		}
		
		// Set the object state
		Electra.selected_tab = tab;
		Electra.selected_view = "grid";
		
		// Show the required view
		Electra.showView(content, 'el-grid-button', b_id);
	},
	
	listView: function(tab)
	{
		// Get the tab to show
		tab = ( tab != undefined ) ? tab : Electra.selected_tab;
		
		// Setup the content and block variables
		if ( tab == 0 ) // Corporate Video
		{
			var content = ".el-cv-list";
			var b_id = Electra.CV_LIST;
		}
		else // Latest Video
		{
			var content = ".el-lv-list";
			var b_id = Electra.LV_LIST;
		}
		
		// Set the object state
		Electra.selected_tab = tab;
		Electra.selected_view = "list";
		
		// Show the required view
		Electra.showView(content, 'el-list-button', b_id);
	},
	
	showView: function(content, button, b_id)
	{
		// Get the content container
		var content_container = $('el-top-tab-contents');
		
		// Try to get the content if it exists
		var content = content_container.select(content)[0];
		
		if ( content ) // The content has already been loaded once
		{
			if ( content.visible() ) // The content is visible
			{
				return;
			}
			
			// Hide all the other contents
			Electra.hideContents();
			
			// Show the new content
			content.show();
		}
		else
		{
			// Show the AJAX loading screen
			Pox.showLoading(content_container);
			
			// Make the AJAX request to get the listing
			new Ajax.Request('/block.php?b_id=' + b_id, {
				onSuccess: Electra.contentsLoaded
			});
		}
		
		// Remove the selected styles from all the other buttons
		$('el-top-tabs-left').select('.el-tab-button-selected').each(function (element) {
			element.addClassName('el-tab-button');
			element.removeClassName('el-tab-button-selected');
		})
		
		// Get the new view type button
		var button = $(button);
		
		// Add the selected class to the button
		button.addClassName('el-tab-button-selected');
		button.removeClassName('el-tab-button');
		
		// Hide the info button
		$('el-tab-info').hide();
	},
	
	contentsLoaded: function(transport)
	{
		// Hide the existing contents
		Electra.hideContents();
		
		// Insert the new content into the bottom of the container
		$('el-top-tab-contents').insert({bottom: transport.responseText});
		
		// Hide the AJAX loading screen
		Pox.hideLoading($('el-top-tab-contents'));
	},
	
	hideContents: function()
	{
		// For each child of the content container, hide the content if it is not the AJAX loading screen or info view. Remove the info view
		$('el-top-tab-contents').childElements().each(function(element) {
			if ( !element.hasClassName('pox-bg') && !element.hasClassName('pox-box') && !element.hasClassName('el-top-info') ) // Not AJAX loading screen or info view
			{
				// Hide the element
				element.hide();
			}
			else if ( element.hasClassName('el-top-info') ) // Info view
			{
				// Remove the element
				element.remove();
			}
		});
	},
	
	showInfo: function(a_id)
	{
		// Remove the selected class from the buttons
		$('el-top-tabs-left').select('.el-tab-button-selected').each(function (element) {
			element.addClassName('el-tab-button');
			element.removeClassName('el-tab-button-selected');
		})
		
		// Get the info button
		var button = $('el-tab-info');
		
		// Add the selected class to the info button
		button.addClassName('el-tab-button-selected');
		button.removeClassName('el-tab-button');

		// Show the button
		button.show();
		
		// Get the article contents
		new Ajax.Request('/block.php?b_id=' + Electra.INFO_ARTICLE + '&a_id=' + a_id, {
			onSuccess: Electra.contentsLoaded
		});
		
		// Get the video
		new Ajax.Request('/block.php?b_id=' + Electra.INFO_VIDEO + '&a_id=' + a_id, {
			onSuccess: Electra.videoLoaded
		});
	},
	
	videoLoaded: function(transport)
	{
		// Update the video container with the new content
		$('el-top-video').update(transport.responseText);
	}
}