// hitolog Galleries

(function($) {
  $.hitologGalleries = function(data, options) {
    return new HitologGalleries(data, options);
  };

  $.fn.hitologGalleries = function(options) {
    return new HitologGalleries(this.get(0), options);
  };

  // constructor
  function HitologGalleries(obj, options) {
    var defaults = {
      numItems: 20,
      wrapperClass: "galleriesWrapper",
      itemWidth: 64,
      itemHeight: 64,
      speed: 2000
    };
    var options = $.extend(defaults, options);

    this.oBaseElm = $(obj);
    this.options = options;
    this.initialize();
  }

  // class implementation
  HitologGalleries.prototype = {
    initialize: function() {
      var self = this;

      // vars
      this.aoItems = [];
      this.nNumInitialItems = this.options.numItems;
      this.bIsMouseOver = 0;

      // elements
      this.oContainer = $("<div />", {
        css: {
          "position": "relative",
          "overflow": "hidden",
          "background": "#ccc",
          "width": this.options.itemWidth * this.options.numItems,
          "height": this.options.itemHeight
        },
        "class": this.options.wrapperClass
      }).appendTo(this.oBaseElm);
      for (var i = 0; i < this.options.numItems + 1; i++) {
          var div = $("<div />", {
            css: {
              "left": this.options.itemWidth * i,
              "top": 0,
              "position": "absolute"
            }
          })
          .mouseenter(function() { self.bIsMouseOver = 1; })
          .mouseout(function() { self.bIsMouseOver = 0; })
          .appendTo(this.oContainer);
      }
    }
    ,

    canMove: function() {
      if (this.bIsMoving || this.bIsMouseOver) {
        return false;
      }
      return true;
    }
    ,    

    moveLeft: function(item) {
      if (this.bIsMoving) {
        return;
      }
      this.bIsMoving = true;
      this.nNumMoved = 0;
      this.nNumItems = this.oContainer.children().length;
      var speed;
      if (this.nNumInitialItems > 0) {
        this.nNumInitialItems--;
        speed = 0;
      } else {
        speed = this.options.speed;
      }
      var self = this;
      this.oContainer.children().each(function() {
        if ($(this).position().left >= self.options.itemWidth * self.options.numItems) {
          $(this).children().remove();
          $(this).append(item);
        }
        $(this).animate(
          { left: $(this).position().left - self.options.itemWidth },
          speed,
          "linear",
          function() { self.onMoved($(this)); }
        );
        
      });
    }
    ,
    moveRight: function(item) {
      if (this.bIsMoving) {
        return;
      }
      this.bIsMoving = true;
      this.nNumMoved = 0;
      this.nNumItems = this.oContainer.children().length;
      var self = this;
      this.oContainer.children().each(function() {
        if ($(this).position().left >= self.options.itemWidth * self.options.numItems) {
          $(this).css({ left: self.options.itemWidth * -1 });
          $(this).children().remove();
          $(this).append(item);
        }
        $(this).animate(
          { left: $(this).position().left + self.options.itemWidth },
          self.options.speed,
          "linear",
          function() { self.onMoved($(this)); }
        );
        
      });
    }
    ,
    onMoved: function(item) {
      var self = this;
      this.nNumMoved++;
      if (this.nNumMoved == this.nNumItems) {
        this.oContainer.children().each(function() {
          if ($(this).position().left <= -self.options.itemWidth) {
            $(this).css({ left: self.options.itemWidth * self.options.numItems });
          }
        });
        this.bIsMoving = false;
        if (this.options.onMoved) {
          this.options.onMoved();
        }
      }
    }
  }

})(jQuery);

// hitolog RecentSeenHitos Galleries

(function($) {
  $.hitologRSHGalleries = function(data, options) {
    return new HitologRSHGalleries(data, options);
  };

  $.fn.hitologRSHGalleries = function(options) {
    return new HitologRSHGalleries(this.get(0), options);
  };

  // constructor
  function HitologRSHGalleries(obj, options) {
    var defaults = {
      numItems: 13,
      wrapperClass: "recentSeenHitosWrapper",
      itemWidth: 64,
      itemHeight: 64,
      speed: 1500,
      apiInterval: 10000,
      saveItems: 200
    };
    var options = $.extend(defaults, options);

    this.oBaseElm = $(obj);
    this.options = options;
    this.initialize();
  }

  // class implementation
  HitologRSHGalleries.prototype = {
    initialize: function() {
      var self = this;
      if (!this.options.api) {
        alert("api is required.");
        return;
      }

      // vars
      this.bIsApiBusy = false;
      this.aoItems = [];
      this.aoItemsTrush = [];

      // Galleries
      var galOpts = $.extend({
        onMoved: function() {
          self.onMoved();
        }
      }, this.options);
      this.galleries = $.hitologGalleries(this.oBaseElm, galOpts);

      // timer
      this.onApiTimer();
    }
    ,

    moveLeft: function() {
      alert('move left');
    }
    ,
    moveRight: function() {
      alert('move right');
    }
    ,

    onMoved: function() {
      if (this.galleries.canMove()) {
        if (this.aoItems.length > 0) {
          var item = this.aoItems.shift();
          var elm =
            $("<a />")
              .attr("href", item.hito_url)
              .append(
                $("<img />")
                  .attr("src", item.hito_image_size70_url)
              );
          this.galleries.moveLeft(elm);
        }
      } else {
        var self = this;
        setTimeout(function() { self.onMoved(); }, 1000);
      }
    }
    ,

    // api timer events
    onApiTimer: function() {
      if (!this.bIsApiBusy) {
        this.bIsApiBusy = true;
        this.options.api.callApi(
          "hito/recent_seen",
          {},
          function(url, inData, outData) { self._onApiSuccess(url, inData, outData); },
          function(url, inData, outData, textStatus) { self._onApiError(url, inData, outData, textStatus); }
        );
      }
      var self = this;
      setTimeout(function() { self.onApiTimer(); }, this.options.apiInterval);
    }
    ,
    _onApiSuccess: function(url, inData, outData) {
      var numItems = outData.response.hito.length;
      for (var i = numItems - 1; i >= 0; i--) {
      //for (var i = 0; i < numItems; i++) {
        this.addItem(outData.response.hito[i]);
      }
      this.onMoved();
      this.bIsApiBusy = false;
    }
    ,
    _onApiError: function(url, inData, outData, textStatus) {
      this.bIsApiBusy = false;
    }
    ,
    addItem: function(item) {
      for (var i = 0; i < this.aoItemsTrush.length; i++) {
        if (this.aoItemsTrush[i].hito_url == item.hito_url) {
          return;
        }
      }
      this.aoItems.push(item);
      this.aoItemsTrush.push(item);
      if (this.aoItemsTrush.length > this.options.saveItems) {
        this.aoItemsTrush.shift();
      }
    }
  }
})(jQuery);