// JavaScript Document
coords = new Array();

coords[1] = new Array({x:1,y:1}, {x:2,y:1},{x:3,y:1}, {x:4,y:1}, {x:5,y:1}, {x:6,y:1}, {x:7,y:1}, {x:8,y:1});

coords[2] = new Array({x:1,y:1}, {x:2,y:2}, {x:3,y:2}, {x:4,y:2}, {x:5,y:2}, {x:6,y:2}, {x:7,y:2}, {x:1,y:1});

coords[3] = new Array({x:1,y:3}, {x:2,y:3}, {x:3,y:3}, {x:1,y:2}, {x:5,y:3}, {x:2,y:2}, {x:7,y:3}, {x:8,y:3});

coords[4] = new Array({x:1,y:4}, {x:1,y:1}, {x:3,y:4}, {x:4,y:4}, {x:5,y:4}, {x:6,y:4}, {x:5,y:1}, {x:8,y:4});

coords[5] = new Array({x:1,y:5}, {x:2,y:5}, {x:3,y:1}, {x:4,y:5}, {x:5,y:5}, {x:2,y:2}, {x:7,y:5}, {x:8,y:5});





function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

function pad(number) { return (number < 10) ? '0' + number : number; }

function Reference(ref){
	return document.getElementById(ref);
}

function RollOver(number,coords){
	this.number = number;
	this.filename = "images/about/thumb_jpegs/"+pad(this.number)+".jpg"
	this.popfilename = "images/about/pop_up_jpegs/"+pad(this.number)+"_popup.jpg"
	this.popx = coords.x;
	this.popy = coords.y;
	this.EmptyTag = EmptyTag;
	this.ThumbnailTag = ThumbnailTag;
	this.GetImage = GetImage;
	this.GetTrigger = GetTrigger;
	this.GetPreload = GetPreload;
	this.EmptyImageObject = EmptyImageObject;
	this.PreloadObject = PreloadObject;
	this.ThumbnailObject = ThumbnailObject;
	this.LoadRollover = LoadRollover;
	this.LoadImage = LoadImage;
	this.AddToPage = AddToPage;
	this.UnloadImage = UnloadImage;
	this.HasLoaded = HasLoaded;
}


function LoadImage(){
	rolloverImage.src = "images/clear.gif";//in case it's not loaded yet, turn it off
	rolloverImage.src = this.popfilename;
	rolloverImage.style.left = (this.popx-1)*(thumbwidth+padding)+183+"px";
	rolloverImage.style.top = (this.popy-1)*(thumbheight+padding)+130+"px";
	rolloverImage.style.visibility = "visible"; 
	rolloverImage.style.zIndex = 3;
	rolloverImage.style.display = "block";
	rolloverImage.style.position = "absolute";
	
}
function UnloadImage(){
	rolloverImage.style.visibility = "hidden";
}


function PassClick(number, event){
	if(event=="over"){
		grid[number].LoadImage();
	}
		
	if(event=="out")
		grid[number].UnloadImage();
}

function GetImage(){
	if(this.image==undefined){
		this.image = Reference("thumbnail"+this.number);
	}
	return this.image;
}

function GetTrigger(){
	if(this.trigger==undefined){
		this.trigger = Reference("trigger"+this.number);
	}
	return this.trigger;
}

function GetPreload(){
	if(typeof(this.preloadimage)=="undefined"){
		this.preloadimage = Reference("preloader"+this.number);
	}
	return this.preloadimage;
}

function ThumbnailTag(){
	return '<img src="'+this.filename+'" width="106" height="70" alt="Tate Gallery - thumbnails image no. '+this.number+'" id="thumbnail'+this.number+'">';
}

function HasLoaded(){
	this.loaded = true;
	this.thumbnail.style.visibility = "visible";
	this.trigger.style.visibility = "visible";
}

function EmptyTag(){
	return '<img src="images/clear.gif" width="106" height="70" id="trigger'+this.number+'">';
}
function EmptyImageObject(){

	return imageobj("images/clear.gif", "trigger"+this.number);
}

function PreloadObject(){
	img = document.createElement("img");
	img.width = thumbwidth;
	img.height = thumbheight;
	img.id = "preload"+this.number;
	img.onLoad = MarkAsLoaded(this.number);
	img.src = this.popfilename;
	return img;
}

function ThumbnailObject(){
	return imageobj(this.filename, "thumbnail"+this.number);
}

function LoadRollover(){
	rolloverImage.src = this.popfilename;
}

function AddToPage(){
	this.thumbnail = this.ThumbnailObject();
	this.thumbnail.style.visibility = "hidden";
	thumbnails.appendChild(this.thumbnail);
	this.trigger = this.EmptyImageObject();
	this.trigger.style.visibility = "hidden";
	triggers.appendChild(this.trigger);
	this.imageLoader = new Image();
	this.imageLoader.number = this.number;
//	this.imageLoader.onload = MarkAsLoaded(this.number);
	this.imageLoader.src = this.popfilename;
	this.GetTrigger().number = this.number-1;
	this.GetTrigger().onmouseover = function(){
		PassClick(this.number,"over");
		this.style.cursor = "pointer";
	}
	this.GetTrigger().onmouseout = function(){
		PassClick(this.number, "out");
	}
}

function imageobj(src,id){
	img = document.createElement("img");
	img.src = src;
	img.width = thumbwidth;
	img.height = thumbheight;
	img.id = id;
	return img;
}


function MarkAsLoaded(num){
	grid[num-1].HasLoaded();
}

function KeepLoading(){
	if(grid[loadCounter].imageLoader.complete==true){
		grid[loadCounter].HasLoaded();
		loadCounter++;
		grid[loadCounter].AddToPage();
	}
	if(loadCounter==grid.length){
		clearInterval(loaditall);
		//alert(document.body.innerHTML);
	}
}




function AddThumbnailAndRollover(num){
	grid[num].AddToPage();
}

var triggers;
var thumbnails;
var rolloverImage;
var preloader;
var rolloverImage;
var loadCounter;
var loaditall;
function init(){
	triggers = Reference("triggers");
	thumbnails = Reference("wylie");
	preloader = Reference("preloader");
	//preloader.style.left = "-3000em";
	rolloverImage = document.createElement("img");
	document.body.appendChild(rolloverImage);
	rolloverImage.style.visibility = "hidden";
	loadCounter = 0;
	grid[loadCounter].AddToPage();
	loaditall = setInterval("KeepLoading()", 40);
	//get_them_all = setInterval("CheckForNext()", 1)
	/*for(i=0;i<grid.length;i++){
		target.appendChild(grid[i].EmptyImageObject());//w3 dom makes the clicks after work, innerhtml didnt'
		grid[i].GetTrigger().number = i;
		grid[i].GetTrigger().onmouseover = function(){
			PassClick(this.number,"over");
			this.style.cursor = "pointer";
		}
		grid[i].GetTrigger().onmouseout = function(){
			PassClick(this.number, "out");
		}
	}*/
	
	
}
var padding =7;
thumbheight = 63;
thumbwidth = 63;
var across = 8;
var down = 5;
var grid = new Array();
for(i=1;i<=down;i++){
	for(j=1;j<=across;j++){
		grid.push(new RollOver((i-1)*across+j, coords[i][j-1]))
	}
}
window.onload = init;