/*  File: jquery.mediawiki.gallery.fullsize.js
 *
 *	When clicking on an image in mediawiki pop up a Boxy dialogue box showing the image  
 *  at full-size or scaled down to browser size, if it's less than the full image size.
 *  If the image is part of a <gallery> then show gallery browser controls.
 *
 *  Requirements: 
 *	- Boxy must be installed.
 *  - Uses the styles in mediawiki.gallery.fullsize.css
 *
 *  Created by: Zinovi Tauber - The Game Net - zinovi@thegamenet.com
 *  Dec 2009.
 */

;(function () {
	// functions to display and navigate the images.
	$.extend($.fn, {
		// Assuming an initial window with a <p>loading</p> style message, remove it and display the image once loaded.
		showBoxyImage: function(imgName)
		{
			// Load the css images.
			$(new Image()).attr({
				src: "/skins/aionwiki/images/nav-previous-arrow.png",
				src: "/skins/aionwiki/images/nav-previous-arrow-active.png",
				src: "/skins/aionwiki/images/nav-previous-arrow-hover.png",
				src: "/skins/aionwiki/images/nav-next-arrow.png",
				src: "/skins/aionwiki/images/nav-next-arrow-hover.png",
				src: "/skins/aionwiki/images/nav-next-arrow-active.png"
			});

			// Give enough space for the title.
			sbip.bic = $("#boxyImgCenter");
			sbip.maxH = 0;
			sbip.maxW = sbip.bic.prev().children("h2").width() + 30;

			
			sbip.boxyImg = $(new Image()).attr({
				onLoad: "$.fn.BoxyImgOnLoad(); return true;",
				src: imgName
			});

			return true;
		},
		
		BoxyImgOnLoad: function() {
			sbip.bic.find('p').remove();

			sbip.bic.parent().css({"background-color": "transparent"});
			sbip.bic.parents(".boxy-wrapper").css("display", "block");
   		 	sbip.bic.before($(document.createElement("div")).attr('id','boxyImgBgDiv').addClass('showBoxyFullsizeBg')); 
 			$.fn.showBoxyImageLoaded();
		},

		// Accessory called for the gallery.  Need to set the new event source and show the image once loaded.
		showBoxyImageEx: function(imgName, isNextSrc)
		{
			(isNextSrc)?sbip.eventSrc=sbip.nextUrlSrc:sbip.eventSrc=sbip.prevUrlSrc;
			sbip.boxyImg = $(new Image()).attr({
				onLoad: "$.fn.showBoxyImageLoaded();",
				src: imgName
			});
	
			return true;
		},
		
		// Figure out the best fullsize size of the image, show it and optional navigation controls.
		showBoxyImageLoaded: function()
		{
			// Check if we are gallery browsing.
			$.fn.showBoxyGalleryControls();	
			
			// Do not display an image larger than the browser size.
			var bh = document.documentElement.clientHeight;
			var bw = document.body.clientWidth;
			var nw = ow = sbip.boxyImg.attr('width');
			var nh = oh = sbip.boxyImg.attr('height');
			if(nw > bw-30)
			{
				nw = bw - 30;
				nh = oh * (nw / ow);
			}
			if(nh > bh-60)
			{
				nh = bh - 60;
				nw = ow * (nh / oh);
			}
			if(nh > sbip.maxH) 
				sbip.maxH = nh;
			if(nw > sbip.maxW)
				sbip.maxW = nw;

			var fullsizeImg = $(document.createElement('img')).attr({
				src: sbip.boxyImg.attr('src'),
				onClick: 'Boxy.get(this).hideAndUnload(); return false;',
				width: nw,
				height: nh,
				id: "fullsizeImg"
			}).css("margin-top", ((sbip.maxH-nh)/2)+"px").css("filter", "alpha(opacity=100)");
			sbip.bic.append(fullsizeImg);
			
			if(boxyWidth=parseInt($(".showBoxyFullsizePrev").css("width")))
				boxyWidth = boxyWidth * 2 + sbip.maxW;
			else
				boxyWidth = sbip.maxW;
			sbip.bic.width(boxyWidth).height(sbip.maxH);

			// This is really a hack for firefox 3.0 which has a problem with refresh for auto positioning.
			sbip.bic.prev().width(boxyWidth).height(sbip.maxH);
			
			navbuttonHeight = parseInt($(".showBoxyFullsizePrev").css("height"));
			$(".showBoxyFullsizePrev").css("margin-top", (sbip.maxH / 2 - navbuttonHeight/2) + "px");
			$(".showBoxyFullsizeNext").css("margin-top", (sbip.maxH / 2 - navbuttonHeight/2) + "px");
			sbi.boxyInst.setTitle('Viewing ' + fullsizeImg.attr('src').substr(fullsizeImg.attr('src').lastIndexOf('/')+1)).center();
			
			return true;
		},
		
		// Show the image gallery navigation controls and figure out the next image to display.
		showBoxyGalleryControls: function() 
		{
			// Add controls only if we browsing a gallary with more than one picture.
			if(sbip.eventSrc.parents("table.gallery").find("img").length > 1)
			{					
				// Find the neighbor of the TD.
				nextUrlSrc = sbip.eventSrc.parents(".gallerybox").parent().next().find("img");
				nextUrl = nextUrlSrc.attr("src");
				if(!nextUrl)
				{
					// Find the neighbor of the TR.
					nextUrlSrc = sbip.eventSrc.parents(".gallerybox").parent().parent().next().find("img:first");
					nextUrl = nextUrlSrc.attr("src");
					if(!nextUrl)
					{
						// Get the first image in the gallery - must exist!
						nextUrlSrc = sbip.eventSrc.parents("table.gallery").find("img:first");
						nextUrl = nextUrlSrc.attr("src");
					}
				}
				nextUrl = $.fn.fixThumbUrl(nextUrl);
				sbip.nextUrlSrc = nextUrlSrc;
				
				prevUrlSrc = sbip.eventSrc.parents(".gallerybox").parent().prev().find("img");
				prevUrl = prevUrlSrc.attr("src");
				if(!prevUrl)
				{
					prevUrlSrc = sbip.eventSrc.parents(".gallerybox").parent().parent().prev().find("img:last");
					prevUrl = prevUrlSrc.attr("src");						
					if(!prevUrl)
					{
						prevUrlSrc = sbip.eventSrc.parents("table.gallery").find("img:last");
						prevUrl = prevUrlSrc.attr("src");
					}
				}
				prevUrl = $.fn.fixThumbUrl(prevUrl);
				sbip.prevUrlSrc = prevUrlSrc;
				
				// Add the forward and back buttons.
				prevImg = document.createElement("img");
				$(prevImg).attr({
					src: "/skins/aionwiki/images/spacer.png",
					className: "showBoxyFullsizePrev",
					onClick: "$.fn.showBoxyImageEx('"+ prevUrl +"', false); return true;"
				});
				nextImg = document.createElement("img");
				$(nextImg).attr({
					src: "/skins/aionwiki/images/spacer.png",
					className: "showBoxyFullsizeNext",
					onClick: "$.fn.showBoxyImageEx('"+ nextUrl +"',true); return true;"
				});
				sbip.bic.find("img").remove();
				sbip.bic.append(prevImg).append(nextImg);
			}
		},
		
		// take a thumb url and convert to fullsize image path.
		fixThumbUrl: function(thumbUrl)
		{
			return thumbUrl.replace(/\/thumb/, "").replace(/\/[0-9]+px-.*$/,"");
		}

	});
	
	// Set some global showBoxyImage class properties.
	var sbi = $.fn.showBoxyImage;
	var sbip = sbi.properties = {
		maxW: 0,
		maxH: 0
	};
})();	


$(function() {
	// For each image that is in a link of class "image" show the shoBoxyImage JQuery control, displaying a loading image by default. 
	$('a.image img').click(function (e) {
		// If we are linking to an internal image then Boxy!
		var fileLink = /^\/File:.+\.?[png|jpg|jpeg|gif|svg]$/;
		if(fileLink.test($(this).parent().attr("href")))
		{
			var imgName = $.fn.fixThumbUrl($(this).attr("src"));
			$.fn.showBoxyImage.boxyInst = new Boxy('<center id="boxyImgCenter" style="padding:0;"><p class="loadingNote">Loading the image...</p></center>', 
					 {title:'Viewing ' + imgName.substr(imgName.lastIndexOf('/')+1), closeable:true, modal:true, closeText:'<b class="closebox">&nbsp;&Chi;&nbsp;<b>'});
			$.fn.showBoxyImage.properties.eventSrc = $(e.target);
			$.fn.showBoxyImage(imgName);
		}
		
		return false; 	// Don't process the link!
	});
});