
<?php
/**
 * ************************************************************
 * Dojo Fisheye Demonstration - Flickr
 * http://skindeep.logankoester.com/fishy-eyes-for-web-uis
 * A demo of the Dojo Toolkit's fisheye UI widget using Flickr.
 * 
 * Version: 0.1
 * Author: Logan Koester
 * Author URI: http://logankoester.com
 * This example is public domain, do as you like.
 * ************************************************************
 */


/**
 * ********************************
 * Initialize Flickr
 * ********************************
 */
$flickr_API_key = 'Enter your API key here'; // You can get one at http://www.flickr.com/services/api/
$items = 6; // Number of images to fetch

if ($_GET['tag']) {
    $tag = $_GET['tag'];
} else {
    $tag = "sunflowers"; // Default tag
}

require_once("phpFlickr/phpFlickr.php");
$f = new phpFlickr($flickr_API_key);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Dojo Fisheye Demonstration - Flickr
</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="A demo of the Dojo Toolkit's fisheye UI widget using Flickr" />
<meta name="keywords" content="dojo, flickr, fisheye, ui, javascript, js, usability, animation, design" />
<meta name="author" content="Logan Koester" />
<link rel="alternate" href="http://feeds.feedburner.com/skindeep" title="RSS Feed" type="application/rss+xml" />

<script type="text/javascript">
    var djConfig = {isDebug: true, debugAtAllCosts: false};
</script>
<script type="text/javascript" src="dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
    dojo.require("dojo.widget.FisheyeList");
    dojo.hostenv.writeIncludes();
</script>

<script>
    function load_url(url){
        window.location = url;
    }
    
    function clearDefault(el) {
         if (el.defaultValue==el.value) el.value = ""
    }
    
</script>

<link rel="stylesheet" href="http://skindeep.logankoester.com/wp/wp-content/themes/skindeep/style.css" type="text/css" media="screen" />

<style type="text/css">
body {
    background-image: none;
    background-color: #1a1a1a;
}

#input {
    padding: 10px;
    margin: 10px;
}

.dojoHtmlFisheyeListBar {
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
}

</style>

</head>
<body>

<div id="input">
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="get">
<input type="text" name="tag" value="<?php echo $tag; ?>" onfocus="clearDefault(this)" />
<input type="submit" value="Search!" />
</form>
</div>
<!-- Note that there cannot be ANYTHING inside this div besides dojo-FisheyeListItem divs -->
<div class="dojo-FisheyeList"
    dojo:itemWidth="100" dojo:itemHeight="100"
    dojo:itemMaxWidth="200" dojo:itemMaxHeight="200"
    dojo:orientation="horizontal"
    dojo:effectUnits="2"
    dojo:itemPadding="10"
    dojo:attachEdge="top"
    dojo:labelEdge="bottom"
    dojo:enableCrappySvgSupport="false"
>
<?php
// Search by single tag
$photos_by_tag = $f->photos_search(array("tags"=>$tag, "sort"=>"interestingness-desc", "per_page"=>$items));
foreach ($photos_by_tag['photo'] as $photo) {
    echo '<div class="dojo-FisheyeListItem" onClick="load_url(\''."http://www.flickr.com/photos/$photo[owner]/$photo[id]".'\');"'."\n";
    echo 'dojo:iconsrc="'.$f->buildPhotoURL($photo, "small").'" caption="">'."\n"; // Size can be Square, Thumbnail, Small, Medium, Large or Original
    echo '</div>'."\n";
}
?>
</div>
<br />
<p>--> <a href="http://skindeep.logankoester.com/fishy-eyes-for-web-uis">Demo</a> by <a href="http://logankoester.com">Logan Koester</a></p>
</body>
</html>