(function($) {
  $.fn.related = function() {
    return $('#' + (this[0].id.split('-')[0] == 'gallery' ? 'houses' : 'floorplans') + '-' + this[0].id.split('-')[1]);
  };

  $.fn.scrollableArea = function(axis) {
    var sliderItemList = this.find('ul'),
        container      = $('#gallery-' + (axis == 'horizontal' ? 'menu' : 'view')),
        track          = container.find('.track'),
        handle         = container.find('.ui-slider-handle');

    if (axis == 'horizontal') {
      var controls  = [ track, container.find('.prev'), container.find('.next') ],
          max       = (134 * sliderItemList.find('li').length) + 35 - container.find('.scrollable').outerWidth(),
          slide     = function(event, ui) { sliderItemList.css('left', -ui.value + 29); },
          change    = function(event, ui) { sliderItemList.animate({ left: -ui.value + 29 }); };
    } else {
      var controls = [ track ],
          max      = (118 * sliderItemList.find('li').length) + 12 - container.height(),
          slide    = function(event, ui) { sliderItemList.css('top', -ui.value + 12); },
          change   = function() {};
    }

    // Deactivate old scrollable
    track.slider('destroy');

    if (max > 0) {
      track.slider({ axis: axis, max: max, slide: slide, animate: 1, change: change }); // Start slider tracking
      handle.fadeIn(); // Show slider handle
      
      // Fade-in slider controls
      $.each(controls, function() { this.animate({ opacity: 1 }); });

      // Listen to next/prev clicks
      if (axis == 'horizontal') {
        var width = container.find('.scrollable').outerWidth() + "px";
        container.find('.prev').mousedown(function() { track.slider("moveTo","-=" + width); return false; });
        container.find('.next').mousedown(function() { track.slider("moveTo","+=" + width); return false; });

        var activeItem = sliderItemList.find('li.active');
        if (activeItem.length > 0)
          track.slider("moveTo", (activeItem.position().left + 15));
        else
          sliderItemList.find('li:first').click();
      }
    } else {
      handle.fadeOut();                                        // Hide slider handle
      // Fade-out slider controls
      $.each(controls, function() { this.animate({ opacity: 0.5 }).unbind('click'); });
    }

    return this;
  };

  $(document).ready(function() {
    // Initialize first item
    var list   = $('#gallery-menu .tabs li'),
        active = list.filter('.active'),
        inited = false;

    if (active.length < 1)
      active = list.filter(':first');

    // Toggle active when clicked
    list.mousedown(function() {
      if (inited && $(this).hasClass('active'))
        return false;
      
      if (inited)
        active.removeClass('active').related().fadeOut();

      active = $(this).addClass('active');
      active.related()[inited ? 'fadeIn' : 'show']();
      active.related().scrollableArea('horizontal');
      
      inited = true;
      return false;
    });
    
    // Initialize the first/active category
    active.mousedown();
    
    $('#gallery-view .scrollable').scrollableArea('vertical');
    $('#gallery-view li[target]').click(function() {
      $('.zoomed:visible').fadeOut();
      $($(this).attr('target')).fadeIn();
      return false;
    });
  });
})(jQuery);