// JavaScript Document
(function($) {
	$.fn.cImageViewer = function(options) {
		var optionObj = $.extend($.fn.cImageViewer.defaults, options);
		var self;
		var startImage;
		var imageId;
		var maxImages;
		$(this).click(function() {
			self = $(this);
			self.removeAttr("href");
			startImage = self.find("img").attr("src");
			createViewer();
		});
		
		createViewer = function() {
			$("body").append("<div id=\"cImageViewerContainer\"></div>");
			$("#cImageViewerContainer").css({position:"fixed",height:"100%",width:"100%"});
			if(jQuery.browser.msie && jQuery.browser.version < 7) {
				$("#cImageViewerContainer").css({position:"absolute",height:$("body").height()});
			}

			$("#cImageViewerContainer").css({opacity:0,top:"0px",left:"0px",backgroundColor:optionObj.viewerBackgroundColor,zIndex:10000}).animate({opacity:optionObj.viewerBackgroundOpacity},500,function(){
				createContent();
			});
			
			$("#cImageViewerContainer").bind("click", function(){
				if ($("#cImageViewerContainer").is(":not(:animated)")) {
					remove();
				}
			});
		};
		
	
		createContent = function() {
			var img = new Image();
			$("body").append("<div id=\"cImageViewerContent\"></div>");
			$("#cImageViewerContent").css({display:"none"});
		//	$("#cImageViewerContent").append("<div style=\"float:left; width:550px; padding-bottom:10px;\"><h2 style=\"font-family:Verdana,Arial,Helvetica,sans-serif; font-weight:bold; font-size:12pt;\">" + $(".cavDetailHeaderTitle h2").text() + "</h2></div>");
			$("#cImageViewerContent").append("<div style=\"float:right; width:20px; padding-bottom:10px;\"><a href=\"#\" id=\"cImageViewerClose\" title=\"Sluiten\"><img src=\"" + optionObj.viewerCloseImage + "\" alt=\"Sluiten\" /></a></div><br clear=\"all\" />");
			$(img).load(function() {
				var fromTop = parseInt(25 + (window.pageYOffset || document.documentElement.scrollTop)) + "px";
				$("#cImageViewerContent").append("<div class=\"cImageBig\" style=\"position:relative;\"></div>").css({position:"absolute",backgroundColor:optionObj.viewerContentColor,width:img.width,padding:"10px",top:fromTop,zIndex:10001});
				$(".cImageBig").css({width:img.width,height:img.height,disbplay:"block"}).append(img);
				createThumbViewer();
				var left = Math.ceil((parseInt($("body").width()) - parseInt($("#cImageViewerContent").outerWidth())) / 2);
				$("#cImageViewerContent").css({left:left,display:"block"});
			}).attr({src:self.attr("rev")});
			$("#cImageViewerClose").bind("click", function(){
				if ($("#cImageViewerContainer").is(":not(:animated)")) {
					remove();
				}
			});
		};
		
		createThumbViewer = function() {
			$("#cImageViewerContent").append("<div id=\"cImageViewerThumbs\"" + (!optionObj.thumbViewer ? " style=\"display:none\"":"") + "></div>");
			var x;
			$("." + optionObj.thumbImageClass).each(function(i) {
				img = new Image();				
				if ($(this).find("img:first").attr("src") == startImage) {
					imageId = "image" + i;
				}
				$(img).attr({src : $(this).find("img:first").attr("src")}).css({margin:"5px 6px 0px 0px"});
				$("#cImageViewerThumbs").append(img);
				$(img).wrap("<a href=\"#\" rev=\"" + $(this).attr("rel") + "\" class=\"cImageThumb\" id=\"image" + i + "\" ></a>");
				x = i;
			});
			maxImages = x;
			$("#cImageViewerThumbs").css({overflow:"hidden",padding:"1px 0px 0px 0px"});
			if (optionObj.viewernextprefBtn) {
				createNextPrevBtns(imageId);
			}			
			$(".cImageThumb").bind("click", function(){
				changeImage(this);
			});
		};

		createNextPrevBtns = function(id) {
			id = parseInt(id.replace("image",""));
			if ((id -1) >= 0) {
				$(".cImageBig").append("<a class=\"prevBtn\" id=\"image" + (id -1) + "\" rev=\"" + $("#image" + (id -1)).attr("rev") + "\" style=\"position:absolute;left:0px;top:0px;height:100%;\"></a>");
			}
			if ((id +1) <= maxImages) {
				$(".cImageBig").append("<a class=\"nextBtn\" id=\"image" + (id +1) + "\" rev=\"" + $("#image" + (id +1)).attr("rev") + "\" style=\"position:absolute;right:0px;top:0px;height:100%;\"></a>");
			}
			
			$(".prevBtn, .nextBtn").bind("click", function() {
				changeImage($(this));										   
			});
		};

		changeImage = function(obj) {
			if ($(".cImageBig").is(":not(:animated)")) {
				imageId = $(obj).attr("id");
				$(obj).removeAttr("href").css({cursor:"pointer"});
				var image = $(obj).attr("rev");
				$(".cImageBig").animate({opacity:0},150,function() {
					img = new Image();
					$(img).load(function() {
						$("#cImageViewerContent").css({width:img.width});
						var left = Math.ceil((parseInt($("body").width()) - parseInt($("#cImageViewerContent").outerWidth())) / 2);						
						$("#cImageViewerContent").css({left:left});
						$(".cImageBig").css({width:img.width,height:img.height});
						$(".cImageBig").html(img);
						if (optionObj.viewernextprefBtn) {
							createNextPrevBtns(imageId);
						}
						$(".cImageBig").animate({opacity:1},150);
					}).attr({src : image});
				});
			}
		};
		
		remove = function(obj) {
			$("#cImageViewerContent").remove();
			$("#cImageViewerContainer").animate({opacity:0},500, function() {
				$("#cImageViewerContainer").remove();
				self.attr({href : "#"});
			});
		};
	}
})(jQuery);

$.fn.cImageViewer.defaults = {
	// hier alle default opties scheiden door een komma	
	viewerCloseImage : "http://cav.cartel.nl/layout/bgCavDetailCloseViewer.jpg",
	thumbImageClass : "thumbImageClass",
	thumbViewer : false,
	viewerBackgroundColor : "#000000",
	viewerBackgroundOpacity : 0.5,
	viewerContentColor : "#FFFFFF",
	viewernextprefBtn : false
};