/*  onsen.js
 *  (c) 2009 interspace
 * this script needs Prototype.js.
 *--------------------------------------------------------------------------*/
var InputHelp = Class.create();
InputHelp.prototype = {
  initialize: function(message, element) {
    this.message = message;
    this.element = $(element);
    Event.observe(this.element, "focus", this.hiddenHelp.bind(this));
    Event.observe(this.element, "blur", this.showHelp.bind(this));
    Event.observe(this.element.parentNode, "submit", this.hiddenHelp.bind(this));
    if (! this.element.value) this.showHelp();
  },
  showHelp: function() {
    if (! this.element.value) this.element.value = this.message;
  },
  hiddenHelp: function () { 
    if (this.element.value == this.message) this.element.value = "";
  }
};


var SwitchView = Class.create();
SwitchView.prototype = {
  view:{},
  initialize: function(target, element, viewFlag) {
    this.view[target]= element;
    this.id = target;
    Event.observe($(target), "click", this.displayOn.bind(this));
    if (viewFlag == 1) {
      Element.show(element);
    } else {
      Element.hide(element);
    }
  },
  displayOn: function() {
    for (var elm in this.view) {
      if (this.id == elm) {
        Element.show(this.view[elm]);
      } else {
        Element.hide(this.view[elm]);
      }
    }
  }
};


var Meter = Class.create();
Meter.maxValue = 20;
Meter.meter = {
  clear:   { src: '/images/onsen/masu_03.gif' },
  onsen:   { src: '/images/onsen/masu_01.gif' },
  tokusan: { src: '/images/onsen/masu_02.gif' }
};

Meter.prototype = {
  initialize: function(itemId, counter, insertArea, button, sendTo, meter) {
    this.counter = counter;
    this.sendTo = sendTo;
    this.meter = meter;
    this.itemId = itemId;
    this.insertArea = insertArea;
    this.button = button;
    Event.observe($(this.button), "click", this.increment.bind(this));
    this.initDraw();
  },
  
  initDraw: function() {
    for(var i = 0; i < Meter.maxValue; ++i) {
      if (i < this.counter.getCount()) {
        $(this.insertArea).insert({bottom: new Element('img', {src: this.meter.src, alt:'', width:9 ,height:19})});
      } else {
        $(this.insertArea).insert({bottom: new Element('img', {src: Meter.meter.clear.src, alt:'', width:9 ,height:19})});
      }
    }
    if (document.cookie.indexOf(this.itemId) >= 0) {
      this.turnOffMeter();
    }
  },
  
  increment: function() {
    if (this.lock) return;
    this.lock = true;
    this.counter.increment();
    new Ajax.Request(this.sendTo,  { method: 'get', parameters: $H({item_id: this.itemId}).toQueryString()});
    if (this.counter.getCount() <= Meter.maxValue) {
      this.clearMeter();
      setTimeout(this.drawWithAnimation.bind(this, 0, 100), 300);
    }
    this.turnOffMeter();
  },
  
  turnOffMeter: function() {
    Event.stopObserving($(this.button), 'click', this.handler);
    new Effect.Opacity(this.button, {from:1.0, to: 0.4, duration: 0.5});
    Element.setStyle($(this.button), {'cursor': 'default'});
  },

  lock: false,
  drawWithAnimation: function(index, a) {
    if (index < this.counter.getCount()) {
      $(this.insertArea).replaceChild(new Element('img', {src: this.meter.src, alt:''}), $(this.insertArea).childNodes.item(index));
      setTimeout(this.drawWithAnimation.bind(this, ++index), a-5);
    }
  },
  clearMeter: function() {
    if ($(this.insertArea).firstChild) {
      for(var i = 0; i < this.counter.getCount(); ++i) {
        $(this.insertArea).replaceChild(new Element('img', {src: Meter.meter.clear.src, alt:''}), $(this.insertArea).childNodes.item(i));
      }
    }
  }
}