define([ "dojo/dom", "dojo/dom-style", "dojo/dom-class", "dojo/dom-construct", "dojo/dom-geometry", "dojo/string", "dojo/on", "dojo/aspect", "dojo/keys", "dojo/_base/lang", "dojo/_base/fx", "dijit/registry", "dojo/parser", "dijit/layout/ContentPane", "dojox/data/FlickrRestStore", "dojox/image/LightboxNano", "dojo/_base/window", "demo/module" ], function(dom, domStyle, domClass, domConstruct, domGeometry, string, on, aspect, keys, lang, baseFx, registry, parser, ContentPane, FlickrRestStore, LightboxNano, win) { var store = null, preloadDelay = 500, flickrQuery = dojo.config.flickrRequest || {}, itemTemplate = '${title}', itemClass = 'item', itemsById = {}, largeImageProperty = "media.l", // path to the large image url in the store item thumbnailImageProperty = "media.t", // path to the thumb url in the store item startup = function() { // create the data store var flickrStore = store = new FlickrRestStore(); // build up and initialize the UI initUi(); // put up the loading overlay when the 'fetch' method of the store is called aspect.before(store, "fetch", function() { startLoading(registry.byId("tabs").domNode); }); }, initUi = function() { // summary: // create and setup the UI with layout and widgets // create a single Lightbox instnace which will get reused lightbox = new LightboxNano({}); // set up ENTER keyhandling for the search keyword input field on(dom.byId("searchTerms"), "keydown", function(evt){ if(evt.keyCode == keys.ENTER){ evt.preventDefault(); doSearch(); } }); // set up click handling for the search button on(dom.byId("searchBtn"), "click", doSearch); endLoading(); }, endLoading = function() { // summary: // Indicate not-loading state in the UI baseFx.fadeOut({ node: dom.byId("loadingOverlay"), onEnd: function(node){ domStyle.set(node, "display", "none"); } }).play(); }, startLoading = function(targetNode) { // summary: // Indicate a loading state in the UI var overlayNode = dom.byId("loadingOverlay"); if("none" == domStyle.get(overlayNode, "display")) { var coords = domGeometry.getMarginBox(targetNode || win.body()); domGeometry.setMarginBox(overlayNode, coords); // N.B. this implementation doesn't account for complexities // of positioning the overlay when the target node is inside a // position:absolute container domStyle.set(dom.byId("loadingOverlay"), { display: "block", opacity: 1 }); } }, doSearch = function() { // summary: // inititate a search for the given keywords var terms = dom.byId("searchTerms").value; if(!terms.match(/\w+/)){ return; } var listNode = createTab(terms); var results = store.fetch({ query: lang.delegate(flickrQuery, { text: terms }), count: 10, onItem: function(item){ // first assign and record an id // render the items into the