// function details(myNameIn,myIndexIn) {
function details() {
	clearInterval(growInt);
//	this.myName = myNameIn;
//	this.myIndex = myIndexIn;
	this.selectedIndex = 1;
	this.finalHeight = 522;
	this.finalTop = 28;
	this.loadSpeed = 40;
	this.animate = true;

// width grow
	this.growWidth = false; 
	this.finalWidth = 746;
	this.finalLeft = 141;
}
details.prototype.setVars = function(myNameIn,myIndexIn) {
	this.myName = myNameIn;
	this.myIndex = myIndexIn;
}
details.prototype.draw = function(animIn) {
	this.thumbImageArray = new Array();
	this.animate = animIn;
	detailsOpen = true;
	this.selectedIndex = 1;
	if (this.animate) {
		this.myDiv = document.createElement("div");
		this.myDiv.setAttribute("class","details");
		this.myDiv.setAttribute("className","details");
		this.myDiv.style.height = "1px";
		this.myDiv.style.top = "331px";
		if (this.growWidth) {
			this.myDiv.style.width = "1px";
			this.myDiv.style.left = "517px";
		}
		this.backgroundDiv = document.createElement("div");
		this.backgroundDiv.setAttribute("class","detailsBG"+this.myName);
		this.backgroundDiv.setAttribute("className","detailsBG"+this.myName);
		this.myDiv.appendChild(this.backgroundDiv);
		this.addNavButtons();
		this.addDivider();
		this.addCloseButton();
	} else {
		this.backgroundDiv.setAttribute("class","detailsBG"+this.myName);
		this.backgroundDiv.setAttribute("className","detailsBG"+this.myName);
	}
	this.requestImages();
	return this.myDiv;
}
details.prototype.requestImages = function() {
        var myQuery = new dbQuery();
        // myQuery.requestData("getXML.php?fileLocation=xml/details/images/"+this.myName+".xml",this,"loadImages");
        myQuery.requestData("xml/details/"+this.myName+".xml",this,"loadImages");
}
details.prototype.loadImages = function(myQuery) {
        this.myRecords = myQuery.getRecords();
	this.drawImage(this.myRecords[1].getPropertyValue("imageLocation"));
	this.drawTextArea();
	this.drawCredits();
	if (this.animate) {
		this.startGrow();
	}
}
details.prototype.drawCredits = function() {

	var creditDiv = document.createElement("div");
	creditDiv.setAttribute("class","credit");
	creditDiv.setAttribute("className","credit");
// spacer
	var spacerDiv = document.createElement("div");
	spacerDiv.setAttribute("class","spacer");
	spacerDiv.setAttribute("className","spacer");
	this.textDiv.appendChild(spacerDiv);

// title first
	var titleDiv = document.createElement("div");
	titleDiv.setAttribute("class","leftTitle")
	titleDiv.setAttribute("className","leftTitle")
	titleDiv.appendChild(document.createTextNode("TITLE"));
	creditDiv.appendChild(titleDiv);

	var titleValueDiv = document.createElement("div");
	titleValueDiv.setAttribute("class","rightTitle")
	titleValueDiv.setAttribute("className","rightTitle")
	titleValueDiv.appendChild(document.createTextNode(this.myRecords[0].getPropertyValue("title")));
	creditDiv.appendChild(titleValueDiv);
	this.textDiv.appendChild(creditDiv);
// client
	var creditDiv2 = document.createElement("div");
	creditDiv2.setAttribute("class","credit");
	creditDiv2.setAttribute("className","credit");
	var clientDiv = document.createElement("div");
	clientDiv.setAttribute("class","leftTitle")
	clientDiv.setAttribute("className","leftTitle")
	clientDiv.appendChild(document.createTextNode("CLIENT"));
	creditDiv2.appendChild(clientDiv);

	var clientValueDiv = document.createElement("div");
	clientValueDiv.setAttribute("class","rightTitle")
	clientValueDiv.setAttribute("className","rightTitle")
	clientValueDiv.appendChild(document.createTextNode(this.myRecords[0].getPropertyValue("client")));
	creditDiv2.appendChild(clientValueDiv);
	this.textDiv.appendChild(creditDiv2);

// project
	var creditDiv3 = document.createElement("div");
	creditDiv3.setAttribute("class","credit");
	creditDiv3.setAttribute("className","credit");
	var projectDiv = document.createElement("div");
	projectDiv.setAttribute("class","leftTitle")
	projectDiv.setAttribute("className","leftTitle")
	projectDiv.appendChild(document.createTextNode("PROJECT"));
	creditDiv3.appendChild(projectDiv);

	var projectValueDiv = document.createElement("div");
	projectValueDiv.setAttribute("class","rightTitle")
	projectValueDiv.setAttribute("className","rightTitle")
	projectValueDiv.appendChild(document.createTextNode(this.myRecords[0].getPropertyValue("project")));
	creditDiv3.appendChild(projectValueDiv);
	this.textDiv.appendChild(creditDiv3);

	this.addThumbs();
}
details.prototype.drawImage = function(imageLocation) {
	this.imageDiv = document.createElement("div");
	this.imageDiv.setAttribute("class","mainImage");
	this.imageDiv.setAttribute("className","mainImage");
	this.imageDiv.setAttribute("id","mainImg");
	this.mainImage = document.createElement("img");
	this.mainImage.setAttribute("src",imageLocation);
	this.imageDiv.appendChild(this.mainImage);
	this.myDiv.appendChild(this.imageDiv);	
}
details.prototype.drawTextArea = function() {
	this.textDiv = document.createElement("div");
	this.textDiv.setAttribute("id","textD");
	this.textDiv.setAttribute("class","detailText");
	this.textDiv.setAttribute("className","detailText");
	this.myDiv.appendChild(this.textDiv);
}
details.prototype.addThumbs = function() {
	var creditDiv4 = document.createElement("div");
	creditDiv4.setAttribute("class","credit");
	creditDiv4.setAttribute("className","credit");

	this.thumbsDiv = document.createElement("div");
	this.thumbsDiv.setAttribute("class","thumbsDiv");
	this.thumbsDiv.setAttribute("className","thumbsDiv");
if (this.myRecords[1].getPropertyValue("thumb")!="nothumb") {
	for (var i=1;i<this.myRecords.length;i++) {
		if (this.selectedIndex == i) {
			var thumbLoc = this.myRecords[i].getPropertyValue("thumbSelected");
		}
		else {
			var thumbLoc = this.myRecords[i].getPropertyValue("thumb");
		}
		var thumbDiv = document.createElement("div");
		thumbDiv.setAttribute("class","thumbDiv");
		thumbDiv.setAttribute("className","thumbDiv");
		var thumbImage = document.createElement("img");
		thumbImage.setAttribute("src",thumbLoc);
		thumbImage.myParent = this;
		thumbImage.index = i;
		thumbImage.onmouseover = function(e) {
			this.setAttribute("src",this.myParent.myRecords[this.index].getPropertyValue("thumbOver"));
		}
		thumbImage.onmouseout = function(e) {
			if (this.myParent.selectedIndex != this.index) {
				this.setAttribute("src",this.myParent.myRecords[this.index].getPropertyValue("thumb"));
			}
		}
		thumbImage.onclick = function(e) {
			this.myParent.setMainImage(this.index);
		}
		thumbDiv.appendChild(thumbImage);
		this.thumbsDiv.appendChild(thumbDiv);	
		this.thumbImageArray.push(thumbImage);
	}
	}
	creditDiv4.appendChild(this.thumbsDiv);
	this.textDiv.appendChild(creditDiv4);
	this.addDescription(creditDiv4);
}
details.prototype.setMainImage = function(indexIn) {
	this.resetThumbs();
	this.selectedIndex = indexIn;
	this.mainImage.setAttribute("src",this.myRecords[indexIn].getPropertyValue("imageLocation"));
	this.resetThumbs();
	this.thumbImageArray[indexIn-1].setAttribute("src",this.myRecords[indexIn].getPropertyValue("thumbSelected"))
}
details.prototype.resetThumbs = function() {
	for (var i=0; i<this.thumbImageArray.length;i++) {
		this.thumbImageArray[i].setAttribute("src",this.myRecords[i+1].getPropertyValue("thumb"))
	}
}
details.prototype.addDivider = function() {
	var dividerDiv = document.createElement("div");	
	dividerDiv.setAttribute("class","detailDivider");
	dividerDiv.setAttribute("className","detailDivider");
	this.myDiv.appendChild(dividerDiv);
}
details.prototype.addDescription = function(parentDiv) {
// spacer
	var spacerDiv = document.createElement("div");
	spacerDiv.setAttribute("class","spacer");
	spacerDiv.setAttribute("className","spacer");
	parentDiv.appendChild(spacerDiv);
	this.descDiv = document.createElement("div");
	this.descDiv.setAttribute("class","descriptionDiv");
	this.descDiv.setAttribute("className","descriptionDiv");
	// this.descDiv.appendChild(document.createTextNode(this.myRecords[0].getPropertyValue("description")));
	this.descDiv.innerHTML = this.myRecords[0].getPropertyValue("description");
	parentDiv.appendChild(this.descDiv);
}
details.prototype.addNavButtons = function() {
	var nextDiv = document.createElement("div");
	nextDiv.setAttribute("class","nextDiv");
	nextDiv.setAttribute("className","nextDiv");
	nextDiv.appendChild(document.createTextNode("next"));
	nextDiv.onmouseover = function(e) {
		nextDiv.setAttribute("class","nextDivover");
		nextDiv.setAttribute("className","nextDivover");
		myPage.sound.playSound("mp3s/NEXT.mp3");
	}
	nextDiv.onmouseout = function(e) {
		nextDiv.setAttribute("class","nextDiv");
		nextDiv.setAttribute("className","nextDiv");
	myPage.sound.stopSound();
	}
	nextDiv.myParent = this;
	nextDiv.onclick = function(e) {
		this.myParent.myParent.showNext(this.myParent.myIndex);
	}
	this.myDiv.appendChild(nextDiv);
	
	//this.nextDiv = document.createElement("div");
	//this.nextDiv.setAttribute("class","nextDiv");
	//this.nextDiv.setAttribute("className","nextDiv");
	//this.nextButton = document.createElement("img");
	//this.nextButton.setAttribute("src","images/navigation/nextButton.gif");
	//this.nextDiv.appendChild(this.nextButton);
	//this.nextButton.myParent = this;
	//this.nextButton.onclick = function(e) {
	//	this.myParent.myParent.showNext(this.myParent.myIndex);
	//}
	//this.myDiv.appendChild(this.nextDiv);

	var prevDiv = document.createElement("div");
	prevDiv.setAttribute("class","prevDiv");
	prevDiv.setAttribute("className","prevDiv");
	prevDiv.appendChild(document.createTextNode("previous"));
	prevDiv.onmouseover = function(e) {
		prevDiv.setAttribute("class","prevDivover");
		prevDiv.setAttribute("className","prevDivover");
		myPage.sound.playSound("mp3s/NEXT.mp3");
	}
	prevDiv.onmouseout = function(e) {
		prevDiv.setAttribute("class","prevDiv");
		prevDiv.setAttribute("className","prevDiv");
	myPage.sound.stopSound();
	}
	prevDiv.myParent = this;
	prevDiv.onclick = function(e) {
		this.myParent.myParent.showPrev(this.myParent.myIndex);
	}
	this.myDiv.appendChild(prevDiv);
	
	//this.prevDiv = document.createElement("div");
	//this.prevDiv.setAttribute("class","prevDiv");
	//this.prevDiv.setAttribute("className","prevDiv");
	//this.prevButton = document.createElement("img");
	//this.prevButton.setAttribute("src","images/navigation/prevButton.gif");
	//this.prevButton.myParent = this;
	//this.prevDiv.appendChild(this.prevButton);
	//this.prevButton.onclick = function(e) {
	//	this.myParent.myParent.showPrev(this.myParent.myIndex);
	//}
	//this.myDiv.appendChild(this.prevDiv);
}
details.prototype.startGrow = function() {
	clearInterval(growInt);
	this.currentHeight = this.myDiv.style.height.substr(0,this.myDiv.style.height.length-2);
	this.currentTop = this.myDiv.style.top.substr(0,this.myDiv.style.top.length-2);
debug(this.currentHeight);
	if (this.growWidth) {
		this.currentWidth = this.myDiv.style.width.substr(0,this.myDiv.style.width.length-2);
		this.currentLeft = this.myDiv.style.left.substr(0,this.myDiv.style.left.length-2);
	}
	growInt = setInterval("detailsPage.grow()",10);
}
details.prototype.grow = function() {
	var newHeight = Number(this.currentHeight) + this.loadSpeed;
	var newTop = Number(this.currentTop) - this.loadSpeed/2;
	if (this.growWidth) {
		var newWidth = Number(this.currentWidth) + this.finalWidth/this.finalHeight * this.loadSpeed;
		var newLeft = Number(this.currentLeft) - this.finalWidth/this.finalHeight * this.loadSpeed/2;
	}
	if (newHeight > this.finalHeight) {
		clearInterval(growInt);
		this.myDiv.style.height = this.finalHeight+"px";
		this.myDiv.style.top = this.finalTop+"px";
		if (this.growWidth) {
			this.myDiv.style.width = this.finalWidth+"px";
			this.myDiv.style.left = this.finalLeft+"px";
		}
	}
	else {
		this.currentHeight = newHeight;
		this.currentTop = newTop;
		this.myDiv.style.height = newHeight+"px";
		this.myDiv.style.top = newTop+"px";
		if (this.growWidth) {
			this.currentWidth = newWidth;
			this.currentLeft = newLeft;
			this.myDiv.style.width = newWidth+"px";
			this.myDiv.style.left = newLeft+"px";
		}
	}
}
details.prototype.addCloseButton = function() {
	var closeDiv = document.createElement("div");
	closeDiv.setAttribute("class","closeDiv");
	closeDiv.setAttribute("className","closeDiv");
	closeDiv.appendChild(document.createTextNode("close"));
	closeDiv.myParent = this;
	closeDiv.onclick = function(e) {
		this.myParent.myParent.hideDetails();	
	}
	closeDiv.onmouseover = function(e) {
		closeDiv.setAttribute("class","closeDivover");
		closeDiv.setAttribute("className","closeDivover");
		myPage.sound.playSound("mp3s/CLOSE.mp3");
	}
	closeDiv.onmouseout = function(e) {
		closeDiv.setAttribute("class","closeDiv");
		closeDiv.setAttribute("className","closeDiv");
	myPage.sound.stopSound();
	}
	this.myDiv.appendChild(closeDiv);
}
details.prototype.clear = function() {
	var td = document.getElementById("textD");
	var childCount = td.childNodes.length;
	for (var i=0;i<childCount;i++) {
		td.removeChild(td.childNodes[0]);
	}
	this.imageDiv.removeChild(this.mainImage);	
}
details.prototype.resetThumbs = function() {
	for (var i=0;i<this.thumbImageArray.length;i++) {
		this.thumbImageArray[i].setAttribute("src",this.myRecords[i+1].getPropertyValue("thumb"));
	}
}