var cmp = {};

cmp.ItemPopupManager = function(container, style) {
	this.container = container;
	this.cache = {};
	this.style = style;
	
	this.init();
};

cmp.ItemPopupManager.prototype = {

	init: function() {
		var dropdowns = document.getElementsByTagName('select');
		for (var i = 0; i < dropdowns.length;  ++i) {
			dropdowns[i].style.zIndex = "1";
		}
		
		// preload images used by popups
		var tttop = new Image();
		tttop.src = "/img/cmarketplace/tooltip_top.gif";
		
		var ttbtm = new Image();
		ttbtm.src = "/img/cmarketplace/tooltip_btm.gif";
		
		var ptrleft = new Image();
		ptrleft.src = "/img/cmarketplace/tooltip_pointer_left_top.gif";
		
		var ptrright = new Image();
		ptrright.src = "/img/cmarketplace/tooltip_pointer_right_top.gif";
	},
	
	display: function(e) {
		var target = Event.findElement(e, 'a');

		if (!target) { return; }

		var itemId = target.getAttribute("itemId") || target.itemId;
		var popup = this.cache[itemId];
		
		if (!popup) {
			popup = new cmp.ItemPopup(this, this.container, itemId, target, 251);
			this.cache[itemId] = popup;
		}
		
		popup.show(target);
	},
	
	hide: function(e) {
		var target = Event.findElement(e, 'a');

		if (!target) { return; }

		var itemId = target.getAttribute("itemId") || target.itemId;
		var popup = this.cache[itemId];
		
		if (popup) {
			popup.hide();
		}
	}, 
	
	switchStyle: function(style) {
		this.style = style;
		
		for (var name in this.cache) {
			var obj = this.cache[name];
			
			if ((obj) && (obj.switchStyle)) {
				this.cache[name].switchStyle(style);
			}
		}
	}, 
	
	registerForPopup: function(el, itemId) {
		if (el.setAttribute) {
			el.setAttribute("itemId", itemId);
		} else {
			el.itemId = itemId;
		}
		
		Event.observe(el, 'mouseover', this.display.bindAsEventListener(this), false);
		Event.observe(el, 'focus', this.display.bindAsEventListener(this), false);
		Event.observe(el, 'mouseout', this.hide.bindAsEventListener(this), false);
		Event.observe(el, 'blur', this.hide.bindAsEventListener(this), false);
	}
};

cmp.ItemPopup = Class.create();

cmp.ItemPopup.prototype = {
	initialize: function(manager, container, itemId, target, width) {
		this.manager = manager;
		this.container = container;
		this.url = "/cmarketplace/action/itemDetail";
		this.params = "view=xml&itemid=" + itemId;
	
		this.itemId = itemId;
		this.target = target;
		this.width = width;
	
		this.xml = null;
		this.content = null;
		this.pointer = null;
		this.box = null;
		this.infoelem = null;
		this.iteminfo = null;
		this.shim = null;
		
		this.showing = true;
		
		this.init();
	},
	
	show: function(target) {
		if (target) { 
			this.target = target; // changing target
		}

		if (this.content) {
			this.content.style.position = "absolute";
			
			this.updatePopup();
			this.positionContentRelativeToTarget(this.target, this.getPointerSide());		
			
			if (this.box.offsetHeight < 200) {
				this.iteminfo.style.height = "150px";
			}
	
			this.content.style.visibility = "visible";
			

			if (navigator.userAgent.indexOf("MSIE") != -1) {
				this.showShim();
			}
		}
				
		this.showing = true;
	}, 
	
	hide: function() {
		if (this.content) {
			this.content.style.visibility = "hidden";
			
			this.hideShim();		
		}
		
		this.showing = false;
	},

	init: function() {
		new Ajax.Request(this.url, {method:'post', parameters:this.params, onSuccess:this.handleUpdate.bind(this), onFailure:this.handleError.bind(this) });
	},
	
	switchStyle: function(style) {
		if (this.infoelem) {
			this.infoelem.className = style;
		}
	},

	handleUpdate: function(request) {
		this.xml = request.responseXML;
		this.buildPopup();
	},
	
	handleError: function(request) {
	},	
	
	updatePopup: function() {
		if (!this.content) {
			return;
		}
		
		var side = this.getPointerSide();
		var newptr = this.buildPointer(side);
		
		try {
			this.content.replaceChild(newptr, this.pointer);
		} catch (err) {
			this.content.removeChild(this.pointer);
			this.content.appendChild(newptr);
		}
		
		this.pointer = newptr;
		
		this.positionPointer(side, this.pointer, this.box);
	},
	
	buildPopup: function() {
		var pop = document.createElement("div");
		pop.className = "tooltip";
		pop.style.visibility = "hidden";
		
		var side = this.getPointerSide();
		
		var pointer = this.buildPointer(side);
		var box =  this.buildToolTipBox();

		this.positionPointer(side, pointer, box);
		
		pop.appendChild(pointer);
		pop.appendChild(box);

		this.content = pop;
		this.container.appendChild(pop);
		this.box = box;
		this.pointer = pointer;
		
		if (this.showing) {
			this.show();
		}
	},
	
	buildPointer: function(side) {
		var imgsrc = "/img/cmarketplace/tooltip_pointer_" + side + "_top.gif";
				
		return this.buildSpan(null, "pointer", [ this.buildImage(imgsrc, "42", "66", "") ]);
	},
	
	buildToolTipBox: function() {
		var topspan = this.buildSpan(null, "top", [ this.buildImage("/img/cmarketplace/tooltip_top.gif", "209", "7", "") ]);
		var itemname = this.buildSpan(null, "itemname", [ document.createTextNode(this.getXMLValue("name")) ]);
		var bottom = this.buildSpan(null, "bottom", [ this.buildImage("/img/cmarketplace/tooltip_btm.gif", "209", "9", "") ]);
		
		this.iteminfo = this.buildItemInfo();

		return this.buildDiv(null, "tooltipbox", [ topspan, itemname, this.iteminfo, bottom ]);
	},
	
	buildItemInfo: function() {
		var valuelabel = this.buildSpan(null, "label", [ document.createTextNode("Value: ") ]);
		var valuedata = this.buildSpan(null, "data", [ document.createTextNode(this.getXMLValue("value")) ]);

		var imgsrc = "/img/cmarketplace/" + this.itemId + "_tooltip.jpg";

		this.infoelem = this.buildDiv(null, this.manager.style, []);
		this.infoelem.appendChild(this.buildSpan(null, "itemimage", [ this.buildImage(imgsrc, "64", "64", "Item Image") ]));
		this.infoelem.appendChild(this.buildSpan(null, "itemvalue", [ valuelabel, valuedata ]));

		if (this.getXMLValue("items")) {
			this.infoelem.appendChild(this.buildSpan(null, "itempackage", [ document.createTextNode("Package: " + this.getXMLValue("items")) ]));
		}
		
		var itemdesc = this.buildDiv(null, "itemdesc", [ document.createTextNode(this.getXMLValue("description")) ]);
		
		return this.buildDiv(null, "iteminfo", [this.infoelem, itemdesc]);		
	},
	
	buildDiv: function(id, style, kids) {
		var div = document.createElement("div");
		if (id) {
			div.setAttribute("id", id);
		}
		
		if (style) {
			div.className = style;
		}
		
		if (kids) {
			for (var i = 0; i < kids.length; ++i) {
				div.appendChild(kids[i]);
			}
		}
		
		return div;
	},
	
	buildSpan: function(id, style, kids) {
		var span = document.createElement("span");
		if (id) {
			span.setAttribute("id", id);
		}
		
		if (style) {
			span.className = style;
		}
		
		if (kids) {
			for (var i = 0; i < kids.length; ++i) {
				span.appendChild(kids[i]);
			}
		}
		
		return span;
	},
	
	buildImage: function(src, width, height, alt, id, style) {
		var img = document.createElement("img");
		img.setAttribute("src", src);
		img.setAttribute("width", width);
		img.setAttribute("height", height);
		img.setAttribute("alt", alt);
		
		if (id) {
			img.setAttribute("id", id);
		}
		
		if (style) {
			img.className = style;
		}
		
		return img;
	},
	
	getXMLValue: function(nodename) {
		var nodes = this.xml.getElementsByTagName(nodename);
		
		if ((!nodes) || (nodes.length <= 0)) {
			return null;
		}
		
		if (nodes[0].textContent) {
			return nodes[0].textContent;
		}
		
		if (nodes[0].text) {
			return nodes[0].text;
		}
		
		if (nodes[0].firstChild.nodeValue) {
			return nodes[0].firstChild.nodeValue;
		}
		
		return null;
	},
	
	getPointerSide: function() {
		var rbounds = cMarketUtils.getPageX(this.container) + this.container.offsetWidth;
		var x = cMarketUtils.getPageX(this.target) + this.target.offsetWidth;
		
		if ((x + this.width) > rbounds) {
			return "right";  // pointer goes to right of content
		}
		
		return "left";  // pointer goes to left of content
	},
	
	positionPointer: function(side, pointer, box) {
		if (side == "right") { // pointer is on right of content
			pointer.style.position = "absolute";
			pointer.style.left = "205px";
			pointer.style.zIndex = "200";
			box.style.position = "absolute";
			box.style.left = "0px";
		} else {  // pointer is on left of content
			pointer.style.position = "absolute";
			pointer.style.left = "0px";
			pointer.style.zIndex = "200";
			box.style.position = "absolute";
			box.style.left = "42px";
		}
	},
	
	positionContentRelativeToTarget: function(target, ptrside) {
		if (!target) {
			return;
		}
		
		var x = cMarketUtils.getPageX(target) + target.offsetWidth;
		var y = cMarketUtils.getPageY(target) - 90; // offset for pointer

		// adjust position if pointer is on right side of content
		if (ptrside == "right") {
			x = cMarketUtils.getPageX(target) - this.width;
		}
		
		this.content.style.left = x + "px";
		this.content.style.top = y + "px"; 
	},
	
	createShim: function() {
    var shim = document.createElement("<iframe scrolling='no' frameborder='0' src='/cmarketplace/blank.jsp' style='position:absolute; top:0px; left:0px; display:none'></iframe>"); 

		shim.id = "shim_" + this.itemId;    
		shim.name = "shim_" + this.itemId;    

		// make it transparent
    shim.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
    
    return shim;
	},
	
	showShim: function() {
		if (!this.shim) {
			this.shim = this.createShim();
			this.container.appendChild(this.shim);
		}
	
		this.shim.style.position = "absolute";
		this.shim.style.display = "block";
		this.shim.style.zIndex = 50;
		this.shim.style.left = this.content.style.left;
		this.shim.style.top = this.content.style.top;
		this.shim.width = this.content.offsetWidth;
		this.shim.height = this.box.offsetHeight;
	}, 
	
	hideShim: function() {
		if (!this.shim) {
			return;
		}
		
		this.shim.style.display = "none";	
	}
	
};