$(document).ready(function() { //perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation
  
  $('#pictures #content1').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
    $('#pictures #content2').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
	  $('#pictures #content3').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
	  	  $('#pictures #content4').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
		  	  $('#pictures #content5').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
			$('#pictures #webdzn').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
			$('#pictures #develop').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
			$('#pictures #seo').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
			$('#pictures #domain').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
			$('#pictures #other').each(function() { //set the initial z-index's
    $(this).css('z-index', z); //apply increased z-index to <img>
  });
  
//home
  function swapFirstLast(bila) {
    
    var processZindex, direction, newZindex, inDeCrease, milo, bila; //change for previous or next image
    
    processZindex = z; direction = '-'; z = z+1; inDeCrease = 1; milo = -180;
    $('#pictures #'+bila).each(function() 
			{ //process each image
				if($(this).css('z-index') <= z) { //if its the image we need to process
				$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
				$(this).css('z-index', z) //set new z-index
				.animate({ 'top' : '180' }, 'slow', function() { //animate the image back to its original position
				inAnimation = false; //reset the flag
             });
       		});
      } 
    });
    
    return false; //don't follow the clicked link
  }
  
  $('#home a').click(function() {
    return swapFirstLast('content1'); //swap first image to last position
  });
  
  $('#profile a').click(function() {
    return swapFirstLast('content2'); //swap last image to first position
  });
   $('#services a').click(function() {
    return swapFirstLast('content3'); //swap last image to first position
  });
   $('#portfolio a').click(function() {
    return swapFirstLast('content4'); //swap last image to first position
  });
	$('#contact a').click(function() {
    return swapFirstLast('content5'); //swap last image to first position
  });
	$('#wbdzn a').click(function() {
    return swapFirstLast('webdzn'); //swap last image to first position
  });
	$('#devl a').click(function() {
    return swapFirstLast('develop'); //swap last image to first position
  });
	$('#optim a').click(function() {
    return swapFirstLast('seo'); //swap last image to first position
  });
	$('#oth a').click(function() {
    return swapFirstLast('other'); //swap last image to first position
  });
});