// When the document loads do everything inside here ...
$(document).ready(function(){
  
  // When a link is clicked
  $("a.tab").click(function () {
	  
	  
	  // switch all tabs off
	  $(".active").removeClass("active");
	  
	  // switch this tab on
	  $(this).addClass("active");
	  
	  // slide all content up
	  $(".content").slideUp();
	  
	  // slide this content up
	  var content_show = $(this).attr("title");
	  $("#"+content_show).slideDown();
	
  });

var $arr = $('#content').find("img");
for($i=0; $i<$arr.length; $i++) {
					
	if($arr[$i].width > 500) {
		var $ratio = $arr[$i].height/$arr[$i].width;
		$new_height = $ratio * 500;
		$arr[$i].style.width = "500px";
		$arr[$i].style.height = Math.round($new_height)+"px";
	}
	else if($arr[$i].width < 500) {
		$arr[$i].style.width = $arr[$i].width+"px";
		$arr[$i].style.height = $arr[$i].height+"px";
		}								
	}
  
});