// TODO
//   Delay cannot be less than duration
//   Each slideshow needs its own timer
$(document).ready(function(){
  var $slides   = $("#gallery-front ul.slides li"),
      $triggers = $("#gallery-front ul.mn li"),
      timeout   = 400;

  $("#gmaps").show();

  $.fn.gallery = function(opts){
    opts = $.extend({
      delay: 3500,    // Time between slide changes
      duration: 1000, // Duration of transition
      easing: 'linear',
      slideSelector: "ul.slides li",
      controlSelector: "ul.mn li",
      pauseOnHover: true,
      before: null // Called before transition
    },opts);

    var timeout;

    function pause(){
      this.data('current').animate({opacity:1}, 100, opts.easing, function() {});
      clearTimeout(timeout);
    }

    function unpause(){
      var self = this;
      timeout = setTimeout(function() { transitionTo.call(self) }, opts.delay);
    }

    // Don't animate, just jump directly to a slide
    function moveTo($slide) {
      var self = $(this);
      $slide.show();
      if (opts.before) { opts.before.call(self, $slide); }
      self.data('current').hide();
      self.data('current', $slide);
      pause.call(self);
    }

    function transitionTo() {
      var self = this,
          $c   = this.data('current'), 
          $n   = $c.next().length ? $c.next() : this.data('slides').eq(0);

      if (opts.before) { opts.before.call(self, $n); }

      $c.animate({opacity:0}, opts.duration, opts.easing, function() { $c.hide().removeClass('active'); });
      $n.show().animate({opacity:1}, opts.duration, opts.easing, function(){ $n.addClass('active')})

      this.data('current', $n);

      timeout = setTimeout(function() { transitionTo.call(self) }, opts.delay);
    }

    return this.each(function(){
      var self    = $(this),
          $slides = self.find(opts.slideSelector);

      if (opts.pauseOnHover) { self.hover(function(){pause.call(self)},function(){unpause.call(self)}); }

      self.bind('transition', function(e,slide){
        e.preventDefault();
        moveTo.call($(this), $(slide));
      });

      $slides
        .css({position: 'absolute', top:0, left:0})
        .hide()
        .each(function(i) { 
           $(this).css('z-index', $slides.length-i) 
        })
        .eq(0).show();

      self
        .data('slides',  $slides)
        .data('current', $slides.eq(0));

      timeout = setTimeout(function() { transitionTo.call(self) }, opts.delay);
    })
  }

  $("a", $triggers).click(function(e){
    e.preventDefault();
    var $trigger = $(e.target),
        $slide   = $('#'+$trigger.attr('name'));
    $slide.trigger('transition', $slide);
  });

  // Loading
  var img = new Image();
  img.src = $("#gallery-front li img:first").attr("src");

  $("<img id='spinner' src='/wp-content/themes/sfac/images/spinner.gif' />")
  .appendTo("#gallery-front")
  .css({
      position:"absolute"
    , top: "140px"
    , left: "464px"
  })
  .fadeIn();

  $("#gallery-front ul.slides li:first").hide()

  $(img).load(function(){
    setTimeout(function(){
      $("#spinner").fadeOut(function(){
        $("#gallery-front ul.slides li:first")
        .fadeIn(function(){
          $("#gallery-front").gallery({
            before: function($slide){
              var $trigger = $triggers.find("[name='"+$slide.attr('id')+"']");
              $triggers.removeClass('active');
              $trigger.parent().addClass('active');
            }
          });
        })
      });
    }, timeout);
  });

});