/**
 * System class
 * 
 * @author Dennis Robinson
 * @date   February 16, 2009
 * @breif  Handles all "operating system" functionality within the portfolio
 */
function System()
{
	/**
	 * OpenPage
	 * @brief  Creates and displays a page specified by pageID
	 * @access public
	 * @param  string pageID   The ID of the page to open
	 */
	this.OpenPage = function(pageID)
	{
		// Get a reference to the active page container
		var activePage = GetObject('activePage');

		// Retrieve the title and content of this page
		var title = GetObject('pages_' + pageID + '_title').innerHTML;
		var content = GetObject('pages_' + pageID + '_content').innerHTML;

		// Write the page into the active page container (overwriting the old one)
		activePage.innerHTML = GenerateBox(title, content);

		// Change the header image
		GetObject('header_image').src = ('images/headers/' + pageID + '.jpg');
	}

	/**
	 * OpenImage
	 * @brief  Opens the image viewer overlay
	 * @access public
	 * @param  string url           The url of the image to open
	 * @param  string description   The description of the image
	 */
	this.OpenImage = function(url, description)
	{
		// Get a handle to the image viewer
		var imageViewer = GetObject('image_viewer');
		var imageHolder = imageViewer.getElementsByTagName('div')[0];
		var imageDiv = imageHolder.getElementsByTagName('div')[1];
		var image = imageDiv.getElementsByTagName('img')[0];
		var imageDescription = imageHolder.getElementsByTagName('div')[2];

		// Hide the image
		image.style.display = 'none';
		
		// Resize the image div
		imageHolder.style.width = (322 + 'px');
		imageDiv.style.width = (320 + 'px');
		imageDiv.style.height = (240 + 'px');

		// Resize the image viewer
		imageViewer.style.height = (GetObject('page').offsetHeight + 'px');

		// Offset the image viewer
		imageViewer.getElementsByTagName('div')[0].style.marginTop = ((GetScrollPosition() + 10) + 'px');

		// Set the image description
		imageDescription.innerHTML = description;

		// Show the image viewer
		imageViewer.style.display = 'block';

		// Create an image object to load into
		var loadImage = new Image();

		// Set the onload function
		loadImage.onload = function(){
			var imageHolder = GetObject('image_viewer').getElementsByTagName('div')[0];
			var imageDiv = imageHolder.getElementsByTagName('div')[1];
			var image = imageDiv.getElementsByTagName('img')[0];

			// Adjust the image holder
			imageHolder.style.width = ((this.width + 2) + 'px');
			imageDiv.style.width = (this.width + 'px');
			imageDiv.style.height = (this.height + 'px');

			// Show the image
			image.src = this.src;
			image.style.display = '';
		};

		// Load the image
		loadImage.src = url;
	}

	/**
	 * CloseImage
	 * @brief  Closes the image viewer overlay
	 * @access public
	 */
	this.CloseImage = function()
	{
		// Get a handle to the image viewer
		var imageViewer = GetObject('image_viewer');

		// Hide the image viewer
		imageViewer.style.display = 'none';
	}

	/**
	 * WriteProjectBox
	 * @brief  Prints a project box from an array
	 * @access public
	 * @param  array data   The data to be used to create the project box
	 */
	this.WriteProjectBox = function(data)
	{
		document.write(
			GenerateProjectBox(
				data['title'],
				data['description'],
				data['contributions'],
				data['languages'],
				data['technologies'],
				data['platforms'],
				data['download'],
				data['webAddress'],
				data['screenshots']
			)
		);
	}

	/**
	 * GenerateBox
	 * @brief  Generates a standard "box" element
	 * @access private
	 * @param  string title    The title of the box
	 * @param  sting content   The HTML content of the box
	 */
	var GenerateBox = function(title, content)
	{
		return ''
			+ '<div class="box">'
			+ '	<div class="header">'
			+ '		<div class="left"></div>'
			+ '		<div class="right"></div>'
			+ '		' + title
			+ '	</div>'
			+ '	<div class="content">' + content + '</div>'
			+ '</div>';
	}

	/**
	 * GenerateProjectBox
	 * @brief  Generates a project "box" element
	 * @access private
	 * @param  string title            The title of the project
	 * @param  string description      The description of the project
	 * @param  string contributions    A list of contributions made to the project
	 * @param  string languages        The languages that the project uses
	 * @param  string technologies     The technologies that the project uses
	 * @param  string platforms        The platforms that the project uses (if any)
	 * @param  string download         Download link (optional)
	 * @param  string webAddress       The address of the website for this project (optional)
	 * @param  string screenshots      A list of available screenshots and their descriptions (optional)
	 */
	var GenerateProjectBox = function(title, description, contributions, languages, technologies, platforms, download, webAddress, screenshots)
	{
		var html = '';

		// Generate the project ID
		var project_id = title.toLowerCase().replace(/ /g, '_').replace(/:/, '');

		// Parse contributions
		var contributionsString = GenerateBulletedList(contributions);

		// Parse languages
		var languageString = GenerateLinkList(languages, window.languages);

		// Parse technologies
		var technologyString = GenerateLinkList(technologies, window.technologies);

		// Parse platforms
		var platformString = GenerateLinkList(platforms, window.platforms);



		// Opening tag
		html += '<div class="project">';

		/*
		// Icon
		html += '<img class="icon" src="images/icon_32_project.png" width="32" height="32" />';

		// Title (required)
		html += '<div class="title">' + title + '</div>';
		*/

		// Header
		html += '<img class="header" src="projects/' + project_id + '/header.jpg" width="689" height="100" />';

		// Languages and technologies (required)
		html += '<div class="languages"><b>Languages:</b> ' + languageString + '</div>';
		html += '<div class="technologies"><b>Technologies:</b> ' + technologyString + '</div>';

		// Platforms (optional)
		if (platformString != '')
		{
			html += '<div class="platforms"><b>Platforms:</b> ' + platformString + '</div>';
		}

		// Description (required)
		html += '<div class="description">';
		html += description;
		html += '<br /><br />';
		
		// Contributions
		if (contributions)
		{
			html += '<h2>What Part Did I Have?</h2>';
			html += contributionsString;
			html += '<br />';
		}

		// Screenshots
		if (screenshots)
		{
			html += GenerateGallery(project_id, screenshots);
		}

		// Video
/*
		html += '<h2>Video</h2>';
		html += 'Coming soon...<br />';
*/
		html += '</div>';

		// Bottom links
		if (webAddress != null)
		{
			// Website link
			html += '<div class="webAddress"><a href="http://' + webAddress + '" target="_blank">' + webAddress + '</a></div>';
		}
		else
		{
			// Download links
			html += '<div class="downloadProject">' + (download != null ? '<a href="' + download + '">Download Project</a>' : 'Download not available') + '</div>';
		}

		// Closing tag
		html += '</div>';

		// Return the box
		return html;
	}

	/**
	 * GenerateBulletedList
	 * @brief  Generates a bulleted list
	 * @access private
	 * @param  array items   The items to put in the list
	 * @return An HTML string containing bulleted list of the items
	 */
	var GenerateBulletedList = function(items)
	{
		var result = '';

		for (var i in items)
		{
			// Add the item
			result += ('&bull; ' + items[i] + '<br />');
		}

		// Return the compiled string
		return result;
	}

	/**
	 * GenerateLinkList
	 * @brief  Generates a list of links
	 * @access private
	 * @param  array items   The items to put in the list
	 * @param  array links   An array of links to use on the items list
	 * @return An HTML string containing a comma separated list of the items, linked appropriately
	 */
	var GenerateLinkList = function(items, links)
	{
		var result = '';

		for (var i in items)
		{
			// If there is already something in the string, add a comma
			if (result != '') result += ', ';

			// If a link is available use it, otherwise just put the string
			if (links[items[i]] != undefined)
			{
				result += ('<a href="' + links[items[i]] + '" target="_blank">' + items[i] + '</a>');
			}
			else
			{
				result += items[i];
			}
		}

		// Return the compiled string
		return result;
	}

	/**
	 * GenerateGallery
	 * @brief  Generates an image gallery for a project
	 * @access private
	 * @param  string project_id    The project_id of the project
	 * @param  array descriptions   The screenshot descriptions
	 * @return An HTML string containing the generated image gallery
	 */
	var GenerateGallery = function(project_id, descriptions)
	{
		var html = '';

		html += '<h2>Screenshots</h2>';
		html += '<div class="gallery">';

		// Add each screenshot
		for (var i = 0; i < descriptions.length; i++)
		{
			html += '<a href="#" onclick="system.OpenImage(\'projects/' + project_id + '/screenshots/' + project_id + (i + 1) + '.jpg\', \'' + descriptions[i] + '\'); return false;"><img src="projects/' + project_id + '/screenshots/' + project_id + (i + 1) + '_thumb.jpg" width="100" height="75"/></a>';
		}

		html += '</div>';

		return html;
	}
}