$(function () {
   var size = $("div#show li img").size();
   var i = 0;
   var pause = true;
   var delay = 6000;
   var interval = "";
   var displayInstruction = true;

   $("div#show li img").mouseover(pauseResume);
   $("div#show li img").mouseout(pauseResume);

   //   $("div#btn_next span").click(function () {
   //      clearInterval(interval);
   //      $("div#show li img").stop().hide();
   //      $("div#show li div").stop().hide();
   //      if (i < size - 1) i++;
   //      else i = 0;
   //      var temp;
   //      var temp = $("div#show li img")[i];
   //      $(temp).show();
   //      temp = $("div#show li div")[i];
   //      $(temp).show();
   //      interval = setInterval(setupInterval, delay);
   //   });
   //   $("div#btn_prev span").click(function () {
   //      clearInterval(interval);
   //      $("div#show li img").stop().hide();
   //      $("div#show li div").stop().hide();
   //      if (i < 1) i = size - 1;
   //      else i--;
   //      var temp;
   //      var temp = $("div#show li img")[i];
   //      $(temp).show();
   //      temp = $("div#show li div")[i];
   //      $(temp).show();
   //      interval = setInterval(setupInterval, delay);
   //   });

   $("div#btn_next span").click(function () {
      pause = true;
      pauseResume();
      $("div#show li img").fadeOut(500);
      $("div#show li div").fadeOut(500);
      
      if (i < size - 1) i++;
      else i = 0;
      
      var temp = $("div#show li img")[i];
      $(temp).fadeIn(1000);
      temp = $("div#show li div")[i];
      $(temp).fadeIn(1000, pauseResume());
   });
   $("div#btn_prev span").click(function () {
      pause = true;
      pauseResume();
      clearInterval(interval);
      $("div#show li img").fadeOut(500);
      $("div#show li div").fadeOut(500);
      
      if (i < 1) i = size - 1;
      else i--;
      
      var temp = $("div#show li img")[i];
      $(temp).fadeIn(1000);
      temp = $("div#show li div")[i];
      $(temp).fadeIn(1000, pauseResume());
   });
   
   // initial animation on pageLoad -------------------------------------
   slide($("div#show li img"), $("div#show li img")[0], 1000);
   slide($("div#show li div"), $("div#show li div")[0], 1000);

   // call slide at set intervals ---------------------------------------
   interval = setInterval(setupInterval, delay);

   function moveNextSlide() {
      if (i < size - 1) i++;
      else i = 0;
      slide($("div#show li img"), $("div#show li img")[i], 1000);
      slide($("div#show li div"), $("div#show li div")[i], 1000);
   }
   function movePrevSlide() {
      if (i < 1) i = size - 1;
      else i--;
      slide($("div#show li img"), $("div#show li img")[i], 1000);
      slide($("div#show li div"), $("div#show li div")[i], 1000);
   }

   // fade all img's out and fades the current img in -------------------
   function slide(all, curr, speed) {
      $(all).stop().fadeOut(500);
      $(curr).fadeIn(1000);
      //$(all).stop().fadeOut(speed - 1000);
      //$(curr).fadeIn(speed);
   }
   
   function setupInterval() {
      if (i < size - 1) i++;
      else i = 0;
      slide($("div#show li img"), $("div#show li img")[i], 3000);
      slide($("div#show li div"), $("div#show li div")[i], 3000);
   }
   
   // pauses transitions ------------------------------------------------
   function pauseResume() {
      if (displayInstruction) { // fadeOut instructions onmouseover  ----
         displayInstruction = false;
         $('div#slide_instructions').fadeOut(500);
      }
      if (pause) {
         clearInterval(interval);
         pause = false;
      }
      else {
         interval = setInterval(setupInterval, delay);
         pause = true;
      }
   }
});