<script type='text/javascript'>_ajaxConfig = {'_cfscriptLocation':'flickr.cfc', '_jsscriptFolder':'../js'};</script>
<script type='text/javascript' src='../js/ajax.js'></script>

<script type="text/javascript">
	function photoSearch()	{
		
		clear_table();
		
		// send data to CF
		DWRUtil.useLoadingMessage();
		DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'photoSearch', $('searchInput').value, photoSearchResult);
	}
	
	// call back function
	function photoSearchResult (r) {
		tbl = $('resultsTable');

           mycurrent_row 	= document.createElement('tr');
		for(var i=0;i<r.length;i++) {
			if (i % 5 == 0) { // rows of 5
	            mycurrent_row 	= document.createElement('tr');
			}
			
               mycurrent_cell 	= document.createElement('td');

               //currenttext		= document.createTextNode(r[i][0]); // create text field
			
			var currentpic		= document.createElement('img'); // create image
			currentpic.src	= r[i][1]; 
			currentpic.alt	= r[i][0]; 
			currentpic.title= r[i][0]; 

			mycurrent_cell.appendChild(currentpic); // append text
               mycurrent_row.appendChild(mycurrent_cell); // append TD cell
			
			if (i % 5 == 0) { // rows of 5
	            tbl.appendChild(mycurrent_row); // append TR row.
			}
		}
           tbl.appendChild(mycurrent_row); // append TR row.
	}
	
	function clear_table() {
		var tbl = $('resultsTable');
		var l = tbl.rows.length;
		for (i = 0; i < l; i++) {
	    	tbl.removeChild(tbl.rows[0]);
		}
	}

</script>

	<fieldset>
	<legend>ajaxCFC flickr photo search example</legend>
	<form onsubmit="photoSearch();return false;">
	<input type="Text" id="searchInput"><input type="submit" value="search">
	</form>
	
	<table><tbody id="resultsTable"></tbody></table>
	
	</fieldset>
	

<cfcomponent extends="ajax">
	
	<cffunction name="photoSearch" output="no" access="private">
		<cfargument name="keyword" required="Yes" type="string">
		
		<cfset var flickrURL 	= "http://www.flickr.com/services/rest/" />
		<cfset var key 			= "[you need to get a key from flickr]" />
		<cfset var xmlObj		= "" />
		<cfset var photos		= "" />
		<cfset var result		= arrayNew(2) />
		
		<cfhttp url="#flickrURL#">
		  <cfhttpparam name="api_key" type="url" value="#key#" />
		  <cfhttpparam name="method" type="url" value="flickr.photos.search" />
		  <cfhttpparam name="tags" type="url" value="#arguments.keyword#" />
		  <cfhttpparam name="per_page" type="url" value="15" />
		</cfhttp>
		
		<cfset xmlObj = XmlParse( CFHTTP.FileContent ) />
		<cfset photos = XMLSearch(xmlObj, '/rsp/photos/photo/') />
		
		<cfloop from="1" to="#arrayLen(photos)#" index="photo">
			<cfscript>
				photoInfo = photos[photo].XmlAttributes;
				result[photo][1] = photoInfo.title;
				result[photo][2] = "http://static.flickr.com/#photoInfo.server#/#photoInfo.id#_#photoInfo.secret#_s.jpg";
			</cfscript>
		</cfloop>

		<cfreturn result />
	</cffunction>

</cfcomponent>