// [ Scripts for markpettitphotography.com ]

$(document).ready(function() {

  // ---- IE doesn't want to load the smallScreen.css stylesheet,
  // ---- so let's twist its arm a little
	jQuery.each(jQuery.browser, function(i) {
		if($.browser.msie){
				var $wWidth = $(window).width();
				var $wHeight = $(window).height();
				if ($wHeight < 800 || $wWidth < 1250){
				
				// var $styleLink = $("<link>");
				// $styleLink.attr ({
				//	type: 'text/css',
				//	rel: 'stylesheet',
				//	media: 'all',
				//	href: 'css/smallScreen'
			//});
			$("link[href='css/styles.css']").remove();
			$("head").append("<link rel='stylesheet' href='css/smallScreen.css' type='text/css' />");
			
		}}
		});
		
  // ---- start out with the Pics subcategories hidden until 
  // ---- Pics is clicked
		var $pics = $('#pics');
		var $picsSub = $('#picsSubcategories');
	  $picsSub.hide(); // start out with subcategories hidden
	  $pics.click(function() {
		$picsSub.fadeIn('slow');
	});
		
  // ---- when a thumbnail is clicked, we grab the thumb's filename and 
  // ---- populate #fullSize with the corresponding image
	// handy variables
	var $fullSize = $('#fullSize');
	var $thumb = $('#thumbs img');
  
 	$thumb.click(function() {
	  var $imgSrc = $(this).attr("src"); // grab the thumb filename
	  var $imgTitle = $(this).attr("title"); // grab the title of the image
	  var $newSrc = $imgSrc.replace('t', 'full'); // change the filename
	    $fullSize.empty(); // remove the previous image
		$fullSize.append('<img src="'+$newSrc+'" title="'+ $imgTitle+'" />'); // replace with the new image and title
	   return false;
	});	
  // ---- end thumb/fullsize filename translation ---- //
  });