// Faking a togglable fade
jQuery.fn.fadeToggle = function(speed, easing, callback) {
   $(this).css("z-index", parseInt( new Date().getTime()/1000 ));
   return this.animate({opacity: 'toggle'}, speed, easing, callback);

};
var zmax=0;

$(document).ready(function() {
 // First we hide all of our working divs
  $('#about').hide();
  $('#design').hide();
  $('#marketing').hide();
  $('#strategy').hide();
  $('#photography').hide();
  $('#branding').hide();
  $('#copywriting').hide();
  $('#contact').hide();


 // all of our toggles
$('a.aboutToggle').click(function() {
 $('#about').fadeToggle(400);
 return false;
});
  
$('a.designToggle').click(function() {
 $('#design').fadeToggle(400);
 return false;
});
$('a.designOn').click(function() {
 $('#design').fadeToggle(400);
 return false;
});
  
$('a.marketingToggle').click(function() {
 $('#marketing').fadeToggle(400);
 return false;
});
$('a.marketingOn').click(function() {
 $('#marketing').fadeToggle(400);
 return false;
});

$('a.strategyToggle').click(function() {
 $('#strategy').fadeToggle(400);
 return false;
});
$('a.strategyOn').click(function() {
 $('#strategy').fadeToggle(400);
 return false;
});
  
$('a.photographyToggle').click(function() {
 $('#photography').fadeToggle(400);
 return false;
});
$('a.photographyOn').click(function() {
 $('#photography').fadeToggle(400);
 return false;
});
  
$('a.contactToggle').click(function() {
 $('#contact').fadeToggle(400);
 return false;
});
  
$('a.brandingToggle').click(function() {
 $('#branding').fadeToggle(400);
 return false;
});
$('a.brandingOn').click(function() {
 $('#branding').fadeToggle(400);
 return false;
});
  
$('a.copywritingToggle').click(function() {
 $('#copywriting').fadeToggle(400);
 return false;
});
$('a.copywritingOn').click(function() {
 $('#copywriting').fadeToggle(400);
 return false;
});
  
// To turn them all off
 $('a.allOff').click(function() {
  $('#about').fadeOut(300);
  $('#design').fadeOut(300);
  $('#marketing').fadeOut(300);
  $('#strategy').fadeOut(300);
  $('#photography').fadeOut(300);
  $('#contact').fadeOut(300);
  $('#branding').fadeOut(300);
  $('#copywriting').fadeOut(300);
  return false;
 });

    
});






// This is the template to use:

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
 // (a little sooner than page load)
  $('#about').hide();
  $('#marketing').hide();
 // shows the slickbox on clicking the noted link
  $('a#about-show').click(function() {
 $('#about').fadeIn('slow');
 return false;
  });
 // hides the slickbox on clicking the noted link
  $('a#about-hide').click(function() {
 $('#about').fadeOut('slow');
 return false;
  });
 // toggles the slickbox on clicking the noted link
  $('a#about-toggle').click(function() {
 $('#about').fadeToggle(400);
 return false;
  });
});