function change_img(img_id,img_new){
	$('#'+img_id).attr({ 'src': img_new })
}
function loadCollection(collectie_id){
	$('#img_load_c').show();
		pic_id = collectie_id;

		var pOffset = parseInt($('#viewport').offset().left);
		var pdOffset = parseInt($('#pic_'+pic_id).offset().left);
		var pScroll = pdOffset - pOffset - 450;
		$('#viewport').animate({scrollLeft: '+=' + pScroll + 'px'}, 600);
	uid = Math.floor(Math.random()*1001);
	$.ajax({ type: "POST", url: 'db/db_load_collectie.php?uid='+uid, data: 'collectie_id='+collectie_id, dataType: 'xml', success: function(xml){
	$('#pic_tn_1').fadeOut(250);
	$('#pic_tn_2').fadeOut(250);
	$('#pic_tn_3').fadeOut(250);
	$('#main_pic').fadeOut(250,function(){
		var jData = $( xml );
		var jSections = jData.children();
		$('collectie', jSections).each(function(){
			var coll_1_tn = $(this).find('coll_1_tn').text();
			var coll_1_tn_w = $(this).find('coll_1_tn_w').text();
			var coll_1_tn_h = $(this).find('coll_1_tn_h').text();
			var coll_1_mid = $(this).find('coll_1_full').text();
			var coll_1_mid_w = $(this).find('coll_1_mid_w').text();
			var coll_1_mid_h = $(this).find('coll_1_mid_h').text();
			var coll_2_tn = $(this).find('coll_2_tn').text();
			var coll_2_tn_w = $(this).find('coll_2_tn_w').text();
			var coll_2_tn_h = $(this).find('coll_2_tn_h').text();
			var coll_2_mid = $(this).find('coll_2_full').text();
			var coll_2_mid_w = $(this).find('coll_2_mid_w').text();
			var coll_2_mid_h = $(this).find('coll_2_mid_h').text();
			var coll_3_tn = $(this).find('coll_3_tn').text();
			var coll_3_tn_w = $(this).find('coll_3_tn_w').text();
			var coll_3_tn_h = $(this).find('coll_3_tn_h').text();
			var coll_3_mid = $(this).find('coll_3_full').text();
			var coll_3_mid_w = $(this).find('coll_3_mid_w').text();
			var coll_3_mid_h = $(this).find('coll_3_mid_h').text();
			//main
			$('#main_pic').attr({ 'src': coll_1_mid });
			$('#main_pic').css({ 'width': coll_1_mid_w+'px', 'height': coll_1_mid_h+'px' });
			$('#pic_main_img').width(coll_1_mid_w);
			$('#pic_main_img').height(coll_1_mid_h);
			var image_left = parseInt(coll_1_mid_w) + 50;

			if (coll_1_tn != ""){
				$('#pic_tn_1').html("<a href=\"javascript:void(0);\" onclick=\"showImage('"+coll_1_mid+"',"+coll_1_mid_w+","+coll_1_mid_h+");\"><img id=\"thumb_pic_1\" src=\""+coll_1_tn+"\" style=\"width:"+coll_1_tn_w+"px;height:"+coll_1_tn_h+"px;border:0px;\"/></a>");
				$('#pic_tn_1').css({ 'width': coll_1_tn_w+'px', 'left': image_left+'px' });
				$('#pic_tn_1').fadeIn(250);
			}
			if (coll_2_tn != ""){
				$('#pic_tn_2').html("<a href=\"javascript:void(0);\" onclick=\"showImage('"+coll_2_mid+"',"+coll_2_mid_w+","+coll_2_mid_h+");\"><img id=\"thumb_pic_2\" src=\""+coll_2_tn+"\" style=\"width:"+coll_2_tn_w+"px;height:"+coll_2_tn_h+"px;border:0px;\"/></a>");
				$('#pic_tn_2').css({ 'width': coll_2_tn_w+'px', 'left': image_left+'px' });
				$('#pic_tn_2').fadeIn(250);
			}
			if (coll_3_tn != ""){
				$('#pic_tn_3').html("<a href=\"javascript:void(0);\" onclick=\"showImage('"+coll_3_mid+"',"+coll_3_mid_w+","+coll_3_mid_h+");\"><img id=\"thumb_pic_3\" src=\""+coll_3_tn+"\" style=\"width:"+coll_3_tn_w+"px;height:"+coll_3_tn_h+"px;border:0px;\"/></a>");
				$('#pic_tn_3').css({ 'width': coll_3_tn_w+'px', 'left': image_left+'px' });
				$('#pic_tn_3').fadeIn(250);
			}
			
			//$('#main_pic').load(function() {
				$('#img_load_c').hide();
				$('#main_pic').fadeIn(250);
			//});
			$('#main_pic').unbind('mouseover').bind('mouseover', function() {
				resizetobig(coll_1_mid_w,coll_1_mid_h);
			}).unbind('mouseout').bind('mouseout', function() {
				resizetonormal(coll_1_mid_w,coll_1_mid_h);
			});

		});
	});
	
	},error: function(XMLHttpRequest, textStatus, errorThrown) {
		//alert(errorThrown);
	}
	});
}
function resizetobig(orgW,orgH){
	var picWidth = parseInt((orgW * 460) / orgH);
	var picHeight = 460;
	$('#main_pic').animate({ width: picWidth, height: picHeight }, 250);
	$('#pic_main_img').animate({ width: picWidth, height: picHeight }, 250);

}
function resizetonormal(orgW,orgH){
	$('#main_pic').animate({ width: orgW, height: orgH }, 250);
	$('#pic_main_img').animate({ width: orgW, height: orgH }, 250);

}
function showImage(imageUrl,imageW,imageH){
	$('#img_load_c').show();
	$('#main_pic').fadeOut(250,function(){
		$('#main_pic').attr({ 'src': imageUrl });
		$('#main_pic').css({ 'width': imageW+'px', 'height': imageH+'px' });
		$('#pic_main_img').width(imageW);
		var image_left = parseInt(imageW) + 50;
		$('#pic_tn_1').animate({ left: image_left }, 250);
		$('#pic_tn_2').animate({ left: image_left }, 250);
		$('#pic_tn_3').animate({ left: image_left }, 250);
		//$('#main_pic').load(function() {
			$('#main_pic').fadeIn(250);	
			$('#img_load_c').hide();
		//});
		$('#main_pic').unbind('mouseover').bind('mouseover', function() {
			resizetobig(imageW,imageH);
		}).unbind('mouseout').bind('mouseout', function() {
			resizetonormal(imageW,imageH);
		});		
	});
}
function showImageBoetiek(imageUrl,imageW,imageH){
	$('#img_load_c').show();
	$('#main_pic').fadeOut(250,function(){
		$('#main_pic').attr({ 'src': imageUrl });
		$('#main_pic').css({ 'width': imageW+'px', 'height': imageH+'px' });
		$('#pic_main_img').width(imageW);

		//$('#main_pic').load(function() {
			$('#img_load_c').hide();
			$('#main_pic').fadeIn(250);
			$('#main_pic').unbind('mouseover').bind('mouseover', function() {
				resizetobig(imageW,imageH);
			}).unbind('mouseout').bind('mouseout', function() {
				resizetonormal(imageW,imageH);
			});	
		//});
	});
}