$(document).ready(function() {

	//replace function to fix urlencode
	function myReplace(str) {
		if (str) {
			return str.replace(/&/g, "%26");
		} else {
		 	return str;
		}
	}

	//init
	function init() {
		clearPage();
		//top nav
		$("#logo_control_button").click(function() {
			home();
		});
		$("#home_control_button").click(function() {
			home();
		});
		$("#home_control_button").bind("mouseenter", function(event) {
			$("#home_img_src").attr('src', 'img/home_over.png');
		});
		$("#home_control_button").bind("mouseleave", function(event) {
			$("#home_img_src").attr('src', 'img/spacer.gif');
		});
		$("#client_control_button").click(function() {
			client();
		});
		$("#client_control_button").bind("mouseenter", function(event) {
			$("#client_img_src").attr('src', 'img/client_over.png');
		});
		$("#client_control_button").bind("mouseleave", function(event) {
			$("#client_img_src").attr('src', 'img/spacer.gif');
		});
		$("#news_control_button").click(function() {
			news();
		});
		$("#news_control_button").bind("mouseenter", function(event) {
			$("#news_img_src").attr('src', 'img/news_over.png');
		});
		$("#news_control_button").bind("mouseleave", function(event) {
			$("#news_img_src").attr('src', 'img/spacer.gif');
		});
		$("#contactus_control_button").click(function() {
			contactus();
		});
		$("#contactus_control_button").bind("mouseenter", function(event) {
			$("#contactus_img_src").attr('src', 'img/contact_over.png');
		});
		$("#contactus_control_button").bind("mouseleave", function(event) {
			$("#contactus_img_src").attr('src', 'img/spacer.gif');
		});
		//bottom nav
		$("#bn1_control_button").click(function() {
			whatwedo();
		});
		$("#bn1_control_button").bind("mouseenter", function(event) {
			$("#bn1_img_src").attr('src', 'img/whatwedo_over.png');
		});
		$("#bn1_control_button").bind("mouseleave", function(event) {
			$("#bn1_img_src").attr('src', 'img/spacer.gif');
		});
		$("#bn2_control_button").click(function() {
			ourwork();
		});
		$("#bn2_control_button").bind("mouseenter", function(event) {
			$("#bn2_img_src").attr('src', 'img/ourwork_over.png');
		});
		$("#bn2_control_button").bind("mouseleave", function(event) {
			$("#bn2_img_src").attr('src', 'img/spacer.gif');
		});
		$("#bn3_control_button").click(function() {
			sayhello();
		});
		$("#bn3_control_button").bind("mouseenter", function(event) {
			$("#bn3_img_src").attr('src', 'img/sayhello_over.png');
		});
		$("#bn3_control_button").bind("mouseleave", function(event) {
			$("#bn3_img_src").attr('src', 'img/spacer.gif');
		});
		var d = new Date();
		$("#footer_left").text("Gadgetmedia Ltd "+d.getFullYear()+", All Rights Reserved");
		$("#footer_right").text("+44 207 099 7193");
		Cufon.refresh();
	}

	//home
	function home(){
		//Clear everything
		clearPage();
		$("#main_panel_img_src").attr('src', 'img/sunflower.jpg');
		$("#main_panel_title").text("Digital Innovation");
		$("#main_panel_subtitle").text("Gadgetmedia is modern day communication facilitator...");
		var homeHTML = "";
		homeHTML += "Whatever that means?<br><br>I guess we mean we do stuff on the Internet. To be honest its actually quite hard to sum up what we do in a neat sounding paragraph. We put our hand to so many different aspects of the internet.";
		homeHTML += "Whether its delivering a website, a Facebook app, an iPhone/iPad app or something completely different that uses web technologies.";
		homeHTML += "<br><br>Whatever the project is we pride ourselves in being able to take it on and excell in delivering it.";
		homeHTML += "<br><br>Why not give us a call to discuss if we can help you.";
		homeHTML += "<br><br>In addition to taking on projects we also have a few products that can be licensed, be sure to check them out in 'Our Work'.";
		$("#main_panel_body").html(homeHTML);
		Cufon.refresh();
	}

	//client
	function client(){
		//Clear everything
		clearPage();
		Cufon.refresh();
		$("#main_panel_img_src").attr('src', 'img/clientzone.png');
		$("#main_panel_title").text("Client Zone");
		$("#main_panel_subtitle").text("All your after sales needs");
		$("#main_panel_body").html("If you require some support for something we have delivered, please submit a support ticket - <a class=\"support_link\" href=\"#\" onClick=\"Zenbox.render(); return false;\" alt=\"Click for support\">Contact Support</a><br><br>We will get back to you ASAP (we aim to respond in 4 hours).<br><br>If it's really urgent though, please give us a call.");
		Cufon.refresh();
	}
	
	//news
	function news(){
		//Clear everything
		clearPage();
		$("#main_panel_title").text("News");
		$("#main_panel_subtitle").text("By the power of twitter, we bring you some bite-sized news...");
		$("#main_panel_img_src").attr('src', 'img/twitter.jpg');
		loadTwitter()
		Cufon.refresh();
	}
	
	function loadTwitter(){
		//clear twitterfeed div
		$("#main_panel_body").html("Loading...");
		$.getJSON("http://twitter.com/status/user_timeline/gadgetmedia.json?callback=?",processTwitter);
	}

	//Process the twitter feed
	function processTwitter(json){
		twitterHTML = "";
		//"<span class=\"gadgetmedia_twitter_date\"><br>"+json[x]["created_at"]+"</span>
		for (var x=0;x<4;x++) {
			if(json[x]){
				twitterHTML += json[x]["text"]+"<br><br>"
			}
		}
		$("#main_panel_body").html(twitterHTML);
		Cufon.refresh();
	}	
	
	//whatwedo
	function whatwedo(){
		//Clear everything
		clearPage();
		$("#main_panel_title").text("What We Do");
		$("#main_panel_subtitle").text("Our main business is the art of 'communication'");
		$("#main_panel_img_src").attr('src', 'img/whatwedo.png');
		var whatwedoHTML = "";
		whatwedoHTML += "These days most communication is carried out via the internet, which is handy as we specialise in that."; 
		whatwedoHTML += "We utilise the latest technologies available and put them to use at providing the desired expereince to the target audience.";
		whatwedoHTML += "We'll take on pretty much any task, whether it be an intuitive frontend experience or a complex backend build.";
		whatwedoHTML += "We're not too fusy about languages or platforms, although given the choice we would go with the open source approach.";
		whatwedoHTML += "<br><br>Heres a list of the type of things we do:";
		whatwedoHTML += "<br><br>";
		whatwedoHTML += "Web sites<br>";
		whatwedoHTML += "eCommerce<br>";
		whatwedoHTML += "Widgets<br>";
		whatwedoHTML += "Facebook Apps<br>";
		whatwedoHTML += "iPhone/iPad Apps<br>";
		$("#main_panel_body").html(whatwedoHTML);
		Cufon.refresh();
	}
	
	//sayhello
	function sayhello(){
		//Clear everything
		clearPage();
		$("#main_panel_title").text("Say Hello");
		$("#main_panel_subtitle").text("Use this form to pop us a quick message, nothing too rude though please!");
		var helloform = "<form><div id=\"hello_form_labels\">Name:<br>Email:<br>Message:</div><div id=\"hello_form_input\"><input id=\"name\" name=\"name\" size=\"30\"><br><input id=\"email\" name=\"email\" size=\"40\"><br><textarea id=\"message\" name=\"message\" cols=\"50\" rows=\"10\"></textarea></div>";
		helloform += "<div id=\"hello_form_send\"><a href=\"#\" class=\"hello_send\" id=\"hello_send_btn\">Send</a></div>";
		$("#main_panel_body").html(helloform);
		$("#hello_send_btn").unbind("click");
		//bind clicks
		$("#hello_send_btn").click(function() {
			$.getJSON("getjson.php?action=sendEmail&name="+myReplace($("#name").val())+"&email="+myReplace($("#email").val())+"&message="+myReplace($("#message").val()),processEmailSend);
		});
		$("#main_panel_img_src").attr('src', 'img/sayhello.png');
		Cufon.refresh();
	}
	
	//processEmailSend
	function processEmailSend(json){
		$("#main_panel_body").html("Thank you for sending us a message<br><br>If its interesting we'll get back to you soon.");
		Cufon.refresh();
	}
	
	//contactus
	function contactus(){
		//Clear everything
		clearPage();
		$("#main_panel_title").text("Contact Us");
		$("#main_panel_subtitle").html("If you want to get in touch, use one of the following:");
		$("#main_panel_body").html("Address:<br>Gadgetmedia<br>112 Clerkenwell Rd<br>London<br>EC1M 5SA<br><br>Tel: +44 207 099 7193<br>Email: <a class=\"email_link\" href=\"mailto:hello@gadgetmedia.co.uk\">hello@gadgetmedia.co.uk</a><br><br>...or just click 'Say Hello' below!");
		$("#main_panel_map").html("<iframe width=\"425\" height=\"350\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://www.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=gadgetmedia&amp;sll=51.458058,-0.131321&amp;sspn=0.011993,0.031135&amp;ie=UTF8&amp;hq=gadgetmedia&amp;hnear=&amp;ll=51.530319,-0.100422&amp;spn=0.007557,0.018325&amp;z=14&amp;iwloc=A&amp;cid=14034754297103581898&amp;output=embed\"></iframe>");
		Cufon.refresh();
	}
	
	//
	function ourwork(){
		//Clear everything
		clearPage();
		//hide main body, we aint using that
		$("#main_panel_body").hide();
		//init light box
    	$("#main_panel_title").text("Our Work");
		$("#main_panel_subtitle").text("Here's a selection of recent projects and our products, feel free to get in contact to discuss them:");
		if ($("#gallery").html() == "") {
			galleryHTML = "";
			galleryHTML += "<div id=\"gallery_p1\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p1_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">Virtual Freezer</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p1_btn_link\" href=\"img/portfolio/vf1.jpg\" rel=\"prettyPhoto[pp_1]\" title=\"Project: Virtual Freezer eCommerce site | Client: Agilent\"><img src=\"img/portfolio/thumbnails/vf.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p1_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/vf2.jpg\" rel=\"prettyPhoto[pp_1]\" title=\"The task was to move their sales online and replace physical freezers onsite.\"></a>";
				galleryHTML += "<a href=\"img/portfolio/vf3.jpg\" rel=\"prettyPhoto[pp_1]\" title=\"We even created a nice animation to help explain it all.\"></a>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p2\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p2_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">Strictly Come Dancing</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p2_btn_link\" href=\"img/portfolio/scd1.jpg\" rel=\"prettyPhoto[pp_2]\" title=\"Project: Strictly Come Dancing website | Client: BBC\"><img src=\"img/portfolio/thumbnails/scd.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p2_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/scd2.jpg\" rel=\"prettyPhoto[pp_2]\" title=\"Working with our friends Do Tank, we built a great site to accompany the new magazine for the show.\"></a>";
			galleryHTML += "</div>";		
			galleryHTML += "<div id=\"gallery_p3\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p3_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">X Factor</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p3_btn_link\" href=\"img/portfolio/xf1.jpg\" rel=\"prettyPhoto[pp_3]\" title=\"Project: X Factor Facebook app | Client: Freemantle\"><img src=\"img/portfolio/thumbnails/xf.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p3_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/xf2.jpg\" rel=\"prettyPhoto[pp_3]\" title=\"We created a great fun app to help promote some buzz for the latest series of X Factor. It had over 40,000 users!\"></a>";
			galleryHTML += "</div>";		
			galleryHTML += "<div id=\"gallery_p4\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p4_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">2manydj's</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p4_btn_link\" href=\"\" rel=\"prettyPhoto[pp_4]\" title=\"Project: 2manyDJ's website widgets | Client: Soulwax\"><img src=\"img/portfolio/thumbnails/2mdj.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p4_btn_link\" href=\"img/portfolio/2mdj1.jpg\" rel=\"prettyPhoto[pp_4]\" title=\"Project: 2manyDJ's website widgets | Client: Soulwax\"><img src=\"img/portfolio/thumbnails/2mdj.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p4_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/2mdj2.jpg\" rel=\"prettyPhoto[pp_4]\" title=\"This project was great fun, creating widgets for our favourite dance music gurus.\"></a>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p5\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p5_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">intra.tv</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p5_btn_link\" href=\"img/portfolio/intra1.jpg\" rel=\"prettyPhoto[pp_5]\" title=\"Product: intra.tv\"><img src=\"img/portfolio/thumbnails/intratv.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p5_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/intra2.jpg\" rel=\"prettyPhoto[pp_5]\" title=\"Working with The Edge Picture Company we have created an intranet video product.\"></a>";
				galleryHTML += "<a href=\"img/portfolio/intra3.jpg\" rel=\"prettyPhoto[pp_5]\" title=\"We have installations at T-Mobile, Shell, ACE, Rio-Tinto, KPMG to name drop a few...\"></a>";
				galleryHTML += "<a href=\"img/portfolio/intra4.jpg\" rel=\"prettyPhoto[pp_5]\" title=\"Its an incredibly flexible product that gives full control to the client to manage their video content.\"></a>";
				galleryHTML += "<a href=\"img/portfolio/intra5.jpg\" rel=\"prettyPhoto[pp_5]\" title=\"It allows targeted distribution as well as ensuring the network is not hammered, it also does pretty graphs!\"></a>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p6\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p6_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">Filexchange</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p6_btn_link\" href=\"img/portfolio/fx1.jpg\" rel=\"prettyPhoto[pp_6]\" title=\"Product: Filexchange\"><img src=\"img/portfolio/thumbnails/fx.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p6_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/fx2.jpg\" rel=\"prettyPhoto[pp_6]\" title=\"We couldn't find a nice easy way to share big files, so we built one ourselves.\"></a>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p7\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p7_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">EMP</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p7_btn_link\" href=\"img/portfolio/cd1.jpg\" rel=\"prettyPhoto[pp_7]\" title=\"Product: Estate Management Portal\"><img src=\"img/portfolio/thumbnails/cd.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p7_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/cd2.jpg\" rel=\"prettyPhoto[pp_7]\" title=\"Handling both the frontend and backend, our Estate Management Portal enables you to run an estate agent from one site\"></a>";
				galleryHTML += "<a href=\"img/portfolio/cd3.jpg\" rel=\"prettyPhoto[pp_7]\" title=\"It even automates uploading to other portals. Check out www.citydocklands.com, they love it.\"></a>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p8\">";
				galleryHTML += "<div id=\"project_bg\"><img src=\"img/project_bg_off.gif\" id=\"p8_bg_img_src\" width=\"176\" height=\"107\"></div>";
				galleryHTML += "<div id=\"project_title\" class=\"gadgetmedia_project_text\">Informr</div>";
				galleryHTML += "<div id=\"project_btn\"><a id=\"p8_btn_link\" href=\"img/portfolio/tate1.jpg\" rel=\"prettyPhoto[pp_8]\" title=\"Product: Informr\"><img src=\"img/portfolio/thumbnails/tate.jpg\" width=\"156\" height=\"73\" border=\"0\"/></a></div>";
			galleryHTML += "</div>";
			galleryHTML += "<div id=\"gallery_p8_hidden\">";
				galleryHTML += "<a href=\"img/portfolio/tate2.jpg\" rel=\"prettyPhoto[pp_8]\" title=\"The future is digital signage, our product allows complete remote control and creation of content. It's currently installed throughout the Tate galleries.\"></a>";
			galleryHTML += "</div>";
			$("#gallery").html(galleryHTML);
			for (var x=1;x<9;x++) {
				$("#gallery_p"+x+"_hidden").hide();
			}
			$("a[rel^='prettyPhoto']").prettyPhoto({
				animationSpeed: 'normal', /* fast/slow/normal */
				padding: 0, /* padding for each side of the picture */
				opacity: 0.8, /* Value betwee 0 and 1 */
				showTitle: false, /* true/false */
				allowresize: true, /* true/false */
				counter_separator_label: ' of ', /* The separator for the gallery counter 1 "of" 2 */
				theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square */
				callback: function(){}
			});
			//setup rollovers
			$("#p1_btn_link").bind("mouseenter", function(event) {
				$("#p1_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p1_btn_link").bind("mouseleave", function(event) {
				$("#p1_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
			$("#p2_btn_link").bind("mouseenter", function(event) {
				$("#p2_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p2_btn_link").bind("mouseleave", function(event) {
				$("#p2_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});http://localhost/gadgetmedia/index.php#
			$("#p3_btn_link").bind("mouseenter", function(event) {
				$("#p3_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p3_btn_link").bind("mouseleave", function(event) {
				$("#p3_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
			$("#p4_btn_link").bind("mouseenter", function(event) {
				$("#p4_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p4_btn_link").bind("mouseleave", function(event) {
				$("#p4_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
			$("#p5_btn_link").bind("mouseenter", function(event) {
				$("#p5_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p5_btn_link").bind("mouseleave", function(event) {
				$("#p5_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
			$("#p6_btn_link").bind("mouseenter", function(event) {
				$("#p6_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p6_btn_link").bind("mouseleave", function(event) {
				$("#p6_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
			$("#p7_btn_link").bind("mouseenter", function(event) {
				$("#p7_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p7_btn_link").bind("mouseleave", function(event) {
				$("#p7_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
			$("#p8_btn_link").bind("mouseenter", function(event) {
				$("#p8_bg_img_src").attr('src', 'img/project_bg_over.gif');
			});
			$("#p8_btn_link").bind("mouseleave", function(event) {
				$("#p8_bg_img_src").attr('src', 'img/project_bg_off.gif');
			});
		}
		$("#gallery").show();	
		Cufon.refresh();
	}
	
	//clear page
	function clearPage(){
		$("#gallery").hide();
		$("#main_panel_body").show();
		$("#main_panel_img_src").attr('src', 'img/spacer.gif');
		$("#main_panel_map").html("");
		$("#main_panel_title").text("");
		$("#main_panel_subtitle").text("");
		$("#main_panel_body").text("");
	}

	//function calls
	init();
	home();
	
	//font replaces
	Cufon.replace($("#mainpanel"), {
		forceHitArea: true,
		textShadow: '1px 1px rgba(0,0,0,0.2)'
	});
	Cufon.replace($("#footer_left"), {
		forceHitArea: true,
		textShadow: '1px 1px rgba(0,0,0,0.2)'
	});
	Cufon.replace($("#footer_right"), {
		forceHitArea: true,
		textShadow: '1px 1px rgba(0,0,0,0.2)'
	});
});

