var Comment=Class.create({
  initialize:function(c){
    this.comment=c;
    this.reportForm=c.down('div.report');
		this.loadedLargeImage = false;
    this.bound_showReportForm=this.showReportForm.bindAsEventListener(this);
    this.bound_hideReportForm=this.hideReportForm.bindAsEventListener(this);
    this.bound_validateReportForm=this.validateReportForm.bindAsEventListener(this);
		this.bound_imageLoader = this.loadAndShowLargeImage.bindAsEventListener(this);

		if (c.down('div.image a')){
			var regex = /(gif|jpeg|jpg|png)$/;
			var link = c.down('div.image a')
			if (link.href.search(regex)!=-1){
				link.observe('click',this.bound_imageLoader);
			}
		}
    if (c.down('span.report a')){
	    c.down('span.report a').observe('click',this.bound_showReportForm);
	    // c.down('span.report').down('a').observe('click',this.bound_showReportForm);
	    var form=this.reportForm.down('form');
	    form.observe('submit',this.bound_validateReportForm);
	    form.down('input[type=submit]').observe('click',this.bound_validateReportForm);
		}
  },
  showReportForm:function(ev){
    this.commentsWrapper=this.comment.up('div.comments');
    this.reportFormHideLink=this.reportForm.down('div.submit span.alt a');
    // this.reportFormHideLink=this.reportForm.down('div.submit').down('span.alt').down('a');
    this.commentsWrapper.select('li.comment div.report').invoke('hide');
    
    /*
    this.reportForm.setStyle({display:'block',left:'490px',opacity:0.0});
    new Effect.Parallel(
      [ new Effect.Move(this.reportForm, {x:-30, y:0, sync:true}),
        new Effect.Opacity(this.reportForm, {to:1.0, sync:true}) ]
    );
    */
    
    this.comment.scrollTo();
    this.reportForm.setStyle({left:(this.comment.getWidth()+10)+'px'}).show();
    this.reportForm.down('form').focusFirstElement();
    this.reportFormHideLink.observe('click',this.bound_hideReportForm);
    ev.stop();
  },
  hideReportForm:function(ev){
    /*
    new Effect.Parallel(
      [ new Effect.Move(this.reportForm, {x:30, y:0, sync:true}),
        new Effect.Opacity(this.reportForm, {to:0.0, sync:true}) ]
    );
    */
    this.reportForm.hide();
    this.reportForm.select('div.error').invoke('hide');
    this.reportFormHideLink.stopObserving('click',this.bound_showReportForm);
    ev.stop();
  },
  validateReportForm:function(ev){
    var form=this.reportForm.down('form');
    if($F(form.down('textarea')).strip()==''){
      var error,errorMsg='Please tell us why you’re reporting this.'
      if(error=form.down('div.error')){
        error.update(errorMsg).show();
      }else{
        form.insert({top:new Element('div',{'class':'error'}).update(errorMsg)});
      }
      form.down('div.submit span.alt').appear({duration:0,queue:'end'});
        // Overrides default hiding of span.alt
      ev.stop();
    }
  },
	loadAndShowLargeImage:function(ev){
		var link = ev.element();
		if (link.tagName =='IMG'){
			link = link.up('a');
		}
		var thumb = link.down('img.thumb');
		if (!this.loadedLargeImage){
			this.loadedLargeImage = true;
			var image = new Image();
			image.onload = function() {
				image.className = 'large';
				thumb.hide();
				link.down('span.loading').remove();
				Element.insert(link,image);
			}
			link.appendChild(new Element('span', { 'class': 'loading' }).update('Loading...'));
			link.down('span').setOpacity(0.8);
			image.src = link.href;
		} else {
			var large = link.down('img.large');
			thumb.toggle();
			large.toggle();
		}
		ev.stop();
	}
});

document.observe('dom:loaded',function(){
  var commentsWrapper;if(commentsWrapper=$('comments')){
    commentsWrapper.select('li.comment').each(function(c){
      new Comment(c);
    });
  }
});