var MooPopup = new Class({
  Implements: Options,
	options: {
	 popupID:'user-readmore-popup',
	 popupInnerID:'user-readmore-popup-inner',
   linkID:'user-readmore-button',
   posID:'mloFooterInMandRight',
   delay: 100,
   scaleX: 100,
   scaleY: 100,
	},

	initialize: function(options) {
		if(Browser.loaded){
			this.setup(options);
		} else{
			window.addEvent('domready', this.setup.pass([options],this));
		}
	},
	setup: function(options) { 
	  this.setOptions(options);
	  
	  this.hidetimer;
    this.hidden = true;
    this.delay = 0;
    this.popupHeight = $(this.options.popupID).getSize().y;
    this.popupWidth = $(this.options.popupID).getSize().x;

    this.popup = new Fx.Morph(this.options.popupID, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
    this.popup.addEvent('complete', function() {
        if (this.hidden) {
          $(this.options.popupID).setStyle('display', 'none');
          $(this.options.popupInnerID).setStyle('display', 'none');
        } else {
          $(this.options.popupInnerID).setStyle('display', 'block');
        } 
    }.bind(this));  
    $(this.options.popupID).setStyle('display', 'none');
    
    $(this.options.popupInnerID).setStyle('display', 'none');
    
    $(this.options.linkID).addEvents({
      click: function(event){
       $clear(this.hidetimer);
			 this.showPopup();
			 event.stop();
      }.bind(this),
      mouseleave: function(){
        this.hidetimer = this.hidefunction.delay(this.delay, this);
      }.bind(this),
      mouseenter: function(event){
       $clear(this.hidetimer);
			 this.showPopup();
			 event.stop();
      }.bind(this),
    });
    $(this.options.popupID).addEvents({
      mouseenter: function(){
       $clear(this.hidetimer);
      }.bind(this),
      mouseleave: function(){
        this.hidetimer = this.hidefunction.delay(this.delay, this);
      }.bind(this)
    });  
  },
  hidefunction: function(){ 
      /*var qnpos = qnStartEnd(0);
      
      delay = 0;
      hidden = true;
      quicknavi.start({
    			height: '0px',
    			top: qnpos['endY']
    	});*/
    	this.hidden = true;
    	$(this.options.popupInnerID).setStyle('display', 'none');
    	$(this.options.popupID).setStyle('display', 'none');
  },
  showPopup: function() {
    if (this.hidden) {
      var poppos = this.popStartEnd(1);
      var PopupEl = $(this.options.popupID);
      PopupEl.setStyle('display', 'block');
      PopupEl.setStyle('top', poppos['startY']);
      PopupEl.setStyle('left', poppos['startX']); 
      PopupEl.setStyle('height', poppos['startHeight']+'px');
      PopupEl.setStyle('width', poppos['startWidth']+'px');
      
      this.popup.start({
      		height: this.popupHeight+'px',
      		width: this.popupWidth+'px',
      		top: poppos['endY'],
      		left: poppos['endX']
      	});
      
      this.delay = this.options.delay;
      this.hidden = false;
    }
  },
  popStartEnd: function(direction){
      var ButtonEl = $(this.options.posID);
      var buttonpos = ButtonEl.getCoordinates();
      var pos = new Array();
      if (direction == 1) {
        pos['startY'] = buttonpos['top']-this.popupHeight + (this.options.scaleY / 2);
        pos['endY'] = buttonpos['top']-this.popupHeight;
        pos['startX'] = buttonpos['left'] - (this.popupWidth - buttonpos['width']) + (this.options.scaleX / 2);
        pos['endX'] = buttonpos['left'] - (this.popupWidth - buttonpos['width']);
        pos['startWidth'] = this.popupWidth - this.options.scaleX;
        pos['startHeight'] = this.popupHeight - this.options.scaleY;
      } else {
        pos['startY'] = buttonpos['top']-this.popupHeight;
        pos['endY'] = buttonpos['top']-this.popupHeight;
        pos['startX'] = buttonpos['left'];
        pos['endX'] = pos['startX'];
      }
      
      return pos;
    }
  
});