(function($){

var ns = 'Floatingize';

window[ns] = function ( root, options ) {
  this.root = $(root);
  this.options = options;
  
  this.prepare();
  this.reset();
  this.setFilter( this.options.filter );
  this.go();
  
  this.observe();
  if ( appleDevice() ) {
    new TouchScroll( '#wrap', this.absRoot.get(0) );
  }
};

window[ns].prototype = {
  
  observe: function () {
    $(window).bind("smartresize", $.proxy( this.resize, this ) );
  },
  
  resize: function () {
    this.go();
  },

  prepare: function () {
    this.staticRoot  = this.root.find('ul');
    this.absRoot     = this.staticRoot.clone();
    this.absRoot.appendTo(this.root);
    
    this.staticItems = this.staticRoot.find('li');
    this.absItems    = this.absRoot.find('li');

    /* add class */
    this.staticRoot.addClass('static');
    this.absRoot.addClass('absolute');
    
    /* css */
    this.root.css('position', 'relative');
    this.staticRoot.css('opacity', 0);
    this.absRoot.css({
        position: 'absolute',
        top: 0,
        left: 0
      });
      
    if ( this.options.hidden ) this.absRoot.css('opacity', 0.0);
  },
  
  reset: function () {
    this.absItems.css({
        position: 'absolute',
        top: 0,
        left: 0
      });
  },
  
  getPosition: function () {
    var data = this.position_data = [];
    
    this.staticItems.each( function ( i, element ) {
        var self = $(element);
        var info = $.extend( self.position(), { width: self.width() + 1, height: self.height(), hidden: self.is(':hidden') } );
        data.push( info );
      });
    
  },
  
  setDimension: function () {
    var height = this.staticRoot.height();
    var width  = this.staticRoot.width();
    this.absRoot.css({height: height, width: width});
    if ( $.browser.msie ) {
      $('#main').css({height: height});
    }

    var data = this.position_data;
    this.absItems.each( function ( i, element ) {
        $(element).css({
            width:  data[i].width,
            height: data[i].height
          });
      });
  },
  
  move: function () {
    var data = this.position_data;
    this.absItems.each( function ( i, element ) {
        var self = $(element);

        if ( data[i].hidden ) {
          self.fadeOut();
          return;
        }
        
        var animation = {
          top:  data[i].top,
          left: data[i].left
        };
        
        if ( self.is(":hidden") ) {
          self.css('opacity',0.0).show();
          animation.opacity = 1.0;
        }
        
        self.animate( animation );

      });

  },
  
  /**
   * call from navigator clicks
   */
  switchFilter: function ( target ) {
    this.clearDefaultHidden();
    
    var filter = false;
    if ( target.hasClass('cat-button') ) {
      filter = target.get(0).getAttribute('catid');
      site.set('category', getCategorySlug( filter ), getCategoryTitle( filter ) );
    } else {
      site.set('home');
    }
    
    this.setFilter( filter );
    this.go();
  },
  
  /**
   * set filter
   */
  setFilter: function ( filter_id ) {
    this.options.filter = filter_id;
    
    if ( ! filter_id ) {
      this.staticItems.css('display', 'block');
      return;
    }
    
    this.staticItems.css('display', 'none');
    var target = this.staticRoot.find('span.in-cat-' + filter_id).parent();
    target.css('display', 'block');
  },
  
  /**
   * call from project closed
   */
  show: function () {
    this.clearDefaultHidden();
    this.reset();
    this.go();
  },
  
  /**
   * clear default hidden
   */
  clearDefaultHidden: function () {
    if ( this.options.hidden ) {
      this.options.hidden = false;
      this.absRoot.css('opacity', 1.0);
    }
  },

  go: function () {
    
    this.staticRoot.show();

    this.getPosition();
    this.setDimension();
    this.move();

    this.staticRoot.hide();
  }
  
}

})(jQuery);