/*
 *  Article loading Class
 *  - This class performs an ajax request to acquire and
 *  - paginate articles.
 *  
 */
var articleLoader = Class.create({
  active: null,
  initialize: function(to,from) {
    this.article = $(to);
    this.lnk = $$('#'+from+' a');
    this.lnk.each(function(a, index) {
      a.id = "item_" + index;
      a.observe('click',this.getPage.bindAsEventListener(this, index));
    }.bind(this));
    this.highlightPage(1);
  },
  getPage: function(evt, index) {
    //perform checking to see if we are getting a previous or next page
    if(index == 0 && this.active.id.slice(5) != 1) {
      index = Number(this.active.id.slice(5)) - 1;
    } else if (index == this.lnk.length - 1 && this.active.id.slice(5) != this.lnk.length - 2) {
      index = Number(this.active.id.slice(5)) + 1;
    }
    this.highlightPage(index);
    // actual link href is used as request string - server side processing from there
    new Ajax.Request(this.lnk[index].href, {
      method: 'get',
      onComplete: this.showResponse.bind(this)
    });
    Ajax.Responders.register({
      onCreate:showLoadImg(this.article)
    });
    //new advertisement(this.lnk[index].href);
    Event.stop(evt);
  },
  highlightPage: function(index) {
    this.lnk.each(function(a) {
      a.removeClassName("current");
    });
    this.lnk[index].addClassName("current");
    this.active = this.lnk[index];
    this.lnk[0].style.visibility = (index == 1) ? 'hidden' : 'visible';
    this.lnk[this.lnk.length - 1].style.visibility = (index == this.lnk.length - 2) ?  'hidden' : 'visible';
    this.updatePrintUrl(index);
  },
  showResponse: function(transport) {
    var article = this.article;
    setTimeout(function() {
      article.update(transport.responseText);
      new Effect.ScrollTo(article, {duration:1, offset:-250});
    }, 100);
  },
  updatePrintUrl : function(index) {
    var link = $$('#print a')[0];
    if (link) {
      link.href = link.href.replace(/pageNumber=\d+/, 'pageNumber=' + index);
    }
  }
});



/*
 *  Comment loading Class
 *  - This class can be used to fetch more comments via Ajax
 *  - by hijacking the supplied url
 *  
 */


var commentLoader = Class.create({
  initialize: function(div) {
    this.commentBox = div;
    this.lnks = $A($$('#'+div+' a'));
    //this.tracker = $$('#'+div+' p span');
    this.lnks.each(function(a, index) {
      a.id = "comm_" + index;
      a.observe('click',this.getComments.bindAsEventListener(this, index));
    }.bind(this));
    this.highlightPage(1);
  },
  getComments: function(evt, index) {
    if(index == 0 && this.active.id.slice(5) != 1) {
      index = Number(this.active.id.slice(5)) - 1;
    } else if (index == this.lnks.length - 1 && this.active.id.slice(5) != this.lnks.length - 2) {
      index = Number(this.active.id.slice(5)) + 1;
    }
    this.highlightPage(index);
    new Ajax.Request(this.lnks[index].href, {
      method: 'get',
      onComplete: this.showResponse.bind(this)
    });
    Event.stop(evt);
  },
  showResponse: function(transport) {
    var response = eval("("+transport.responseText+")");
    // parsed response will depend on what the server sends back. - may not need parsing at all
    var parsed = '';
    //this.tracker[0].innerHTML = response.startInt * 10 + 1;
    //this.tracker[1].innerHTML = response.startInt * 10 + response.comments.length;

    for (var i=0; i < response.comments.length; i++) {
      if(i == 3) {
        parsed += "<div id='all_comments'>\n";
      }
      parsed += "<div class='member_container'>\n";
      parsed += "<div class='member_comment_container'>\n";
      parsed += "<a href='#' class='member_pic'><img src='"+response.comments[i]['img']+"' alt='' class='global' /></a>\n";
      parsed += "<p class='member_comment'>"+response.comments[i]['body']+"</p>\n";
      parsed += "</div>";
      parsed += "<a href='#' class='member_name'>"+response.comments[i]['name']+"</a>\n";
      parsed += '<div class="member_rating"><img src="http://static.oprah.com/images/global/rating_on.gif" alt=""/><img src="http://static.oprah.com/images/global/rating_on.gif" alt=""/><img src="http://static.oprah.com/images/global/rating_off.gif" alt=""/><img src="http://static.oprah.com/images/global/rating_off.gif" alt=""/><img src="http://static.oprah.com/images/global/rating_off.gif" alt=""/></div>'+"\n";
      parsed += '<div class="member_comment_time">'+response.comments[i]['time']+' | <a href="#" title="report abuse"><img src="http://static.oprah.com/images/global/myoprah_icons_reportabuse_15x15.gif"></a></div>'+"\n";
      parsed += "</div>\n";
      if(i == response.comments.length -1) {
        parsed += "</div>\n";
      }
    }
    $('replace_comments').update('');
    $('replace_comments').update(parsed);
    new Effect.ScrollTo('your_comments', {duration:.75, offset:-50});
  },
  highlightPage: function(index) {
    this.lnks.each(function(a) {
      a.removeClassName("current");
    });
    this.lnks[index].addClassName("current");
    this.active = this.lnks[index];
    this.lnks[0].style.display = (index == 1) ? 'none' : 'inline';
    this.lnks[this.lnks.length - 1].style.display = (index == this.lnks.length - 2) ?  'none' : 'inline';
  }
});

var advertisement = Class.create({
  initialize: function(url) {
    // process as necessary to get new src of advertisements [serverside];
    if($('advertisement745x90') && $('advertisement300x250')) {
      $('advertisement745x90').src = 'http://static.oprah.com/images/global/spacer.gif';
      $('advertisement300x250').src = 'http://static.oprah.com/images/global/spacer.gif';
    } else {
      window.status = 'advertisements are not set properly' ;
    }
  }
});

function showLoadImg(parent) {
  var img = new Image();
  img.src = "http://static.oprah.com/images/global/loading.gif";
  img.style.cssFloat = 'left';
  parent.appendChild(img);
}