var c = 15;
var TEXT_WIDTH = 400;
var BG_COLOR = '#FAEBD7'; // antiek-wit
var IMAGE_WIDTH = 160;
var IMAGE_HEIGHT = 130;
var EXTRA_HEIGHT = 125;
var TOTAL_WIDTH = 3*c + IMAGE_WIDTH + TEXT_WIDTH;

// helper cell function
function drawImageCell(document, image, width, height){
    document.write('<TD><IMG src="resources/'+image+'" width="'+width+'" height="'+height+'"></TD>');
}

// cell functions
function bottom2right(document, type){
    drawImageCell(document, type+"_upperleft.gif", c, c);
}
function top2right(document, type){
    drawImageCell(document, type+"_lowerleft.gif", c, c);
}
function left2top(document, type){
    drawImageCell(document, type+"_lowerright.gif", c, c);
}
function left2bottom(document, type){
    drawImageCell(document, type+"_upperright.gif", c, c);
}
function horizontalFixed(document, type, width){
    drawImageCell(document, type+"_vert.gif", width, c);
}
function verticalFixed(document, type, height){
    drawImageCell(document, type+"_hor.gif", c, height);
}
function emptyHorizontalFixed(document, width){
    document.write('<TD width="'+width+'" height="'+c+'"></TD>');
}
function filledHorizontalFixed(document, width){
    document.write('<TD width="'+width+'" bgcolor='+BG_COLOR+'><FONT size="1">&nbsp;</FONT></TD>');
}
function drawText(document, title, text, hyperlink, target){
    document.write('<TD rowspan="3" valign="top" width='+TEXT_WIDTH+'>');
    document.write('<FONT face="Georgia, System">');
    document.write('<H1><A href="'+hyperlink+'" target="'+target+'">'+title+'</A></H1>');
    document.write(text);
    document.write('</FONT>');
    document.write('</TD>');
}

// row functions
function drawEmptyRow(document){
    document.write('<TR><TD colspan="5" bgcolor="'+BG_COLOR+'">&nbsp;</TD></TR>');
}
function drawTopRow(document){
    document.write('<TR>');
        filledHorizontalFixed(document, c);
        filledHorizontalFixed(document, IMAGE_WIDTH);
        bottom2right(document, "whiteout");
        horizontalFixed(document, "whiteout", TEXT_WIDTH);
        left2bottom(document, "whiteout");
    document.write('</TR>');
}
function drawBottomRow(document){
    document.write('<TR>');
        filledHorizontalFixed(document, "whiteout", c);
        filledHorizontalFixed(document, "whiteout", IMAGE_WIDTH);
        top2right(document, "whiteout");
        horizontalFixed(document, "blackout", TEXT_WIDTH);
        left2top(document, "whiteout");
    document.write('</TR>');
}

// multi-line functions
function drawPageHeader(document){
    document.write('<TABLE cellpadding="0" cellspacing="0" border="0" width="100%">');
    document.write('<TR>');
    document.write('<TD bgcolor="'+BG_COLOR+'" width="50%">&nbsp</TD>');
    document.write('<TD>');
    document.write('<TABLE cellpadding="0" cellspacing="0" border="0">');
}
function drawPageFooter(document){
    document.write('</TABLE>');
    document.write('</TD>');
    document.write('<TD bgcolor="'+BG_COLOR+'" width="50%">&nbsp</TD>');
    document.write('</TR>');
    document.write('</TABLE>');
}
function drawParagraph(document, title, text, hyperlink, target, image){
    document.write('<TR>');
        bottom2right(document, "whiteout");
        horizontalFixed(document, "whiteout", IMAGE_WIDTH);
        left2top(document, "blackout");
        emptyHorizontalFixed(document, TEXT_WIDTH);
        verticalFixed(document, "whiteout", c);
    document.write('</TR>');
    document.write('<TR>');
        verticalFixed(document, "blackout", IMAGE_HEIGHT);
        //emptyHorizontalFixed(document, IMAGE_WIDTH);
        document.write('<TD width="'+IMAGE_WIDTH+'" height="'+c+'"><CENTER><A href="'+hyperlink+'" target="'+target+'"><IMG src="resources/'+image+'" width="'+(IMAGE_WIDTH-10)+'" height="'+(IMAGE_HEIGHT-10)+'" border="0"></A></CENTER></TD>');
        emptyHorizontalFixed(document, c);
        drawText(document, title, text, hyperlink, target);
        verticalFixed(document, "whiteout", IMAGE_HEIGHT);
    document.write('</TR>');
    document.write('<TR>');
        top2right(document, "whiteout");
        horizontalFixed(document, "blackout", IMAGE_WIDTH);
        left2bottom(document, "blackout");
        // cell implied by 'rowspan'
        verticalFixed(document, "whiteout", c);
    document.write('</TR>');

    document.write('<TR>');
        filledHorizontalFixed(document, c);
        filledHorizontalFixed(document, IMAGE_WIDTH);
        verticalFixed(document, "blackout", EXTRA_HEIGHT);
        // cell implied by 'rowspan'
        verticalFixed(document, "whiteout", EXTRA_HEIGHT);
    document.write('</TR>');
}

function drawWindow(document, innerHtml){
    drawTopRow(document);
    document.write('<TR>');
        filledHorizontalFixed(document, c);
        filledHorizontalFixed(document, IMAGE_WIDTH);
        verticalFixed(document, "blackout", 50);
        document.write('<TD width="'+TEXT_WIDTH+'" height="'+c+'">');
        document.write('<FONT color="#FFFFFF" face="Georgia, Comic Sans MS, System"><CENTER>');
        document.write(innerHtml);
        document.write('</CENTER></FONT>');
        document.write('</TD>');
        verticalFixed(document, "whiteout", 50);
    document.write('</TR>');
    drawBottomRow(document);
}

function drawCenterWindow(document, innerHtml, width, height){
    document.write('<TR>');
        document.write('<TD colspan="3" height="'+c+'" bgcolor="'+BG_COLOR+'">&nbsp;</TD>');
    document.write('</TR>');
    document.write('<TR>');
        bottom2right(document, "whiteout");
        horizontalFixed(document, "whiteout", width);
        left2bottom(document, "whiteout");
    document.write('</TR>');
    document.write('<TR>');
        verticalFixed(document, "blackout", height);
        document.write('<TD width="'+width+'" height="'+height+'">' + innerHtml + '</TD>');
        verticalFixed(document, "whiteout", height);
    document.write('</TR>');
    document.write('<TR>');
        top2right(document, "whiteout");
        horizontalFixed(document, "blackout", width);
        left2top(document, "whiteout");
    document.write('</TR>');
    document.write('<TR>');
        document.write('<TD colspan="3" bgcolor="'+BG_COLOR+'">&nbsp;</TD>');
    document.write('</TR>');
}

function drawHeader(document){
    drawTopRow(document);
}

function drawFooter(document){
    drawBottomRow(document)
}