$(document).ready(function() {
	imageViewer.init("image-viewer-id", ".use-image-viewer", 900);
});

var imageViewer = {
	init : function (ContainerId, ClassNameToUse, ForcedWidth) {

		if(ForcedWidth) imageViewer.forcedWidth = ForcedWidth;
		
		imageViewer.addContainer(ContainerId);
		
		$(ClassNameToUse).bind('click', function() {
			imageViewer.showImage(this);
		});
		
		$(window).resize(function () {
			imageViewer.resize();
		});
		
		$(window).scroll(function () {
			imageViewer.resize();
		});
		
		
	},
	containerId : '',
	addContainer : function (ContainerId) {
		imageViewer.containerId = ContainerId;
		var html = '<div id="'+ContainerId+'" class="image-viewer-container"></div>';
		$('body').append(html);
	},
	imagesClassName : '',
	forcedWidth : null,
	currentSize : {
		x : null,
		y : null
	},
	showImage : function (element) {
		var ImageSrc = $(element).attr('src');
		
		ForcedWidth = imageViewer.forcedWidth;
		
		if(ForcedWidth > $(window).width() - 200){
			window.open(ImageSrc, "_blank");
			return;
		} 
		
		

		
		if(imageViewer.forcedWidth!=null){
			
			var HeightMultiplyer = ForcedWidth / $(element).width();
			imageViewer.currentSize.x = ForcedWidth;
			imageViewer.currentSize.y = $(element).height() * HeightMultiplyer;
			
		} else {
			
			// get original width?
			
			currentSize.x = $(element).width();
			currentSize.y = $(element).height();
		}
		
		
		
		imageViewer.addImageViewer(ImageSrc);
	}, 
	addImageViewer : function (ImageSrc) {
		
		
		
		var FullScreenCss = 'width:' + $(window).width() + 'px; height:' + $(window).height() + 'px;';
		FullScreenCss += 'top:'+$(window).scrollTop()+'px; left:'+$(window).scrollLeft()+'px';
		var ImageCss = 'width:' + parseInt(imageViewer.currentSize.x) + 'px; height:' + parseInt(imageViewer.currentSize.y) + 'px;';
		ImageCss += 'margin: ' + parseInt(-imageViewer.currentSize.y * 0.5) + 'px ' + parseInt(-imageViewer.currentSize.x*0.5) + 'px;';
		
		
		var ButtonCss = 'margin: ' + parseInt(-imageViewer.currentSize.y * 0.5 - 65*0.5) + 'px ' + parseInt(-imageViewer.currentSize.x*0.5 - 65*0.5) + 'px;';
		
		var html = '';
		html += '<div class="image-viewer-instance" id="image-viewer-instance" style="'+FullScreenCss+'">';
		html += '<div class="image-viewer-background" id="image-viewer-background"></div>';
		html += '<img src="'+ImageSrc+'" class="image-viewer-image" style="'+ImageCss+'"/>';
		html += '<span class="image-viewer-close-button" style="'+ButtonCss+'"></span>';
		html += '<div>';
		
		$('#'+imageViewer.containerId).html(html);
		
		$('.image-viewer-close-button').bind('click', function() {
			imageViewer.removeImageViewer();
		});
		
		
	}, 
	removeImageViewer : function (ImageSrc) {

		$('#'+imageViewer.containerId).html('');
		
	},
	resize : function () {
		
		if($('#image-viewer-instance').length!=0){

			$('#image-viewer-instance').css({
				width: $(window).width() + 'px',
				height: $(window).height() + 'px',
				top: $(window).scrollTop() + 'px',
				left: $(window).scrollLeft() + 'px'
			});
		}
	}
}