jQuery( document ).ready( function () {
        
   for (var i = 0; i < aCarousel.length; i++) {
     jQuery( 'div.indicator' ).append( '<span class="product_' + (i + 1) + '">&bull;</span>' );
  }

  //jQuery( 'div#divSubMenu' ).css('visibility','hidden');
  jQuery( 'div#divSubMenu' ).fadeOut('fast');
  // initialize carousel
  jQuery( 'ul.carousel' ).jcarousel( {

    animation: 2000,
    auto: '4',
    easing: 'easeInOutExpo',
    scroll: 3,
    //wrap: 'both',
    wrap: 'circular',
    buttonNextHTML: null,
    buttonPrevHTML: null, 
    size: 1000,

    initCallback: function ( carousel ) {
      jQuery( 'a.carousel_next' ).bind( 'click', function() { carousel.next(); return false; } );
      jQuery( 'a.carousel_next img' ).bind( 'click', function() { carousel.next(); return false; } );
      jQuery( 'a.carousel_prev' ).bind( 'click', function() { carousel.prev(); return false; } );
      jQuery( 'a.carousel_prev img' ).bind( 'click', function() { carousel.prev(); return false; } );
    },

    itemVisibleInCallback: {

      onBeforeAnimation: function ( carousel, item, i, state, evt ) {
        var nIndex = carousel.index( i, aCarousel.length );
        


          carousel.add(i, '<a class="product" href="/' + aCarousel[nIndex - 1].url + '"><img src="asset/upload/image/' + aCarousel[nIndex - 1].src + '" alt="' + aCarousel[nIndex - 1].title + '" /><div class="carTitle" style="display:none">'+ aCarousel[nIndex - 1].title +'</div></a>');
          
          
        jQuery( 'ul.carousel a.external' ).click( function() { window.open( jQuery( this ).attr( 'href' ) ); return false; } );
        jQuery( 'ul.carousel h1, ul.carousel div.status' ).hide();
        jQuery( 'div.left div' ).fadeOut( 'fast' );

        // if (stupid) IE... assign path/set css values
        if (jQuery.browser.msie && jQuery.browser.version <= 7 && aCarousel[nIndex - 1].statusID) {
          var sSelector = 'ul.carousel div.status_' + aCarousel[nIndex - 1].statusID;
          var sSRC      = jQuery( sSelector ).css( 'backgroundImage' ).replace( /(^url\("|"\)$)/g, '' );
          jQuery( sSelector ).css( { 'background' : '', 'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader( src="' + sSRC + '", sizingMethod="crop" )' } );
        }
  
  //jQuery( 'div.carTitle' ).hide();
  jQuery( 'a.product' ).hover(
    function () { jQuery( this ).children( 'div.carTitle' ).fadeIn(); },
    function () { jQuery( this ).children( 'div.carTitle' ).fadeOut(); }
    );        
        
      },

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

        var nIndex = carousel.index( i, aCarousel.length );

        // if (stupid) IE...
        if (jQuery.browser.msie && jQuery.browser.version <= 7) {

          // show heading/image
          jQuery( 'ul.carousel h1, ul.carousel div.status' ).show();

        } else { jQuery( 'ul.carousel h1, ul.carousel div.status' ).fadeIn( 'slow' ); }

        jQuery( 'div#divProperty_' + aCarousel[nIndex - 1].id ).fadeIn( 'slow' );
      }
    },

    itemVisibleOutCallback: { onAfterAnimation: function ( carousel, item, i, state, evt ) { carousel.remove( i ); } },
    
    itemFirstInCallback: { onAfterAnimation: function ( carousel, item, i, state ) { displayIndicator( aCarousel, 'product', item ); } } 

  } );

  // initialize arrow hover
  //jQuery( 'a.arrow img' ).hover(
  //  function () { jQuery( this ).css( 'opacity', 0.7 ); },
  //  function () { jQuery( this ).css( 'opacity', 1.0 ); }
  //);

  // initialize promotion hover
  jQuery( 'div.promotion' ).css( 'opacity', 0.7 );
  jQuery( 'div.promotion' ).hover(
    function () { jQuery( this ).css( 'opacity', 0.9 ); jQuery( this ).animate( { width: 240 }, 400, 'easeOutExpo', function() { if (jQuery( this ).css( 'opacity' ) != 0.7) { jQuery( this ).children( 'p' ).fadeIn( 'fast' ); } } ); },
    function () { jQuery( this ).css( 'opacity', 0.7 ); jQuery( this ).children( 'p' ).fadeOut( 100, function () { jQuery( this ).parent( 'div' ).animate( { width: 110 }, 400, 'easeOutExpo' ); } ); }
  );

    jQuery( 'div.indicator' ).show();
    

} );

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.indicator span[class^=' + sMode + ']' ).removeClass( 'active' );

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