(function($) {
  $.widget('ui.gallery', {
    _init: function() {
      var $element = $(this.element).hide();
      var gallery = this;
      $.ajax({
        url:$element.attr('href'),
        type:'get',
        success: function(xml) {
          gallery._build(xml);
        }  
      });
    },

    _build: function(xml) {
      var gallery = this;
      $(this.element).next('.gallery-container').remove();

      var container = $('<div class="gallery-container ' + this.options.kind + '"><div class="gallery-inner"><ul class="folders"></ul><div class="images"><a class="prev" href="#">«</a><a class="next" href="#">»</a></div></div></div>');
      var folders = container.find('.folders');
      var images = container.find('.images');

      $(xml).find('item').each(function() {
        var folder_name = gallery.options.showFolders ? $(this).find('folder').text().replace(/^\/([^\/]+\/)*/, '') : 'all';
        var folder_title = folder_name.substr(0, 1).toUpperCase() + folder_name.substr(1).replace('_', ' ');
        var folder = images.find('.folder[title=' + folder_title + ']');
        if (folder.length == 0) {
          folders.append('<li><a href="#folder_' + folder_name + '">' + folder_title + '</a></li>');
          folder = $('<div class="folder" id="folder_' + folder_name + '" title="' + folder_title + '"><h3>' + folder_title + '</h3><ul></ul></div>').appendTo(images);
        }

        var img = $('<li id="image_' + $(this).find('id').text() + '" class="image" title="' + $(this).find('title').text() + '"><p>' + $(this).find('description').text() + '</p><span class="border"></span></li>');
        img.css({ backgroundImage:'url(' + $(this).find('url').text() + ')' }).appendTo(folder.find('ul'));
      });

      images.find('.folder').each(function() {
        $(this).find('ul').css({ width:($(this).find('ul li').length * 164) + 'px', left:'0px' });
      });

      images.find('.folder li').hoverIntent(function() {
        if ($(this).closest('.gallery-container').hasClass('gallery')) {
          $(this).find('p').animate({ bottom:'-20px' }, 500, 'easeOutBounce');
        }
      }, function() {
        if ($(this).closest('.gallery-container').hasClass('gallery')) {
          $(this).find('p').animate({ bottom:'-72px' }, 500, 'easeOutBounce');
        }
      });

      images.find('a.prev, a.next').click(function() {
        if (!($(this).hasClass('prev-disabled')) && !($(this).hasClass('next-disabled'))) {
          var folder = $(this).siblings('.folder:visible').find('ul');
          var x = parseInt(folder.css('left')), x2;
          var w = parseInt(folder.css('width')) - 164 * 5;
          if ($(this).hasClass('prev')) {
            x2 = Math.min(0, x + 164 * 4);
          } else {
            x2 = Math.max(-w, x - 164 * 4);
          }
          folder.animate({ left:x2 + 'px' });
          images.find('a.prev').toggleClass('prev-disabled', x2 >= 0);
          images.find('a.next').toggleClass('next-disabled', x2 <= -w);
        }
        return false;
      });
      images.find('a.prev').addClass('prev-disabled');

      folders.find('a').click(function() {
        var $a = $(this);
        $(this).closest('.folders').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
        $(this).closest('.gallery-container').find('.images .folder:visible').fadeOut(function() {
          gallery.container.find('.folder ul').css({ left:'0px' });
          $($a.attr('href').replace(/^[^\#]+/, '')).fadeIn(function() {
            gallery.container.find('a.prev').addClass('prev-disabled');
            gallery.container.find('a.next').toggleClass('next-disabled', $(this).find('li').length <= 5);
          });
        });
        return false;
      }).eq(0).closest('li').addClass('first');

      if (gallery.options.showKindSwitch) {
        var switcher = $('<ul class="switch"><li><a class="switch-gallery" href="#gallery">Gallery <small>fabric selector</small></a></li><li><a class="switch-list" href="#list">List <small>fabric selector</small></a></ul>').appendTo(container);
        switcher.find('a').click(function() {
          if (!($(this).closest('li').hasClass('active'))) {
            var $a = $(this);
            var kind = $a.attr('href').replace(/^[^\#]*\#/, '');
            $a.closest('ul').find('li').removeClass('active');
            $a.closest('li').addClass('active');
            gallery.setKind(kind);
          }
          return false;
        }).filter('.switch-' + this.options.kind).closest('li').addClass('active');
      }

      $('.gallery-container.list .folder li hr').live('click', function() {
        var container = $(this).closest('.gallery-container');
        var thumbnail = $(this).closest('li');
        container.find('.expanded').click();
        var expanded = $('<div class="expanded"></div>');
        expanded.css({ width:'96px', height:'96px', marginTop:'0px', marginLeft:'0px', background:thumbnail.css('background') }).appendTo(thumbnail);
        expanded.css({ backgroundPosition:'50% 50%' });
        expanded.animate({ width:'144px', height:'204px', marginTop:'-54px', marginLeft:'-26px' }, 250, 'easeOutCubic');
      });
      $('.gallery-container.list .folder li .expanded').live('click', function() {
        $(this).css({ zIndex:19 }).animate({ width:'96px', height:'96px', marginTop:'0px', marginLeft:'0px' }, 125, function() { $(this).remove(); });
      });

      this.container = container;
      this.setKind(this.options.kind);
      container.insertAfter(this.element);
      return this;
    },
  
    destroy: function() {
      $.widget.prototype.apply(this, arguments); // default destroy
    },

    setKind: function(k) {
      var gallery = this;
      var container = this.container;
      this._setData('kind', k);
      container.find('.folders:visible').fadeOut();
      container.find('.expanded').click();
      container.find('.gallery-inner').hide('blind', function() {
        $(this).closest('.gallery-container').attr('class', 'gallery-container ' + k);
        switch(k) {
        case 'gallery':
          $(this).find('.images .folder').hide().eq(0).show();
          $(this).find('.images ul').css({ left:'0px' });
          $(this).find('a.prev').addClass('prev-disabled');
          $(this).find('a.next').toggleClass('next-disabled', $(this).find('.images .folder').eq(0).find('li').length <= 5);
          if (gallery.options.showFolders) {
            container.find('.folders li').removeClass('active').eq(0).attr('class', 'active first').parent().fadeIn(function() {
              var w = 0;
              $(this).find('li').each(function() { w += $(this).width(); });
              $(this).css({ width:w+'px' });
            });
          } else {
            container.find('.folders').hide();
          }
          $(this).find('.images li p').css({ bottom:'-72px' });
          break;
        case 'list':
          $(this).find('.images .folder').show()
            .find('p').css({ bottom:'-20px' });
          break;
        }
        $(this).show('blind');
      });
    }
  });

  $.ui.gallery.defaults = {
    showFolders: true,
    kind: 'gallery',
    showKindSwitch: true
  }
})(jQuery);

$(function() {
  $('a[rel*=gallery]').gallery();
});