index.php
<?php
session_start();
define('JAVASCRIPT_FILES_LADEN', true);  // deze define de waarde false geven, zorgt er voor dat de javascript files niet geladen worden.  Dit geeft dus een vergelijkbaar effect alsof je javascript af hebt staan.
$_GET['p'] = ( !empty($_GET['p']) ? $_GET['p'] : '');

if ( !empty($_POST) ) 
{  // afhandelen van post
  switch ( $_GET['p'] )
    {
      case 'login': echo login(); break;
    default:
      break;
    }
}
else
{ // gewone pagina's
  switch ( $_GET['p'] )
  {
  default           : echo main();         break;
  case 'welkom'     : echo welkom();       break;
  case 'fotoalbum'  : echo fotoalbum();    break;
  case 'login'      : echo loginForm();    break;
  }
}

///////////////////////
function main()
{
  return htmlOpmaak('');
}
function fotoalbum()
{
  $fotos = getFotos();
    $_GET['id'] = ( !empty($_GET['id']) ? (int) $_GET['id'] : 0);
    if ($_GET['id'] >= count($fotos) )
      $_GET['id'] = 0;
  
  if (!empty($_GET['ajax']))    // enkel de url van de foto meegeven
  {
    $return = $fotos[ (int) $_GET['id'] ] ; // uiteraard geen html opmaak
  }
  else    // volledige pagina
  {
    $return = '<div id="thumbnails">';
    foreach ($fotos as $key => $foto)
      $return .='<a onClick="return get_foto('. $key .')" href="index.php?p=fotoalbum&id='. $key .'"><img src="'. $foto .'"/></a>';
    $return .= '</div>
    <img id="grote_foto" src="'. $fotos[ (int) $_GET['id'] ] .'"></div>
    ';
    $return = htmlOpmaak($return);
  }
  return $return;
}

function getFotos()
{
return array(
  'http://www.planetperplex.com/img/escher_waterfall.jpg'
  , 'http://blogimages.bloggen.be/artiest_escher/81550-10ab380c07a9a49af2bfc1a4521115b3.jpg'
  , 'http://www.wadden.vuurwerk.nl/socrates/escher.gif'
  , 'http://maths.ucd.ie/mathsupportcentre/ucdwebpage/images/escher_ascending_descending.jpg'
  );
}


function welkom()
{
      $ingelogd = 'niet ingelogd. <div><a href="index.php?p=login">Inloggen</a></div>';
      if ( !empty($_SESSION['login']) )
        $ingelogd = '
        <div id="login_container">
          Ingelogd als: '. $_SESSION['login'] .' (met de traditionele post)
        </div>';
  return htmlOpmaak($ingelogd);
}
function loginForm()
{
  return htmlOpmaak('
      <div id="login_container">
        <form method="post" action="index.php?p=login" onsubmit="return submit_login();">
          <h2>Inloggen</h2>
          <div><label><input type="text"  name="login" id="login"/> Login </label></div>
          <div><label><input type="password"  name="password" id="password"/> Paswoord </label></div>
          <div><label><input type="submit"  value="login"/></label></div>
        </form>
      </div>
');
}
function login()
{
  $result='';
  $sql = sprintf("SELECT id, login, password FROM users WHERE login='%s' AND password='%s' LIMIT 1"
          , mysql_real_escape_string($_POST['login'])
          , md5($_POST['password'])
  );
  // haal record uit db, ...
  $_SESSION['login'] = $_POST['login'];
  if ( empty($_GET['ajax']) )
    {
      header('location: index.php?p=welkom');
    }
  else
    {
      $result .= 'Ingelogd als: '. $_SESSION['login'] .' (met Ajax)' ;
    }
return $result;
}
function getMenu()
{
return '
      <span><a href="index.php?p=login">Inloggen</a></span>
      | <span><a href="index.php?p=fotoalbum">Foto album</a></span>
';
}
function htmlOpmaak($body)
{
$js = false;
if(JAVASCRIPT_FILES_LADEN == true)
  $js = '
  <script src="ajax.js" language="javascript" type="text/javascript"> </script> 
  <script src="js.js" language="javascript" type="text/javascript"> </script>
  ';
  return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    '.$js.'
    <link href="css.css" rel="stylesheet" type="text/css" />
    <title></title>
  </head>
  <body>
    <div id="menu">'. getMenu() .'</div>
    <div id="content">'. $body .'</div>
  </body>
</html>';
}
?>

js.js
[code]var http = new ajaxObject();
function submit_login()
{
  var url = 'index.php?p=login&ajax=1';
  var vars = 'login='+ document.getElementById('login').value + '&password='+ document.getElementById('password').value;
  http.send(
     url,   // url
    response_login,           // callback
    'post',                    // get / post
    vars                      // string of variables, eg. 'id='+ escape(id) +'&action=delete';
    );
  return false;
}
function response_login()
{
  var response = http.response('text');
  if ( response != null )
    {
      document.getElementById('login_container').innerHTML = response;
    }
}
function get_foto(id)
{

  var url = 'index.php?p=fotoalbum&ajax=1&id='+ id;
  http.send(
     url,   // url
    response_foto,           // callback
    'get',                    // get / post
    null                      // string of variables, eg. 'id='+ escape(id) +'&action=delete';
    );
  return false;
}
function response_foto()
{
  var response = http.response('text');
  if ( response != null )
    {
      document.getElementById('grote_foto').src = response;
    }
}[/code]

ajax.js
[code]/*
// example of how to use:
var http = new ajaxObject();
var catSelected;

function getMeer(cat)
{
  http.send(
    'ajax.php?cat='+ cat, // url
    response_links,       // callback
    'get',                // get / post
    null                  // string of variables, eg. 'id='+ escape(id) +'&action=delete';
    );
}
function response_links()
{
  var response = http.response('text');
  if ( response != null )
    {
      var container = document.getElementById('categorie');
      container.innerHTML = response;
    }
}
*/

function ajaxObject()
{
  this.http = createHTTPHandler();
}
ajaxObject.prototype.send = function(url, response, method, passData)
{
  if (method == 'post')
  {
  this.http.open("POST", url, true);
  this.http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  this.http.onreadystatechange = response;
  this.http.send( passData );
  }
  else // default GET
  {
    this.http.open("GET", url, true);
    this.http.onreadystatechange = response;
    this.http.send(null);
  }
}
ajaxObject.prototype.response = function(type)
{
  try
  {
    if (this.http.readyState == 4)
    {
      switch (type)
      {
        default:
          return this.http.responseText;
          break;
        case 'json':
          return eval('(' + this.http.responseText + ')'); 
          break;
        case 'xml':
          return this.http.responseXml;
          break;
      }
    }
    else
      return null;
  }
  catch(e)
  {
  }
  return null;
}

function createHTTPHandler()
{
    httphandler = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) 
    {
      try 
      {
      httphandler = new XMLHttpRequest();
        } catch(e) 
        {
      httphandler = false;
        }
    // branch for IE/Windows ActiveX version
    } 
    else if(window.ActiveXObject) 
    {
          try 
          {
            httphandler = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e) 
          {
            try 
            {
                httphandler = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) 
            {
                httphandler = false;
            }
      }
    }
    return httphandler;
}[/code]

css.css
[code]
body
{
background-color: #000000;
color: #33eecc;
}
a
{
color: #ccee22;
text-decoration: none;
}

img
{
border: 0;
}

#grote_foto
{
height: 450px;
margin: 10px;
}
#thumbnails a img
{
  height: 120px;
  margin: 5px;
}[/code]
