var ImageViewer = Class.create(JSControl, {
	SetValue: function(url){
		if (!this.image){
			this.image = new Element("img");
			if (this.imageStyle) Element.setStyle(this.image, this.imageStyle);
			Element.update(this.element, this.image);
		}
		Element.writeAttribute(this.image, "src", String(url));
		Element.setStyle(this.element, {"visibility": url ? "" : "hidden"});
	},

	Value: function(){ return this.image ? this.image.getAttribute("src") || "" : ""; },

	SetAttribute: function($super, attrName, attrValue){
		switch(attrName){
			case "src": return this.SetValue(attrValue);
			case "style":
				var elementStyle = JSControl.parseStyle(attrValue);
				var imageStyle = {};
				Object.keys(elementStyle).each(function(key){
					if (!ImageViewer.imageStyleKeys.test(key)) return;
					imageStyle[key] = elementStyle[key];
					delete elementStyle[key];
				});
				if (elementStyle) Element.setStyle(this.element, elementStyle);
				if (imageStyle && this.image) Element.setStyle(this.image, imageStyle);
				this.imageStyle = imageStyle;
				break;
			default: $super(attrName, attrValue); break;
		}
	},

	SetTabOrder: function(tabbase){ return tabbase; }
});

ImageViewer.imageStyleKeys = /^(?:width|height|maxWidth|maxHeight)$/;