var View = {

	autodetect: {
		"head": "#head", 
		"thumbs": "#thumbs"
	},
	area: {},
	innerHeight: 0,
	innerWidth: 0,
	showThumbsButtons: false,

	detect: function(){
		this.innerHeight = (self.innerHeight || (jQuery.boxModel && document.documentElement.clientHeight) || document.body.clientHeight);
		this.innerWidth = (self.innerWidth || (jQuery.boxModel && document.documentElement.clientWidth) || document.body.clientWidth);
		
		this.area["head"] = {
			"height": $("#head").height(),
			"width": this.innerWidth
		};

		this.area["bottomPanel"] = {
			"height": 64,
			"width": this.innerWidth
		};
		
		this.area["slideshowControls"] = {
			"height": $("#slideshowControls").height(),
			"width": $("#slideshowControls").width(),
			"left": Math.floor((this.innerWidth - $("#slideshowControls").width()) / 2)
		};
		
		var thumbsWidth = this.innerWidth - 128;
		if (allowPublicDownload){
			thumbsWidth = this.innerWidth - 187
		}

		this.area["thumbs"] = {
			"height": 54,
			"width": thumbsWidth
		};
		
		this.area["frame"] = {
			"width": 5
		};
		
		var lScrollerLength = album.photos.length * 59 - 5;
		
		this.area["scroller"] = {
			"length": lScrollerLength,
			"left": Math.round((this.area["thumbs"].width - lScrollerLength) / 2),
			"width": lScrollerLength
		};

		this.area["slide"] = {
		    "left": 0,
			"top": this.area["head"].height,
			"height": this.innerHeight,
			"width": this.innerWidth
		};
		
		this.area["slideButton"] = {
			"top": View.area["head"].height + ((this.innerHeight - this.area["head"].height - this.area["bottomPanel"].height - 54) / 2)
		};

		if ((typeof photoViewer == "undefined") || (!photoViewer.fullscreen)){
			this.area["slide"].height = this.innerHeight - this.area["head"].height - this.area["bottomPanel"].height;
		} else {
			this.area["slide"].top = 0;
		}
		

		if(this.area["scroller"].length <= this.area["thumbs"].width){
			this.showThumbsButtons = false;
			this.area["scroller"].minLeft = 0;
		} else {
			this.area["scroller"].left = 37;
			this.area["scroller"].width = this.area["thumbs"].width - 74;
			this.area["scroller"].minLeft = this.area["scroller"].width - this.area["scroller"].length;
			
			this.showThumbsButtons = true;
		}
		
		if(debug){
			this.area["slide"].width = Math.floor(this.area["slide"].width / 3);
			this.area["slide"].left = this.area["slide"].width;
		}
		
		this.area["loadingIndicator"] = {
			"top": (this.area["slide"].height - 30) / 2,
			"left": (this.area["slide"].width - 30)/ 2
		};
		
		

	},
	
	getPhotoSize: function(photo){
		var lMaxPhotoWidth = Math.min(1200, View.area["slide"].width - 140 - (this.area["frame"].width * 2));
		var lMaxPhotoHeight = Math.min(900, View.area["slide"].height - 40 - (this.area["frame"].width * 2));

		var lRatio = photo["width"] / photo["height"];
		var lZoom = 1;
		var lWidth = photo["width"];
		var lHeight = photo["height"];
		
		if (lHeight > lMaxPhotoHeight){
			lZoom = lMaxPhotoHeight / lHeight;
			lWidth = Math.round(lWidth * lZoom);
			lHeight = Math.round(lHeight * lZoom);
		}
		
		if (lWidth > lMaxPhotoWidth){
			lZoom = lMaxPhotoWidth / lWidth;
			lWidth = Math.round(lWidth * lZoom);
			lHeight = Math.round(lHeight * lZoom);
		}
		
		return {
			"width": lWidth,
			"height": lHeight
		};
	}

};