/// <reference path="mootools.js" />

/* Expected structure */
/*
<div class="starrating" data="{id: 1}">
   <ul class='rating star0'>
      <li class='rate1'><a href="#">1</a></li>
      <li class='rate2'><a href="#">2</a></li>
      <li class='rate3'><a href="#">3</a></li>
      <li class='rate4'><a href="#">4</a></li>
      <li class='rate5'><a href="#">5</a></li>
   </ul>
   <span>(<span class="votes">0</span> votes)</span>
   <span><img src="/images/ajax-loader.gif" alt="" class="ajaxLoading" /><span class="message"> </span></span>
</div>
*/

var Ratings = new Class({
   initialize: function(containerEl) {
      this.containerEl = containerEl;
      this.ratingsUl = this.containerEl.getElement('ul');
      this.messageEl = this.containerEl.getElement('.message');
      this.votesEl = this.containerEl.getElement('.votes');
      this.ajaxImgEl = this.containerEl.getElement('.ajaxLoading');
      this.timeoutsIds = {
         hideMessage: null
      };

      this.data = JSON.decode(this.containerEl.get('data'));

      var thisObj = this;
      var rateFn = this.rate;

      this.containerEl.getElements('ul li a').each(function(a) {
         a.addEvent('click', rateFn.bindWithEvent(thisObj, a));
      });
   },
   rate: function(e, el) {
      var rq = new Request({ url: Ratings.url });
      this.showLoading(this.ajaxImgEl, this.messageEl);

      var rating = parseInt(el.get('text'));

      rq.addEvent('success', this.onSuccess.bindWithEvent(this, rating));
      rq.addEvent('failure', this.onFailure.bindWithEvent(this));

      rq.send(Ratings.queryFormat.substitute({ id: this.data.id, rating: rating }));
   },
   onSuccess: function(responseText, rating) {

      this.hideLoading();
      this.showMessage(responseText, true);

      var ul = this.ratingsUl;

      Ratings.styles.each(function(myStyle) {
         if (ul.hasClass(myStyle))
            ul.removeClass(myStyle)
      });

      Ratings.styles.each(function(myStyle, index) {
         if (index == rating)
            ul.toggleClass(myStyle);
      });

      this.votesEl.set('text', parseInt(this.votesEl.get('text')) + 1);
   },
   onFailure: function(xhr) {
      this.hideLoading(this.ajaxImgEl);
      this.showMessage(xhr.responseText, this.messageEl, true);
   },
   showLoading: function() {
      this.ajaxImgEl.setStyle('visibility', 'visible');
      this.showMessage('Please wait...', false);
   },
   hideLoading: function() {
      this.ajaxImgEl.setStyle('visibility', 'hidden');
   },
   showMessage: function(message, hide) {
      $clear(this.timeoutsIds.hideMessage);
      this.messageEl.fade(1);
      this.messageEl.set('text', message);
      if (hide)
         this.timeoutsIds.hideMessage = this.hideMessage.delay(5000, this);
   },
   hideMessage: function() {
      this.messageEl.fade(0);
   }
});

// static configuration
Ratings.url = ''; // the service URL
Ratings.queryFormat = ''; // the querystring format
Ratings.styles = ['star0', 'star1', 'star2', 'star3', 'star4', 'star5'];