var num;
var index=0;

jQuery(document).ready(function() {
   num=jQuery('#mycarousel li').length;
   
    jQuery('#mycarousel').jcarousel({
	     wrap: 'circular',
		 auto: 3,
	    initCallback: mycarousel_initCallback,		 
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
        scroll: 1
		
    });
	
	//
	
	
});
function mycarousel_initCallback(carousel) {

   //alert("ddd");
   
   jQuery("#wrap").bind("mouseenter",function()
	{
	
	carousel.options.auto=0;
	carousel.stopAuto();
	
	
	}
	);
	jQuery("#wrap").bind("mouseleave",function()
	{
	
	  carousel.options.auto=3;
	  carousel.startAuto();
	}
	);

     jQuery('.page').bind('click', function() {
	    index=jQuery(this).attr("title")-1;
		
		carousel.scroll(jQuery.jcarousel.intval(index));
		changeImage();
		
		//
		//
		 });
		
	 return false;
}

function changeImage()
{
   // alert(index);
    $(".page").each(function()
	{
	     var title=jQuery(this).attr("title");
		 if(title==index)
		 {
		     $(".page").html("<img src='images_en/point2.jpg' border='0'>");
			 $(this).html("<img src='images_en/point.jpg' border='0'>");
			 //
			 $("#changeTitle").html($(this).attr("name"));
		 }
	}
	);
}
//
function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{    
    
     index++;
	 if(index>num)
	 index=1;
      changeImage();
   var classname='#data-li'+index;
  //
	 
  // var classname='#mycarousel-'+index;
	var html= jQuery(classname).html();
	//alert(i);
	carousel.add(i,html);
	
}

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{ 
//alert($(".mycarousel li").length);
    if($("#mycarousel li").length>num)
     {
		
		 carousel.remove(i);}
}