function viewIcon(data) {
	var icon = "#icon_"+data.id;
	$(icon).get(0).data = data;
	if ($(icon).hasClass("open")) {	
		
		var iconinfo = getIconInfo();
		$(icon).find(".iconinfo").empty();
		$(icon).find(".iconinfo").append(iconinfo);
		var iconproperties = getIconProperties(data);
		$(icon).find(".iconinfo .iconproperties").html(iconproperties);
		
		for (var i=0; i<data.designers.length; i++) {
			var icondesigner = getIconDesigner(data.designers[i]);
			$(icon).find(".iconinfo .icondesignerinfo").append(icondesigner);
		}
		
		if (data.relatedicons.length > 0) {
			var iconrelated = getIconRelated(data.relatedicons);
			$(icon).find(".iconinfo .iconrelated").html(iconrelated);
		}
		
		$(icon).find(".iconinfo .icondesigner").truncate({
			max_length: 200,
			more: '[…]',
			less: '[^]'
		});
		
		$(icon).find(".iconinfo .relatedlist").truncate({
			max_length: 100,
			more: '[…]',
			less: '[^]'
		});
		
		
		
		showLargeIcon(icon);
	}

}

function showLargeIcon(icon) {
	$(icon).find(".iconmedia").css("width", "100%");
	$(icon).find(".iconmedia").css("height", "300px");
	resizeImage($(icon).find(".iconmediaitem:first img"));

	if ($(icon).hasClass("open")) {	
		//if ($(icon).height() > $(icon+" .iconabout").height()) $(icon+" .iconabout").css("height", $(icon).height()+"px");
		
		$.scrollTo($(icon), {
			duration: 100,
			offset: -100
		});
		
		var img = new Image();
		$(img).load(function() {
			//$(icon).find(".iconmediaitem:first img").attr("src", $(this).attr("src"));
			if ($(icon).hasClass("open")) {	
				$(icon).find(".iconmediaitem:first").empty().append(this);
				resizeImage($(this));
				$(this).unbind("load");
				initIconMedia(icon);
			}
	
		}).attr("src", $(icon).find("input[name=iconsrclg]").val());
	}
}

function getDisplayData(w, h, pw, ph) {
	var rx = w / pw;
	var ry = h / ph;
	if (rx > ry) {
		var side = "width";
	} else {
		var side = "height";
	}
	return side;
}

function initIconMedia(icon) {
	//if (!$(icon).hasClass("medialoaded")) {
		var data = $(icon).get(0).data;
		$(icon).addClass("medialoaded");
		
		
		var iconmedia = $(icon).find(".iconmedia li:first").clone(true);
		var iconcaption = $(icon).find(".iconcaptions li:first").clone(true);
		
		if (typeof(data.mainimages) == "object") {
		for (var i=0; i<data.mainimages.length; i++) {
			if (i > 0) {
			var mainimgfilesrc = data.mainimages[i].path + data.mainimages[i].filename; 
			
			$(icon).find(".iconmedia").append(iconmedia.clone(true));
			var mainimgitem = $(icon).find(".iconmedia li:last");
			mainimgitem.find(".iconmediaitem").empty();
			mainimgitem.find(".iconmediaitem").append('<img src="'+mainimgfilesrc+'" />');
			mainimgitem.addClass("mainimage");
			
			mainimgitem.find(".iconmediaitem img").css("width", "auto").css("height", "auto");
			var scaleside = getDisplayData(parseInt(data.mainimages[i].width), parseInt(data.mainimages[i].height), mainimgitem.find(".iconmediaitem").width(), mainimgitem.find(".iconmediaitem").height());
			mainimgitem.find(".iconmediaitem img").css(scaleside, "100%");

			
			mainimgitem.hide();
			
			$(icon).find(".iconcaptions").append(iconcaption.clone(true));
			$(icon).find(".iconcaptions li:last .iconcaption").empty();	
			} else {
				var mainimgitem = $(icon).find(".iconmedia li:first");
				var scaleside = getDisplayData(parseInt(data.mainimages[0].width), parseInt(data.mainimages[0].height), mainimgitem.find(".iconmediaitem").width(), mainimgitem.find(".iconmediaitem").height());
				mainimgitem.find(".iconmediaitem img").css("margin", "0");
				mainimgitem.find(".iconmediaitem img").css("width", "auto").css("height", "auto");
				mainimgitem.find(".iconmediaitem img").css(scaleside, "100%");
				mainimgitem.addClass("mainimage");
			}
		}
		}
		
		//if (data.sketches.length > 0) $(icon).find(".iconthumbs li:last").after('<li class="thumbspacer"></li>');
		
		for (var i=0; i<data.sketches.length; i++) {
			var sketchfilesrc = data.sketches[i].path + data.sketches[i].filename;
			
			$(icon).find(".iconmedia").append(iconmedia.clone(true));
			var sketchitem = $(icon).find(".iconmedia li:last");
			
			sketchitem.find(".iconmediaitem").empty();
			sketchitem.find(".iconmediaitem").append('<img src="'+sketchfilesrc+'" />');
			sketchitem.addClass("sketch");
			
			var scaleside = getDisplayData(parseInt(data.sketches[i].width), parseInt(data.sketches[i].height), sketchitem.find(".iconmediaitem").width(), sketchitem.find(".iconmediaitem").height());
			sketchitem.find(".iconmediaitem img").css(scaleside, "100%");

			sketchitem.hide();
			
			$(icon).find(".iconcaptions").append(iconcaption.clone(true));
			$(icon).find(".iconcaptions li:last .iconcaption").empty();
			$(icon).find(".iconcaptions li:last .iconcaption").append(data.sketches[i].caption);			
		}
		
		//if (data.storypages.length > 0) $(icon).find(".iconthumbs li:last").after('<li class="thumbspacer"></li>');
			
		for (var i=0; i<data.storypages.length; i++) {
		
			if (data.storypages[i].imgflv == "afbeelding") {
				var pagefilesrc = data.storypages[i].imagepath + data.storypages[i].imagefilename;
			} else if (data.storypages[i].imgflv == "flash film") {
				var pagefilesrc = "/gfx/verhaal_films/" + data.storypages[i].flashfilm;
			}
			
			if (pagefilesrc != "") {
				data.storypages[i].pagefilesrc = pagefilesrc;
			} else {
				var pagefilesrc = data.mainimages[0].path + data.mainimages[0].filename; 
			}
			
			$(icon).find(".iconmedia").append(iconmedia.clone(true));
			
			var pageitem = $(icon).find(".iconmedia li:last");
	
			if (data.storypages[i].imgflv == "afbeelding") {
				pageitem.find(".iconmediaitem").empty();
				
				pageitem.find(".iconmediaitem").empty();
				pageitem.find(".iconmediaitem").append('<img src="'+pagefilesrc+'" />');
				
				
				var scaleside = getDisplayData(parseInt(data.storypages[i].width), parseInt(data.storypages[i].height), pageitem.find(".iconmediaitem").width(), pageitem.find(".iconmediaitem").height());
				pageitem.find(".iconmediaitem img").css(scaleside, "100%");

				
				pageitem.hide();
				
			} else if (data.storypages[i].imgflv == "flash film") {
				
				console.log(data.storypages[i]);
				
				pageitem.find(".iconmediaitem").empty();
				var fileid = "iconvideo_" + data.storypages[i].id;
				var filecontainerid = "iconvideocontainer_" + data.storypages[i].id;
				var filewidth = 500;
				var fileheight = 300;
				
				var flvplayer = getFlvPlayer();
				pageitem.find(".iconmediaitem").append(flvplayer);
				pageitem.find(".videocontainer").attr("id", filecontainerid);
				
				if (data.storypages[i].filmimage != "") {
					var videopreview = "/gfx/verhaal_images/" + data.storypages[i].filmimage;
				} else {
					var videopreview = "/tnt/inc/img/videoIcon.png";
				}
				
				var videothumb = "";
				if (data.storypages[i].filmthumb != "") {
					videothumb = data.storypages[i].filmthumb;
				}
				embedFlv(videopreview, videothumb, pagefilesrc, fileid, filecontainerid, filewidth, fileheight, false);
				
				pageitem.hide();
			}	
			pageitem.addClass("story");
			$(icon).find(".iconcaptions").append(iconcaption.clone(true));
	
			$(icon).find(".iconcaptions li:last .iconcaption").empty();
			if ((i > 0) && (data.storypages[i-1].pagefilesrc == "")) {
				$(icon).find(".iconcaptions li:last .iconcaption").append(data.storypages[i-1].content);
			}
			
			$(icon).find(".iconcaptions li:last .iconcaption").append(data.storypages[i].content);
		}
		
		
		$(icon).find(".iconcaption").truncate({
			max_length: 150,
			more: '[…]',
			less: '[^]'
		});
	
		
		$(icon).find(".iconcaptions li").hide();
		$(icon).find(".iconcaptions li:first").show();
		
		$(icon).find(".iconmedia").cycle({ 
			fx:    'fade', 
			speed:  500,
			timeout: 5000,
			delay: 5000,
			pager: '#iconnav_'+data.id,
			height: '300px',
			pagerClick: function() {
				$("#iconmedia_"+data.id).cycle('pause');
			}, 
			before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
				$("#iconcaptions_"+data.id+' li').hide();
				$("#iconcaptions_"+data.id+' li:eq('+$(nextSlideElement).index()+')').show();
				
				if ($(currSlideElement).find("object").length > 0) {
					$(currSlideElement).find("object").get(0).jsPauseVideo();
				}
				/*
				if (currSlideElement.videoplayer) {
					currSlideElement.videoplayer.pause()
					
				}
				
				cIcon.find("object").each(function(i) {
					this.jsPauseVideo();
				});

				*/
			},
			
			after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
			}
			
		});
		
		$(icon+" .iconimages").click(function() {
			$(icon).find(".iconmedia").cycle('pause');

		});

		
		$(icon).find(".iconthumbs a").empty();
		$(icon).find(".iconthumbs").children().each(function(i) {
			var mediaitem = $(icon).find('.iconmediaitem:eq('+i+')');
			if (mediaitem.find("img").length > 0) {
				
				var thumbpathdata = mediaitem.find("img").attr("src").split("/");
				var thumbfilename = thumbpathdata.pop();
				
				if (thumbfilename.substring(0, 4) == "600_") thumbfilename = thumbfilename.replace("600_", "70_");
				else thumbfilename = "_" + thumbfilename;
				
				var thumbpath = thumbpathdata.join("/") + "/" + thumbfilename;
				
				thumbpath = thumbpath.replace(/\s/gi, "%20");
			} else if (mediaitem.find("object").length > 0) {
				var flashvars = mediaitem.find("object param[name=flashvars]").val();
				var thumbfilename = gup("thumbPath", "http://iconenvandepost.nl/?"+flashvars);
				
				if (thumbfilename != "") {
					var thumbpath = "gfx/verhaal_images/" + thumbfilename;
				} else {
					var thumbpath = "/tnt/inc/img/videoIconSm.png";
				}
				
			} else {
				//var thumbpath = "/tnt/inc/img/videoIconSm.png";
			}
			
			$(this).css("background-image", "url("+thumbpath+")");
			
			$(this).wrap('<div class="navslide"></div>');
			
		});
		
		
		var firstsketchthumb;
		var firststorythumb;
				
		if (data.sketches.length > 0) {
			var firstsketchthumb = $(icon).find(".navslide:eq("+$(icon).find(".sketch:first").index()+")");
		}
		
		if (data.storypages.length > 0) {
			var firststorythumb = $(icon).find(".navslide:eq("+$(icon).find(".story:first").index()+")");
		}
		
		if (firstsketchthumb != undefined) {
			firstsketchthumb.before('<div class="thumbspacer" />');
			firstsketchthumb.append('<div class="thumblabel">Schetsen</div>');
		}

		if (firststorythumb != undefined) {
			firststorythumb.before('<div class="thumbspacer" />');
			firststorythumb.append('<div class="thumblabel">Verhaal</div>');

		}
				
		/*
		$(icon).find(".navslide:eq("+$(icon).find(".mainimage:last").index()+")").after('<div class="thumbspacer" />');
		$(icon).find(".navslide:eq("+$(icon).find(".sketch:last").index()+")").after('<div class="thumbspacer" />');

		$(icon).find(".navslide:eq("+$(icon).find(".sketch:first").index()+")").append('<div class="thumblabel">Schetsen</div>');
		$(icon).find(".navslide:eq("+$(icon).find(".story:first").index()+")").append('<div class="thumblabel">Verhaal</div>');
		*/
		if ($(icon).height() > $(icon+" .iconabout").height()) $(icon+" .iconabout").css("height", $(icon).height()+"px");
	//}
	
}

function gup(name, src) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(src);
	if(results == null) return "";
	else return results[1];
}


function closeIcons(icon) {
	var openitems = new Array();
	$(".open").each(function(i) {
		openitems.push(this);
	});
	
	for (var i=0; i<openitems.length; i++) {
		var cIcon = $(openitems[i]);	
	
		cIcon.find(".iconmedia").cycle("destroy");
		
		cIcon.find(".iconmedia li:gt(0)").remove();
		cIcon.find(".iconcaptions li:gt(0)").remove();
		cIcon.find(".iconthumbs").empty();
		
		
		cIcon.find(".iconmedia li:first").css("opacity", "1").show();
		cIcon.find(".iconmedia li").css("width", "100%").css("height", "100%");
		
		cIcon.find("object").each(function(i) {
			this.jsPauseVideo();
		});
		
		//cIcon.css("height", cIcon.find("input[name=iconheight]").val()+"px");
		
		cIcon.find(".iconmedia").css("width", "70px");
		cIcon.find(".iconmedia").css("height", "70px");
		
		
		
		cIcon.removeClass("open");
		
		
	
		resizeImage(cIcon.find(".iconmediaitem:first img"));
		
	}
	

}

function openIcon(icon) {
	closeIcons();
	
	setTimeout(function() {
	$(icon).addClass("open");
	resizeImage($(icon).find(".iconmediaitem:first img"));


	if ($(icon).hasClass("loaded")) {
		showLargeIcon("#"+$(icon).attr("id"));
	} else {
		$(icon).addClass("loaded");
		var iconid = $(icon).find("input[name=iconid]").val();
		getIcon(iconid, "viewIcon");
	}
	
	}, 100);
}

function resizeImage(img) {

	img.css("margin", "0").css("width", "auto").css("height", "auto");
	var scaleside = getDisplayData(img.width(), img.height(), img.parent().width(), img.parent().height());
	img.css(scaleside, "100%");
	
	if (scaleside == "width") {
		img.css("margin-top", ((img.parent().height() - img.height()) / 2)+"px");
	}
	/*

	if (img.width() >= img.height()) {
		img.css("width", "100%");
		img.css("margin-top", ((img.parent().height() - img.height()) / 2)+"px");
	} else {
		img.css("height", "100%");
		//img.css("margin-left", ((img.parent().width() - img.width()) / 2)+"px");

	}
	*/
}

function initIcons() {
	$(".icon").hover(function() {
		$(this).find(".iconmain .icontitle a").css("color", "#ff6600");
		$(this).find(".iconmain .icondesigner a").css("color", "#40ad4a");
		
	}, function() {
		$(this).find(".iconmain .icontitle a").css("color", "#666");
		$(this).find(".iconmain .icondesigner a").css("color", "#666");
	});	
	

	$(".icon").css("visibility", "visible");		
	$("#loaded").fadeOut();
	
	$(".icon").each(function(i) {
		resizeImage($(this).find(".iconmediaitem:first img"));
	});
	
	$(".icon").click(function() {
			if (!$(this).hasClass("open")) {
				var icon = this;
				openIcon(icon);
			}
	});
	
	if ($("#autoshow").length > 0) {
		autoShow($("#autoshow").val());
	}
}

function autoShow(id) {
	closeInfo();
	viewRelated(id);

}

function viewSlideshowImage(iconid) {

	$(".icon").show();
	resetFilters();
	if (!$("#icon_"+iconid).hasClass("open")) {
		viewRelated(iconid);
	}
}


function viewRelated(iconid) {
	var icon = "#icon_"+iconid;
	$.scrollTo($(icon), {
		duration: 500,
		offset: -100,
		onAfter: function() {
			openIcon(icon);
		}
	});
}

function embedFlv(preview, thumb, videofile, videoid, containerid, vidwidth, vidheight, autoplay) {
	preview = preview.replace("90_", "");

	var flashvars = {
		imagePath: preview,
		thumbPath: thumb,
		videoPath: videofile,
		autoStart: autoplay,
		autoHide: "true",
		autoHideTime: "2",
		hideLogo: "true",
		volAudio: "60",
		newWidth: vidwidth,
		newHeight: vidheight,
		disableMiddleButton: "true",
		playSounds: "false",
		soundBarColor: "0x3F3F3F",
		barColor: "0x3F3F3F",
		barShadowColor: "0x5C5C5C",
		subbarColor: "0x8C8C8C"
	};
	var params = {
		allowFullScreen: "true"
	};
	var attributes = {
		id: videoid,
		name: videoid
	};
	
	swfobject.embedSWF("/tnt/inc/flash/flvPlayer.swf", containerid, vidwidth, vidheight, "9.0.0", "/tnt/inc/flash/expressInstall.swf", flashvars, params, attributes);
	
	document.getElementById(videoid).style.width = '100%';
}


function responseGetIcons(data) {
	$("#icons").html(data);
	numicons = $("#icons .iconmediaitem img").length;
	$("#numtotal").html(numicons);
	initLightbox();
	
	//iconmediaitem
}