//
//
//jQuery(function(){
//
//
//
//    jQuery.noConflict();
//
//    jQuery('#slideshow').cycle({
//        fx:     'fade',
//        speed:  1000,
//        timeout: 9000,
//        pager:  '#nav',
//        slideExpr: 'img',
//        pagerAnchorBuilder: function(idx, slide) {
//            return '<li><a href="#">' + jQuery(slide).attr('alt') + '</a></li>';
//        }
//
//    });
//
//
//
//});

jQuery(document).ready(function(){
  // Get the slide show container first
  var objSlideshow = jQuery('#slideshow');

  // Get slide show container position
  var objPosistion = objSlideshow.position();

  // Create loading interface, to wait the preload
  var objLoading = jQuery('<div></div>').css({
    position: 'absolute',
    top: objPosistion.top,
    left: objPosistion.left,
    width: objSlideshow.width(),
    height: objSlideshow.height(),
    background: 'url("' + jQuery('#loading-indicator').attr('src') + '") center no-repeat'
  }).appendTo(objSlideshow.parent());

  // Hide the slide show container first, to wait the preload finish
  objSlideshow.css('visibility', 'hidden');

  // Do preload, after all images loaded, start the cycle
  var imagesSlideshow = jQuery('img', objSlideshow);
  var totalImages = imagesSlideshow.length;
  var iTotalImage = 0;

  imagesSlideshow.each(function(){
    jQuery('<img />').attr('src', jQuery(this).attr('src')).load(function(){
      iTotalImage++;

      if (totalImages == iTotalImage) {
        // Destroy the loading object
        objLoading.remove();

        // Start the cycle
        objSlideshow.css('visibility', 'visible').cycle({
          fx: 'fade',
          speed: 1000,
          timeout: 9000,
        pager:  '#nav',
        slideExpr: 'img',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#">' + jQuery(slide).attr('alt') + '</a></li>';
        }
       });
     }
   });
 });
});