/**

Documentation can be found at http://www.dudeami.com/dgallery/

Licensing:

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
	
 */
 
jQuery.dgallery = {
	config: {
		// Padding of the main pictures frame
		framePadding: 50,
		// Margin of the pictures frame
		frameMargin: 20,
		// Color of the main pictures frame
		frameColor: '#fff',
		// Opacity of the frame
		frameOpacity: 0.6,
		// The height+width of the reel (Sorry, only supports a box :P
		reelHeight: 100,
		// The padding of the reel frames
		reelPadding: 10,
		// The color of the reel selected box
		selectedBackColor: '#000',
		// The opacity of the reel selected box
		selectedOpacity: 0.2,
		// The color of the background
		backColor: '#000',
		// The opacity of the background
		backOpacity: 0.9,
		// Opacity of images that our not currently selected
		unselectedOpacity: 0.5
	},
	global: {
		overallReelHeight: 0,
		imagesLoaded: 0,
		imageCount: 0,
		imageOffset: 0,
		curImage: null,
		scrollPos: 0,
		debug: false
	},
	init: function () {
		$('.dgallery img').bind('click.dgallery', function () {
			$(window).bind('resize.dgallery', jQuery.dgallery.windowResizeEvent);
			// Make a overallReelHeight for reference later (Cleaner?)
			jQuery.dgallery.global.overallReelHeight = jQuery.dgallery.config.reelHeight + (jQuery.dgallery.config.reelPadding*2);
			// Count all the images in the gallery
			jQuery.dgallery.global.imageCount = $('img', $(this).parent()).size();
			jQuery.dgallery.global.imagesLoaded = 0;
			// Get the offset of the selected image
			jQuery.dgallery.global.imageOffset = $(this).prevAll('img').size();
			// An odd variable, but overall main image height padding used in height/width calcs later
			jQuery.dgallery.global.overallPicHeightPadding = jQuery.dgallery.global.overallReelHeight 
				+ (jQuery.dgallery.config.framePadding*2)
				+ (jQuery.dgallery.config.frameMargin*2)
			// Ditto as above, just with width
			jQuery.dgallery.global.overallPicWidthPadding = (jQuery.dgallery.config.framePadding*2)
				+ (jQuery.dgallery.config.frameMargin*2)
			// Create our container... Workaround for IE6/7 not having fixed (Bah!)
			$('<div class="dgallerycontainer"></div>').appendTo('body');
			$('.dgallerycontainer').css({
				'position': 'absolute',
				'left': 0,
				'top': $(window).scrollTop(),
				'width': $(window).width(),
				'height': $(window).height(),
				'overflow': 'hidden'
			});
			// And our scroll event to move it around!
			$(window).bind('scroll', function () {
				$('.dgallerycontainer').css({
					'top': $(window).scrollTop()
				});
			});
			// Make our background
			$('<div class="dgalleryback"></div>').appendTo('.dgallerycontainer');
			$('.dgalleryback').bind('click', jQuery.dgallery.clear);
			$('.dgalleryback').css({
				'opacity': jQuery.dgallery.config.backOpacity,
				'background-color': jQuery.dgallery.config.backColor,
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'width': $(window).width(),
				'height': $(window).height()
			});
			// Now we make a highlight for current image:
			$('<div class="dgallerylight" ></div>').appendTo('.dgallerycontainer');
			$('.dgallerylight').css({
				'height': jQuery.dgallery.global.overallReelHeight + 'px',
				'width': jQuery.dgallery.global.overallReelHeight + 'px',
				'opacity': jQuery.dgallery.config.selectedOpacity,
				'background-color': jQuery.dgallery.config.selectedBackColor,
				'position': 'absolute',
				'bottom': 0
			});
			// Now take the images, and make the film reel at the bottom
			$('<table cellpadding="0" cellspacing="0" border="0" class="dgalleryreel"></table>').appendTo('.dgallerycontainer');
			$('.dgalleryreel').css({
				'position': 'absolute',
				'bottom': 0
			});
			$('<tr></tr>').appendTo('.dgalleryreel');
			$('img', $(this).parent()).each(function () {
				$('<td valign="middle" align="center"></td>').appendTo('.dgalleryreel tr');
				$('.dgalleryreel tr td:last').css({
					'padding': jQuery.dgallery.config.reelPadding + 'px',
					'height': jQuery.dgallery.config.reelHeight + 'px',
					'width': jQuery.dgallery.config.reelHeight + 'px'
				});
				ele = $(this).clone();
				// If the images match, the ele is the curImage\
				if (jQuery.dgallery.global.imageOffset == $(this).prevAll('img').size()) {
					jQuery.dgallery.global.curImage = ele;
				}
				if ($(this).height() > $(this).width()) {
					$(ele).css('height', jQuery.dgallery.config.reelHeight + 'px');
				} else if ($(this).height() < $(this).width()) {
					$(ele).css('width', jQuery.dgallery.config.reelHeight + 'px');
				}
				$(ele).appendTo('.dgalleryreel tr td:last');
			});
			$('img', '.dgalleryreel').bind('click', jQuery.dgallery.changePhoto);
			$('img', '.dgalleryreel').each(function () {
				if ($(this).complete) {
					jQuery.dgallery.global.imagesLoaded++;
					if (jQuery.dgallery.global.imagesLoaded == jQuery.dgallery.global.imageCount) {
						// Animation!
						$('.dgalleryreel').animate({bottom: 0}, 1000);
						$('.dgallerylight').animate({bottom: 0}, 1000);
						$(document).unbind('load.dgallery');
					}
				} else {
					$(this).bind('load', function () {
						jQuery.dgallery.global.imagesLoaded++;
						if (jQuery.dgallery.global.imagesLoaded == jQuery.dgallery.global.imageCount) {
							// Animation!
							$('.dgalleryreel').animate({bottom: 0}, 1000);
							$('.dgallerylight').animate({bottom: 0}, 1000);
							$(document).unbind('load.dgallery');
						}
					});
				}
			});
			// Fade the unselected images on the reel
			$('.dgalleryreel img').css('opacity', jQuery.dgallery.config.unselectedOpacity);
			$(jQuery.dgallery.global.curImage).css('opacity', 1.0);
			// Positioning...
			$('.dgallerylight').css('left', ($(window).width()/2)-($('.dgallerylight').width()/2));
			$('.dgalleryreel').css('left', ($(window).width()/2)-((jQuery.dgallery.global.imageOffset*jQuery.dgallery.global.overallReelHeight)+(jQuery.dgallery.global.overallReelHeight/2)));
			$('.dgallerylight').css('bottom', -($('.dgallerylight').outerHeight())-10);
			$('.dgalleryreel').css('bottom', -($('.dgalleryreel').outerHeight())-10);
			// Load the first selected image!
			$('<img class="dgallerylarge" src="' + $(this).attr('src') + '" alt="" />').appendTo('.dgallerycontainer');
			$('.dgallerylarge').css({
				'position': 'absolute',
				'right': '110%'
			});
			$('.dgallerylarge').bind('load', jQuery.dgallery.resizeFunc);
			// Then add the arrow key functionality
			$(document).bind('keypress.dgallery', function(e) {
				switch(e.keyCode) {
					case 37: // left
						$(jQuery.dgallery.global.curImage).parent().prev().find('img').click();
						break;
					case 39: //right
						$(jQuery.dgallery.global.curImage).parent().next().find('img').click();
						break;
				}
			});
		});
	},
	windowResizeEvent: function () {
		$('.dgallerylight').animate({'left': ($(window).width()/2)-($('.dgallerylight').width()/2)}, 500);
		$('.dgalleryreel').animate({'left': ($(window).width()/2)-(((jQuery.dgallery.global.imageOffset-1)*jQuery.dgallery.global.overallReelHeight)+(jQuery.dgallery.global.overallReelHeight/2))}, 500);
		$('.dgallerylarge').trigger('load');
		$('.dgalleryback').css({
			'width': $(window).width(),
			'height': $(window).height()
		});
		$('.dgallerycontainer').css({
			'width': $(window).width(),
			'height': $(window).height()
		});
	},
	resizeFunc: function () {
		if ($(this).data('oheight') == undefined) {
			$(this).data('oheight', $(this).height());
			$(this).data('owidth', $(this).width());
		}
		// This is once the image is loaded, atm its hidden off to the right of the screen, now we reveal it resized!
		if ($(this).data('oheight')/($(window).height() - jQuery.dgallery.global.overallPicHeightPadding) > $(this).data('owidth')/($(window).width() - jQuery.dgallery.global.overallPicWidthPadding)) {
			// Height is bigger in comparision to the window height than the width... Resize?
			if ($(this).data('oheight') > ($(window).height() - jQuery.dgallery.global.overallPicHeightPadding)) {
				var per = ($(window).height()-jQuery.dgallery.global.overallPicHeightPadding)/$(this).data('oheight');
				var oldHeight = $(this).data('oheight');
				$(this).css('height', $(this).data('oheight')*per);
			} else {
				$(this).css('height', $(this).data('oheight'));
			}
		} else {
			alert($(this).data('owidth'));
			// Width is bigger in comparision to the window width than the width... Resize?
			if ($(this).data('owidth') > ($(window).width() - jQuery.dgallery.global.overallPicWidthPadding)) {
				var per = ($(window).width()-jQuery.dgallery.global.overallPicWidthPadding)/$(this).data('owidth');
				$(this).css('width', $(this).data('owidth')*per);
			} else {
				$(this).css('width', $(this).data('owidth'));
			}
		}
		// Positioning of the image...
		$(this).css({
			'right': '',
			'z-index': 2000,
			'left': (($(window).width()-jQuery.dgallery.global.overallPicWidthPadding)/2)-($(this).width()/2) + 
				(jQuery.dgallery.global.overallPicWidthPadding/2),
			'top': (($(window).height()-jQuery.dgallery.global.overallPicHeightPadding)/2)-($(this).height()/2) + 
				(jQuery.dgallery.global.overallPicWidthPadding/2)
		});
		if ($('.dgalleryframe').size() == 0) {
			$('<div class="dgalleryframe"></div>').appendTo('.dgallerycontainer');
			$('.dgalleryframe').css({
				'position': 'absolute',
				'top': $(this).position().top - (jQuery.dgallery.global.overallPicWidthPadding/2),
				'left': $(this).position().left - (jQuery.dgallery.global.overallPicWidthPadding/2),
				'background-color': jQuery.dgallery.config.frameColor,
				'margin': jQuery.dgallery.config.frameMargin,
				'padding': jQuery.dgallery.config.framePadding,
				'width': $(this).width(),
				'height': $(this).height(),
				'opacity': 0
			});
			$('.dgalleryframe').animate({
				'opacity': jQuery.dgallery.config.frameOpacity
			}, 500);
		} else {
			$('.dgalleryframe').stop();
			$('.dgalleryframe').animate({
				'top': $(this).position().top - (jQuery.dgallery.global.overallPicWidthPadding/2),
				'left': $(this).position().left - (jQuery.dgallery.global.overallPicWidthPadding/2),
				'width': $(this).width(),
				'height': $(this).height()
			}, 1000);
		}
	},
	changePhoto: function () {
		// Little effect to make the other images seem faded out...
		$(this).parent().parent().find('img').css('opacity', jQuery.dgallery.config.unselectedOpacity);
		$(this).css('opacity', 1.0);
		// Set current image...
		jQuery.dgallery.global.curImage = this;
		// Set offset
		jQuery.dgallery.global.imageOffset = $(this).parent().prevAll('td').size()+1
		$('.dgalleryreel').stop();
		$('.dgalleryreel').animate({
			'left': ($(window).width()/2)-(jQuery.dgallery.global.imageOffset*jQuery.dgallery.global.overallReelHeight)+(jQuery.dgallery.global.overallReelHeight/2)
		}, 1000);
		$('.dgallerylarge').remove();
		$('<img class="dgallerylarge" alt="" src="" />').appendTo('.dgallerycontainer');
		$('.dgallerylarge').css({
			'position': 'absolute',
			'right': '110%'
		});
		$('.dgallerylarge').bind('load', jQuery.dgallery.resizeFunc);
		$('.dgallerylarge').attr('src', $(this).attr('src'));
	},
	clear: function () {
		$('.dgallerylarge').remove();
		$('.dgalleryframe').remove();
		$('.dgalleryreel').remove();
		$('.dgalleryback').remove();
		$('.dgallerylight').remove();
		$(window).unbind('resize.dgallery');
	}
};
$(window).ready(function () {
	jQuery.dgallery.init();
});