//-------------------------------------------------------------------------------------
//	JibberBook v2.0
//	(c) 2007 Chris Jaure
//	license: MIT License
//	website: http://www.chromasynthetic.com/
//
//	inc/jbscript.js
//-------------------------------------------------------------------------------------

Element.extend({
	injectHTML: function(content, where){
		new Element('div').setHTML(content).getChildren().inject(this, where);
		return this;
	}
});

var Guestbook = {
  
  // object variables
	obj : {},
	fx: {},
	mouseDown : false,
	offset: 2,
	
	/*
    Function: submitForm
    
    Captures form submission event and uses ajaxReq instead.
    It also sets the form value _ajax to true, enabling the server-side script to differentiate regular submissions from ajax submissions.
	*/
	submitForm : function (event) {
		files = $$("#photoupload-queue li .queue-file");
		files.each(function(file, y){
			if (file.innerHTML!=""){
				$('fotos').value = ';' + file.innerHTML.replace("'", "") + $('fotos').value;			
			}
		});
		
		//console.log(this.obj.form.elements['fotos'].value);
		this.loading();
		this.obj.form.elements['_ajax'].value = true;
		this.ajaxReq.send(this.obj.form.getProperty('action'), this.obj.form.toQueryString());
		event.stop();
	},
	
	/*
    Function: processAddResponse
    
    Attached to onComplete event of ajaxReq. Expects JSON object to be returned from the server with 'value', 'content', and 'message' properties.
    
    value:
      1 indicates successful addition of comment
      2 indicates comment flagged as spam
      >=3 indicates validation error
    content: contains comment html if value == 1
    message: contains descriptive text associated with response 
  */
  processAddResponse : function () {
    var response = Json.evaluate.attempt(this.ajaxReq.response.text);
    if (response) {
      if (response.value != '1') {
        this.showMessage(response.message, 'error');
        if (response.value == '2') this.obj.form.reset();
      }
      else {
        this.obj.commentWrapper.injectHTML(response.content, 'top');
        var new_comment = this.obj.commentWrapper.getFirst();
        if (this.obj.scroller == window) {
          this.fx.scroll.toElement(this.obj.commentWrapper).chain(function(){this.showMessage(response.message, 'confirm');}.bind(this));
        } else {
          this.fx.scroll.toTop();
          this.showMessage(response.message, 'confirm');
        }
      	this.obj.form.reset();
      }
    } else this.showMessage('An error has occurred.', 'error');
    this.loaded();
  },
	
	/*
	  Function: processLoadComments
	  
	  Attached to onComplete event of loadComments. Expects JSON object to be returned from the server with 'value' and 'content' properties.
	  
	  value:
	    0 indicates no additional comments to load
    content: contains comment html
	*/
	processLoadComments : function () {
    var response = Json.evaluate(this.loadComments.response.text);
    if (response.value == '0') {
      this.obj.scroller.removeEvents();
      this.obj.loadingMessage.setText('All comments have been loaded.');
    }
    this.obj.loadingMessage.injectHTML(response.content, 'before');
  },
  
  /*
    Function: loading
    
    Used to indicate ajax activity.
  */
	loading : function () {
		this.obj.submitButton.setProperties({'disabled': true, 'value': 'Loading...'});
	},
	
	/*
	  Function: loaded
	  
	  Reverses actions of loading().
	*/
	loaded : function () {
		this.obj.submitButton.setProperties({'disabled': false, 'value': this.obj.submitButton.orgVal});
	},
	
	/*
	  Function: show
	  
	  Attached to obj.scroller scroll event. Determines when to load additional comments.
	*/
	show : function () {
	  if (!this.mouseDown) {
  	  var dimensions = this.obj.scroller.getSize();
  	  var offset = (this.obj.scroller == window) ? 0 : this.obj.scroller.getTop();
      if (this.obj.loadingMessage.getTop() - offset < dimensions.scroll.y + dimensions.size.y) {
        if (!this.loadComments.running) {
          this.loadComments.send('actions/loadcomments.php', 'offset=' + this.offset);
          this.offset++;
        }
      }
    }
	},
	
  /*
    Function: showMessage
    
    Shows a message based on text and type.
    
    Parameters:
      text - Message text to show.
      type - Class to be applied to message container (overwrites all previous classes).
    
  */
  showMessage : function (text, type) {
    this.obj.messageWrapper.setStyles({
      'left': (window.getWidth() / 2 - 150),
      'top': window.getScrollTop() + 30,
      'opacity': 0
    })
    this.obj.messageWrapper.className = type;
    this.obj.messageWrapper.getFirst().setText(text);
    this.fx.message.start(0.9);
  },
  
  /*
    Function: initialize
    
    This method must be called to start the script and enable ajax functionality.
    
    Parameters:
      form - id of the form
      comments - id of comments wrapper
      message - id of the message wrapper
  */
	initialize : function (form, comments, message, loading) {
	
	var input = $('photoupload-filedata-1');
	var uplooad = new FancyUpload(input, {
		swf: 'inc/Swiff.Uploader.swf',
		queueList: 'photoupload-queue',
		container: $E('h1'),
		instantStart: true
	});
	
	
    // set objects
    this.obj.form = $(form);
		this.obj.commentWrapper = $(comments);
		this.obj.comments = this.obj.commentWrapper.getChildren();
		this.obj.messageWrapper = $(message);
		this.obj.submitButton = this.obj.form.getElement('input[type=submit]');
		this.obj.submitButton.orgVal = this.obj.submitButton.value;
		this.obj.loadingMessage = $(loading);
		var parent = this.obj.commentWrapper;
		while (parent) {
		  if (parent.getTag() == 'body') {
        this.obj.scroller = window; 
        parent = null;
        break;
      }
		  var overflow = parent.getStyle('overflow');
		  if (overflow == 'auto' || overflow == 'scroll') {
        this.obj.scroller = parent; 
        parent = null;
      } else parent = parent.getParent();
    }

    // set effects
		this.fx.message = new Fx.Style(this.obj.messageWrapper, 'opacity');
		this.fx.scroll = new Fx.Scroll(this.obj.scroller, {'duration': 1000, 'transition': Fx.Transitions.Circ.easeInOut});
    
    // set hxr objects 
    this.loadComments = new XHR({method: 'get', 'onSuccess': this.processLoadComments.bind(this)});
    this.ajaxReq = new XHR({method: 'post', 'onSuccess': this.processAddResponse.bind(this), 'onFailure': function () {
			this.showMessage('Your comment could not be added. Please try again later.', 'error');
			this.loaded();
		}.bind(this)});
		
    // attach events
    this.obj.messageWrapper.addEvent('mouseover', function(){
      this.fx.message.start(0);
    }.bind(this));
    if (this.obj.loadingMessage) {
      this.obj.loadingMessage.setText('More comments are loading. If you are using the scrollbar, please release your mouse.');
      this.obj.scroller.addEvents({
        'scroll' : this.show.bind(this),
        'mousedown' : function () {
          this.mouseDown = true;
        }.bind(this),
        'mouseup' : function () {
          this.mouseDown = false;
          this.show();
        }.bind(this)
      });
    }
    this.obj.form.addEvent('submit', this.submitForm.bindWithEvent(this));
    
    // misc
    if (window.ie6) this.obj.messageWrapper.setStyle('zoom', 1); // fix background issue in ie6
	}
};