//global variable;
//on page load call cb_init
$(document).ready(function(){  
	var images = $("img");
	for (var i = 0; i < images.length; i++){
		var img = images[i];
		if(img.src.indexOf("_th")!= -1){
			img.setAttribute("clickbox","true")	;
		}
	}
});

//global variable;
//on page load call cb_init
$(document).ready(function(){  
						   
				
	clickbox.init({
		
		selector : "img[@clickbox]",

		dictionary : {
			next 		: 	'volgende &raquo;',
			previous	: 	'&laquo; vorige',
			last		:	'&laquo; laatste',
			first		:	'eerste &raquo;',
			close 		: 	'sluiten',
			tooltip		:	'klik voor de volgende foto'
		}	
	});

});


var clickbox = new Object();

clickbox.init = function(settings){
	this.settings = settings
	
	this.preLoader = new Image();
	$(this.preLoader).bind('load',function(){clickbox.imageLoaded();});
	
	$(this.settings.selector).click(function(){
		clickbox.show(this);
		this.blur();
		return false;
	});
	
	$('body').append('<div id="cbModal" style="display:none"></div>');
	$('body').append('<div id="cbMask" style="display:none"></div>');
	$('body').append('<div id="cbLoader" style="display:none"></div>');
	
	$('#cbModal').append('<div id="cbCaption"></div>');
	$('#cbModal').append('<div id="cbContentholder"></div>');
	$('#cbModal').append('<div id="cbButtons"></div>');
	$("#cbButtons").append(
		'<span id="cbPrevious" class="cbButton"></span>' +
		'<span id="cbNext" class="cbButton"></span>' +
		'<span id="cbClose" class="cbButton">' + this.settings.dictionary.close +'</span>' + 
		'<span id="cbCounter"></span>'
	);

	$('#cbMask').click (function(){clickbox.close();});
	$('#cbClose').click (function(){clickbox.close();});

}



clickbox.show = function(node){
	$('#cbMask').show();
	$("#cbNext").hide().unbind('click');
	$("#cbPrevious").hide().unbind('click');
	$("#cbContentholder").unbind('click');


	if(node.tagName && node.tagName.toLowerCase() == "a"){
		var url = node.href;
	}
	else if(node.tagName && node.tagName.toLowerCase() == "img"){
		var url = node.src.replace("_th","");
	}
	else{
		return false;	
	}

	var baseURL;
	
	if(url.indexOf("?")!==-1){ //ff there is a query string involved
		baseURL = url.substr(0, url.indexOf("?"));
	}
	else{ 
		baseURL = url;
	}
	   
	var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
	var urlType = baseURL.toLowerCase().match(urlString);

	if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){
		//code to show images
	
		var rel = node.rel || false;
		if(rel !== false){
			var selector = '[rel="' + rel +'"]';
			var coll = $(selector).get();
		}
		else{
			var coll = 	$(this.settings.selector).get();
//			clickbox.gallery(coll,node);
		}
		clickbox.gallery(coll,node);
		
	}
	else{
		var queryString = url.replace(/^[^\?]+\??/,'');
		url += "&random=" + (new Date().getTime());
		var params = this.parseQuery( queryString );		
		var width = (params.cbwidth * 1 ) + 30 + 20 || 630; //defaults to 630 if no paramaters were added to URL
		var height = (params.cbheight * 1) + 40 + 20 || 440; //defaults to 440 if no paramaters were added to URL
		
		$('#cbModal').css({
			marginTop	:	(- height/2 ) + 'px',
			width 		:	width + 'px',
			marginLeft 	:	(- width / 2) + 'px',
			height		: 	height + 'px'
		});
		
		switch(params.cbmode){
			case "iframe":
				$("#cbContentholder").html('<iframe id="cbIframe" frameborder="0" src="' + url + '" onload="clickbox.display();"/>').css({height:'auto'});
				$('#cbIframe').css({
					height	:	 (height - 38)  + 'px',
					width 	:	(width - 2) + 'px'
				});
				
				break;
				
			case "ajax":
				$("#cbContentholder").load(url,function(){clickbox.display();}).addClass("ajax").css({height:(height - 36)  + 'px'});
				
				break;
			
			case "inline":
				$("#cbContentholder").html($('#' + params['cbid']).html()).addClass("ajax").css({height:(height - 36)  + 'px'});
				this.display();
				break;
		}

		var caption = node.title ? node.title : $(node).html();
		$("#cbCaption").html(caption);
		$("#cbCounter").hide();
	}
	
	return false;
}

clickbox.gallery = function(coll,node){
	this.display();
	this.nodeFoundInGroup = false;
	var caption = node.title || node.alt || node.name || "";
	
	for (var t = 0; t < coll.length && !(coll[t] == node) ; t++) ;
	var imageCount = coll.length == 1 ? "" : ("foto " + (t + 1) +" van "+ (coll.length));


	switch(t){
		case 0:	
			p = coll.length - 1;	
			n = coll.length > 1 ? 1 : 0;
			pCaption = coll.length == 1 ? "" : ( coll.length > 2 ? this.settings.dictionary.last : "");
			nCaption = coll.length == 1 ? "" : this.settings.dictionary.next;
			
			break;
			
		 case coll.length - 1:
			p = coll.length - 2;
			n = 0;
			pCaption = this.settings.dictionary.previous;
			nCaption = coll.length > 2 ? this.settings.dictionary.first : "";
			break;
			
		default:
			p = t - 1;
			n = t + 1;
			pCaption = this.settings.dictionary.previous;
			nCaption = this.settings.dictionary.next;
			break;	
	}
	
	
	this.previous = coll[p];
	this.next = coll[n];
	
	var src = node.href || node.src;

	this.preLoader.src = src.replace("_th","");

		
	$("#cbCaption").html(caption).show();
	$("#cbCounter").html(imageCount).show();
	$("#cbPrevious").html(pCaption).show().click( function(){clickbox.showPrevious();});
	$("#cbNext").html(nCaption).show().click(function(){clickbox.showNext();});
	$("#cbContentholder").click(function(){clickbox.showNext();}).removeClass("ajax");

}

clickbox.showPrevious = function(){
	this.show(this.previous);
}

clickbox.showNext = function(){
	this.show(this.next);
}

clickbox.close = function(){
	$('#cbMask').hide();
	$('#cbModal').hide();
	$("#cbContentholder").html("");
	
};
		
clickbox.display = function(){
	$('#cbModal').fadeIn(800);
};
		
clickbox.imageLoaded = function(){
	var width = this.preLoader.width + 20; //20px is 2x border
	var height = this.preLoader.height + 20;//20px is 2x border
		
	$('#cbModal').css({
		marginTop	:	(- height /2 - 32) + 'px',
		width 		:	width + 'px',
		marginLeft 	:	(- width / 2) + 'px',
		height		: 	(height + 50) + 'px'
	});
	
	$('#cbContentholder').css({height:height}).fadeIn(800).html('<img src="' + this.preLoader.src + '" id="cbImage" title="' + this.settings.dictionary.tooltip + '"/>');
}

clickbox.parseQuery = function( query ) {
   var Params = {};
   if ( ! query ) {return Params;}// return empty object
   var Pairs = query.split(/[;&]/);
   for ( var i = 0; i < Pairs.length; i++ ) {
      var KeyVal = Pairs[i].split('=');
      if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
      var key = unescape( KeyVal[0] );
      var val = unescape( KeyVal[1] );
      val = val.replace(/\+/g, ' ');
      Params[key] = val;
   }
   return Params;
}