
(function($) {

	// plugin definition
	$.fn.peakaboogallery = function(options) {
  	return this.each(function() {
        new $pkbg(this, options);
    });
	};

	// defaults
	var defaults = {
      fullScreen : false
  };
	
	// peakaboogallery object
	$.peakaboogallery = function(e, o) {
		this.options    = $.extend({}, defaults, o || {});
		this.el = e;
		this.setup();
	};
	
	// create shortcut for internal use
  var $pkbg = $.peakaboogallery;
  $pkbg.fn = $pkbg.prototype = { peakaboogallery: '0.2.3' };
  $pkbg.fn.extend = $pkbg.extend = $.extend;

  $pkbg.fn.extend({
		
		setup : function() {
			
			var self = this;
			this.htmlSetup = false;
			
			this.gallery_els = $(this.el).find('.peakaboogallery a');
			
			jQuery.each(this.gallery_els, function(i, item) {
				
				$(item).click(function () {
					self.showImage(this);
					return false;
		    });
			});
			
			if (this.options.fullScreen) {	
				$(window).bind('resize', function() {
					self.adjustOverlay();
				});
			}
			
			this.num_items = this.gallery_els.length;
			this.curr_index = null;
    },

		setupHTML : function(el) {
			var self = this;
			
			// find positioning for html
			title_el = $(this.el).find('.peakaboogallery-top')[0];
			
			var position;
			var target;
			if (!this.options.fullScreen) {	
				position 	= $(title_el).position();
				target 		= $(el).parents('.peakaboo-info');
			} else {
				var page_size = pkbg_getPageSize();
				position = {top: (page_size[1] / 2), left: (page_size[0] / 2)}
				target = $(document.body);
			}
			
			var nav_height = 20;
			
			// create gallery html
			
			var html = '<div id="pkbg" style="display: block; top: ' + (position.top - nav_height) + 'px; left: ' + (position.left) + 'px;"> \
										<div id="pkbg-content"> \
											<a href="#show next image" title="View Next" id="pkbg-img-next" ></a> \
                  	</div> \
										<div id="pkbg-count" style="position: absolute; top: -2px; left: 62px; width: 50px"> \
											<span id="pkbg-curr">' + Number(this.curr_index + 1) + '</span> of <span id="pkbg-total">' + this.gallery_els.length + '</span> \
										</div> \
										<a href="#" title="Close" id="pkbg-close" style="position: absolute; top: -2px; left: 114px;"> \
	                    close \
	                  </a> \
										<a href="#" title="Next" id="pkbg-next" style="position: absolute; top: 0px; left: 30px;"> \
	                    <img src="/images/peakaboogallery/next.gif" alt="" style="border:none; margin:0; padding:0;" /> \
	                  </a> \
										<a href="#" title="Prev" id="pkbg-prev" style="position: absolute; top: 0px; left: 0px;"> \
	                    <img src="/images/peakaboogallery/prev.gif" alt="" style="border:none; margin:0; padding:0;" /> \
	                  </a> \
									</div>';
			
			target.append(html);
			
			if (!this.options.fullScreen) {			
				// set up overlay covers
				this.hide_els = $(this.el).find('.peakaboogallery-hide');
				jQuery.each(this.hide_els, function(i, item) {
					self.overlay(item);
				});
			
				// fade in covers
				overlay_els = $(this.el).find('.overlay');
				jQuery.each(overlay_els, function(i, item) {
					$(item).hide();
					$(item).fadeIn();
				});
			} else {
				self.overlay($('body'));
			}
			
			$('#pkbg-close').click(function () {
				self.close();
				return false;
	    });
			$('#pkbg-prev').click(function () {
				self.showImageControl('prev');
				return false;
	    });
			$('#pkbg-next').click(function () {
				self.showImageControl('next');
				return false;
	    });
	
			$('#pkbg-img-next').click(function () {
				self.showImageControl('next');
				return false;
	    });
			
			this.htmlSetup = true;
			
		},
		
		/*
		
		*/
		showImageControl : function (dir) {
			
			var next_href_el;
			
			var i = this.curr_index;
			
			if (dir == 'prev') {
				if( i == 0 ) {
					next_href_el = this.gallery_els[this.gallery_els.length-1];
				} else {
					next_href_el = this.gallery_els[i-1];
				}
			}
			if (dir == 'next') {
				if(i == this.gallery_els.length - 1 ) {
					next_href_el = this.gallery_els[0];
				} else {
					next_href_el = this.gallery_els[i+1];
				}
			}
			
			this.showImage(next_href_el);
			
			return false;
		},
		
		/*
			
		*/
		showImage : function(load_item) {
			
			var self = this;
			
			jQuery.each(this.gallery_els, function(i, item) {
				if (load_item == item) {
					self.curr_index = i;
					if (self.htmlSetup) {
						$('#pkbg-curr').html(self.curr_index + 1)
					}
				}
			});
			
			if (!this.htmlSetup) {
				this.setupHTML(load_item);
			}	
			
			// remove current data
			$('#pkbg-img-next').empty();
			$('#pkbg-imginfo').remove();
			
			// load the new image
			var load_src = $(load_item).attr('href');
			var load_title = $(load_item).attr('title');
			
			var img = new Image();
			  
		  $(img).load(function () {
	      
	      //$('#loader').removeClass('loading')
	
				$('#pkbg-img-next').empty();
				$('#pkbg-imginfo').remove();
	
				$('#pkbg-img-next').append(this);
	      
				if (self.options.fullScreen) {
					self.adjustOverlay(0);
				}
	
				$(this).hide();
				$(this).fadeIn();
				
				self.addMeta(load_item);
				
	    }).attr({ src: load_src, alt: load_title, id: "pkbg-img" });
	
		},
		
		/*
		
		*/
		addMeta : function (el) {
			
			var imginfo =  $(el).siblings('.img-info');
			
			if (imginfo.length > 0) {			
				var html = '<div id="pkbg-imginfo"> \
											' + imginfo.html() + ' \
	                  </div>';
			
				$('#pkbg-content').append(html);
			}
			
		},
		
		/*
		
		*/
		overlay : function (item) {
			
			var extraClass = '';
			var self = this;
			
			if (!this.options.fullScreen) {			
				// get the item dimensions and offset
				var position = $(item).position();
				var height = $(item).height();
				var width = $(item).width();
				var target = $(this.el).find('.peakaboo-info');
			} else {
				var position = { top: 0, left: 0 }
				var page_size = pkbg_getPageSize();
				//var width = page_size[0];
				//var height = page_size[1];
				var width = $(document).width();
				var height = $(document).height();
				target = $('body');
				extraClass = ' fullscreen';
				$('body').css({ overflow: 'hidden' });
			}
			
			var html = '<div class="overlay'+extraClass+'" style="top: '+position.top+'px; left: '+position.left+'px; width: '+width+'px; height: '+height+'px"></div>';
			
			target.append(html);
			
			if (this.options.fullScreen) {
				$('.overlay').click(function () {
					self.close();
		    });
			}
			
		},
		
		adjustOverlay : function (speed) {
			
			speed = (speed == undefined) ? 0 : speed;
			
			if ($('#pkbg').length > 0) {
				var page_size = pkbg_getPageSize();
				//var page_height = page_size[1];
				var page_height = $(document).height();
				//var page_width = page_size[0];
				var page_width = page_size[0];
				var t = $(window).scrollTop() + ((page_size[1] / 2) - ($('#pkbg').height() / 2));
				//var t = (page_height / 2) - ($('#pkbg').height() / 2);
				var l = (page_width / 2) - ($('#pkbg').width() / 2);
					
				if (speed > 0) {
					$('#pkbg').animate({ top: t, left: l }, speed );
				}	else {
					$('#pkbg').css({ top: t, left: l });
				}
				
				$('.overlay').css({ width: page_width , height: page_height});
			}
		},
		
		/*
		
		*/
		close : function () {
			
			var self = this;
			$('#pkbg').fadeOut(function () {
				$(this).remove();
				self.htmlSetup = false;
			});
			
			// fade in covers
			if (!this.options.fullScreen) {		
				overlay_els = $(this.el).find('.overlay');
			} else {
				overlay_els = $('.overlay');
				$('body').css({ overflow: 'auto' });
			}
			jQuery.each(overlay_els, function(i, item) {
				$(item).fadeOut(function () {
					$(this).remove();
				});
			});
		}
		
	});
	
	$pkbg.extend({
      defaults: function(d) {
          return $.extend(defaults, d || {});
      }
  });
	
})(jQuery);

function pkbg_getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	arrayPageSize = [w,h];
	return arrayPageSize;
}

