var popupPreloadImage = new Image();
popupPreloadImage.src = 'http://store.volusion.com/v/popup/loading.gif';
var lastPopupElementClicked = null;
function hide_popup() {
	var popupElement = document.getElementById('popup-wrapper');
	popupElement.style.display = 'none';

	if (lastPopupElementClicked) {
		lastPopupElementClicked.src = lastPopupElementClicked.src.replace('hide-button.gif', 'show-button.gif');
		lastPopupElementClicked = null;
	}
}
function popup_create_td(table, newRow, tdClass, tdID, imgSRC, imgID, hidePopup_onClick) {
	if (newRow) {
		var tr = document.createElement('tr');
	}
	else {
		var tr = table.getElementsByTagName('tr');
		tr = tr[tr.length - 1];
	}
	var td = document.createElement('td');
	if (tdID) {
		td.id = tdID;
	}
	if (tdClass) {
		td.className = tdClass;
	}
	if (imgSRC || imgID) {
		var img = document.createElement('img');
		img.alt = '';
		if (imgSRC) {
			img.src = imgSRC;
		}
		if (imgID) {
			img.id = imgID;
		}
		td.appendChild(img);
	}
	if (hidePopup_onClick) {
		td.onclick = hidePopup_onClick;
	}
	tr.appendChild(td);
	if (newRow) {
		table.appendChild(tr);
	}
}
function show_popup(element, src, cached) {
	var popupElement = document.getElementById('popup-wrapper');
	if (!popupElement) {
		var table = document.createElement('table');
		table.id = 'popup-wrapper';
		table.className = 'wrapper';
		table.style.display = 'none';
		
		var tbody = document.createElement('tbody');
		table.appendChild(tbody);
		
		popup_create_td(tbody, true, 'top-left', '', 'http://store.volusion.com/v/popup/top-left.png');
		popup_create_td(tbody, false, 'side-top', '', 'http://store.volusion.com/v/popup/top-arrow.png', 'top-arrow');
		popup_create_td(tbody, false, 'top-right', '', 'http://store.volusion.com/v/popup/top-right.png', '', hide_popup);
		popup_create_td(tbody, true, 'side-left');
		popup_create_td(tbody, false, '', 'popup-content', '', 'popup-image');
		popup_create_td(tbody, false, 'side-right');
		popup_create_td(tbody, true, 'bottom-left');
		popup_create_td(tbody, false, 'side-bottom');
		popup_create_td(tbody, false, 'bottom-right');

		document.body.appendChild(table);
		popupElement = document.getElementById('popup-wrapper');
	}
		
	if (!cached) {
		if (lastPopupElementClicked == element) {
			hide_popup();
			return;
		}
		hide_popup();

		v$('popup-image').src = popupPreloadImage.src;
		v$('popup-content').style.backgroundColor = '#ffffff';
		var image = new Image();
		image.onload = function(event) {
			show_popup(element, src, true);
		}
		image.src = src;
	}
	else {
		v$('popup-image').src = src;
		v$('popup-content').style.backgroundColor = '';
	}

	var topArrow = document.getElementById('top-arrow');
	
	var coord = Coordinates.topLeftOffset(element);
	var dimensions = {'width':element.offsetWidth, 'height':element.offsetHeight};
	var docWidth = document.documentElement.clientWidth;
	var docHeight = document.documentElement.clientHeight;
	var elementMidPoint = parseInt(coord.x + (dimensions.width / 2));
	var diff = 0;

	popupElement.style.position = 'absolute';
	popupElement.style.display = 'block';
	
//	popupElement.style.width = '';

	popupElementDimensions = {'width':popupElement.offsetWidth, 'height':popupElement.offsetHeight};
	popupElement.style.top = coord.y + dimensions.height + 'px';
	popupElement.style.left = parseInt(elementMidPoint - (popupElementDimensions.width / 2)) + 'px';

//	popupElement.style.width = popupElementDimensions.width + 'px';
	
	topArrow.style.left = (popupElementDimensions.width / 2) - popupElement.getElementsByTagName('td')[0].offsetWidth - (topArrow.offsetWidth / 2) + 'px';

	diff = docWidth - (parseInt(popupElement.style.left) + popupElementDimensions.width + 10);
	if (diff < 0) {
		topArrow.style.left = parseInt(topArrow.style.left) + Math.abs(diff) + 'px';
		popupElement.style.left = parseInt(popupElement.style.left) - Math.abs(diff) + 'px';
	}
	diff = parseInt(popupElement.style.left) - 10;
	if (diff < 0) {
		topArrow.style.left = parseInt(topArrow.style.left) - Math.abs(diff) + 'px';
		popupElement.style.left = parseInt(popupElement.style.left) + Math.abs(diff) + 'px';
	}

	if (!document.all) {
		topArrow.style.left = parseInt(topArrow.style.left) + topArrow.offsetWidth + 'px';
	}

	topArrow.style.position = 'absolute';
	topArrow.style.top = '0px';

	element.src = element.src.replace('show-button.gif', 'hide-button.gif');
	lastPopupElementClicked = element;
}


																									//COORDINATES                                                                                                           
var Coordinates = {
	create : function(x, y) {
		return new Coordinate(x, y);
	},

	_offset : function(element) {
		return this.create(element.offsetLeft, element.offsetTop);
	},

	topLeftOffset : function(element) {
		var offset = this._offset(element);
		var parent = element.offsetParent;
		while (parent) {
			offset = offset.plus(this._offset(parent));
			parent = parent.offsetParent;
		}
		delete(parent);
		return offset;
	},

	bottomRightOffset : function(element, topLeftOffset) {
		if (topLeftOffset) return topLeftOffset.plus(this.create(element.offsetWidth, element.offsetHeight));
		return this.topLeftOffset(element).plus(this.create(element.offsetWidth, element.offsetHeight));
	},
	
	relativeOffset : function(element) {
		var x = parseInt(element.style["left"]);
		var y = parseInt(element.style["top"]);
		x = isNaN(x) ? 0 : x;
		y = isNaN(y) ? 0 : y;
		return this.create(x, y);
	},

	mouseOffset : function(event) {
		if (event.pageX >= 0 || event.pageX < 0) {
			return this.create(event.pageX, event.pageY);
		} else if (event.clientX >= 0 || event.clientX < 0) {
			return this.create(event.clientX, event.clientY).plus(this.scrollOffset());
		}
	},
	
	scrollOffset : function() {
		if (window.pageXOffset) {
			return this.create(window.pageXOffset, window.pageYOffset);
		} else if (document.documentElement) {
			return this.create(
					document.body.scrollLeft + document.documentElement.scrollLeft, 
					document.body.scrollTop + document.documentElement.scrollTop);
		} else if (document.body.scrollLeft >= 0) {
			return this.create(document.body.scrollLeft, document.body.scrollTop);
		} else {
			return this.create(0, 0);
		}
	}
}

																									//COORDINATE                                                                                                           
function Coordinate(x, y) {
	isNaN(x) ? this.x = 0 : this.x = x;
	isNaN(y) ? this.y = 0 : this.y = y;
}

Coordinate.prototype = {
	reposition : function(item) {
		item.style["left"] = this.x + "px";
		item.style["top"] = this.y + "px";
	}, 
	
	plus : function(that, yvalue) {
		if (isNaN(yvalue)) return Coordinates.create(this.x + that.x, this.y + that.y);
		return Coordinates.create(this.x + that, this.y + yvalue);
	},

	minus : function(that, yvalue) {
		if (isNaN(yvalue)) return Coordinates.create(this.x - that.x, this.y - that.y);
		return Coordinates.create(this.x - that, this.y - yvalue);
	},
	
	toString : function() {
		return "(" + this.x + ", " + this.y + ")";
	},
	
	inside : function(item) {
		var topLeft = Coordinates.topLeftOffset(item);
		var bottomRight = Coordinates.bottomRightOffset(item, topLeft);
		var height = item.offsetHeight;
		var whereTo = null;
		if (this.x >= topLeft.x && this.x <= bottomRight.x) {
			if (this.y >= topLeft.y && this.y < (topLeft.y+height/2)) {
				whereTo = "before"; // When in top half of element, return to insert before
			}
			else if (this.y >= (topLeft.y+height/2) && this.y <= bottomRight.y) {
				whereTo = "after"; // When in bottom half of element, return to insert after
			}
		}
		delete(topLeft);
		delete(bottomRight);
		return whereTo;
	}
}
function v$(id) {
	return document.getElementById(id);
}