// Utility function
// that means this calls stuff directly and isn't reusable
funBlowUpText = function(strTargetXPath, enterSize, leaveSize) {
  $(strTargetXPath).addEvents({
    'mouseenter': function() {
      var objFx = new Fx.Styles(this, {'duration': 200});
      objFx.start({
        'backgroundColor': '#20aff4',
        'fontSize': enterSize
      });
    },
    'mouseleave': function() {
      var objFx = new Fx.Styles(this, {'duration': 300});
      objFx.start({
        'backgroundColor': '#008fd4',
        'fontSize': leaveSize
      });
    }
  });
}

SlideMenu = new Class({
  'initialize': function(strParentXPath, strTargetXPath, strInnerXPath) {
  	this.parentTarget = $E(strParentXPath);
    this.objTarget = $(strTargetXPath);
    this.objTarget.addEvent('mouseleave', this.hide.bind(this));
    this.objSlider = new Fx.Slide(strInnerXPath, {'mode': 'horizontal'});
    this.objSlider.hide();
    this.objTarget.setStyles({
      'display': 'none',
      'visibility': 'visible'
    });
    this.binIsShowing = false;
  },
  'show': function() {
    if(!this.binIsShowing) {
      intRightSide = this.parentTarget.getCoordinates().right;
      this.objTarget.setStyle('left', intRightSide);
      this.objTarget.setStyle('display', 'block');
      this.binIsShowing = true;
      this.objSlider.slideIn();
    }
  },
  'hide': function() {
    if(this.binIsShowing) {
      this.objSlider.addEvent('onComplete', this.hideOnComplete.bind(this));
      this.objSlider.slideOut();
    }
  },
  'hideOnComplete': function() {
    this.objTarget.setStyle('display', 'none');
    this.binIsShowing = false;
    // I can't get removeEvent to work correctly so I'm directly overwriting the onComplete event.
    this.objSlider.$events.onComplete = null;
  }
});

var objSlideMenu;

window.addEvent('domready', function() {
  funBlowUpText('flashy', 20, 15);
  objSlideMenu = new SlideMenu('.left', 'slideMenu', 'slideInnerMenu');
});