function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-150;//150 is half popup's height
	popUpDiv.style.top = 10 + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/8;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname, id) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);	
	displayData(id);
}

function displayData(id) {
	if(id != 0) {
		DWRClothingDetails.getClothingDetails(id, callback);
	}
}

var callback = function(data)
{
			
	document.getElementById("clothingPopupName").innerHTML=data.style.name;
	document.getElementById("clothingPopup-price").innerHTML="SEK " + data.style.price;
	document.getElementById("clothingPopupBrand").innerHTML=data.styleBrand.name;
	document.getElementById("clothingPopupDescription").innerHTML=data.style.description;
	
	document.getElementById("clothingPopup-image").src="/shop/viewImage.html?id=" + data.style.imageId;
	
	var thumbnails = document.getElementById("clothingPopup-thumbnails");
	while (thumbnails.hasChildNodes()) {
		thumbnails.removeChild(thumbnails.firstChild);
	}	
	for (var i=0; i<data.additionalImages.length; i++) {
		var thumbnailLink = document.createElement("a");
		thumbnailLink.setAttribute("href", "#");
		thumbnailLink.setAttribute("onClick", "popup('popUpDiv', 310)");
		var thumbnailImage = document.createElement("img");
		thumbnailImage.setAttribute("src", "/shop/viewThumbnail.html?id=" + data.additionalImages[i].thumbnailId)
		thumbnailLink.appendChild(thumbnailImage);
		thumbnails.appendChild(thumbnailLink);
		var lineBreak = document.createElement("br");
		thumbnails.appendChild(lineBreak);
	}
	
}