// Modal Box for sidebar

// MovieMountain Tooltip
var MMToolTip = function (id, title) {
	this.id = id;
	this.title = decodeURIComponent(title);
	this.html = "<table class=\"toolTip\"><tr><td valign=\"top\"><h3 class=\"title\">" + this.title + "</h3><img src=\"http://images.freyacomm.com/ShopKeeper/products/ximages/"+this.id+"xf.jpg\" border=\"0\" width=\"200\" height=\"285\" class=\"cover\" title=\"" + this.title + "\"></td></tr></table>";
}

// AEBN Tooltip
var AEBNToolTip = function (html) {
	this.html = "<table class=\"toolTip aebn\"><tr><td valign=\"top\">"+decodeURIComponent(html)+"</table>";
}

// AEBN Tooltip Type 2
var AEBNToolTip = function (id, title) {
	this.id = id;
	this.title = decodeURIComponent(title);
	this.html = "<table class=\"toolTip\"><tr><td valign=\"top\"><h3 class=\"title\">" + this.title + "</h3><img src=\"http://pic.aebn.net/Stream/Movie/Boxcovers/a"+this.id+"_160w.jpg\" border=\"0\" width=\"160\" class=\"cover\" title=\"" + this.title + "\"></td></tr></table>";
}

var whoFiredWho = function () {
	//Get The Element who fired the event
	$(document.body).each(function (item, index, array) {
		item.addEvent("mousedown", function (e) { 
			for ( i in e.target ) alert(i);
		})
	});
}

window.addEvent("load", function () {
	
	//Load the tooltip background image in memory by simply creating an image object
	var toolTipImg = new Image();
	toolTipImg.src = "includes/images/sidebar/tooltip_bg.gif";
	
	//Again, load a loading image in memory for imitating an AJAX request while actual box cover loads
	var loaderImg = new Image();
	loaderImg.src = "includes/images/sidebar/loader_img.gif";		
	
	//Create Element for the Modal Box
	var myModalBox = new Element('div', {
		'id': 	'modalBox',
		'html': 	'Click me!',
		'styles': {
			'position': 'absolute',
			'display': 'block',
			'border': '0px solid black',
			'z-index': 5,
			'width': '292px',
			'height' : '363px',
			'background' : 'transparent url(includes/images/sidebar/tooltip_bg.gif) 0 0 no-repeat scroll'
		}
	});
	
	$$("a[modalBox^='{\'enabled']").each( function (element) {
	

		//Makes sure that positioning the new popup will be relative to the ANCHOR LINK
		element.getParent().setStyle('position','relative');
		
		var highlight_color = '#eeeeee';
		var highlight_prevColor = element.getParent().getStyle('background-color');
		
		element.addEvent("mouseover", function () {
			
			//Highlight List Item
			element.getParent().setStyles({'background-color': highlight_color});
			
			//Get Attributes and deserialize it into JSON format
			var mbAttribs = JSON.decode(element.getAttribute('modalBox'));
			
			//Create a new Tooltip
			if(mbAttribs.type == "MovieMountain")
			{
				var toolTip = new MMToolTip(mbAttribs.id, mbAttribs.title);
			}
			else {
				var toolTip = new AEBNToolTip(mbAttribs.id, mbAttribs.title);
			}
			
			//Insert HTML inside myModelBox
			myModalBox.set('html', toolTip.html);
			
			//Show PopUp
			myModalBox.inject(element, 'before');
			
			//Reposition the popUp
			myModalBox.setStyles({ 'top': -((myModalBox.getSize().y/2)-12), 'left' : -(myModalBox.getSize().x) });

		});
		
		element.addEvent("mouseout", function () {
			
			//Highlight List Item
			element.getParent().setStyles({'background-color': highlight_prevColor});
			
			//Delete ModalBox
			myModalBox.dispose();
			
		});
	});
});