// (c) 2008 Emerson Process Management

// Color constants

var pTdBgColor = "#6698FE";
var lTdBgColor = "#009800";
var tTdBgColor = "#FECB00";
var cTdBgColor = "#980033";
var vTdBgColor = "#FE0000";

// Variable Declarations
  
var pImgArr = new Array();
var lImgArr = new Array();
var tImgArr = new Array();
var cImgArr = new Array();
var vImgArr = new Array();

var pContentArr = new Array();
var lContentArr = new Array();
var tContentArr = new Array();
var cContentArr = new Array();
var vContentArr = new Array();
             
// People Init

pImgArr[0] = "people_1_thumb.jpg";
pImgArr[1] = "people2_thumb.jpg";
pImgArr[2] = "workplace2_thumb.jpg";

pContentArr[0] = "people1.html";
pContentArr[1] = "people2.html";
pContentArr[2] = "workplace2.html";

// Workplace Init

lImgArr[0] = "workplace3_thumb.jpg";
lImgArr[1] = "workplace1_thumb.jpg";

lContentArr[0] = "workplace1.html";
lContentArr[1] = "workplace3.html";


// Technology Init

tImgArr[0] = "tech_1_thumb.jpg";
tImgArr[1] = "tech2_thumb.jpg";

tContentArr[0] = "tech1.html";
tContentArr[1] = "tech2.html";

// Customer Init

cImgArr[0] = "customer1_thumb.jpg";
cImgArr[1] = "customer2_thumb.jpg";

cContentArr[0] = "customers1.html";
cContentArr[1] = "customers2.html";

// Values Init

vImgArr[0] = "values1_thumb.jpg";
vImgArr[1] = "values2_thumb.jpg";
vImgArr[2] = "values3_thumb.jpg";
vImgArr[3] = "values4_thumb.jpg";

vContentArr[0] = "values1.html";
vContentArr[1] = "values2.html";
vContentArr[2] = "values3.html";
vContentArr[3] = "values4.html";


// Function will generate a dynamic HTML table that will span columns
// for each image like a film strip.  It also groups the columns into
// the sections People, Leadership, Technology, Customer and Values 
// and will color the background cells to the color constants declared
// above.
           
function loadThumbnails() {

    var tableDef = "<table border=0 cellpadding=0 cellspacing=0><tr>";
                    
    for (i = 0; i < pImgArr.length; i++) {            
        var imgStr = "<td style=\"height:79px;padding:2px;background:" + pTdBgColor + ";\"><a href=\"#\" onclick=\"javascript:loadContent('" + pContentArr[i] + "');\"><img src=\"images/" + pImgArr[i] + "\" alt=\"Thumbnail\" border=\"0\"></a></td>"                
        tableDef = tableDef + imgStr;
    }
    
    for (i = 0; i < lImgArr.length; i++) {            
        var imgStr = "<td style=\"height:79px;padding:2px;background:" + lTdBgColor + ";\"><a href=\"#\" onclick=\"javascript:loadContent('" + lContentArr[i] + "');\"><img src=\"images/" + lImgArr[i] + "\" alt=\"Thumbnail\" border=\"0\"></a></td>"                
        tableDef = tableDef + imgStr;
    }

    for (i = 0; i < tImgArr.length; i++) {            
        var imgStr = "<td style=\"height:79px;padding:2px;background:" + tTdBgColor + ";\"><a href=\"#\" onclick=\"javascript:loadContent('" + tContentArr[i] + "');\"><img src=\"images/" + tImgArr[i] + "\" alt=\"Thumbnail\" border=\"0\"></a></td>"                
        tableDef = tableDef + imgStr;
    }

    for (i = 0; i < cImgArr.length; i++) {            
        var imgStr = "<td style=\"height:79px;padding:2px;background:" + cTdBgColor + ";\"><a href=\"#\" onclick=\"javascript:loadContent('" + cContentArr[i] + "');\"><img src=\"images/" + cImgArr[i] + "\" alt=\"Thumbnail\" border=\"0\"></a></td>"                
        tableDef = tableDef + imgStr;
    }

    for (i = 0; i < vImgArr.length; i++) {            
        var imgStr = "<td style=\"height:79px;padding:2px;background:" + vTdBgColor + ";\"><a href=\"#\" onclick=\"javascript:loadContent('" + vContentArr[i] + "');\"><img src=\"images/" + vImgArr[i] + "\" alt=\"Thumbnail\" border=\"0\"></a></td>"                
        tableDef = tableDef + imgStr;
    }

    tableDef = tableDef + "</tr>";
    
    tableDef = tableDef + "<tr>";
    tableDef = tableDef + "<td style=\"padding:2px;background:" + pTdBgColor + ";\" colspan=\"" + pImgArr.length + "\"><span style=\"color: #FFFFFF\">People</span></td>";
    tableDef = tableDef + "<td style=\"padding:2px;background:" + lTdBgColor + ";\" colspan=\"" + lImgArr.length + "\"><span style=\"color: #FFFFFF\">Workplace</span></td>";
    tableDef = tableDef + "<td style=\"padding:2px;background:" + tTdBgColor + ";\" colspan=\"" + tImgArr.length + "\"><span style=\"color: #FFFFFF\">Technology</span></td>";
    tableDef = tableDef + "<td style=\"padding:2px;background:" + cTdBgColor + ";\" colspan=\"" + cImgArr.length + "\"><span style=\"color: #FFFFFF\">Customers</span></td>";
    tableDef = tableDef + "<td style=\"padding:2px;background:" + vTdBgColor + ";\" colspan=\"" + vImgArr.length + "\"><span style=\"color: #FFFFFF\">Values</span></td>";          
    
    tableDef = tableDef + "</tr></table>";
    
    document.write(tableDef);                              
    
}

function loadContent(contentFile) 
{
    frames['contentFrame'].location.href  = "content/" + contentFile;     
    return true;       
}