// JavaScript Document
(function($) {
	$.fn.cImageViewer = function(options) {
		var optionObj = $.extend($.fn.cImageViewer.defaults, options);
		var self;
		$(this).click(function() {
			self = $(this);
			self.removeAttr("href");
			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\"></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);
				$("#cImageViewerContent").append('<div id="cImagePrefNextContainer" style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10pt; padding:5px 0px 0px 0px"></div>');
				createThumbViewer();
				createNextPrevViewer();
				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();
				}
				return false;
			});
		};
		createThumbViewer = function() {
			$("#cImageViewerContent").append("<div id=\"cImageViewerThumbs\"></div>");
			$("." + optionObj.thumbImageClass).each(function(i) {
				img = new Image();				
				$(img).attr({src : $(this).find("img:first").attr("src"), id:"image" + i}).css({margin:"5px 1px 0px 0px"});
				$("#cImageViewerThumbs").append(img);
				$("#image" + i).wrap("<a href=\"#\" rev=\"" + $(this).attr("rel") + "\" class=\"cImageThumb\" ></a>").css({border:'2px solid #FFFFFF'});
			});
			$("#cImageViewerThumbs").css({overflow:"hidden"});
			if(optionObj.thumbViewer) {
				$("#cImageViewerThumbs").css({display:'block'});
				$(".cImageThumb").bind("click", function(){
					changeImage(this);
				});
			} else {
				$("#cImageViewerThumbs").css({display:'none'});
			}
		};
		
		createNextPrevViewer = function(){
			$('#cImagePrefNextContainer').append('<a href="#" id="cImagePrevButton" rev=""><strong>Vorige</strong></a>');
			$('#cImagePrefNextContainer').append('<a href="#" id="cImageNextButton" rev=""><strong>Volgende</strong></a>');
			$('#cImagePrefNextContainer').append('<br clear="all" />');
			
			$('#cImagePrevButton').css({float:'left',textDecoration:'none',color:'#336699'});
			$('#cImageNextButton').css({float:'right',textDecoration:'none',color:'#336699'});
			
			updateNextPref();
			$("#cImagePrevButton, #cImageNextButton").bind("click", function(){
				changeImage(this);
			});
		};
		
		changeImage = function(obj) {
			if ($(".cImageBig").is(":not(:animated)")) {
				$(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);
						updateNextPref();
						$(".cImageBig").animate({opacity:1},150);
					}).attr({src : image});
				});
			}
		};
		
		updateNextPref = function() {
			var curImg = $(".cImageBig img").attr('src');
			var thumbs = $('.cImageThumb').length;
			$('.cImageThumb img').css({borderColor:'#FFFFFF'});
			$('.cImageThumb').each(function(i) {
				if($(this).attr('rev') == curImg) {
					if (i == 0) {
						$('#cImagePrevButton').attr({rev: $('.cImageThumb:last').attr('rev')});
					} else {
						$('#cImagePrevButton').attr({rev:$(this).prev('.cImageThumb').attr('rev')});
					}
					
					if (i == (thumbs - 1)) {
						$('#cImageNextButton').attr({rev: $('.cImageThumb:first').attr('rev')});
					} else {
						$('#cImageNextButton').attr({rev:$(this).next('.cImageThumb').attr('rev')});
					}
					$(this).find('img').css({borderColor:'#336699'});
				}
			});
		};
		
		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"
};