/**
 * File:	maidensjax.js
 * Date:	8/15/2007
 * 
 * This file is for the dynamic loading of the content in the xml file. Check documentation for usage.
 */
var theprincess = null;
var xmlhttp = null;
var hbxinit = false;
var check = 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;

	//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];
		}
	}

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

/**
 * loadprincess
 * 
 * loads a princess and preloads the images
 */
function loadprincess(thisprincess, dressnumber, detailnumber, numcollection){
	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];
	}

	//preload images
	//here
	//notice that this is not done at all. I've not implemented this funcationality. I've only made not of it:)

	//set the images
	var dresses = theprincess.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)\">";
		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)\">";
		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)\">";
		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)\">";
		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 all 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 tease = ""; //teasers table
	for(var i = 0; i < dresses.length; i ++){
		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");
		var name = "STYLE SUGGESTIONS";
		var table = "";
		table += "<tr><td colspan=\"";
		if (ss.length != 0) {
			table += 4 
				+ "\">STYLE SUGGESTIONS</td></tr> <tr>";
		} else {
			table += 4 
			+ "\"> </td></tr> <tr>";
			}
		if(ss.length == 0){
			table += "<td><div style='height: 60px'>&nbsp;</div></td>";
		}
		
		for(var x = 0; x < ss.length; x ++){
			img.src = ss[x].getElementsByTagName("picture")[0].attributes.getNamedItem("src").value
			table += "<td>";
//			table += 	"<a href=\"somethingsomewhere\" >";
			table += 	"<a href=\"";
			table +=	ss[x].getAttribute("link");
			table += 	"\" >";
			table +=		"<img id=\"y" + 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);
		}
		if(ss.length == 1) {
			table += "<td><div style='height: 57px; width:60px;'>&nbsp;</div></td>";
			//table += "<td><div style='height: 60px; width:10px;'>&nbsp;</div></td>";
		}
		if(ss.length == 2) {
			//table += "<td><div style='height: 60px; width:10px;'>&nbsp;</div></td>";
		}
		
		table += "</tr>";
		table = "<table width=\""
			+ 121
			+ "\" 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 < 2){
			sslength = 120;
		} else {
			sslength = 60 * ss.length;
		}
		
		if(details.length < 2){
			detailslength = 120;
		} else {
			detailslength = 60 * details.length;
		}
		tease += '<td><div style="width: '
			+ (535 - detailslength - sslength - 3) //110
			+ 'px" >&nbsp;</div></td>';
		
		
		//the details table
		var detailshtml = "";
		/*
		if(details.length < 1){
			detailshtml += "<tr>";
			detailshtml += 	"<td colspan=\"" + details.length + "\">DRESS DETAILS</td>";
			detailshtml += "</tr>";
		} else {
			detailshtml += "<tr>";
			detailshtml += 	"<td colspan=\"" + 1 + "\">DRESS DETAILS</td>";
			detailshtml += "</tr>";
		}
		*/
		detailshtml += "<tr><td id=\"tableright\" colspan=\"";
		detailshtml += (details.length > 1 ? details.length : 2) 		//at lease 2
			+ "\">DRESS DETAILS</td></tr> <tr>";
		if(details.length == 1){ //then one empty cell
			detailshtml += "<td><div style='width: 57px; height: 60px'>&nbsp;</div></td>";
		} else if (details.length == 0){	//then 2 empty cells
			detailshtml += "<td><div style='width: 57px; height: 60px'>&nbsp;</div></td>";
			detailshtml += "<td><div style='width: 57px; height: 60px'>&nbsp;</div></td>";
		}

		
		
		for(var x = 0; x < details.length; x ++){
			img.src = details[x].attributes.getNamedItem("src").value;
			
			detailshtml += 	"<td>";
			detailshtml += 		"<a href=\"javascript:void(0)\" onclick=\"changebigimage(" + i + "," + x + ")\">";
			detailshtml += 			"<img id=\"x" + x +"i" + i + "\" 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 details = dresses[i].getElementsByTagName("dressdetailsimages");
		for(var x = 0; x < details.length; x ++){
			img.src = details[x].attributes.getNamedItem("src").value;
			document.getElementById("x" + x+ "i" +i ).src = img.src;
		}
	}
	
	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("y" + x+ "i" +i ).src = img.src;
		}
	}
	
	//load a dress
	setdress(dressnumber, detailnumber);
	/*il.tease = tease;
	il.oncomplete = function(){
		document.getElementById("teasers").innerHTML = this.tease;
		setdress(this.dressnumber, this.detailnumber);
		document.getElementById("container").removeChild(document.getElementById("block"));
	}
	
	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){
	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
//	setvars("dev/test/" + theprincess.getAttribute("name"),	document.getElementById("bigimage").alt );
	kat = theprincess.getAttribute("name") + "." +  document.getElementById("bigimage").alt;
	cat = xmlhttp.responseXML.getElementsByTagName("disneybridal")[0].getAttribute("name");
	season = xmlhttp.responseXML.getElementsByTagName("disneybridal")[0].getAttribute("season");
	setvars("/"+ season + "/" + cat + "/", kat);
	hit();
}


/**
 * setdress
 *
 * This set the content to dress dressnumber and detail detailnumber
 */
function setdress(dressnumber, detailnumber){
	var dresses = theprincess.getElementsByTagName("dresses");
	var swatch = theprincess.getElementsByTagName("dresses")[dressnumber].getElementsByTagName("swatch");
	var colorname = theprincess.getElementsByTagName("dresses")[dressnumber].getElementsByTagName("color");
	var details_td = document.getElementById("details_td");

       
	//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("column2").innerHTML
		= dresses[dressnumber].getElementsByTagName("column2")[0].firstChild.data;
	document.getElementById("details").innerHTML
		= dresses[dressnumber].getElementsByTagName("details")[0].firstChild.data;

	while(details_td.getElementsByTagName("div").length != 0){
		details_td.removeChild(details_td.getElementsByTagName("div")[0]);
	}
	while(details_td.getElementsByTagName("span").length != 0){
		details_td.removeChild(details_td.getElementsByTagName("span")[0]);
	}
		
		
//			details_td.removeChild(box1);
//			details_td.removeChild(b);
			//var color;
			//var box1 = document.createElement( 'div' );
			//color = box[x].firstChild.data;
			//box1.style.background = color;
        	//box1.setAttribute("className","box");
        	//box1.setAttribute("class","box");
        	var b = document.createElement('span');
        	//b.setAttribute("class", "color");
        	
        	if (swatch[0].firstChild.data == "duchess"){
        		b.innerHTML = "<a href ='javascript:void(0);' onclick=\"openDuchessPopUp('swatches/duchess.html')\"><p>View Available Colors</p></a><br/><br/>";
        	} else if (swatch[0].firstChild.data == "taffeta"){
        		b.innerHTML = "<a href ='javascript:void(0);' onclick=\"openTaffetaPopUp('swatches/taffeta.html')\"><p>View Available Colors</p></a><br/><br/>";
        	} else if (swatch[0].firstChild.data == "chiffon"){
        		b.innerHTML = "<a href ='javascript:void(0);' onclick=\"openChiffonPopUp('swatches/chiffon.html')\"><p>View Available Colors</p></a><br/><br/>";
        	} else if (swatch[0].firstChild.data == "dupioni"){
        		b.innerHTML = "<a href ='javascript:void(0);' onclick=\"openDupioniPopUp('swatches/dupioni.html')\"><p>View Available Colors</p></a><br/><br/>";
        	} else if (swatch[0].firstChild.data == "none"){
        		b.innerHTML = "<br/>";
       		}
        	//details_td.appendChild(box1);
        	details_td.appendChild(b);
			
	//image
	changebigimage(dressnumber, detailnumber);

	//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(){
					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;
			}