/*
	S9 Jquery Functions
	Section9 Design ~ http://www.section9.co.uk
                      __  .__              ________ 
  ______ ____   _____/  |_|__| ____   ____/   __   \
 /  ___// __ \_/ ___\   __\  |/  _ \ /    \____    /
 \___ \\  ___/\  \___|  | |  (  <_> )   |  \ /    / 
/____  >\___  >\___  >__| |__|\____/|___|  //____/.co.uk  
     \/     \/     \/                    \/        

*/

/* ajax load processing background */

// TODO - Faster scrolling if clicked once already?

var processingInstance;
var currentEntry;
var html5 = true;
var requrl = "http://www.section9.co.uk"
var locked = false;
var playingGame =false;
var itemsstart;
var itemsend;
var itemstotal;
var revealed;
var entryopen;
var popupStatus = 0;

$(document).ready(function(){  

	var script = $.ajax({url:requrl + "/media/js/asteroids.pjs", async: false}).responseText;
	var canvas = $('canvas#asteroidsCanvas').get(0);
	revealed = false;
	entryopen = false;
    
  	$('div#master_container').height(  $(window).height());
			
	/* images in entries change colour - Might need a PRELOAD! */
   	$('.newentry').mouseover(function(event){
		var filename = $(this).children('img').attr("src");
		filename= filename.replace("portfolio_images/greys","portfolio_images");
		filename= filename.replace("b.png","c.png");
		$(this).children('img').attr("src", filename);
		$(this).children('h2').css("border-bottom","2px solid #2B83AA");	
		$(this).children('h2').css("margin-bottom", "2px");
	});
	
	 $('.newentry').mouseout(function(event){
		var filename = $(this).children('img').attr("src");
		filename= filename.replace("portfolio_images","portfolio_images/greys");
		filename= filename.replace("c.png","b.png");
		$(this).children('img').attr("src", filename);
		$(this).children('h2').css("border-bottom","none");	
		$(this).children('h2').css("margin-bottom", "4px");
	});
   
   
	
	/* Beautiful link reveal entries */
	
	$( "#beautiful" ).click(function(event){
		if (!revealed){
			$("#firstlayer").fadeOut(500, function() {
			
				$( "#backhome").fadeIn(1000);
				$( ".newentry").each(function(i,item) {
					$(item).fadeIn(1000);
				});
				$("#closeitems").show();
			});			
			
		}
		else {
			$( ".newentry").each(function(i,item) {
				$(item).fadeOut(1000);
			});
			$( "#backhome").fadeOut(1000);
		}
		revealed = !revealed;
		return false;
	});

	var bentext = "<img src='http://www.section9.co.uk/media/images/oni.jpg' id='oniimage' alt='benjamin blundell' /><p>My work is the mixture of science, technology and art. I'm a creative technologist working in London. I am an experienced developer, having worked for <strong>The University of Manchester</strong>, <strong>University College London</strong> and <strong>MSA Visuals</strong></p><p>I have worked on several installations, web applications and research projects with various institutions and companies such as <strong>The British Library</strong>, <strong>Deutsche Bank</strong> and <strong>The Lowry</strong>.</p><p>A computer scientist by education and a creative tinkerer by nature. I'm happy behind a screen and wielding a soldering iron. My interests range from photography to physical computing and all areas in between.</p><p>If you are looking for a creative technologist around London then we should definitely talk. You can reach me via email at <strong>oni@section9.co.uk</strong>. I love talking to new people. <img src='http://www.section9.co.uk/media/images/s9black.png' id='bens9img'/></p><p>Much of my work is research and I have worked with several academic institutions. <pre>S. Pettifer, T.L.J. Howard, B. Blundell, and D. Edwards.<br/> An immersive virtual environment for phantom limb pain rehabilitation.<br/> In Proceedings of the International Conference of Computer Graphics Theory and Applications (GRAPP), <br/>February 2012. Accepted for publication.</pre></p>";


	

	$("#benPopupLink").click(function(event){
		centerPopup();  
		loadPopup(); 
			
		$("#popupContent").children().remove();
		$("#popupContent").append("<h1>Hi! My Name is Ben</h1>");
		$("#popupContent").append(bentext);		
		return false;
	});

	$("#benMainLink").click(function(event){
		centerPopup();  
		loadPopup(); 
			
		$("#popupContent").children().remove();
		$("#popupContent").append("<h1>Hi! My Name is Ben</h1>");
		$("#popupContent").append(bentext);		
		return false;
	});




	
	/* Close Game  and Close Items */
	
	$( "#closegame" ).click(function(event){
		if (html5 && playingGame) {
			playingGame = false;
			locked = false;
			$("#scroller").fadeIn(1000);
			processingInstance.startDemo();
			$( "#closegame" ).hide();
		}
		return false;
	});
	
	$( "#closeitems" ).click(function(event){
		if (revealed && !entryopen) {
			$( ".newentry").each(function(i,item) {
				$(item).fadeOut(500, function() {
					if (i == 0)
						$("#firstlayer").fadeIn(500);	
				});
			});
			$( "#closeitems" ).hide();
			$("#backhome").fadeOut(500);
			revealed = false;
		}
		if (entryopen){
			$( "#entry").fadeOut(500, function() {
				$( ".newentry").each(function(i,item) {
					$(item).fadeIn(500);	
				});
			
			});
			entryopen = false;
		}
		
		return false;
	});
	

	$("#closegame").hide();
	$("#closeitems").hide();

	/* Popup Close */

	$("#popupContactClose").click(function(){  
		disablePopup();  
	});  

	//Click out event!  
	$("#backgroundPopup").click(function(){  
		disablePopup();  
	});  

	//Press Escape event!  
	$(document).keypress(function(e){  
		if(e.keyCode==27 && popupStatus==1){  
			disablePopup();  
		}  
	});  


	/* Image and H2 links need to make the ajax call */

	setupAjaxCalls();

   /* start game */
   
	$('#scroller').click(function(event){
		if(revealed){
		/*	$( ".newentry").each(function(i,item) {
				$(item).fadeOut(500, function() {
					if (i == 0)
						$("#firstlayer").fadeIn(500);	
				});
			});
			$( "#closeitems" ).hide();
			revealed = false; */
			return true;
		}
		else
			startGame(); 
	});

 
  if (canvas.getContext) {
  		
   	$.getScript(requrl + '/media/js/processing-1.0.0.js', function() {
		$.getScript(requrl + '/media/js/asteroidsfont.js', function() {
							  
			processingInstance = new Processing(canvas, script);
			processingInstance.resize($(window).width() - 5, $(window).height());
			processingInstance.startDemo();
				
		});   	
   	});
  }
  else {
  	html5 = false;
  	// No fancy HTML for you!
  	alert("Your Browser does not support HTML5 - While this is fine, you wont get the extra fancy bits!");
  	
  }

});



/* resize */

$(window).resize(function() {
	if (html5)
		processingInstance.resize($(window).width() -5, $(window).height() );
	$('div#master_container').height(  $(window).height() );

});

/*  clear for game */

function startGame() {
	if (html5 && !playingGame) {
		playingGame = true;
		locked = true;
		$("#scroller").fadeOut(1000);
		processingInstance.stopDemo();
		$("#closegame").show();
	}
}


function setupAjaxCalls(){
	$( ".newentry" ).click(function(event){
	
		var itemid = $(this).attr("id");
		entryopen = true;
		centerPopup();  
		loadPopup(); 
		
		$("#popupContent").append('<img src="' + requrl + '/media/images/ajax.gif" id ="ajaxload" />');
			
		$.get(requrl + '/portfolio/json/item', {id: itemid}, function(data) {

			$("#popupContent").children().remove();
			item = data[0];
			$("#popupContent").append("<h1>" + item.fields.title + "</h1>");
			$("#popupContent").append("<h3>" + item.fields.creation_date + "</h3>");
			$("#popupContent").append(item.fields.body);

		
		});			

		return false;
	});
}

/**
 * Popup related
 */

function loadPopup(){  
	//loads popup only if it is disabled  
	if(popupStatus==0){  
		//$("#backgroundPopup").css({  
		//	"opacity": "0.7"  
		//});  

		$("#backgroundPopup").fadeIn("slow");  
		$("#popupContact").fadeIn("slow");  
		popupStatus = 1;  
	}  
}  


//disabling popup with jQuery magic!  
function disablePopup(){  
	//disables popup only if it is enabled  
	if(popupStatus==1){  
		$("#backgroundPopup").fadeOut("slow");  
		$("#popupContact").fadeOut("slow");  
		popupStatus = 0;  
	}  
}  

//centering popup  
function centerPopup(){  
	//request data for centering  
	var windowWidth = document.documentElement.clientWidth;  
	var windowHeight = document.documentElement.clientHeight;  
	var popupHeight = $("#popupContact").height();  
	var popupWidth = $("#popupContact").width();  
	
	//centering  
	$("#popupContact").css({  
		"position": "absolute",  
		"top": windowHeight/2-popupHeight/2,  
		"left": windowWidth/2-popupWidth/2  
	});  

	//only need force for IE6  
	$("#backgroundPopup").css({  
		"height": windowHeight  
	});  
  
}  


/* QTip
----------------------------------------------------------------------------------------------------*/

function setQTips() {
    $('img.entrylistimage').qtip({
        content: $(this).attr('title'),
        show: 'mouseover',
        hide: 'mouseout',
        tip: 'bottomLeft',
        style: { name: 'dark', tip: true },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        }
    });
}