/*
 * Define our PortfolioSite object
 */
function
PortfolioSite(title, thumbnail_image, fullsize_image, text, url)
{
	this.thumbnail_path = "/images/portfolio/thumbnails/";
	this.fullsize_path = "/images/portfolio/fullsize/";
	
	this.title = title;
	this.thumbnail_image = this.thumbnail_path + thumbnail_image;
	this.fullsize_image = this.fullsize_path + fullsize_image;
	this.text = text;
	this.url = url;
}


/*
 * Build our portflio sites array.  This is an array of PortfolioSites (see above)
 * and requires a title, image location for both the thumbnail and fullsize images,
 * and text
 */
var sites = new Array(
	new PortfolioSite(
		"Kelly\'s Hair and Nail Spa",
		"kellys_home.jpg",
		"kellys_home.jpg",
		"Kelly's Hair and Nail Spa needed a stylish website to promote their business, provide information about their products, and give customers an easy way to contact them. Angeles Crest designed and built this site from start to finish.",
		"http://kellyshairandnailspa.com"),
	new PortfolioSite(
		"S3 Investment Company",
		"s3_home.jpg",
		"s3_home.jpg",
		"S3 Investment Company needed a new website to provide shareholders and potential investors with frequently updated information.  In addition to the publicly-accessible portions of the website, a content management system was designed to allow site administrators to easily maintain a mailing list and manage website contents.  Angeles Crest designed and built this site from start to finish.",
		"http://s3investments.com"
		),
	new PortfolioSite(
		"Advanced Net Solutions Intranet",
		"ans_intranet.jpg",
		"ans_intranet.jpg",
		"Advanced Net Solutions wanted a quick, easy, and secure way for its technicians to be able to maintain client information, enter job sheets, clock in and out each day, and keep mileage information.  In addition, this custom-built web application can generate reports for month-end billing and can limit control to sensitive information on a per-employee basis."
	),
	new PortfolioSite(
		"Unico Mining",
		"unico_gallery.jpg",
		"unico_gallery.jpg",
		"In addition to major retrofits to their existing website to enhance back-end functionality, Angeles Crest designed and implemented this custom photo gallery to allow presentation of a large number of frequently-updated images.  No knowledge of image processing is required for site administrators as images can be uploaded in a variety of formats and are automatically resized as appropriate.  In addition, a thumbnail for each image is generated and automatically placed on the page.",
		"http://unicomining.com/news/othermedia.php"
	),
	new PortfolioSite(
		"Gemini Financial Communications",
		"gemini_home.jpg",
		"gemini_home.jpg",
		"Gemini Communications needed a new website that clearly and professionally presented the services they offer and to open a channel for effective communication with existing and potential clients.",
		"http://geminifc.com"
	),
	new PortfolioSite(
		"Easy-Arch",
		"easyarch_specs.jpg",
		"easyarch_specs.jpg",
		"With their wide array of products, customers' need for detailed specifications, and dealer network that includes thousands of companies across the country, Easy-Arch needed to make it easier for customers to get information.  Angeles Crest built this website to allow customers to quickly access a very wide array of information without getting confused.  This included information about the company itself, frequently asked questions, recent news, specifications, and a dealer locator function that automatically finds all of the dealers near the website viewer's location.</p><p>This greatly reduced Easy-Arch's support costs and increased customer satisfaction as customers no longer needed to call to get information.  It also gave Easy-Arch another venue to market in and helped to grow new sales.",
		"http://easy-arch.com/specs.php"
	),
	new PortfolioSite(
		"ArchwayPro.com",
		"archway_home.jpg",
		"archway_home.jpg",
		"ArchwayPro, an internet distributor of Easy-Arch arches, needed an affordable e-commerce store that allowed customers to place secure orders using credit cards and to integrate with their existing system.",
		"http://archwaypro.com"
	),
	new PortfolioSite(
		"MarketVoice Communications",
		"mvc.jpg",
		"mvc.jpg",
		"MarketVoice Communications needed a simple website built quickly to coincide with the announcement of their services.  Angeles Crest delivered the website ahead of schedule.",
		"http://marketvoicecommunications.com"
	)
);
	
	
/*
 * Function to automatically generate all of the thumbnails
 * from the sites array.
 */
function populateThumbnails()
{
	for(i = 0; i < sites.length; i++) {
		$("#portfolio_thumbnail_container").append(
			"<div class='portfolio_thumbnail' onClick='setFullsizeContent("+ i + ")'> \
			 	<img src='" + sites[i].thumbnail_image + "' alt=" + sites[i].title + "/> \
			 </div>"
		);
	}
}

/*
 * setFullsizeContent is the function called when a
 * portfolio site is selected.  It is also called upon page
 * load to load the initial portfolio site.  It is responsible
 * for calling the helper functions, below.
 */
function setFullsizeContent(i)
{
	_hideFullsizeContent(i);
}

function _hideFullsizeContent(i)
{
	$("#portfolio_fullsize_container").fadeOut("fast", function() {_replaceFullsizeContent(i)});
}

function _replaceFullsizeContent(i)
{
		$("#portfolio_fullsize_container").empty();
		$("#portfolio_fullsize_container").append(
			"<h2>" + sites[i].title + "</h2>" + 
			"<img src='" + sites[i].fullsize_image + "' class='portfolio_fullsize_image'>" + 
			"<p>" + sites[i].text + "</p>"
		);
		
		if(sites[i].url) {
			$("#portfolio_fullsize_container .portfolio_fullsize_image").wrap(
				"<a href='" + sites[i].url + "' target='_blank'></a>");
				
			$("#portfolio_fullsize_container ").append(
				"<p class='visit_site'>" + 
				"<a href='" + sites[i].url + "' target='_blank'>" +
				"(Visit the site)" +
				"</a>" +
				"</p>"
			);
		}

		_showFullsizeContent(i);
}

function _showFullsizeContent(i)
{
	var tempImage = new Image();
	tempImage.src = sites[i].fullsize_image;
	
	if(tempImage.complete != false) {
		$("#portfolio_fullsize_container").fadeIn("slow");
	}
	else {
		setTimeout(function() {
			_showFullsizeContent(i);
		}, 100);
	}

}


/*
 * Functions used to preload dynamic content
 */	
function preloadFullsizeContent()
{
	for(i = 0; i < sites.length; i++) {
		var tempImage = new Image();
		tempImage.src = sites[i].fullsize_image;
	}
}

$(document).ready(function() {
	/* Build our portfolio viewer */
	populateThumbnails();
					
	/* Apply stylistic effects to thumbnails when mouseOver'd or clicked */
	$(".portfolio_thumbnail").hover(
		function() {
			$(this).addClass("portfolio_thumbnail_hovered");			
		},
		function() {
			$(this).removeClass("portfolio_thumbnail_hovered");			
		}
	);
	
	$(".portfolio_thumbnail").click(function() {
		$(".portfolio_thumbnail").removeClass("portfolio_thumbnail_selected");
		$(this).addClass("portfolio_thumbnail_selected");
	});
	
	
	/* Automatically select the first thumbnail */
	$(".portfolio_thumbnail:first-child").click();
	
	/* Preload anything that needs preloaded */
	preloadFullsizeContent();
})