function resizeFrame() 
{
	//Define image ratio
	var ratio = 1080/1920;
	
	//Gather browser and current image size
	var imagewidth = 1920;
	var imageheight = 1080;
	var browserwidth = $(window).width();
	var browserheight = $(window).height();
	var offset;

	$("#container").css('left',(browserwidth < 1258) ? "630px" : "50%");
	$("#container").css('top',(browserheight < 700) ? "350px" : "50%");

	//Resize image to proper ratio
	if ((browserheight/browserwidth) > ratio){
		$(".background_image").height(browserheight);
		$(".background_image").width(browserheight / ratio);
		$(".background_image").children().height(browserheight);
		$(".background_image").children().width(browserheight / ratio);
	} else {
		$(".background_image").width(browserwidth);
		$(".background_image").height(browserwidth * ratio);
		$(".background_image").children().width(browserwidth);
		$(".background_image").children().height(browserwidth * ratio);
	}			
}

$(document).ready(function() {
	$(function() {		
		jQuery.event.add(window, "load", resizeFrame);
		jQuery.event.add(window, "resize", resizeFrame);
		
		// $('.accordion').delay(500).slideDown(400);
		
		Cufon.replace('h1', { fontFamily: 'Sansa-Light' });
		Cufon.replace('.image-content a', { fontFamily: 'Sansa-Normal' });

		
		//Cufon.CSS.ready(function() {
								 
			var current_item = '';
			
			$(".main_item").each(function(){
				var aId = $(this).attr('id').split('_');
				var name = '#child_from_' + aId[1];

				if($(name).length != 0){	// ALS SUBMENU BESTAAT

					var menu_item_pos_left = ($(this).position().left);
					var menu_item_width = $(this).width();
					
					var sub_menu_pos = menu_item_pos_left + (0.5 * menu_item_width) - (0.5 * $(name).width());
					$(name).css('left',(sub_menu_pos + 2) + 'px');
					
					$(this).mouseover(function() {
						
						current_item = this;
						
						$(".main_item").each(function()
						{
							var aId2 = $(this).attr('id').split('_');
							var name2 = '#child_from_' + aId2[1];
							if($(name2).length != 0 && this != current_item){	// ALS SUBMENU BESTAAT
								$(name2).hide();
							}
							
						})
						
						$(name).show();
					})
					
					$(this).mouseout(function() {
						// $(name).fadeOut(200);
					})
				} else {
					$(this).mouseover(function() {
						
						current_item = this;
						
						$(".main_item").each(function()
						{
							var aId2 = $(this).attr('id').split('_');
							var name2 = '#child_from_' + aId2[1];
							if($(name2).length != 0 && this != current_item){	// ALS SUBMENU BESTAAT
								$(name2).hide();
							}
							
						})
						
						$(name).show();
					})
				}
				
				$("#container_background").mouseover(function() {
					if(current_item)
					{
						$(".main_item").each(function()
						{
							var aId = $(this).attr('id').split('_');
							var name = '#child_from_' + aId[1];
							if($(name).length != 0){	// ALS SUBMENU BESTAAT
								$(name).hide();
							}
						})
						current_item = '';
					}										  
				})
			})	 
		// })
		
		$(".sub_menu").corner("10px bottom");

		$('.slideshow').cycle({
			fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});
	});

	$(".main_view").hover(
		function(){
			$('.paging').fadeIn();
		},
		function(){
			$('.paging').fadeOut()
		}
	);
	
	//$(".paging").show();
	$(".paging a:first").addClass("active");
	
	//Get size of the image, how many images 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});
	$(".image-content").css({'width' : imageReelWidth});
	
	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 );
	
		$(".image-content").animate({
			left: -image_reelPosition
		}, 500 );
	};
	
	//Rotation  and Timing Event
	rotateSwitch = function(){
		play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
			$active = $('.paging a.active').next(); //Move to the next paging
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 4000); //Timer speed in milliseconds (7 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation timer
	});
	
	//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 timer
		return false; //Prevent browser jump to link anchor
	});

});