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)
		};
		
		this.area["thumbs"] = {
			"height": 54,
			"width": this.innerWidth - 128
		};
		
		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"] = {
			"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 (!Album.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(Album.debug){
			this.area["slide"].width = this.area["slide"].width / 2;
		}
		
		this.area["loadingIndicator"] = {
			"top": (this.area["slide"].height - 30) / 2,
			"left": (this.area["slide"].width - 30)/ 2
		};
		
		

	},
	
	getPhotoSize: function(pPhotoID){
		var lPhoto = Album.photos[pPhotoID];

		var lMaxPhotoWidth = View.area["slide"].width - 140 - (this.area["frame"].width * 2);
		var lMaxPhotoHeight = View.area["slide"].height - 40 - (this.area["frame"].width * 2);

		var lRatio = lPhoto["width"] / lPhoto["height"];
		var lZoom = 1;
		var lWidth = lPhoto["width"];
		var lHeight = lPhoto["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
		};
	}

};