function preLoad()
 {
 	$('.thumbs li span').ready( function() // for insanity purpose so populate thumbs doesn't fail which is required for the later part  ; )
	{
		populateThumbs();
	 	$('.thumbs li img.thumbImg').ready( function()
	 	{
	 		var thumbs = $('.thumbs li img.thumbImg'); 
	 		var loadingImg = '<img class="loader" src="imgs/thumb-spinner.gif">';
			var checkImg;
			
	 		for (i=0; i<thumbs.length; i++)
		 	{
		 		checkImg = new Image();
		 		checkImg.src = $(thumbs[i]).attr('src');
		 		
		 		if(!checkImg.complete)
		 		{
		 			$(thumbs[i]).hide();
		 			$(thumbs[i]).parent().append(loadingImg);
		 		}
		 	}
	 	});
	});
 
 	$('.screen li span').ready( function() 
 	{
 		populateImages();
 		
 		var images = $('.screen li img');
	 	var loadingImg = '<img class="loader" src="imgs/slide-spinner.gif">';
		var checkImg; 		
	
 		for (i=0; i<images.length; i++)
	 	{
	 		checkImg = new Image();
		 	checkImg.src = $(images[i]).attr('src');
	 		if(!checkImg.complete)
	 		{
		 		$(images[i]).hide();
		 		$(images[i]).parent().append(loadingImg);
		 		
		 		// images and thumbs are the same src anyways so we'll just use this one event for both.
		 		// nevermind since we need the parent/this stuff and I would rather not parse out ID names
		 		// nm looks like I'm going to have to anyways : \ lol...
		 		$(images[i]).imagesLoaded( function()
		 		{	
		 			$('img.loader' ,$(this).parent()).hide();
		 			$(this).show();
		 			
		 			var id = $(this).parent().attr('id');
		 			id = id.substring(1, id.length); // remove the s at the front
		 			
		 			var x = $('#t'+id).parent();
		 			var y = $('img.loader', x);
		 			
		 			$(y).hide();
		 			var z = $('#t'+id+' img')[0];
		 			$(z).show();
		 		});
	 		}	
		 }
 	});
 	
 }
 
 function populateImages()
 {
 	var spots = $('.screen li span');
 	var count = spots.length;
 	var html = "";
 	var containerWidth = getContainerWidth();
 	
 	//console.log('Container Width: '+containerWidth);
 	
 	for (i=0; i<count; i++)
 	{
 		if (containerWidth == 958) // normal site
	 		html = '<img src="imgs/portafolio/'+(i+1)+'.JPG">';
	 	else // ipod site
	 		html = '<img src="imgs/iphone/'+(i+1)+'.JPG">';
	 	$(spots[i]).append(html);
 	}
 }
 
 function populateThumbs()
 { 	
 	var thumbs = $('.thumbs li span');
 	var WIDTH = $('.thumb')[0].offsetWidth;
 	var HEIGHT = $('.thumb')[0].offsetHeight;
 	var html = '';
 	var containerWidth = getContainerWidth();
 	
 	for (i=0; i<thumbs.length; i++)
 	{
 		var width = $('.port')[0].offsetWidth;
		var height = $('.screen')[0].offsetHeight;

 		if ($(thumbs[i]).hasClass('portrait'))
 		{
 			if (containerWidth == 958) // normal site
 				html = '<img class="thumbImg" width="'+WIDTH+'" src="imgs/portafolio/'+(i+1)+'.JPG">';
		 	else // ipod site
		 		html = '<img class="thumbImg" width="'+WIDTH+'" src="imgs/iphone/'+(i+1)+'.JPG">';
			//$('.screen li img[src="imgs/portafolio/'+(i+1)+'.JPG"]').attr('height', height);
 		}
 		else
 		{
 			if (containerWidth == 958) // normal site
	 			html = '<img class="thumbImg" height="'+HEIGHT+'" src="imgs/portafolio/'+(i+1)+'.JPG">';
	 		else
	 			html = '<img class="thumbImg" height="'+HEIGHT+'" src="imgs/iphone/'+(i+1)+'.JPG">';
 			//$('.screen li img[src="imgs/portafolio/'+(i+1)+'.JPG"]').attr('width', width);
 		}
 		
 		$(thumbs[i]).html(html);
 	}
 }
 
function ieBandaids()
{
	// bandaids for IE navbar
    var ieVersion = getInternetExplorerVersion();
	if (ieVersion > -1)
	{
		// may not work on ie7/8 ?
		$('#ieNavFix').css('background', 'white').css('filter', 'alpha(opacity=0)');
	}
}

function protectImages()
{
	var s = $('.screen')[0];
	var img = "<img class='noDownload' src='imgs/blank.gif' width="+s.offsetWidth+" height="+s.offsetHeight+">";
	$('.slide').append(img);
	
	img = "<img class='noDownload' src='imgs/blank.gif'>";
	var thumbs = $('.thumbs li span').append(img);;
}

var endReel;
var thumbNavWidth;
function initNavigation()
{
	var count = $('.thumb').length;
	var width = $('.thumb')[0].offsetWidth;
	var mRight = $('.thumb').parent().css('margin-right');
	mRight = mRight.substring(0,mRight.length-2); // remove px @ the end
	thumbNavWidth = width+parseInt(mRight);
	
	// the width of the thumb determines the amount of thumbs
	var thumbCount = {
		80:10,
		60:6,
		54:4
	}
	
	endReel = thumbNavWidth*count; // total reel length
	endReel -= thumbCount[width]*thumbNavWidth; // subtract the amount of thumbs positions and their width
	endReel = endReel*-1; // turn the number into a negative ;)
}

function setMainPicturesSize()
{
	//console.log('set main picture size');
	var width = $('.port')[0].offsetWidth;
	var height = $('.screen')[0].offsetHeight;
	var img;
	
	$('.screen li img').each(function()
	{
		if (!$(this).hasClass('loader') && $(this).attr('src') != 'imgs/blank.gif')
		{
			if ($(this).hasClass('portrait'))
				$(this).attr('height', height);
			else
				$(this).attr('width', width);
		}
		
		/*
		if (!$(this).hasClass('loader') && $(this).attr('src') != 'imgs/blank.gif')
		{
			if (this.offsetWidth > this.offsetHeight)
				$(this).attr('width', width);
			else
				$(this).attr('height', height);
		}
		*/
	});
}

 // End Functions