// some configuration "constants" var DEFAULT_FLICKR_RESULTS_PER_PAGE = 24; var DEFAULT_SEARCH_TERM = "sunset"; var DEBUG = false; function Debug(s) { if (DEBUG) { try { console.log("DEBUG: " + s); } catch (e) { // console does not exist...do nothing } } } function encodeHTML(s) { return s.replace("&", "&").replace("<", "<").replace(">", ">"); } var nJSONRequests = 0; function SendJSONRequest(url) { var head = document.getElementsByTagName("head").item(0); var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); script.setAttribute("id", "dynamicScript" + ++nJSONRequests); head.appendChild(script); } var currentSearchTermEncoded = ""; // api documented at http://www.flickr.com/services/api/flickr.photos.search.html function ExecuteFlickrSearch(term) { currentSearchTermEncoded = encodeHTML(term); document.getElementById("gallery").innerHTML = "
Searching for photos of “" + currentSearchTermEncoded + "”...
"; document.getElementById("displayingN").innerHTML = ""; var requestUrl = "http://api.flickr.com/services/rest/?" + [ "jsoncallback=" + "HandleFlickrSearchResult", "method=" + "flickr.photos.search", "api_key=" + "afaf235416e5cb2fb406b7cae3caa43c", "text=" + term, "sort=" + "relevance", // "interestingness-desc", // "safe_search=" + "1", "content_type=" + "1", "license=" + "4,6,7", "per_page=" + DEFAULT_FLICKR_RESULTS_PER_PAGE, "page=" + 1, "extras=" + "owner_name,tags,url_sq,url_t,url_s,url_m,url_o", "format=" + "json" ].join("&"); Debug("sending request: " + requestUrl); SendJSONRequest(requestUrl); } function formatTemplate() { var template = '{2}
' + '{4}
' + '" + encodeHTML(msg) + "
"; return; } var nPhotos = data.photos.photo.length; Debug("Got an \"ok\" response with " + nPhotos.toString() + " photos"); if (nPhotos == 0) { document.getElementById("gallery").innerHTML = "Flickr returned no photos for “" + currentSearchTermEncoded + "”.
"; return; } var gallery = ""; for (var i = 0; i < nPhotos; i++) { var photo = data.photos.photo[i]; gallery += formatTemplate(photo.url_m, photo.ownername, photo.title, photo.id, photo.tags, photo.owner, 20 + i); } document.getElementById("gallery").innerHTML = gallery; document.getElementById("displayingN").innerHTML = "Displaying " + nPhotos + " of " + data.photos.total.replace(/^(\d{1,3})(\d{3})/, "$1,$2") + " photos"; // restore messiness if enabled if (document.getElementById("cbMessyLayout").checked) messyLayout(true); } function colorGalleryBackgroundClicked() { if (document.getElementById("cbColorGallery").checked) { document.getElementById("gallery").style.backgroundImage = ""; } else { document.getElementById("gallery").style.backgroundImage = "none"; } } function rotateImagesTo(nDeg, duration) { if (typeof duration == 'undefined') duration = 100; var photos = document.getElementsByClassName("photoWrapper"); for (var i = 0; i < photos.length; i++) { animateTransformRotate(photos[i], nDeg, duration); } } function rotateImagesBy(nDeg, duration) { if (typeof duration == 'undefined') duration = 100; var photos = document.getElementsByClassName("photoWrapper"); for (var i = 0; i < photos.length; i++) { animateTransformRotate(photos[i], getCurrentTransformRotate(photos[i]) + nDeg, duration); } } function messyLayout(messy) { var photos = document.getElementsByClassName("photoWrapper"); for (var i = 0; i < photos.length; i++) { if (messy) { photos[i].style.zIndex = 1 + Math.floor(Math.random() * photos.length); animateTransformRotateAndScale(photos[i], -30 + Math.floor(Math.random() * 61), 1.2, 0); } else { photos[i].style.zIndex = "auto"; animateTransformRotateAndScale(photos[i], 0, 1, 0); } } } HTMLElement.prototype.isOrIsADescendantOf = function(ancestor) { for (var n = this; n != null; n = n.parentNode) if (n == ancestor) return true; return false; }; function entering(eventObj, targetElement) { var fromElement = eventObj.relatedTarget; return fromElement == null || !(fromElement instanceof HTMLElement) || !fromElement.isOrIsADescendantOf(targetElement); } function leaving(eventObj, targetElement) { var toElement = eventObj.relatedTarget; return toElement == null || !(toElement instanceof HTMLElement) || !toElement.isOrIsADescendantOf(targetElement); } var zoomFactors = [ 3, 2.5, 2 ]; function overPhoto(wrapperElement, eventObj) { if (entering(eventObj, wrapperElement)) { wrapperElement.setAttribute("oldzIndex", getCurrentStringValue(wrapperElement, "zIndex")); wrapperElement.setAttribute("oldrotate", getCurrentTransformRotate(wrapperElement).toString()); wrapperElement.setAttribute("oldscale", getCurrentTransformScale(wrapperElement).toString()); wrapperElement.style.zIndex = 25; var zoomFactor = zoomFactors[document.getElementById("thumbnails").selectedIndex]; animateTransformRotateAndScale(wrapperElement, -6, zoomFactor, 200); } } function clickPhoto(wrapperElement, eventObj) { var url = wrapperElement.getAttribute("flickrPageUrl"); if (url && eventObj.ctrlKey) { location.href = url; } return false; } function keyDownPhoto(wrapperElement, eventObj) { var url = wrapperElement.getAttribute("flickrPageUrl"); if (url && eventObj.keyCode == KEY_ENTER && eventObj.ctrlKey) { location.href = url; } return false; } function outPhoto(wrapperElement, eventObj) { if (leaving(eventObj, wrapperElement)) { if (document.getElementById("cbMessyLayout").checked) { wrapperElement.style.zIndex = wrapperElement.getAttribute("oldzIndex"); animateTransformRotateAndScale(wrapperElement, parseFloat(wrapperElement.getAttribute("oldrotate")), parseFloat(wrapperElement.getAttribute("oldscale")), 200); } else { wrapperElement.style.zIndex = "auto"; animateTransformRotateAndScale(wrapperElement, 0, 1, 200); } } } function doSearch() { var searchText = document.getElementById("searchText").value; if (searchText != "") { ExecuteFlickrSearch(searchText); } } function makeThumbnails(size) { var gal = document.getElementById('gallery'); gal.className = gal.className.replace(/\b(small|medium|large)\b/, size); } function showTags(show) { var gal = document.getElementById('gallery'); gal.className = gal.className.replace(/\s*showtags\b/, '') + ((show == "true") ? ' showtags' : ''); } function init() { // this depends on initialization that has already been done in animation.js // we just set the class on a div to the script element property name for CSS3 2D Transforms document.getElementById("TransformNote").className = window.transformName; // kill text selection in IE document.getElementById("gallery").onselectstart = function() {return false;}; // re-init the background color or image colorGalleryBackgroundClicked(); // start with a default search (or the old one if this is a refresh) var searchTerm = document.getElementById("searchText").value; ExecuteFlickrSearch(searchTerm != "" ? searchTerm : DEFAULT_SEARCH_TERM); }