/*
Class: Login
  collects functions for the login screen

Note:
  static class
*/

var Login = {
  
  /*
  Property: showError
    animates the appearance of an error message;
    shakes the login form
  
  Arguments:
    message - the text for the error message to be shown  
  */
  
  showError: function(message) {
    $('login').shake();
	Messages.error(message, { position: 'centered', waitForClick: '1' });
  }
};


window.getInnerDimensions = function() {
  if (self.innerHeight) 
    return { height: self.innerHeight, width: self.innerWidth }; // != IE
  else if (document.documentElement && document.documentElement.clientHeight) // IE7/IE6 Strict
    return { height: document.documentElement.clientHeight, width: document.documentElement.clientWidth };
  else if (document.body) // IE
    return { height: document.body.clientHeight, width: document.body.clientWidth };
}

var Messages = {
  
  /*
  Property: show
    animates the appearance of a message;
    sets text, styles, position of a message
  
  Arguments:
    type - the type of message, e.g. 'success', 'error', etc.
    text - the text of the message to be shown
    options - optional, an object which can contain a <position> property
      <position> can be 'centered', which centers the message absolutely to the page
      <element> - the element to append the message to
  */
  
  show: function(type, text, options) {
	this.blink = 0;	
	var dateCreation = new Date();
	dateCreation = dateCreation.getTime();
	document.onclick = null;
    var effectOptions = options ? options : { wait: 0 };
    var message = new Element('div', {
      'class': 'message'
    });
	
    options = $extend({
      element: document.body, 	// By default message will be injected into the BODY element
	  delay: 3000,				// By default the message will be shown for 3000ms
	  waitForClick: 0,			// By default the message will not wait for click
	  onClickFunction: null,	// the function to be called after click event	
      position: 'centered' 		// and it will be centered by default
    }, options);	
    	
	var message_graph = new Element('div', {
		'class': 'message_' + type
	});
	message.adopt(message_graph);		
		
	var message_text = new Element('div', {
		'class': 'message text'
	}).set('html', text);
	message.adopt(message_text);
	
	if(options.waitForClick != 0) {							
		var message_key_info = new Element('div', {
			'class': 'message_key_info',
			'id': 'message_key_info'		
		}).set('html', "Weiter mit Mausklick!");
		message.adopt(message_key_info);	
	}
	    	
    if(options.position) {
      if(options.position == 'centered') {
        var windowdimensions = window.getInnerDimensions();
        message_graph.setStyles({
           position: 'absolute',
           top: windowdimensions.height/2-120,
           left: windowdimensions.width/2-125
        });       		
        message_text.setStyles({
           position: 'absolute',
           top: windowdimensions.height/2-120,
           left: windowdimensions.width/2-125
        });       
		if(options.waitForClick != 0) {
			message_key_info.setStyles({
			   position: 'absolute',
			   top: windowdimensions.height/2-120,
			   left: windowdimensions.width/2-125
			});       		
		}
      } else {
        message_graph.setStyles({
           position: 'absolute',
           top: options.position.top,
           left: options.position.left
        });	  
        message_text.setStyles({
           position: 'absolute',
           top: options.position.top,
           left: options.position.left
        });
		if(options.waitForClick != 0) {
			message_key_info.setStyles({
			   position: 'absolute',
			   top: options.position.top,
			   left: options.position.left
			});		
		}
      }
    }
    
    var messageOpacityEffect = new Fx.Tween(message, {
      duration: 400,
      onComplete: function() {
		message.destroy();
      }
    }).set('opacity', 0);
    
	delay = options.delay;	
	message.injectInside(options.element);
		
	(function() { message.setStyle('opacity', 1); }).delay(effectOptions.wait);
	
	if(options.waitForClick != 0) {
		var showContinueHint = window.setInterval("Messages.waitForMouse()", 500);
		document.onclick = function(e) {
			var dateCreated = new Date();
			dateCreated = dateCreated.getTime();
			//wait for min. 700 ms until hide is possible
			if((dateCreated - dateCreation) > 700) {
				(function() { messageOpacityEffect.start('opacity', 0); }).delay(10);
				document.onclick = null;
				window.clearInterval(showContinueHint);							
				if(options.onClickFunction != null) {
					(function() { options.onClickFunction(); }).delay(10);
				}
			}
		}
	}
	else {
		(function() { messageOpacityEffect.start('opacity', 0); }).delay(delay);
	}
  },
  
  waitForMouse: function() {
	if(this.blink == 0) {
		this.blink = 1;
		$('message_key_info').setStyle("visibility", "hidden");
	}
	else {
		this.blink = 0;
		$('message_key_info').setStyle("visibility", "visible");
	}
  },
  
  /*
  Property: success
    shows a success message
  */

  success: function(text, options) {
    Messages.show('success', text, options);
  },
  
  /*
  Property: error
    show an error message
  */
  
  error: function(text, options) {
    Messages.show('error', text, options);
  }
};

Element.implement({

	shake: function(props){
	  var delta = 50;
	  var originalMargin = this.getStyle('margin-left').toInt();
	  var shakeFx = new Fx.Tween(this, {transition: Fx.Transitions.linear, duration: 100});
	  shakeFx.start('margin-left', originalMargin + delta/2).chain(function(){
	    shakeFx.start('margin-left', originalMargin - delta/4).chain(function(){
	      shakeFx.start('margin-left', originalMargin + delta/4).chain(function(){
	        shakeFx.start('margin-left', originalMargin - delta/8);
	      });
	    });
	  });
		return this;
	}

});