YAHOO.PDBe.ImagesWidget = function(hostelem, pdbid, showpdbprints) {
	var serverport = YAHOO.PDBe.getdomain("pdbprints");
	var ih = 300; var imgheight = ""+ih+"px"; var imgwidth = ""+ih*4/3+"px"; var widgetwidth = ""+(1+ih*4/3)+"px";
	var lh = 100; var legheight = ""+lh+"px";
	var me = new YAHOO.PDBe.BasicWidget(hostelem);
	var htdocsURL = serverport + "/pdbe-apps/widgets" ; me.htdocsURL = htdocsURL;
	me.scriptpath = htdocsURL + "/portfolio"; //wsgi
	me.pdbid = pdbid; me.showpdbprints = showpdbprints;
	me.showImageselect = null;
	if(me.showpdbprints) me.showImageselect = 1;
	//me.showImageselect = 1;
	me.pdblist = pdbid.split(",");
	if(!YAHOO.PDBe.hostdiv2widget) YAHOO.PDBe.hostdiv2widget = {}; YAHOO.PDBe.hostdiv2widget[me.phe] = me;
	me.yuirequire = ['dom','event','tabview','treeview','connection','carousel','animation']; me.yuibuild = htdocsURL + '/js/yui/build/';
	me.moremodules = [ {name:'pdbimagecss', type:'css', fullpath:htdocsURL+'/css/pdbimages.css', after:me.yuirequire} ];
	if(me.showpdbprints) me.moremodules.push({name:'pdbprintscss', type:'css', fullpath:htdocsURL+'/css/pdbprints.css'});
	me.getSeedcontent = function() {
		//YAHOO.util.Dom.addClass( document.getElementsByTagName(me.phe), 'imageWidgetOuterdiv');
		YAHOO.util.Dom.setStyle(me.phe, "width", "401px");
		YAHOO.util.Dom.setStyle(me.phe, "background-color", "#e0e0e0");
		YAHOO.util.Dom.setStyle(me.phe, "-moz-border-radius", "8px");
		YAHOO.util.Dom.setStyle(me.phe, "-webkit-border-radius", "8px");
		YAHOO.util.Dom.setStyle(me.phe, "padding", "8px");
		YAHOO.util.Dom.setStyle(me.phe, "-moz-box-shadow","4px 4px 2px #5e5e5e");
		YAHOO.util.Dom.setStyle(me.phe, "-webkit-box-shadow","4px 4px 2px #5e5e5e");
		YAHOO.util.Dom.setStyle(me.phe, "box-shadow","4px 4px 2px #5e5e5e");
		YAHOO.util.Dom.addClass( document.getElementsByTagName('body')[0] , 'yui-skin-sam');
		return me.makeMarkup();//"PDB Images Widget instantiated!!";
	}
	me.startPlaying = function() { if(!me.carousel.isAutoPlayOn()) me.carousel.startAutoPlay(); }
	me.pausePlaying = function() { if(me.carousel.isAutoPlayOn()) me.carousel.stopAutoPlay(); }
	me.nextImage = function() { if(!me.carousel.isAutoPlayOn()) me.carousel.scrollForward(); }
	me.prevImage = function() { if(!me.carousel.isAutoPlayOn()) me.carousel.scrollBackward(); }
	me.firstImage = function() { if(!me.carousel.isAutoPlayOn()) me.carousel.scrollTo(0); }
	me.lastImage = function() { if(!me.carousel.isAutoPlayOn()) me.carousel.scrollTo( me.carousel.getItems().length-1 ); }
	me.makeMarkup = function() {
		me.treediv = me.phe+"_treediv";
		me.carouseldiv = me.phe+"_carouseldiv";
		me.navmenu = me.phe+"_navmenu";
		me.printsdiv = me.phe+"_printsdiv";
		var speedHtml = '';
		//speedHtml += '<div style="float:left;">'
		speedHtml += '<select style="width:'+imgwidth+';" onchange=imageWidgetImagegroupChange("'+me.phe+'") id="'+me.phe+'_imagelist"><ul>';
		speedHtml += '</ul></select>';
		if(me.showpdbprints) speedHtml += '<div style="width:190px;height:27px;display:inline-block"><div class="pdbprints" id="'+me.printsdiv+'"></div></div>';
		if(me.showpdbprints) speedHtml += '<div id="'+me.phe+'_navbuttons" style="'+"text-align:center;display:inline;float:right;"+'">';
		else speedHtml += '<div id="'+me.phe+'_navbuttons" style="'+"text-align:center;"+'">';
		if(me.showpdbprints) imclass = "navbuttonSmall";
		else imclass = "navbutton";
		speedHtml += '<img class="'+imclass+'" title="Faster" onClick=imageWidgetSpeedFaster("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Faster-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="Slower" onClick=imageWidgetSpeedSlower("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Slower-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="First" onClick=imageWidgetFirst("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-First-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="Last" onClick=imageWidgetLast("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Last-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="Play" onClick=imageWidgetStart("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Play-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="Pause" onClick=imageWidgetPause("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Pause-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="Previous" onClick=imageWidgetPrev("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Rewind-icon.png"/>';
		speedHtml += '<img class="'+imclass+'" title="Next" onClick=imageWidgetNext("'+me.phe+'") src="'+me.htdocsURL+'/html/PinupIcons/Button-Fast-Forward-icon.png"/>';
		//for(var spi=0; spi < 5; spi++) speedHtml = "&nbsp;"+speedHtml+"&nbsp;";
		//var helplink = "<a title='Help' target='_blank' href='"+me.scriptpath+"'><img border=none width='24px' src='"+me.htdocsURL+"/html/PinupIcons/Button-Help-icon.png'/></a>";
		var helplink = "<div style='float:right;display:inline;'><a title='Read the documentation for PDBportfolio.' target='_blank' href='"+me.scriptpath+"'><img class='"+imclass+"' border=none width='16px' src='"+me.htdocsURL+"/html/PinupIcons/help.png'/></a></div>";
		speedHtml += helplink;
		speedHtml += '</div>'
		var markup = '';
		markup += '<div id="'+me.treediv+'"></div><div id="'+me.navmenu+'">'+speedHtml+'</div>';
		markup += '<div id="'+me.carouseldiv+'"></div>';
		return markup;
	}
	me.makeslide = function(pi) {
		var imgsrc = htdocsURL+"/html/PinupIcons/WrongIcon.png";
		var legend = 'Wait for image loading to finish', links = ''; 
		if(pi) legend += " " + pi;
		if(pi > -1) { // this is so that dummy content can be displayed before loading the real images
			var category = me.slides[pi][1].split("~")[0].split("$");
			var legend = me.slides[pi][1].split("~")[1];
			var title = legend.split('$')[0];
			var desc = legend.split('$')[1];
			var thispdbid = me.slideind2pid[pi];
			var atlasURL = "http://pdbe.org/"+thispdbid;
			var detailsURL = "http://pdbe.org/"+thispdbid;
			if(category[0] == "Biological Assemblies") detailsURL = "http://pdbe.org/"+thispdbid+"/quaternary";
			if(category[0] == "Deposited Structure" && category[1] == "Cartoon") detailsURL = "http://pdbe.org/"+thispdbid+"/secondary";
			if(category[0] == "Deposited Structure" && category[1] == "Surface") detailsURL = "http://pdbe.org/"+thispdbid+"/tertiary";
			if(category[0] == "Domains") detailsURL = "http://pdbe.org/"+thispdbid+"/primary";
			if(category[0] == "Ligands") detailsURL = "http://pdbe.org/"+thispdbid+"/ligands";
			if(category[0] == "Experimental") detailsURL = "http://pdbe.org/"+thispdbid+"/experimental";
			var detailLink = "<a class='linkbutton' title='Show more details about this aspect of the entry.' href='"+detailsURL+"'><img border=none width='24px' src='"+me.htdocsURL+"/html/PinupIcons/Button-Details-icon.png'/></a>";
			if(me.showpdbprints) detailLink = detailLink.replace(/ title=/,"target='_blank' title=");
			links += "<a class='linkbutton' title='Download a zipped file with images and PyMOL scripts.' href='javascript:imageWidgetDownload("+ '"'+me.phe+'",'+'"'+thispdbid+'");'+"'><img border=none width='24px' src='"+me.htdocsURL+"/html/PinupIcons/Button-Download-icon.png'/></a>";
			links += "<a class='linkbutton' title='Show a table with all images and captions.' href='javascript:imageList("+ '"'+me.phe+'",'+'"'+thispdbid+'");'+"'><img border=none width='24px' src='"+me.htdocsURL+"/html/PinupIcons/Button-List-icon.png'/></a>";
			title = "<span style='font-size:12px; font-weight: bold;'>"+title+"</span>";
			legend = "<table width=100%><tr><td>"+detailLink+"</td><td style='border:none;' align=left>"+title+"</td><td style='border:none;' align=right>"+links+"</td></tr></table>";
			if(desc) legend += "<div style='font-size:12px;overflow:auto;height:75px;border:2px solid #aeaeae;background-color:white;padding:3px;-moz-border-radius:3px;-webkit-border-radius:3px;'>" + desc + "</div>";
			//if(desc) legend += "<div style='font-size:12px;overflow:auto;height:75px;background-color:white;'>" + desc + "</div>";
			imgsrc = me.slides[pi][0];
		}
		var aslide =
			"<div style='border:2px solid #aeaeae;background-color:white;padding:1px;-moz-border-radius:3px;-webkit-border-radius:3px;'>" +
"<img src='"+ imgsrc + "' height=295px width=395px></img>"
 + "</div>";
		aslide += "<div style='text-align:left;width:400px;'>" + legend + "</div>";
		//aslide = "<div style='width:400px; height:500px;'>"+aslide+"</div>"
		return aslide;
	}
	me.onPDBevent = function(type, args) {}
	me.fillTreeList = function(node, treelist, slideinds, depth) {
		depth.push(node.depth);
		treelist.push(node.label);
		var tlindex = treelist.length - 1;
		var sis = [];
		if(node.data.figindex || node.data.figindex==0) sis.push(node.data.figindex);
		slideinds.push(sis);
		for(var ci=0; ci < node.children.length; ci++)
			slideinds[tlindex] = slideinds[tlindex].concat(me.fillTreeList(node.children[ci], treelist, slideinds, depth));
		//alert("label " + node.label + " sis " + slideinds[tlindex]);
		return slideinds[tlindex];
	}
	me.getStarted = function() {
		//me.showmsg(me.makeMarkup());
		var varname = "pdbimages"+Math.floor(Math.random()*10000000);
		YAHOO.util.Get.script(me.scriptpath + "?varname="+varname+"&imagemap=1&pdbid="+me.pdbid, {
			onSuccess: function() {
				eval("var pidslides = " + varname + ";");
				me.slideind2pid = {}; // store slide index to pdbid mapping
				// arrange all figures as leaves in a tree
				var nodemap = {}; me.slides = [];
				me.treeview = new YAHOO.widget.TreeView(me.treediv);
				var treeroot = me.treeview.getRoot(); treeroot.label = "Choose subsets of PDBportfolio images";
				var absentPids = [];
				for(var pid in pidslides) {
					if(!pidslides[pid]) {
						var mailtolink = '<a target="_blank" href="mailto:pdbehelp@ebi.ac.uk?subject=No images found in PDBportfolio for PDB entry '+pid+'">sending an email</a>';
						pidslides[pid] = [[ htdocsURL+"/html/PinupIcons/WrongIcon.png", "No images$No images for PDB entry "+pid+"~Sorry, no images found.$We do not have any images for PDB entry "+pid+". Please help us fix this problem by "+mailtolink+" to the PDBe team." ]];
					}
					var slides = pidslides[pid];
					//alert(pid + "-------------" + slides.length + "-----" + slides);
					var rootnode = new YAHOO.widget.TextNode({"label":"Images for "+pid}, treeroot, true);
					nodemap["all"+pid+"++++"] = rootnode;
					for(var si=0; si < slides.length; si++) {
						var pathstr = slides[si][1].split("~")[0];
						var path = ['all'+pid].concat( pathstr.split("$") );
						for(var pi=1; pi < path.length; pi++) {
							var parentname = '';
							for(var ppi=0; ppi < pi; ppi++) parentname += path[ppi] + "++++";
							var childname = parentname + path[pi] + "++++";
							if(!nodemap[childname]) {
								var nodeattr = {"label":path[pi]};
								if(pi == path.length-1) nodeattr["figindex"] = me.slides.length + si;
								me.slideind2pid[ me.slides.length+si ] = pid;
								nodemap[childname] = new YAHOO.widget.TextNode(nodeattr, nodemap[parentname], true);
							}
						}
					}
					me.slides = me.slides.concat(slides);
				}
				//me.treeview.subscribe("labelClick", function(node) { me.nodeClicked(node); });
				//me.treeview.draw();
				//// make tree listing in a dropdown
				var treelist = [], slideinds = [], depth = []; me.optval2slideinds = {};
				me.fillTreeList(treeroot, treelist, slideinds, depth);
				var imageSelect = document.getElementById(me.phe+'_imagelist');
				imageSelect.options.length = 0;
				for(var ti=0; ti < treelist.length; ti++) {
					var depthstr = '';
					for(di=0; di < depth[ti]; di++) depthstr += "- "
					var optstr = treelist[ti] + Math.floor(Math.random()*10000000);
					while(optstr in me.optval2slideinds) optstr = treelist[ti] + Math.floor(Math.random()*10000000);
					var opt = new Option(depthstr+treelist[ti], optstr);
					me.optval2slideinds[optstr] = slideinds[ti];
					if(depth[ti] == 0) YAHOO.util.Dom.setStyle(opt, "text-align", "center");
					if(depth[ti] == 0) YAHOO.util.Dom.setStyle(opt, "background-color", "lightblue");
					if(depth[ti] == 1) YAHOO.util.Dom.setStyle(opt, "font-weight", "bold");
					//if(depth[ti] == 2) YAHOO.util.Dom.setStyle(opt, "font-style", "italic");
					imageSelect[imageSelect.options.length] = opt;
					//style="text-align:center; background-color:red;" 
					//treelist[ti]alert(treelist[ti] + " " + slideinds[ti]);
				}
				if(!me.showImageselect) {
					YAHOO.util.Dom.setStyle(me.phe+"_imagelist", "visibility", "hidden");
					YAHOO.util.Dom.setStyle(me.phe+"_imagelist", "display", "none");
				}
				//// make carousel
				me.carousel = new YAHOO.widget.Carousel(me.carouseldiv, {
					isCircular: true,
					numVisible: 1, numItems: me.slides.length//, autoPlayInterval: 1000
				});
				me.carousel.STRINGS.PAGER_PREFIX_TEXT = "";
				me.carousel.render();
				me.carousel.show();
				for(var pi=0; pi < me.slides.length; pi++) me.carousel.addItem(me.makeslide(-1*(pi+1))); // dummy content preloading
				me.carousel.on("loadItems", function(o) { me.lazyload(o); });
				me.carousel.on("afterScroll", function(o) {
					var thispdbid = me.slideind2pid[me.presentSlideIndices[o.first]];
					if(me.lastInternalSlideIndex==null || me.slideind2pid[me.presentSlideIndices[me.lastInternalSlideIndex]] != thispdbid)
						//alert("pdbid changed to " + me.slideind2pid[me.presentSlideIndices[o]]);
						if(me.showpdbprints) (new YAHOO.PDBe.PrintsWidget(me.printsdiv, thispdbid, "jslogos", "horizontal", 24, "embl_green", "_blank")).show();
					me.lastInternalSlideIndex = o.first;
				});
				me.changeSpeed( me.slideshowSpeeds[ Math.floor(me.slideshowSpeeds.length/2+1) ] );
				me.changeImageGroup(); // this selects slide indices and shows prints for first slide
			},
			onFailure: function() { me.showmsg("images request failed."); },
			onTimeout: function() { me.showmsg("request time out."); }
		});

	}
	me.slideshowSpeeds = [100, 250, 500, 1000, 2500, 5000, 10000];
	me.slowerSpeed = function() {
		var speednow = me.carousel.get("autoPlayInterval");
		if(speednow < me.slideshowSpeeds[0]) speednow = me.slideshowSpeeds[0];
		else {
			for(var si=0; si < me.slideshowSpeeds.length-1; si++)
				if(speednow <= me.slideshowSpeeds[si]) { speednow = me.slideshowSpeeds[si+1]; break; }
		}
		me.changeSpeed(speednow);
	}
	me.fasterSpeed = function() {
		var speednow = me.carousel.get("autoPlayInterval");
		if(speednow > me.slideshowSpeeds[ me.slideshowSpeeds.length-1 ])
			speednow = me.slideshowSpeeds[ me.slideshowSpeeds.length-1 ];
		else {
			for(var si = me.slideshowSpeeds.length-1; si > 0; si--)
				if(speednow >= me.slideshowSpeeds[si]) { speednow = me.slideshowSpeeds[si-1]; break; }
		}
		me.changeSpeed(speednow);
	}
	me.changeSpeed = function(interval) {
		//alert("setting interval to " + interval);
		me.carousel.stopAutoPlay();
		if(interval) me.carousel.set("autoPlayInterval", interval);
		me.carousel.startAutoPlay();
	}
	me.changeSpeed_dropdown = function() {
		me.carousel.stopAutoPlay();
		//eval("var interval = parseInt(document."+me.phe+"_navmenuform."+me.phe+"_speed.value);");
		var interval = parseInt(document.getElementById(me.phe+"_speed").value);
		me.carousel.set("autoPlayInterval", interval);
		me.carousel.startAutoPlay();
	}
	me.lazyload = function(o) { // o shd have fields first, last, num
		//alert("hi " + " " + o.first + " " + o.last + " " + o.num + " " + me.slides.length);
		for(var si=o.first; si <= o.last; si++) me.carousel.addItem(me.makeslide( me.presentSlideIndices[si] ));
	}
	me.changeImageGroup = function() {
		var imgrpname = document.getElementById(me.phe+"_imagelist").value;
		//eval("var imgrpname = document."+me.phe+"_navmenuform."+me.phe+"_imagelist.value;");
		var slideinds = me.optval2slideinds[imgrpname];
		var autoPlayOn = me.carousel.isAutoPlayOn();
		me.carousel.stopAutoPlay();
		me.carousel.clearItems();
		me.presentSlideIndices = me.optval2slideinds[imgrpname];
		me.carousel.set("numItems", me.presentSlideIndices.length);
		//alert(me.presentSlideIndices + " " + autoPlayOn);
		//for(var si=0; si < slideinds.length; si++) me.carousel.addItem(me.makeslide(slideinds[si]));
		me.lazyload({first:0, last:0, num:1});
		if(me.showpdbprints)
			(new YAHOO.PDBe.PrintsWidget(me.printsdiv, me.slideind2pid[me.presentSlideIndices[0]], "jslogos", "horizontal", 24, "embl_green", "_blank")).show();
		me.lastInternalSlideIndex = null;
		if(autoPlayOn) me.changeSpeed();
	}
	me.download = function(pdbid) {
		window.open(htdocsURL+"/PDBimages/"+pdbid[1]+pdbid[2]+"/"+pdbid[0]+pdbid[3]+"/download_"+pdbid+".tgz",'Download');
	}
	me.showlist = function(pdbid) {
		window.open(htdocsURL+"/PDBimages/"+pdbid[1]+pdbid[2]+"/"+pdbid[0]+pdbid[3]+"/index.html",'Listing');
	}
	return me;
}

var imageWidgetImagegroupChange = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].changeImageGroup(); }
var imageWidgetSpeedChange_dropdown = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].changeSpeed_dropdown(); }
var imageWidgetSpeedFaster = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].fasterSpeed(); }
var imageWidgetSpeedSlower = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].slowerSpeed(); }
var imageWidgetStart = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].startPlaying(); }
var imageWidgetPause = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].pausePlaying(); }
var imageWidgetNext = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].nextImage(); }
var imageWidgetPrev = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].prevImage(); }
var imageWidgetFirst = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].firstImage(); }
var imageWidgetLast = function(hostelem) { YAHOO.PDBe.hostdiv2widget[hostelem].lastImage(); }
var imageWidgetDownload = function(hostelem,pdbid) { YAHOO.PDBe.hostdiv2widget[hostelem].download(pdbid); }
var imageList = function(hostelem,pdbid) { YAHOO.PDBe.hostdiv2widget[hostelem].showlist(pdbid); }