var CaptionHandler = Class.create({
 
	// The div used to display the caption for the focus image in 
	captionDiv: null,
	
	// The item for which the the caption was requested 
	captionItem: null,
	
	// The textarea that holds the description if in edit mode 
	captionTextArea: null,
	
	// The inputfield holding the url in editmode 
	captionLinkInput: null, 
	
	// className to give to captionDiv 
	className: 'caption', 
	
	// width of the caption 
	width: 200,
	
	// editMode
	editMode: false,
	
	submitClicked: function(item, description) {
	},
	
	initialize: function(extra) {
		if (typeof extra != "undefined") {
			Object.extend(this, extra);
		}
	},   
	
	showCaptionForImage: function(item, description, url) {
		
		this.hideCaption();

		var div;
		if (!this.editMode) { 
			div = this.createNonEditMode(item, description, url); 
		}	else {
			div = this.createEditMode(item, description, url);
		} 
		
		if (div == null) return; 
		
		item.parentNode.insert({ bottom: div });
		this.captionDiv = div;
	},
	
	createNonEditMode: function(item, description, url) {
		if (!description) return null;
		if (description.length < 1) return null;

		var div = $C("div");
		div.style.position = "relative";
		div.style.width = $px(this.width);
		div.style.marginRight = $px(-this.width);
		div.style.left = $px($unpx(item.style.left) + Math.round(2 * $unpx(item.style.width) / 3));
		div.style.top = $px($unpx(item.style.top) + Math.round(2 * $unpx(item.style.height) / 3) );
		div.className = this.className;
		
		 
		var p = document.createElement("p");
		if ((url != null) && (url.length > 0)) {
			var a = document.createElement("a");
			a.href = url;
			a.innerHTML = description;
			p.insert(a);
		} else {
			p.innerHTML = description;
		}
		div.insert(p);
		
		Event.observe(div, 'mousedown', this.onMouseDown.bindAsEventListener(this));
		return div;
	},
	
	createEditMode: function(item, description, url) {
		this.captionItem = item;	
	
		var div = $C("div");
		div.style.position = "relative";
		div.style.width = $px(this.width);
		div.style.marginRight = $px(-this.width);
		div.style.left = $px($unpx(item.style.left) + Math.round(2 * $unpx(item.style.width) / 3));
		div.style.top = $px($unpx(item.style.top) + Math.round(2 * $unpx(item.style.height) / 3) );
		div.className = this.className;
		
		var textArea = document.createElement("textarea");
		textArea.value = description;
		this.captionTextArea = textArea;
		div.insert(textArea);
		
		var urlP = document.createElement("p");
		urlP.innerHTML = "Link, or empty for no link: ";
		var input = document.createElement("input");
		input.type = "text";
		input.value = url;
		this.captionLinkInput = input;		
		urlP.insert(input);
		div.insert(urlP);
		
		var submit = document.createElement("p");
		submit.className = "submit";
		submit.innerHTML = "submit";
		div.insert(submit);

		Event.observe(submit, 'click', this.onSubmitClick.bindAsEventListener(this));		
		
		return div;
	},
	
	hideCaption: function() {
		if (this.captionDiv == null) return;
		if (this.captionDiv.parentNode) this.captionDiv.parentNode.removeChild(this.captionDiv);
		this.captionDiv = null; 
		this.captionItem = null;
		this.captionTextArea = null;
	}, 	
	
	updateCaptionPosition: function(item) {
		if (this.captionDiv) {
			this.captionDiv.style.left = $px($unpx(item.style.left) + Math.round(2 * $unpx(item.style.width) / 3));
			this.captionDiv.style.top = $px($unpx(item.style.top) + Math.round(2 * $unpx(item.style.height) / 3) );
		}
	},
	
	getCaptionDiv: function() {
		return this.captionDiv;
	},

	onMouseDown: function(event) {
		Event.stop(event);
		return false;
	},
	
	onSubmitClick: function(event) {
		Event.stop(event);
		if (!this.captionItem) return;
		if (!this.captionTextArea) return;
		if (!this.captionLinkInput) return;
		this.submitClicked(this.captionItem, this.captionTextArea.value, this.captionLinkInput.value);
		this.hideCaption();
		return false;
	}
		
});