jQuery(function() {
	jQuery("#items img:last").load(function(){
			count = jQuery("#items").children("a").size();
			//alert(count);
			StrHTML = "";
			if(count>1)
			{
				StrHTML += '<a id="prev" class=""><img src="/images/frontend/theme/kalluka/prev.gif" border="0" align="absmiddle" style="margin-right: 5px;" /></a>';
			}
			for(i=0;i<count; i++)
			{
				StrHTML += '<a id="str" class="">'+(i+1)+'</a>';	
			}
			if(count>1)
			{
				StrHTML += '<a id="next" class=""><img src="/images/frontend/theme/kalluka/next.gif" border="0" align="absmiddle" style="margin-left: 5px;" /></a>';
			}
			jQuery("#items img:first").clone().appendTo("#items");
			jQuery("#ZRnavi").html(StrHTML);
			jQuery("#ZRscrollable").scrollLeft(1);
			jQuery("#ZRnavi a#str:first").addClass("ZRactive");
				
			
			jQuery("a#str").click(function(){
				index = jQuery("#ZRnavi a#str").index(this);
				start = jQuery("#ZRscrollable").scrollLeft();
				end = (index * 775);
				if(start == '')
				{
					start = 0;
				}
				//jQuery("items").animate(({ scrollleft: 780 }, "slow"))
				//alert(index);
				//alert('start:'+start+' - end:'+end);
				
				jQuery("#ZRnavi a").removeClass("ZRactive");
				jQuery(this).addClass("ZRactive");
				if(start < end)
				{
					jQuery("#ZRscrollable").animate({scrollLeft: end}, 1000);
				}
				if(start > end)
				{
					jQuery("#ZRscrollable").animate({scrollLeft: end}, 1000);
				}
			}); 
			jQuery("a#next").click(function(){
				count = jQuery("a#str").size();
				index = jQuery("#ZRscrollable").scrollLeft() / 775;				
				end = (index + 1) * 775;
				jQuery("#ZRnavi a#str").removeClass("ZRactive");
				jQuery("a#str").eq(index+1).addClass("ZRactive");
				jQuery("#ZRscrollable").animate({scrollLeft: end}, 1000);
				if(end >= (count*775))
				{
					end = 0;
					jQuery("#ZRscrollable").animate({scrollLeft: end}, 1);
					jQuery("a#str").eq(0).addClass("ZRactive");
				}
			});
			jQuery("a#prev").click(function(){
				count = jQuery("a#str").size();
				index = jQuery("#ZRscrollable").scrollLeft() / 775;				
				end = (index - 1) * 775;
				jQuery("#ZRnavi a").removeClass("ZRactive");
				jQuery("a#str").eq(index-1).addClass("ZRactive");
				jQuery("#ZRscrollable").animate({scrollLeft: end}, 1000);
				if(end <= 0)
				{
					end = (count) * 775;
					jQuery("#ZRscrollable").animate({scrollLeft: end}, 1);
					jQuery("a#str").eq(count).addClass("ZRactive");
				}
			});
		});
});
jQuery.fn.extend({
	delay: function( time, type ) {
		time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
		type = type || "fx";

		return this.queue( type, function() {
			var elem = this;
			setTimeout(function() {
				jQuery.dequeue( elem, type );
			}, time );
		});
	}
});
function autoSlide(){
	count = jQuery("#items").children("a").size();
	index = Math.round(jQuery("#ZRscrollable").scrollLeft() / 775);				
	end = (index + 1) * 775;
	
	jQuery("#ZRnavi a#str").removeClass("ZRactive");
	//alert(end+'>='+(count*775))
	//alert(index);
	if(end >= (count*775))
	{
		jQuery("a#str").eq(0).addClass("ZRactive");
		jQuery("#ZRscrollable").animate({scrollLeft: 0}, 1000);
	}
	else
	{
		jQuery("a#str").eq(index+1).addClass("ZRactive");
		jQuery("#ZRscrollable").animate({scrollLeft: end}, 1000);
	}
	setTimeout('autoSlide()',8000);
}