/****************************************************************************************
* teasemedia js *
*****************************************************************************************/
var tm = {
	data: null,
	page: null,
	clientID: null,
	isLoadedCycle: false,
	isLoadedSWFobject: false,
	/*************************************************************
	* initialise *
	**************************************************************/
	init: function () {
		tm.setLinks();		
		tm.getData();
	},
	/*************************************************************
	* set Links *
	**************************************************************/
	setLinks: function () {
		$('#page').off('click');	
		$('#page').on('click', '[rel]', function() {
			tm.page = $(this).attr('rel');
			tm.clientID = $(this).attr('href').replace('#','');
			tm.getPage();
			return false;		
		});
	},
	/*************************************************************
	* get data *
	**************************************************************/
	getData: function () {
		$.ajax({
			type: 'GET',
			dataType: 'json',
			url: '/_js/tm.json',
			success: function (data) {
				tm.data = data;
				tm.page = 'home';
				tm.getPage();
		},
			error: function () {
				tm.loadError();
			}
		});
	},
	/*************************************************************
	* get page *
	**************************************************************/
	getPage: function () {
		switch (tm.page) {
		case 'home':
			tm.createHome();			
			break;
		case 'about':
			tm.createAbout();			
			break;
		case 'contact':
			tm.createContact();			
			break;
		case 'work':
			tm.createWork();			
			break;
		case 'client':
			tm.getClient();			
			break;
		case 'screens':
			tm.getClient();			
			break;
		case 'media':
			tm.getClient();			
			break;
		case 'archive':
			tm.createArchive();			
			break;
		default:
			tm.loadError();
		}
	},
	/*************************************************************
	* create home page *
	**************************************************************/
	createHome: function () {
		//set vars
		var main, side, data = tm.data;
		//add title
		$('title').html('teasemedia*');
		$('body').removeClass().addClass('pageHome');
		//build main
		main = 
		'<header>' +
		'	<h2>Latest</h2>' +
		'</header>' +
		'<div class="column">' +
    '	<h3>Ministry of Defence</h3>' +
    '	<p>Contracted to Amey Business Services to assist in the execution of a PPP contract to provide web services to the Ministry of Defence (MoD).</p>' +
    '	<p>Work involved integrating with an established team of web publishers and developers to undertake a variety of web tasks. This included the posting of analytical product to multiple secure Intranets and the creation and maintenance of individual sub sites across these different systems.</p>' +
		'</div>' +
		'<div class="column">' +
		'	<img src="'+data.home.imgMain.url+'" alt="'+data.home.imgMain.text+'" class="imgMain" />' +
		'</div>';
		$('#main').html(main);
		//build side
		side = 
		'<section>' +	
		'	<h3>availability</h3>' +	
		'	<p>Teasemedia is currently involved on a major project with the Met Office until the Spring 2012, however if there are any work matters that you would like to discuss, please send us an <a href="mailto:info@teasemedia.net" title="email">email</a> and we will be in touch.</p>	' +	
		'	<ul class="listLinks">' +
		'		<li><a href="#archive" rel="archive">view work archive</a></li>' +
		'	</ul>' +
		'</section>';	
		$('#side').html(side);		
	},		
	/*************************************************************
	* create about page *
	**************************************************************/
	createAbout: function () {
		//set vars
		var main, side, data = tm.data;
		//add title
		$('title').html('teasemedia* / ' + data.about.id);
		$('body').removeClass().addClass('pageAbout');
		//build main
		main = 
		'<header>' +
		'	<h2>'+ data.about.id+'</h2>' +
		'</header>' +
		'	<div class="column">' +
			data.about.summary.join('') +
		'</div>' +
		'<div class="column">' +
		'	<img src="'+data.about.imgMain.url+'" alt="'+data.about.imgMain.text+'" class="imgMain" />' +
		'	<h3>clients</h3>' +	
		'	<p>Teasemedia has in the past enjoyed successful working relationships with several leading design agencies and IT specialists including:</p>' +	
		'	<ul class="listLinks">' +
		'		<li><a href="http://www.draftfcb.com/" title="links away from site">Draftfcb</a></li>' +
		'		<li><a href="http://www.halperncowan.com/" title="links away from site">Halpern Cowan</a></li>' +
		'		<li><a href="http://www.johnhenry.net/" title="links away from site">John Henry</a></li>' +
		'		<li><a href="http://www.publicismodem.com/" title="links away from site">Modem	Media</a><em>(now Publicis Modem)</em></li>' +
		'		<li><a href="http://www.fifosys.com/" title="links away from site">Octavia Information Systems</a><em>(now fifosys)</em></li>' +
		'		<li><a href="http://www.lbigroup.com/" title="links away from site">Oyster, SBI, Wheel</a><em>(all of whom are now part of the LBi group)</em></li>' +
		'		<li><a href="http://www.tmg.co.uk/" title="links away from site">TMG</a></li>' +
		'	</ul>' +
		'</div>';
		$('#main').html(main);
		//build side
		side = 
		'<section>' +	
		'	<h3>availability</h3>' +	
		'	<p>Teasemedia is currently involved on a major project with the Met Office until Spring 2012, however if there are any work matters that you would like to discuss, please send us an <a href="mailto:info@teasemedia.net" title="email">email</a> and we will be in touch.</p>	' +	
		'</section>' +	
		'<section>' +	
		'	<h3>production notes</h3>' +	
		'	<p>This web site was produced with HTML5, CSS3, JavaScript (jQuery framework), and Photoshop.</p>	' +	
		'</section>';	
		$('#side').html(side);		
	},
	/*************************************************************
	* create contact page *
	**************************************************************/
	createContact: function (data) {
		//set vars
		var main, side, data = tm.data;
		//add title
		$('title').html('teasemedia* / ' + data.contact.id);
		$('body').removeClass().addClass('pageContact');
		//build main
		main = 
		'<header>' +
		'	<h2>'+ data.contact.id+'</h2>' +
		'</header>' +
		'<div class="column">' +
			data.contact.summary.join('') +
		'	<h4>post</h4>' +
		'	<p class="adr">' +
		'		<span class="fn org">'+data.contact.post.org+'</span>' +
		'		<span class="street-address">'+data.contact.post.street1+'</span>' +
		'		<span class="street-address">'+data.contact.post.street2+'</span>' +
		'		<span class="locality">'+data.contact.post.locality+'</span>' +
		'		<span class="postal-code">'+data.contact.post.postcode+'</span>' +
		'	</p>' +
		'	<h4>phone</h4>' +
		'	<p class="tel">'+data.contact.phone+'</p>' +
		'	<h4>email</h4>' +
		'	<p class="email"><a title="email" href="mailto:'+data.contact.email+'">'+data.contact.email+'</a></p>' +
		'</div>' +
		'<div class="column">' +
		'	<img src="'+data.contact.imgMain.url+'" alt="'+data.contact.imgMain.text+'" class="imgMain" />' +
		'</div>';
		$('#main').html(main);
		//build side
//		side = 
//		'<section>' +	
//		'	<h3>send a message</h3>' +	
//		'	<form action="/contact/contact.php" method="post" name="contact" id="contact"  role="form">' +	
//		'		<fieldset>' +	
//		'			<label for="name">name:</label>' +	
//		'			<input type="text" name="name" id="name" aria-required="true" />' +	
//		'			<label for="email">email:</label>' +	
//		'			<input  type="text" name="email" id="email" aria-required="true" />' +	
//		'			<label for="message">message:</label>' +	
//		'			<textarea name="message" id="message" aria-required="true"></textarea>' +	
//		'		</fieldset>' +	
//		'		<input type="submit" name="submit" value="send" class="button" />' +
//		'	</form>' +	
//		'</section>';	
//		$('#side').html(side);	
//		contact.formSubmit();
	},
	/*************************************************************
	* form validation and submission *
	**************************************************************/
//	formSubmit: function () {
//		
//		//Submit action
//		$('#contact').submit(function(){	
//
//			//remove any prior form message(s)
//			$('#contact .message').remove();			
//			
//			// validate required fields
//			var required = ['name', 'email', 'message'], i, len = required.length;
//			for (i=0; i<len; i++) {
//				var input = $('#'+required[i]);
//				var error = required[i] + " required";
//				if ((input.val() == "") || (input.val() == error)) {
//					input.addClass('required');
//					input.val(error);
//				} else {
//					input.removeClass('required');
//				}
//			}
//		
//			// validate email
//			var email = $('#email');
//			var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
//			if (!regex.test(email.val())) {
//				email.addClass('required');
//				email.val('valid email required');
//			}
//			
//			// check if form elements have class 'required' and form will not submit
//			if ($(':input').hasClass('required')) {
//				$('#contact').prepend('<p class="message">There was a problem sending the message, please see below:</p>'); 
//				return false;
//			} else {
//				var name = $('#name').val();  
//				var email = $('#email').val(); 
//				var message = $('#message').val(); 
//				var dataString = 'name='+ name + ' email=' + email + ' message:' + message;  
//				$.ajax({  
//					type: "POST",  
//					//url: "/contact/index.html",  
//					url: "/contact/contact.php",  
//					data: dataString,  
//					success: function() { 
//						$('#contact').prepend('<p class="message">Thank you '+name+'. Your message was sent successfully and we will be in touch shortly.</p>');
//						//reset form elements
//						$('#contact [aria-required]').val(''); 
//					},
//					error: function () {
//						$('#contact').prepend('<p class="message">There was a problem sending the message, please see below:</p>'); 
//					}
//				});  
//				//return true;
//				return false; 
//			}
//		});
//
//		// clear required field on focus
//		$(':input').focus(function(){		
//			 if ($(this).hasClass('required')) {
//				$(this).val('');
//				$(this).removeClass('required');
//			 }
//		});
//			
//	},
	/*************************************************************
	* create work home page *
	**************************************************************/
	createWork: function () {
		//set vars
		var main, side, data = tm.data, archive = data.work.archive, i, len;
		//add title
		$('title').html('teasemedia* / ' + data.work.id);
		$('body').removeClass().addClass('pageWork');
		//build main
		main = 
		'<header>' +
		'	<h2>'+data.work.id+'</h2>' +
		'</header>' +
		'<div class="column">' +
		data.work.summary.join('') +
		'</div>' +
		'<div class="column">' +
		'	<img src="'+data.work.imgMain.url+'" alt="'+data.work.imgMain.text+'" class="imgMain" />' +
		'</div>';
		$('#main').html(main);
		//build side
    side = 
		'<h3>Past work</h3>'+
		'<ul class="listWork fc">';
		for (i = 0; i < 3; i++) {	
			side += 
			'<li>' +
			'	<a href="#'+archive[i].id+'" rel="client">' +
			'	<img src="/_imgs/work/'+archive[i].imgThumb.url+'" alt="'+archive[i].imgThumb.text+'">' +
			'	<em>'+archive[i].clientName+'</em>'+
			'	<span>'+archive[i].production.type+' / '+archive[i].production.tech.join(' / ')+'</span>';
			if (archive[i].dateStart == archive[i].dateEnd) {
				side += '<span class="date">'+tm.formatDate(archive[i].dateEnd)+'</span>';
			} else {
				side += '<span class="date">'+tm.formatDate(archive[i].dateStart)+' - '+tm.formatDate(archive[i].dateEnd)+'</span>';
			}
			side += 
			'	</a>' +
			'</li>';
		}
		side += 
		'</ul>' +			
		'<ul class="listLinks">' +
		'	<li><a href="#archive" rel="archive">view work archive</a></li>' +
		'</ul>';
		$('#side').html(side);
	},
	/*************************************************************
	* get client *
	**************************************************************/
	getClient: function () {
		//set vars
		var archive = tm.data.work.archive, client, i, len, total = archive.length;
		//find client ID
		for (i = 0, len = archive.length; i < len; i++) {	
			if (archive[i].id == tm.clientID) {
				client = archive[i];
				break;
			}
		} 
		//invalid client ID
		if(!client) {
			var error = 
			'<div class="error">' +
			'	<h2>Error</h2>' +
			'	<p>No match found.</p>' +
			'</div>';
			$('#main').html(error);
		}
		//load type of client page (client/screens/media)
		if (tm.page == 'client') {
			tm.createClient(client, total);			
		} else if (tm.page == 'screens') {
			tm.createScreens(client, total);			
		} else if (tm.page == 'media') {
			tm.createMedia(client, total);			
		} else {
			loadError();
		}
	},	
	/*************************************************************
	* create client page *
	**************************************************************/
	createClient: function (client,total) {
		//set vars
		var data = tm.data, main, side, id = Number(tm.clientID), next = id+1, prev = id-1;
		//add title
		$('title').html('teasemedia* / ' + data.work.id + ' / ' + client.clientName);
		$('body').removeClass().addClass('pageWork');
		//build main
		main = 
		'<header>' +
		'	<h2>'+client.clientName+'</h2>' +
		'</header>' +
		'<div class="column">' +
		client.description.join('') +
		'<h4>production</h4>' +
		'<p>'+client.production.type+' / '+client.production.tech.join(' / ')+'</p>' +
		'<h4>date</h4>';
		if (client.dateStart == client.dateEnd) {
			main += '<p>'+tm.formatDate(client.dateEnd)+'</p>';
		} else {
			main += '<p>'+tm.formatDate(client.dateStart)+' - '+tm.formatDate(client.dateEnd)+'</p>';
		}
		main += 
		'</div>' +
		'<div class="column">' +
		'<img src="/_imgs/work/'+client.imgMain.url+'" alt="'+client.imgMain.text+'" class="imgMain" />';
		main += '</div>';
		$('#main').html(main);
		//build side
		tm.createSides(client,total);	
	},
	/*************************************************************
	* create client screenshot page *
	**************************************************************/
	createScreens: function (client,total) {
		//set vars
		var data = tm.data, main, side, arr = client.imgScreen, i, len, id = Number(client.id), next = id+1, prev = id-1;
		//add title
		$('title').html('teasemedia* / ' + data.work.id + ' / ' + client.clientName);
		$('body').removeClass().addClass('pageWork');
		//build main
		main = 
		'<header>' +
		'	<h2>'+client.clientName+'</h2>' +
		'</header>' +
		'<ul class="listScreens">';
		for (i = 0, len = arr.length; i < len; i++) {	
      main += 
			'	<li>' +
			'		<img src="/_imgs/work/'+arr[i].url+'" alt="'+arr[i].text+'" class="imgScreen" />' +
      '		<span class="screenNo">'+(i+1)+'</span>'+arr[i].text +
			'</li>';
		} 
		main += 
		'</ul>';
		$('#main').html(main);
		//add cycle plugin
		if (tm.isLoadedCycle) {
			$('.listScreens').cycle('destroy');			
			playCycle();
		} else {
			$.getScript('http://malsup.github.com/jquery.cycle.all.js', function() {
				tm.isLoadedCycle = true;
				playCycle();
			});			
		}
		//play cycle
		function playCycle() {
			$('.listScreens').after('<ul class="listScreensNav fc">').cycle({
				timeout:     				3000,
				pager:      				'.listScreensNav',
				pagerEvent: 				'mouseover',
				pauseOnPagerHover:	true,
				pagerAnchorBuilder: function(idx, slide) {
															var src = $('img',slide).attr('src'), alt = $('img',slide).attr('alt');
															return '<li><img src="'+src+'" alt="'+alt+'" /></li>'; 
														} 
			}); 
		}		
		//build side
		tm.createSides(client,total);	
	},
	/*************************************************************
	* create client media page *
	**************************************************************/
	createMedia: function (client,total) {
		//set vars
		var data = tm.data, main, side, arr = client.imgScreen, i, len, id = Number(client.id), next = id+1, prev = id-1;
		//build main
		main = 
		'<header>' +
		'	<h2>'+client.clientName+'</h2>' +
		'</header>' +
		'<div id="objContent">' +
		'	<p>Javascript needs to be enabled and Flash installed to view this movie</p>' +
		'</div>';
		$('#main').html(main);	
		//add swfobject
		if (tm.isLoadedSWFobject) {
			runSWFobject();
		} else {
			$.getScript('https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js', function() {
				tm.isLoadedSWFobject = true;
				runSWFobject();
			});			
		}
		//run swfobject
		function runSWFobject() {
			swfobject.embedSWF('/_media/'+client.media.url, 'objContent', client.media.width, client.media.height, '6.0.0');
		}
		//build side
		tm.createSides(client,total);	
	},
	/*************************************************************
	* create client sides *
	**************************************************************/
	createSides: function (client,total) {
		//set vars
		var data = tm.data, main, side, id = Number(tm.clientID), next = id+1, prev = id-1;
		//build side
		side =
		'<nav>' +
		'	<ul class="listLinks">';
		if (id < total) {
			side += '<li><a href="#'+next+'" rel="client">next client</a></li>';
		}
		if (id > 1) {
			side += '<li><a href="#'+prev+'" rel="client">previous client</a></li>';
		}
		side += 
		'		<li><a href="#archive" rel="archive">view work archive</a></li>' +
		'	</ul>' +
		'	<ul class="listLinks">';
		if (tm.page == 'client' && client.imgScreen) {
			side += '<li><a href="#'+client.id+'" rel="screens">view screenshots</a></li>';
		}
		if (tm.page == 'client' && client.media) {
			side += '<li><a href="#'+client.id+'" rel="media">'+client.media.urlText+'</a></li>';
		}
		if (tm.page == 'screens' || tm.page == 'media') {
			side += '<li><a href="#'+id+'" rel="client">back to client page</a></li>';
		}
		if (client.url) {
			side += '<li><a href="'+client.url+'" title="links away from site">visit '+client.clientName+' site</a></li>';
		}
		side += 
		'	</ul>' +
		'</nav>';
		$('#side').html(side);
	},
	/*************************************************************
	* create archive *
	**************************************************************/
	createArchive: function () {
		//set vars
		var data = tm.data, archive = tm.data.work.archive, main, i, len;
		//add title
		$('title').html('teasemedia* / ' + data.work.id + ' /  archive');
		$('body').removeClass().addClass('pageArchive');
		//build main
		main = 
		'<header>' +
		'	<h2>work archive</h2>' +
		'</header>' +
		'<ul class="listWork fc">';
		for (i = 0, len = archive.length; i < len; i++) {	
			main += 
			'<li>' +
			'	<a href="#'+archive[i].id+'" rel="client">' +
			'	<img src="/_imgs/work/'+archive[i].imgThumb.url+'" alt="'+archive[i].imgThumb.text+'">' +
			'	<em>'+archive[i].clientName+'</em>'+
			'	<span>'+archive[i].production.type+' / '+archive[i].production.tech.join(' / ')+'</span>';
			if (archive[i].dateStart == archive[i].dateEnd) {
				main += '<span class="date">'+tm.formatDate(archive[i].dateEnd)+'</span>';
			} else {
				main += '<span class="date">'+tm.formatDate(archive[i].dateStart)+' - '+tm.formatDate(archive[i].dateEnd)+'</span>';
			}
			main += 
			'	</a>' +
			'</li>';
		}
		main += 
		'</ul>';			
		$('#main').html(main);
		$('#side').html('');
	},	
	/*************************************************************
	* format date *
	**************************************************************/
	formatDate: function (d) {
		var dateString, dateParse, dateMonth, dateYear, dateValue;
		var monthName = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
		dateString = d;		
		if (dateString) {
			dateParse = new Date(dateString);
			dateMonth = monthName[dateParse.getMonth()];
			dateYear = dateParse.getFullYear();	
			dateValue = dateMonth + ' ' + dateYear;
		} else {
			dateValue = 'present';
		}
		return dateValue;
	},	
	/*************************************************************
	* load error *
	**************************************************************/
	loadError: function () {
			var error = 
	  	'<header>' +
    	'	<h2>Page not found</h2>' +
  		'</header>' +
	    '<div class="column">' +
      ' <p>Unfortunately, the page you were trying to retrieve could not be found. It is possible that the page you were looking for may have been moved, updated or deleted.</p>' +
      '	<p>Please select from the above links or alternatively visit our <a href="http://teasemedia.net">home page</a>.</p>' +
      '</div>' +
      '<div class="column">' +
      '	<img src="/_imgs/graphics/asterisk1.gif" alt="clipped asterisk symbol" class="imgMain" />' +	
      '</div>';
			$('#main').html(error);
			$('#side').html('');
	}	
};