/* Code Samples - Ajax For Libraries: People @ the Library (HTML and Feedback) */



PHP file(s)
---------------------------------------------------------------------

/show/index.php

<div id="main"><a name="mainContent"></a>
<p class="download"><a class="expand" title="View code source" href="code.txt">View code</a> | <a class="zip" title="Get code as .zip file" href="../../../files/ajax-show.zip">Get code</a></p>
	<h1>People @ Your Library</h1>
  	<p class="control"><a href="./" class="refresh">Reset the page</a></p>
	<ul id="people">
    	<li id="first"><a href="?person=karen">Karen</a></li>
    	<li><a href="?person=jason">Jason</a></li>
    	<li><a href="?person=amy">Amy</a></li>
	</ul>
	<div id="details">
	<?php include "people.php"; ?>
	</div>
</div>
<!-- end main div -->

/show/people.php

<?php
if (isset($_GET["person"])) {
  switch ($_GET["person"]) {
    case "karen":
      include "files/html/karen.html";
    break;
    case "jason":
      include "files/html/jason.html";
    break;
    case "amy":
      include "files/html/amy.html";
    break;
  }
}
?>



Javascript file(s)
---------------------------------------------------------------------

/show/scripts/fetchHtml.js

window.onload = prepareLinks;

function prepareLinks() {
  if (!document.getElementById || !document.getElementsByTagName) {
    return;
  }
  if (!document.getElementById("people")) {
    return;
  }
  var list = document.getElementById("people");
  var links = list.getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    links[i].onclick = function() {
      var query = this.getAttribute("href").split("?")[1];
      var url = "people.php?"+query;
      return !grabFile(url);
    };
  }
}

function grabFile(file) {
  var request = getHTTPObject();
  if (request) {
    displayLoading(document.getElementById("details"));
    request.onreadystatechange = function() {
      parseResponse(request);
    };
    request.open("GET", file, true);
    request.send(null);
    return true;
  } else {
    return false;
  }
}

function parseResponse(request) {
  if (request.readyState == 4) {
    if (request.status == 200 || request.status == 304) {
      var details = document.getElementById("details");
      details.innerHTML = request.responseText;
      fadeUp(details,255,255,153);
    }
  }
}

function getHTTPObject() {
  var xhr = false;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        xhr = false;
      }
    }
  }
  return xhr;
}

function displayLoading(element) {
  while (element.hasChildNodes()) {
    element.removeChild(element.lastChild);
  }
  var image = document.createElement("img");
  image.setAttribute("src","img/loading.gif");
  image.setAttribute("alt","Loading...");
  element.appendChild(image);
}

function fadeUp(element,red,green,blue) {
  if (element.fade) {
    clearTimeout(element.fade);
  }
  element.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
  if (red == 255 && green == 255 && blue == 255) {
    return;
  }
  var newred = red + Math.ceil((255 - red)/10);
  var newgreen = green + Math.ceil((255 - green)/10);
  var newblue = blue + Math.ceil((255 - blue)/10);
  var repeat = function() {
    fadeUp(element,newred,newgreen,newblue)
  };
  element.fade = setTimeout(repeat,100);
}



CSS file(s)
---------------------------------------------------------------------

/show/styles/master.css

/*Styles for workshop prototytpes
Author:   Jason A. Clark 
Version:  Liquid layout 1.0 - September 2008
----------------------------------------------- */
/* =global default settings
----------------------------------------------- */
html, body, form, fieldset {margin:0;padding:0;font:100%/120% Verdana,Arial,Helvetica,sans-serif;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {margin:1em 0;padding:0;}
li, dd, blockquote {margin-left:1em;}
/* =element-specific settings
----------------------------------------------- */
body {line-height:1.6em;color:#333;background:#E5E5E5 url("../img/bodystripe.gif") 0 100% repeat-x;}
h1 {font:1.3em georgia,times,serif;color:#333;margin:15px 0 0 0;}
h2 {font:1.1em georgia,times,serif;color:#444;margin:0 0 15px 0;}
h2.mainHeading {font:1.3em georgia,times,serif;padding:15px 0 2px 0;border-bottom:1px dotted #333;}
h3 {font:1.0em georgia,times,serif;color:#444;margin:0 0 15px 0;}
/* =links
----------------------------------------------- */
a, a:visited {color:#2b4268;text-decoration:none;border-bottom:1px solid #2b4268;}
html>body a, html>body a:visited {border-bottom-style:dotted;}
a:hover, a:active {color:#933;border-color:#b55;border-bottom-style:solid;}
a img {border:none;}
/* =forms
----------------------------------------------- */
form {padding:10px;border-top:1px solid #ccc;border-right:2px solid #ccc;border-bottom:2px solid #ccc;border-left:1px solid #ccc;background-color:#F2F2F2;}
fieldset {border:none;}
label {font-size:1.2em;color:#2b4268;vertical-align:middle;cursor:pointer;}
input, select, textarea {width:25em;font:1.0em verdana,arial,sans-serif;padding:3px;margin:3px;border:1px solid gray;border-color:#AAA #DDD #DDD #AAA;vertical-align:middle;}
input:focus {border:1px #000 solid;}
input.submit {width:10em;font-size:.90em;color:#2b4268;border:1px solid black;border-color:#aaa #333 #333 #aaa;}
/* =miscellaneous and special global settings
----------------------------------------------- */
p.skipNav {position:absolute;left:-1000em;width:20em;}
p.download {text-align:right;margin-right:4%;font-size:.8em;line-height:1.2em;}
p.control {font-size:.8em;}
.zip {width:20px;padding:0 23px 0 0;background:url("../img/zip.gif") no-repeat right;}
.expand {line-height:12px;background:url("../img/expand.gif") 0 50% no-repeat;padding-left:16px;}
.refresh {line-height:14px;background:url("../img/refresh.gif") 0 50% no-repeat;padding-left:18px;}
/* =mastHead
----------------------------------------------- */
div#mastHead {background:#F3F3CC url("../img/mastripe.gif") 0 35px repeat-x;height:101px;}
#mastHead img {position:absolute;top:28px;left:4%;margin-left:-5px;border:none}
#mastHead p {background:#2b4268;color:#fff;padding:0 6% 3px 0;margin:0;font-size:0.75em;text-align:right;}
#mastHead p a {background:#2b4268;color:#fff;text-decoration:underline;}
/* =container
----------------------------------------------- */
div#container {width:65em;margin:0 auto;background:#fff;}
/* =main
----------------------------------------------- */
div#main {width:63em;margin:0 auto;padding:1em .5em 2em .5em;}
/* =content
----------------------------------------------- */
div#content {width:95%;margin:0 auto;}
#content p.warn {color:red;}
/* =people
----------------------------------------------- */
ul#people {display:inline;}
ul#people li {margin-left:0;padding-left:30px;border:none;list-style:none;display:inline;}
ul#people li#first {margin-left:0;padding-left:0;border:none;}
/* =details
----------------------------------------------- */
div#details {margin-top:30px;}
/* =footer
----------------------------------------------- */
div#footer {clear:both;width:100%;padding:.5em 0;padding-bottom:33px;background:url("../img/bkgrd-footer.gif") top left repeat-x;}
#footer ul {margin:0;padding:0;font:0.80em "Trebuchet MS",Verdana,sans-serif;text-align:center;} 
#footer ul li {display:inline;list-style:none;padding:0 0.75em;}
#footer ul li a {border:none;}