function BellhavenLayout(){
	this.pictureWidth = 0;
	this.pictureHeight = 0;
	this.pictureElement = null;
	this.pictureImage = null;
	this.totalHeight = 0;
	this.totalWidth = 0;
	this.pictures = new Array();
	this.currentPictureIndex = -1;
	this.nextTimeout = null;
	this.autoNext = 8000;
	this.scaleFit = true;
	this.scaleBorder = 40;
	this.suspendTimeout = false;
	
	/**
	 * Set a new size for the layout, position the elements
	 */
	this.resizeView = function(){
		bellhavenLayout.totalHeight = $(window).height() - 33 - 80;
		bellhavenLayout.totalWidth = $(window).width() - 640;
		
		$('#navigationbox').css('height', bellhavenLayout.totalHeight + 'px');
		$('#contentbox').css('height', bellhavenLayout.totalHeight + 'px');
		$('#contentbox .viewport').css('height', bellhavenLayout.totalHeight + 'px');
		$('#logobox').css('width', $(window).width() + 'px');
		$('#picturebox').css({
			'height': bellhavenLayout.totalHeight + 'px',
			'width': bellhavenLayout.totalWidth + 'px'
		});
		$('#footer').css({
			'top': $(window).height() - 33 + 'px',
			'width': ($(window).width() - 40) + 'px'
		});
		
		if (bellhavenLayout.pictureElement.src) 
			bellhavenLayout.resizePicture();
		
		for (var i = 0; i < bellhavenLayout.pictures.length; i++) {
			bellhavenLayout.pictures[i].selector.style.top = bellhavenLayout.totalHeight - 32 + 'px';
			bellhavenLayout.pictures[i].selector.style.left = (bellhavenLayout.totalWidth - 24 * bellhavenLayout.pictures.length + 24 * i - 8) + 'px';
		}
		
		$('#contentbox').tinyscrollbar();
	};
	
	/**
	 * Load a picture of a certain index
	 * @param {int} Index of picture to load
	 */
	this.loadPicture = function(index){
		if (bellhavenLayout.currentPictureIndex == index) {
			$('#waitbox').hide();
			return;
		}
		
		bellhavenLayout.currentPictureIndex = index;
		
		bellhavenLayout.pictureWidth = bellhavenLayout.pictures[index].width;
		bellhavenLayout.pictureHeight = bellhavenLayout.pictures[index].height;
		
		bellhavenLayout.pictureImage = new Image();
		
		$(bellhavenLayout.pictureImage).load(bellhavenLayout.handleLoadPicture);
		
		bellhavenLayout.pictureImage.src = bellhavenLayout.pictures[index].src;
		
		for (var i = 0; i < bellhavenLayout.pictures.length; i++) {
			if (i == index) {
				$(bellhavenLayout.pictures[i].selector).addClass('selected');
			}
			else {
				$(bellhavenLayout.pictures[i].selector).removeClass('selected');
			}
		}
	}
	
	/**
	 * Handle Display of next picture
	 */
	this.handleNext = function(){
		var nextIndex=bellhavenLayout.currentPictureIndex+1;
		if (nextIndex > bellhavenLayout.pictures.length - 1) 
			nextIndex = 0;
		
		bellhavenLayout.loadPicture(nextIndex);
	}
	
	/**
	 * Handle the Load Picture Event
	 */
	this.handleLoadPicture = function(){
	
		if (bellhavenLayout.nextTimeout) 
			window.clearTimeout(bellhavenLayout.nextTimeout);
		
		$('#waitbox').hide();
		$(bellhavenLayout.pictureElement).hide();
		bellhavenLayout.pictureElement.src = bellhavenLayout.pictureImage.src;
		
		if (bellhavenLayout.scaleFit) 
			bellhavenLayout.pictureElement.className = 'bigpic bordered';
				
		bellhavenLayout.resizePicture();
		
		$(bellhavenLayout.pictureElement).fadeIn(500);
		
		if (!bellhavenLayout.suspendLayout) {
			if (bellhavenLayout.autoNext!=0) {
				bellhavenLayout.nextTimeout = window.setTimeout(bellhavenLayout.handleNext, bellhavenLayout.autoNext);
			}
		}
	};
	
	/**
	 * Starts the auto advance timer
	 */
	this.startTimeout = function(){
		if (bellhavenLayout.autoNext!=0) {
			bellhavenLayout.stopTimeout();
			bellhavenLayout.suspendLayout=false;
		
			bellhavenLayout.nextTimeout = window.setTimeout(bellhavenLayout.handleNext, bellhavenLayout.autoNext);
		}
	}
	
	/**
	 * Stops the auto advance timer, if defined
	 */
	this.stopTimeout = function() {
		if (bellhavenLayout.autoNext!=0) {
			bellhavenLayout.suspendLayout=true;
			if (bellhavenLayout.nextTimeout) {
				window.clearTimeout(bellhavenLayout.nextTimeout);
				bellhavenLayout.nextTimeout=null;
			}
		}
	}
	
	/**
	 * Resize the Picture Element
	 */
	this.resizePicture = function(){
		var pictureWidth = bellhavenLayout.pictureWidth;
		var pictureHeight = bellhavenLayout.pictureHeight;
		var pictureRatio = pictureWidth / pictureHeight;
		var pictureTop = 0;
		var pictureLeft = 0;
		
		if (this.scaleFit) {
			pictureWidth = bellhavenLayout.totalWidth - bellhavenLayout.scaleBorder * 2;
			pictureHeight = pictureWidth / pictureRatio;
			
			if (pictureHeight > (bellhavenLayout.totalHeight - bellhavenLayout.scaleBorder * 2) - 16) {
				pictureHeight = (bellhavenLayout.totalHeight - bellhavenLayout.scaleBorder * 2) - 16;
				pictureWidth = pictureHeight * pictureRatio;
			}
			
			pictureLeft = Math.floor((bellhavenLayout.totalWidth - pictureWidth) / 2);
			pictureTop = Math.floor((bellhavenLayout.totalHeight - pictureHeight) / 2) - 16;
			
		}
		else {
			pictureWidth = bellhavenLayout.totalWidth;
			pictureHeight = pictureWidth / pictureRatio;
			
			if (pictureHeight < bellhavenLayout.totalHeight) {
				pictureHeight = bellhavenLayout.totalHeight;
				pictureWidth = pictureHeight * pictureRatio;
			}
			
			pictureLeft = Math.floor((bellhavenLayout.totalWidth - pictureWidth) / 2);
			pictureTop = Math.floor((bellhavenLayout.totalHeight - pictureHeight) / 3);
		}
		
		$(bellhavenLayout.pictureElement).css({
			'left': pictureLeft + 'px',
			'top': pictureTop + 'px',
			'width': pictureWidth + 'px',
			'height': pictureHeight + 'px'
		})
		
		$("#waitbox").css({
			'left': pictureLeft + pictureWidth / 2 - 64 + 'px',
			'top': pictureTop + pictureHeight / 2 - 64 + 'px'
		})
	};
	
	/**
	 * Adds a picture
	 * @param {Object} src Source of the picture
	 * @param {Object} thumbsrc Source of the picture thumbnail
	 * @param {Object} width Width of the picture
	 * @param {Object} height Height of the picture
	 */
	this.addPicture = function(src, thumbsrc, width, height, uid){
		bellhavenLayout.pictures.push({
			'src': src,
			'thumbsrc': thumbsrc,
			'width': width,
			'height': height,
			'uid': uid
		});
	}
	
	/**
	 * Loads a picture by its uid
	 * @param {Object} uid uid of picture to load
	 */
	this.loadPictureUid = function(uid) {
		for(i=0;i<bellhavenLayout.pictures.length;i++) {
			if (bellhavenLayout.pictures[i].uid==uid) {
				$('#waitbox').show();
				bellhavenLayout.loadPicture(i);
			}
		}
	}
	
	/**
	 * Creates the initial layout
	 */
	this.createLayout = function(){	
		bellhavenLayout.pictureElement = document.createElement('img');
		bellhavenLayout.pictureElement.style.position = 'absolute';
		bellhavenLayout.pictureElement.style.display = 'none';
		bellhavenLayout.pictureElement.className = 'bigpic';
		$('#picturebox').append(bellhavenLayout.pictureElement);
	
		for (var i = 0; i < bellhavenLayout.pictures.length; i++) {
			var pictureSelector = document.createElement('div');
			pictureSelector.className = 'selector';
			pictureSelector.pictureIndex = i;
			pictureSelector.onclick = function(){
				$('#waitbox').show();
				bellhavenLayout.loadPicture(this.pictureIndex);
			}
			
			var thumbBubble = document.createElement('div');
			thumbBubble.className = 'bubble';
			
			var thumbImage = document.createElement('img');
			thumbImage.src=bellhavenLayout.pictures[i].thumbsrc;
			
			$('#picturebox').append(pictureSelector);
			$(pictureSelector).append(thumbBubble);
			$(thumbBubble).append(thumbImage);
			bellhavenLayout.pictures[i].selector=pictureSelector;
		};
		
		bellhavenLayout.resizeView();
		
		$(window).resize(bellhavenLayout.resizeView);
		
		$('#navigationbox li').hover(function(){
			$(this).addClass('sel').children('ul').fadeIn(250);
		}, function(){
			$(this).removeClass('sel').children('ul').stop(true, true).hide();
		});
		
		if (bellhavenLayout.pictures.length > 0) {
			$(window).load(function(){
				bellhavenLayout.loadPicture(0);
				
				$('.selector').hover(function(){
					bellhavenLayout.stopTimeout();
					$(this).find('div').show();
				}, function(){
					bellhavenLayout.startTimeout();
					$(this).find('div').hide();
				})
			});
		}
	}
}