function createDiv(id){
	var div = document.createElement("div");
	div.id = id;
	div.className = "cartdiv";
	div.onmouseover = function(){div.style.background = "#DDD";};
	div.onmouseout = function(){div.style.background = "#FFF";};
	return div;
}

function createFloatingDiv(id){
	var div = document.createElement("div");
	div.id = "floatingdiv";
	div.onmouseover = function(){
		if(document.body.onclick)
			document.body.onclick = function(){};
		else 
			onclick = function(){};
	};
	div.onmouseout = function(){
		if(document.body.onclick)
			document.body.onclick = function(){closeFloatingDiv();};
		else 
			onclick = function(){closeFloatingDiv();};
	};
	var div1 = document.createElement("div");
	div1.id = "div1";
	div.appendChild(div1);
	var div2 = document.createElement("div");
	div2.id = "div2";
	for(i=0;i<shopping_carts.length;i++){
		if(shopping_carts[i][0] == id){
			var cart = shopping_carts[i];
			break;
		}
	}
	var img = createImage(shopping_carts[i][3],shopping_carts[i][4],shopping_carts[i][5],id,shopping_carts[i][1],false);
	div2.appendChild(img);
	div2.innerHTML += cart[2];
	div.appendChild(div2);
	var div3 = document.createElement("div");
	div3.id = "div3";
	div.appendChild(div3);
	return div;
}

function openCart(id){
	closeFloatingDiv();
	floatingDiv = createFloatingDiv(id);
	document.body.appendChild(floatingDiv);
	floatingDiv.style.left = setLeft(floatingDiv.offsetWidth);
	floatingDiv.style.top = setTop(floatingDiv.offsetHeight);
}

function closeFloatingDiv(){
	if(document.getElementById("floatingdiv")){
		document.body.removeChild(document.getElementById("floatingdiv"));
	}
}

function createAnchor(href){
	var a = document.createElement("a");
	a.href = href;
	return a;
}

function createImage(src,width,height,id,name,padd){
	var img = new Image();
	img.src = "cart_images/"+src;
	img.border = "0px";
	img.id = id;
	img.alt = name;
	img.title = name;
	img.width = width;
	img.height = height;
	if(padd){
		img.style.margin = Math.round((74-img.height)/2).toString()+"px "+Math.round((130-img.width)/2).toString()+"px";
	}
	return img;
}
function setBoxes(){
	var xmlFile = loadXml("carts.xml");
	var carts = xmlFile.getElementsByTagName("cart");
	for(i=0;i<carts.length;i++){
		var cartName = nValue(carts[i],"name");
		var cartId = nValue(carts[i],"id");
		//var cartText = nValue(carts[i],"text");
		var imageSrc = nValue(carts[i],"image");
		var imageWidth = carts[i].getElementsByTagName("image")[0].getAttribute("width");
		var imageHeight = carts[i].getElementsByTagName("image")[0].getAttribute("height");
		var cartText = "";
		
		var textObj = carts[i].getElementsByTagName("text");
		for(j=0;j<textObj.length;j++){
			cartText += "<p>"+textObj[j].childNodes[0].nodeValue.replace(/BR/g,"<br />")+"</p>";
		}
		var div = createDiv(cartId);
		var img = createImage(imageSrc,imageWidth,imageHeight,cartId,cartName,true);
		var a = createAnchor("javascript: openCart('"+cartId+"')");
		div.appendChild(a);
		a.appendChild(img);
		document.getElementById("carts_div").appendChild(div);
		shopping_carts[i] = Array(cartId,cartName,cartText,imageSrc,imageWidth,imageHeight);
	}
}

function nValue(obj,name){
	return obj.getElementsByTagName(name)[0].childNodes[0].nodeValue;
}


function loadXml(path){
	if (window.XMLHttpRequest){
		xhttp=new window.XMLHttpRequest();
	} else {
		xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhttp.open("GET",path,false);
	xhttp.send("");
	return xhttp.responseXML;
}

function setLeft(objectOffset){
	var myWidth = 0;
	if(typeof(window.innerWidth) == 'number'){
		myWidth = window.innerWidth;
	} else if(document.documentElement && document.documentElement.clientWidth){
		myWidth = document.documentElement.clientWidth;
	} else if(document.body && document.body.clientWidth){
		myWidth = document.body.clientWidth;
	}
	return Math.round((myWidth-objectOffset)/2)+"px";
}

function setTop(objectOffset){
	if(typeof(window.innerHeight) == 'number'){
		return ((Math.round((window.innerHeight-objectOffset)/2))+window.pageYOffset).toString()+"px";
	} else if (document.documentElement && document.documentElement.clientHeight ){
		return ((Math.round((document.documentElement.clientHeight-objectOffset)/2))+document.documentElement.scrollTop).toString()+"px";
	} else if(document.body && document.body.clientHeight){
		return ((Math.round((document.body.clientHeight-objectOffset)/2))+document.body.scrollTop).toString()+"px";
	}
}

var shopping_carts = new Array();
var floatingDiv;
onload = function(){setBoxes();}