CustomBox = Class.create();
CustomBox.prototype = {
	initialize: function(jumpStart) {
		var theBox = new RumbleUI.TheBox();
		
		var allowHide = true;
		
		RumbleUI.TheBox.prototype.updateSendToFriend = function() {
			this.sendToFriendClickable.stopObserving("click");		
			var location;		
			if (escape(window.location).indexOf("JumpStart") != -1) {
				location = escape(window.location).substr(0, escape(window.location).indexOf("JumpStart") -1) + "&JumpStart=" + this.current;
			} else {
				location = window.location + "&JumpStart=" + this.current;
			}

			this.sendToFriendClickable.observe("click", (function(event) {		
				allowHide = false;
				window.location = "mailto:?Subject=A friend has sent you a link to the Mary Jane's Photo Gallery&Body=To see the gallery, follow this link: " 
					+ escape(location);
			}).bind(this));				
		}
		
		RumbleUI.TheBox.prototype.loadBox = function(index, onComplete) {				
		
			this.links = document.getElementsByClassName("thebox-image");				
			
			if (!this.links[index]) {
				return false;
			}
			this.preload(index - 1);
			this.preload(index + 1);
			
			this.popupBox.makePositioned();
			
			this.current = index;
			
			this.updateSendToFriend();
			
			var url = this.links[index].href;
			this.setTitle("Image: " + (index + 1) + " of " + this.links.length);
		
			var popupBox = this.popupBox;
			var overlay = this.overlay;
			var imagePanel = this.imagePanel;
			
			var params = url.toQueryParams();
			var preloaderImage = new Image();
			var image = this.image;		
					
			image.hide();
			image.src = null;
			
			preloaderImage.onload = function() {				
				(params.BoxWidth == null) && (params.BoxWidth = this.width);
				(params.BoxHeight == null) && (params.BoxHeight = this.height);
				
				var pageDimensions = document.getPageDimensions();
	
				popupBox.style.left = ((pageDimensions.width - this.width) / 2) + "px";
				popupBox.style.top = Math.max(40, (pageDimensions.yOffset + (pageDimensions.height / 3) - (this.height / 2))) + "px";
				
				overlay.style.width = imagePanel.style.width = params.BoxWidth + "px";
				overlay.style.height = imagePanel.style.height = params.BoxHeight + "px";
				overlay.style.position = "absolute";
				overlay.style.top = "0px";
				overlay.style.left = "0px";
							
				image.src = this.src;
				image.width = this.width;
				image.height = this.height;
				image.style.position = "absolute";
				image.style.left = Math.round((params.BoxWidth - this.width) / 2) + "px"; 
				image.style.top = Math.round((params.BoxHeight- this.height) / 2) + "px";
				image.show();
				
				if (Prototype.Browser.IE && typeof document.body.style.maxHeight == "undefined" && /\.png/i.test(this.src)) {			
					image.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "',sizingMethod='scale')";
					//TODO: This hardcoded reference to blank.gif needs to be improved
					image.src = "/resource/javascript/rumbleui/image/blank.gif";
				}
	    	
	    	if (onComplete) {
	    		onComplete();
	    	}
	 		}
	 		preloaderImage.src = url; 		
		}		

		RumbleUI.TheBox.prototype.setup = function() {		
			if (this.background) {
				return true;
			}		
		
			this.background = document.createElement("div");
			this.background = Element.extend(this.background);		
			this.background.id = "thebox-background";
			
			this.background.style.top = "0px";
			this.background.style.left = "0px";
			this.background.style.position = "absolute";
			
			this.background.style.width = "100%";
			this.background.style.height = document.body.scrollHeight + "px";
			this.background.innerHTML = "";
		
			document.body.appendChild(this.background);
		
			this.popupBox = document.createElement("div");
			this.popupBox = Element.extend(this.popupBox);
			
			this.imagePanel = document.createElement("div");
			this.imagePanel = Element.extend(this.imagePanel);
		
			this.popupBox.id = "thebox-panel";
			this.imagePanel.id = "thebox-image-panel";
			this.popupBox.style.position = "absolute";
					
			this.popupBox.onclick = this.hide.bind(this);
			this.background.onclick = this.hide.bind(this);
			document.onkeydown = this.hide.bind(this);
		
			this.popupBox.innerHTML = "";
			this.image = document.createElement("img");
			this.image = Element.extend(this.image);
			var controls = document.createElement("div");
			this.titleElement = document.createElement("span");
			this.titleElement = Element.extend(this.titleElement);
			this.title = document.createElement("span");

			this.previousButtonElement = document.createElement("span");
			previousButtonElement = Element.extend(this.previousButtonElement);	
			this.previousButton = document.createElement("span");
			this.previousButton = Element.extend(this.previousButton);		
			
			this.nextButtonElement = document.createElement("span");
			this.nextButtonElement = Element.extend(this.nextButtonElement);
			this.nextButton = document.createElement("span");
			this.nextButton = Element.extend(this.nextButton);
			
			var closeElement = document.createElement("span");
			var close = document.createElement("span");
		
			controls.appendChild(this.titleElement);
			this.titleElement.appendChild(this.title);
			controls.appendChild(previousButtonElement);
			previousButtonElement.appendChild(this.previousButton);
			controls.appendChild(this.nextButtonElement);
			this.nextButtonElement.appendChild(this.nextButton);		
			controls.appendChild(closeElement);
			closeElement.appendChild(close);
			
			controls.className = "thebox-controls";
			this.previousButtonElement.className = "thebox-controls-previous rumbleui-button";
			this.titleElement.className = "thebox-controls-title";
			this.nextButtonElement.className = "thebox-controls-next rumbleui-button";				
			this.previousButton.innerHTML = "◄ Previous";
			closeElement.className = "thebox-controls-close rumbleui-button";
			close.innerHTML = "Close";
			this.nextButton.innerHTML = "Next ►";
			
			this.image.observe("click", (function(event) {
				this.next();
				window.clearSelection();
				Event.stop(event);			
				return false;
			}).bind(this));
			
			this.nextButtonElement.observe("click", (function(event) {	
				this.next();
				window.clearSelection();
				Event.stop(event);			
				return false;
			}).bind(this));
			
			this.previousButtonElement.observe("click", (function(event) {		
				this.previous();
				window.clearSelection();
				Event.stop(event);			
				return false;
			}).bind(this));	

			document.body.appendChild(this.popupBox);
			
			// Send To A Friend
			this.sendToFriendContainer = document.createElement("div");
			this.sendToFriendContainer = Element.extend(this.sendToFriendContainer);
			this.sendToFriendContainer.id = "send-to-a-friend";
			this.popupBox.appendChild(this.sendToFriendContainer);
			
			this.sendToFriendClickable = document.createElement("div");
			this.sendToFriendClickable = Element.extend(this.sendToFriendClickable);
			this.popupBox.appendChild(this.sendToFriendClickable);		
			this.sendToFriendClickable.style.zIndex = "5100";
			this.sendToFriendClickable.style.width = "100px";
			this.sendToFriendClickable.style.height = "100px";
			this.sendToFriendClickable.style.marginTop = "90px";
			this.sendToFriendClickable.style.marginLeft = "-10px";
			this.sendToFriendClickable.style.backgroundImage = "url(/resource/javascript/blank.gif)";
			this.sendToFriendClickable.style.position = "absolute";
			
			this.sendToFriendContainer.innerHTML = RumbleUI.EmbeddedObjects.generateFlashHtml(
				["codebase", "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0",
				"width", "182",
				"height", "166",
				"src", "/resource/flash/send-to-a-friend",
				"wmode", "transparent"]);
				
			this.sendToFriendClickable.observe("click", (function(event) {		
				allowHide = false;
				window.location = "mailto:?Subject=A friend has sent you a link to the Mary Jane's Photo Gallery&Body=To see the gallery, follow this link: " 
				+ escape(window.location) + "&JumpStart=" + this.current;
			}).bind(this));
			
			this.overlay = document.createElement("img");
						
			this.overlay.src = "/resource/image/gallery/frame.png";
			this.overlay.style.width = this.popupBox.getWidth() + "px";
			this.overlay.style.height = this.popupBox.getHeight() + "px";
			this.overlay.className = "frame";
			 
			this.popupBox.appendChild(this.imagePanel);
			this.imagePanel.appendChild(this.image);
			
			this.imagePanel.appendChild(this.overlay);
			this.popupBox.appendChild(controls);
			this.background.hide();
			this.popupBox.hide();
		}
			
		RumbleUI.TheBox.prototype.hide = function() {
			if (allowHide == true) {
				new Effect.Fade(this.background, { duration: 0.2});
				new Effect.Fade(this.popupBox, { duration: 0.3 });
			} else {
				allowHide = true;
			}
		}
		
		RumbleUI.TheBox.prototype.next = function() {
			var nextLink = this.current + 1;
			if (nextLink < this.links.length) { 
				this.loadBox(nextLink);			
			}	else {
				this.hide();
			}
			
			this.updateSendToFriend();	
		}
		
		RumbleUI.TheBox.prototype.previous = function() {
			var previousLink = this.current - 1;
			if (previousLink >= 0) {
				this.loadBox(previousLink);			
			} else {
				this.hide();
			}		
			
			this.updateSendToFriend();		
		}
		
		if (jumpStart != undefined) {
			RumbleUI.TheBox.prototype.setup();				
			RumbleUI.TheBox.prototype.showBackground();	
			
			RumbleUI.TheBox.prototype.loadBox(jumpStart, (function() {
				RumbleUI.TheBox.prototype.show();
			}).bind(RumbleUI.TheBox.prototype));							
		}		
	}
}