// JavaScript Document
var xhttp

var picnames = new Array();
var captions = new Array();
function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerHTML = s
  s = el.innerHTML;
  delete el;
  return s;
}

function readXML(XMLfile, gallery, spaneng) {
	post = "?gallery="+gallery+"&lang="+spaneng
	
	if (window.XMLHttpRequest)  {
		xhttp=new XMLHttpRequest();
	} else { // Internet Explorer 5/6 
		xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	XMLfile=XMLfile+post;
	xhttp.open("GET",XMLfile,false);
	xhttp.send();
	xmlDoc=xhttp.responseXML;
	
	p = xmlDoc.getElementsByTagName('pic')
	//get the filenames and store in an array.
	for (i=0; i<p.length; i++) {
		filename = HtmlEncode(p[i].getAttribute('name'))
		caps = HtmlEncode(p[i].getAttribute('capeng'))
		picnames.push(filename);
		captions[filename] = caps
	}
	
	//now cycle through the array and load the image thumbnails in the gallery div [below and above loops could be combined!!!!]
	
	//set the thumbpath
	thumbpath = "../images/gallery/"+gallery+"/thumbs/"
	picpath = "../images/gallery/"+gallery+"/pics/"
	
	for (i=0; i<p.length; i++) {
		gal = document.getElementById('gallery');
		thumb = document.createElement('img');
		tempid= "thumb_"+picnames[i];
		thumb.setAttribute("id", tempid)
		path = thumbpath+picnames[i]
		thumb.setAttribute("src", path)
		thumb.setAttribute("alt", "thumbnail, Matt Wilson Photography")
		if (navigator.appName == "Microsoft Internet Explorer") {
			thumb.style.filter = "alpha(opacity:"+0+")";
		} else {
			thumb.style.opacity=0
		}
		gal.appendChild(thumb);
	}
	
	initMainImages(picnames); /**/
	
}

var fIn;
var count = 0;
var loadprog
var mpicOut
var mpicIn

function initMainImages(pics) { //pics == array of filenames
	holder = document.getElementById('content');
	pic = document.createElement('img');
	pic.setAttribute("src", picpath+pics[count])
	pic.setAttribute("id", pics[count])
	pic.className = "mainpichidden";
	holder.appendChild(pic)
	
	//loadprog = setInterval(checkImage, 50,newpicname)
	loadprog = setInterval(function(){checkImage(pic)}, 50)
}

function checkImage(pic) {

	if (IsImageOk(pic)) {
		clearInterval(loadprog);
		total = picnames.length - 1
		picId = pic.id
		thumbId = "thumb_"+picId
		thumb = document.getElementById(thumbId)
		//fIn = setInterval(fadeIN, 100, thumb);
		fIn = setInterval(function() {fadeIN(thumb)}, 100);
	}
}

function fadeIN(pic) {
	if (navigator.appName != "Microsoft Internet Explorer") {
		op = pic.style.opacity;
	} else {
		op = pic.filters.alpha.opacity
		op = parseFloat(op)
		op = op/100
	}
	
	totalpics = picnames.length
	outp = document.getElementById('output');
	OP = parseFloat(op)
	if (OP < 0.5) {
		OP = OP + 0.1;
		if (navigator.appName != "Microsoft Internet Explorer") {
			pic.style.opacity = OP
		} else {
			OP = OP * 100
			pic.style.filter = "alpha(opacity:"+OP+")";
		}
	} else {
		clearInterval(fIn);
		//now apply the functions for rollovers and clicks on each thumb
		pic.onmouseover = function () {
			if (navigator.appName != "Microsoft Internet Explorer") {
				this.style.opacity=1
			} else {
				this.style.filter = "alpha(opacity:"+100+")";
			}
		}
		pic.onmouseout = function () {
			if (navigator.appName != "Microsoft Internet Explorer") {
				this.style.opacity=0.5
			} else {
				this.style.filter = "alpha(opacity:"+50+")";
			}
		}
		pic.onclick = function() {
			
			//clearInterval(mpicOut);
			ID = this.id
			picfilename = ID.substr(6, ID.length)
			changemainpic(picfilename)	
		}
		
		if (count == 0) {
			createMainPic();
		}
		count = count + 1
		if (count < totalpics) {
			initMainImages(picnames) 	
		} 
	}
}

function createMainPic() {
	holder = document.getElementById('mainimagewrapper');
	mpic = document.createElement('img');
	mpic.setAttribute('id', 'mainpic');
	mpic.setAttribute('src', picpath+picnames[0])
	holder.appendChild(mpic);
	if (navigator.appName != "Microsoft Internet Explorer") {
		mpic.style.opacity = 1
	} else {
		mpic.style.filter = "alpha(opacity:"+100+")";	
	}
	//add the caption
	capDiv = document.createElement('div');
	capDiv.setAttribute('id', 'captionholder');
	//capText = createTextNode("hello");
	//capDiv.appendChild(capText)
	holder.appendChild(capDiv);
	fname = picnames[0]
	capDiv.innerHTML = captions[fname];
}

function foutmainpic(newpic) {
	
	document.getElementById('captionholder').innerHTML = "";
	mpic = document.getElementById('mainpic');
	//o = mpic.style.opacity
	o = getOpacity('mainpic');
	op = parseFloat(o);
	if (op > 0) {
		op = op - 0.1;
		//mpic.style.opacity = op;
		setOpacity('mainpic', op)
	} else {
		clearInterval(mpicOut)
		//mpic.setAttribute("src", picpath+newpic);
		//document.getElementById("mainimagewrapper").removeChild(mpic)
		mpic2 = document.createElement("img")
		mpic2.setAttribute("id", "mainpic")
		mpic2.setAttribute("src",picpath+newpic)
		if (navigator.appName != "Microsoft Internet Explorer") {
			mpic2.style.opacity = 0
		} else {
			mpic2.style.filter = "alpha(opacity:"+0+")";	
		}
		document.getElementById("mainimagewrapper").replaceChild(mpic2, mpic)
		//start fadein
		//mpicIn = setInterval(finmainpic, 100, newpic);
		mpicIn = setInterval(function() {finmainpic(newpic)}, 100);
	}
}

function finmainpic(loadedpic) { //loadedpic is used to reference the caption in array
	mpic = document.getElementById('mainpic');
	//o = mpic.style.opacity
	o = getOpacity('mainpic');
	op = parseFloat(o);
	
	
	if (op < 1) {
		op = op + 0.1;
		//mpic.style.opacity = op;
		setOpacity('mainpic', op)
		
		
		
		
	} else {
		
		clearInterval(mpicIn)
		document.getElementById('captionholder').innerHTML = captions[loadedpic]
	}
}

function changemainpic(newpic) {
	clearInterval(mpicIn);
	clearInterval(mpicOut);
	//mpicOut = setInterval(foutmainpic, 100, newpic);
	mpicOut = setInterval(function() {foutmainpic(newpic)}, 100);
}

function getOpacity(id) {
	if (navigator.appName != "Microsoft Internet Explorer") {
		op = document.getElementById(id).style.opacity
		op = parseFloat(op)
	} else {
		op = document.getElementById(id).filters.alpha.opacity
		op = parseFloat(op)
		if (op != 0) {
			op = op/100
		}
	}
	return op
}

function setOpacity(id,op) {
	op = Math.round(op*10)/10
	if (navigator.appName != "Microsoft Internet Explorer") {
		document.getElementById(id).style.opacity = op
	} else {
		op = op * 100
		document.getElementById(id).style.filter = "alpha(opacity:"+op+")";
	}
}

//=====================================


function IsImageOk(img) {
	// During the onload event, IE correctly identifies any images that
	// weren’t downloaded as not complete. Others should too. Gecko-based
	// browsers act like NS4 in that they report this incorrectly.
	//if (!img.complete) {
	//	return false;
	//}
	if (navigator.appName == "Microsoft Internet Explorer") {
	} else {
	// However, they do have two very useful properties:naturalWidth and
	// naturalHeight. These give the true size of the image. If it failed
	// to load, either of these should be zero.
		if (typeof img.naturalWidth	!= "undefined" && img.naturalWidth	== 0) {
			return false;
		}
	}
	
	// No other way of checking: assume it’s ok.
	return true;
}


/**/



/*have a count index
load count pic at index
set a timer going to check if the picture is loaded
once the picture is loaded clear interval + fade in the thumb
once the thumb has faded in then increase the count.
*/