function createTabs(containerID, tabs)
{
	var html = '';
	for ( var x = 0; x < tabs.length; x++)
	{
		if(tabs[x] == undefined)
			continue;
		//alert("tabs["+ x +"] = "+ tabs[x]);
		var tabID = tabs[x]['id'];
		var tabName = tabs[x]['text'];
		html += '<span class="unselected" id="tab-' + tabID + '" onclick="selectTab(menuTabs, \'' + tabID + '\')">';
		html += '<a href="#' + tabID + '">' + tabName + '</a><div class="right-roundess"> &nbsp; </div>'
		html += '</span>';
	}
	insertHtml(containerID, html);
}

function createList(anArray)
{
	var html = '<ul class="bulletList">';
	for ( var x = 0; x < anArray.length; x++)
	{
		html += '<li type="circle">' + anArray[x] + '</li>';
	}
	html += '</ul>';
	return html;
}

function dataFormat(containerID, data)
{
	var html = '';
	//alert("Container: "+ containerID +" Data Length: "+ data.length);
	for ( var x = 0; x < data.length; x++)
	{
		if(data[x] == undefined)
			contunue;
		html += '<div class="globalDiv">';
		html += '<h3>' + data[x]['title'] + '</h3>';
		var concepts = data[x]['concepts'];
		if (concepts && concepts.length > 0)
		{
			html += '<h4>Concepts</h4>';
			html += createList(concepts);
		}

		var projects = data[x]['projects'];
		if (projects && projects.length > 0)
		{
			html += '<h4>Projects</h4>';
			html += createList(projects);
		}
		html += '</div>';
		// var projects = data[x]['projects'];
	}
	insertHtml(containerID, html);
}

function experienceDataFormat(containerID, data, index)
{
	var html = '';
	var tasks = data[index]['tasks'];
	if (tasks && tasks.length > 0)
	{
		html += '<h4>Responsibilities</h4>';
		html += createList(tasks);
	}

	var projects = data[index]['projects'];
	if (projects && projects.length > 0)
	{
		html += '<h4>Projects</h4>';
		html += createList(projects);
	}
	html += '</div>';

	insertHtml(containerID, html);
}


function faqsFormat(containerID, data)
{
	var html = '<h1>Frequently Asked Questions</h1>';
	for(var i = 0; i < data.length; i++)
	{
		html += '<div class="globalDiv14">';
		html += data[i]['q'] +'<br/>';
		html += data[i]['a'];
		html += '</div>';
	}
	insertHtml(containerID, html);
}


function echo(text)
{
	var console = console;
	if (console === "undefined")
		alert(text);
	else
		console.log(text);
}

function fillContactInfo()
{
	$('#contact-name').html(decode64(contactInfo['name']));
	$('#contact-email').html(decode64(contactInfo['email']));
	$('#contact-phone').html(decode64(contactInfo['phone']));
	$('#contact-address').html(decode64(contactInfo['address']));
}

function getObject(id)
{
	return document.getElementById(id);
}

function idHide(id)
{
	if (getObject(id))
		document.getElementById(id).style.display = 'none';
}

function idShow(id)
{
	if (document.getElementById(id))
		document.getElementById(id).style.display = '';
}

function idToggle(id)
{
	if (document.getElementById(id).style.display == 'none')
		idShow(id);
	else
		idHide(id);
}

function imagesFormat(containerID, data)
{
	var html = '';
	for ( var x = 0; x < data.length; x++)
	{
		html += '<div class="globalDiv">';
		html += '<h1>' + data[x]['title'] + '</h1>';
		var images = data[x]['data'];
		for ( var j = 0; j < images.length; j++)
		{
			var image = images[j];
			html += '<div class="image-container">'
				+		'<a class="image-option" href="graphic-showcase/'+ data[x]['folder'] +'/'+ image['filename'] +'" title="View larger version of the image">Larger</a>';
			if(image['code'])
				html +=	'<a class="image-option" href="'+ image['code'] +'" title="HTML/CSS vesion of the layout">Code</a>'
			html +=		'<a class="link" href="graphic-showcase/'+ data[x]['folder'] +'/'+ image['filename'] +'" title="'+ image['title'] +'">'
				+			'<img src="graphic-showcase/'+ data[x]['folder'] +'/thumb-'+ image['filename'] +'" alt="'+ image['title'] +'" />'
				+		'</a>'
				+		'<h3>'+ image['title'] +'</h3>'
				+		image['description'] 
				+	'</div>';
		}
		html += '<br class="clear" /></div>'
			+	'<br class="clear" />';
		// var projects = data[x]['projects'];
	}
	insertHtml(containerID, html);
}

function insertHtml(id, html)
{
	if (getObject(id))
	{
		var currentHtml = document.getElementById(id).innerHTML;
		document.getElementById(id).innerHTML = currentHtml + html;
	}
}

function personalDataFormat(containerID, data)
{
	var html = '';
	for(var i in data)
	{
		var experience = data[i];
		html += '<h1>'+ experience.title +'</h1>';
		html += '<h2>'+ (experience.url ? '<a href="'+ experience.url +'" target="_blank">' : '')+ experience.employer + (experience.url ? '</a>' : '')+'</h2>';
		var responsibilities = experience['responsibilities'];
		if (responsibilities && responsibilities.length > 0)
		{
			html += '<div class="globalDiv">';
			html += '<h3>Responsibilities</h3>';
			html += createList(responsibilities);
			html += '</div>';
		}
		var accomplishments = experience['accomplishments'];
		//echo( accomplishments['HtmlCSS']);
		if (accomplishments)
		{
			html += '<div class="globalDiv">';
			html += '<h3>Accomplishments</h3>';
			for(var j in accomplishments)
			{
				html += '<h4>'+ j +'</h4>';
				html += createList(accomplishments[j]);
			}
			html += '</div>';
		}
	}
	
	insertHtml(containerID, html);
}

function projectsDataFormat(containerID, data)
{
	var html = '';
	for(var i in data)
	{
		var category = data[i];
		html += '<h1>'+ category.title +'</h1>';
		var projects = category['projects'];
		for(var j in projects)
		{
			var project = projects[j];
			html += '<div class="globalDiv">';			
			html += '<h3>'+ project.title +'</h3>';
			html += '<div>';
			if(project.source )
				html +=	'<a class="code-option" href="'+ project.source +'" title="Sourec Code">Source Code</a>'
			if(project.demo )
				html +=	'<a class="code-option" href="'+ project.demo +'" title="Sourec Code">Demo</a>'
			html += '</div>';
			
			var features = project['features'];
			html += '<h4>Features</h4>';
			html += createList(features);
			
			var controls = project['controls'];
			if (controls)
			{
				html += '<h4>Controls</h4>';
				html += createList(controls);
			}
			
			var images = project['images'];
			if (images)
			{/*
				html +=	'<a class="link" href="projects/'+ data[x]['folder'] +'/'+ image['filename'] +'" title="'+ image['title'] +'">'
						+	'<img src="projects/'+ data[x]['folder'] +'/thumb-'+ image['filename'] +'" alt="'+ image['title'] +'" />'
						+'</a>';*/
			}
			
			html += '</div>';
		}
	}
	
	insertHtml(containerID, html);
}

function setClass(id, cssclass)
{
	if (document.getElementById(id) != null)
	{
		document.getElementById(id).className = cssclass;
	}
}

function selectTab(tabs, choice)
{
	for ( var x = 0; x < tabs.length; x++)
	{
		if(tabs[x] == undefined)
			continue;
		if (tabs[x]['id'] != choice)
		{
			var menuID = 'tab-' + tabs[x]['id'];
			var contentID = 'content-' + tabs[x]['id'];
			setClass(menuID, 'unselected');
			$('#' + contentID).slideUp("slow");
			// idHide(contentID);
			// echo("unselect: "+ menuID +" "+ contentID);
		}
		else
		{
			var menuID = 'tab-' + choice;
			var contentID = 'content-' + choice;
			setClass(menuID, 'selected');
			$('#' + contentID).slideDown("slow");
			// idShow(contentID);;
			// echo("Select: "+ menuID +" "+ contentID);
		}
	}
}

function showcase(selectTab, imageSrc)
{
	$('.showcase-tabs div.selected').removeClass("selected").addClass("unselected");
	$('#' + selectTab).removeClass("unselected").addClass("selected");
	oImg = $('.showcase-image img');//.attr('src', imageSrc);
	oImg.animate( {
		opacity : .5
	}, 1000, '', function()
	{
		oImg.attr('src', imageSrc);
		oImg.animate( {
			opacity : 1
		}, 1000);
	});
}

function tableFormat(containerID, data)
{
	var currentYear = 2010;
	var html = '';
	for ( var x = 0; x < data.length; x++)
	{
		html += '<div class="table-title">'
					+'<div class="right-corner"></div>'
					+'<div class="left-corner"></div>'
					+'<div class="data">' + data[x]['title'] + '</div>'
					+'</div>';
		for ( var j = 0; j < data[x]['data'].length; j++)
		{
			if(j == 0)
			{
				html += '<div class="title-header">'
							+'<div class="td-data forty center">'+ data[x]['columns'][0]							                                                          
								+'<div class="separator"></div>'
							+'</div>'
							+'<div class="td-data forty center">'+ data[x]['columns'][1]							                                                          
								+'<div class="separator"></div>'
							+'</div>'
							+'<div class="td-data twenty center">'+ data[x]['columns'][2]						                                                          
								+'<div class="separator"></div>'
							+'</div>'
						+'</div>';
			}
			else
			{
				html += '<hr class="table-hr"/>';
			}
			
			if(data[x]['data'][j]['startingYear'] > 0)
			{
				experienceAmount = (currentYear - data[x]['data'][j]['startingYear']) + 1;
				experienceAmount += " &nbsp; (Since "+ data[x]['data'][j]['startingYear'] +")";
			}
			else
				experienceAmount = data[x]['data'][j]['startingYear'];
			html += '<div class="table-data">'
				+'<div class="td-data forty center td-light">'+ data[x]['data'][j]['title']							                                                          
					+'<div class="separator"></div>'
				+'</div>'
				+'<div class="td-data forty center td-dark">'+ data[x]['data'][j]['level']							                                                          
					+'<div class="separator"></div>'
				+'</div>'
				+'<div class="td-data twenty center td-light">'+ experienceAmount							                                                          
					+'<div class="separator"></div>'
				+'</div>'
			+'</div>';
		}
		html += '<div class="footer-mini">'
					+'<div class="right-corner"></div>'
					+'<div class="left-corner"></div>'
					+'<div class="data"> &nbsp; </div>'
					+'</div><br />';
	}
	insertHtml(containerID, html);
}