function showLayout(id) {
	document.getElementById('2x2').style.display = "none";
	document.getElementById('4x4').style.display = "none";
	document.getElementById('4x8').style.display = "none";
	document.getElementById('BDR').style.display = "none";
	
	document.getElementById(id).style.display = "block";
}

function searchAndDisplay() {
	// Hide current search results and show loading banner
	var instruct = document.getElementById('instruct');
	instruct.style.display = "none";
	
	var searchResults = document.getElementById('searchResults');
	searchResults.style.display = "none";
	
	var loading = document.getElementById('loadingResults');
	loading.style.display = "block";
	
	var query = encodeURIComponent(document.getElementById('searchText').value);
	var dieType = document.getElementById('layoutChoice').options[document.getElementById('layoutChoice').options.selectedIndex].value;
	
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('GET', "_getProducts.aspx?q=" + query + "&dieType=" + dieType, true);
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
			var results = self.xmlHttpReq.responseText.split("\r\n");
			var numResults = results[0];
			
			itemNumbers = new Array(numResults);
			itemNames = new Array(numResults);
			
			for (var p=0; p<numResults; p++) {
				var itemNo = results[p+1].substring(0, results[p+1].indexOf(','));
				var itemName = results[p+1].substring(results[p+1].indexOf(',')+1);
				
				itemNumbers[p] = itemNo;
				itemNames[p] = itemName;
			}
			
			displayResults(numResults);
       }
    }
    self.xmlHttpReq.send(null);
}

function clearSearch() {
	var searchResults = document.getElementById('searchResults');
	searchResults.style.display = "none";
	searchResults.innerHTML = "";
	
	var instruct = document.getElementById('instruct');
	instruct.style.display = "block";
	
	var searchText = document.getElementById('searchText');
	searchText.value = "";
}




var itemNumbers;
var itemNames;
var floatName = "";
var floatNum = "";
var floatSource;
var movingItem = false;
var itemOffsetX = 0;
var itemOffsetY = 0;

var names2x2 = new Array(24);
var numbers2x2 = new Array(24);
var names4x4 = new Array(6);
var numbers4x4 = new Array(6);
var names4x8 = new Array(3);
var numbers4x8 = new Array(3);
var namesBDR = new Array(3);
var numbersBDR = new Array(3);

var sourceCell = null;

window.onload = function() {
	var myBody = document.getElementsByTagName("body");
	myBody[0].onmousemove = function(event) {
		if (movingItem && floatNum != "")
			moveFloatingImg(event);
	};
};

function displayResults(numResults) {
	var dieType = document.getElementById('layoutChoice').options[document.getElementById('layoutChoice').options.selectedIndex].value;
	var searchResults = document.getElementById('searchResults');
	var loading = document.getElementById('loadingResults');
	
	if (numResults > 0) {
		searchResults.innerHTML = "";
		
		var i;
		for (i=0; i<itemNumbers.length; i++) {
			var img = document.createElement("IMG");
			img.id = "img_" + i;
			if (dieType == "BDR")
				img.src = "/products/" + itemNumbers[i] + ".img?size=thumb";
			else
				img.src = "/products/" + itemNumbers[i] + ".img?size=thumb";
			img.title = itemNames[i] + " [" + itemNumbers[i] + "] ";
			img.onmousedown = new Function("floatIndex(" + i + "); return false;");
			img.onmousemove = function handleMove(event) { moveFloatingImg(event); return false; };
			img.onmouseup = function handleUp(event) { releaseImage(event); };
			searchResults.appendChild(img);
		}
	}
	else
		searchResults.innerHTML = "Sorry, there are no products matching your search.";
	
	searchResults.style.display = "block";
	loading.style.display = "none";
}


// starts the drag process for images in the searchResults container
function floatIndex(ind) {
	if (ind >= itemNumbers.length)
		return;
	
	floatName = itemNames[ind];
	floatNum = itemNumbers[ind];
	floatSource = document.getElementById('img_' + ind);
	movingItem = false;
}

// starts the drag process for images already placed on the layout
function pickUpImage(img, cell) {
	var dieType = document.getElementById('layoutChoice').options[document.getElementById('layoutChoice').options.selectedIndex].value;
	var cellIndex = cell.id.substr(cell.id.indexOf('_') + 1);
	
	switch (dieType) {
		case "2x2":
			floatName = names2x2[cellIndex];
			floatNum = numbers2x2[cellIndex];
			break;
		case "4x4":
			floatName = names4x4[cellIndex];
			floatNum = numbers4x4[cellIndex];
			break;
		case "4x8":
			floatName = names4x8[cellIndex];
			floatNum = numbers4x8[cellIndex];
			break;
		case "BDR":
			floatName = namesBDR[cellIndex];
			floatNum = numbersBDR[cellIndex];
			break;
	}
	floatSource = img;
	sourceCell = cell;
	movingItem = false;
}

// drops any image
function releaseImage(evt) {
	evt = evt || window.event;
	var x = evt.pageX;
	var y = evt.pageY;
	if (!x) x = evt.x;
	if (!y) y = evt.y;

	dropImage(x, y, floatName, floatNum);
	
	floatName = "";
	floatNum = "";
	floatSource = null;
	sourceCell = null;
	var floatEl = document.getElementById('floatingImg');
	floatEl.style.display = "none";
	movingItem = false;
}

function moveFloatingImg(evt) {
	evt = evt || window.event;
	var x = evt.pageX;
	var y = evt.pageY;
	if (!x) x = evt.x;
	if (!y) y = evt.y;

	var floatEl = document.getElementById('floatingImg');
	
	if (evt && floatName != "" && floatNum != "") {
		if (!movingItem) {
			var dieType = document.getElementById('layoutChoice').options[document.getElementById('layoutChoice').options.selectedIndex].value;
			if (dieType == "BDR")
				floatEl.src = "/products/" + floatNum + ".img?size=thumb";
			else
				floatEl.src = "/products/" + floatNum + ".img?size=thumb";
			
			var xy = getXY(floatSource);
			
			// if image is containted within searchResults
			if (floatSource && floatSource.id.substr(0, 3) == "img" && navigator.appName.indexOf("Opera") == -1)
				xy[0] -= document.getElementById('searchResults').scrollLeft;
			
			itemOffsetX = x - xy[0];
			itemOffsetY = y - xy[1];
			floatEl.style.display = "inline";
			movingItem = true;
		}
		
		var newLeft = x - itemOffsetX;
		var newTop = y - itemOffsetY;
		floatEl.style.left = String(newLeft) + "px";
		floatEl.style.top = String(newTop) + "px";
	}
}

function getXY(el) {
	var xy = new Array(0, 0);
	while (el) {
		xy[0] += el.offsetLeft;
		xy[1] += el.offsetTop;
		el = el.offsetParent;
	}
	return xy;
}


function dropImage(x, y, imgName, imgNum) {
	var dieType = document.getElementById('layoutChoice').options[document.getElementById('layoutChoice').options.selectedIndex].value;
	var i;
	var num;
	var size;
	
	switch(dieType) {
		case "2x2":
			num = 24;
			size = "thumb";
			if (sourceCell) sourceCell.innerHTML = "2x2";
			break;
		case "4x4":
			num = 6;
			size = "preview";
			if (sourceCell) sourceCell.innerHTML = "4x4";
			break;
		case "4x8":
			num = 3;
			size = "preview";
			if (sourceCell) sourceCell.innerHTML = "4x8";
			break;
		case "BDR":
			num = 3;
			size = "zoom";
			if (sourceCell) sourceCell.innerHTML = "Border die";
			break;
	}
	
	for (i=0; i<num; i++) {
		var el = document.getElementById(dieType+'_'+i);
		if (el) {
			var xy = getXY(el);
			
			// in ie if you're scrolled down at all, the drop doesn't work!
			if (navigator.appName.indexOf("Internet Explorer") > -1) { // IE in Strict mode
				xy[0] -= document.documentElement.scrollLeft;
				xy[1] -= document.documentElement.scrollTop;
			}	
			
			if (x >= xy[0] && y >= xy[1] && x <= xy[0] + el.offsetWidth && y <= xy[1] + el.offsetHeight) {
				var cellIndex = el.id.substr(el.id.indexOf('_') + 1);
				switch(dieType) {
					case "2x2":
						names2x2[cellIndex] = imgName;
						numbers2x2[cellIndex] = imgNum;
						break;
					case "4x4":
						names4x4[cellIndex] = imgName;
						numbers4x4[cellIndex] = imgNum;
						break;
					case "4x8":
						names4x8[cellIndex] = imgName;
						numbers4x8[cellIndex] = imgNum;
						break;
					case "BDR":
						namesBDR[cellIndex] = imgName;
						numbersBDR[cellIndex] = imgNum;
						break;
				}
				el.innerHTML = "";
				//var img = document.createElement("IMG");
				var img = new Image()
				if (dieType == "BDR")
					img.src = "/products/" + imgNum + ".img?size=" + size;
				else
					img.src = "/products/" + imgNum + ".img?size=" + size;
				img.id = "lay_" + cellIndex;
				img.title = imgName + " [" + imgNum + "] ";
				// resize image to fit in the cell
				var cellWidth = el.offsetWidth;
				var cellHeight = el.offsetHeight;
				var imgW = img.width;
				var imgH = img.height;
				var newWidth = imgW;
				var newHeight = imgH;
				if (imgW > 0.8*cellWidth || imgH > 0.8*cellHeight) {
					var rat = imgW / cellWidth;
					if (rat > (imgH / cellHeight)) {
						newWidth = Math.round(0.8 * cellWidth);
						rat = imgW / imgH;
						newHeight = Math.round(newWidth / rat);
					}
					else {
						newHeight = Math.round(0.8 * cellHeight);
						rat = imgH / imgW;
						newWidth = Math.round(newHeight / rat);
					}
					img.style.width = newWidth + "px";
					img.style.height = newHeight + "px";
				}
				img.onmousedown = function () { pickUpImage(this, el); return false; };
				img.onmousemove = function handleMove(event) { moveFloatingImg(event); return false; };
				img.onmouseup = function handleUp(event) { releaseImage(event); };
				el.appendChild(img);
				break;
			}
		}
	}
}


function printLayout() {
	var dieType = document.getElementById('layoutChoice').options[document.getElementById('layoutChoice').options.selectedIndex].value;
	var frm = document.getElementById('postToPdf');
	var inp;
	var num;
	var i;
	
	switch(dieType) {
		case "2x2":
			num = 24;
			break;
		case "4x4":
			num = 6;
			break;
		case "4x8":
			num = 3;
			break;
		case "BDR":
			num = 3;
			break;
	}
	
	frm.innerHTML = "";
	for (i=0; i<num; i++) {
		inp = document.createElement("INPUT");
		inp.type = "hidden";
		inp.name = "num" + dieType + "_" + i;
		inp.id = "num" + dieType + "_" + i;
		if (document.getElementById('lay_' + i)) {
			switch (dieType) {
				case "2x2":
					inp.value = numbers2x2[i];
					break;
				case "4x4":
					inp.value = numbers4x4[i];
					break;
				case "4x8":
					inp.value = numbers4x8[i];
					break;
				case "BDR":
					inp.value = numbersBDR[i];
					break;
			}
		}
		else
			inp.value = "";
		frm.appendChild(inp);
	}
	inp = document.createElement("INPUT");
	inp.type = "hidden";
	inp.name = "dieType";
	inp.value = dieType;
	frm.appendChild(inp);
	
	frm.submit();
}