/**
 * SquareGallery
 *
 * @version 1.1
 * @requires jQuery 1.3
 * @author Nathan Walasek
 * @website http://www.walasekdesign.com
 *
 **************************
 * USAGE: Default Options *
 **************************
 
$(window).load(function() {
	$('.sq_gallery a').sqGallery();
});

 *************************
 * USAGE: Custom Options *
 *************************
 
$(window).load(function() {
	$('.sq_gallery a').sqGallery({
		thumbSize: 50,			(px)		size of square thumbnail
		fullSize: 400,			(px)		max width/height of enlarged image
		border: 5,				(px)		width of border around thumbnails/enlargements
		borderColor: 'ffffff',	(hex)		hexadecimal value of border color
		cursorDist: 20,			(px)		distance from cursor to display enlargement
		effectSpeed: 500,		(ms)		speed for effects
		allowFull: true,		(boolean)	allow clicking thumbnails
		allowHover: true,		(boolean)	allow showing larger image on hover
		showAlt: true			(boolean)	display alt text from thumbnails on enlargements
	});
});

**/

(function($){  
	$.fn.sqGallery = function(options) {

		//default options
		var defaults = {
			thumbSize: 50,
			fullSize: 400,
			border: 5,
			borderColor: 'ffffff',
			cursorDist: 20,
			effectSpeed: 500,
			allowHover: true,
			allowFull: true,
			showAlt: true
		};
		
		//load custom options
		var options = $.extend(defaults, options);
		
		return this.each(function(index, thumb) {  
			//set thumbnail image
			var thumbnail = $(thumb).children();
			
			//set thumbnail wrapper sizes
			$(thumb).css({'width' : options.thumbSize, 'height' : options.thumbSize, 'border' : options.border + 'px solid #' + options.borderColor});

			//determine image dimensions
			var image_w = $(thumbnail).width();
			var image_h = $(thumbnail).height();
			
			//determine image orientation, image sizes, and margins (for centering)
			var ratio = image_w / image_h;
			if (ratio > 1) { //landscape
				var thumb_w = options.thumbSize * ratio;
				var thumb_h = options.thumbSize;
				var full_w = options.fullSize;
				var full_h = options.fullSize / ratio;
				var thumb_x = -((thumb_w - options.thumbSize) / 2);
				var thumb_y = 0;
			}
			if (ratio < 1) { //portrait
				var thumb_w = options.thumbSize;
				var thumb_h = options.thumbSize / ratio;
				var full_w = options.fullSize * ratio;
				var full_h = options.fullSize;
				var thumb_x = 0;
				var thumb_y = -((thumb_h - options.thumbSize) / 2);
			}
			if (ratio == 1) { //square
				var thumb_w = options.thumbSize;
				var thumb_h = options.thumbSize;
				var full_w = options.fullSize;
				var full_h = options.fullSize;
				var thumb_x = 0;
				var thumb_y = 0;
			}
			
			//set image size and margins
			$(thumbnail).css({'width' : thumb_w, 'height' : thumb_h, 'margin-left' : thumb_x, 'margin-top' : thumb_y});

			//get browser size
			window_x = $(document).width();
			window_y = $(document).height();
			$(window).resize(function() {
				window_x = $(document).width();  
				window_y = $(document).height();  
			});

			//mouseover actions
			if(options.allowHover) {
				$(thumbnail).mouseover(function(f) {
													   
					//create fullsize wrapper
					var full = $('<div class="sq_full"></div>');
					$(full).css({'padding' : options.border + 'px', 'background' : '#' + options.borderColor, 'left' : (f.pageX + options.cursorDist), 'top' : (f.pageY + options.cursorDist)});
					var wrap_w = full_w + (2 * options.border);
					var wrap_h = full_h + (3 * options.border) + 10;
					
					//create loading icon
					var loader = $('<div class="sq_loader"></div>');
					$(full).append(loader);
	
					//fade it in
					$(thumbnail).after(full);
					$(full).fadeIn(options.effectSpeed);
		
					//create/hide the image
					var image = new Image();
					$(image).hide();
					
					$(image).load(function() {
						//set image sizes and reset margin
						$(image).css({'width' : full_w, 'height' : full_h});
		
						//inject the image
						$(full).append(image);
						
						//grab the alt text
						var alt_text = $(thumbnail).attr('alt');
						if (alt_text && options.showAlt) {
							var alt = $('<div class="sq_alt">' + alt_text + '</div>');
							$(alt).css('padding-top', options.border);
							$(full).append(alt);
						}

						//show image
						$(loader).hide();
						$(image).show(options.effectSpeed, function() {
							//show text after image is shown
							$(alt).slideDown(options.effectSpeed);										 
						});
						
					}).attr('src', $(thumb).attr('href'));

					//make fullsize move with the cursor
					$(this).mousemove(function(e) {
						$(full).clearQueue();
						if (e.pageX + wrap_w + options.cursorDist < window_x) {
							//horizontal position - right of cursor
							$(full).animate({left: (e.pageX + options.cursorDist)}, "fast", "linear");
						} else {
							//horizontal position - left of cursor
							$(full).animate({left: (e.pageX - options.cursorDist - wrap_w)}, "fast", "linear");
						}
						//vertical position
						if (e.pageY + options.cursorDist + wrap_h < window_y) {
							$(full).animate({top: (e.pageY + options.cursorDist)}, "fast", "linear");
						} else {
							$(full).animate({top: (e.pageY - options.cursorDist - wrap_h)}, "fast", "linear");
						}

					});
					
					//remove fullsize
					$(this).mouseout(function() {
						$(full).remove();
					});				
				});
			}
			
			//disable link if full is not allowed
			if(!options.allowFull) {
				$(this).click(function() {
					return false;
				});
			}
		});  
	};  
})(jQuery);