/**
 * File:	accessoriesjax.js
 * Date:	8/15/2007
 * 
 * This file is for the dynamic loading of the content in the xml file. Check documentation for usage. this is for the accessories page.
 */
var theprincess = null;
var xmlhttp = null;
var hbxinit = false;
var il = new ImageLoader();
/**
 * loadxml(url)
 * 
 * loads an xml file
 */
function loadxml(url){
	try{
	if(window.XMLHttpRequest){
		xmlhttp= new XMLHttpRequest();
	} else if(window.ActiveXObject){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		return;
	}
	xmlhttp.open("GET", url, false);
	xmlhttp.send(null);
	}catch(error){
//		alert("error " + error);
	}
}

/**
 * init()
 *
 * This function should be run when the page is loaded
 */
function init(xmlfilename){
	loadxml(xmlfilename);	//for different xml files

	//loads the princesses
	var searchdata = window.location.search.substr(1);
	var searcharray = searchdata.split(/[&;]/g);

	var line = null;
	var dressnumber = 0;
	var detailnumber = -1;
	var numcollection = null;
	var pname = "false";


	//get the url information
	for(var i = 0; i < searcharray.length; i ++){
		searcharray[i] = searcharray[i].replace(/\+/g," ");
		var searchpair = searcharray[i].split("=");
		if(searchpair[0] == "princess"){
			line = searchpair[1];
		}
		if(searchpair[0] == "dressnumber"){
			dressnumber = searchpair[1];
		}
		if(searchpair[0] == "detailnumber"){
			detailnumber = searchpair[1];
		}
		if(searchpair[0] == "numcollection"){
			numcollection = searchpair[1];
		}
		if(searchpair[0] == "pname"){
			numcollection = searchpair[1];
		}
	}

	loadprincess(line, dressnumber, detailnumber, numcollection, pname);
}

/**
 * loadprincess
 * 
 * loads a princess and preloads the images
 */
function loadprincess(thisprincess, dressnumber, detailnumber, numcollection, pname){
	var img = new Image();
	var p = xmlhttp.responseXML.getElementsByTagName("princess");

	var princess = new Array();
	for(var x = 0; x < p.length; x ++){
		if(p[x].getAttribute("name") == thisprincess){
			theprincess = p[x];
		}
	}
	if(theprincess == null){

		theprincess = p[0];
		pname="true";
		var dresses = xmlhttp.responseXML.getElementsByTagName("dresses");
	}
else{  var dresses = theprincess.getElementsByTagName("dresses");}
/*		alert("this is " + dresses);
		alert("theprincess " + theprincess);
		alert("this is " + dresses)*/;
	//preload images
	//here
	//notice that this is not done at pname. I've not implemented this funcationality. I've only made not of it:)

	//set the images
	
 //   var dresses = theprincess.getElementsByTagName("dresses");
//var dresses = xmlhttp.responseXML.getElementsByTagName("dresses");
	var innerhtml = "";
	
	for(var x = 0; x < dresses.length; x ++){

		if (numcollection==null){
		innerhtml += "<td>";
		innerhtml += 	"<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">";
		innerhtml += 		"<tr>";
		innerhtml += 			"<td>";
		innerhtml +=				"<a href=\"javascript:void(0)\" onclick=\""
				  +						"setdress(" + x + ", -1,"+pname+")\">";
		innerhtml += 					"<img src=\"" 
		          + 						dresses[x].getElementsByTagName("thumbnail")[0].getAttribute("src")
		          + 						"\" width=\"131\" height=\"166\" border=\"0\""
		          +							"alt=\"" + dresses[x].getAttribute("name") + "\""
		          +						" />";
		innerhtml +=				"</a>";
		innerhtml += 			"</td>";
		innerhtml += 		"</tr>";
		innerhtml += 		"<tr>";
		innerhtml +=			"<td align=\"center\">";
		innerhtml +=				"<a href=\"javascript:void(0)\" onclick=\""
				  +						"setdress(" + x + ", -1,"+pname+")\">";
		innerhtml +=					dresses[x].getAttribute("name");
		innerhtml +=				"</a>";
		innerhtml +=			"</td>";
		innerhtml +=		"</tr>";
		innerhtml += 		"<tr>";
		innerhtml +=			"<td align=\"center\">";
		innerhtml +=					dresses[x].getAttribute("collection");
		innerhtml +=			"</td>";
		innerhtml +=		"</tr>";
		innerhtml += 	"</table>";
		innerhtml += "</td>";}
		
		else if (dresses[x].getAttribute("numcollection")==numcollection){
		innerhtml += "<td>";
		innerhtml += 	"<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">";
		innerhtml += 		"<tr>";
		innerhtml += 			"<td>";
		innerhtml +=				"<a href=\"javascript:void(0)\" onclick=\""
				  +						"setdress(" + x + ", -1,"+pname+")\">";
		innerhtml += 					"<img src=\"" 
		          + 						dresses[x].getElementsByTagName("thumbnail")[0].getAttribute("src")
		          + 						"\" width=\"131\" height=\"166\" border=\"0\""
		          +							"alt=\"" + dresses[x].getAttribute("name") + "\""
		          +						" />";
		innerhtml +=				"</a>";
		innerhtml += 			"</td>";
		innerhtml += 		"</tr>";
		innerhtml += 		"<tr>";
		innerhtml +=			"<td align=\"center\">";
		innerhtml +=				"<a href=\"javascript:void(0)\" onclick=\""
				  +						"setdress(" + x + ", -1,"+pname+")\">";
		innerhtml +=					dresses[x].getAttribute("name");
		innerhtml +=				"</a>";
		innerhtml +=			"</td>";
		innerhtml +=		"</tr>";
		innerhtml += 		"<tr>";
		innerhtml +=			"<td align=\"center\">";
		innerhtml +=					dresses[x].getAttribute("collection");
		innerhtml +=			"</td>";
		innerhtml +=		"</tr>";
		innerhtml += 	"</table>";
		innerhtml += "</td>";
	}
		
	}
	
	innerhtml = "<table><tr>" + innerhtml + "</tr></table>";
	document.getElementById("otherdresses").innerHTML = innerhtml;
	


	//load pname details and suggestions here
	//this is in a sence some preloading as the browser will start download this at the begining of the page's lifespan.
	var tablename1 = document.getElementById("teasers").getAttribute("tablename1");
	if(tablename1 == undefined){
		tablename1 = '';
	}
	
	
	
	
	var tease = ""; //teasers table
	for(var i = 0; i < dresses.length; i ++){
		var tablename2 = document.getElementById("teasers").getAttribute("tablename2");
		if(tablename2 == undefined){
			tablename2 = 'OTHER PIECES IN THE COLLECTION';
			}
		tease += '<table width="100%" cellpadding="0" cellspacing="0" style="background-color: white; display:none;" id="tease' + i + '">';
		//the style suggestions table
		var ss = dresses[i].getElementsByTagName("suggestions");
		var details = dresses[i].getElementsByTagName("dressdetailsimages");
		if (ss.length == 0) {
			tablename2 = '';
		}
		
		var table = "";
		table += "<tr><td colspan=\"";
		table += 4 
			+ "\">" + tablename2 + "</td></tr> <tr>";
		
		// Sorting pname 'Other Pieces in the collection'
		
		for(var x = 0; x < ss.length; x ++){
			table += "<td>";
			table += 	"<a href=\"";
			table +=	ss[x].getAttribute("link");
			table += 	"\" >";
			table +=		"<img id=\"x" + x +"i" + i + "\" src=\"" 
			+ ss[x].getElementsByTagName("picture")[0].attributes.getNamedItem("src").value
				+ "\" width=\"57\" height=\"60\" border=\"0\" />";
			table +=	"</a>";
			table += "</td>";
			//il.push(ss[x].getElementsByTagName("picture")[0].attributes.getNamedItem("src").value);
		}
		
		
		
		//remove this table when implementing style suggestions. 
		
			
		if(ss.length == 0){
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
		}
		if(ss.length == 1) {
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
		}
		if(ss.length == 2) {
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
		}
		if(ss.length == 3) {
			table += "<td><div style='height: 60px; width: 57px;'>&nbsp;</div></td>";
		}
		table += "</tr>";
		table = "<table width=\""
			+ 120
			+ "\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">" + table + "</table>";

		tease += '<td align="left">' + table + "</td>";
		
		
		

		//this is a hack to get the spacing correct
		var sslength;
		var detailslength;
		if(ss.length < 4){
			sslength = 6 * 60;
		} else {
			sslength = 60 * ss.length;
		}
		/*
		if(details.length < 0){
			detailslength = 0;
		} else {
			detailslength = 60 * details.length;
		}
		
		tease += '<td><div style="width: '
			//+ (401 - detailslength - sslength - 3) //110
			+ 'px" >&nbsp;</div></td>';
		*/
		
		//the details table
		var detailshtml = "";
		/*
		if(details.length < 1){
			detailshtml += "<tr>";
			detailshtml += 	"<td colspan=\"" + details.length + "\"> </td>";
			detailshtml += "</tr>";
		} else {
			detailshtml += "<tr>";
			detailshtml += 	"<td colspan=\"" + 1 + "\"> </td>";
			detailshtml += "</tr>";
		}
		*/
		detailshtml += "<tr><td id=\"tableright\" colspan=\"";
		detailshtml += (details.length > 1 ? details.length : 2) 		//at least 2
			+ "\">" + tablename1 + "</td></tr> <tr>";
		/*if(details.length == 1){ //then one empty cell
			detailshtml += "<td><div style='width: 60px; height: 60px'>&nbsp;</div></td>";
		} else if (details.length == 0){	//then 2 empty cells
			detailshtml += "<td><div style='width: 60px; height: 60px'>&nbsp;</div></td>";
			detailshtml += "<td><div style='width: 60px; height: 60px'>&nbsp;</div></td>";
		}*/

		
		
		for(var x = 0; x < details.length; x ++){
			detailshtml += 	"<td>";
//			detailshtml += 		"<a href=\"javascript:void(0)\" onclick=\"changebigimage(" + i + "," + x + ")\">";
			detailshtml += 		'<a href="javascript:void(0)" onclick="openBridalPopUp(\'bridalpopup.html?title=' +  dresses[x].getAttribute("name").replace(" ","+");
			detailshtml += 			"&pn=" + theprincess.getAttribute("name") + "." +  dresses[i].getAttribute("name").replace(" ", "+");
			detailshtml += 			"&imagefile=" + dresses[i].getElementsByTagName("dressdetailsimages")[x].getElementsByTagName("picture")[0].getAttribute("src");
			detailshtml += 			'\')">';
			detailshtml += 			"<img id=\"xx" + x + "\" src=\"" 
						+				details[x].attributes.getNamedItem("src").value
						+				"\" width=\"57\" height=\"60\" style=\"border:0px;\" />";
			detailshtml +=		"</a>";
			detailshtml += 	"</td>";
			//il.push(details[x].attributes.getNamedItem("src").value);
		}
		
		detailshtml = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"120\" >" + detailshtml + "</table>";
		
		tease += '<td align="right">' + detailshtml + "</td>";

		tease += "</table>";
	}
	document.getElementById("teasers").innerHTML = tease;
	
	for(var i = 0; i < dresses.length; i ++){
			var ss = dresses[i].getElementsByTagName("suggestions");
		for(var x = 0; x < ss.length; x ++){
			img.src = ss[x].getElementsByTagName("picture")[0].attributes.getNamedItem("src").value;
			document.getElementById("x" + x + "i" + i ).src = img.src;
		}
	}
	
	
	//load a dress
	setdress(dressnumber, detailnumber,pname);
	/*il.tease = tease;
	il.oncomplete = function(){
		document.getElementById("teasers").innerHTML = this.tease;
		setdress(this.dressnumber, this.detailnumber);
		try
		{
			document.getElementById("container").removeChild(document.getElementById("block"));
		}
		catch (error)
		{}
	}
	setTimeout("if(il.getNumComplete() != il.array.length) il.oncomplete();",5000);
	il.dressnumber = dressnumber;
	il.detailnumber = detailnumber;
	
	il.get(); */
}


/**
 * changebigimage
 * 
 * Changes the bigimage to this dress and dress detail
 * if detailnumber is -1 then sets the default dress image
 */
function changebigimage(dressnumber, detailnumber, pname){



	if(pname == true){

	dresses = xmlhttp.responseXML.getElementsByTagName("dresses");}else{

	var dresses = theprincess.getElementsByTagName("dresses");
	}

	var i = new Image();
	if(detailnumber == -1){
		document.getElementById("bigimage").src = 
			dresses[dressnumber].getElementsByTagName("mainimage")[0].getAttribute("src");
		document.getElementById("bigimage").alt =
			dresses[dressnumber].getAttribute("name");
		i.src = dresses[dressnumber].getElementsByTagName("mainimage")[0].getAttribute("src");
	} else {
		document.getElementById("bigimage").src = 
			dresses[dressnumber].getElementsByTagName("dressdetailsimages")[detailnumber].getElementsByTagName("picture")[0].getAttribute("src");
		document.getElementById("bigimage").alt =
			dresses[dressnumber].getAttribute("name");
		i.src = dresses[dressnumber].getElementsByTagName("dressdetailsimages")[detailnumber].getElementsByTagName("picture")[0].getAttribute("src");
	}
	//ie hack not needed in firefox or safari
	i.onload = function(){
		document.getElementById("bigimage").src = i.src;
	}
	
	//tracking code here
	kat = theprincess.getAttribute("name") + "." +  document.getElementById("bigimage").alt;
	cat = xmlhttp.responseXML.getElementsByTagName("disneybridal")[0].getAttribute("name");
	season = xmlhttp.responseXML.getElementsByTagName("disneybridal")[0].getAttribute("none");
	setvars("/" + season + "/accessories/" + cat + "/", kat);
	hit();
}


/**
 * setdress
 *
 * This set the content to dress dressnumber and detail detailnumber
 */
function setdress(dressnumber, detailnumber, pname){

	if(pname == true){

	dresses = xmlhttp.responseXML.getElementsByTagName("dresses");
	}else{
	dresses = theprincess.getElementsByTagName("dresses");
}

	//description
	/*document.getElementById("dressdescription").innerHTML 
		= dresses[dressnumber].getElementsByTagName("dressdiscription")[0].firstChild.data; */
	document.getElementById("princess_title").innerHTML 
		= dresses[dressnumber].getElementsByTagName("princess_title")[0].firstChild.data;
	document.getElementById("column1").innerHTML 
		= dresses[dressnumber].getElementsByTagName("column1")[0].firstChild.data;
	document.getElementById("dress_title").innerHTML 
		= dresses[dressnumber].getElementsByTagName("dress_title")[0].firstChild.data;
	document.getElementById("details").innerHTML 
		= dresses[dressnumber].getElementsByTagName("details")[0].firstChild.data;

	//image
	changebigimage(dressnumber, detailnumber, pname);

	//set tease information
	for(var x = 0; x < dresses.length; x ++){
		document.getElementById("tease" + x).style.display='none';
	}
	document.getElementById("tease" + dressnumber).style.display='block';
	
}




/**
 * setvars
 *
 * set the omniture vars
 * path refers to MULTI-LEVEL CONTENT CATEGORY
 * name refers to page name
 */
 
var hier= "";
var pageName = "";
function setvars(path, name){
	hier = path;
	pageName = name;
}

//count this as a hit
function hit(){
	document.getElementById("omnitureiframe").src = "http://www.disneybridal.com/omniture/omniture.html?path=" + hier + "&pagename=" + pageName;
}

function ImageLoader(){
				//the image array
				this.array = new Array();

				//push this image into this array
				this.push = function(x){
					var o = new Object();
					o.url = x;
					o.done = false;
					this.array.push(o);
				};

				//the error event function
				this.onerror = function(index){};

				//the update event function
				this.onupdate = function(index){};

				//the complete event function
				this.oncomplete = function(){};

				//getcomplete
				this.getNumComplete = function(){
					var completed = 0;
					for(var x = 0; x < this.array.length; x ++){
						if(this.array[x].done){
							completed ++;
						}
					}
					return completed;
				};

				//gets the images
				this.get = function(){
					if(this.array.length == 0){
						il.oncomplete();
						return;
					}
					for(var x = 0; x < this.array.length; x ++){
						var i = new Image();
						i.il = this;
						i.index = x;
						i.onload = function(){
							i.il.array[this.index].done = true;
							i.il.onupdate(this.index);
							if(i.il.getNumComplete() >= i.il.array.length){
								i.il.oncomplete();
							}
						};
						i.onerror = function(){
							i.il.array[this.index].done = true;	//done but with errors
							i.il.array[this.index].error = true;
							i.il.onerror(this.index);
							if(i.il.getNumComplete() >= i.il.array.length){
								i.il.oncomplete();	//not sure if this should happen.
							}
						};
						i.src = this.array[x].url;
					}
				};
			}

			il.onerror = function(index){
				alert("oh no: " + index + " didn't download");
			}

			il.onupdate = function(index){
				//document.getElementById("status").innerHTML += " " + index;
			}