jQuery(document).ready(function($){
	var stepInterval = 8000;
    var initialDelay = 10000;
    var fadeTime = 1000;
    var carouselID;
    var i=1;
    function myAfterCall() {
    	$('.carouselProgress').width(0);
    }

    function myBeforeCall() {
    	$('#echo2-carousel-header .active').removeClass('active');
    	startProgress();
    	carouselID = $(this).attr('id').replace('GC-', '');
    	startProgress(carouselID);
    	$('#GC-head-'+carouselID).addClass('active');
    }
    function startProgress(carouselID){
    	parentWidth = $('#GC-head-'+carouselID).width();
        $('#GC-head-'+carouselID+' .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
    }
    $('.echo2-carousel-item-header').live('click', function(a){
    	var clicked = $(this);
    	$('.echo2-carousel-item-header').each(function(e){
    		console.log(clicked.attr('id'));
    		console.log($(this).attr('id'));
    		if(clicked.attr('id')!=$(this).attr('id')){
    			$(this).children('.carouselProgress').stop();
    		}
    	});
    });
    //$('.echo2-carousel-item').hover(function(){}, function(){});

	$('#echo2-carousel').cycle({
		delay: initialDelay,
		timeout: stepInterval,
		speed: fadeTime,
		after: myAfterCall,
		before: myBeforeCall,
		pager: '#echo2-carousel-header',
		pause: true,
		pagerAnchorBuilder: function(idx, slide) {

			carouselID = slide.id.replace('GC-', '');
			carouselTitle = $(slide).attr('ref');
			if(i==1) {
				myClass="active"

			} else {
				myClass="";
			}
			i++;
			return '<li> \
            <a href="#" class="echo2-carousel-item-header '+myClass+'" id="GC-head-'+carouselID+'"> \
            <div class="carouselProgress"></div> \
             <span class="carouselHeaderContent">'+carouselTitle+'</span> \
                <span class="carouselHeaderDecorator"></span> \
         </a> \
      </li>';
		}
	});
	//$('#echo2-carousel-header:first-child').addClass('active');
	parentWidth = $('#echo2-carousel-header .active .carouselProgress').width();
	$('#echo2-carousel-header .active .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
});