function ZSlider(){
	
	var time = 5000;
	var runnable = true;
	
	this.run = function(){
		init();		
		setInterval(function(){
			rotate();	
		},time);
	};
	
	function init(){
		//set container slider	
		jq('$slider').css({'position':'relative'});
			
		//set the opacity of all images to 0	
		jq('$slider a').css({'position':'absolute', 'float':'left', 'opacity': '0.0'});
		
		//set image border
		jq('$slider a img').css({'width':jq('$slider').css('width'), 'height':jq('$slider').css('height'), 'border':'none'});

		//Resize the width of the caption according to the image width
		jq('$slider .caption').css({'position':'absolute','bottom':'0','opacity': '0.0','background-color':'#FFFFFF','color':'#E51937','height':'70px','width': jq('$slider').css('width'), 'cursor':'pointer'});
		
		addEventListener();
		
		rotate();		
	};
	
	function addEventListener(){
		jq('$slider .caption').click(function() {
			var current = (jq('$slider a.show')?  jq('$slider a.show') : jq('$slider a:first'));			
			if (current.attr('href').trim().indexOf('http://') != -1){
				window.open(current.attr('href'));
		        return false;								
			}else{
				var wgt = zk.Widget.$(current);
				if (wgt.isListen('onClick')) {
					wgt.fire('onClick');
				}
			}
		});
		
		jq('$slider').hover(
				function() {				
					stop();									
				},
				function() {
					setTimeout(function() {
						start();
					}, (time/2));
				});
	};
	
	function start(){
		runnable = true;			
	};

	function stop(){
		runnable = false;
	};

	function rotate() {
		
		//zk.log('ZSlider runnable:' + runnable);
		
		if (!runnable) return;
		
		//if no IMGs have the show class, grab the first image
		var current = (jq('$slider a.show')?  jq('$slider a.show') : jq('$slider a:first'));

		//Get next image, if it reached the end of the slideshow, rotate it back to the first image
		var next = ((current.next().length) ? ((current.next().hasClass('caption'))? jq('$slider a:first') :current.next()) : jq('$slider a:first'));	
		
		//Get next image caption
		var caption = next.find('img').attr('rel');	
		
		//Set the fade in effect for the next image, show class has higher z-index
		next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

		//Hide the current image
		current.animate({opacity: 0.0}, 1000).removeClass('show');
		
		//Set the opacity to 0 and height to 1px
		jq('$slider .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300});	
		
		//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
		jq('$slider .caption').animate({opacity: 0.7}, 100).animate({height: '70px'},500);
		
		//Display the content
		jq('$slider .content').html(caption);								
	};
	
}