$(document).ready(function(){

	//getImage variable 1 is the partial name of the image. variable two is the div that holds the image. so if you need to add
	//another panel, you also need to name your images whatever number plus th (9th.jpg) and your large image would be 9large.jpg
    getImage('1', 'imageHolder');
	getImage('9', 'armyLarge');

	//previous and next only works for two at the moment.
	$('a#previous').click(function() {
$('#details').empty();
 $('#tabs').animate({
top: "0px"

}, { "duration": 750, "easing": "expoinout" });
  $('#portfolioHolder').animate({
top: "0px"

}, { "duration": 750, "easing": "expoinout" });
$("#details").append('<a href="roofing-projects.html">link</a>');
});
$('a#next').click(function() {
$('#details').empty();
 $('#tabs').animate({
top: "-295px"

}, { "duration": 750, "easing": "expoinout" });
 $("#details").append('<a href="roofing-projects.html">link</a>');
 $('#portfolioHolder').animate({
top: "-220px"

}, { "duration": 750, "easing": "expoinout" });
});

		});
function getImage(imageName,location){
	var locatonName = '#' + location;
	var title = $('#image' + imageName ).attr("id");
	var check = "image" + imageName;
	if (title==check){
		return false;
	}

var img = new Image();

  
  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
		$(locatonName).empty();
      // set the image hidden by default    
      $(this).hide();
    
      // with the holding div #loader, apply:
      $(locatonName)
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
    
      // fade our image in to create a nice effect
      $(this).fadeIn();
    })
    
    // if there was an error loading the image, react accordingly
    .error(function () {
      alert("error");
    })
    
    // *finally*, set the src attribute of the new image to our image
    
 .attr({
  src: 'images/' + imageName + 'large.jpg',
  title: 'Roofing images',
  alt: 'portfolio images',
  id: 'image' + imageName
});
	}