// Javascript for the cgi101.com front page.
//
// written by Jackie Hamilton ("Kira")
// email: kira@cgi101.com   web: http://www.lightsphere.com
// Last modified Jan 2005

// first declare some global variables...

myContent = new Object();   // this saves the content html
 myImages = new Object();   // image objects
 imgSrc = new Object();     // original source for the images
 imgoverSrc = new Object(); // rollover source for the images

myContent.current = "";     // which button is currently hilited
myContent.contentID;        // the id for the content paragraph
myContent.debug;            // debugging info.

// Now define the page content. The names correlate to names of images on
// the left-hand nav bar. To add another one just add a myContent.newname
// to this list (as well as to the src of the page).

// unfortunately javascript doesn't have a nice way to do multi-line
// strings, so we escape the line breaks with a \ char...

myContent.learn = '<h2>Learn CGI Programming!</h2>\
<p class="bigitalic">Would you like to learn...</p>\
<ul>\
    <li>How to decode web forms (such as guestbooks, polls/quizzes, and order forms)?</li>\
    <li>How to send form data to your e-mail address, or save the data to a file or database?</li>\
    <li>How to write a page counter?</li>\
    <li>How to build an online shopping cart?</li>\
    <li>How to use web cookies to track visitors to your site?</li>\
    <li>How to create a password-protected website, and how to allow users to register for the site?</li>\
    <li>How to write your own web message board or web log program?</li>\
</ul>\
<p>You can easily learn how to do all of these things and more. If you can build a web page, you can write CGI programs.</p>\
<p class="big"><a href="learn/">Click here to get started!</a></p>';


myContent.books = '<h2>Books for Web Developers</h2>\
<table>\
<tr>\
  <td class="cgibook">\
<img src="img05/book-cover.gif" alt="" height="218" width="175" border="0" align="LEFT">\
<b><i>CGI Programming 101</i></b><br>\
<br>\
<b>CGI Programming 101</b> will show you how to add dynamic content to your site - from the simplest guestbook forms to database-driven shopping cart systems. You don\'t need any programming experience to get started, either. Start with the <a href="/book/">free chapters</a> here on the web, where you\'ll learn to write your first guestbook form. When you\'re ready to learn more, <a href="/book/order.html">order the book</a> to learn how to work with MySQL databases, how to build your own shopping cart, how to password-protect your site, and more!\
  </td>\
  <td class="space"></td>\
  <td class="otherbooks">\
<b>More Books On:</b>  \
<p class="green"><a class="green" href="/books/perl.html">Perl</a></p class="green">\
<p class="green"><a class="green" href="/books/php.html">PHP</a></p class="green">\
<p class="green"><a class="green" href="/books/java.html">Java</a></p class="green">\
<p class="green"><a class="green" href="/books/javascript.html">Javascript</a></p class="green">\
<p class="green"><a class="green" href="/books/mysql.html">MySQL</a></p class="green">\
<p class="green"><a class="green" href="/books/xml.html">XML</a></p class="green">\
<p class="green"><a class="green" href="/books/css.html">CSS</a></p class="green">\
<p class="green"><a class="green" href="/books/flash.html">Flash</a></p class="green">\
  </td>\
</table>';

myContent.tools = '<h2>Web Tools</h2>\
<table>\
<tr>\
  <td><a href="http://scripts.cgi101.com/"><img src="img05/tools/cgi.gif" alt="" width="110" height="75" border="0"></a></td><td class="space"></td>\
  <td class="toolbox">\
<p class="tool"><a href="http://scripts.cgi101.com/">CGI Scripts</a></p>\
Free scripts you can use on your site.\
  </td>\
</tr>\
<tr>\
  <td><a href="/tools/colors.html"><img src="img05/tools/colors.jpg" alt="" width="110" height="75" border="0"></a>\
  </td><td class="space"></td>\
  <td class="toolbox">\
<p class="tool"><a href="/tools/colors.html">Color Picker</a></p>\
Web-safe color picker\
  </td>\
</tr>\
<tr>\
  <td><a href="http://www.dotomator.com/"><img src="tools/dotomator.gif" alt="" width="110" height="75" border="0"></a>\
  </td><td class="space"></td>\
  <td class="toolbox">\
<p class="tool"><a href="http://www.dotomator.com/">Dot-o-mator</a></p>\
Having trouble finding a good domain name? Dot-o-mator can help!\
  </td>\
</tr>\
<tr>\
  <td><a href="http://www.w3.org/"><img src="img05/tools/w3c.gif" alt="" width="110" height="75" border="0"></a>\
  </td>  <td class="space"></td>\
  <td class="toolbox">\
<p class="tool">Validation Tools on <a href="http://www.w3.org/">W3C.org</a></p>\
<p>Use these to see how closely your web pages meet web standards:</p>\
<b><a href="http://validator.w3.org/">HTML Validator</a> &bull; \
<a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> &bull; \
<a href="http://validator.w3.org/checklink">Link Checker</a></b><br>\
  </td>\
</tr>\
</table>';


myContent.help = '\
<h2>Help</h2>\
\
<h3>Help files and tutorials on CGI101:</h3>\
<ul>\
    <li class="med"><a href="/help/unixhelp.html">Unix Tutorial</a> - finding your way around the Unix shell.\
    <li class="med"><a href="/help/swish.html">A quick guide</a> to adding a SWISH search script to your site. Includes a config file and sample HTML and CGIs.\
    <li class="med">Installing and Configuring Apache/Perl on <a href="/learn/connect/winxp.html">Windows XP</a> and <a href="/learn/connect/mac.html">Mac OS X</a>\
</ul>\
\
<h3>Offsite documentation:</h3>\
<ul>\
    <li class="med"><a href="http://dev.mysql.com/doc/mysql/en/index.html">MySQL Manual</a>\
    <li class="med"><a href="http://www.php.net/manual/">PHP Manual</a>\
    <li class="med"><a href="http://search.cpan.org/dist/perl/pod/perl.pod">Perl Manual</a>\
</ul>\
';

myContent.contact = myContent.help;

//
// Now the functions. One initialization function, initContent, which is
// called when the page loads to set the page up with 'learn' as the
// default text/image block. (The HTML page also has that content hardcoded,
// in case the viewer has javascript turned off.)
//

function initContent() {
    // first some initializations...
    myContent.current = "learn";
    myContent.contentID = document.getElementById("pageContent");
    myContent.debug = document.getElementById("debug");

    // now set the default page text
    // myContent.contentID.innerHTML =         
    //    myContent[myContent.current];

    // and flip the "learn cgi" image on.
    imgOn(myContent.current);
}

//
// changeContent() is called by the images as they are rolled over. There
// is no "onmouseout" call, because we want the new content to persist
// even after they move their mouse away.
//

function changeContent(which) {
    imgOff(myContent.current);
    imgOn(which);
    myContent.current = which;
    myContent.contentID.innerHTML = myContent[myContent.current];
    if (which == "contact"){
        var contactBox = document.getElementById("divcontact");
        contactBox.className = "contactus";
    }
}

//
// A generic imgOn/imgOff function are called by both changeContent and
// initContent. These toggle the rollover images to their on/off states.
//

function imgOn(byName) {
    var whichImg = getImg(byName);
    whichImg.src = imgoverSrc[byName];
}

function imgOff(byName) {
    var whichImg = getImg(byName);
    whichImg.src = imgSrc[byName];
}

//
// In lieu of an 'initialize everything when the page loads', the
// getImg function stores image objects and source/rollover source names
// in various object(arrays), as they are rolled over. 
//

function getImg(byName) {
    if (myImages[byName]) {
        return myImages[byName];
    } else {    
        var myImg = document.getElementById(byName);    
        myImages[byName] = myImg;
        
        var src = myImg.getAttribute('src');
        imgSrc[byName] = src;   // the original src

        var ftype = src.substring(src.lastIndexOf('.'), src.length);
        var hsrc = src.replace(ftype, '-over'+ftype);
        imgoverSrc[byName] = hsrc;  // the "over" src

        return myImg;
    }
}

// This was for debugging. To use it, add a <p id="debug"></p> tag to
// the page somewhere.

function debug(msg) {
    myContent.debug.innerHTML = msg;
}

// The end.