////////////////////////////////////////////////////////////////////
//
//		Builds the page and loads selected elements
//
////////////////////////////////////////////////////////////////////



var Rows = new Array();
var MediaPlayers = new Array();
var Sections = new Array();
var selected_cell = "td_row_0_cell_0";

function Row()
{
	this.isLoaded = false;
	this.Cells = new Array();
	this.menuText = "MENU TEXT NOT SET";
	this.menuPage = -1;
	this.rowData = "";
	this.rowHeight = 0;
}

function Cell()
{
	this.cellImage = null;
	this.cellwidth = 0;
	this.cellHeight = 0;
	this.cellType = "TYPE_IMAGE";
	this.cellHTML = "";
	this.cellBrand = "";
	this.cellAssetTitle = "";
	this.award = "";
	this.notes = "";
}

function FlashCell()
{
	this.flvPath = null;
}

function CreditsCell()
{
	this.country = "";
	this.agency  = "";
	this.client  = "";
	this.brand   = "";
	this.campaign = "";
	this.creativeExecTitle = "";
	this.creativeExec  = "";
	this.creative = "";
	this.artDirector = "";
	this.copyWriter = "";
	this.photography = "";
	this.illustration = "";
	this.accountService = "";
	this.flag = "";
}

function CreditsComment()
{
	this.creativeExecTitle = "";
	this.creativeExec  = "";
	this.picture = "";
	this.creativeExecComments = "";
}

function InteractiveCell()
{
	this.url = "";
}

/* ---------------------------- Make a nav section  ---------------------------- */

// Initialise counter to keep track of menu sections
var currentMenuSection = null;

function makeMenuSection(section_number)
{

	// Make container div for this section
	var new_menu_section_div = document.createElement("div");
	var menu_section_id = "nav_" + section_number;
	new_menu_section_div.setAttribute("id",menu_section_id);
	
	// If this is the first (film) section, prepend description image
	if (section_number == 1)
		{
			var description_div = document.createElement("div");
			description_div.style.marginTop = "10px";
			description_div.style.paddingTop = "2px";
			description_div.style.paddingRight = "3px";
			description_div.style.paddingBottom = "4px";
			description_div.style.fontSize = "11px";
			description_div.style.color = "#333333";
			description_div.innerHTML = "Take a deeper dive...";
			new_menu_section_div.appendChild(description_div);
		}
	
	// Toggler title div
	var new_menu_title_div = document.createElement("div");
	new_menu_title_div.className = "toggler";
	
	// Link to go in toggler div
	var new_menu_title_a = document.createElement("a");
	new_menu_title_a.className = "toggler_link";
	var new_menu_title_a_href = "#" + section_number;
	new_menu_title_a.setAttribute("href",new_menu_title_a_href);
	new_menu_title_a.innerHTML = Sections[section_number];
	
	// Accordion div for nav links
	var new_menu_links_div = document.createElement("div");
	new_menu_links_div.className = "accordion";
	new_menu_links_div_id = menu_section_id + "_links";
	new_menu_links_div.setAttribute("id",new_menu_links_div_id);
	
	// Put the toggler link in the title div
	new_menu_title_div.appendChild(new_menu_title_a);

	// Put the title div in the section div
	new_menu_section_div.appendChild(new_menu_title_div);

	// Put the accordion div in the section div
	new_menu_section_div.appendChild(new_menu_links_div);
	
	// Put the section div in the main nav div			
	document.getElementById("nav").appendChild(new_menu_section_div);			
	
}



/* ---------------------------- Initialise  ---------------------------- */

// Variable for width and height of the overall container div
// worked out in initialise()
var container_div_width = 0;
var container_div_height = 0;

function initialise()
{
	
	// Write spacer table at top
/*	var spacer_top_table = document.createElement("table");
	spacer_top_table.setAttribute("height",500);
	spacer_top_table.setAttribute("width",500);
	var spacer_top_tbody = document.createElement("tbody");
	var spacer_top_tr = document.createElement("tr");
	var spacer_top_td = document.createElement("td");
	spacer_top_tr.appendChild(spacer_top_td);
	spacer_top_tbody.appendChild(spacer_top_tr);
	spacer_top_table.appendChild(spacer_top_tbody);
	document.getElementById("rows_container").appendChild(spacer_top_table);*/

	// For each Row
	for(r=0;r<Rows.length;r++)
	{
		
		// Flag to say item in a row has won an award
		var row_has_award = false;
	
		CellHeights = new Array();
		CellWidths = new Array();
		CellWidthsTotal = 0;
		
		// Make the first menu section
		if (currentMenuSection==null) 
		{
			// Call builder function above
			// makeMenuSection(0);
			
			// Increment the section counter
			currentMenuSection = 0;
		}
		// If a new menu section is required
		else if (Rows[r].menu_Section > currentMenuSection)
		{
			// If it's "Contact" don't create a new section
			if ( ( r == 0 ) || (Rows[r].menu_Text == "Contact") || (Rows[r].menu_Text == "Help") )
				{
					// Set the section counter
					currentMenuSection = Rows[r].menu_Section;
				} 
			else
				{				
					makeMenuSection(Rows[r].menu_Section);
					// Set the section counter
					currentMenuSection = Rows[r].menu_Section;
				}
				
		}
		
		// For each Cell in the Row
		// Adds the cellHeight property to the CellHeights array
		// Adds the cellWidth to the total CellWidths
		for(c=0;c<Rows[r].Cells.length;c++)
		{	
			// If cell will not have an asset title, no need to add to height
			if ( (Rows[r].Cells[c].cellType == "TYPE_TEXT") || (Rows[r].Cells[c].cellType == "TYPE_CREDIT_TEXT_250X550") || (Rows[r].Cells[c].cellType == "TYPE_CREDIT_COMMENTS"))
				{
					CellHeights[c] = Rows[r].Cells[c].cellHeight;
				}
			if (Rows[r].Cells[c].cellType == "TYPE_SHOWREEL")
				{
					CellHeights[c] = Rows[r].Cells[c].cellHeight + 65;
				}
			else
				{
					CellHeights[c] = Rows[r].Cells[c].cellHeight + 25;
				}
			CellWidths[c] = Rows[r].Cells[c].cellWidth;
			CellWidthsTotal += Rows[r].Cells[c].cellWidth;
		}
		
		// Get the biggest row width for the width of the overall container div
		container_div_width = Math.max( container_div_width, CellWidthsTotal );
	
		maxheight = 0;
		for(h=0;h<CellHeights.length;h++)
		{
			// If any CellHeight is bigger than the current value of maxheight, give the value to maxheight
			maxheight = Math.max( maxheight, CellHeights[h] );
		}
		
		// Record maxheight as the height of the row
		Rows[r].rowHeight = maxheight;
		
		// Add height of this row to the total height of the overall container div
		container_div_height += maxheight;
		
		// Create a table for the row
		var new_table = document.createElement("table");
		// Can't set style or class properly with setAttribute in IE7 so use traditional method
		new_table.className="row";
		new_table.setAttribute("height", maxheight);
		new_table_id = "row_" + r;
		new_table.setAttribute("id", new_table_id);
		new_table.setAttribute("align", "left");
		new_table.style.cssFloat="left";
		new_table.style.styleFloat="left";
		new_table.style.width=CellWidthsTotal+"px";
		new_table.style.height=maxheight+"px";
		new_table.style.margin="10px auto";
		
		// Create a table body (needed for IE)
		var new_tbody = document.createElement("tbody");
		
		// Create a tr
		var new_tr = document.createElement("tr");
		new_tr.setAttribute("height", Rows[r].rowHeight);
		
		// Create a td > img to pad out the left
		var new_left_pad_img = document.createElement("img");
		new_left_pad_img.setAttribute("src","images/spacer.gif");
		new_left_pad_img.setAttribute("id","tracker_" + r);
		new_left_pad_img.setAttribute("width","20");
		new_left_pad_img.setAttribute("height","20");
		var new_left_pad_td = document.createElement("td");
		new_left_pad_td.appendChild(new_left_pad_img);
		
		// Add another spacer image to cancel out weird problem with
		// image disappearing on loading row - something to do with tracker image
		var new_left_pad_img_2 = document.createElement("img");
		new_left_pad_img_2.setAttribute("src","images/spacer.gif");
		new_left_pad_img_2.setAttribute("width","20");
		new_left_pad_img_2.setAttribute("height","20");
		new_left_pad_td.appendChild(new_left_pad_img_2);
		
		new_tr.appendChild(new_left_pad_td);
		
		// For each cell
		for(a=0;a<Rows[r].Cells.length;a++)
		{
			
		// If cell will not have an Asset Title at the bottom set flag
			var show_asset_title = true;
			if (Rows[r].Cells[a].cellType == "TYPE_TEXT") { show_asset_title = false; }
			if (Rows[r].Cells[a].cellType == "TYPE_CREDIT_TEXT_250X550") { show_asset_title = false; }
			if (Rows[r].Cells[a].cellType == "TYPE_CREDIT_COMMENTS") { show_asset_title = false; }
			if (Rows[r].Cells[a].cellType == "TYPE_SHOWREEL") { show_asset_title = false; }
			
		// Create a td for each cell
			var new_td = document.createElement("td");
			var new_td_ID = "td_row_" + r + "_cell_" + a;
			new_td.setAttribute("id", new_td_ID);
			new_td.setAttribute("valign", "top");
			new_td.setAttribute("width", CellWidths[a]);
			// new_td.setAttribute("height", CellHeights[a]);
			
		// Create a div to go within the cell
			var new_div = document.createElement("div");
			if (show_asset_title == false)
				{
					new_div.className = "cell_no_background";
				}
			else
				{
					new_div.className = "cell";
				}
			if (Rows[r].Cells[a].cellType == "TYPE_SHOWREEL")
				{
					new_div.className = "cell_no_background_margin";
				}
			var new_div_id = "div_row_" + r + "_cell_" + a;
			new_div.setAttribute("id", new_div_id);
			new_div.style.width=CellWidths[a] + "px";
			new_div.style.height=CellHeights[a] + "px";
			
		// Work out bottom margin to push it vertical in IE7
			var div_margin_bottom = maxheight - CellHeights[a];
			new_div.style.marginBottom = div_margin_bottom + "px";
		
		// Create a link to go around the placeholder image
			new_a = document.createElement("a");
			var new_a_href = "javascript:goToCell('" + new_td_ID + "', " + CellWidths[a] + ", " + maxheight + ")";
			new_a.setAttribute("href", new_a_href);
			var new_a_id = "a_row_" + r + "_cell_" + a;
			new_a.setAttribute("id", new_a_id);
			
			
		// Create a placeholder image
			var new_img = document.createElement("img");
			new_img.setAttribute("border","0");
			new_img.setAttribute("src", "images/spacer.gif");
			new_img.setAttribute("width", CellWidths[a]);
			new_img.setAttribute("height", (CellHeights[a]-25));
			
		// Create a div for the Asset Title at the bottom
			if (show_asset_title==true)
				{
					var new_caption_div = document.createElement("div");
					new_caption_div.className= "caption";
					var new_caption_div_id = "div_caption_row_" + r + "_cell_" + a;
					new_caption_div.setAttribute("id", new_caption_div_id);
				}
			
		// Put the elements together img < a < div
			new_a.appendChild(new_img);
			new_div.appendChild(new_a);
		
		// If there is an Asset Title div, add it at the bottom of the big div
			if (show_asset_title==true)
				{
					new_div.appendChild(new_caption_div);
				}
							
		
		// Put the elements together div < td < tr
			new_td.appendChild(new_div);
			new_tr.appendChild(new_td);
			
		// If cell contains a media player, add Javscript ID to the list of media players
			if (Rows[r].Cells[a].cellType == "TYPE_FLASH" || Rows[r].Cells[a].cellType == "TYPE_SHOWREEL")
			{
				// MediaPlayers[MediaPlayers.length] = "js_media_row_" + r + "_cell_" + a;
				MediaPlayers[MediaPlayers.length] = "media_row_" + r + "_cell_" + a;
			}
			
		// If item has won an award, set awards flag for row
			if ( Rows[r].Cells[a].award && (Rows[r].Cells[a].award > "") )
			{
				row_has_award = true;
			}
			
		}
		
		// Create a td to pad out the right
		var new_right_pad_img = document.createElement("img");
		new_right_pad_img.setAttribute("src","images/spacer.gif");
		new_right_pad_img.setAttribute("width","999");
		new_right_pad_img.setAttribute("height","20");
		var new_right_pad_td = document.createElement("td");
		new_right_pad_td.appendChild(new_right_pad_img);
		new_tr.appendChild(new_right_pad_td);
		
		new_tbody.appendChild(new_tr);
		
		// Put the tbody in the table
		new_table.appendChild(new_tbody);
		
		// Put the table in the container div
		document.getElementById("rows_container").appendChild(new_table);
		
		// Write clear line break to fix problems caused by left alignment of tables
		var new_clear_br = document.createElement("br");
		new_clear_br.style.clear="both";
		document.getElementById("rows_container").appendChild(new_clear_br);
		
		// Get details for nav link
		var menu_text = Rows[r].menu_Text;
		var menu_row_start = "td_row_" + r + "_cell_0";
		
		// Create link for nav
		var new_menu_a_div_id = "nav_" + Rows[r].menu_Section + "_row_" + r;
		var new_menu_a_html = "";
			
		// If any item in the row has won an award
		if (row_has_award == true)
		{
			new_menu_a_html += "<div id='" + new_menu_a_div_id + "' class='nav_a_div' style='border-left:10px solid #ef3e25;padding-left:0px;'>";
		}
		else
		{
			new_menu_a_html += "<div id='" + new_menu_a_div_id + "' class='nav_a_div'>";
		}

		// ID for link
		var new_menu_a_id = "nav_a_" + Rows[r].menu_Section + "_row_" + r;
		
		// If this is the Home link, don't make an accordion section
		if (r == 0)
			{
				var nav_div_contents = document.getElementById("nav").innerHTML;
				
				new_menu_a_html += "<a href='javascript://' class='nav_main' style='display:inline-block;'";
				new_menu_a_html += " id='" + new_menu_a_id + "'";
				new_menu_a_html += " onclick='goToRow(\"" + r + "\"\);myAccordion.hideAll();sendEvent(\"media_row_0_cell_0\",\"playitem\",0);'>";
				new_menu_a_html += menu_text;
				new_menu_a_html += "</a></div>";
				
				document.getElementById("nav").innerHTML = new_menu_a_html + nav_div_contents;

			}
		// If this is the Contact link, don't make an accordion section
		else if ((Rows[r].menu_Text == "Contact") || (Rows[r].menu_Text == "Help"))
			{
				new_menu_a_html += "<a href='javascript://' class='nav_main' style='display:inline-block;'";
				new_menu_a_html += " id='" + new_menu_a_id + "'";
				new_menu_a_html += " onclick='goToRow(\"" + r + "\"\);myAccordion.hideAll();'>";
				new_menu_a_html += menu_text;
				new_menu_a_html += "</a></div>";
				document.getElementById("nav").innerHTML+=new_menu_a_html;	
			}
		// Normal section link, so add side links
		else
			{		
				new_menu_a_html += "<a href='javascript://' class='nav' style='display:inline-block;'";
				new_menu_a_html += " id='" + new_menu_a_id + "'";
				new_menu_a_html += " onclick='goToRow(\"" + r + "\"\);'>";
				new_menu_a_html += menu_text;
				new_menu_a_html += "</a>";
				new_menu_a_html += "<a href='javascript:side_move(\"left\");' class='nav_side nav_side_left' ><</a>";
				new_menu_a_html += "<a href='javascript:side_move(\"right\");' class='nav_side' >></a>";
				new_menu_a_html += "<br class='clearboth' /></div>";
				new_menu_a_html += "";

				// Append to normal links div
				var menu_links_div_id = "nav_" + Rows[r].menu_Section + "_links";
				document.getElementById(menu_links_div_id).innerHTML+=new_menu_a_html;
			}
	
	// End of for each row
	}
		
	// Write spacer table at bottom
	var spacer_bottom_table = document.createElement("table");
	spacer_bottom_table.setAttribute("height",500);
	spacer_bottom_table.setAttribute("width",500);
	var spacer_bottom_tbody = document.createElement("tbody");
	var spacer_bottom_tr = document.createElement("tr");
	var spacer_bottom_td = document.createElement("td");
	spacer_bottom_tr.appendChild(spacer_bottom_td);
	spacer_bottom_tbody.appendChild(spacer_bottom_tr);
	spacer_bottom_table.appendChild(spacer_bottom_tbody);
	document.getElementById("rows_container").appendChild(spacer_bottom_table);
	
	var bottom_clearboth = document.createElement("div");
	bottom_clearboth.style.clear = "both";
	document.getElementById("rows_container").appendChild(bottom_clearboth);

	// Set height of overall rows_container div with some extra to allow for spacer tables
	container_div_height += 1000;
	document.getElementById("rows_container").style.height=container_div_height;
	document.getElementById("rows_container").setAttribute("style","height:" + container_div_height + "px");

}



/* ---------------------------- Load row  ---------------------------- */

function loadAssetTitle(r,c)
{
	// Write asset title into caption div
	// If there is an asset title
	if (Rows[r].Cells[c].cellAssetTitle && Rows[r].Cells[c].cellAssetTitle != "null")
	{
		var caption_text = "";
		// Make the ID for the caption div
		var caption_div_id = "div_caption_row_" + r + "_cell_" + c;
		
		// If item has won an award
		if (Rows[r].Cells[c].award == "gold")
		{
			caption_text += "<img src='images/lion_gold.png' align='right' />";
		}
		else if (Rows[r].Cells[c].award == "silver")
		{
			caption_text += "<img src='images/lion_silver.png' align='right' />";
		}
		else if (Rows[r].Cells[c].award == "bronze")
		{
			caption_text += "<img src='images/lion_bronze.png' align='right' />";
		}
		else if (Rows[r].Cells[c].award == "shortlist")
		{
			caption_text += "<img src='images/lion_shortlist.png' align='right' />";
		}
		
		// Asset title
		caption_text += Rows[r].Cells[c].cellAssetTitle;
		
		// If there are notes, add them
		if (Rows[r].Cells[c].notes && Rows[r].Cells[c].notes > "")
		{
			caption_text += "<br/>";
			caption_text += Rows[r].Cells[c].notes;
		}
		
		// Write brand and asset title into the caption div
		if (document.getElementById(caption_div_id))
			{
				// Don't write caption if these are special text images
				switch (Rows[r].Cells[c].cellImage)
				{
					case "items/08_greygerm_deichmann_text.gif":
					break;

					case "items/08_greygerm_drbest_text.gif":
					break;
					
					case "items/08_greygerm_mrproper_text.gif":
					break;
					
					case "items/08_greygerm_pantene_text.gif":
					break;
					
					default:
					document.getElementById(caption_div_id).innerHTML = caption_text;
				}
			}
	}
}


function loadRow(r)
{	
	// Open the relevant nav accordion section
	// Subtract 1 from section number
	// because we now have additional section 0 for Home
	// which has no accordion section
	if (Rows[r].menu_Section > 0)
		{
			var menu_Section_adjusted = Rows[r].menu_Section - 1;
			myAccordion.display(menu_Section_adjusted);
		}
		
		
	// Work out ID of tracker gif
	var tracker_id = "tracker_" + r;
	var tracker_url = "http://ggnemeadev2.grey.com/Image1?smtp=tony.ajoje@greyeu.com&code=Canness_site&intranetname=CANNES 2008&r=" + r;
	// document.getElementById(tracker_id).setAttribute("src",tracker_url);
	
	// If row is not already loaded
	if (!Rows[r].isLoaded)
	{
		// For each cell in row
		for(c=0;c<Rows[r].Cells.length;c++)
		{
			// Work out ID of cell div we are working on
			cell_div_ID = "div_row_" + r + "_cell_" + c;
			
			// Work out size of cell to pass in goToCell function
			cell_width = Rows[r].Cells[c].cellWidth;
			cell_height = Rows[r].Cells[c].cellHeight;
			
			// Work out ID of the placeholder a > img we are going to replace
			var placeholder_a_id = "a_row_" + r + "_cell_" + c;
			
			// Get that element
			placeholder_a_element = document.getElementById(placeholder_a_id);
			
			//  ---------- Text cell - write the text ----------
			if (Rows[r].Cells[c].cellType == "TYPE_TEXT")
			{
				// Create link that will scroll the page to this element
				var new_text_a = document.createElement("a");		
				var new_text_a_href = "javascript:goToCell('" + cell_div_ID + "', " + cell_width + ", " + Rows[r].rowHeight + ")";
				new_text_a.setAttribute("href", new_text_a_href);
				var new_text_a_id = "text_a_row" + r + "_cell_" + c;
				new_text_a.setAttribute = ("id", new_text_a_id);
				new_text_a.style.textDecoration = "none";
				new_text_a.style.display = "block";
				
				// Put the text inside the link
				new_text_a.innerHTML = Rows[r].Cells[c].cellHTML;
				
				// Replace the placeholder content with the link
				placeholder_a_element.parentNode.replaceChild(new_text_a, placeholder_a_element);
			}
			
			//  ---------- Flash cell - write the preview image and link ----------
			else if (Rows[r].Cells[c].cellType == "TYPE_FLASH")
			{
				
				// Work out id of containing td so we can append a script tag
				var td_ID = "td_row_" + r + "_cell_" + c;
				
				// Create preview image for media player
				var new_flash_img = document.createElement("img");
				var new_flash_img_src = Rows[r].Cells[c].cellImage;
				new_flash_img.setAttribute("src", new_flash_img_src);
				new_flash_img.setAttribute("width", Rows[r].Cells[c].cellWidth);
				new_flash_img.setAttribute("height", Rows[r].Cells[c].cellHeight);
				new_flash_img.setAttribute("border", 0);
				
				// Create link that will load media player
				var new_flash_a = document.createElement("a");
				var new_flash_a_href = "javascript:goToCell('" + cell_div_ID + "', " + cell_width + ", " + Rows[r].rowHeight + ");loadFlash('" + td_ID + "');";
				new_flash_a.setAttribute("href", new_flash_a_href);
				
				// Put them together
				new_flash_a.appendChild(new_flash_img);
				
				// Replace placeholder content with Flash preview a > img
				placeholder_a_element.parentNode.replaceChild(new_flash_a, placeholder_a_element);
								
				// Write asset title
				loadAssetTitle(r,c);
				
			}
			
			//  ---------- Showreel cell - write the media player ----------
			else if (Rows[r].Cells[c].cellType == "TYPE_SHOWREEL")
			{
					
				// Work out the div ID so script can replace it
				var cell_div_ID = "div_row_" + r + "_cell_" + c;
				
				// Get bottom margin of div so we can recreate it (for vertical alignment)
				var margin_bottom = document.getElementById(cell_div_ID).style.marginBottom;
				
				// Get the Flash properties for this cell from the array
				var flvPath = Rows[r].Cells[c].flash.flvPath;
				var w = Rows[r].Cells[c].cellWidth;
				var h = Rows[r].Cells[c].cellHeight;
				
				// Make the ID to give the player
				var mediaplayer_ID = "media_row_" + r + "_cell_" + c;
				// Make the Javscript ID
				var js_mediaplayer_ID = "js_" + mediaplayer_ID;
				
				// Embed the player
				var so = new SWFObject('items/mediaplayer.swf', mediaplayer_ID, w, h, 8);
				so.addParam("wmode", "opaque");
				so.addParam("allowfullscreen","true");
				so.addVariable("javascriptid",mediaplayer_ID);
				so.addVariable("bufferlength","4");
				so.addVariable("file",flvPath); 
				so.addVariable("enablejs","true");
				so.addParam("allowscriptaccess","always");
				so.addVariable("autostart","true");
				so.addVariable("shuffle","false");
				so.addVariable("rotatetime","5");
				so.addVariable("height",h);
				so.addVariable("width",w);
				so.addVariable("repeat","true");
				so.addVariable("displayheight",h);
				so.addVariable("backcolor","0xFFFFFF");
				so.addVariable("frontcolor","0x000000");
				so.addVariable("screencolor","0xeeeeee");
				so.addVariable("lightcolor","0xFF4105");
				so.addVariable("image","items/mediaplayer_image.gif");
				so.addVariable("overstretch","none");
				so.write(cell_div_ID);
					
				
				
				var showreel_credits_bottom = document.createElement("div");
				showreel_credits_bottom.setAttribute("align", "center");
				
				var showreel_credits_bottom_html = "<div style=\"clear:both;\"></div>";
				showreel_credits_bottom_html += "<table cellpadding=0 cellspacing=0 style=\"width:700px;margin-top:7px;\">";
				showreel_credits_bottom_html += "<tr>";
				showreel_credits_bottom_html += "<td id=\"Flag\" valign=\"top\" align=\"left\" width=\"56\" style=\"padding-left:-3px;\"></td>";
				showreel_credits_bottom_html += "<td id=\"CreditsBelow\" align=\"left\" valign=\"top\"></td>";
				showreel_credits_bottom_html += "</tr>";
				showreel_credits_bottom_html += "</table>";
				showreel_credits_bottom_html += "<div style=\"clear:both;height:0px;\"></div>";

				showreel_credits_bottom.innerHTML = showreel_credits_bottom_html;
				
				document.getElementById("div_row_0_cell_0").appendChild(showreel_credits_bottom);
						 
			}
			
			//  ---------- Credit Text cell - write the flag image and text ----------
			else if (Rows[r].Cells[c].cellType == "TYPE_CREDIT_TEXT_250X550")
			{
				// Create link that will scroll the page to this element
				var new_text_a = document.createElement("a");		
				var new_text_a_href = "javascript:goToCell('" + cell_div_ID + "', " + cell_width + ", " + Rows[r].rowHeight + ")";
				new_text_a.setAttribute("href", new_text_a_href);
				var new_text_a_id = "text_a_row" + r + "_cell_" + c;
				new_text_a.setAttribute = ("id", new_text_a_id);
				new_text_a.style.textDecoration = "none";
				new_text_a.style.display = "block";
				
				////// create the html credits for the block
				var credits =  "<div class='credits'>";
					credits += formatFlag(Rows[r].Cells[c].credits.country);
					if (Rows[r].Cells[c].credits.agency != null && Rows[r].Cells[c].credits.agency != "null" && Rows[r].Cells[c].credits.agency != "" )
						{
							if (Rows[r].Cells[c].credits.client == "Fortis")
								{
									credits += "<br><b>Agencies</b><br>" + Rows[r].Cells[c].credits.agency;			
								}
							else
								{
									credits += "<br><b>Agency</b><br>" + Rows[r].Cells[c].credits.agency;
								}
						}
				    if (Rows[r].Cells[c].credits.client != null && Rows[r].Cells[c].credits.client != "null" && Rows[r].Cells[c].credits.client != "") { credits += "<br><b>Client</b><br>" + Rows[r].Cells[c].credits.client; }
				    if (Rows[r].Cells[c].credits.brand != null && Rows[r].Cells[c].credits.brand != "null" && Rows[r].Cells[c].credits.brand != "") { credits += "<br><b>Brand</b><br>" + Rows[r].Cells[c].credits.brand; }
					if (Rows[r].Cells[c].credits.campaign != null && Rows[r].Cells[c].credits.campaign != "null" && Rows[r].Cells[c].credits.campaign != "") { credits += "<br><b>Campaign</b><br>" + Rows[r].Cells[c].credits.campaign; }
					if (Rows[r].Cells[c].credits.creativeExecTitle != null && Rows[r].Cells[c].credits.creativeExecTitle!="null" && Rows[r].Cells[c].credits.creativeExecTitle!="") { credits += "<br><b>"+ Rows[r].Cells[c].credits.creativeExecTitle + "</b> <br>" + Rows[r].Cells[c].credits.creativeExec; }
					if (Rows[r].Cells[c].credits.creative != null && Rows[r].Cells[c].credits.creative != "null" && Rows[r].Cells[c].credits.creative != "" ) { credits += "<br><b>Creative</b><br>" + Rows[r].Cells[c].credits.creative; }
					if (Rows[r].Cells[c].credits.artDirector != null && Rows[r].Cells[c].credits.artDirector != "null" && Rows[r].Cells[c].credits.artDirector != "" ) { credits += "<br><b>Art Director</b><br>" + Rows[r].Cells[c].credits.artDirector; }
					if (Rows[r].Cells[c].credits.copyWriter != null && Rows[r].Cells[c].credits.copyWriter != "null" && Rows[r].Cells[c].credits.copyWriter != "" ) { credits += "<br><b>Copywriter</b><br>" + Rows[r].Cells[c].credits.copyWriter; }
					if (Rows[r].Cells[c].credits.photography != null && Rows[r].Cells[c].credits.photography != "null" && Rows[r].Cells[c].credits.photography != "") { credits += "<br><b>Photography</b><br>" + Rows[r].Cells[c].credits.photography; }
					if (Rows[r].Cells[c].credits.illustration != null && Rows[r].Cells[c].credits.illustration != "null" && Rows[r].Cells[c].credits.illustration != "") { credits += "<br><b>Illustration</b><br>" + Rows[r].Cells[c].credits.illustration; }
					if (Rows[r].Cells[c].credits.accountService != null && Rows[r].Cells[c].credits.accountService != "null" && Rows[r].Cells[c].credits.accountService != "") { credits += "<br><b>Account Service</b><br>" + Rows[r].Cells[c].credits.accountService; }
					credits += "</div>"
				// Put the text inside the link
				//new_text_a.innerHTML = Rows[r].Cells[c].credits.country;
				
				new_text_a.innerHTML = credits;

				// Replace the placeholder content with the link
				placeholder_a_element.parentNode.replaceChild(new_text_a, placeholder_a_element);
			}
			
			//  ---------- Comments cell - write the creative exec image and text ----------
			else if (Rows[r].Cells[c].cellType == "TYPE_CREDIT_COMMENTS")
			{
				// Create link that will scroll the page to this element
				var new_text_a = document.createElement("a");		
				var new_text_a_href = "javascript:goToCell('" + cell_div_ID + "', " + cell_width + ", " + Rows[r].rowHeight + ")";
				new_text_a.setAttribute("href", new_text_a_href);
				var new_text_a_id = "text_a_row" + r + "_cell_" + c;
				new_text_a.setAttribute = ("id", new_text_a_id);
				new_text_a.style.textDecoration = "none";
				new_text_a.style.display = "block";
				
				// create the html credits for the block
				var credits =  "<div class='credits'>";
				credits += "<img src=\"" + Rows[r].Cells[c].comments.picture + "\" alt=\"" + Rows[r].Cells[c].comments.creativeExec + "\" border=\"0\" >";
				credits += "<br><br>";
				credits += "<img src=\"images/quote.png\" border=\"0\" width=\"45\" height=\"28\" align=\"left\" style=\"margin-right:5px;\" />";
				credits += Rows[r].Cells[c].comments.creativeExecComments;
				// credits += "<br><br><b>" + Rows[r].Cells[c].comments.creativeExec;
				// credits += "<br>" + Rows[r].Cells[c].comments.creativeExecTitle +"</b>"; 
				credits += "</div>";
				// Put the text inside the link
				//new_text_a.innerHTML = Rows[r].Cells[c].credits.country;
				
				new_text_a.innerHTML = credits;
				
				// Replace the placeholder content with the link
				placeholder_a_element.parentNode.replaceChild(new_text_a, placeholder_a_element);
			}
			//  ---------- Interactive cell - write image with link to site ----------
			else if (Rows[r].Cells[c].cellType == "TYPE_INTERACTIVE")
			{
				
				// Create image item
				var new_img_item = document.createElement("img");
				var new_img_item_src = Rows[r].Cells[c].cellImage;
				new_img_item.setAttribute("src",new_img_item_src);
				new_img_item.setAttribute("border","0");
				
				// Create link that will scroll page to this cell
				var new_goTo_a = document.createElement("a");
				var new_goTo_a_href = "javascript:goToCell('" + cell_div_ID + "', " + cell_width + ", " + Rows[r].rowHeight + ");newWindow('" + Rows[r].Cells[c].interactive.url + "','name','800','600','yes')";				
				new_goTo_a.setAttribute("href", new_goTo_a_href);
				
				// Put them together
				new_goTo_a.appendChild(new_img_item);
				
				// Replace placeholder content with image item
				placeholder_a_element.parentNode.replaceChild(new_goTo_a, placeholder_a_element);
								
				// Write asset title
				loadAssetTitle(r,c);
				
			}
			//  ---------- Normal picture cell - write the image  ----------
			else if (Rows[r].Cells[c].cellImage != null)
			{
				
				// Create image item
				var new_img_item = document.createElement("img");
				var new_img_item_src = Rows[r].Cells[c].cellImage;
				new_img_item.setAttribute("src",new_img_item_src);
				new_img_item.setAttribute("border","0");
				
				// Create link that will scroll page to this cell
				var new_goTo_a = document.createElement("a");
				var new_goTo_a_href = "javascript:goToCell('" + cell_div_ID + "', " + cell_width + ", " + Rows[r].rowHeight + ")";
				new_goTo_a.setAttribute("href", new_goTo_a_href);
				
				// Put them together
				new_goTo_a.appendChild(new_img_item);
				
				// Replace placeholder content with image item
				placeholder_a_element.parentNode.replaceChild(new_goTo_a, placeholder_a_element);
								
				// Write asset title
				loadAssetTitle(r,c);
				
			}
		}
	Rows[r].isLoaded = true;
	}
		
}


/* ---------------------------- Load Flash cell  ---------------------------- */

function loadFlash(td_ID)
{
		// Get the td containing the div where we will write the SWFObject script
		var td_element = document.getElementById(td_ID);
		
		// Cell div ID is in format div_row_0_cell_1
		// Break it up into row and cell numbers
		var row_cell_array = td_ID.split("_");
		var r = row_cell_array[2];
		var c = row_cell_array[4];
		
		// Work out the div ID so script can replace it
		var cell_div_ID = "div_row_" + r + "_cell_" + c;
		
		// Get bottom margin of div so we can recreate it (for vertical alignment)
		var margin_bottom = document.getElementById(cell_div_ID).style.marginBottom;

		// Get the Flash properties for this cell from the array
		var flvPath = Rows[r].Cells[c].flash.flvPath;
		var w = Rows[r].Cells[c].cellWidth;
		var h = Rows[r].Cells[c].cellHeight;
		
		// Make the ID to give the player
		var mediaplayer_ID = "media_row_" + r + "_cell_" + c;
		
		// Embed the player
		var so = new SWFObject('items/mediaplayer.swf', mediaplayer_ID, w, h, 8);
		so.addParam("wmode", "opaque");
		so.addParam("allowfullscreen","true");
		so.addVariable("javascriptid",mediaplayer_ID);
		so.addVariable("bufferlength","4");
		so.addVariable("file",flvPath); 
		so.addVariable("enablejs","true");
		so.addVariable("autostart","true");
		so.addVariable("height",h);
		so.addVariable("width",w);
		so.addVariable("displayheight",h-20);
		so.addVariable("backcolor","0xFFFFFF");
		so.addVariable("frontcolor","0x000000");
		so.addVariable("lightcolor","0xFF4105");
		so.addVariable("overstretch","false");
		so.write(cell_div_ID);
		
		// SWFObject replaces the contents of the cell div
		// so rebuild the caption div
		var replacement_caption_div = document.createElement("div");
		replacement_caption_div.className= "caption";
		var replacement_caption_div_id = "div_caption_row_" + r + "_cell_" + c;
		replacement_caption_div.setAttribute("id", replacement_caption_div_id);
		
		// Append the caption div to the cell div
		document.getElementById(cell_div_ID).appendChild(replacement_caption_div);
		
		// Load the asset title in the caption div
		loadAssetTitle(r,c);
		
}