/*this will start the whole function on page load*/
$(function(){
/*Start of script*/


	var numberofpics = Number($('.bg_pics').attr('id'));
	var ratio = 1.333;
	var h;
	var w;
	var de;

	creator();
	/*this is the function that will create the images to be scaled, it puts the actual markup on the page. Be it for the initial load, or subsequent loads when the randomizer button is clicked*/
	function creator(){
		var rnd = '<img src="bg/' + Math.ceil(Math.random()* numberofpics) + '.jpg" alt="" />';
		$('.fs_bg').html(rnd);
	}
	
	resizer();
	/*Listen for the window to be resized and then fire our resizer function on line 21*/
	$(window).bind('resize', function() {
		resizer();
	})

	/*Assign the viewport height ('h') and width ('w') variables via the 'getPageSize' function. Then compare the ratio of the viewport to the ratio of the image as defined on line 2, and scale the image accordingly*/
	function resizer(){
		getPageSize();
		pRatio = w / h;
		//alert([pageHeight, pageWidth, pRatio]);

		var hOffset = ((Number(h*ratio))-w )/2 * -1;
		var vOffset = ((Number(w/ratio))-h )/2 * -1;
		if( pRatio > ratio ){
			$('.fs_bg img').css({'width' : Number(w - vOffset)  + 'px', 'height': Number(w/ratio) + 'px', 'top': vOffset + 'px', 'position':'relative'});
		}else{
			$('.fs_bg img').css({'height' : Number(h - hOffset) + 'px', 'width' : Number(h*ratio) + 'px', 'left': hOffset + 'px', 'position':'relative'});
		}
	}
	
	/*listen for ANY element with a class of 'random' to be clicked and call the 'creator' function on line 5*/
	$('.random').click(function(){
		creator();
		resizer();
		
		opacity();
		return false;
	});
	
	/* this is fired to get the viewport height and width and assign them to the variables of 'h' and 'w'*/
	function getPageSize(){
        de = document.documentElement;
        w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
        h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
        arrayPageSize = new Array(w,h) 
        return arrayPageSize;
    }
opacity();
function opacity(){
	$('.fs_bg img').css({'opacity':'0.6'});
}
/*end of script*/
});