function Showcase(name, container, auto, ss_interval, ss_transition){
	
	// (c) 2008 by Buro de Peper
	//     http://www.burodepeper.nl
	
	var c;
	var items = new Array;
	var current = 0;
	var slideshow = false;
	if(ss_interval){
		var slideshow_interval = ss_interval;
	} else {
		var slideshow_interval = 4000;
	}
	if(ss_transition){
		var transition_interval = ss_transition;
	} else {
		var transition_interval = 333;
	}
	var timeout = null;
	var in_transition = false;
	
	// showcase zoekt in een bepaalde DIV naar een eerste UL en haalt daar de gegevens uit
	// de UL wordt verborgen (als die dat sowieso nog niet is door css) en na de UL wordt
	// een nieuwe DIV gecreerd waarin de daadwerkelijke animaties zichtbaar worden
	
	this.init = function(){
		
		// by default the slideshow doesn't "roll"
		slideshow = auto;
		
		// load items from a <ul>: h4=title/desription/alt, img=img
		$("#"+container+" img").each(function(i){
			var item_id = this.id;
			var item_src = $(this).attr("src");
			items[items.length] = new Array(item_id, item_src);
			// console.log(item_id, item_src);
		});			
		
		// hide the items
		// this might stutter on slower machines
		$("#"+container+" img").each(function(i){ this.style.display="none"; });

		// create <div>'s for output
		var div_upper = $("<div/>").addClass("upper");
		
		// create slide
		div_upper = this.create_slide(div_upper, 0);
		
		// append the two containers
		$("#"+container).append(div_upper);
		div_upper.after($("<div/>").addClass("lower"));

		if(slideshow){
			timeout = setTimeout(name+".show_item('next', false)", slideshow_interval);
		}
		
	}
	
	this.show_item = function(id, manual){

		if(!in_transition){
			
			in_transition = true;

			clearTimeout(timeout);

			if(manual){
				slideshow = false;
			}

			if(id=="next"){
				if(current<items.length-1){
					id = current+1;
				} else {
					id = 0;
				}
			}
			current = id;

			// fill the div_lower with the next content
			var div_lower = $("#"+container+" div.lower");
			var div_upper = $("#"+container+" div.upper");

			// create slide
			div_lower = this.create_slide(div_lower, id);

			// make the transition
			div_upper.fadeOut(transition_interval, function(){
				div_upper.remove();
				div_lower.attr("class", "upper");
				div_lower.after($("<div/>").addClass("lower"));
				in_transition = false;
			});
			
			// custom
			$("#showcase_navigation li").each(function(){
				if(this.id.substring(3)==id){
					$("#"+this.id).animate({opacity:1}, transition_interval);
				} else {
					$("#"+this.id).animate({opacity:.35}, transition_interval);
				}
			});

			if(slideshow){
				timeout = setTimeout(name+".show_item('next', false)", slideshow_interval);
			}
		}
		
	}

	this.create_slide = function(div, id){

		div.append($("<img/>").attr("src", items[id][1]).attr("id", items[id][0]));
		return div;

	}


}