var cropTimer;

var prev_br;
var resize_bezig=false;
var double_refresh=false;
var previous_breakpoint;

init_images();

function images_loaded(){
	fix_equal_height();
	fix_teasers();
	show_short_long();
	nav_sort();
	resize_bezig=false;
	if(double_refresh==true) {
		fix_images();
	}
	double_refresh=false;
}

function images_loaded_first_time(){
	$(window).resize(function(){
		if(cropTimer!=false) clearTimeout(cropTimer);
		cropTimer = setTimeout(function(){ fix_images(); }, 500);
	});
	images_loaded();
}

function fix_images() {
	if(resize_bezig==true) {
		double_refresh=true;
		return false;
	}
	resize_bezig=true;
	unfix_teasers();
	breakpointIndex = get_breakpoint_index();
	if(breakpointIndex==previous_breakpoint) {
		images_loaded();
		return false;
	}
	//alert('dynamic images: resize gebeurd, alle elementen terug op height: auto. druk op ok om verder te gaan..');
	previous_breakpoint=breakpointIndex;
	collection = $('img[breakpoint_image]:not([data-cropactive="yes"])');
	var todo = collection.length;
	collection.each(function(){
		var img = new Image();
		$.each(this.attributes, function(i, attrib){
			var name = attrib.name;
			var value = attrib.value;
			if(name!='src') $(img).attr(name,value);
		});

		var temp = $(this).attr('data-breakpoint'+breakpointIndex+'_crop').split('x');
        var width = temp[0];
        var height = temp[1];

		var that=$(this);
		img.onload = function() {
			//console.log( this.src + ' loaded' );
			//console.log( that );
			that.replaceWith( $(this) );
			todo--;
			if(todo==0) images_loaded();
		}
        img.onerror= function() {
        	this.src = $(this).attr('data-original') ? 'http://www.contend.be:8888/unsafe/'+width+'x'+height+'/smart/'+$(this).attr('data-original') : 'http://dummyimage.com/'+width+'x'+height;
        }
        var src = $(img).attr('data-src');
        src = src.replace('{{width}}',width).replace('{{height}}',height);
        //console.log( src + ' loading' );
        img.src=src+'?stamp='+new Date();
        //img.src = 'http://dummyimage.com/'+width+'x'+height;
	});
	cropTimer=false;
}

function init_images(){
	breakpointIndex = get_breakpoint_index();
	prev_br=breakpointIndex;
	var collection = $('div[breakpoint_image="true"]');
	var todo = collection.length;
	collection.each(function(){

		var img = new Image();
		$.each(this.attributes, function(i, attrib){
			var name = attrib.name;
			var value = attrib.value;
			$(img).attr(name,value);
		});

		var temp = $(this).attr('data-breakpoint'+breakpointIndex+'_crop').split('x');
        var width = temp[0];
        var height = temp[1];

		var that=$(this);
		img.onload = function() {
			todo--;
			if(todo==0) images_loaded_first_time();
		}
		img.onerror= function() {
			this.onerror = function() {};
			this.src = $(this).attr('data-original') ? 'http://www.contend.be:8888/unsafe/'+width+'x'+height+'/smart/'+$(this).attr('data-original') : 'http://dummyimage.com/'+width+'x'+height;
        	/**/
        };

        var src = $(img).attr('data-src');
        src = src.replace('{{width}}',width).replace('{{height}}',height);
        img.src=src+'?stamp='+new Date();
        //img.src = 'http://dummyimage.com/'+width+'x'+height;
        $(this).replaceWith( img );
	});
}
function get_breakpoint_index() {
	var scrollbar_width = window.innerWidth - document.documentElement.clientWidth;
	for(var i=14;i>=0;i--) {
		if( $('body').outerWidth()+scrollbar_width >= breakpoint_values[i] ) return i;
	}
	return 0;
}