$(document).ready(function () {
    /* Dots Slider 1 */
    $(function () {
        $('#imageSlider')
      .after('<div id="imageSliderNav">')
      .cycle({
          fx: 'fade',
          speed: 1550,
          timeout: 8000,
          pager: '#imageSliderNav'
      });
  });

  //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
  //Vertical Sliding
  $('.boxgrid.slidedown').hover(function () {
      $(".cover", this).stop().animate({ top: '-260px' }, { queue: false, duration: 300 });
  }, function () {
      $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
  });
  //Horizontal Sliding
  $('.boxgrid.slideright').hover(function () {
      $(".cover", this).stop().animate({ left: '325px' }, { queue: false, duration: 300 });
  }, function () {
      $(".cover", this).stop().animate({ left: '0px' }, { queue: false, duration: 300 });
  });
  //Diagnal Sliding
  $('.boxgrid.thecombo').hover(function () {
      $(".cover", this).stop().animate({ top: '260px', left: '325px' }, { queue: false, duration: 300 });
  }, function () {
      $(".cover", this).stop().animate({ top: '0px', left: '0px' }, { queue: false, duration: 300 });
  });
  //Partial Sliding (Only show some of background)
  $('.boxgrid.peek').hover(function () {
      $(".cover", this).stop().animate({ top: '90px' }, { queue: false, duration: 160 });
  }, function () {
      $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 160 });
  });
  //Full Caption Sliding (Hidden to Visible)
  $('.boxgrid.captionfull').hover(function () {
      $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 160 });
  }, function () {
      $(".cover", this).stop().animate({ top: '136px' }, { queue: false, duration: 160 });
  });
  //Caption Sliding (Partially Hidden to Visible)
  $('.boxgrid.caption').hover(function () {
      $(".cover", this).stop().animate({ top: '160px' }, { queue: false, duration: 160 });
  }, function () {
      $(".cover", this).stop().animate({ top: '220px' }, { queue: false, duration: 160 });
  });


  $(function () {
      // run the currently selected effect
      function runEffect(targetobject, effect) {
          // most effect types need no options passed by default
          var options = {
              direction: 'left',
              distance: 5,
              times: 2
          };

          // run the effect
          $(targetobject).effect(effect, options, 200, callback(targetobject));
      };

      // callback function to bring a hidden box back
      function callback(targetobject) {
          setTimeout(function () {
              $(targetobject).removeAttr("style");
          }, 10);
      };

      // set effect from select menu value
      $("#starburst").hover(function () {
          runEffect("#starburst", "shake");
          return false;
      });

      // set effect from select menu value
      $("#speech1").hover(function () {
          runEffect("#speech1", "shake");
          return false;
      });

      // set effect from select menu value
      $("#twitter1").hover(function () {
          runEffect("#twitter1", "shake");
          return false;
      });
  });


});