/**
 * @author Matthew Langley <matthew.langley@heathwallace.com>
 * @projectDescription
 * @version 0.1
 * @date
 * @notes: 
 * 		- Overlay streches to the size of the grid
 * 		- vertical offset is the vertical whitespace above the grid elements and below the start of the container above
 */
(function($){
	$.fn.buildExpandingGrid = function(opts){
		
		var opts = $.extend({
			vertical_offset: 10, //px. any padding that exsists on the top of the origional grid element
			animation_speed: 500 //milliseconds
		}, opts);
		
		return this.each(function(){ 
			var locked = false;
			var grid_container = $(this);
			var grid_element = $($(this).find('.jvsGridElement'));
			
			//turn the full width boxes into a 3 col grid
			grid_element.removeClass('contentStyleFullWidth01').addClass('contentStyleOneThird')
			//show the expand button
			grid_element.find('a.showHideLink').show();
			//hide the expandable content
			grid_element.find('div.showHideContent').hide();
			//hide the large image and show the small image
			grid_element.find('img.jvsImgBig').hide();
			grid_element.find('img.jvsImgSmall').show();
			grid_element.css('display', 'none')
			//force redraw in Opera Mac
			setTimeout(function(){
				grid_element.css('display', 'block')
			})
			
			//when the expand button is pressed
			function clickHandler(e){
				e.preventDefault();
				if (!locked) {
					// lock the functionality to prevent the user spawning multiple overlays
					locked = true;
					var current_grid_element = $(this).closest('.jvsGridElement');
					var content_wrapper = current_grid_element.find('.jvsContentWrapper');
					var current_grid_element_height = current_grid_element.height()+opts.vertical_offset;
					var current_grid_element_width = current_grid_element.width();
					//gather the content to clone
					var content = content_wrapper.clone();
					//calculate the correct position
					var offset = current_grid_element.position();
					//spawn the overlay and position it correctly
					var overlay = $('<div class="jvsExpandingGridOverlay"><div class="overlayWrapper overlayInner"><div class="overlayWrapper overlayInner02"><div class="overlayWrapper overlayInner03"><div class="overlayWrapper overlayInner04"><div class="overlayContent"></div></div></div></div></div></div>').insertAfter($(this).closest('.jvsGridElement'));
					overlay.find('*').css({opacity: 1})
					var overlay_content = overlay.find('.overlayContent').css({opacity: 0});
					overlay_content.append(content)
					
					
					var closeButton = $('<a href="#" class="jvsCloseButton">Close</a>');
					overlay_content.parent().append(closeButton);
					overlay_content.find('img.jvsImgBig, .showHideContent').show();
					overlay_content.find('img.jvsImgSmall, a.showHideLink').hide();
					overlay.css({
						top: offset.top,
						left: offset.left,
						height: current_grid_element_height,
						width : current_grid_element_width,
						opacity : 0,
						overflow: 'hidden'
					});
					overlay_content.height(overlay.height()-22);
					overlay.css({overflow: 'visible'});
					//bind functionality to close button
					$(overlay.find('.jvsCloseButton')).click(function(){
						if (locked) {
							//unlock to stop the user hitting the close button multiple times with effect
							locked = false;
							//fade the content out
							closeButton.fadeTo(opts.animation_speed, 0);
							overlay_content.fadeOut(200, function(){
								overlay.fadeTo(opts.animation_speed, 0.8, function(){;
									//animate the overlay once the callback from the hide is fired
									overlay.animate({
										top: offset.top,
										left: offset.left,
										width: current_grid_element_width,
										height: current_grid_element_height
									}, opts.animation_speed, function(){
										//fade out the overlay once the callback from the animate is fired
										overlay.fadeOut(opts.animation_speed, function(){
											overlay.remove();
										});
									});
								});
							});
							//focus for accessibility purposes
							$(current_grid_element.find('a.showHideLink')).focus();
						}
						return false;
					});

					//animate overlay (fade the overlay in, then expand, then fade content in)
					overlay.fadeTo(opts.animation_speed, 0.8, function(){
						overlay.animate({
							left: '0',
							width: grid_container.width(),
							top: '0',
							height: grid_container.height()-opts.vertical_offset
						}, opts.animation_speed, function(){
								overlay.fadeTo(opts.animation_speed, 1, function(){
									overlay.fadeTo(opts.animation_speed, 1);
									overlay_content.fadeTo(200, 1);
									closeButton.fadeTo(opts.animation_speed, 1);
								});
							});
						setTimeout(function(){
							//overlay.stop();
						},1000);
					});
					closeButton.css({opacity: 0});//correct for IE ****ness
					//set tab index and focus for accessability purposes
					$(overlay.find('h2')).attr('tabindex', '-1').focus();
				}
			};
			grid_container.find('.showHideLink').click(clickHandler);
		});
	
	}

})(jQuery);