var Thumbnails = Base.extend({

	constructor: function(theViewer) {
		this.VIEWER = theViewer;
		this.THUMBNAIL_SIZE = 45;
		this.SELECTED_THUMBNAIL_BORDER_WIDTH = 7;
		this.THUMBNAIL_ARROW_WIDTH = 25;
		this.NUMBER_OF_THUMBNAILS = 0;
		this.NUMBER_OF_VISIBLE_THUMBNAILS = 0;
		this.NUMBER_OF_SCROLLED_THUMBNAILS = 0;
		this.CURRENT_PHOTO_INDEX = -1;
		this.positionEverything();
		this.injectBehaviour();
	},
	
	positionEverything : function () {
		this.NUMBER_OF_THUMBNAILS = $("#thumbnails li").length;
		var myWidth = $(window).width();
		myWidth -= $("#album_info").width() + 1.5 * parseInt($("#album_info").css("right"));
		this.NUMBER_OF_VISIBLE_THUMBNAILS = Math.floor(myWidth / this.THUMBNAIL_SIZE);
		var myLeft = 0;
		$("#thumbnails_bwd").css("visibility", "hidden");
		$("#thumbnails_fwd").css("visibility", "hidden");
		if (this.NUMBER_OF_SCROLLED_THUMBNAILS > 0) {
			myWidth -= this.THUMBNAIL_ARROW_WIDTH;
			myWidth = this.actualSpaceForVisibleThumbnails(myWidth);
			myLeft += this.THUMBNAIL_ARROW_WIDTH;
			$("#thumbnails_bwd").css("visibility", "visible");
		}		
		if (this.NUMBER_OF_THUMBNAILS - this.NUMBER_OF_SCROLLED_THUMBNAILS > this.NUMBER_OF_VISIBLE_THUMBNAILS) {
			myWidth -= this.THUMBNAIL_ARROW_WIDTH;
			myWidth = this.actualSpaceForVisibleThumbnails(myWidth);
			$("#thumbnails_fwd").css("visibility", "visible");
			$("#thumbnails_fwd").css("left", myWidth + myLeft);
		}
		$("#thumbnails ul").css("overflow" , "hidden");
		$("#thumbnails ul").css("width", myWidth + "px");
		$("#thumbnails ul").css("height", this.SELECTED_THUMBNAIL_BORDER_WIDTH + this.THUMBNAIL_SIZE + "px");
		$("#thumbnails ul").css("padding-left", myLeft + "px");
	},
	
	actualSpaceForVisibleThumbnails : function(theCurrentSpace) {
		var myNewWidth = Math.floor(theCurrentSpace / this.THUMBNAIL_SIZE) * this.THUMBNAIL_SIZE;
		this.NUMBER_OF_VISIBLE_THUMBNAILS = Math.floor(myNewWidth / this.THUMBNAIL_SIZE);
		return myNewWidth;
	},
	
	injectBehaviour : function() {
		var me = this;
		$("#thumbnails_fwd").click(function() {
			var i = 0;
			$("#thumbnails li").filter(function(index) {
				if (index < me.NUMBER_OF_SCROLLED_THUMBNAILS + me.NUMBER_OF_VISIBLE_THUMBNAILS) {
					i++;
					return 1;
				} else {
					return 0;
				}
			}).css("display", "none");
			me.NUMBER_OF_SCROLLED_THUMBNAILS += i;
			me.positionEverything();
		});
		$("#thumbnails_bwd").click(function() {
			var i = 0;
			$("#thumbnails li").filter(function(index) {
				if (index < Math.min(me.NUMBER_OF_SCROLLED_THUMBNAILS, me.NUMBER_OF_VISIBLE_THUMBNAILS)) {
					i++;
					return 1;
				} else {
					return 0;
				}
			}).css("display", "block");
			me.NUMBER_OF_SCROLLED_THUMBNAILS -= i;
			me.positionEverything();
		});
		var me = this;
		$("#thumbnails li").filter(function(index) {
			$(this).click(function() {
				if (me.VIEWER.busy() == 0) {
					if (index > me.CURRENT_PHOTO_INDEX) {
						me.CURRENT_PHOTO_INDEX = index;
						me.highlightSelected(index);
						me.VIEWER.show($(this).attr("fullsize"), $(this).attr("phototitle"), "fwd");
					} else if (index < me.CURRENT_PHOTO_INDEX) {
						me.CURRENT_PHOTO_INDEX = index;
						me.highlightSelected(index);
						me.VIEWER.show($(this).attr("fullsize"), $(this).attr("phototitle"), "bwd");
					}
				}
			});
		});
	},
	
	highlightSelected : function(theIndex) {
		$("#thumbnails li").filter(function(index) {
			if (index == theIndex) {
				$(this).attr("class", "selected");
			} else {
				$(this).attr("class", "");
			}
		});
	},
	
	next : function() {
		this.CURRENT_PHOTO_INDEX++;
		this.CURRENT_PHOTO_INDEX %= this.NUMBER_OF_THUMBNAILS;
		var me = this;
		$("#thumbnails li").filter(function(index) {
			if (index == me.CURRENT_PHOTO_INDEX) {
				me.highlightSelected(index);
				me.VIEWER.show($(this).attr("fullsize"), $(this).attr("phototitle"), "fwd");
			}
		});
	},
	
	previous : function() {
		this.CURRENT_PHOTO_INDEX--;
		if (this.CURRENT_PHOTO_INDEX < 0) {
			this.CURRENT_PHOTO_INDEX = this.NUMBER_OF_THUMBNAILS - 1;
		}
		var me = this;
		$("#thumbnails li").filter(function(index) {
			if (index == me.CURRENT_PHOTO_INDEX) {
				me.highlightSelected(index);
				me.VIEWER.show($(this).attr("fullsize"), $(this).attr("phototitle"), "bwd");
			}
		});
	},
	
	onResize : function() {
		this.positionEverything();
		var me = this;
		$("#thumbnails li").filter(function(index) {
			if (index == me.CURRENT_PHOTO_INDEX && me.VIEWER.busy() == 0) {
				me.VIEWER.show($(this).attr("fullsize"), $(this).attr("phototitle"), "fwd");
			}
		});
	}

});