﻿function PopupWindowClass() {
	this.popupOpened = false;
	
	this.centerPopup = function() {
		var windowWidth = document.documentElement.clientWidth;
		var windowHeight = document.documentElement.clientHeight;
		var popupHeight = $("#popupDiv").height();
		var popupWidth = $("#popupDiv").width();
		
		$("#popupDiv").css({
			"position" 	: "absolute",
			"top" 		: (windowHeight - popupHeight) / 2,
			"left" 		: (windowWidth - popupWidth) / 2
		});
		
		$("#backgroundPopup").css({
			"height" : windowHeight
		});
	};
	
	this.openPopup = function(formEl) {
		this.centerPopup();
		this.fillContent(formEl);
		
		if (!this.popupOpened) {
			$("#backgroundPopup").css({
				"opacity": "0.5"
			});
			
			$("#backgroundPopup").fadeIn("slow");
			$("#popupDiv").fadeIn("slow");
			this.popupOpened = true;
		}
	};
	
	this.fillContent = function(formEl) {
		var headerString = formEl.find("input[name=header]").val();
		var contentString = formEl.find("input[name=content]").val();
		var headerString = this.formatString('<img src="{0}" alt="header image" />', headerString);
		
		switch(contentString) {
			case "@pets":
				this.handleCommand_pet();
				break;
				
			default:
				$("#popupDiv").find(".popupContent").html(
					this.formatString('<img src="{0}" alt="content" width="413px" height="334px" />', contentString)
				);
			
				$("#popupDiv").find(".popupFooter").empty();
				break;
		}
		
		$("#popupDiv").find(".popupHeader").html(headerString);
	}
	
	this.closePopup = function() {
		if(popupWindow.popupOpened) {
			$("#backgroundPopup").fadeOut("slow");
			$("#popupDiv").fadeOut("slow");
			popupWindow.popupOpened = false;
		}
	}
	
	this.attachListeners = function() {
		$("span.sb-popup").each(function(i, e) {
			$(e).click(function() {
				
				popupWindow.openPopup($(this).parent().find("form"));
			});
		});
		
		$("#popupDiv").find(".closeButton").click(popupWindow.closePopup);
		$("#backgroundPopup").click(popupWindow.closePopup);
		
		$(document).keypress(function(e) {
			if (e.keyCode == 27 && popupWindow.popupOpened) {
				popupWindow.closePopup();
			}
		});
	};
	
	this.formatString = function(str) {
	    for(i = arguments.length; i > 0; i--) {
	    	 str = str.replace(new RegExp('\\{' + (i-1) + '\\}', 'gm'), arguments[i]);
	    }
	    
	    return str;
	};
	
	// Used for pets view
	this.handleCommand_pet = function() {
		var TOTAL_COUNT = 12;
		var footer = $("#popupDiv").find(".popupFooter");
		var content = $("#popupDiv").find(".popupContent");
		
		footer.empty();
		content.html(this.formatString('<img src="images/pet/{0}.jpg" alt="Image {0}" width="413px" height="334px" />', 0));
		
		for(var i = 1; i <= TOTAL_COUNT; i++) {
			var footer_image = this.formatString('<img src="images/pet/t{0}.jpg" alt="Thumb {0}" />', i - 1);
			var footer_content = this.formatString('<div><a href="#{0}" class="cross-link">{1}</a></div>', i, footer_image);
			footer.append(footer_content);
		}
		
		// One line to clear margins.
		footer.append('<p style="clear: both"></p>');
		this.listenNavThumbs();
	}
	
	this.listenNavThumbs = function() {
		$links = $(".cross-link");
		
		$links.click(function() {
			var image_url = $(this).attr('href').slice(1) - 1;
			var top_image = popupWindow.formatString('<img src="images/pet/{0}.jpg" alt="Image {0}" width="413px" height="334px" />', image_url);
			$("#popupDiv").find(".popupContent").html(top_image);
		});
	}
	
}

var popupWindow = new PopupWindowClass();
$(document).ready(popupWindow.attachListeners);
