var overlayURLByIndex = new Object();
var overlayURLIndex = 0; // because the first image is hard-coded


      // var $img1; img1 is hard-coded!
      




      var $img2;



      var $img3;



      var $img4;



function beforeSlideNext()
{


      $('#text-overlay').fadeOut(200, function(){

         $(this).load( overlayURLByIndex[ overlayURLIndex ], {}, function(){

            $(this).fadeIn( 300 );

            overlayURLIndex++;

            overlayURLIndex = overlayURLIndex % 4;

         } );

      } );
      
}

    function startCycle()
    {
      // start the cycling
      $('#canvas').cycle({ fx: 'fade', speed: 5000, timeout: 200, before : beforeSlideNext } ); 

        
          $img2.css( { visibility : 'visible' } );
        
          $img3.css( { visibility : 'visible' } );
        
          $img4.css( { visibility : 'visible' } );
    }

    function loadSlideShowImages()
    {
      // setup Image name by index
      
         overlayURLByIndex[0]='/home.site.SiteSplashTextOverlayDiv?productCategoryID=1';
         
      
         overlayURLByIndex[1]='/home.site.SiteSplashTextOverlayDiv?productCategoryID=1';
         
      
         overlayURLByIndex[2]='/home.site.SiteSplashTextOverlayDiv?productCategoryID=1';
         
      
         overlayURLByIndex[3]='/home.site.SiteSplashTextOverlayDiv?productCategoryID=1';
         
      
        // hide the images
        
        // load the images
        
        // the first image is hard-coded
        // var $img1 = $(new Image());

          $img2 = $(new Image());
          $img3 = $(new Image());
          $img4 = $(new Image());

        // the first image is hard-coded
        // $img1.attr('id','img-slideshow-1' );
          $img2.attr('id','img-slideshow-2' );
          $img3.attr('id','img-slideshow-3' );
          $img4.attr('id','img-slideshow-4' );

        // the first image is hard-coded
        //$img1.css( { visibility : 'hidden' } );
          $img2.css( { visibility : 'hidden' } );
          $img3.css( { visibility : 'hidden' } );
          $img4.css( { visibility : 'hidden' } );
        
        // the first image is hard-coded
        // $img1.click( function(){alert('yo');});
        


      
        // the first image is hard-coded
        // $img1.click( function(){alert('yo');});
          function onImg2Loaded()
          {
               var $wrapper = $('#canvas' );
               $wrapper.append( $img2 );
               
               $img3.attr('src', '/c/i/@producthome/category-business-cards/splash-business-cards-c.jpg' );
            
          }
          function onImg3Loaded()
          {
               var $wrapper = $('#canvas' );
               $wrapper.append( $img3 );
               
               $img4.attr('src', '/c/i/@producthome/category-business-cards/splash-business-cards-d.jpg' );
            
          }
          function onImg4Loaded()
          {
               startCycle();
          }
      
      
        // the first image is hard-coded
        // $img1.click( function(){alert('yo');});
          function onImg2Error()
          {
               $img3.attr('src', '/c/i/@producthome/category-business-cards/splash-business-cards-c.jpg' );
          }
          function onImg3Error()
          {
               $img4.attr('src', '/c/i/@producthome/category-business-cards/splash-business-cards-d.jpg' );
          }
          function onImg4Error()
          {
               startCycle();
          }
      

        // the first image is hard-coded
          $img2.load( onImg2Loaded );
          $img2.error( onImg2Error );
          $img3.load( onImg3Loaded );
          $img3.error( onImg3Error );
          $img4.load( onImg4Loaded );
          $img4.error( onImg4Error );
      

        // once the image loads add it as a child
        // the first image is hard-coded
             $img2.attr('src', '/c/i/@producthome/category-business-cards/splash-business-cards-b.jpg' );
    }

$("document").ready( function(){

   loadSlideShowImages();
   
   $('#canvas').css( { visibility : 'visible' } );
   
} );