var MEJ = {
	bodyClass: 			'',
	blank: 				new Image(),
	heightCache: 		{},
	polaroid: 			{
							href: 		'wp-content/themes/mej/images/picture_frame.png',
							width: 		426,
							height: 	332
	},
	maskSize: 			{
							width: 		348,
							height: 	233
	},
	isParentSelected: 	function(element)
	{
		return false;
		/* no need for this as we're not showing submenus for selected items
		var thisParentNode	= $(element)[0].parentNode;
		if ($(thisParentNode).hasClass('current_page_item')){
			return true;
		}
		*/
	},
	getAutoHeight: 		function(element)
	{
		var currHeight 	= $(element).height();
		var currOpacity	= $(element).css('opacity');
		
		$(element).css({ height: 'auto', opacity: 0});
		
		var newHeight	= $(element).height();
		
		$(element).css({ height: currHeight, opacity: currOpacity});
		
		return newHeight;
	},
	navHoverIn: 		function(element)
	{
		// don't do the hover thing if the element is selected
		if (MEJ.isParentSelected(element)){
			return true;
		}
		
		var thisUl	= $(element).find('ul');
		// jQuery has issues animating an auto height, so we use this to calculate the height first
		var autoHeight	= MEJ.getAutoHeight( $(thisUl)[0] );

		$(thisUl).stop().animate({ height: autoHeight }, 150 );
	},
	navHoverOut: 		function(element)
	{
		// don't do the hover thing if the element is selected
		if (MEJ.isParentSelected(element)){
			return true;
		}
		
		var thisUl	= $(element).find('ul');
		
		// The stop() stops any existing animations
		$(thisUl).stop().animate({ height: 0 }, 150 );
	},
	initNav: 			function()
	{
		MEJ.bodyClass	= $('body')[0].className;

		$("li.pagenav > ul > li")
		.hover(
			function () {
				MEJ.navHoverIn(this);
			},
			function () {
				MEJ.navHoverOut(this);
			}
		);
	},
	initPhoto: 			function(element)
	{
		var imgSrc			= $(element)[0].src;
		var imgParent		= $(element)[0].parentNode;
		var imgPosition		= $(element).position();
		var imgWidth		= $(element).width();
		var imgHeight		= $(element).height();
		
		var rotateAngle		= ( $(element).hasClass('home') ) ? 10.5 : -7.5;
	
		var scaleX			= imgWidth/ MEJ.maskSize.width;
		var scaleY			= imgHeight/MEJ.maskSize.height;
		
		// scale factor required to make the image fill the mask
		var scaleFactor	= Math.max(scaleX, scaleY);
		
		// create svg element
		var paper		= Raphael( imgParent , MEJ.polaroid.width, MEJ.polaroid.height);
		
		//var clientImage	= paper.image( imgSrc, (38 * scaleFactor), (48 * scaleFactor),  MEJ.maskSize.width, MEJ.maskSize.height );
		//clientImage.scale(scaleFactor, scaleFactor);
		//clientImage.rotate( rotateAngle );
		
		var rectangle	= paper.rect(38, 48, MEJ.maskSize.width, MEJ.maskSize.height, 10);
		rectangle.rotate( rotateAngle ) ;
		// add the src image as a background pattern
		rectangle.attr({fill: "url("+imgSrc+")"});
		
		rectangle[0].parentNode.setAttribute('class', 'polaroid');
		
		var bgImage		= paper.image( MEJ.polaroid.href, 0, 0,  MEJ.polaroid.width, MEJ.polaroid.height );
		bgImage.rotate(-10.5 + rotateAngle );
				
		// destroy original image
		$(element).replaceWith("<span></span>");
	},
	initPhotos: 		function()
	{
		$("img.photo").each( function(){ MEJ.initPhoto(this); });
	},
	checkForIEShitness:	function()
	{
		var shitBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
		if (shitBrowser) {
		  // get all pngs on page
		  $('img[src$=.png]').each(function() {
			 if (!this.complete) {
				this.onload = function() { MEJ.fixPng(this) };
			 } else {
				MEJ.fixPng(this);
			 }
		  });
		}
	},
	fixPng: 			function(png)
	{
		// get src
		var src = png.src;
		// set width and height
		if (!png.style.width) { png.style.width = $(png).width(); }
		if (!png.style.height) { png.style.height = $(png).height(); }
		// replace by blank image
		png.onload = function() { };
		png.src = MEJ.blank.src;
		// set filter (display original image)
		png.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
	},
	init: 				function()
	{
		MEJ.blank.src = '/wp-content/themes/mej/images/blank.gif';
		MEJ.initNav();
		MEJ.checkForIEShitness();
		//MEJ.initPhotos(); // still not ready for prime-time
	}
}

$(document).ready(function(){
	MEJ.init();
});