$(document).ready(function() {
	var browserWidth = $(window).width();
	
	$(window).bind('orientationchange',function(event){
		if(window.orientation == 0){
			var ori = "portrait";
		}else{
			var ori = "landscape";
		}
		
		window.setTimeout(function() {
			var newBrowserWidth = $(window).width();
			$('canvas.image').each(function() {
				canvasImage(this.id,newBrowserWidth);
			});
			$('#orient').append(id +' '+ newBrowserWidth);
		},500);
	});	

	function canvasImage(id,browserWidth) {
	
		// Default
		var imgSizeLogo	=	327;
		var imgSizeMain	=	370;
		
		if (browserWidth == 320) {
			var imgSizeLogo = 300;
			var imgSizeMain	=	305;
		}

		if (browserWidth == 480) {
			var imgSizeMain	=	480;
		}		
		
		if (browserWidth == 533) {
			var imgSizeMain	=	250;
		}							
	
		if (id == 'logoVV') {
			var canvasWidth	=	imgSizeLogo;							
		} else {
			var canvasWidth	=	imgSizeMain;
		}
	
		var imageURL		=	$('canvas#'+id).attr('rel').toLowerCase();
		var canvas			=	document.getElementById(id); // Finner ID på canvas det skal jobbes med
		var context			=	canvas.getContext("2d"); // Setter context til canvas
		var image			=	new Image(); 
		image.src			=	imageURL;
		
		image.onload		=	function() {
			var canvasHeight 	=	canvasWidth/image.width;
			var canvasHeight 	=	image.height*canvasHeight;						
			canvas.width		=	canvasWidth;
			canvas.height		=	canvasHeight;
			
			context.drawImage(image, 0,0, canvasWidth,canvasHeight);
		};
	}

	// Finner alle CANVAS-tagger og sjekker om den har klassen "image"
	$('canvas.image').each(function() {
		canvasImage(this.id,browserWidth);
	});	

});