function navLink(name, link, currentName) {
    var cls = "navlink";
    if (name == currentName) {
        cls = "navlink-current";
    }
    return '<a class="' + cls + '" href="' + link + '">' + name + '<\/a>';
}

function displayHeader(currentName) {
    var str='';
    str+='<div class="frame" style="background-image: url(header.png); background-repeat: no-repeat; border-bottom: none;">';
    str+='	<!-- Title -->';
    str+='	<table border="0" cellpadding="0" cellspacing="0" width="100%">';
    str+='		<tr height="85">';
    str+='			<td align="left" width="135"><\/td>';
    str+='			<td style="width: 384px;" align="left" valign="bottom">';
    str+='				<span style="color: rgb(0, 132, 0); font-size: 24pt; font-weight: bold;">FolderFrog<\/span><br>';
    str+='				<span style="color: rgb(0, 132, 0); font-size: 12pt; font-weight: bold;">File your emails and attachments in one click!<\/span>';
    str+='			<\/td>';
    str+='			<td style="width: 278px;" valign="bottom">';
    if (currentName != "Download") {
    str+='				<span style="margin-top: 0px; margin-bottom: 0px;"><a href="download.html"><img src="download%20button.png" style="position: relative; top: 2px;" border="0" alt=""><\/a><\/span>';
    }
    str+='			<\/td>';
    str+='		<\/tr>';
    str+='	<\/table>';
    str+='	<!-- Navigation -->';
    str+='	<table border="0" cellpadding="0" cellspacing="0" width="100%">';
    str+='		<tr height="59">';
    str+='			<td align="left" width="110" style="height: 54px"><\/td>';
    str+='			<td class="navbar" style="height: 54px">';
    str+='              | ' + navLink("Home", "index.html", currentName);
    str+='              | ' + navLink("Quick Tour", "screenshots.html", currentName);
    str+='              | ' + navLink("Download", "download.html", currentName);
    str+='              | ' + navLink("About us", "about.html", currentName);
    str+='				|';
    str+='			<\/td>';
    str+='		<\/tr>';
    str+='	<\/table>';
    str+='<\/div>';
    str+='<div class="frame background">';
    document.write(str);
}

function displayScreenshot(name, comment) {
    var str='';
    str+='<table class="frame" cellspacing="20">';
    str+='<tr>';
    str+='    <td>';
    str+='        <div style="width: 600px;text-align: left;">';
    str+='            ' + comment;
    str+='        <\/div>';
    str+='    <\/td>';
    str+='<\/tr>';
    str+='<tr>';
    str+='    <td>';
    str+='        <span style="font-size: 7pt">Click on the picture to enlarge/reduce it<\/span><br/>';
    str+='        <img src="screenshots\/' + name + '" width="500" alt="Click to enlarge." onclick="if (width==500) { width = 760; alt=\'Click to reduce\'; } else { width = 500; alt=\'Click to enlarge\'; }"\/>';
    str+='    <\/td>';
    str+='<\/tr>';
    str+='<\/table>';
    document.write(str);
}

function displayFooter() {
    var str='';
    str+='<\/div>';
    str+='<div class="frame" style="background-image: url(footer.png); background-repeat: no-repeat; border-top: none;height: 20px;text-align: center;vertical-align: middle;">';
    str+='<span style="font-size: 7pt; color: rgb(0, 132, 0);">Copyright 2007 - All rights reserved<\/span>';
    str+='<\/div>';
    document.write(str);
}