var selectedGalleryItemElement = null;
var galleryImageCount = 0;
var galleryImageViewTotal = 5;
var galleryImageViewIndex = 0;

$(document).ready(function(){			

	$("a.galleryview").each(function(index, element) {

		var itemJson = $(this).attr('items');
		$(this).removeAttr('items');
		
		$(this).bind('click', { itemJson: itemJson }, function(e) {
			
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}

			var itemJson = jQuery.parseJSON(unescape(e.data.itemJson));
			if (!itemJson)
				return;
			
			$('body').append("<div class='gallery-overlay-background'></div>");

			var overlayHtml = '';
			overlayHtml = "<div class='gallery-overlay' id='galleryOverlay'>";
			overlayHtml += "<div class='gallery-overlay-top'>";
			overlayHtml += "<div class='gallery-overlay-top-left'></div>";
			overlayHtml += "<div class='gallery-overlay-top-middle'></div>";
			overlayHtml += "<div class='gallery-overlay-top-right'></div>";
			overlayHtml += "</div>"; // top
			overlayHtml += "<div class='gallery-overlay-item-name' id='galleryItemName'>";
			overlayHtml += "</div>";
			overlayHtml += "<div class='gallery-overlay-middle'>";
			overlayHtml += "<div class='gallery-overlay-content' id='galleryOverlayContent'></div>";
			overlayHtml += "</div>"; // middle
			overlayHtml += "<div class='gallery-overlay-bottom-container'>";
			overlayHtml += "<div class='gallery-overlay-bottom-panel'>";
			overlayHtml += "<div class='gallery-overlay-label-photo'>Photo Gallery</div>";
			overlayHtml += "<div class='gallery-overlay-arrow' id='galleryImagesArrowLeft' style='display:none;'></div>";
			overlayHtml += "<div class='gallery-overlay-thumb-container gallery-overlay-image-thumb-container'>";
			overlayHtml += "<div class='gallery-overlay-thumb-tray' id='galleryImageThumbs'></div>";
			overlayHtml += "</div>";
			overlayHtml += "<div class='gallery-overlay-arrow' id='galleryImagesArrowRight'></div>";
			//overlayHtml += "<div class='gallery-overlay-label-video'>VIDEOS</div>";
			//overlayHtml += "<div class='gallery-overlay-thumb-container gallery-overlay-video-thumb-container' id='galleryVideoThumbs'></div>";
			overlayHtml += "</div>"; // bottom panel
			overlayHtml += "</div>"; // bottom container
			//overlayHtml += "<div class='gallery-overlay-bottom-border'></div>";
			overlayHtml += "</div>"; // overlay
			
			$('body').append(overlayHtml);
			
			var galleryItems = itemJson.items;
			var firstThumb = null;
			
			for (var i = 0; i < galleryItems.length; i++) {
				var galleryItem = galleryItems[i];
				var itemContainer = null;
				var itemType = null;

				if (galleryItem.imageURL) {
					itemContainer = 'galleryImageThumbs';
					itemType = 'image';
					galleryImageCount++;
				} else if (galleryItem.videoID) {
					itemContainer = 'galleryVideoThumbs';
					itemType = 'video';
				} else {
					/* console.log('invalid gallery item!'); */
					continue;
				}
				var thumbURL = galleryItem.thumbURL;
				thumbURL = thumbURL.replace("+","%20");
				var thumb = $('#' + itemContainer).append("<div class='gallery-overlay-thumb'></div>").find('.gallery-overlay-thumb').last();
				thumb.bind('click', { galleryItem: galleryItem, itemType: itemType }, changeGalleryItem);
				thumb.css('background-image', 'url(' + thumbURL + ')');

				if (!firstThumb)
					firstThumb = thumb;
					
			}
			// galleryImagesArrowRight
			if (galleryImageCount > galleryImageViewTotal) {
				$('#galleryImagesArrowRight').addClass('gallery-overlay-arrow-right').bind('click', function() {scrollGalleryImagesRight();});
				$('#galleryImagesArrowLeft').bind('click', function() {scrollGalleryImagesLeft();});
				$('#galleryImagesArrowLeft').show();
			}
			
			centerGalleryOverlay();
			
			$('.gallery-overlay-background, .gallery-overlay-top-right').bind('click', function(e) {closeGalleryOverlay();});

			if (firstThumb)
				firstThumb.click();

		});
	
	});
	
});

function closeGalleryOverlay() {
	$(".gallery-overlay").remove();  
	$(".gallery-overlay-background").remove();
}

function centerGalleryOverlay() {
	centerGalleryObject($('#galleryOverlay'), { vertical: true, offsetX: 4 });
}

function changeGalleryItem(e) {

	var galleryItem = e.data.galleryItem;
	var itemType = e.data.itemType;
	
	if (selectedGalleryItemElement) {
		$(selectedGalleryItemElement).removeClass('gallery-overlay-thumb-selected');
	}
	
	$('#galleryOverlayContent').empty();
	$('#galleryItemName').text('').text(galleryItem.name);
	
	$(this).addClass('gallery-overlay-thumb-selected');
	selectedGalleryItemElement = this;
	
	var addedContentSelector = null;
	var contentWidth = 0, contentHeight = 0;
	
	if (itemType == 'image') {
		var imageURL = galleryItem.imageURL;
		imageURL = imageURL.replace("+","%20");
		//$('#galleryOverlayContent').append('<img src="' + imageURL + '" width="' + galleryItem.width + '" height="' + galleryItem.height + '" />');
		$('#galleryOverlayContent').append('<img src="' + imageURL + '" />');
		addedContentSelector = $('#galleryOverlayContent').find('img').last();
		
	} else if (itemType == 'video') {
	
		$('#galleryOverlayContent').append("<div id='galleryOverlayContentVideo'></div>");
		var elementID = 'galleryOverlayContentVideo';
		var params = { allowScriptAccess: "always", wmode: "transparent" };
		var atts = { id: elementID };
		
		swfobject.embedSWF("http://www.youtube.com/e/" + galleryItem.videoID + "?enablejsapi=1&playerapiid=ytplayer",elementID, galleryItem.width, galleryItem.height, "8", null, null, params, atts);
						   
		addedContentSelector = $('#galleryOverlayContentVideo');
		
		contentWidth = galleryItem.width;
		contentHeight = galleryItem.height;
	}
	
}

function scrollGalleryImagesRight() {

	if (galleryImageViewIndex >= galleryImageCount - galleryImageViewTotal)
		return;

	galleryImageViewIndex++;
	scrollGalleryImageToCurrentIndex();
}

function scrollGalleryImagesLeft() {
	
	if (galleryImageViewIndex <= 0)
		return;
	
	galleryImageViewIndex--;
	scrollGalleryImageToCurrentIndex();
}

function scrollGalleryImageToCurrentIndex() {
	$('.gallery-overlay-image-thumb-container').scrollLeft(galleryImageViewIndex * 64);

	if (galleryImageViewIndex > 0)
		$('#galleryImagesArrowLeft').addClass('gallery-overlay-arrow-left');
	else
		$('#galleryImagesArrowLeft').removeClass('gallery-overlay-arrow-left');
	
	if (galleryImageViewIndex < galleryImageCount - galleryImageViewTotal)
		$('#galleryImagesArrowRight').addClass('gallery-overlay-arrow-right');
	else
		$('#galleryImagesArrowRight').removeClass('gallery-overlay-arrow-right');
}

function centerGalleryObject (sel, options) {
   
   var options =  $.extend({
		inside:window,
		transition: 0,
		minX:0,
		minY:0,
		withScrolling:true,
		vertical:true,
		horizontal:true,
		offsetX:  0,
		offsetY: 0,
		position: 'absolute',
		width: 0,
		height: 0
   }, options);
   
   return sel.each(function() {
		var props = { position: options.position };
		if (options.vertical) {
			 var myHeight = options.height > 0 ? options.height : $(sel).outerHeight();
			 
			 var top = ($(options.inside).height() - myHeight) / 2;
			 if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
			 top += options.offsetY;
			 top = (top > options.minY ? top : options.minY);
			 $.extend(props, {top: top+'px'});
		}
		if (options.horizontal) {
			var myWidth = options.width > 0 ? options.width : $(sel).outerWidth();
			
			var left = ($(options.inside).width() - myWidth) / 2;
			if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
			left += options.offsetX;
			left = (left > options.minX ? left : options.minX);
			$.extend(props, {left: left+'px'});
		}
		if (options.transition > 0) $(sel).animate(props, options.transition);
		else $(sel).css(props);
		return $(sel);
   });
   
}