<pre>&lt;?php
	// 
	// index.php
	//
	// This is part of the source code for the EditGallery application.  
	// See also the companion save.php file.
	//
	// This code can be freely copied, modified, and distributed.  
	//    

	// If someone wants to view the source, then dump it out.
	if( isset( $_GET[&quot;source&quot;] ) ) {
		echo &quot;&lt;pre&gt;&quot;;
		echo htmlentities( file_get_contents( &quot;index.php&quot;) );								
		echo &quot;&lt;/pre&gt;&quot;;
		exit;
	}
	
	// NOTE: Most of the PHP code in this sample is used to manage finding, loading, and saving
	// the images on the disk.  Don't worry too much about how it works -- the Javascript
	// code down below is much more interesting.
	
	// $strRoot will be the URL to this page's parent directory
	$strPath = str_replace( &quot;\\&quot;, &quot;/&quot;, $_SERVER['REQUEST_URI'] );
	$aPath = explode( &quot;?&quot;, $strPath);
	$strRoot = &quot;http://&quot; . $_SERVER['SERVER_NAME'] . &quot;:&quot; . $_SERVER['SERVER_PORT'] . $aPath[0];
	$aSelfBits = explode( &quot;/&quot;, $_SERVER['PHP_SELF'] );
	$strFile = $aSelfBits[count($aSelfBits)-1];
	$strRoot = str_replace( $strFile, &quot;&quot;, $strRoot );	// remove the name of the page
	if ($strRoot[strlen($strRoot)-1] != &quot;/&quot;)
		$strRoot .= &quot;/&quot;;

	// We need to find the list of pictures for display.  We'll do a little PHP magic
	// to find all the photos in a directory relative to this page.  If you're running this locally,
	// make sure you've created an &quot;img&quot; directory and put a bunch of .jpg files in there. While
	// you're at it, you should probably add 75x75 square thumbnail versions of your originals
        $dir_handle = opendir( &quot;img&quot; );
        $aImgContents = Array();
        while ( false !== ( $entry = readdir( $dir_handle ) ) )
        { 
            if( $entry == &quot;.&quot; ||
                $entry == &quot;..&quot; || 
		is_dir( &quot;img/&quot; . $entry ) ) {
                continue;
            }
            $aImgContents[] = $entry;
        }
	
	// Store info about each image in the $aImages array. Images are stored as name.type.jpg, 
	// where &quot;name&quot; is a unique id for this image, and &quot;type&quot; is the one of &quot;&quot;, &quot;&quot;orig_t&quot;, edit&quot;, or &quot;edit_t&quot;.
	$aImages = Array();
	foreach ($aImgContents as $fname) {
		$aNameBits = explode( &quot;.&quot;, $fname );
		$strImageId = $aNameBits[0];
		$type = $aNameBits[1] == &quot;jpg&quot; ? &quot;orig&quot; : $aNameBits[1];
		if (isset($aImages[$strImageId])) {
			$oImgFiles = $aImages[$strImageId];
		} else {
			$oImgFiles = Array();
		}
		$oImgFiles[$type] = $strRoot . &quot;img/&quot; . $fname;		
		$aImages[$strImageId] = $oImgFiles;
	}
	
	// Make sure we've got an entry for all for file types, even if it's the wrong size.  This is
	// handy if you haven't fully populated the /img dir with all image types yet.
	foreach ($aImages as $strImageId =&gt; $oImgFiles ) {
		if (!isset( $oImgFiles['orig'] )) {
			// current() retrieves first element
			$oImgFiles['orig'] = current( $oImgFiles );	
		}
		if (!isset( $oImgFiles['orig_t'] )) 
			$oImgFiles['orig_t'] = $oImgFiles['orig'];	
		if (!isset( $oImgFiles['edit'] )) 
			$oImgFiles['edit'] = $oImgFiles['orig'];
		if (!isset( $oImgFiles['edit_t'] )) 
			$oImgFiles['edit_t'] = $oImgFiles['orig_t'];
		$aImages[$strImageId] = $oImgFiles;
	}
?&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Picnik Sample: The Edit Gallery&lt;/title&gt;	
	&lt;!-- These two files are requried to enable Picnik-in-a-box --&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.picnik.com/picnikbox/picnikbox_2_0.js&quot;&gt;&lt;/script&gt;
	&lt;link href=&quot;http://www.picnik.com/picnikbox/picnikbox_2_0.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
	
	&lt;!-- some javascript to enable our dynamic ajaxyness --&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;
		// utility function
		function ExtractArgs() {
			var args = new Object();
			var query = location.search.substring(1);  		// Get query string.
			var pairs = query.split(&quot;&amp;&quot;);              		// Break at ampersand.
			for (var i = 0; i &lt; pairs.length; i++) {
				var pos = pairs[i].indexOf('=');    	// Look for &quot;name=value&quot;.
				if (pos == -1) continue;              	// If not found, skip.
				var argname = pairs[i].substring(0,pos); 	// Extract the name.
				var value = pairs[i].substring(pos+1); 	// Extract the value.
				args[argname] = unescape(value);
			}
			return args;
		}
	
		// our default picnik api parameters
		var strPicnikUrl = &quot;http://www.picnik.com/service/?&quot;;	// $strPicnikUrl is the URL that we use to launch Picnik.
		var strRoot = &lt;?php echo '&quot;' . $strRoot . '&quot;' ?&gt;;
		var aPicnikParams = { 
			_apikey: &quot;2121789cd164f9a89cefbc259495c9cf&quot;, // get your own API key at http://www.picnik.com/info/api
			_export: strRoot + &quot;save.php&quot;,			// tell Picnik where to send the exported image	
			_close_target: strRoot + &quot;save.php&quot;,		// turn on the close button, and tell it where to go
			_export_method: &quot;GET&quot;,				// use GET to send us the result
			_export_agent: &quot;browser&quot;,				// send the result via a browser redirect
			_export_title: &quot;Save My Changes&quot;,			// give the export button a title
			_replace: &quot;yes&quot;,					// always replace (required to have _imageid sent back
			_host_name: &quot;The Edit Gallery&quot;,		// tell Picnik our name.  It'll be used in a few places as appropriate
			_thumbs: &quot;yes&quot;,					// We want to receive thumbnails	
			_out_maxsize: &quot;400&quot;,				// We don't really need huge images, so keep the size small	
			_exclude: &quot;out&quot;					// turn off the &quot;Save &amp; Share&quot; tab so users don't get confused
		};
		
		// an array of all the images we know about
		var aImages = { &lt;?php
			// initialize the array with all the data we found inside the /img directory
			$fFirst = true;
			foreach( $aImages as $id =&gt; $files ) {
				if (!$fFirst) echo &quot;,&quot;;
				$fFirst = false;
				
				echo &quot;\n$id: {&quot;;
				echo &quot;\n  orig: '&quot; . $files['orig'] . &quot;',&quot;;
				echo &quot;\n  orig_t: '&quot; . $files['orig_t'] . &quot;',&quot;;
				echo &quot;\n  edit: '&quot; . $files['edit'] . &quot;',&quot;;
				echo &quot;\n  edit_t: '&quot; . $files['edit_t'] . &quot;'&quot;;
				echo &quot;}&quot;;
			}
		?&gt; };
		
		
		// stores new image files for the given image id and refreshes the display
		function refreshById( strImageId, oImgFiles) {
			for (var strFile in oImgFiles)
				aImages[strImageId][strFile] = oImgFiles[strFile];
			refreshNavById( strImageId );
			displayImageById( strImageId );
		}
		
		// creates the HTML for the navigation bar at the top
		function refreshNav() {
			var elNav = $(&quot;nav&quot;);
			if (!elNav) return;
			elNav.innerHTML = &quot;&quot;;
			for ( var strImageId in aImages ) {
				elNav.innerHTML += &quot;&lt;span id='&quot; + strImageId + &quot;_nav' align='center' style='padding:5px'&gt;loading...&lt;/span&gt; &quot;;
				refreshNavById( strImageId );
			}
		}
		
		// creates the HTML for an individual picture in the nav bar
		function refreshNavById( strImageId ) {
			var oImgFiles = aImages[strImageId];
			var elHolder = $(strImageId + &quot;_nav&quot;);
			if (!elHolder) return;
			
			var strHtml = &quot;&quot;;
			strHtml += &quot;&lt;a href='#' onclick='&quot; + &quot;javascript:displayImageById(\&quot;&quot; + strImageId + &quot;\&quot;);&quot; + &quot;'&gt;&quot;;
			strHtml += &quot;&lt;img width='75' height='75' src='&quot; + oImgFiles['edit_t'] + &quot;?&quot; + (new Date).valueOf() + &quot;'&gt;&quot;;
 			strHtml += &quot;&lt;/a&gt;&quot;;
			elHolder.innerHTML = strHtml;
		}
		
		// creates the HTML for a big view of an image and the picnik edit link
		function displayImageById( strImageId ) {
			if (! (strImageId in aImages)) return;
			var oImgFiles = aImages[strImageId];
			var elHolder = $(&quot;content&quot;);
			if (!elHolder) return;

			// create the picnik edit URL.  Mostly we just use the defaults; we just change
			// the _imageid and _import parameters for each image.
			aPicnikParams['_imageid'] = strImageId;
			aPicnikParams['_import'] = oImgFiles['orig'];
			var strApiUrl = strPicnikUrl;
			for( var strKey in aPicnikParams ) {
				strApiUrl += strKey + &quot;=&quot; + encodeURIComponent( aPicnikParams[strKey] ) + &quot;&amp;&quot;;
			}
			
			// generate the HTML to display the image in the big green rectangle
			var strHtml = &quot;&quot;;
			strHtml += &quot;&lt;div&gt;&quot;;
			strHtml += &quot;&lt;img align='left' border='1' width='75' height='75' src='&quot; + oImgFiles['orig_t'] + &quot;?&quot; + (new Date).valueOf() + &quot;'&gt;&quot;;
			strHtml += &quot;&lt;font size='+1'&gt;&lt;b&gt;&quot; + strImageId + &quot;&lt;/b&gt;&lt;/font&gt;&lt;br/&gt;original&lt;br/&gt;&lt;br/&gt;&quot;;
			strHtml += &quot; &lt;a href='&quot; + strApiUrl + &quot;' class='pbox' id='&quot; +strImageId + &quot;_link'&gt;&quot;
			strHtml += &quot;&lt;b&gt;Create your own version of &quot; + strImageId + &quot;!&lt;/b&gt;&lt;/a&gt;&quot;;
			strHtml += &quot;&lt;/div&gt;&quot;;
			strHtml += &quot;&lt;div style='clear:both; padding: 20px;'&gt;Current Edit:&lt;/br&gt;&quot;
			strHtml += &quot;&lt;img border='1' src='&quot; + oImgFiles['edit'] + &quot;?&quot; + (new Date).valueOf() + &quot;'&gt;&quot;;
			strHtml += &quot;&lt;/div&gt;&quot;;
			elHolder.innerHTML = strHtml;
			
			// because we're creating our Picnik links dynamically, and not at load-time, then we need 
			// manually tell PicnikBox to turn this link into a PicnikBox link.
			PicnikBox.AddLink( $(strImageId+&quot;_link&quot;) );
		}
		
		var strOldTitle = document.title;
		function OnPicnikActivate( elLink ) {
			// You can do all kinds of interesting things just before Picnik launches.  You could change
			// the header of your page to say something like &quot;You're now in Picnik Mode&quot;; you could disable
			// some buttons (but not others) to make Picnik editing semi-modal; or you could adjust the Picnik
			// borders or margins to accurately position it on your page.  
			
			// All we do is change the document's title.
			document.title = strOldTitle + &quot;: You're currently inside the Picnik Box!&quot;;
		}
		
		function OnPicnikDeactivate( elLink ) {
			// In here you should reset anything you did in the activate function.
			// We reset the document's title.
			document.title = strOldTitle;		
		}
		
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style=&quot;width: 300px; height:100px; float:left; padding: 5px;&quot;&gt;
	&lt;div&gt;
	&lt;b&gt;The Edit Gallery&lt;/b&gt;&lt;br/&gt;
	This is a &lt;b&gt;sample gallery application&lt;/b&gt; demonstrating the use of the &lt;b&gt;Picnik API&lt;/b&gt; and embedded &lt;b&gt;Picnik-in-a-Box&lt;/b&gt; integration in a Javascript web app.
	&lt;br/&gt;&lt;br/&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;nav&quot; style=&quot;width:400px; height:100px; overflow:auto; padding: 5px; border:1px solid #888; background-color: #DDD; &quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;content&quot; valign=&quot;top&quot; style=&quot;clear:both; width:700px; height: 500px; margin-top: 10px; padding: 10px; background-color: #DEC; border: 1px solid #897&quot;&gt;
	&lt;b&gt;Click any of the above images.&lt;/b&gt;
&lt;/div&gt;
&lt;div id=&quot;footer&quot; style=&quot;width:700px; padding-top:10px; text-align:right;&quot;&gt;
	You can view the PHP / Javascript source code &lt;a href=&quot;index.php?source&quot;&gt;for this page&lt;/a&gt; and &lt;a href=&quot;save.php?source&quot;&gt;the companion save script&lt;/a&gt;.&lt;br/&gt;
	For more information about the Picnik API, visit &lt;a href=&quot;http://www.picnik.com/info/api&quot;&gt;the Picnik API documentation&lt;/a&gt;.
	
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
	//
	// We can configure a few things via the PicnikBox API.
	//
	// create a wide top margin so that the control UI is visible (but inactive)
	// this shows the user the she hasn't left the original website
	PicnikBox.SetPicnikMargins( 125, 0, 0, 0 );	

	// give us a 1px border on the top
	PicnikBox.SetPicnikBorders( 2, 0, 0, 0 );
	
	// tell PicnicBox.js to call us just before Picnik gets launched and after it closes
	PicnikBox.SetActivateCallback( OnPicnikActivate );
	PicnikBox.SetDeactivateCallback( OnPicnikDeactivate );
	
	// Create the navigation bar and all its little images.
	refreshNav();
	
	// In some cases, Picnik will navigate the user out to a 3rd-party site and
	// then back to Picnik.com, and we'll lose our Picnik-in-a-box-ness.  This typically
	// only happens if the user is authenticating with a site such as Facebook or Flickr.
	// To handle this case, we need to be able to recreate the state the user was in
	// before launching Picnik.  In our case, we look for a an image id (which will be
	// passed in to us via the save script) and we select that image.
	var aArgs = ExtractArgs();
	if (&quot;id&quot; in aArgs) displayImageById( aArgs[&quot;id&quot;] );
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>