$(function() {
    // run the currently selected effect
    function runEffect(current, next) {
      // get effect type from 
      var $images = $(".imageToRotate");
      var selectedEffect = "fade"; //$( "#effectTypes" ).val();
      //protects against issue if only one image
      if(next >= $images.length)
      {
        next = 0;
      }
      var following = next + 1;
      if(following >= $images.length)
      {
        following = 0;
      }
      
      // most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 0 };
      } else if ( selectedEffect === "transfer" ) {
        options = { to: "#button", className: "ui-effects-transfer" };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }

      // run the effect
      //$( ".imageToRotate" ).effect( selectedEffect, options, 500, callback );
      var $curImage =  $($images[current]);//$($images[div++] || []);
      var $nextImage =  $($images[next]);
      $curImage.effect( selectedEffect, options, 2000 );
      setTimeout(function() {nextIn(current, next);}, 2100);
      //nextIn(current, next);
      //$curImage.fadeOut('slow');
      //$curImage.hide();
      //$nextImage.fadeIn('slow');
      //setTimeout(function() {
      //  runEffect(next, following);
      //}, 5000);
    };
    
    function nextIn(previous, next)
    {
      var $images = $(".imageToRotate");
      var $previousImage = $($images[previous]);
      var $nextImage =  $($images[next]);
      
      //If the previous fade is still animating
      if($previousImage.is(':animated'))
      {
        setTimeout(function() {nextIn(previous, next);}, 1000);
      }
      else
      {
        //$nextImage.fadeIn('slow');
        $nextImage.effect( 'slide', null, 2000 );
        setTimeout(function() {
          runEffect(next, next+1);
        }, 5000);
      }
    }

    // callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( ".imageToRotate" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };

    $(document).ready(function(){
      var $images = $(".imageToRotate").hide(),
        div=0;
      $($images[0]).show();
      if($images.length > 1)
      {
        setTimeout(function() {
          runEffect(0 , 1);
        }, 2000 );
      }
      //setTimeout(function() {
      // get effect type from
      //var selectedEffect = "fade"; //$( "#effectTypes" ).val();
      
      
      // most effect types need no options passed by default
      //var options = {};
      // some effects have required parameters
      //if ( selectedEffect === "scale" ) {
      //  options = { percent: 0 };
      //} else if ( selectedEffect === "transfer" ) {
      //  options = { to: "#button", className: "ui-effects-transfer" };
      //} else if ( selectedEffect === "size" ) {
      //  options = { to: { width: 200, height: 60 } };
      //}

      // run the effect
      //$( ".imageToRotate" ).effect( selectedEffect, options, 500, callback );
      //var $curImage =  $($images[div++] || []);
      //$curImage.fadeIn('slow');
      //$curImage.effect( selectedEffect, options, 500, arguments.callee );      }, 2000 );

    });

  });