dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.parser");

dojo.declare("dirindex.ScreenshotBox", [dijit._Widget], {
	
	constructor: function() {
		this._childMappings = [
			{ 
				query: "span.label", 
				first: true, 
				callback: function(node) {
					this.label = node; 
					this.connect(this.label, "onclick", "_showImage");
				}
			},
			{ 
				query: "img", 
				first: false, 
				callback: function(node) {
					this.img = node; 
					this.connect(this.img, "onclick", "_onImageClick");
				}
			}
		];
	},
	
	postCreate: function() {
		
		// use childMappings objects to bind and setup descendant elements as necessary
		// this is somewhere between _Templated and dojo.behavior
		var success = true; 
		dojo.forEach(this._childMappings, function(mapping) {

			var nlist = dojo.query(mapping.query, this.domNode); 
			if(nlist.length) {
				var node = (mapping.first) ? nlist[0] : nlist[nlist.length-1]; 
				mapping.callback.call(this, node);
			} else {
				success = false; 
				console.warn( "no match in mapping for" + mapping.query );
			}

		}, this);
		this._modalconnects = [];
	}, 
	
	_createViewer: function() {
		var dlgNode = dojo.body().appendChild(dojo.doc.createElement("div"));
		var dlg = new dirindex.Viewer({
			title: "Image"
		},dlgNode);

		dlg.startup();

		// store the dialog as a static property on the class
		dojo.getObject(this.declaredClass)["_dialog"] = dlg; 
		return dlg;
	},
	_showImage: function(evt) {
		// summary: 
		// 	clones the img property and drops it into a dialog to show it at full size
		
		var fullImage = this.img.cloneNode(true);
		if(this.largeSrc) {
			fullImage.src = this.largeSrc;
		}
		fullImage.id = this.id +"_full";
		fullImage.className ="";

		dojo.style(fullImage, {
		   width: "auto", height: "auto"
		});
		// get/create the shared dialog
		var dlg = dojo.getObject(this.declaredClass)["_dialog"] || this._createViewer();

		// swap in the new content
		dlg.setContent(fullImage);
		
		var title = dojo.attr(fullImage, "title") || dojo.attr(fullImage, "alt");
		if(title) {
			dlg.setTitle(title);
		}

		/* var imgWrapper = dlg.containerNode.appendChild(dojo.doc.createElement("div"));
		imgWrapper.appendChild( fullImage );
		var title = this.img.getAttribute("title") || this.img.getAttribute("alt"); 
		if(title) {
			dlg.titleNode.innerHTML = title;

		}*/

		dojo.addClass(dojo.body(), "tundra"); 
		var originBox = {
			t: evt.pageY,
			l: evt.pageX
		};
		return dlg.showFromPoint(originBox); 
	},

	_onImageClick: function(evt) {
		this._showImage(evt);
	}

});

dojo.addOnLoad(function() {
	
	dojo.query(".entry .screenshotBox").instantiate("dirindex.ScreenshotBox"); 

});