RumbleUI.TheBox = Class.create();
RumbleUI.TheBox.prototype = {
	
	image: null,
	title: null,
	background: null,
	links: null,
	
	initialize: function(options) {

		this.options = {
    	containerElement: document,
    	showControls: true,
    	showPosition: true,
    	showPrevious: true,
			showNext: true,
    	showClose: true,
    	relationGrouping: false,
    	createControlsFunction: null
    };
        
    Object.extend(this.options, options || { });

		var count = 0;
		
		this.links = $A(this.options.containerElement.getElementsByClassName("thebox-image"));				
			
		this.links.each((function(link) {
			link.number = ++count;
			link.onclick = function() {
				return false;
			}
			link.onmousedown = (function(event) {
				this.setup();				
				this.showBackground();
				this.show();			
				this.loadBox(link.number - 1);				
				return false;
			}).bind(this);
		}).bind(this));
	},
	
	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);
						
		this.image.observe("click", (function(event) {
			this.next();
			window.clearSelection();
			Event.stop(event);			
			return false;
		}).bind(this));
		
		
		document.body.appendChild(this.popupBox);
		this.popupBox.appendChild(this.imagePanel);
		this.imagePanel.appendChild(this.image);
		this.background.hide();
		this.popupBox.hide();
		
		if (this.options.createControlsFunction == null) {
			this.createControls();
		} else {
			this.options.createControlsFunction();
		}
	},
	
	createControls: function() {
	
		this.caption = document.createElement("div");
		this.caption = Element.extend(this.caption);
		this.caption.id = "rumbleui-thebox-caption";
		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.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));

		if (!this.options.showControls) {
			controls.hide();
		}

		if (!this.options.showPosition) {
			this.titleElement.hide();
		}

		if (!this.options.showPrevious) {
			this.previousButton.hide();
		}
		
		if (!this.options.showNext) {
			this.nextButton.hide();
		}

		if (!this.options.showClose) {
			closeElement.hide();
		}

		this.popupBox.appendChild(this.caption);
		this.popupBox.appendChild(controls);
	},
	
	setTitle: function(text) {
		this.title.innerHTML = text;
	},
	
	show: function() {
		if (!this.background.visible()) {
			new Effect.Appear(this.background, { duration: 0.2, to: 0.8 });
		}
		new Effect.Appear(this.popupBox, { duration: 0.3 });
	},
	
	showBackground: function() {
		new Effect.Appear(this.background, { duration: 0.2, to: 0.8 });
	},

	hide: function() {
		new Effect.Fade(this.background, { duration: 0.2});
		new Effect.Fade(this.popupBox, { duration: 0.3 });	
	},
	
	next: function() {
		var nextLink = this.current + 1;
		if (nextLink < this.links.length) { 
			this.loadBox(nextLink);			
		}	else {
			this.hide();
		}
	},

	previous: function() {
		var previousLink = this.current - 1;
		if (previousLink >= 0) {
			this.loadBox(previousLink);			
		} else {
			this.hide();
		}
	},

	onChange: function() {
		if (this.current == 0) {
			this.previousButtonElement.addClassName("disabled");	
		} else {
			this.previousButtonElement.removeClassName("disabled");
		}
		if (this.current == this.links.length - 1) {
			this.nextButtonElement.addClassName("disabled");	
		} else {
			this.nextButtonElement.removeClassName("disabled");
		}
	},

	preload: function(index) {
		if (!this.links[index]) {
			return false;
		}
		
		new Image().src = this.links[index];
	},

	loadBox: function(index, onComplete) {
		
		if (!this.links[index]) {
			return false;
		}
		this.preload(index - 1);
		this.preload(index + 1);
		
		this.popupBox.makePositioned();
		
		this.current = index;
		var url = this.links[index].href;
		this.setTitle("Image: " + (index + 1) + " of " + this.links.length);
		if (this.links[index].title) {
			this.caption.innerHTML = "<p>" + this.links[index].title + "</p>";
			this.caption.show();
		} else {
			this.caption.innerHTML = "";
			this.caption.hide();
		}
		
		var popupBox = this.popupBox;
		var imagePanel = this.imagePanel;
		
		var params = url.toQueryParams();
		
		if (this.preloaderImage)  {
			// Taken out to prevent the IE auth box appearing
			//this.preloaderImage.src = null;
		}
		
		this.preloaderImage = new Image();
		var image = this.image;		
				
		image.hide();
		// Taken out to prevent the IE auth box appearing
		//image.src = null;
		this.onChange();
		
		this.preloaderImage.onload = function() {				
			(params.BoxWidth == null) && (params.BoxWidth = this.width);
			(params.BoxHeight == null) && (params.BoxHeight = this.height);
			
			var pageDimensions = document.viewport.getDimensions();
			var pageScrollOffset = document.viewport.getScrollOffsets();
			
			popupBox.style.left = ((pageDimensions.width - params.BoxWidth) / 2) + "px";
			popupBox.style.top = Math.max(40, (pageScrollOffset[1] + (pageDimensions.height / 3) - (params.BoxHeight / 2))) + "px";
			imagePanel.style.width = params.BoxWidth + "px";
			imagePanel.style.height = params.BoxHeight + "px";
						
			image.src = this.src;
			image.width = params.BoxWidth;
			image.height = params.BoxHeight;
			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();
    	}
 		}
 		this.preloaderImage.src = url; 		
	}
}