var nCAROUSEL_COUNT = 3;
var oIndex = { brand: null, category: null, store: null };
var oMode  = { brand: null, category: null, store: null };

jQuery( document ).ready( function () {

  initCarousel( 'brand' );
  initCarousel( 'category' );
  initCarousel( 'store' );

  startCarousel( 'store' );

  //jQuery( 'div.carousel_outer a.arrow' ).show();
  jQuery( 'div.carousel_outer a.arrow' ).css('visibility','visible');

  jQuery( 'div.search input' ).click( function () {

    var sMode = (jQuery( this ).attr( 'id' ).split( '_' ))[1];
    startCarousel( sMode );

    //jQuery( 'div.carousel_inner, div.carousel_outer div.indicator span' ).hide();
    jQuery( 'div.carousel_inner' ).css('visibility','hidden');
    jQuery( 'div.carousel_outer div.indicator span' ).hide();
    //jQuery( 'div.carousel_' + sMode + ', div.carousel_outer div.indicator span[class^=' + sMode + ']' ).show();
    jQuery( 'div.carousel_' + sMode ).css('visibility','visible');
    jQuery( 'div.carousel_outer div.indicator span[class^=' + sMode + ']' ).show();

  } );

} );

function initCarousel( sMode ) {

  var aCarousel = eval( 'aCarousel_' + sMode );

  //console.log(aCarousel);

  // initialize indicator
  for (var i = 0; i < aCarousel.length; i++) {
    jQuery( 'div.carousel_outer div.indicator' ).append( '<span class="' + sMode + '_' + (i + 1) + '">&bull;</span>' );
  }
/*
  if (aCarousel.length > nCAROUSEL_COUNT) {
    for (var i = 0; i < Math.ceil( aCarousel.length / nCAROUSEL_COUNT ); i++) {
      jQuery( 'div.carousel_outer div.indicator' ).append( '<span class="' + sMode + '_' + (i + 1) + '">&bull;</span>' );
    }
  }
*/

    //jQuery( 'div.carousel_inner, div.carousel_outer div.indicator span' ).hide();
    jQuery( 'div.carousel_inner' ).css('visibility','hidden');
    jQuery( 'div.carousel_outer div.indicator span' ).hide();
    //jQuery( 'div.carousel_' + sMode + ', div.carousel_outer div.indicator span[class^=' + sMode + ']' ).show();
    jQuery( 'div.carousel_' + sMode ).css('visibility','visible');
    jQuery( 'div.carousel_outer div.indicator span[class^=' + sMode + ']' ).show();

  // initialize carousel
  jQuery( 'div.carousel_' + sMode + ' ul' ).jcarousel( {

    animation: 3000,
    auto: 3,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    easing: 'easeInOutExpo',
    scroll: nCAROUSEL_COUNT,
    wrap: 'circular',

    initCallback: function ( carousel ) {

      //console.log( carousel );

      oMode[sMode] = carousel;

      jQuery( 'a.carousel_next' ).click( function () { carousel.next(); return false; } );
      jQuery( 'a.carousel_prev' ).click( function () { carousel.prev(); return false; } );

      carousel.clip.hover( function() { carousel.stopAuto(); }, function() { carousel.startAuto(); } );
    },

    itemVisibleInCallback: {

      onBeforeAnimation: function ( carousel, item, i, state, evt ) {

        oIndex[sMode] = carousel.index( i, aCarousel.length );
        carousel.add( i, '<a href="/' + aCarousel[oIndex[sMode] - 1].url + '"><img class="asset" src="asset/upload/image/' + aCarousel[oIndex[sMode] - 1].src + '" alt="' + aCarousel[oIndex[sMode] - 1].title + '" /></a><a href="/' + aCarousel[oIndex[sMode] - 1].url + '">' + aCarousel[oIndex[sMode] - 1].title + '</a>' );
      },

      onAfterAnimation: function ( carousel, item, i, state, evt ) { carousel.index( i, aCarousel.length ); }
    },

    itemVisibleOutCallback: { onAfterAnimation: function ( carousel, item, i, state, evt ) { carousel.remove( i ); } },

    itemFirstInCallback: { onAfterAnimation: function ( carousel, item, i, state ) { displayIndicator( aCarousel, sMode, item ); } }

  } );
}

function startCarousel( sMode ) {

  // loop modes
  for (var i in oMode) { oMode[i].stopAuto(); }

  oMode[sMode].startAuto();
}

function displayIndicator( aCarousel, sMode, item ) {

  var nModulo = jQuery( item ).attr( 'jcarouselindex' ) % aCarousel.length;
  var nItem   = nModulo > 0 ? nModulo : aCarousel.length;
  //var nActive = Math.ceil( nItem / nCAROUSEL_COUNT );

  jQuery( 'div.carousel_outer div.indicator span[class^=' + sMode + ']' ).removeClass( 'active' );

  for (var i = nItem; i < nItem + 3; i++) {
    jQuery( 'div.carousel_outer div.indicator span.' + sMode + '_' + (i == aCarousel.length ? i : i % aCarousel.length) ).addClass( 'active' );
  }

/*
  if (aCarousel.length > nCAROUSEL_COUNT) {
    for (var i = 0; i < Math.ceil( aCarousel.length / nCAROUSEL_COUNT ); i++) {
      var nBullet = i + 1;
      if (nBullet <= nActive) { jQuery( 'div.carousel_outer div.indicator span.' + sMode + '_' + nBullet ).addClass( 'active' ); }
    }
  }
*/
}