var Viewer = Base.extend({

	constructor: function() {
		this.SCROLL_IN_T = 800;
		this.SCROLL_OUT_T = 500;
		this.FWD_BWD_BUTTON_SIZE = 23;
		this.TITLE_HEIGHT = 0;
		this.BUSY = 0;
		this.determineTitleHeight();
		this.addViewBox();
	},
	
	linkThumbnails : function(theThumbnails) {
		this.THUMBNAILS = theThumbnails;
	},
	
	start : function() {
		this.THUMBNAILS.next();
	},
	
	determineTitleHeight : function() {
		var myTitle = document.createElement('div');
		$(myTitle).attr("id", "title");
		$(myTitle).html("Lorem Ipsum");
		$("#viewer").append(myTitle);
		this.TITLE_HEIGHT = parseInt($(myTitle).height()) + parseInt($(myTitle).css("paddingTop"));
		$(myTitle).remove();
	},
	
	addViewBox : function() {
		var myViewBox = document.createElement('div');
		$(myViewBox).attr("id", "viewBox");
		$(myViewBox).css("height", $(window).height() - parseInt($("#thumbnails").css("height")) - parseInt($("#viewer").css("top"))); 
		$("#viewer").append(myViewBox);
	},
	
	removeNavigation : function() {
		$("#bwdButton").remove();
		$("#fwdButton").remove();
	},
	
	addNavigation : function() {
		var myBwdButton = document.createElement('div');
		$(myBwdButton).attr("id", "bwdButton");
		$(myBwdButton).css("top", parseInt($("#viewer").css("top")) + parseInt($(this.CURRENT_PHOTO).css("top")) + "px");
		$(myBwdButton).css("height", $(this.CURRENT_PHOTO).height() + "px");
		$("body").append(myBwdButton);
		$(myBwdButton).css("background-position",
			parseInt($(this.CURRENT_PHOTO).css("left")) / 2 + "px "
		+ parseInt(parseInt($(this.CURRENT_PHOTO).height()) / 2 - this.FWD_BWD_BUTTON_SIZE) + "px"
			);
		var me = this;
		$(myBwdButton).click(function() {
			me.THUMBNAILS.previous();
		});	
		var myFwdButton = document.createElement('div');
		$(myFwdButton).attr("id", "fwdButton");
		$(myFwdButton).css("top", parseInt($("#viewer").css("top")) + parseInt($(this.CURRENT_PHOTO).css("top")) + "px");
		$(myFwdButton).css("height", $(this.CURRENT_PHOTO).height() + "px");
		$("body").append(myFwdButton);
		$(myFwdButton).css("background-position",
			$(this.CURRENT_PHOTO).width() / 2 - this.FWD_BWD_BUTTON_SIZE
		+ (parseInt($(myFwdButton).css("width")) - $(this.CURRENT_PHOTO).width()/2)/2
		+	"px "
		+ parseInt(parseInt($(this.CURRENT_PHOTO).height()) / 2 - this.FWD_BWD_BUTTON_SIZE) + "px"
			);
		var me = this;
		$(myFwdButton).click(function() {
			me.THUMBNAILS.next();
		});	
	},
	
	show : function(theImageToLoad, theTitle, theDirection) {
		this.BUSY = 1;
		this.removeNavigation();
		this.hideTitle();
		this.showLoadingAnimation();
		var myDirection = theDirection == undefined ? "fwd" : theDirection;
		var myImg = document.createElement('img');
		var myAvoidCacheString = "";
		if (!jQuery.support.objectAll) {
			myAvoidCacheString = "?id=" + Math.floor(Math.random() * 999999);
		}
		$(myImg).attr("src", theImageToLoad + myAvoidCacheString);
		var me = this;
		$(myImg).load(function() {
			var myOriginalHeight = $(myImg).height();
			var myOriginalWidth = $(myImg).width();
			var myMaxHeight = -1.5 * parseInt(me.TITLE_HEIGHT) + $(window).height() - parseInt($("#thumbnails").css("height")) - parseInt($("#viewer").css("top"));
			var myMaxWidth = $(window).width() - 5 * me.FWD_BWD_BUTTON_SIZE;
			var myMaxHeightFactor = myMaxHeight / myOriginalHeight;
			var myMaxWidthFactor = myMaxWidth / myOriginalWidth;
			if (myMaxHeightFactor < myMaxWidthFactor) {
				myMaxWidth = myOriginalWidth *= myMaxHeightFactor;
			} else {
				myMaxHeight = myOriginalHeight *= myMaxWidthFactor;
			}
			$(myImg).css("max-height", myMaxHeight + "px");
			$(myImg).css("max-width", myMaxWidth + "px");
			var myTop = parseInt($("#viewBox").height()) / 2 - parseInt($(myImg).height()) / 2 - parseInt(me.TITLE_HEIGHT);
			myTop = Math.max(0, myTop);
			$(myImg).css("top",  myTop + "px");
			if (me.CURRENT_PHOTO != undefined && myDirection == "fwd") {
				$(me.CURRENT_PHOTO).animate(
					{left: -2 * parseInt($(me.CURRENT_PHOTO).width()) + "px"},
					this.SCROLL_OUT_T,
					"linear",
					function() {
						$(this).remove();
					}
				);
			} else if (me.CURRENT_PHOTO != undefined && myDirection == "bwd") {
				$(me.CURRENT_PHOTO).animate(
					{left: parseInt($("body").width()) + parseInt($(me.CURRENT_PHOTO).width()) + "px"},
					this.SCROLL_OUT_T,
					"linear",
					function() {
						$(this).remove();
					}
				);
			}
			$(myImg).animate(
				{left: parseInt($("#viewBox").width())/2 - parseInt($(myImg).width())/2 + "px"},
				this.SCROLL_IN_T,
				"swing",
				function() {
					me.CURRENT_PHOTO = myImg;
					me.BUSY = 0;
					me.addNavigation();
					me.showTitle(theTitle);
				}
			);
			me.hideLoadingAnimation();
		});
		$(myImg).css("position", "absolute");
		$(myImg).css("top", "0");
		if (myDirection == "fwd") {
			$(myImg).css("left", $("body").width());
		} else {
			$(myImg).css("right", $("body").width());
		}
		$("#viewBox").append(myImg);
	},
	
	busy : function() {
		return this.BUSY;
	},
	
	showLoadingAnimation : function() {
		var myLoader = document.createElement('img');
		$(myLoader).attr("src", "layout/images/loading.gif");
		$(myLoader).attr("id", "loader");
		$("#viewBox").append(myLoader);
		$(myLoader).css("left", $("#viewer").width()/2 - $("#loader").width()/2 + "px");
		$(myLoader).css("top", $(document).height()/2 - $("#loader").height() + "px");
		$(myLoader).css("display", "none");
		$(myLoader).fadeIn("slow");
	},
	
	hideLoadingAnimation : function() {
		$("#loader").remove();
	},
	
	showTitle : function(theTitle) {
		var myTitle = document.createElement('div');
		$(myTitle).attr("id", "title");
		$(myTitle).html(theTitle);
		$("#viewer").append(myTitle);
		$(myTitle).css("top", $(this.CURRENT_PHOTO).position().top + $(this.CURRENT_PHOTO).height() - $(myTitle).height() - parseInt($(myTitle).css("paddingTop")) + "px");
		$(myTitle).css("left", $(this.CURRENT_PHOTO).position().left + $(this.CURRENT_PHOTO).width()/2 - $(myTitle).width()/2 + "px");
		$(myTitle).animate(
			{top: $(this.CURRENT_PHOTO).position().top + $(this.CURRENT_PHOTO).height() + "px"},
			500,
			"swing",
			function() {}
		);
	},
	
	hideTitle : function() {
		$("#title").remove();
	},
	
	onResize : function() {
		$("#viewBox").css("height", $(window).height() - parseInt($("#thumbnails").css("height")) - parseInt($("#viewer").css("top")));
	}

});