// This code created by Juan Garcia. www.jrgarcia.net
(function($) {
	$.fn.box = function(){		
		this.bind('mouseenter', box_mouse);
		this.bind('click', box_initialize);
		enable_keyboard_navigation();
		function box_initialize(){
			box_open(this); // This, in this context, refer to object (link) which the user have clicked
			this.blur();
			return false; // Avoid the browser following the link
		}
		function box_mouse(){
			var box_gallery = $(this).parent().parent().find('li:first'); // the big picture
			var box_add = $(this).clone(); // the switched out picture with span
			var box_del = $(box_gallery).find('a'); // the object tht gets the boot
			var box_title = $(box_add).find('span.prj-long').text();
			
			var box_long = $(this).parent().parent().parent().find('h3'); // the h3 title that is switched
			
			if ($(box_add).attr('title') != $(box_del).attr('title') && $(box_add).hasClass('prj-on') == false){
				//  switch the title;
				(box_long).html(box_title + ' ');
				
				// switches the img for the bigger thumb.
				//(box_add).find('.prj-btn').attr('src', box_bigthumb);
				$(box_del).fadeOut('fast', function(){ // removes the current item.
					$(box_del).remove();
				});
				$(box_add).addClass('prj-on'); // puts a marker in so that the big thumb doesn't get added too.
				$(box_gallery).append(box_add); //  adds the selected object to the bigger thumb viewer
				// makes the added object invisible.
				//$(box_add).css({
					//'display': 'none'
				//});
				$(box_add).hide();
				$(box_add).fadeIn('fast'); // fades in the mess.
				box_add.box();
			}
			return false;
		}
		
		function box_open(e){
			var box_picture = e.getAttribute('href');
			var box_title = e.getAttribute('title');
			var box_date = Date.parse($(e).find('.prj-date').text()).toString("MMMM d, yyyy");
			var box_desc = $(e).find('.prj-desc').html();
			
			$('body').append('<div id="pb-overlay"></div><div id="pb-projectboxwrapper"><div id="pb-projectbox"><div id="pb-exit"></div><div id="pb-imgcon"><img id="pb-image"></div><div id="pb-projectboxdata"><h1>' + box_title + '</h1><h2>' + box_date + '</h2><p>' + box_desc + '</p></div><div id="pb-projectexit"><p>click anywhere or press any key to exit</p></div></div></div>');
			
			$('#pb-projectboxdata').linkify();
			
			$('#pb-overlay, #pb-projectboxwrapper, #pb-exit').bind('mouseup', function(){
				box_finish();
				return false;
			});
			//$('#pb-projectboxdata a').
			
			var arrPageSizes = ___getPageSize();
			$('#pb-overlay').css({
				width: arrPageSizes[0],
				height: arrPageSizes[1]
			});
			var arrPageScroll = ___getPageScroll();
			
			//alert(arrPageSizes);
			
			// Calculate top and left offset for the jquery-lightbox div object and show it
			$('#pb-projectboxwrapper').css({
				top: arrPageScroll[1] + (arrPageSizes[3] / 30),
				left: arrPageScroll[0]
			});
			
			// hides the info div to fade after the image loads
			$('#pb-imgcon, #pb-projectboxdata, #pb-projectexit').css({
				opacity: 0
			});
			$('#pb-overlay').fadeTo('fast', .7); // fades in the overlay
			// Image preload process
			
			var objImagePreloader = new Image();
			objImagePreloader.onload = function() {
				$('#pb-image').attr('src', box_picture);
				box_resize(objImagePreloader.width,objImagePreloader.height);
				objImagePreloader.onload=function(){};
			};
			objImagePreloader.src = box_picture;
			
			// If window was resized, calculate the new overlay dimensions
			$(window).resize(function() {
				// Get page sizes
				$('#pb-overlay').css({
					width:0,
					height:0
				});
				var arrPageSizes = ___getPageSize();
				// Style overlay and show it
				$('#pb-overlay').css({
					width: arrPageSizes[0],
					height: arrPageSizes[1]
				});
				// Get page scroll
				var arrPageScroll = ___getPageScroll();
				// Calculate top and left offset for the jquery-lightbox div object and show it
				$('#pb-projectboxwrapper').css({
					top: arrPageScroll[1] + (arrPageSizes[3] / 10),
					left: arrPageScroll[0]
				});
			});
		}
			
		function box_resize(intImageWidth,intImageHeight) {
			// Get current width and height
			var intCurrentWidth = $('#pb-projectboxwrapper').width();
			var intCurrentHeight = $('#pb-projectboxwrapper').height();
			var padbig = parseInt($('#pb-image').css("margin-top"));
			var padsmall = parseInt($('#pb-image').css("margin-right"));
			var infowidth = parseInt($('#pb-projectboxdata').css("width"));
			var infoheight = parseInt($('#pb-projectboxdata').css("height"));
			// Get the width and height of the selected image plus the padding
			var intWidth = padbig + intImageWidth + padsmall + infowidth + padbig; // Plus the image´s width and the left and right padding value
			var intHeight = padbig + intImageHeight + padbig; // Plus the image´s height and the left and right padding value
			// Diferences
			var intDiffW = intCurrentWidth - intWidth;
			var intDiffH = intCurrentHeight - intHeight;
			// Perfomance the effect
			$('#pb-imgcon').css({
				background: $('#pb-imgcon').css("background-color")
			})
			$('#pb-projectbox').animate({
				width: intWidth,
				height: intHeight
			}, 500, function(){
				var imght = $('#pb-imgcon').height();
				$('#pb-projectboxdata').height(imght - 30);
				$('#pb-projectboxwrapper').height(imght);
				$('#pb-imgcon, #pb-projectboxdata, #pb-projectexit').fadeTo('fast', 1);
			});
		};
		
		function enable_keyboard_navigation() {
			$(document).keydown(function(objEvent) {
				box_finish();
			});
		}	
		///////////////////////////////////////////////
		function box_finish() {
			$('#pb-projectboxwrapper').fadeOut('fast', function(){
				$('#pb-projectboxwrapper').remove();
			});
			$('#pb-overlay').fadeOut(function(){
				$('#pb-overlay').remove();
			});
			// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
			$('embed, object, select').css({ 'visibility' : 'visible' });
		};
		function ___getPageSize() {
			var xScroll, yScroll;
			if (window.innerHeight && window.scrollMaxY) {
				xScroll = window.innerWidth + window.scrollMaxX;
				yScroll = window.innerHeight + window.scrollMaxY;
			} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
				xScroll = document.body.scrollWidth;
				yScroll = document.body.scrollHeight;
			} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
				xScroll = document.body.offsetWidth;
				yScroll = document.body.offsetHeight;
			}
			
			var windowWidth, windowHeight;
			if (self.innerHeight) {	// all except Explorer
				if(document.documentElement.clientWidth){
					windowWidth = document.documentElement.clientWidth;
				} else {
					windowWidth = self.innerWidth;
				}
				windowHeight = self.innerHeight;
			} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
				windowWidth = document.documentElement.clientWidth;
				windowHeight = document.documentElement.clientHeight;
			} else if (document.body) { // other Explorers
				windowWidth = document.body.clientWidth;
				windowHeight = document.body.clientHeight;
			}
			// for small pages with total height less then height of the viewport
			if(yScroll < windowHeight){
				pageHeight = windowHeight;
			} else {
				pageHeight = yScroll;
			}
			// for small pages with total width less then width of the viewport
			if(xScroll < windowWidth){
				pageWidth = xScroll;
			} else {
				pageWidth = windowWidth;
			}
			arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
			return arrayPageSize;
		};
		/**
		/ THIRD FUNCTION
		* getPageScroll() by quirksmode.com
		*
		* @return Array Return an array with x,y page scroll values.
		*/
		function ___getPageScroll() {
			var xScroll, yScroll;
			if (self.pageYOffset) {
				yScroll = self.pageYOffset;
				xScroll = self.pageXOffset;
			} else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
				yScroll = document.documentElement.scrollTop;
				xScroll = document.documentElement.scrollLeft;
			} else if (document.body) {// all other Explorers
				yScroll = document.body.scrollTop;
				xScroll = document.body.scrollLeft;	
			}
			arrayPageScroll = new Array(xScroll,yScroll);
			return arrayPageScroll;
		};
	};
})(jQuery);