<?php
    
if ($_GET['source']) {
        
highlight_file($_SERVER['SCRIPT_FILENAME']);
        exit;
    }
    
header("Content-Type: text/html; charset=iso-8859-1");
    
header("Content-Language: en");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<?php

/********************************/
/********************************/
/* START OF "USER EDITABLE" BIT */
/********************************/
/********************************/

?>

<title>Gallery Example - Images of London</title>
<style type="text/css">
body {
    text-align: center;
    color: black;
    background: #eee;
}
.menu {
    margin: 0;
    padding: 0;
}
.thumb {
    padding: 0;
    list-style: none;
    display: inline;
    margin: 0 17px;
}
.thumb img {
    height: 80px;
    width: 120px;
    border: 0;
}
.thumb a:link, .thumb a:visited {
    text-decoration: none;
}
#mainimg {
    margin: 8px 0 0 0;
}
#description {
    border: 1px solid #666;
    width: 582px;
    margin: 8px auto;
    padding: 8px;
    height: 5em;
    overflow: auto;
    text-align: justify;
}
#foot {
    width: 582px;
    margin: 8px auto;
}
</style>
<?php                                                

    $img
[0]    =    '31_02_7_web.jpeg';
    
$img[1]    =    '31_19_3_web.jpeg';
    
$img[2]    =    '31_22_3_web.jpeg';
    
$img[3]    =    '31_26_2_web.jpeg';
    
$img[4]    =    '31_27_12_web.jpeg';
    
$img[5]    =    '31_34_22_web.jpeg';
    
$img[6]    =    '31_49_7_web.jpeg';
    
$img[7]    =    '31_56_2_web.jpeg';
    
    
$alt[0] =     'Buckingham Palace';
    
$alt[1] =     'Westminster Abbey';
    
$alt[2] =     'Trafalgar Square';
    
$alt[3] =     'Tower Bridge';
    
$alt[4] =     'Picadilly Circus';
    
$alt[5] =     'London Underground';
    
$alt[6] =     'Greater London Authority';
    
$alt[7] =     'London Bus';

    
$txt[0] =     'Buckingham Palace is the official residence of Queen Elizabeth II. It is situated between Hyde Park, St James Park and Green Park.';
    
$txt[1] =     'Westminster Abbey is a large church consecrated in <abbr lang="la" title="anno domini">AD</abbr> 1065. It is opposite the Houses of Parliament and is the traditional coronation and burial place for English monarchs.';
    
$txt[2] =     'Trafalgar Square is a square in central London that commemorates the Battle of Trafalgar.';
    
$txt[3] =     'Tower Bridge is a bridge over the River Thames, close to the Tower of London.';
    
$txt[4] =     'Picadilly Circus is the junction of Picadilly, Shaftesbury Avenue, Regent Street and Coventry Street. It is a busy meeting place, famous for its bright lights and statue of "Eros".';
    
$txt[5] =     "The London Underground is the world's oldest underground metropolitan rail network, with over 270 stations and more than 250 miles of track. Roughly three million journeys are made on the Tube every day!";
    
$txt[6] =     'The Greater London Authority was formed in July 2000 to administer Greater London, an area covering over 600 square miles, and over thirty smaller councils. Pictured here is its headquarters, City Hall, opened in July 2002.';
    
$txt[7] =     "One of London's famous red double-decker buses.";

    
$foot '<p id="foot"><small>Markup and programming copyright 2005 Toby Inkster. All rights reserved. <a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01 Strict</a>. <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS 2.0</a>. Images from <a href="http://www.freefoto.com/">FreeFoto.com</a>. You may view the <a href="?source=1">source code</a> to get an idea of how this was done, but no wholesale stealing. Mmmmmkay?</small></p>';


/******************************/    
/******************************/
/* END OF "USER EDITABLE" BIT */
/******************************/
/******************************/
    
    
    
function getSrc() {
        global 
$img;
        
$x $_GET['x'];
        if (isset(
$x))
            return 
$img[$x];
        else
            return 
'start.jpeg';
    }
    function 
getAlt() {
        global 
$alt;
        
$x $_GET['x'];
        if (isset(
$x))
            return 
$alt[$x];
        else
            return 
'';
    }
    function 
getTxt() {
        global 
$txt;
        
$x $_GET['x'];
        if (isset(
$x))
            return 
$txt[$x];
        else
            return 
'Click on a thumbnail to view a larger version of the image.';
    }
    function 
doThumb($n) {
        global 
$img$alt$txt;
        
$i $img[$n];
        
$a str_replace('"','\"',$alt[$n]);
        
$t str_replace('"','\"',$txt[$n]);
        print 
"\n";
        print 
"  <li id=\"thumb$n\" class=\"thumb\">\n";
        print 
"    <a href=\"?x=$n\"\n";
        print 
"       onclick=\"return replaceimg($n);\">\n";
        print 
"      <img src=\"thumb/$i\"\n";
        print 
"           alt=\"${alt[$n]}\">\n";
        print 
"    </a>\n";
        print 
"  </li>\n";
    }

?>
<script type="text/javascript">
var img=new Array(8);
var alt=new Array(8);
var txt=new Array(8);
<?php
    
for($i=0;$i<8;$i++) {
        print 
"img[$i]=\"${img[$i]}\";\n";
        print 
"alt[$i]=\"${alt[$i]}\";\n";
        print 
"txt[$i]=\"" str_replace('</','<\/',str_replace('"',"\\\"",$txt[$i])) . "\";\n";
    }
?>
function replaceimg(n) {
    var i = document.getElementById("mainimg");
    var p = document.getElementById("description");
    i.src = "loading";
    i.src = img[n];
    i.alt = alt[n];
    p.innerHTML = txt[n];
    return false;
}
</script>

<ul class="menu" id="firstmenu">
  <?php for($i=0;$i<4;$i++) { doThumb($i); } ?>
</ul>

<div>
  <img src="<?= getSrc() ?>" alt="<?= getAlt() ?>" id="mainimg" width="600" height="400">
  <p id="description"><?= getTxt() ?></p>
</div>

<ul class="menu" id="secondmenu">
  <?php for($i=4;$i<8;$i++) { doThumb($i); } ?>
</ul>

<?= $foot ?>