var current_site_box = "";

function startup(){
	
	for(i=1; i<=8; i++){
		$('div[id=site_box_'+i+']').hide();
		$('div[id=site_box_'+i+']').click(function(event){
			var theID = $(this).attr('id');
			if(current_site_box != theID) {
				$('div[id=main_site_box] img').fadeOut(1100)
				$('#minor_text').fadeOut(1100)
				$('div[id=main_text] *').fadeOut(1100, function(){
					loadContent(theID);
					current_site_box = theID;
				});				
			}
		});
	}
	
	myFadeSiteBoxIn(1);
	
	$('div[id=contact_me]').click(function(event){
		window.location = "mailto:daviddukeuk@gmail.com";
	});
}
function myFadeSiteBoxIn(i){
	if(i<=8){
		$('div[id=site_box_'+i+']').fadeTo(200,0.1,function(){
			myFadeSiteBoxIn(i+1);
		}).fadeTo(600,1.0,function(){
			if(i == 4){
				loadContent("site_box_1");
				current_site_box = "site_box_1";
			}
		});
	}
	return true;
}
function loadContent(site_box){
	var showMinor = true;
	var newHTML = "";
	var image = "main_site_loading.jpg";
	//alert(site_box);	
	switch(site_box){
		default:
		case "site_box_1":
			image = "main_site_ph.jpg";
			newHTML += "<p>Client: <strong>Peace &amp; Harmony</strong>.<br />A new start-up business wanted a soothing website that portrayed their therapeutic  services. I produced a visually pleasing design, which has a great mix of visual imagery and useful information. Additionally, I updated their existing print media, to match their new look and feel.</p>";
			newHTML += "<p class=\"site_link\"><a href=\"http://www.4bit-media.co.uk/peaceharmony\">www.4bit-media.co.uk/peaceharmony</a></p>";		
			showMinor = false;
		break;
		case "site_box_2":
			image = "main_site_rr.jpg";
			newHTML += "<p>Client: <strong>Red Rose Lighting</strong>*.<br />They wanted to begin selling their products online in a convenient way with a customized experience. I took their current branding and added it to an e-commerce package, and produced a great shopping experience that can be maintained by the client.</p>";
			newHTML += "<p class=\"site_link\"><a href=\"http://www.homelightingsupplies.co.uk/\">www.HomeLightingSupplies.co.uk</a></p>";
		break;
		case "site_box_3":
			image = "main_site_gt.jpg";
			newHTML += "<p>Client: <strong>Glenthorne - Quaker Centre</strong>*.<br />This site went through a couple of major iterations, until I found a style that truly reflected the clients. A careful balance of the beautiful imagery of the house and surrounding area, and useful information.</p>";
			newHTML += "<p class=\"site_link\"><a href=\"http://www.glenthorne.org/\">www.Glenthorne.org</a></p>";
		break;
		case "site_box_4":
			image = "main_site_sl.jpg";
			newHTML += "<p>Client: <strong>Student Loans Company - Events</strong>*.<br />I was commissioned to create a small online registration and feedback system for their company events. As well as user-friendly forms, the submitted data from these forms needed to be displayed and exported for many purposes. The system also needed to integrate into the company's branding and main website.</p>";
			newHTML += "<p class=\"site_link\"><a href=\"http://www.events-slc.co.uk/\">www.Events-SLC.co.uk</a></p>";
		break;
		case "site_box_5":
			image = "main_site_chs.jpg";
			newHTML += "<p>Client: <strong>Abbey Coach House</strong>*.<br />This was a basic revamp of an outdated existing site. The client wanted the ability to edit and maintain the site herself, after previously having to make changes via the previous web designer. So we setup a simple CMS back-end and taught her how to use it effectively.</p>";
			newHTML += "<p class=\"site_link\"><a href=\"http://www.coachhousestaveley.co.uk/\">www.CoachHouseStaveley.co.uk</a></p>";
		break;
		case "site_box_6":
			image = "main_site_ps.jpg";
			newHTML += "<p>This was a (revamp) design for a potential client, however the project never came to fruition. I was rather proud of the design because instead of mimicking the outdated and bland style of similar mechanics' sites, I decided to design a vibrant and modern design, which also tried to maintain a professional look and feel.*</p>";
		break;
		case "site_box_7":
			image = "main_site_4b.jpg";
			newHTML += "<p>Client: <strong>4bit Media</strong>.<br />This design was made to be compact and to effectively display the work of the client. I knew that at the launch the site, the amount of work to display would be quite sparse, so the design had to function with minimal content and have the ability to grow over time.</p>";
			newHTML += "<p class=\"site_link\"><a href=\"http://4bit-media.co.uk/v3\">www.4bit-Media.co.uk/v3</a></p>";
			showMinor = false;
			//   
		break;
		case "site_box_8":
			image = "main_site_seo.jpg";
			newHTML += "<p>I* have done some Search Engine Optimization for a couple of businesses, to direct organic traffic to their sites. Each site had very different challenges: heavy competition, competing for search terms that have various other meanings, etc. I achieved our goal of reaching and remaining on the first page on Google.</p>";
			newHTML += "<p class=\"site_link\">3 Clients: &nbsp;\t&nbsp;<a href=\"http://www.turnerscott.co.uk/\">www.TurnerScott.co.uk</a>&nbsp;\t&nbsp;<a href=\"http://www.silkworm.co.uk/\">www.SilkWorm.co.uk</a>&nbsp;\t&nbsp;<a href=\"http://www.wsi-sign.co.uk/\">www.WSI-sign.co.uk</a></p>";
		break;
	}

	$('div[id=main_text]').html(newHTML);
	$('div[id=main_text] *').hide();
	
	$('div[id=main_site_box]').html('<img src="'+image+'" alt="Loading picture" width="616" height="350" />');
	$('div[id=main_site_box] img').hide();
	
	if(showMinor) $('#minor_text').fadeIn(1500)
	$('div[id=main_text] *').fadeIn(1100)
	$('div[id=main_site_box] img').fadeIn(1100);
	/** Made By David Duke **/
}