var MultimediaViewer = Class.create(JSControl, {
	elementHTML: {},

	getMediaType: function(format){
		format = String(format).toLowerCase();
		switch (format){
			case "video":
			case "sound": return format;
			default: return "image";
		}
	},

	getParams: function(mediaType){
		switch (mediaType){
			case "video": return {
					"class": "VideoPlayer",
					"subclass": "video",
					"type": "VIDEO"
				};
			case "sound": return {
					"class": "Player",
					"subclass": "audio",
					"type": "SOUND"
				};
			case "image": return {
					"class": "ImageViewer",
					"type": "IMAGE"
				};
			default: return {};
		}
	},

	mediaType: "",
	style: {},
	innerJSControl: null,
	value: {},
	SetValue: function(struct){
		this.value = struct;
		var format = struct["Format"] || "image";
		var mediaType = this.getMediaType(format);
		if (this.mediaType == mediaType){
			this.innerJSControl.SetValue(struct["URL"]);
			return;
		}
		this.mediaType = mediaType;
		var innerID = this.ID() + format;
		var attrs = Object.extend(this.getParams(this.mediaType), {"id" : innerID});
		if (Object.isUndefined(this.elementHTML[format]))
			this.elementHTML[format] = JSControl.TransformElement(attrs);
		Element.update(this.element, this.elementHTML[format]);
		Element.setStyle(this.element, {"visibility": ""});

		var deferred = function(){
			var innerElement = Element.descendants(this.element).find(function(element){ return element.JSControl; });
			if (!innerElement) return alert("MultimediaViewer: inner element not found");
			this.innerJSControl = innerElement.JSControl;
			this.innerJSControl.SetValue(struct["URL"]);
			if (!Object.isUndefined(this.style[this.mediaType]))
				this.innerJSControl.SetAttribute("style", this.style[this.mediaType]);
		}.bind(this);
		deferred.defer();
	},

	Value: function(){ return this.value; },

	SetAttribute: function($super, attrName, attrValue){
		switch (attrName){
			case "image-style":
				var mediaType = "image";
				this.style[mediaType] = attrValue;
				if (mediaType == this.mediaType && this.innerJSControl)
					this.innerJSControl.SetAttribute("style", attrValue);
				break;
			default:
				$super(attrName, attrValue);
		}
	}
});

var TextViewer = Class.create(JSControl, {
	Clear: function(){
		while (this.element.firstChild) this.element.removeChild(this.element.firstChild);
	},

	str: "",
	SetValue: function(str){
		this.str = String(str);
		Element.update(this.element, this.str);
		Element.setStyle(this.element, {"visibility": this.str ? "" : "hidden"});
	},

	Value: function(){ return this.str; },

	Show: function(){ Element.setStyle(this.element, {"visibility": ""}); },
	Hide: function(){ Element.setStyle(this.element, {"visibility": "hidden"}); }
});


var MultimediaBrowser = Class.create(JSControl, {
	initialize: function($super, element, types){
		$super(element);
		this.types_ = types;
		this.list = Element.down(this.element, "ul.ImageList");
		this.selectableIL = new SelectableItemsList(this.list, {"scroller": this.list.parentNode});
		Event.observe(this.list, SelectableItemsList.events["choice"], this.onChoice.bindAsEventListener(this));
		Event.observe(this.list, SelectableItemsList.events["null-choice"], this.onNullChoice.bindAsEventListener(this));

		this.multimediaViewer = new MultimediaViewer(Element.down(this.element, "span.MultimediaViewer"));
		this.textViewer = new TextViewer(Element.down(this.element, "div.TextViewer"));
		this.selected_id_ = this.element.getAttribute("default-selected-id") || this.element.getAttribute("selected-id") || "";

		this.awindow = AControl.GetParentWindow(this.ID());
		if (this.awindow){
			this.awindow.RegisterResizeableChild(this.ID());
			this.awindow.OnResize();
			this.awindow.Subscribe("WM_REFRESH", this.refresh, this);
		}
	},

	onChoice: function(event){
		var li = Event.element(event);
		var params = URLRestore(li.getAttribute("params"));
		var descr = li.getAttribute("description") || "";
		var imgtitle = li.getAttribute("image-title") || ""
		if (imgtitle) descr = "<h5>" + imgtitle + "</h5>" + descr;
		this.textViewer.SetValue(descr);
		this.multimediaViewer.SetValue({
			"Format": params["Format"],
			"URL": li.getAttribute("graphics-url") || ""
		});
		this.textViewer.Show();
		this.saveSelectedID(params["ID"]);
		new AEvent("CHOICE", {"args": params}, this);
	},

	onNullChoice: function(event){
		this.multimediaViewer.SetValue({});
		this.textViewer.SetValue("");
		this.textViewer.Hide();
		this.saveSelectedID();
		new AEvent("NULLCHOICE", {}, this);
	},

	OnResize: function(event){
		var gridframe = Element.up(this.element, "div[type='gridFrame']"); if (!gridframe) return;
		var blocks = Element.select(this.element, "span.Block");
		blocks.each(function(elem){ Element.setStyle(elem, {"minHeight": "40px"}); });
		if (blocks.length == 2){
			var minwidth = 200;
			Element.setStyle(blocks[1], {"width": minwidth + "px"});
			var width = Element.innerWidth(this.element);
			blocks.each(function(block){
				width -= ["marginLeft", "marginRight", "borderLeftWidth", "borderRightWidth"].inject(0, //
					function(acc, prop){ return acc + parseInt(Element.getStyle(block, prop), 10); });
			});
			Element.setStyle(blocks[1], //
				{"width": Math.max(minwidth, width - blocks[0].offsetWidth) + "px"});
		}
	},

	refresh: function(aevent){
		if (aevent && typeof aevent.Data == "function" && aevent.Data()["args"]["ID"])
			this.selected_id_ = URLSerialize(aevent.Data()["args"]["ID"] || "");
		new ServerCall(this.url, null, {"onSuccess": this.refresh_list, "thisObject": this});
	},

	clear: function(elem){
		if (!elem) return null;
		while (elem.firstChild) elem.removeChild(elem.firstChild);
		return elem;
	},

	string_value: function(object){
		if (!object) return "";
		if (typeof object.Value == "function") {
			var val=object.Value();
			if(val) return String(val);
			return "";
		}
		else return String(object);
	},

	refresh_list: function(apacket){
		this.clear(this.list);
		var data = apacket.Data(); if (data.length == 0) return;
		var desc = {"class": "ImageListAux", "htmlid": this.ID(), "id": this.element.getAttribute("localid")};
		if (Object.isArray(data[0])){
			var id = this.element.getAttribute("key-column") || "";
			var attrs = {
				"caption": (this.element.getAttribute("caption-column") || "").split(" "),
				"description": (this.element.getAttribute("description-column") || "").split(" "),
				"image-title": (this.element.getAttribute("title-column") || "").split(" ")
			};
			var attrs_img = {};
			["graphics-column", "graphics-src", "graphics-args", //
			"thumbnail-column", "thumbnail-src", "thumbnail-args"].each(function(nam){
				attrs_img[nam] = this.element.getAttribute(nam); }, this);
			var joiners = {
				"caption": this.element.getAttribute("caption-joiner") || " ",
				"description": this.element.getAttribute("description-joiner") || "\n"
			};
			var colnums = {};
			$A(data.shift()).each(function(colname, iii){ colnums[colname] = iii; });
			desc["childNodes"] = $A(data).collect(function(row){
				var params = {};
				for (var key in colnums) params[key] = row[colnums[key]];
				var result = {"nodeName": "st:item", "params": URLSerialize(params)};
				if (typeof colnums[id] != "undefined") result["image-id"] = URLSerialize(row[colnums[id]]);
				for (var key in attrs)
					result[key] = attrs[key].collect(function(colname){
						return (typeof colnums[colname] == "undefined" ? "" : this.string_value(row[colnums[colname]]));
					}, this).join(joiners[key] || "");
				["graphics", "thumbnail"].each(function(suffix){
					var colname = attrs_img[suffix + "-column"];
					if (colname) result[suffix + "-url"] = this.string_value(row[colnums[colname]]);
					else{
						var src = attrs_img[suffix + "-src"]; if (!src) return;
						var args = {};
						String(attrs_img[suffix + "-args"] || id).split(" ").each(function(arg){
							if (!arg) return;
							var eqind = arg.indexOf("=");
							if (eqind == -1) args[arg] = row[colnums[arg]];
							else args[arg.substr(0, eqind)] = row[colnums[arg.substr(eqind + 1)]];
						});
						var qpos = src.indexOf("?");
						result[suffix + "-url"] = (-1 == qpos) ? //
							src + "?" + URLSerializeVS(args) : //
							src.substr(0, qpos + 1) + URLSerializeVS(args) + src.substr(qpos + 1);
					}
				}, this);
				return result;
			}, this);
		}else{
			var attrs = {"image-title": "Title", "description": "Description",//
				"filename": "Filename", "graphics-url": "GraphicsURL", "thumbnail-url": "ThumbnailURL"};
			desc["childNodes"] = $A(data).collect(function(struct){
				var result = {"nodeName": "st:item", "params": URLSerialize(struct), "image-id": URLSerialize(struct["ID"])};
				for (var key in attrs) result[key] = this.string_value(struct[attrs[key]]);
				return result;
			}, this);
		}
		this.list.innerHTML = JSControl.TransformElementAndUnwrap(desc, this.types_);

		var selected_item = null;
		if (this.selected_id_)
			selected_item = $A(this.list.childNodes).find(function(item){
				return item.nodeType == Node.ELEMENT_NODE && item.getAttribute("image-id") == this.selected_id_;
			}, this);
		this.selectableIL.SelectItem(selected_item || this.list.firstChild || null);
	},

	url: "",

	SetValue: function(url){
		if (this.url == url) return;
		this.url = url;
		this.refresh();
	},

	Value: function(){
		return String(this.url);
	},

	saveSelectedID: function(id){
		new ServerCall("/srv/WWW/WWWWorker/AddCustomization", URLSerializeVS({
			"window": this.awindow.XMLSource(),
			"xml": "<wnd " + JSControl.struct2attrs({"xmlns": AIURI}) + ">" +
					"<ele " + JSControl.struct2attrs({"id": this.element.getAttribute("localid") || "", "selected-id": URLSerialize(id)}) + "/>" +
				"</wnd>"
		}), {});
	},

	SetAttribute: function($super, attrName, attrValue){
		switch(attrName){
			case "image-style":
				this.multimediaViewer.SetAttribute(attrName, attrValue);
				break;
			case "src": this.SetValue(attrValue); break;
			default:
				$super(attrName, attrValue);
				break;
		}
	},

	SetTabOrder: function(tabbase){
		this.list.tabIndex = tabbase++;
		return tabbase;
	},

	Focus: function(){ this.list.focus(); }
});

var ImagesBrowser = MultimediaBrowser;