<?php
#
# simple script to fetch all .url files in the current directory, then display the images of those sites
# Created on 2006-05-14 1am. Inspired by http://37signals.com/svn/archives2/seen_any_inspiring_web_design_lately.php
# and http://del.icio.us/Xinex/greatdesign (found on aforementioned thread)
#
# 2006-05-14 1:47pm:
#   Simplified the div for each site. Made it an image instead of two nested divs

#
# array to fill up
#
$sites = array();

#
# directory object of current directory
#
$d dir('.');

#
# loop over each file in the directory
#
while ($file $d->read()) {
  
#
  # we only care about files that end in .url
  #
  
if (preg_match("/^(.+?)\.url$/"$file$m)) {
    
#
    # get the contents of the file (the url of the site)
    #
    
$url file_get_contents($file);
    
$sites[$url] = $m[1];
  }
}

#
# z-index so that the images go on higher divs go OVER the lower ones.
#
$i 1000;

#
# the body string
#
$body "";

#
# loop through each site found
#
foreach($sites as $site => $hash) {
  
#
  # lower the z-index so it acutally does something
  #
  
$i--;
  
  
#
  # 3 divs, the outer with the height set at 200px, with a mouse over to show
  # the inner - with the height 1000px (should be long enough)
  # the url button - the site address
  # ----------2006-05-14---------
  #  changed. It's not just a nested link with an image. Much simpler - teach me to code at 1am.
  #
  
$body .= <<<HTML
    <div class="site" id="$hash" style="z-index: $i; background: #111 url('./{$hash}_t.png') no-repeat;" onmouseover="document.getElementById('inner_$hash').style.display='';" onmouseout="document.getElementById('inner_$hash').style.display='none';">
      <a href="
$site" style="display:none;" title="$site" id="inner_$hash"><img alt="$site" src="./{$hash}_t.png"/></a>
    </div>
HTML;
}


// display page

#
# set content type
#
header("Content-Type: text/html;\n\tcharset=utf-8");

#
# spit out the "template"
#
echo <<<HTML
<!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" xml:lang="en" lang="en">
<head>
  <title>Great designs - Xinex's list</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript">
  // <![CDATA[
  // ]]>
  </script>
  <style type="text/css">
    body { color: gray; background: black; font: small "Trebuchet MS", trebuchet, arial, sans-serif; }
    h1 { font-size: 20px; margin: 4px; }
    a { color: #678; }
    .site { border: 1px solid grey; float: left; margin: 10px; color: white; width: 200px; height: 200px; position: relative;}
    .site a img { border: 0; }
    #about { clear: both; }
    #about h3 { font-weight: bold; margin: 0; font-size: 14px; }
    #about ul { float: left; width: 350px; border: 1px solid grey; list-style: none; padding: 5px; margin: 0 5px;}
  </style>
</head>
<body>
  <h1>Design viewer</h1>
  <div id="about">
    Created by <a href="http://metaatem.net/">Erik Kastner</a>. Generated from the <a href="http://del.icio.us/Xinex/greatdesign">del.icio.us list</a> tagged with "greatdesign" by user Xinex.<br/>
    Not tested in IE. No IE at home until the mac book pro fund is filled.<br/>
    <a href="mailto:kastner@gmail.com">Mail me</a> with any questions, comments or bugs. Feel free to take the various sources and play.
    <ul id="source">
      <li><h3>This project</h3></li>
      <li>Source of <a href="index.phps">This page</a></li>
      <li>Source of <a href="pap.scpt">Applescript for Paparazzi!</a></li>
      <li>Source of <a href="capture.rb">Ruby script</a></li>
    </ul>
    <ul id="projects">
      <li><h3>Other Projects</h3></li>
      <li><a href="http://metaatem.net/">Meta | ateM</a> - my blog</li>
      <li><a href="http://www.sixpackbysummer.com/">Six Pack by Summer</a> - my fitness blog ($1,500+)</li>
      <li><a href="http://metaatem.net/words/design">Spell with Flickr</a> - I'm web famous</li>
    </ul>
  </div>
  <br style="clear:both;" />
$body
</body>
</html>

HTML;

?>