(function($){
	//Resize image on ready or resize
	$.fn.supersize = function() {	
		//Invoke the resizenow() function on document ready
		$(document).ready(function() {
			$('#supersize').resizenow(); 
		});
		//Invoke the resizenow() function on browser resize
		$(window).bind("resize", function() {
    		$('#supersize').resizenow(); 
		});
	};
	//Adjust image size
	$.fn.resizenow = function() {
		//Define starting width and height values for the original image
		var startwidth = 1440;  
		var startheight = 956;
		//Define image ratio
		var ratio = startheight/startwidth;
		//Gather browser dimensions
		var browserwidth = $(window).width();
		var browserheight = $(window).height();
		//Resize image to proper ratio
		if ((browserheight/browserwidth) > ratio) {
		    $(this).height(browserheight);
		    $(this).width(browserheight / ratio);
		    $(this).children().height(browserheight);
		    $(this).children().width(browserheight / ratio);
		} else {
		    $(this).width(browserwidth);
		    $(this).height(browserwidth * ratio);
		    $(this).children().width(browserwidth);
		    $(this).children().height(browserwidth * ratio);
		}
		//Make sure the image stays center in the window
		$(this).children().css('left', (browserwidth - $(this).width())/2);
		$(this).children().css('top', (browserheight - $(this).height())/2);
	};
})(jQuery);

$(document).ready(function() {
	//Funtion to create the jQuery carousel tabs - The rotating images showing previous clients work
	$(function() {
		$("#tabs").tabs({event:"mouseover"}).tabs('rotate', 10000, true);
	});
	//Invoking the supersized function on the div with id - supersize. It is the div that contains the large background image
	$("div#supersize").supersize();
});


$(document).ready(function() {
	

	function megaHoverOver(){
		$(this).find(".sub").stop().fadeTo('fast', 1).show();
			
		//Calculate width of all ul's
		(function($) { 
			jQuery.fn.calcSubWidth = function() {
				rowWidth = 0;
				//Calculate row
				$(this).find("ul").each(function() {					
					rowWidth += $(this).width(); 
				});	
			};
		})(jQuery); 
		
		if ( $(this).find(".row").length > 0 ) { //If row exists...
			var biggestRow = 0;	
			//Calculate each row
			$(this).find(".row").each(function() {							   
				$(this).calcSubWidth();
				//Find biggest row
				if(rowWidth > biggestRow) {
					biggestRow = rowWidth;
				}
			});
			//Set width
			$(this).find(".sub").css({'width' :biggestRow});
			$(this).find(".row:last").css({'margin':'0'});
			
		} else { //If row does not exist...
			
			$(this).calcSubWidth();
			//Set Width
			$(this).find(".sub").css({'width' : rowWidth});
			
		}
	}
	
	function megaHoverOut(){ 
	  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
		  $(this).hide(); 
	  });
	}


	var config = {    
		 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
		 interval: 10, // number = milliseconds for onMouseOver polling interval    
		 over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
		 timeout: 50, // number = milliseconds delay before onMouseOut    
		 out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
	};

	$("ul#topnav li .sub").css({'opacity':'0'});
	$("ul#topnav li .sub").stop().fadeTo('fast', 0, function() {
		  $(this).hide(); 
	  });
	$("ul#topnav li").hoverIntent(config);



});


$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});