/*
 * jQuery Portfolio Grid by Dylan Companjen
 */
$(document).ready(function(){
	var position = null;
	var imgNumber = null;
	var infoClone = null;
	var toggleBoolean = true;
	
	$('#togglebutton').html('<p><strong>Bekijk Info</strong></p>');
	
	$('#project_content').hide();
	$('#project_content').css({ opacity: 0 });
	$('.project div').hide();
	$('.project img').css({ opacity: 0.8 });
	$('#exit').css({ opacity: 0 });
	$('#togglebutton').css({ opacity: 0 });
	$('#togglebutton').hide();
	
	// Preload the images + info
	var project1 = $('<img />').attr('src', 'images/leon.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'leon');
	var project2 = $('<img />').attr('src', 'images/culinarist.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'culinarist');
	var project3 = $('<img />').attr('src', 'images/vivus.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'vivus');
	var project4 = $('<img />').attr('src', 'images/remix_contest.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'remix_contest');
	var project5 = $('<img />').attr('src', 'images/jgz.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'jgz');
	var project6 = $('<img />').attr('src', 'images/pronto.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'pronto');
	var project7 = $('<img />').attr('src', 'images/historyhunt.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'historyhunt');
	var project8 = $('<img />').attr('src', 'images/tdicase.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'tdicase');
	var project9 = $('<img />').attr('src', 'images/upc.jpg') .attr('width', '210') .attr('height', '140') .attr('alt', 'upc');
	
	// Show hand cursor on project mouseOver + project opacity effect
	$('.project img').mouseover(function () {
		$(this).css('cursor', 'pointer');
		$(this).animate({ opacity: 1 }, 200, 'easeOutQuad');
	});
	// mouseOut project
	$('.project img').mouseout(function () {
		$(this).animate({ opacity: 0.8 }, 200, 'easeOutQuad');
	});
	
	$('.project img').mouseover(function () {
		$(this).css('cursor', 'pointer');
		$(this).animate({ opacity: 1 }, 200, 'easeOutQuad');
	});
	
	// Give the togglebutton functionality
	$('#togglebutton').click(function(){
		if( toggleBoolean == true )
		{
			$('#project_content img').hide();
			$('#project_content div').show();
			toggleBoolean = false;
			$('#togglebutton').html('<p><strong>Bekijk Design</strong></p>');
		}
		else {
			$('#project_content img').show();
			$('#project_content div').hide();
			toggleBoolean = true;
		$('#togglebutton').html('<p><strong>Bekijk Info</strong></p>');
		}
	});
	
	// Function to show the content of the selected project
	$('.project img').click(function() { 
	  // Make sure the image will be visible and the text invisible	
	  $('#project_content img').show();
	  $('#project_content div').hide();
	  $('#project_content').show();
	  $('#togglebutton').html('<p><strong>Bekijk Info</strong></p>');
		
      // Empty existing project_content
	  $('#project_content').empty();
	
	  // Get the clicked div position and set it as the project_content start position
	  position = $(this).position();
	  $('#project_content').css(position);
	   
	  // Load the selected project image + info into the project content
	  imgNumber = $(this).attr('id');
	  switch(imgNumber)
	  {
      case 'project1':
	  infoClone = $('#project1_info').clone(); // When using append only the project_info div will move out of it's original place. That's why i use a clone to keep a copy at the original place
	  $('#project_content').append($(infoClone));
      $('#project_content').append(project1);
      break;
      case 'project2':
	  infoClone = $('#project2_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project2);
      break;
	  case 'project3':
	  infoClone = $('#project3_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project3);
      break;
	  case 'project4':
	  infoClone = $('#project4_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project4);
      break;
	  case 'project5':
	  infoClone = $('#project5_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project5);
      break;
	  case 'project6':
	  infoClone = $('#project6_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project6);
      break;
	  case 'project7':
	  infoClone = $('#project7_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project7);
      break;
	  case 'project8':
	  infoClone = $('#project8_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project8);
      break;
	  case 'project9':
	  infoClone = $('#project9_info').clone();
      $('#project_content').append($(infoClone));
      $('#project_content').append(project9);
      break;
      default:
      //code to be executed if case is different
      }
	  //Hide the infotext
	  $('#project_content div').hide();
	  
	  // Put the toggle & exit button on its place
	  $('#togglebutton').css({ bottom: '0px', right: '0px' });
	  $('#exit').css({ top: '0px', right: '0px' });
	  
	  // Animate project_content to full grid width/height from this start position
	  $('#project_content').css({opacity: 1});
	  $('#project_content').animate({
	    opacity: 1,
	    left: '0px',
	    top: '0px',
		height: '100%',
	    width: '100%'
	  }, 400, 'easeOutQuad', function() {
	    // Show the back button
	    $('#exit').animate({
	  	  opacity: 1
	    }, 300, 'easeOutQuad');
		// Show the toggle button
		$('#togglebutton').show();
		$('#togglebutton').animate({
	  	  opacity: 1
	    }, 300, 'easeOutQuad');
		// Show hand cursor on exit mouseOver
		$('#exit').mouseover(function () {
			$(this).css('cursor', 'pointer');
		});
		// Show hand cursor on toggle mouseOver
		$('#togglebutton').mouseover(function () {
			$(this).css('cursor', 'pointer');
		});
	  });
	  
	  // Animate the selected image to full size
	  $('#project_content img').animate({
		height: '450px',
	    width: '660px'
	  }, 400, 'easeOutQuad');
	  
	  // Opacity fade-out the projects
	  $('.project').animate({
	  	opacity: 0
	  }, 300, 'easeOutQuad');
	});
	
	// Function to hide the content of the selected project
	$('#exit').click(function() {
	  // If info view is on, switch to design on exit
	  if(toggleBoolean == false)
	  {
		$('#project_content img').show();
		$('#project_content div').hide();
		toggleBoolean = true;
	  }
	
	  $('#project_content').animate({
	    opacity: 0.8,
	    height: $('.project').height(),
	    width: $('.project').width(),
	   	top:position.top,
	   	left:position.left
	  }, 300, 'easeOutQuad', function() {
		$('#project_content').css({opacity: 0});
		$('#project_content').hide();
	  	// Position project content out of the container on complete so the project mouseOver still works
		$('#project_content').css({
		  top:'-200px'
		});  
      });
      
	  // Hide the back button
	  $('#exit').animate({
	  	opacity: 0
	  }, 100, 'easeOutQuad', function() {
	  	// Put the exit button out its place
	    $('#exit').css({ top: '-30px', right: '-30px' }); 
		
		});
	  // Hide the toggle button
	  $('#togglebutton').animate({
	  	opacity: 0
	  }, 100, 'easeOutQuad', function() {
	  	// Put the toggle button out its place
	    $('#exit').css({ bottom: '0px', right: '-120px' }); 
		
		});	
	  // Hide hand cursor on exit mouseOver
	  $('#exit').mouseover(function () {
	   	$(this).css('cursor', 'default');
	  });

	  // Animate the selected image to normal size
	  $('#project_content img').animate({
		height: '140px',
	    width: '210px'
	  }, 300, 'easeOutQuad');
	  
      // Opacity fade-in the projects
	  $('.project').animate({
	  	opacity: 1
	  }, 300, 'easeOutQuad');
	});
});